@webtides/element-js 1.1.6 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.1.6",
+    "version": "1.1.7",
     "module": "index.js",
     "main": "index.js",
     "type": "module",

package/src/dom-parts/ChildNodePart.js

@@ -3,6 +3,16 @@ import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { TemplatePart } from './TemplatePart.js';
 
+/**
+ * @param {Element} commentNode
+ * @param {Element[]} nodes
+ */
+const insertNodesBetweenComments = (commentNode, nodes) => {
+    for (const node of nodes) {
+        commentNode.parentNode.insertBefore(node, commentNode);
+    }
+};
+
 /**
  * @param {Element} commentNode
  */
@@ -58,11 +68,7 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
 
         // If the DOM node doesn't exist, append/copy the template node
         if (domChildNode === undefined) {
-            if (templateChildNode instanceof TemplatePart) {
-                anchorNode.before(...templateChildNode.childNodes);
-            } else if (Array.isArray(templateChildNode)) {
-                anchorNode.before(...templateChildNode);
-            } else if (typeof templateChildNode === 'object' && 'ELEMENT_NODE' in templateChildNode) {
+            if (typeof templateChildNode === 'object' && 'ELEMENT_NODE' in templateChildNode) {
                 parentNode.insertBefore(templateChildNode, anchorNode);
             } else {
                 // TODO: this might not be performant?! Can we maybe handle this in processDomNode?!
@@ -79,12 +85,12 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
                 parentNode.removeChild(domChildNode);
             } else if (Array.isArray(domChildNode) || domChildNode instanceof TemplatePart) {
                 // remove childNodes
-                const childNodes = Array.isArray(domChildNode) ? domChildNode : [...domChildNode.childNodes];
+                const childNodes = Array.isArray(domChildNode) ? domChildNode : domChildNode.childNodes;
                 for (const childNode of childNodes) {
                     childNode.remove();
                 }
             } else {
-                console.log('This should not happen... what do we do about this node?!', domChildNode);
+                console.log('This should not happen... what do we do about this node?!', { domChildNode });
             }
             continue;
         }
@@ -105,13 +111,12 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
         if (parentNode.contains(domChildNode)) {
             parentNode.replaceChild(templateChildNode, domChildNode);
         } else {
-            console.warn(
-                'This should not happen',
+            console.warn('This should not happen', {
                 parentNode,
-                parentNode.contains(domChildNode),
+                'parentNode.contains(domChildNode)': parentNode.contains(domChildNode),
                 templateChildNode,
                 domChildNode,
-            );
+            });
         }
     }
     return templateChildNodes;
@@ -123,7 +128,7 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
  * @return {(function(*): void)|*}
  */
 export const processNodePart = (comment, initialValue) => {
-    let nodes = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : [];
+    let nodes = initialValue instanceof TemplatePart ? initialValue.childNodes : [];
     let oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
     // this is for string values to be inserted into the DOM. A cached TextNode will be used so that we don't have to constantly create new DOM nodes.
     let cachedTextNode = undefined;
@@ -166,7 +171,20 @@ export const processNodePart = (comment, initialValue) => {
                         removeNodesBetweenComments(comment);
                         nodes = [];
                     } else {
-                        nodes = diffChildNodes(comment.parentNode, oldValue || [], newValue, comment);
+                        // TODO: this will always diff the arrays although they might not have changed...
+                        const unwrapArray = (nodes) => {
+                            // we have to unwrap any complex objects inside the array so that we can diff arrays of childNodes
+                            return nodes.flatMap((value) => {
+                                if (value instanceof TemplatePart) {
+                                    return value.childNodes;
+                                }
+                                if (Array.isArray(value)) {
+                                    return unwrapArray(value);
+                                }
+                                return value;
+                            });
+                        };
+                        nodes = diffChildNodes(comment.parentNode, nodes, unwrapArray(newValue), comment);
                     }
                     oldValue = newValue;
                     break;
@@ -176,7 +194,7 @@ export const processNodePart = (comment, initialValue) => {
                     // if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
                     // static strings have changed in tpl part
                     oldValue = newValue.strings;
-                    nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
+                    nodes = diffChildNodes(comment.parentNode, nodes, newValue.childNodes, comment);
                 } else if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
                     // DOM Node changed, needs diffing
                     oldValue = newValue;
@@ -196,12 +214,6 @@ export const processNodePart = (comment, initialValue) => {
  * For updating a text node, a sequence of child nodes or an array of `any` values
  */
 export class ChildNodePart extends Part {
-    /** @type {Node | undefined} */
-    startNode = undefined;
-
-    /** @type {Node | undefined} */
-    endNode = undefined;
-
     // TODO: this is only for array values
     /** @type {Part[]} */
     parts = [];
@@ -225,6 +237,7 @@ export class ChildNodePart extends Part {
 
         super();
 
+        let endNode = undefined;
         let serverSideRendered = false;
         if (startNode) {
             startNode.__part = this; // add Part to comment node for debugging in the browser
@@ -237,7 +250,7 @@ export class ChildNodePart extends Part {
                 childNode = childNode.nextSibling;
             }
 
-            const endNode = childNode;
+            endNode = childNode;
             childNodes.push(endNode);
 
             // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
@@ -246,15 +259,13 @@ export class ChildNodePart extends Part {
             }
 
             this.childNodes = childNodes;
-            this.startNode = startNode;
-            this.endNode = endNode;
         }
 
         // value can become array | TemplatePart | any
         const initialValue = this.parseValue(value);
 
-        if (this.endNode) {
-            this.processor = processNodePart(this.endNode, serverSideRendered ? initialValue : undefined);
+        if (endNode) {
+            this.processor = processNodePart(endNode, serverSideRendered ? initialValue : undefined);
         }
 
         if (!serverSideRendered) {
@@ -262,9 +273,9 @@ export class ChildNodePart extends Part {
                 this.updateParts(value);
             }
 
-            // We need a childNodes list that is NOT live so that we don't lose elements when they get removed from the dom and we can (re)add them back in later.
-            this.childNodes = [...this.childNodes];
-            this.processor?.(initialValue);
+            if (!(value instanceof TemplateResult)) {
+                this.processor?.(initialValue);
+            }
         }
     }
 
@@ -305,11 +316,19 @@ export class ChildNodePart extends Part {
     parseValue(value) {
         if (value instanceof TemplateResult) {
             if (!this.templatePart) {
-                const templatePartCommentNodes = this.childNodes?.filter(
-                    (node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
-                );
-                const startNode = templatePartCommentNodes[0];
+                const startNode = Array.from(this.childNodes)
+                    .filter((node) => node.nodeType === COMMENT_NODE)
+                    .find((node) => node.data === 'template-part');
                 this.templatePart = new TemplatePart(startNode, value);
+                const serverSideRendered = startNode !== undefined;
+                if (!serverSideRendered) {
+                    // TODO: we should already have the "endNode" from the constructor...
+                    const endNode = Array.from(this.childNodes)
+                        .filter((node) => node.nodeType === COMMENT_NODE)
+                        .find((node) => node.data.includes('/dom-part-'));
+                    // INFO: this is similar to TemplateResult#237
+                    insertNodesBetweenComments(endNode, this.templatePart.childNodes);
+                }
             }
             return this.templatePart;
         }
@@ -354,6 +373,7 @@ export class ChildNodePart extends Part {
                 }
                 parsedValues[index] = childNodePart;
             } else {
+                // TODO: what if the value from the function is a TemplatePart or an array?! Should we do this first thing?!
                 parsedValues[index] = typeof value === 'function' ? value() : value;
             }
         }

package/src/dom-parts/TemplatePart.js

@@ -33,6 +33,7 @@ export class TemplatePart extends Part {
 
         super();
 
+        let endNode = undefined;
         let serverSideRendered = false;
         if (startNode) {
             startNode.__part = this; // add Part to comment node for debugging in the browser
@@ -45,7 +46,7 @@ export class TemplatePart extends Part {
                 childNode = childNode.nextSibling;
             }
 
-            const endNode = childNode;
+            endNode = childNode;
             childNodes.push(endNode);
 
             // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
@@ -54,23 +55,19 @@ export class TemplatePart extends Part {
             }
 
             this.childNodes = childNodes;
-            this.startNode = startNode;
-            this.endNode = endNode;
         }
 
         this.parseValue(value);
 
         if (!serverSideRendered) {
+            // TODO: this is causing double diffing because of the this.parseValue() before, ChildNode parts will be constructed + processed
             this.updateParts(value.values);
-            // We need a childNodes list that is NOT live so that we don't loose elements when they get removed from the dom and we can (re)add them back in later.
-            this.childNodes = [...this.childNodes];
         }
 
-        this.startNode = this.childNodes[0];
-        this.endNode = this.childNodes[this.childNodes.length - 1];
+        endNode = this.childNodes[this.childNodes.length - 1];
 
-        if (this.endNode) {
-            this.processor = processNodePart(this.endNode, this);
+        if (endNode) {
+            this.processor = processNodePart(endNode, this);
         }
     }
 
@@ -78,10 +75,11 @@ export class TemplatePart extends Part {
      * @param {TemplateResult} value
      */
     update(value) {
-        this.parseValue(value);
+        const shouldUpdateDOM = this.parseValue(value);
+        if (shouldUpdateDOM) {
+            this.processor?.(this);
+        }
         this.updateParts(value.values);
-        this.childNodes = [...this.childNodes];
-        this.processor?.(this);
     }
 
     /**
@@ -95,6 +93,7 @@ export class TemplatePart extends Part {
 
     /**
      * @param {TemplateResult} templateResult
+     * @return {boolean} whether the part needs to be updated in the DOM
      */
     parseValue(templateResult) {
         if (this.strings !== templateResult.strings) {
@@ -134,8 +133,10 @@ export class TemplatePart extends Part {
                     throw `cannot map part: ${part}`;
                 });
             this.strings = templateResult.strings;
+            this.childNodes = [...this.childNodes];
+            return true;
         }
-        return this.childNodes;
+        return false;
     }
 
     /**