Differences between `html from uhtml` and `html from uhtml/node`

[wighawag]

Hi, uhtml looks really cool and I just started playing with it.

I noticed we could create node either as Hole or as true dom nodes I really like the latter as we get the real thing that we can then just assemble together to render.

But I expecte there are important differences between the two and I am not sure what they are. I could not find any doc on this but maybe I missed something ?

One thing I noticed is that signal node can be used without appending .value and signal hole cannot :

      const div = signal(
        html`<div id="loading-id">loading</div>`
      );
      setTimeout(() => {
        div.value = html`<div id="loaded-id">loaded</div>`;
      }, 2000);

      const divHole = signal(
        htmlAsHole`<div id="loading-id-html-hole">loading</div>`
      );
      setTimeout(() => {
        divHole.value = htmlAsHole`<div id="loaded-id-html-hole">loaded</div>`;
      }, 2000);
      render(
        document.body,
        () => html`
          ${div}  ${div.value.id}
          ${divHole.value} ${divHole.value.id}
        `
      );

[wighawag]

Oh, I think I know now, When using html/node the whole node get replaced whenever any signal used by it change while Hole can surgically update only the place where the signal is used.

Still wondering why was it necessary. Just played with solid js before and it seems it support dealign with node and yet any signal used is surgically replaced

Is there anything else to know ? what would be the use case for html/node ?

[WebReflection]

Just played with solid js before and it seems it support dealign with node and yet any signal used is surgically replaced

there is no tool here, everything is based on standard JS and node variant creates variants every time.

You don't get to play with nodes in uhtml, you declare your template and re-render every time you want, that's literally it.

The node variant is to create one-off new nodes each time as explained in the README/docs and it's more for playing around than to maintain highly reactive hierarchies ... Hole is the primitive to use in latter case.

Closing as there's nothing to do here but feel free to ask more, if needed 👋

[wighawag]

Thanks for the reply. Ok I get it, Hole are what make uhtml reactive and node are just the result of the render.

Just played with solid js before and it seems it support dealign with node and yet any signal used is surgically replaced

there is no tool here, everything is based on standard JS and node variant creates variants every time.

Oh I was playing with solid "no tool version" also using template literal, so all pure js (https://www.solidjs.com/guides/getting-started#buildless-options) and what you get is actual dom node but they are still reactive. I thought uhtml would do something similar with uhtml/node

[WebReflection]

I didn't know they had such option but then again, I believe in prod they suggest the tooled option ... here you get what runs on prod too out of the box, not more, not less.

The template intent is to be declarative ... if I use the same callback to create every time the same new node it:

• should create each time a new node ... also in lists and whatnot
• should not involve complex diffing logic or goodbye performance

I don't know how solid keep track of same-but-not-really nodes in their tool-less option but I have no interest in doing the same in here because that's something to think about eventually for hydration but not for regular usage which hasb een working wonderfully for years and it's not going to change ... uhtml is declarative, it offers a variant to start embedding its utilities in other projects (any project, really, as it creates just regular DOM nodes) but how you use that variant, which is already an edge case, is up to you ... by default, uhtml gives you a render and a html + svg function to declare your template and update at extreme speed any next render call ... that's it, that's the library.