Skip to content

Latest commit

 

History

History
166 lines (131 loc) · 2.98 KB

README.md

File metadata and controls

166 lines (131 loc) · 2.98 KB
Raw

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

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>`

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.