Literal 0.6.5

<template is="literal-html">

A literal-html template may be placed anywhere in your HTML. It is designed to make it easy to mix islands of dynamically rendered content into static content.

A literal-html template is replaced by its own rendered content.

<template is="literal-html">
    <pre>${ 'hello' }</pre>
</template>

Where JS fails a literal-html template is left inert and unrendered.

<template is="literal-html">
    <pre>${ throws an error }</pre>
</template>

The template’s data object may be set with the data attribute. A data attribute that parses as a URL imports a JavaScript module or fetches JSON:

<template is="literal-html" data="../data/clock.js">
    <pre>${ data.time.toFixed(0) + 's' }</pre>
</template>

Include other templates

The template scope contains a number of helper functions. The include(src, data) function includes other templates:

<template id="todo-li">
    <li>${ data.text }</li>
</template>

<template is="literal-html">
    <h5>Todo list</h5>
    <ul>${ include('#todo-li', { text: 'Wake up' }) }</ul>
</template>

The include(src, data) function is partially applicable, helpful for mapping an array of objects to template includes:

<template is="literal-html" data="../data/todo.json">
    <h5>Todo list</h5>
    <ul>${ data.tasks.map(include('#todo-li')) }</ul>
</template>

Attributes

data

A path to a JSON file or JS module exporting data to be rendered.

<template is="literal-html" data="./data.json">...</template>
<template is="literal-html" data="./module.js">...</template>

Named exports are supported via the hash:

<template is="literal-html" data="./module.js#namedExport">...</template>

Paths may be rewritten. This helps when JS modules are bundled into a single module for production.

import { urls } from '../documentation/templates/literal.js';

urls({
    '../documentation/templates/path/to/module.js': '../documentation/templates/path/to/production/bundle.js#namedExport'
});

The data attribute also accepts raw JSON:

<template is="literal-html" data='{"property": "value"}'>...</template>

Literal templates

Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of Literal.