README
Skate Transform
Compiles web component templates to render functions
Install
npm i trucks-transform-skate --save-dev
For the command line interface see trucks-cli.
Usage
Programmatic usage:
const trucks = require('trucks');
trucks(
{
files: ['example/components.html'],
transforms: ['skate']
}, (err, res) => {
if(err) {
throw err;
}
console.log(res);
}
);
For command line usage see trucks-cli.
Overview
The library takes an HTML template and compiles it to a render
function.
An HTML template such as:
<template id="x-blog-post">
<div class="post">
<script>
if(this.title) {
html('<h3>${this.title}</h3>');
}
</script>
<p>Article content</p>
</div>
</template>
Will result in the compiled function:
function render(elem) {
skate.vdom.element("div", {
"class": "post"
}, () => {
var _this = this;
if (this.title) {
skate.vdom.element("h3", () => {
skate.vdom.text(`${ _this.title }`);
});
}
skate.vdom.element("p", () => {
skate.vdom.text("Article content");
});
});
}
Note that whitespace in the source template is normalized by default.
The compiler then creates a map of component identifiers to template render functions:
const templates = {
"x-blog-post": function render(elem) {
skate.vdom.element("div", {
"class": "post"
}, () => {
var _this = this;
if (this.title) {
skate.vdom.element("h3", () => {
skate.vdom.text(`${ _this.title }`);
});
}
skate.vdom.element("p", () => {
skate.vdom.text("Article content");
});
});
}
};
And exposes a main function that performs a lookup in the template map by element tag name:
function template(elem) {
return templates[elem.tagName.toLowerCase()].call(elem, elem);
}
Component authors may now proxy the render
function to the template
function, for example:
skate.define('x-blog-post', {
render: template
});
API
skate
public skate(state, conf)
Compiles HTML <template>
elements to render functions.
state
Object compiler state.conf
Object plugin configuration object.
options
options(opts)
Get computed compiler options.
Merges input compiler options with the default option configuration.
Returns computed processing options.
opts
Object processing options.
Options
attr
String=id attribute name used for the component id.skate
String=skate name of the skatejs variable.idom
String=vdom name of the vdom property.element
String=element name of the element function.text
String=text name of the text function.templates
String=templates name of the templates map.main
String=template name of the main function.scripts
Boolean=true parse template script elements.html
String=html name of thehtml
function for inline scripts.normalize
Boolean=true normalize whitespace in templates.literals
Object|Boolean=true flags for template literal support.dom
Object options to use when parsing the DOM.
html
html(html, opts)
Compile an HTML string to AST programs representing each <template>
element in the input HTML.
Template literal support is enabled by default. You can pass the
literals
option as false
to disable template literals for attributes and
text nodes or an object that configures the text
and attribute
flags.
The following examples are equivalent:
html(tpl, {literals: false});
html(tpl, {literals: {text: false, attribute: false});
Returns a list of compiled templates.
html
String an HTML string.opts
Object processing options.
Throws
Error
if a template element does not define an identifier.
main
public main(opts)
Build a main function that accepts an elem
argument and performs a
lookup in the templates map to execute the template function.
Returns program representing the main function.
opts
Object processing options.
map
public map(templates, opts)
Converts the output of a compile pass to an object map of component identifiers to render functions.
Returns AST program mapping components to render functions.
templates
Array list of compiled template programs.opts
Object processing options.
render
public render(el, opts)
Convert a single DOM <template>
element to an AST program representing
the contents for a render function body.
Returns function body AST.
el
Object the element DOM.opts
Object processing options.
License
MIT
Created by mkdoc on July 27, 2016