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
• Liquid (proof of concept)
• Handlebars
• Knockout
• Plain HTML (for static templates without dynamic content)
• Raw JSON (as intermediary format, see test/templates/greeting.json)

Usage

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

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

npx lui-templates --help

Example

src/templates/greeting.liquid

<h1>Hello {{ name }}!</h1>

src/main.js

import { init, node } from 'lui';

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

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

build.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

src/generated/greeting.js (generated)

The generated component is looking like this:

// 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:

src/templates/simple.html

<div>
  <h1>Hello World</h1>
  <p>This is a simple HTML test.</p>
</div>

Generated src/components/simple.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}])

path

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.

option lui_name

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

option components_name

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

return value

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.