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. ๐
Here are some templating languages I think about supporting:
- pug
- Haml
- Liquid
- Handlebars
- Knockout
- Raw JSON (as intermediary format, see test/templates/greeting.json)
<h1>Hello {{ name }}!</h1>
import { init, node } from 'lui';
import Greeting from './generated/Greeting.js';
init(() => {
return [
node(Greeting, { name: 'World' }),
];
});
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
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? ๐
Clone this repository, enter the directory and run:
npm test
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.
The name of the lui module to import from. Defaults to lui
.
The name of the module to import unknown components from. Defaults to ./components.js
.
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.