funclate

funclate

function + template = funclate

A build time HTML parser + a runtime template engine to patch the DOM incrementally.

funclate has been designed with custom element in mind managing pseudo light/shadow DOM trees. Moreover, the creation of element like <button is="my-button"></button> is obviously shipped.

So, for instance the following es6 snippet:

import * as fc from 'funclate';

const body = document.body.querySelector('body');

let template = funclate`<p class="foo {{el.bar}}">Hello</p>`;

fc.updateElement(body, template(fc));

Will be compiled (using the provided babel loader) at build time:

import * as fc from 'funclate';

const body = document.body.querySelector('body');

var template = function (funclate) {
    var fcOpenElement = funclate.openElement;
    var fcCloseElement = funclate.closeElement;
    var fcVoidElement = funclate.voidElement;
    var fcContent = funclate.content;
    var fcText = funclate.text;
    var fcComment = funclate.comment;
    return function (__el__) {
        var el = __el__;
        fcOpenElement('p', ['class', 'foo ' + (el.bar === undefined || el.bar === null ? '' : el.bar)], [], undefined);
        fcText('Hello');
        fcCloseElement();
    };
};

fc.updateElement(body, template(fc));

Learn more browsing the manual!

License

Released under the MIT license.