fix: diff for referenced nodes

chialab · Oct 4, 2021 · 1ee38f0 · 1ee38f0
1 parent 702eaba
commit 1ee38f0
Show file tree

Hide file tree

Showing 5 changed files with 506 additions and 347 deletions.
diff --git a/package.json b/package.json
@@ -68,12 +68,12 @@
   "devDependencies": {
     "@babel/runtime": "^7.14.0",
     "@chialab/eslint-config": "^2.0.0",
-    "@chialab/rna": "^0.11.0",
-    "@chialab/rna-apidoc": "^0.11.0",
-    "@chialab/rna-browser-test-runner": "^0.11.0",
-    "@chialab/rna-bundler": "^0.11.0",
-    "@chialab/rna-node-test-runner": "^0.11.0",
-    "@chialab/rna-saucelabs-test-runner": "^0.11.0",
+    "@chialab/rna": "^0.12.0",
+    "@chialab/rna-apidoc": "^0.12.0",
+    "@chialab/rna-browser-test-runner": "^0.12.0",
+    "@chialab/rna-bundler": "^0.12.0",
+    "@chialab/rna-node-test-runner": "^0.12.0",
+    "@chialab/rna-saucelabs-test-runner": "^0.12.0",
     "@chialab/semantic-release-config": "^1.0.0",
     "@esm-bundle/chai": "^4.3.4",
     "@types/jsdom": "^16.0.0",

diff --git a/src/CustomElementRegistry.ts b/src/CustomElementRegistry.ts
@@ -213,7 +213,10 @@ export class CustomElementRegistry {
         const nodes = root.children;
         // iterate all nodes found
         for (let i = 0, len = nodes.length; i < len; i++) {
-            this.upgrade(nodes[i] as HTMLElement);
+            const node = nodes[i] as HTMLElement;
+            if (node) {
+                this.upgrade(node);
+            }
         }
         if (!constructor) {
             return;

diff --git a/src/JSX.ts b/src/JSX.ts
@@ -1692,7 +1692,7 @@ function h(tagOrComponent: typeof Fragment | FunctionComponent | CustomElementCo
     if (ref) {
         return {
             node: ref,
-            key,
+            key: ref,
             namespaceURI: xmlns,
             properties: properties || {},
             children,

diff --git a/src/render.ts b/src/render.ts
@@ -361,52 +361,49 @@ export const internalRender = (
             }
 
             const { key, children, namespaceURI } = template;
-            if (isVNode(template)) {
-                templateNode = template.node;
-            } else {
-                templateNamespace = namespaceURI || namespace;
-
-                checkKey: if (currentContext) {
-                    let currentKey = currentContext.key;
-                    if (currentKey != null && key != null && key !== currentKey) {
-                        emptyFragments(currentContext);
-                        DOM.removeChild(root, currentNode, slot);
-                        currentNode = childNodes.item(currentIndex) as Node;
-                        currentContext = currentNode ? getOrCreateContext(currentNode) : null;
-                        if (!currentContext) {
-                            break checkKey;
-                        }
-                        currentKey = currentContext.key;
+            templateNamespace = namespaceURI || namespace;
+            checkKey: if (currentContext) {
+                let currentKey = currentContext.key;
+                if (currentKey != null && key != null && key !== currentKey) {
+                    emptyFragments(currentContext);
+                    DOM.removeChild(root, currentNode, slot);
+                    currentNode = childNodes.item(currentIndex) as Node;
+                    currentContext = currentNode ? getOrCreateContext(currentNode) : null;
+                    if (!currentContext) {
+                        break checkKey;
                     }
+                    currentKey = currentContext.key;
+                }
 
-                    if (currentFragment && currentNode) {
-                        const io = indexOf.call(childNodes, currentNode);
-                        const lastIo = indexOf.call(childNodes, currentFragment.end);
-                        if (io !== -1 && io > lastIo) {
-                            break checkKey;
-                        }
+                if (currentFragment && currentNode) {
+                    const io = indexOf.call(childNodes, currentNode);
+                    const lastIo = indexOf.call(childNodes, currentFragment.end);
+                    if (io !== -1 && io > lastIo) {
+                        break checkKey;
                     }
+                }
 
-                    if (key != null || currentKey != null) {
-                        if (key === currentKey) {
-                            templateNode = currentNode;
-                            templateContext = currentContext;
-                        }
-                    } else if (isVComponent(template) && currentNode instanceof template.Component) {
-                        templateNode = currentNode;
-                        templateContext = currentContext;
-                    } else if (isVTag(template) && currentContext.tagName === template.tag) {
+                if (key != null || currentKey != null) {
+                    if (key === currentKey) {
                         templateNode = currentNode;
                         templateContext = currentContext;
                     }
+                } else if (isVComponent(template) && currentNode instanceof template.Component) {
+                    templateNode = currentNode;
+                    templateContext = currentContext;
+                } else if (isVTag(template) && currentContext.tagName === template.tag) {
+                    templateNode = currentNode;
+                    templateContext = currentContext;
                 }
+            }
 
-                if (!templateNode) {
-                    if (isVComponent(template)) {
-                        templateNode = new template.Component();
-                    } else {
-                        templateNode = DOM.createElementNS(templateNamespace, template.tag);
-                    }
+            if (!templateNode) {
+                if (isVNode(template)) {
+                    templateNode = template.node;
+                } else if (isVComponent(template)) {
+                    templateNode = new template.Component();
+                } else {
+                    templateNode = DOM.createElementNS(templateNamespace, template.tag);
                 }
             }