JavaScript compiler target for Teal templates

This teal add-on registers a compiler that transforms .tl files into JavaScript.

By default the generated code uses the DOM API to create elements. This can be changed by providing a custom runtime – teal-react and teal-incremental-dom are two examples that provide alternative runtime implementations to create elements in different ways.

Teal ⬌ JavaScript interoperability

The idea of Teal as a templating language is that it should be easy to switch back and forth between your templates and your host language. With teal-js you can require .tl files right from your Javascript files. The default DOM-based runtime exports one function per file with the following signature: function(props, children...):

var a = require('./a.tl');

document.body.appendChild(
  a({ href: '/'}, 'Home')
);

This works in the other direction too. Just create a .js file that exports a single function which takes a single argument:

// list.js
var ul = require('./ul.tl');
var li = require('./li.tl');

/**
 * Create a <ul> with all children wrapped in <li> elements.
 */
module.exports = function(props) {
  return ul({}, props.children.map(function(c) {
    return li({}, c);
  }));
};

You can then use list.js just like any other element:

div {
  ./list {
    "Hello"
    "world"
  }
}

Server-side rendering

The generated templates can not only be used in the browser but also in Node.js applications. To make this work, teal-js uses dommy, a minimal, ultra-lightweight DOM implementation that provides just enough functionality to generate markup. Take a look at teal-express if you want to build isomorphic apps.

Browserify

If you just want to build client-side apps, you can use tealify, a Browserify plugin that transforms .tl files and generates a CSS file alongside the bundle.