lighterhtml

^{Social Media Photo by Kristine Weilert on Unsplash}

 !WebReflection status   !Blazing Fast

The _hyperHTML_ strength & experience without its complexity 🎉

* faster than hyperHTML ⚡️
* simpler than lit-html 💡
* fueling both neverland and heresy 🔥

V2 Breaking Changes & Improvements

$3

* dropped the ambiguous ability to produce nodes when no render(...) is invoked. When needed, which is the minority of the cases, you need to explicitly use html.node or svg.node, instead of just html or svg. For every other cases, use render(where, what).
* the render(where, what) does not need a callback anymore. You can now `render(node, html

content

) right away. If a callback is provided, that will still be invoked.
* removed useHook as it's unnecessary since you can use useRef through html.for(...) or svg.for(...) within any useRef provided by your library of choice (i.e. dom-augmentor)
* the recently introduced inner.html/svg has been removed, as completely unnatural and error prone (just use html anywhere, it'll work).

Improvements

* a fundamental core-logic implementation that was trashing any node after one or more collections has been refactored and fixed. The current logic create a stack per each array found down the rendering road, isolating those DOM updates per stack. This means that performance have been improved, and GC operations reduced.
* html and svg template literals tags, now offer both .for(ref[, id]) and .node, to either retain the same content (keyed render) or create fresh new nodes out of the box as one-off operation (via .node).
* slightly reduced code size, which is always nice to have, after a refactoring




V1 Changes + New Feature

Removed transform export and made default domtagger customizable via custom export.

`js
import { custom } from 'lighterhtml';

const { html, render } = custom({

// the domtagger attributes handler
attribute: callback => (node, name, original) => {
// return a function that will handle the attribute value
// the function will receive just the new value
if (name === 'double')
return value => {
node[name] = value + value;
};
// the received callback is usable as return fallback
return callback(node, name, original);
},

// the domtagger any-content handler
any: callback => (node, childNodes) => {
// return a function that will handle handle all special cases
// the function will receive just the new hole value
if (node.nodeName === 'CUSTOM') {
return value => {
node.appendChild(value);
};
}
// the received callback is usable as return fallback
return callback(node, childNodes);
},

// the domtagger text for text only cases
text: callback => (node) => {
// return a function that will handle handle text content cases
// the function will receive just the new text value
if (node.nodeName === 'WRAP') {
return value => {
node.textContent = (${value});
};
}
// the received callback is usable as return fallback
return callback(node);
},

// optionally you can use the special transform handler too
// in this case, and in V1, the callback is just the String one
transform: callback => markup => callback(markup),

// same goes for convert, with the callback being the one
// originally used to "convert" the template from Array to HTML
// see: https://github.com/WebReflection/domtagger/issues/17#issuecomment-526151473
convert: callback => template => callback(template)
});
`

$3

Even if sharing 90% of _hyperHTML_'s code, this utility removed all the not strictly necessary parts from it, including:

* no Component, no define and/or intents, no connect or disconnect, and no promises (possibly in later on), everything these days can be easily handled by hooks, as example using the dom-augmentor utility
* html content is never implicit, since all you have to do is to write html before any template when you need it. However, the {html: string} is still accepted for extreme cases.

Removing these parts made the output smaller in size (less than 6K) but it also simplified some underlying logic.

Accordingly, _lighterhtml_ delivers raw domdiff and domtagger performance in an optimized way.

If you don't believe it, check the DBMonster benchmark 😉




$3

In _lit-html_, the html function tag is worthless, if used without its render.

In _lighterhtml_ though, the html.node or svg.node tag, can be used in the wild to create any, one-off, real DOM, as shown in this pen.

`js
// lighterhtml: import the html tag and use it right away
import {html} from '//unpkg.com/lighterhtml?module';

// a one off, safe, runtime list 👍
const list = ['some', 'nasty', 'list'];
document.body.appendChild(html.node

${list.map(text => html.node

• ${text}

)}

);
`

Strawberry on top, when the html or svg tag is used through _lighterhtml_ render, it automatically creates all the keyed performance you'd expect from _hyperHTML_ wires, without needing to manually address any reference: pain point? defeated! 🍾

$3

If you are looking for Custom Elements like events out of the box, lighterhtml-plus is your next stop 👍




$3

Following, the usual multi import pattern behind every project of mine:

* via global lighterhtml CDN utility: , and const {render, html, svg} = lighterhtml
* via ESM CDN module: import {render, html, svg} from 'https://unpkg.com/lighterhtml?module'
* via ESM bundler: import {render, html, svg} from 'lighterhtml'
* via CJS module: const {render, html, svg} = require('lighterhtml')




$3

The module exports the following:

* html tag function to create any sort of HTML content when used within a render call. It carries two extra utilities, html.for(ref[, id]), to hard-reference a specific node, and html.node to create one-off dom nodes in the wild without using the render.
* svg tag function to create any sort of SVG content when used within a render call. It carries two extra utilities, svg.for(ref[, id]), to hard-reference a specific node, and svg.node to create one-off dom nodes in the wild without using the render.
* render(node, fn|Hole) to pollute a node with whatever is returned from the fn parameters, including html or svg tagged layout
* Hole class for 3rd parts (internal use)

You can test live a hook example in this Code Pen.




$3

* the wired content is not strongly referenced as it is for hyperHTML.wire(ref[, type:id]) unless you explicitly ask for it via html.for(ref[, id]) or svg.for(ref[, id]), where in both cases, the id doesn't need any colon to be unique. This creates content hard wired whenever it's needed.
* the ref=${object} attribute works same as React, you pass an object via const obj = useRef(null) and you'll have obj.current on any effect.
* intents, hence define, are not implemented. Most tasks can be achieved via hooks.
* promises are not in neither. You can update asynchronously anything via hooks or via custom element forced updates.
* the onconnected and ondisconnected special events are available only in _lighterhtml-plus_. These might come back in the future but right now _dom-augmentor_ replaces these via useEffect(callback, []). Please note the empty array as second argument.
* an array of functions will be called automatically, like functions are already called when found in the wild
* the Component can be easily replaced with hooks or automatic keyed renders

`js
const {render, html} = lighterhtml;

// all it takes to have components with lighterhtml
const Comp = name => html

Hello ${name}!

;

// for demo purpose, check in console keyed updates
// meaning you won't see a single change per second
setInterval(
greetings,
1000,
[
'Arianna',
'Luca',
'Isa'
]
);

function greetings(users) {
render(document.body, html${users.map(Comp)});
}
`

$3

Excluding the already mentioned removed parts, everything else within the template literal works as described in hyperHTML documentation.




$3

Live on Code Pen.

`js
import {render, html} from '//unpkg.com/lighterhtml?module';

document.body.appendChild(
// as unkeyed one-off content, right away 🎉
html.nodeany one-off content!