🦷 Composite

A tiny web template system for the browser.

Compose your HTML in <template> elements. Use placeholders (${…}) to mark dynamic content. Call fill to generate a new HTML string which interpolates the template's content with the given properties.

Usage

npm install @domchristie/composite

/* rendered somewhere in the DOM */
<template id="hello">
  <h1>${greeting}, ${name}!</h1>
</template>

import { fill } from '@domchristie/composite'
const Hello = document.getElementById('hello')
fill(Hello, { greeting: 'Hello', name: 'World' }) // '<h1>Hello, World!</h1>'

API Docs

Table of Contents

• fill
  • Parameters
• html
  • Parameters
• escape
  • Parameters
• unescape
  • Parameters
• raw
  • Parameters

fill

composite.js:8-15

Renders a template with given properties.

Parameters

• template (HTMLTemplateElement | string) The HTML template to be rendered.
• props Object An object containing properties to be interpolated into the template.

Returns string The rendered HTML string with properties interpolated.

html

composite.js:25-32

A tag function for template literals that escapes HTML special characters in values unless they are marked as raw.

Parameters

• strings TemplateStringsArray An array of string literals.
• values ...any The values to be interpolated into the template.

Returns string The final string with values safely interpolated.

escape

composite.js:41-43

Escapes special characters in a string for use in HTML. The characters escaped are: & < > " ' ` = /

Parameters

• string string The input string to escape.

Returns string The escaped string.

unescape

composite.js:61-65

Unescapes a given HTML-encoded string.

Parameters

• string string The HTML-encoded string to unescape.

Returns string The unescaped string.

raw

composite.js:74-76

Marks a string as raw HTML to prevent escaping of special characters.

Parameters

• html string The HTML string to wrap.

Returns RawString The wrapped HTML string as a RawString object.

unsafe-eval

Composite uses new Function to generate HTML from templates. This approach can fail when using strict Content Security Policies (CSPs).

License

Copyright © 2024+ Dom Christie and released under the MIT license.