how to handle something like Highcharts

[yatesco]

Hi there,

I'm using diffhtml to great effect refreshing full pages returned from the server for tables, lists, input fields etc. However, the next part of the project requires using "stateful" objects like Highcharts, which I would not want recreated on every updated. Another use case would be an embedded video player for example.

Is there an equivalent to htmx's https://htmx.org/attributes/hx-preserve/ for example?

Is this possible with diffhtml?

Thanks!

[tbranyen]

Hi @yatesco I've written a middleware in the past for this, I'm about to take off on a flight, but it was something like this working solution:

import { createTree, innerHTML, toString, use } from 'diffhtml';

use({
  syncTreeHook(vTree) {
    if (vTree.attributes && 'x-preserve' in vTree.attributes) {
      return vTree;
    }
  },
});

const out = createTree();

innerHTML(out, `<b preserve>test</ba>`);
innerHTML(out, `<b preserve>never changed</ba>`);

console.log(toString(out), 'contents will not update', 'test');

The idea is to skip diffing (sync phase) and simply return the previously rendered node with the attribute x-preserve or whatever you want to call it.

[yatesco]

Thanks Tim. I hope the flight goes well ;-)