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] 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 --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/generated/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? 🎉

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.