Hyperhtml: DOM diffing in hyperHTML

[varunkumar]

Not sure if I understand the library correctly. Does it do a DOM diffing including contents? I don't see that happening with the article example. On calling the update function multiple times with the same state, I see that DOM nodes that rely on state are getting re-rendered even though there is no change in state.

[WebReflection]

No render/update/chamge is made if state is the same.

Any specific code you are referring too?

All demos and examples in the test folder shows that, if you see new nodes each time you're doing something wrong.

Happy to help.

P.S. regardless, there is no DOM diffing 'cause it's not needed , this lib maps already nodes

[varunkumar]

This is what I did:

1. Opened this example page
2. Opened Chrome devtools
3. Ran the following code (State change: Removed one of the paragraphs):

update(hyperHTML.bind(document.querySelector('article')),
  {
    title: 'True story',
    magic: true,
    paragraphs: [
      {title: 'touching'},
      {title: 'incredible'}
    ]
  }
)

1. In the elements panel, I expected only the last <li> to be removed. However, I saw that title and all other <li>s were also getting updated.
2. I repeated the update call as above. Even this time, when there was no change, I saw that <li>s and title were getting re-rendered.

PS: I will see if I can provide a screen capture

[WebReflection]

that example is a demonstration of a one-off based on HTML only, the .map operation returns <li>...</li> string each time indeed.

To obtain what you want you need to use wires

  function update(render, state) {
    render`
    <article data-magic="${state.magic}">
      <h3>${state.title}</h3>
      List of ${state.paragraphs.length} paragraphs:
      <ul>${
        // see? wires :-)
        state.paragraphs
          .map(p => hyperHTML.wire(p)`<li>${p.title}</li>`)
      }</ul>
    </article>
    `;
  }

However, wires work by reference so if you pass fresh new objects each time you'll still see new content.

If instead, you do this, you'll see no changes.

const state = {
  title: 'True story',
  magic: true,
  paragraphs: [
    {title: 'touching'},
    {title: 'incredible'}
  ]
};

// call this as many times as you want
update(hyperHTML.bind(document.querySelector('article')), state);

// you might also cosider binding the article just once
const render = hyperHTML.bind(document.querySelector('article'));
update(render, state);

All this is explained in the getting started and deep dive.

I'll soon take some time to create a proper site with all examples and better documentation.

[varunkumar]

Ok, thanks.

[varunkumar]

Sorry for the late response. Tried using wire and same state object, but still see that nodes are getting re-rendered

[WebReflection]

@varunkumar I've just updated the example so you can see again that calling update(render, state); multiple times won't re-render the list of paragraphs