Literal 0.6.2

<template is="literal-template">

A literal-template may be placed anywhere in your HTML, and is designed to make it easy to mix dynamic content into static content in just those locations where needed.

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

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

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

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

Include other templates

The template scope contains Literal’s template helper functions. Use the include(src, data) function to include other templates as literal templates:

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

<template is="literal-template">
    <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 data objects to template includes:

<template is="literal-template" 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-template" data="./data.json">...</template>
<template is="literal-template" data="./module.js">...</template>

Named exports are supported via the hash:

<template is="literal-template" 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-template" 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.