Ability to skip subtree render

[anwerso]

There is a skip() method in the Incremental DOM, which tell the renderer to skip node children render. It's good for a "poor man" web component w/o shadow DOM, slots etc... So basically you move responsibility of render node's children to the node itself.

Not sure how good this idea in case of hyperHTML or how easy (if even possible) to implement it, but lets imagine construction like <div>Hello <x-bar value="world"><skip></x-bar></div>. <skip> (or some other marker) should signal renderer to ignore node's children to be touched during update.

May be the whole idea is wrong in the first place or there is better approach to the problem above.

[WebReflection]

which problem are you actually having with hyperHTML ?

'cause shadow DOM AFAIK is completely ignored, Luke is not walking there.

Can you please provide a concrete example?

Otherwise it looks like the problem doesn't exist in the first place.

Thanks

[WebReflection]

closing until evidence of a bug.

[JSteunou]

I think I have the same need, but this is purely theoretical at the moment. To better explain it I will use an possible example with Backbone.Marionette (my goal is to integrate it with vyperHTML like I did with bell + morphdom which have some callbacks / events to implement things like skip)

<div>
  <h1>${model.title}</h1>
  <div data-region="body"></div>
</div>

const SomeComponentView = require('./foo.js');
const LayoutView = Mn.View.extend({
  template: require('./layout.html'),
  regions: {
    body: '[data-region="body"]'
  },

  onRender: function() {
    if (!this.hasChildView('body') {
      this.showChildView('body', new SomeComponentView());
    }
  }
});

When using this view, it will

1. render the template
2. add more content into the body region using a sub-view

Now imagine the layout is kept up-to-date with the model. Each time the model changes the view is re-rendered & the DOM patched with hyperHTML.

I would like to know if hyperHTML will erase / remove the body region content.

I tried to test with https://webreflection.github.io/hyperHTML/test/article.html by adding some content after the list, (a

) and triggering update with new data, but it seems to not update the html after this. Without adding a

after the list, the update works.

[JSteunou]

I felt bad about asking without trying so there it is... kind of dirty but eh...

I changed https://webreflection.github.io/hyperHTML/test/article.html to be like this

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

  setTimeout(function() {
  update(
    render,
    {
      title: 'True story',
      magic: true,
      paragraphs: [
        {title: 'amazing'},
        {title: 'incredible'},
        {title: 'doge'}
      ]
    }
  );

  }, 1000);

  setTimeout(function() {
    var p = document.createElement('p')
    p.textContent = 'Some content I do not want to be erased';
    articleElement.appendChild(p);
  }, 2000);

  setTimeout(function() {
  update(
    render,
    {
      title: 'True story',
      magic: true,
      paragraphs: [
        {title: 'amazing'},
        {title: 'jeez'},
        {title: 'doge'}
      ]
    }
  );

  }, 3000);

And ended it works very well, the added element do not get removed..

Case close.

Well done :)