xylo
v0.0.5
Published
Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.
Downloads
34
Maintainers
toshitaka.agataReadme
Xylo.js
Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.
Installation
Install from npm:
npm install xyloNode.js 12 or higher is required.
Basic usage
const { generate } = require('xylo');
const template = '<!DOCTYPE html><html><body><p x-text="message">Hello World</p><body></html>';
const data = {message: 'Hello Xylo!'};
const html = generate(template, data);
console.log(html); // `<!DOCTYPE html><html><body><p>Hello Xylo!</p><body></html>`Supported directives
x-text
Template:
<p x-text="message">Hello World</p>Data:
{
"message": "Hello Xylo!"
}HTML:
<p>Hello Xylo!</p>x-for
Template:
<ul>
<li x-for="todo in todos"><span x-text="todo.title">Todo 1</span></li>
</ul>Data:
{
"todos": [
{
"title": "Todo1"
},
{
"title": "Todo2"
},
{
"title": "Todo3"
},
]
}HTML:
<ul>
<li><span>Todo 1</span></li>
<li><span>Todo 2</span></li>
<li><span>Todo 3</span></li>
</ul>x-if
Template:
<span x-if="todo1.done">✅</span><span x-text="todo1.title">Todo 0</span>
<span x-if="todo2.done">✅</span><span x-text="todo2.title">Todo 0</span>Data:
{
"todo1": {
"done": true,
"title": "Todo 1"
},
"todo2": {
"done": false,
"title": "Todo 2"
}
}HTML:
<span>✅</span><span>Todo 1</span>
<span>Todo 2</span>x-attr
Template:
<img src="logo.png" x-attr:title="message"/>Data:
{
"message": "Hello Xylo!"
}HTML:
<img src="logo.png" title="Hello Xylo!" />x-html
Template:
<div x-html="description">This is a description.</div>Data:
{
"description": "Xylo.js is a static site generator using <strong>pure HTML template</strong> like Vue.js and Thymeleaf.",
}HTML:
<div>Xylo.js is a static site generator using <strong>pure HTML template</strong> like Vue.js and Thymeleaf.</div>Advanced usage
Use a customized Jexl
You can use a customized Jexl.
const { generate } = require('xylo');
const template = '<html><head></head><body><ul><li x-for="item in items|split(' ')" x-text="item"></li></ul></body></html>';
const data = {items: 'A B C'};
const jexl = new jexl.Jexl();
jexl.addTransform('split', (val, sep) => val.split(sep));
const html = generate(template, data, jaxl);
console.log(html); // `<html><head></head><body><ul><li>A</li><li>B</li><li>C</li></ul></body></html>`