Skip to content

Smallscript-Corp/uhtml

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

µHTML v1

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>`);

Where is v0 ?

The previous attempt to make it essential resulted ... well, too essential, but it's still usable via npm i uhtml@0.

Differently from lighterhtml

  • 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 RegExp based: smaller, faster, but not as robust as the DOM based one used in lighterhtml
  • there are no keyed helpers: no html.for(...) and no html.node. Use the render(...) and just html or svg
  • the interpolations are simple: primitive, or array of primitives, and nodes, or array of nodes.
  • the style attribute 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 template argument 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

Similarly or better than lighterhtml

  • nested html and svg are 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-content and @ungap/import-node, both removable via @ungap/degap or babel-plugin-remove-ungap. The compressed final size difference is just ~0.5K though.

Goals of this module

  • 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

About

A micro HTML/SVG render

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 85.5%
  • HTML 10.7%
  • CSS 3.8%