❤
npm
Sign UpSign In

yatl

0.0.2 • Public • Published

okay, so.. what's yatl( thx to @nhunzaker for the name)... long story short.. it takes your JSON and converts it to HTML

oh yeah.. and it works, of course, on both server and browsers

Quick Start

Code:

var yatl = require('yatl');
 
var tpl = {
  html: {
    $in: [
      { body: {
        onload: "console.log('dom ready')",
        $in : "YO",
        $for: [3, {a: {href:'page.html',$in: 'lol'}}]
      }}
    ]
  }
}
console.log(yatl.compile(tpl));

Output:

<html>
<body onload="console.load('dom ready')">
YO
<a href="page.html">lol</a>
<a href="page.html">lol</a>
<a href="page.html">lol</a>
</body>
</html>
 

Documentation

the general syntax for a tag is:

{
 <tagname>: {
   <attr>: <val>
   <attr>: <val>
 }
}

Plugins:

yatl supports plugins, which means you can easily add keywords to create your own 'macros'. for instance $in and $for are plugins. you can use the .bind() function to load your own plugins

var yatl = require('yatl');
yatl.bind('attr', '$example', function(arr) {
  return 'hi from a plugin';
});

this code says that 'hi from a plugin' should be inserted into the attributes of the html tag when $example is found in the template. just replace 'attr' with 'inside' to get the output code inserted into the innerHTML

$in
{
 <tagname>: {
   $in: <param>
 }
}

params is a (string|number|array of valid yatl tags) that will be compiled and inserted into the innerHTML of the tag

$for
{
 <tagname>: {
   $for: [<times>,{tag: {}}]
 }
}

times is the numer of times the tag specified has to be repeated tag is the tag that has to be repeated

/yatl/

    Package Sidebar

    Install

    npm i yatl

    Weekly Downloads

    0

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • yawn
    Try on RunKit
    Report malware