lui-templates

lui is quite simple to use -- as long as you are a JavaScript developer.

This tool lets you write lui components without writing JavaScript but via template files. 🎉

Supported formats

Here are some templating languages I think about supporting:

- [ ] pug
- [ ] Haml
- [x] Liquid (proof of concept)
- [ ] Handlebars
- [ ] Knockout
- [x] Plain HTML (for static templates without dynamic content)
- [x] Raw JSON (as intermediary format, see test/templates/greeting.json)

Usage

``sh
npx lui-templates src/templates/greeting.liquid > src/components/greeting.js
`

`sh
npx lui-templates src/templates/simple.html > src/components/simple.js
`

`sh
npx lui-templates --help
`

Example

$3

`liquid


Hello {{ name }}!


`

$3

`js
import { init, node } from 'lui';

import Greeting from './components/greeting.js';

init(() => {
return [
node(Greeting, { name: 'World' }),
];
});
`

$3

`js
import lui_templates from 'lui-templates';

const code = await lui_templates('src/templates/greeting.liquid');
await fs.writeFile('src/components/greeting.js', code, 'utf8');

await bundleApp('src/main.js'); // or whatever
`

$3

The generated component is looking like this:

`js
// generated by lui-templates

import { hook_dom } from "lui";

export default function Greeting({ name }) {
hook_dom("h1", {
innerText: Hello ${name}!,
});

return null;
}
`

You may have it in your .gitignore to prevent duplication.

... And did I mention that this file is generated? 🎉

HTML Example

For static templates without dynamic content, you can use plain HTML:

$3

`html



`

$3

`js
// generated by lui-templates

import {
hook_dom,
node_dom,
} from "lui";

export default function Simple() {
hook_dom("div");

return [
node_dom("h1[innerText=Hello World]"),
node_dom("p[innerText=This is a simple HTML test.]"),
];
}
`

The HTML parser supports all standard HTML elements and attributes but does not include dynamic content like variables or conditionals. For dynamic content, use the Liquid parser instead.

Interface of lui_templates(path[, {options}])

$3

The template file to read. Can be in one of the supported formats, determined by its ending. If it is a directory, all contained templates will be read.

$3

The name of the lui module to import from. Defaults to lui.

$3

The name of the module to import unknown components from. Defaults to ./externs.js`.

$3

The returned ES module imports the needed methods and exports the component(s).

For a single template file, the default export is the component.

For a directory, each component is exported by its name.