Same shape of virtual tree

[HamedFathi]

const block1 = createBlock(`<div>block1</div>`);
const block2 = createBlock(`<div>block2</div>`);

// incorrect: trees have not the same shape!!!
{
  const tree = block1();
  mount(tree, document.body);
  patch(tree, block2());
}

// correct: trees uses the toggler element to differentiate between two sub trees
{
  const tree = toggler("tree1", block1());
  mount(tree, document.body);
  patch(tree, toggler("tree2", block2()));
}

Based on the above example, you mean block1 and block2 are in the same shape but document.body is not in the same shape with them. Yes?

Does exist any functionality (as a boolean) to compare two blocks for the same shape?

[ged-odoo]

I can see that the documentation is not very good on that topic.

In the two examples above, the incorrect case is because the two trees that are being patched are:

const tree = block1();
const tree2 = block2();

But as you can see, the first tree is created from a function coming from a different createBlock than the second one. That is the problem.

This is kind of a subtle issue. This comes from the fact that, to optimize performance as much as possible, blockdom does not check if two virtual tree are the same. Whenever blockdom is patching a vnode, it blindly assumes that the target vnode is of the same type, and applies directly the patch operation from the first vnode with the data/children coming from the second. This is one of the reason why blockdom is fast, and is certainly somewhat tricky.

For a framework using templates, this is mostly a non issue: the framework would internally compiles a template into a function, but then, due to the fact that we start with a template, the function will automatically return a tree with the same shape/structure. So I decided that this was okay.

But let's explain more what we mean by the same shape: two virtual nodes vn1 and vn2 have the same shape if:

• they are of the same type of vnode (so, a block and a block, or a text and a text, or a multi and a multi, or a list and a list, ...)
• if they are of the type block:
  • the root elements from vn1 and vn2 are created from the same function returned by createBlock
  • each children from vn1 have the same shape as the corresponding children in vn2
• if they are of the type multi: each children from vn1 have the same shape as the corresponding children in vn2
• if they are of the type list: each children from vn1 and vn2 should have the same shape
• if they are of the type toggler, they have the same shape.

However, in some cases, we do not know before the shape of what we will get. For example, if we call a function that will return a blockdom (for example, if we call a dynamic sub template). In that case, we can use the toggler vnode: this forces blockdom to check their key, and if they are different, it can then replace one vnode by the other. Note that toggler vnode assumes that if the key is the same, then it represent a vnode of the same shape.

There you go, hope it helps