installation.md

Installation

funclate is available from npm.

npm install funclate

funclate can also be fetched from unpkg, a CDN:

<script src="https://unpkg.com/funclate/dist/funclate.js"></script>

<script src="https://unpkg.com/funclate/dist/funclate.min.js"></script>

Integration

funclate is shipped with several plugins making the HTML parsing automatic from Babel, Webpack and Browserify.

babel

A babel's plugin is available to compile an funclate template into a render factory.

See plugins to get more information about plugins in babel.

{
    plugins: ['funclate/lib/integration/babel']
}

Presently the plugin only support ES6 templates tagged with funclate.

For instance,

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

will be compiled into:

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();
    };
};

Be aware the template can not contain expressions like ${foo}.

webpack

A webpack's loader is available to compile an funclate file into a render factory.

See module.loaders to get more information about loaders in webpack.

module.loaders: [
    {test: /\.fc$/, loader: 'funclate/lib/integration/webpack'}
];

browserify

A browserify's transform module is available to compile an funclate file into a render factory.

See transforms to get more information about the transform system in browserify.

browserify -t funclate/lib/plugins/browserify main.js > bundle.js

var browserify = require('browserify');
var idomizerify = require('funclate/lib/plugins/browserify');
var bundle = browserify();
bundle.transform({ extension: 'html' }, idomizerify);