A ~2.5K HTML/SVG render based on parts of lighterhtml and domdiff, without any extra cruft.
import {render, html, svg} from 'uhtml';
// const {render, html, svg} = require('uhtml');
// <script src="https://unpkg.com/uhtml"></script>
render(document.body, html`<h1>Hello 👋 µHTML</h1>`);The previous attempt to make it essential resulted ... well, too essential, but it's still usable via npm i uhtml@0.
- there are no sparse attributes, each attribute must have a single interpolated value:
attribute=${value}is OK,attribute="${a}${b}"is not. - the parser is
RegExpbased: smaller, faster, but not as robust as the DOM based one used in lighterhtml - there are no keyed helpers: no
html.for(...)and nohtml.node. Use therender(...)and justhtmlorsvg - the interpolations are simple: primitive, or array of primitives, and nodes, or array of nodes.
- the
styleattribute is not special at all, if you want to pass objects there, please transform these as you prefer. - the domdiff rip-off has been simplified to bail out sooner than the original module, performing extremely well for a reduced, but common, set of use cases: prepend, append, remove one to many, and replace one with many. Unless you keep shuffling all nodes in a list all the time, you'll likely not notice any real-world difference.
- this is not as battle tested as lighterhtml, but I'm planning to reproduce most demoes and see if it's robust enough, as most code was a cleanup after copy and paste.
- the
templateargument is not normalized. If you target browsers with issue with such argument, please be sure you transpile with latest Babel your code, or simply load the library already transpiled via unpkg - no domtagger whatsoever, you can't change the current behavior of the library in any way
- nested
htmlandsvgare allowed like in lighterhtml. V0 didn't allow that, hence it was more "surprise prone". - the
ref=${...}attribute works same as lighterhtml, enabling hooks, or React style, out of the box. - the
.attribute=${...}is still available, although uhtml should not suffer any of the IE11/Edge issues, as the parsing is done differently - the wire / parsing logic has been simplified even more, likely resulting in better bootstrap performance
- it's half of the production size, mostly because ...
- there are no 3rd parts dependencies, except
@ungap/create-contentand@ungap/import-node, both removable via @ungap/degap or babel-plugin-remove-ungap. The compressed final size difference is just ~0.5K though.
- be an essential/ideal companion for wickedElements and hookedElements.
- keep it as simple as possible, but not simpler
- see if there is room for improvements in lighterhtml whenever simplifications allow to be ported there