addVnodeComponentReferences(vnode, ownerId) {
vnode = {...vnode}; // shallow copy
let me = this,
childNodes = vnode?.childNodes ? [...vnode.childNodes] : [],
component;
vnode.childNodes = childNodes;
childNodes.forEach((childNode, index) => {
if (!childNode.componentId && childNode.id !== ownerId) {
// searching for wrapped components as a fallback
component = me.get(childNode.id) || me.findFirst('vdom.id', childNode.id)
}
childNodes[index] = component ?
{componentId: component.id, id: component.vdom.id} :
this.addVnodeComponentReferences(childNode, ownerId)
});
return vnode
}
to keep the vdom & vnode trees in sync, we need to add component references into the vnode tree as well.
e.g. rendering the viewport => we get the full vnode (DOM) tree of the entire app. then we need to walk over every node to see if it is a cmp.
for most cmps this is an easy map check inside manager.Component. however, there are wrapped cmps, which can have 1-x parent nodes.
querying manager.Component to identify them is not reasonable (slow).
my first idea was to create manager.WrappedComponent, but i doubt that devs would need it for querying / searching.
so we can just add a second map into manager.Component. key => wrapper node id, value => component reference.
should be sufficient and lightweight.
addVnodeComponentReferences(vnode, ownerId) { vnode = {...vnode}; // shallow copy let me = this, childNodes = vnode?.childNodes ? [...vnode.childNodes] : [], component; vnode.childNodes = childNodes; childNodes.forEach((childNode, index) => { if (!childNode.componentId && childNode.id !== ownerId) { // searching for wrapped components as a fallback component = me.get(childNode.id) || me.findFirst('vdom.id', childNode.id) } childNodes[index] = component ? {componentId: component.id, id: component.vdom.id} : this.addVnodeComponentReferences(childNode, ownerId) }); return vnode }to keep the vdom & vnode trees in sync, we need to add component references into the vnode tree as well.
e.g. rendering the viewport => we get the full vnode (DOM) tree of the entire app. then we need to walk over every node to see if it is a cmp.
for most cmps this is an easy map check inside manager.Component. however, there are wrapped cmps, which can have 1-x parent nodes.
querying manager.Component to identify them is not reasonable (slow).
my first idea was to create manager.WrappedComponent, but i doubt that devs would need it for querying / searching.
so we can just add a second map into manager.Component. key => wrapper node id, value => component reference.
should be sufficient and lightweight.