Xylo.js

!CI Status

Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.

Installation

Install from npm:

npm install xylo

Node.js 12 or higher is required.

Basic usage

``js
const { generate } = require('xylo');
const template = '

Hello World

';
const data = {message: 'Hello Xylo!'};
const html = generate(template, data);
console.log(html); //

Hello Xylo!


`

Supported directives

$3

Template:
`html


Hello World


`

Data:
`json
{
"message": "Hello Xylo!"
}
`

HTML:
`html


Hello Xylo!


`

$3

Template:
`html


• Todo 1


`

Data:
`json
{
"todos": [
{
"title": "Todo1"
},
{
"title": "Todo2"
},
{
"title": "Todo3"
},
]
}
`

HTML:
`html


• Todo 1


• Todo 2


• Todo 3


`

$3

Template:
`html
✅Todo 0
✅Todo 0
`

Data:
`json
{
"todo1": {
"done": true,
"title": "Todo 1"
},
"todo2": {
"done": false,
"title": "Todo 2"
}
}
`

HTML:
`html
✅Todo 1
Todo 2
`

$3

Template:
`html

`

Data:
`json
{
"message": "Hello Xylo!"
}
`

HTML:
`html

`

$3

Template:
`html



`

Data:
`json
{
"description": "Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.",
}
`

HTML:
`html



`

Advanced usage

$3

You can use a customized Jexl.

`js
const { generate } = require('xylo');
const template = '

';
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); //

• A
• B
• C


``

Dependencies

* parse5 - HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.
* Jexl - Javascript Expression Language: Powerful context-based expression parser and evaluator.