Allow for filtering of nodes in middleware

[dyoder]

This may already be possible and I just don't understand middleware well enough to do it, but we have a requirement to be able to exempt certain nodes from the diff. My guess is that the best way to satisfy that requirement would be to hook into the diff process via middleware and effectively cancel updates that meet a certain criteria. Any guidance or assistance would be much appreciated, thank you!

[tbranyen]

I think this test will be useful:

it('will allow blackboxing an existing tree to avoid diffing', () => {
  const oldTree = document.createElement('div');
  const newTree = html`<div class="test" />`;

  this.syncTreeHook = (oldTree, newTree) => {
    if (newTree.attributes.class === 'test') {
      return oldTree;
    }
  };

  outerHTML(oldTree, newTree);

  equal(oldTree.outerHTML, `<div></div>`);

  release(oldTree);
});

Something like this:

import { use } from 'diffhtml';

use({
  syncTreeHook(oldTree, newTree) {
    // Don't diff elements with the no-diff attribute
    if (newTree.attributes['no-diff']) {
      return oldTree;
    }
  }
});

[dyoder]

Thank you for the quick reply! We'll try that out. Closing this, but is there a better place to ask follow up questions if we have any trouble?

[tbranyen]

Here or you can use gitter and ping me so I get a notification: https://gitter.im/tbranyen/diffhtml

[tbranyen]

Created a scenario here that shows how complicated this can be with dynamically added elements: https://glitch.com/edit/#!/wide-evanescent-bill?path=script.js%3A7%3A27

We can improve this by considering it during sync.