If you're serious about JSX like strings or XML like template literals to produce valid and expected HTML, this is your one stop shop:
- it's strictly XML compliant, it uses the XML parsing option indeed
- errors are embedded and shown/described on the page when these happen
- attributes require a value, even if empty (i.e.
<input disabled="" />) - it's a template tag, hence it can be used as
x([xhtml])too - it doesn't promote Custom Elements out of the box, you need to
document.importNode(x(['<x-foo />']), true)explicitly, if that's a desired outcome before the node goes live - the
@webreflection/x/customexport allows you to pass adocument, aDOMParser, and atransformutility for your interpolations. All have a defaultglobalThisvalue, thetransformdoes nothing if not specified. - the
@webreflection/x/pathexport allows you to parse without caring about attributes quoted boundaries, it is compatible with SVG nodes, and it's not atagfunction but it acceptstemplatelike references and ansvgbolean parameter to let you parse and retrieve a[fragment, paths]result, where thefragmentis the one containing the list of elements and thepathsis an array of{ type, name, path }references that matches thevaluesyou might have gotten via your owntagbased function, basically replacing 3 dependencies from uhtml
import x from '@webreflection/x';
document.body.appendChild(
x`<span /><span />`
);
document.body.innerHTML;
// <span></span><span></span>import customX from '@webreflection/x/custom';
const x = customX({
transform: attribute => `"${attribute}"`
});
document.body.appendChild(
x`<span test=${1} /><span />`
// ^ ^ no quotes around
);
document.body.innerHTML;
// <span test="1"></span><span></span>// exports: html, svg, update, skip, x
import { html, svg, update } from '@webreflection/x/node';
const fragment = x`<span test=${1} /><span />`;
document.body.appendChild(fragment);
document.body.innerHTML;
// <span test="1"></span><span></span>
setTimeout(update, 1000, fragment, [2]);
// will update test attribute as 2That's literally it 😇