xsalt

xsalt

A different kind of template engine

Why another templating engine? I'm sure that question was asked before mustache or handlebars were started. Why not, I say?

• I hate {{value}} style templating engines
• I hate the phrases "syntactic sugar" and "sugaring", so salt...
• xsalt is a play on "XSLT", old school xml templating
• once your templates are xsalt-ed, they are exalted

xsalt uses native document node manipulation to work with templates. There is one regex in the entire codebase. The syntax is meant to blend in with regular HTML, and the API is meant to feel like you are working with the native DOM. Because of that, nodes can be wrapped in jQuery (or other) and manipulated in a very natural way that blends with your code. See the examples for more.

Unstable

xsalt is brand new. The API is beginning to stabilize but might change radically from one version to the next. File a bug if you find one please and take a look at the open issues.

I like to jump into examples before API docs, so...

Examples

// Basic usage: prefix elements to process with "xs:"
// Supported attributes are val, html, and each
// val populates the value attribute
// html sets innerHTML
// each iterates over a collection of properties and executes val or html
// val and html essentially correspond to properties in the data object you pass in

var eat = {
    food: {
        vegetables: [
            { name: "Corn" },
            { name: "Peas" },
            { name: "Carrots" }
        ],
    }
};

// output: <form method="POST" action="process.php"><input type="text" name="folder" value="Corn"><input type="text" name="folder" value="Peas"><input type="text" name="folder" value="Carrots"></form>
console.log(xsalt('<form method="POST" action="process.php"><xs:input type="text" each="food.vegetables" val="name" name="folder">').compile(eat));


var data = {
    users: [
        { username: 'ross', type: 1 },
        { username: 'steve', type: 1 },
        { username: 'bob', type: 2 },
        { username: 'dan', type: 1 },
        { username: 'trudy', type: 2 },
        { username: 'lucy', type: 1 }
    ]
};

var list = xsalt('<ul class="items users">'
+ '<xs:li each="users" html="username" data-action="some action">');

// passing in a callback, you can work with the DOM node. Wrap $(node) and
// you can do anything you want to it. or use native methods

// output: <ul class="items users"><li data-action="some action">ross</li><li data-action="some action">steve</li><li data-action="some action" class="edit">bob</li><li data-action="some action">dan</li><li data-action="some action" class="edit">trudy</li><li data-action="some action">lucy</li></ul>
console.log(list.compile(data, function(node, data) {
    if( data.type == 2 ) {
        node.className += "edit";
    }
}));


var consoles = [
    { text: "PS4", value: 1 },
    { text: "XBOX One", value: 2 },
    { text: "Wii U", value: 3 }
];

// each="." will use the root value of the data passed into compile
var options = xsalt('<xs:option each="." html="text" val="value">');

// output: <option value="1">PS4</option><option value="2">XBOX One</option><option value="3">Wii U</option>
console.log(options.compile(consoles));


// "wrapping" attributes

var data = {
    users: [
        {username: "bob", type: 1, id: 42},
        {username: "lucy", type: 2, id: 98},
        {username: "sandy", type: 1, id: 39},
        {username: "jerry", type: 1, id: 74}
    ]
};

// output: <input type="text" value="bob" id="user_42"><input type="text" value="lucy" id="user_98"><input type="text" value="sandy" id="user_39"><input type="text" value="jerry" id="user_74">
var test = xsalt('<xs:input type="text" val="username" each="users">').compile(data, function( node, data ) {
    node.setAttribute("id", "user_" + data.id);
});

API

Coming soon. For now see the examples.