apply-html

It's .innerHTML = '' for the modern world. Diffs and patches an existing DOM element by efficiently comparing it to a string.

Install

$ npm install --save apply-html

Usage

Patching

const { html, apply } = require('apply-html');

const content = html`
    <h1>Hello <em>World</em></h1>
`;

apply(document.body, content);

Interpolation

const { html, raw, apply } = require('apply-html');

const state = {
    salutation: 'Hello',
    target: '<em>World</em>'
};

const template = ({ salutation, target }) => html`
    <h1>${salutation} ${raw(target)}</h1>
`;

apply(document.body, template(state));
// document.body.innerHTML = template(state);

console.log(document.body.innerHTML);
// -> <h1>Hello <em>World</em></h1>

Server-side rendering

The html and raw functions return SafeStrings which work great in Node.

const http = require('http');
const { html } = require('apply-html');

const content = html`
    <h1>Hello <em>World</em></h1>
`;

http.createServer((req, res) => {
    res.end(content.toString());
}).listen(3000);

Why?

I wanted the rendering simplicity of setting an element's innerHTML property coupled with the benefits of DOM diffing and patching. There are many libraries that do this sort of thing, so why another? Custom elements.

Most existing solutions for diffing and patching either replace the DOM with their own virtual representations (react, vdom, hyperscript) or by diffing two live DOM trees (bel, morphdom, diff-dom). Most of these libraries suffer the same issue in that they call a custom element's constructor before the elements are attached to the DOM for the first time leading to unexpected side effects and forcing constructor logic into the connectedCallback.

This library is a little bit different. It makes use of an HTML <template>'s ability to create an inert document fragment. These fragments are full, diffable, DOM trees, but have the added benefit of not triggering resource loading or custom element lifecycle callbacks. This inert document fragment is compared to the live DOM element with nanomorph, a tiny modern DOM patching utility that operates on given DOM trees.

Thus, apply-html ensures that things only start happening if and when they're supposed to. For more information, see the original CodePen.

API

html`string`: SafeString

A template tag that creates a new SafeString containing a string of HTML. Values passed into the template tag will be serialized based on type. Arrays are joined with an empty string ('') after each item is serialized. Objects are converted to HTML-escaped JSON blobs. Literal strings will be HTML-escaped to safeguard against XSS. To opt out of escaping, pass the string to raw() first.

raw(string): SafeString

• string {String} String of safe HTML.

Creates a new SafeString containing a string of HTML assumed to be safe for insertion into the document.

apply(element, string): element

• element {Element} HTML element with children to be patched.
• string {String|SafeString} String or SafeString containing safe HTML to render.

SafeString

new SafeString(string)

Wraps a string to indicate that the string is safe to be inserted into the document. Only use on trusted strings to to safeguard against XSS.

SafeString Properties

.raw {String}

The wrapped string.

SafeString Methods

.toJSON(): String

Returns the raw string.

.toString(): String

Returns the raw string.

Contribute

Standards for this project, including tests, code coverage, and semantics are enforced with a build tool. Pull requests must include passing tests with 100% code coverage and no linting errors.

Test

$ npm test

© Shannon Moeller me@shannonmoeller.com (shannonmoeller.com)

Licensed under MIT