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 = ; documentbody;
This works in the other direction too. Just create a .js
file that exports
a single function which takes a single argument:
// list.jsvar ul = ;var li = ; /** * Create a <ul> with all children wrapped in <li> elements. */module { return ;};
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.