l3p3 / lui-templates

Generate lui components from html templates!

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
• Handlebars
• Knockout
• Raw JSON (as intermediary format, see test/templates/greeting.json)

Example

src/templates/Greeting.liquid

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

src/main.js

import { init, node } from 'lui';

import Greeting from './generated/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 should probably have it in your .gitignore.

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

Try it out

Clone this repository, enter the directory and run:

npm test

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 ./components.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.

lui-templates's Issues

Generate node and node_dom

Currently, only hook_dom (the root element) is generated.

Also generate node, node_dom and its child nodes!

Import unknown components

IS

When having node(SomeComponent) in a component, it only works if the SomeComponent is defined by another template in the same resulting file.

SHOULD

If a component is used that is not defined by another template, import it from a configurable path.

Liquid support

Support parsing basic liquid files!