neo.mjs 7.16.0 → 8.0.0-alpha.2

package/src/util/VDom.mjs

@@ -1,4 +1,5 @@
-import Base from '../core/Base.mjs';
+import Base             from '../core/Base.mjs';
+import ComponentManager from '../manager/Component.mjs';
 
 /**
  * @class Neo.util.VDom
@@ -38,6 +39,7 @@ class VDom extends Base {
      * Search vdom child nodes by id or opts object for a given vdom tree
      * @param {Object} vdom
      * @param {Object|String} opts Either an object containing vdom node attributes or a string based id
+     * @param {Boolean} replaceComponentRefs=true
      * @param {Number} [index] Internal flag, do not use it
      * @param {Object} [parentNode] Internal flag, do not use it
      * @returns {Object}
@@ -45,10 +47,14 @@ class VDom extends Base {
      *     {String} parentId
      *     {Object} vdom
      */
-    static findVdomChild(vdom, opts, index, parentNode) {
+    static find(vdom, opts, replaceComponentRefs=true, index, parentNode) {
         index = index || 0;
         opts  = !Neo.isString(opts) ? opts : {id: opts};
 
+        if (replaceComponentRefs) {
+            vdom = VDom.getVdom(vdom)
+        }
+
         let child      = null,
             matchArray = [],
             styleMatch = true,
@@ -72,7 +78,7 @@ class VDom extends Base {
                             }
                         } else if (Neo.isArray(value) && Neo.isArray(vdom[key])) {
                             // todo: either search the vdom array for all keys or compare if the arrays are equal.
-                            throw new Error('findVdomChild: cls matching not supported for target & source types of Arrays')
+                            throw new Error('find: cls matching not supported for target & source types of Arrays')
                         }
                         break
                     case 'style':
@@ -91,7 +97,7 @@ class VDom extends Base {
                                 matchArray.push(true)
                             }
                         } else {
-                            throw new Error('findVdomChild: style matching not supported for mixed target & source types (Object VS String)')
+                            throw new Error('find: style matching not supported for mixed target & source types (Object VS String)')
                         }
                         break
                     default:
@@ -110,7 +116,7 @@ class VDom extends Base {
         if (vdom.cn) {
             for (; i < len; i++) {
                 if (vdom.cn[i]) {
-                    subChild = VDom.findVdomChild(vdom.cn[i], opts, i, vdom);
+                    subChild = VDom.find(vdom.cn[i], opts, replaceComponentRefs, i, vdom);
 
                     if (subChild) {
                         child = {
@@ -128,14 +134,13 @@ class VDom extends Base {
     }
 
     /**
-     * Convenience shortcut for findVdomChild(vdom, {flag: flag});
+     * Convenience shortcut for find(vdom, {flag: flag});
      * @param {Object} vdom
      * @param {String} flag The flag reference specified on the target vdom child node
      * @returns {Object} vdom
      */
     static getByFlag(vdom, flag) {
-        let node = VDom.findVdomChild(vdom, {flag});
-        return node?.vdom
+        return VDom.find(vdom, {flag})?.vdom
     }
 
     /**
@@ -145,6 +150,8 @@ class VDom extends Base {
      * @returns {Array} childIds
      */
     static getChildIds(vdom, childIds=[]) {
+        vdom = VDom.getVdom(vdom);
+
         let childNodes = vdom?.cn || [];
 
         childNodes.forEach(childNode => {
@@ -164,6 +171,8 @@ class VDom extends Base {
      * @returns {Array}
      */
     static getColumnNodes(vdom, index) {
+        vdom = VDom.getVdom(vdom);
+
         let columnNodes = [];
 
         vdom.cn?.forEach(row => {
@@ -191,6 +200,8 @@ class VDom extends Base {
      * @returns {Array} an array of vdom nodes which match the flag
      */
     static getFlags(vdom, flag, matchArray) {
+        vdom = VDom.getVdom(vdom);
+
         if (!matchArray) {
             matchArray = [];
 
@@ -217,6 +228,8 @@ class VDom extends Base {
      * @returns {Array}
      */
     static getParentNodes(vdom, id, topLevel=true) {
+        vdom = VDom.getVdom(vdom);
+
         let parents = null,
             i       = 0,
             len     = vdom.cn?.length || 0;
@@ -241,6 +254,19 @@ class VDom extends Base {
         return parents
     }
 
+    /**
+     * Convenience shortcut using manager.Component to replace vdom references if needed
+     * @param {Object} vdom
+     * @returns {Object}
+     */
+    static getVdom(vdom) {
+        if (vdom.componentId) {
+            vdom = ComponentManager.get(vdom.componentId).vdom
+        }
+
+        return vdom
+    }
+
     /**
      * Insert a given nodeToInsert after a targetNode inside a given vdom tree
      * @param {Object} vdom The vdom tree containing the targetNode
@@ -276,7 +302,7 @@ class VDom extends Base {
             targetNodeId = targetNodeId.id
         }
 
-        let targetNode = VDom.findVdomChild(vdom, {id: targetNodeId}),
+        let targetNode = VDom.find(vdom, targetNodeId),
             index;
 
         if (targetNode) {
@@ -295,7 +321,7 @@ class VDom extends Base {
      * @returns {Boolean} true in case the node was found & removed
      */
     static removeVdomChild(vdom, opts) {
-        let child = VDom.findVdomChild(vdom, opts);
+        let child = VDom.find(vdom, opts);
 
         if (child) {
             child.parentNode.cn.splice(child.index, 1);
@@ -313,6 +339,8 @@ class VDom extends Base {
      * @returns {Boolean} true in case the node was found and replaced
      */
     static replaceVdomChild(vdom, id, newChildNode) {
+        vdom = VDom.getVdom(vdom);
+
         let cn  = vdom.cn || [],
             i   = 0,
             len = cn.length,
@@ -347,6 +375,8 @@ class VDom extends Base {
      */
     static syncVdomIds(vnode, vdom, force=false) {
         if (vnode && vdom) {
+            vdom = VDom.getVdom(vdom);
+
             let childNodes = vdom.cn,
                 cn, i, len;
 
@@ -363,7 +393,8 @@ class VDom extends Base {
             }
 
             if (childNodes) {
-                cn   = childNodes.filter(item => item.removeDom !== true);
+                cn   = childNodes.map(item => VDom.getVdom(item));
+                cn   = cn.filter(item => item.removeDom !== true);
                 i    = 0;
                 len  = cn?.length || 0;
 

package/src/util/VNode.mjs

@@ -1,4 +1,5 @@
-import Base from '../core/Base.mjs';
+import Base             from '../core/Base.mjs';
+import ComponentManager from '../manager/Component.mjs';
 
 /**
  * @class Neo.util.VNode
@@ -25,6 +26,8 @@ class VNode extends Base {
      *     {Object} vnode
      */
     static findChildVnode(vnode, opts, index, parentNode) {
+        vnode = VNode.getVnode(vnode);
+
         index = index || 0;
         opts  = typeof opts !== 'string' ? opts : {id: opts};
 
@@ -112,6 +115,8 @@ class VNode extends Base {
      * @returns {Object|null} child vnode or null
      */
     static findChildVnodeById(vnode, id) {
+        vnode = VNode.getVnode(vnode);
+
         let childNodes = vnode.childNodes || [],
             i          = 0,
             len        = childNodes.length,
@@ -122,7 +127,7 @@ class VNode extends Base {
         }
 
         for (; i < len; i++) {
-            childNode = childNodes[i];
+            childNode = VNode.getVnode(childNodes[i]);
 
             if (childNode.id === id) {
                 return childNode
@@ -139,25 +144,38 @@ class VNode extends Base {
     }
 
     /**
-     * Get the ids of all child nodes of the given vnode
-     * @param vnode
-     * @param [childIds=[]]
-     * @returns {Array} childIds
+     * Get the ids of all child nodes of the given vnode, excluding component references
+     * @param {Object} vnode
+     * @param {String[]} childIds=[]
+     * @returns {String[]} childIds
      */
     static getChildIds(vnode, childIds=[]) {
-        let childNodes = vnode && vnode.childNodes || [];
+        let childNodes = vnode?.childNodes || [];
 
         childNodes.forEach(childNode => {
-            if (childNode.id) {
+            if (childNode.id && !childNode.componentId) {
                 childIds.push(childNode.id)
             }
 
-            childIds = VNode.getChildIds(childNode, childIds)
+            VNode.getChildIds(childNode, childIds)
         });
 
         return childIds
     }
 
+    /**
+     * Convenience shortcut using manager.Component to replace vnode references if needed
+     * @param {Object} vnode
+     * @returns {Object}
+     */
+    static getVnode(vnode) {
+        if (vnode.componentId) {
+            vnode = ComponentManager.get(vnode.componentId).vnode
+        }
+
+        return vnode
+    }
+
     /**
      * Removes a child vnode inside a vnode tree by a given id
      * @param {Object} vnode
@@ -165,6 +183,8 @@ class VNode extends Base {
      * @returns {Boolean} true in case the node was found and removed
      */
     static removeChildVnode(vnode, id) {
+        vnode = VNode.getVnode(vnode);
+
         let childNodes = vnode.childNodes || [],
             i          = 0,
             len        = childNodes.length,
@@ -175,7 +195,7 @@ class VNode extends Base {
         }
 
         for (; i < len; i++) {
-            childNode = childNodes[i];
+            childNode = VNode.getVnode(childNodes[i]);
 
             if (childNode.id === id) {
                 childNodes.splice(i, 1);
@@ -198,6 +218,8 @@ class VNode extends Base {
      * @returns {Boolean} true in case the node was found and replaced
      */
     static replaceChildVnode(vnode, id, newChildVnode) {
+        vnode = VNode.getVnode(vnode);
+
         let childNodes = vnode.childNodes || [],
             i          = 0,
             len        = childNodes.length,
@@ -208,7 +230,7 @@ class VNode extends Base {
         }
 
         for (; i < len; i++) {
-            childNode = childNodes[i];
+            childNode = VNode.getVnode(childNodes[i]);
 
             if (childNode.id === id) {
                 childNodes[i] = newChildVnode;

package/src/vdom/Helper.mjs

@@ -132,6 +132,10 @@ class Helper extends Base {
         let {deltas, oldVnode, vnode, vnodeMap} = config,
             attributes, delta, value, keys, styles, add, remove;
 
+        if (oldVnode.componentId && (oldVnode.id === vnode.id || oldVnode.componentId === vnode.id)) {
+            return deltas
+        }
+
         if (vnode.vtype === 'text' && vnode.innerHTML !== oldVnode.innerHTML) {
             deltas.default.push({
                 action  : 'updateVtext',
@@ -233,7 +237,7 @@ class Helper extends Base {
      */
     createDeltas(config) {
         let {deltas={default: [], remove: []}, oldVnode, vnode} = config,
-            oldVnodeId = oldVnode?.id,
+            oldVnodeId = oldVnode?.id || oldVnode?.componentId,
             vnodeId    = vnode?.id;
 
         // Edge case: setting `removeDom: true` on a top-level vdom node
@@ -259,7 +263,7 @@ class Helper extends Base {
             indexDelta    = 0,
             insertDelta   = 0,
             len           = Math.max(childNodes.length, oldChildNodes.length),
-            childNode, nodeInNewTree, oldChildNode;
+            childNode, nodeInNewTree, oldChildNode, oldChildNodeId;
 
         me.compareAttributes({deltas, oldVnode, vnode, vnodeMap});
 
@@ -285,7 +289,8 @@ class Helper extends Base {
             }
 
             if (oldChildNode) {
-                nodeInNewTree = vnodeMap.get(oldChildNode.id);
+                oldChildNodeId = oldChildNode.id || oldChildNode.componentId;
+                nodeInNewTree  = vnodeMap.get(oldChildNodeId);
 
                 // Remove node, if no longer inside the new tree
                 if (!nodeInNewTree) {
@@ -304,14 +309,14 @@ class Helper extends Base {
             }
 
             if (childNode) {
-                if (oldVnodeMap.get(childNode.id)) {
-                    me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
+                if (me.isMovedNode(childNode, oldVnodeMap)) {
+                    me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap})
                 } else {
                     me.insertNode({deltas, index: i + insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
                 }
 
-                if (oldChildNode && vnodeId === vnodeMap.get(oldChildNode.id)?.parentNode.id) {
-                    len++;
+                if (oldChildNode && vnodeId === vnodeMap.get(oldChildNodeId)?.parentNode.id) {
+                    len++
                 }
             }
         }
@@ -432,6 +437,15 @@ class Helper extends Base {
      * @returns {Object|Neo.vdom.VNode|null}
      */
     createVnode(opts) {
+        // do not create vnode instances for component reference objects
+        if (opts.componentId) {
+            if (!opts.id) {
+                opts.id = opts.componentId
+            }
+
+            return opts
+        }
+
         if (opts.removeDom === true) {
             return null
         }
@@ -516,11 +530,10 @@ class Helper extends Base {
                         hasUnit = value != parseInt(value);
                         node.style[key] = value + (hasUnit ? '' : 'px');
                         break
+                    case 'componentId':
                     case 'id':
-                        node.id = value;
-                        break
                     case 'static':
-                        node.static = value;
+                        node[key] = value;
                         break
                     case 'style':
                         style = node.style;
@@ -557,13 +570,17 @@ class Helper extends Base {
      */
     createVnodeMap(config) {
         let {vnode, parentNode=null, index=0, map=new Map()} = config,
-            id = vnode?.id;
+            id;
 
-        map.set(id, {id, index, parentNode, vnode});
+        if (vnode) {
+            id = vnode.id || vnode.componentId;
 
-        vnode?.childNodes?.forEach((childNode, index) => {
-            this.createVnodeMap({vnode: childNode, parentNode: vnode, index, map})
-        });
+            map.set(id, {id, index, parentNode, vnode});
+
+            vnode.childNodes?.forEach((childNode, index) => {
+                this.createVnodeMap({vnode: childNode, parentNode: vnode, index, map})
+            });
+        }
 
         return map
     }
@@ -583,12 +600,10 @@ class Helper extends Base {
             id = vnode?.id;
 
         if (id) {
-            let currentNode = oldVnodeMap.get(id)
-
-            if (currentNode) {
+            if (this.isMovedNode(vnode, oldVnodeMap)) {
                 movedNodes.set(id, vnodeMap.get(id))
             } else {
-                vnode.childNodes.forEach(childNode => {
+                vnode.childNodes?.forEach(childNode => {
                     if (childNode.vtype !== 'text') {
                         this.findMovedNodes({movedNodes, oldVnodeMap, vnode: childNode, vnodeMap})
                     }
@@ -630,6 +645,21 @@ class Helper extends Base {
         })
     }
 
+    /**
+     *
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map} oldVnodeMap
+     * @returns {Boolean}
+     */
+    isMovedNode(vnode, oldVnodeMap) {
+        let oldVnode = oldVnodeMap.get(vnode.id);
+
+        return oldVnode && (
+            !oldVnode.vnode.componentId ||                   // the old vnode is not a reference
+            vnode.componentId === oldVnode.vnode.componentId // old & new nodes are the same references
+        )
+    }
+
     /**
      * @param {Object}         config
      * @param {Object}         config.deltas
@@ -677,9 +707,12 @@ class Helper extends Base {
      * @param {Neo.vdom.VNode} config.oldVnode
      * @param {Map}            config.oldVnodeMap
      */
-    removeNode(config) {
-        let {deltas, oldVnode, oldVnodeMap} = config,
-            delta        = {action: 'removeNode', id: oldVnode.id},
+    removeNode({deltas, oldVnode, oldVnodeMap}) {
+        if (oldVnode.componentId && !oldVnode.id) {
+            oldVnode.id = oldVnode.componentId
+        }
+
+        let delta        = {action: 'removeNode', id: oldVnode.id},
             {parentNode} = oldVnodeMap.get(oldVnode.id);
 
         if (oldVnode.vtype === 'text') {

package/src/vdom/VNode.mjs

@@ -4,7 +4,7 @@
  */
 class VNode {
     /**
-     * @param config
+     * @param {Object} config
      */
     constructor(config) {
         /**