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.

• Install
• Usage
• Overview
• API
  • skate
  • options
  • html
  • main
  • map
  • render
• License

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 the html 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