v5 is coming, here what's changing

[WebReflection]

The next version of uhtml goal is to simplify even more the DX around it:

• htmlFor and svgFor are gone ... the key special attribute will work just like in React:
  • there is no need to manually provide a weak key reference, the template / node is the reference per each keyed list
  • multiple lists can have same keys, these will still be unique nodes per key
  • keys work only for outer components ... it's OKish to use a key within a fragment but it's not fully tested
  • keys free themselves when no list hold keys anymore ... again, just pretty-much like in React
• the node export is no-more needed ... if you render, it returns a Hole, if you don't render, it returns a node or fragment out of the box, making code even more portable across different situations
• the render always needs a function to satisfy above DX
• attributes and differ or text differ can be fully customized, it's deadly easy to add your own attribute implementation
• attributes are just data, aria and shortcuts such as ?, @, . but no other special attributes are provided .. bring your own ref or your own whatever, all attributes are handled like regular attributes with no magic attached unless you decide to have magic
• creating your own tags to provide your own things has been core-focus and simplified a lot so that you could compete with uhtml itself by using uhtml tag special export (examples to be written)
• performance are slightly worse than before but still blazing fast ... there's no way I can compete with explicit things (such as htmlFor) but those explicit things are a headache to remember or deal with ... so I chose DX over split-hair-like performance gains
• memory is also still light but higher than before ... not too bad considering uhtml v4 is likely the lightest, in terms of Memory, across the board
• metrics such as first paint are same or reduced, a win for fully runtime based sites
• removal of nodes is slower (not that much) but still the reason uhtml v5 won't be faster ... the removal of nodes is now always correct, as opposite of being optimistic, so that less errors should happen in most convoluted scenario and once again, performance overall are still top-class
• the Fragment has been rewritten and the udomdiff variant should also grant less surprises in case obtrusive 3rd party scripts do weird things with nodes ... moving or removing these nodes won't cause issues anymore. This need more testing and probably it won't land on udomdiff because I am looking forward to have moveBefore proposal implemented by browsers and there I need a parentNode to work with ... so it's going to be epic anyway, but right now the differ is internal (still based on exact same udomdiff logic)
• the overall size is around 2900 bytes (that is less than 3KB) once compressed, so its final size is also smaller than before
• the TS story has been improved but that's not final as I think I did overkill there for no gain

preview

import { render, html, svg } from 'uhtml';

// a one-off node
const div = html`<div />`;

// a rendered list with keyed nodes
render(document.body, () => html`
  <ul>
    ${data.map((value, i)=> html`
      <li key=${i}>${value}</li>
    `)}
  <ul>
`);

In terms of declarative-aproach, the key is a wonder but it's also rarely needed ... if you need a key use it, if you ar enot sure, don't use it.

Last, but not least, v5 provides a better core to eventually finalize hydration, as v4 has never been a good core to do so. I won't promise hydration or a proper SSR story out of the box but it will, eventually, land in here.

This is probably my last iteration over this library as I think I can't make it more readable, maintainable, still performant, or better, in terms of DX, than current v5 is, still topics like Signals, hydration, ref cna be addressed by its consumers, pushing it further than it's ever been, or I could think about.

Dare playing around with it? In such case https://esm.run/@webreflection/x is your import for the time being, until everything cleaned up further lands in here.