@webtides/element-js 1.1.6 → 1.1.8

package/package.json

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

package/src/dom-parts/ChildNodePart.js

@@ -2,193 +2,204 @@ import { COMMENT_NODE, ELEMENT_NODE } from '../util/DOMHelper.js';
 import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { TemplatePart } from './TemplatePart.js';
+import { PartMarkers } from './PartMarkers.js';
 
 /**
- * @param {Element} commentNode
+ * @param {Comment} commentNode
+ * @param {Node[]} nodes
  */
-const removeNodesBetweenComments = (commentNode) => {
-    while (commentNode.previousSibling) {
-        if (
-            commentNode.previousSibling.nodeType === COMMENT_NODE &&
-            commentNode.previousSibling.data === commentNode.data.replace('/', '')
-        ) {
-            break;
-        }
-        commentNode.parentNode.removeChild(commentNode.previousSibling);
+export const insertNodesBetweenComments = (commentNode, nodes) => {
+    for (const node of nodes) {
+        commentNode.parentNode.insertBefore(node, commentNode);
+    }
+};
+
+/**
+ * @param {Comment} commentNode
+ * @param {Node[]} nodes
+ */
+export const replaceNodesBetweenComments = (commentNode, nodes) => {
+    removeNodesBetweenComments(commentNode);
+    for (const node of nodes) {
+        commentNode.parentNode.insertBefore(node, commentNode);
+    }
+};
+
+/**
+ * @param {Comment} commentNode
+ */
+export const removeNodesBetweenComments = (commentNode) => {
+    const nodes = getNodesBetweenComments(commentNode);
+    for (const node of nodes) {
+        commentNode.parentNode.removeChild(node);
     }
 };
 
 /**
- * @param {Node} parentNode
- * @param {Node[]} domChildNodes
- * @param {Node[]} templateChildNodes
- * @param {Node} anchorNode
+ * @param {Comment} commentNode
+ * @param {boolean} includeComments
  * @return {Node[]}
  */
-const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
-    // TODO: when diffing arrays there is sometimes two lists of TemplateParts instead of lists of childNodes
-    const offset = domChildNodes.includes(anchorNode) ? 1 : 0;
-
-    // release first level references to prevent cache mutation
-    const clonedDomChildNodes = [...domChildNodes];
-    const clonedTemplateChildNodes = [...templateChildNodes];
-
-    // We always want to have the two arrays (domChildNodes and cloneTemplateChildNodes) to have the same length.
-    // We also don't ever want to replace/diff the last node of the domChildNodes as it will always be the
-    // closing comment marker (/template-part) aka the anchorNode. So we push it to the end by inserting undefined items.
-    if (clonedTemplateChildNodes.length > clonedDomChildNodes.length) {
-        const nodesToFill = clonedTemplateChildNodes.length - clonedDomChildNodes.length;
-        for (let i = 0; i < nodesToFill; i++) {
-            clonedDomChildNodes.splice(clonedDomChildNodes.length - offset, 0, undefined);
+export const getNodesBetweenComments = (commentNode, includeComments = false) => {
+    const nodes = [];
+    let currentNode = includeComments ? commentNode : commentNode.previousSibling;
+    let nestingLevel = 0;
+
+    while (currentNode) {
+        if (includeComments) nodes.unshift(currentNode);
+
+        if (currentNode.nodeType === COMMENT_NODE && currentNode.data === commentNode.data) {
+            nestingLevel++;
         }
-    }
 
-    if (clonedDomChildNodes.length > clonedTemplateChildNodes.length) {
-        const nodesToFill = clonedDomChildNodes.length - clonedTemplateChildNodes.length;
-        for (let i = 0; i < nodesToFill; i++) {
-            clonedTemplateChildNodes.splice(clonedTemplateChildNodes.length - offset, 0, undefined);
+        if (currentNode.nodeType === COMMENT_NODE && currentNode.data === commentNode.data.replace('/', '')) {
+            if (nestingLevel === 0) {
+                break;
+            }
+            nestingLevel--;
         }
+
+        if (!includeComments) nodes.unshift(currentNode);
+        currentNode = currentNode.previousSibling;
     }
+    return nodes;
+};
 
-    const length = clonedDomChildNodes.length;
+/**
+ * @param {Node[]} newChildNodes
+ * @param {Comment} anchorNode
+ */
+const diffChildNodes = function (newChildNodes, anchorNode) {
+    const parentNode = anchorNode.parentNode;
+    const oldChildNodes = getNodesBetweenComments(anchorNode);
+
+    const length = Math.max(oldChildNodes.length, newChildNodes.length);
     // Diff each node in the child node lists
     for (let index = 0; index < length; index++) {
-        let domChildNode = clonedDomChildNodes[index];
-        let templateChildNode = clonedTemplateChildNodes[index];
-
-        // 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) {
-                parentNode.insertBefore(templateChildNode, anchorNode);
-            } else {
-                // TODO: this might not be performant?! Can we maybe handle this in processDomNode?!
-                // TODO: I think that we need to make ChildNodeParts from all primitive values as well
-                parentNode.insertBefore(document.createTextNode(templateChildNode), anchorNode);
-            }
+        let oldChildNode = oldChildNodes[index];
+        let newChildNode = newChildNodes[index];
+
+        if (newChildNode && !newChildNode.nodeType) {
+            throw new Error('ChildNodePart: newChildNode is not a node');
+        }
+
+        // If the DOM node doesn't exist, append/copy the new node
+        if (oldChildNode === undefined) {
+            parentNode.insertBefore(newChildNode, anchorNode);
             continue;
         }
 
-        if (templateChildNode === undefined) {
-            // If the template node doesn't exist, remove the node in the DOM
-            if ('ELEMENT_NODE' in domChildNode) {
-                // remove dom node
-                parentNode.removeChild(domChildNode);
-            } else if (Array.isArray(domChildNode) || domChildNode instanceof TemplatePart) {
-                // remove 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);
-            }
+        // If the new node doesn't exist, remove the node in the DOM
+        if (newChildNode === undefined) {
+            parentNode.removeChild(oldChildNode);
             continue;
         }
 
-        // If DOM node is equal to the template node, don't do anything in the DOM
-        if (
-            domChildNode === templateChildNode ||
-            (domChildNode.nodeType && templateChildNode.nodeType && domChildNode.isEqualNode(templateChildNode))
-        ) {
-            // but we need to assign the current DOM node into the templateChildNodes
-            // as they will be returned here at the end and become the domNodes for the next diffing.
-            const childIndex = templateChildNodes.indexOf(templateChildNode);
-            templateChildNodes[childIndex] = domChildNode;
+        // If DOM node is equal to the new node, don't do anything in the DOM
+        if (oldChildNode === newChildNode || oldChildNode.isEqualNode(newChildNode)) {
             continue;
         }
 
         // Everything else is somehow different and can be replaced
-        if (parentNode.contains(domChildNode)) {
-            parentNode.replaceChild(templateChildNode, domChildNode);
-        } else {
-            console.warn(
-                'This should not happen',
-                parentNode,
-                parentNode.contains(domChildNode),
-                templateChildNode,
-                domChildNode,
-            );
-        }
+        parentNode.replaceChild(newChildNode, oldChildNode);
     }
-    return templateChildNodes;
+};
+
+function getType(value) {
+    if (value instanceof TemplatePart) return 'templatePart';
+    if (value === null || value === undefined) return 'empty';
+    if (Array.isArray(value)) return value.length === 0 ? 'empty' : 'array';
+    if (value?.nodeType) return 'node';
+    return 'text';
+}
+
+// TODO: handle funcitons?! Should be handled in parseArray!!!
+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);
+        }
+        if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+            return document.createTextNode(value);
+        }
+        return value;
+    });
 };
 
 /**
- * @param {Node} comment
+ * @param {Comment} comment
  * @param {TemplatePart | any[] | any} initialValue
+ * @param {boolean} serverSideRendered
  * @return {(function(*): void)|*}
  */
-export const processNodePart = (comment, initialValue) => {
-    let nodes = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : [];
-    let oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
+export const processNodePart = (comment, initialValue, serverSideRendered = false) => {
+    let oldValueType = 'empty';
+    let oldValue = undefined;
     // 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;
+    // TODO: when server side rendered, we need to get the text node from the DOM no?!
+    let cachedTextNode = globalThis.document?.createTextNode('');
+
+    if (serverSideRendered) {
+        oldValueType = getType(initialValue);
+        oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
+    }
 
     const processNodeValue = (newValue) => {
-        switch (typeof newValue) {
-            // primitives are handled as text content
-            case 'string':
-            case 'number':
-            case 'boolean':
-                if (oldValue !== newValue) {
-                    oldValue = newValue;
-                    if (!cachedTextNode) cachedTextNode = globalThis.document?.createTextNode('');
-                    cachedTextNode.data = newValue;
-
-                    if (comment.previousSibling?.data === comment.data.replace('/', '')) {
-                        // the part is empty - we haven't rendered it yet
-                        comment.parentNode.insertBefore(cachedTextNode, comment);
-                    } else {
-                        // the part was already rendered (either server side or on the client)
-                        comment.previousSibling.data = newValue;
-                    }
-
-                    nodes = [cachedTextNode];
-                }
-                break;
-            // null (= typeof "object") and undefined are used to clean up previous content
-            case 'object':
-            case 'undefined':
-                if (newValue === null || newValue === undefined) {
-                    if (oldValue !== newValue) {
-                        oldValue = newValue;
-                        removeNodesBetweenComments(comment);
-                        nodes = [];
-                    }
-                    break;
-                }
-                if (Array.isArray(newValue)) {
-                    if (newValue.length === 0) {
-                        removeNodesBetweenComments(comment);
-                        nodes = [];
-                    } else {
-                        nodes = diffChildNodes(comment.parentNode, oldValue || [], newValue, comment);
-                    }
-                    oldValue = newValue;
-                    break;
-                }
+        let newValueType = getType(newValue);
 
-                if (newValue instanceof TemplatePart && oldValue !== newValue.strings) {
-                    // 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);
-                } else if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-                    // DOM Node changed, needs diffing
-                    oldValue = newValue;
-                    nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
-                }
-                break;
-            case 'function':
-                processNodeValue(newValue(comment));
-                break;
+        if (oldValueType === newValueType && oldValue === newValue) return;
+
+        if (oldValueType !== newValueType) {
+            if (newValueType === 'empty') {
+                removeNodesBetweenComments(comment);
+            } else {
+                const getNodesForType = (value, type) => {
+                    if (type === 'templatePart') return value.childNodes;
+                    if (type === 'array') return unwrapArray(value);
+                    if (type === 'node') return [value];
+
+                    // Every else falls back to rendering a text node
+                    cachedTextNode.data = value;
+                    return [cachedTextNode];
+                };
+                replaceNodesBetweenComments(comment, getNodesForType(newValue, newValueType));
+            }
+
+            oldValueType = newValueType;
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'text') {
+            cachedTextNode.data = newValue;
+
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'array') {
+            diffChildNodes(unwrapArray(newValue), comment);
+
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'node') {
+            diffChildNodes([newValue], comment);
+
+            oldValue = newValue;
         }
     };
 
+    if (!serverSideRendered) {
+        // initial rendering
+        processNodeValue(initialValue);
+    }
+
     return processNodeValue;
 };
 
@@ -196,76 +207,35 @@ 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 {PartMarkers|undefined} */
+    markers;
 
-    /** @type {Node | undefined} */
-    endNode = undefined;
+    /** @type {TemplatePart|undefined} */
+    templatePart;
 
-    // TODO: this is only for array values
     /** @type {Part[]} */
-    parts = [];
-
-    // TODO: this is only for TemplatePart values
-    templatePart = undefined;
-
-    // TODO: maybe we can store a generic vale|parsedValue that can be either parts[] | templatePart | any
-
-    /** @type {Node[]} */
-    childNodes = [];
+    arrayParts = [];
 
     /**
      * @param {Node} startNode - the start comment marker node
      * @param {any | any[]} value
      */
     constructor(startNode, value) {
-        if (startNode && startNode?.nodeType !== COMMENT_NODE) {
-            throw new Error('ChildNodePart: startNode is not a comment node');
+        if (!startNode || startNode?.nodeType !== COMMENT_NODE) {
+            throw new Error(
+                startNode ? 'ChildNodePart: startNode is undefined' : 'ChildNodePart: startNode is not a comment node',
+            );
         }
 
         super();
 
-        let serverSideRendered = false;
-        if (startNode) {
-            startNode.__part = this; // add Part to comment node for debugging in the browser
-
-            const placeholder = startNode.data;
-            const childNodes = [startNode];
-            let childNode = startNode.nextSibling;
-            while (childNode && childNode.data !== `/${placeholder}`) {
-                childNodes.push(childNode);
-                childNode = childNode.nextSibling;
-            }
-
-            const endNode = childNode;
-            childNodes.push(endNode);
-
-            // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
-            if (childNodes.length > 2) {
-                serverSideRendered = true;
-            }
-
-            this.childNodes = childNodes;
-            this.startNode = startNode;
-            this.endNode = endNode;
-        }
+        startNode.__part = this; // add Part to comment node for debugging in the browser
+        this.markers = PartMarkers.createFromStartNode(startNode);
 
         // value can become array | TemplatePart | any
         const initialValue = this.parseValue(value);
 
-        if (this.endNode) {
-            this.processor = processNodePart(this.endNode, serverSideRendered ? initialValue : undefined);
-        }
-
-        if (!serverSideRendered) {
-            if (value instanceof TemplateResult || Array.isArray(value)) {
-                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);
-        }
+        this.processor = processNodePart(this.markers?.endNode, initialValue, this.markers?.serverSideRendered);
     }
 
     /**
@@ -279,9 +249,7 @@ export class ChildNodePart extends Part {
             this.updateParts(value);
         }
 
-        if (!(value instanceof TemplateResult)) {
-            this.processor?.(parsedValue);
-        }
+        this.processor?.(parsedValue);
     }
 
     /**
@@ -293,30 +261,42 @@ export class ChildNodePart extends Part {
         }
         if (Array.isArray(value)) {
             for (let index = 0; index < value.length; index++) {
-                this.parts[index]?.update(value[index]);
+                this.arrayParts[index]?.update(value[index]);
             }
         }
     }
 
     /**
      * @param {TemplateResult | any[] | any} value
-     * @return {TemplatePart | any[] | any}
+     * @return {TemplatePart | Node | string | Array<TemplatePart | Node | string>}
      */
     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];
-                this.templatePart = new TemplatePart(startNode, value);
+                this.templatePart = new TemplatePart(this.markers?.findNestedStartNode('template-part'), value);
+                if (!this.markers?.serverSideRendered) {
+                    // INFO: this is similar to TemplateResult#237
+                    replaceNodesBetweenComments(this.markers?.endNode, this.templatePart.childNodes);
+                }
+            } else if (this.templatePart.strings !== value.strings) {
+                // this means we have a different TemplateResult here with maybe different parts also
+                this.templatePart = new TemplatePart(undefined, value);
+                // INFO: this is similar to TemplateResult#237
+                replaceNodesBetweenComments(this.markers?.endNode, this.templatePart.childNodes);
             }
             return this.templatePart;
         }
         if (Array.isArray(value)) {
             return this.parseArray(value);
         }
-        return value;
+        if (value?.nodeType) {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return this.parseValue(value());
+        }
+        // Everything else will be rendered as TextNode
+        return value.toString();
     }
 
     /**
@@ -329,31 +309,34 @@ export class ChildNodePart extends Part {
         for (let index = 0; index < values.length; index++) {
             let value = values[index];
 
+            // TODO: it would be better to use this.parseValue() here!!!
+
             if (value instanceof TemplateResult) {
                 // TODO this is probably wrong. Should only be taken from parts cache if it has the same type (eg. template vs string, mixed types arrays)
-                let templatePart = this.parts[index];
+                let templatePart = this.arrayParts[index];
                 if (!templatePart) {
-                    const templatePartCommentNodes = this.childNodes?.filter(
+                    const templatePartCommentNodes = this.markers?.childNodes?.filter(
                         (node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
                     );
                     const startNode = templatePartCommentNodes[index];
                     templatePart = new TemplatePart(startNode, value);
-                    this.parts[index] = templatePart;
+                    this.arrayParts[index] = templatePart;
                 }
                 parsedValues[index] = templatePart;
             } else if (Array.isArray(value)) {
-                let childNodePart = this.parts[index];
+                let childNodePart = this.arrayParts[index];
                 if (!childNodePart) {
                     // TODO: this seems not correct :( (maybe Template vs DOM Parts !?)
-                    const templatePartCommentNodes = this.childNodes?.filter(
+                    const templatePartCommentNodes = this.markers?.childNodes?.filter(
                         (node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
                     );
                     const startNode = templatePartCommentNodes[index];
                     childNodePart = new ChildNodePart(startNode, value);
-                    this.parts[index] = childNodePart;
+                    this.arrayParts[index] = childNodePart;
                 }
                 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/PartMarkers.js

@@ -0,0 +1,62 @@
+import { COMMENT_NODE } from '../util/DOMHelper.js';
+
+export class PartMarkers {
+    /** @type {Comment} */
+    startNode;
+
+    /** @type {Comment} */
+    endNode;
+
+    /** @type {Node[]} */
+    childNodes = [];
+
+    /** @type {boolean} */
+    serverSideRendered = false;
+
+    /**
+     * @param {Comment} start
+     * @param {Comment} end
+     * @param {Node[]} childNodes
+     * @return {void}
+     */
+    constructor(start, end, childNodes) {
+        this.startNode = start;
+        this.endNode = end;
+        this.childNodes = childNodes;
+
+        // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
+        if (childNodes.length > 2) {
+            this.serverSideRendered = true;
+        }
+    }
+
+    /**
+     * @param {string} partType The type of the node to search for. Defaults to 'template-part'.
+     * @return {Node|undefined} The first comment node matching the specified type, or undefined if no match is found.
+     */
+    findNestedStartNode(partType = 'template-part') {
+        return this.childNodes.filter((node) => node.nodeType === COMMENT_NODE).find((node) => node.data === partType);
+    }
+
+    /**
+     * Creates a new instance of PartMarkers from the given start node.
+     * @param {Comment} startNode - The starting comment node that marks the beginning of the section.
+     * @return {PartMarkers} A new instance of the PartMarkers class encapsulating the start and end nodes.
+     */
+    static createFromStartNode(startNode) {
+        let endNode;
+
+        const placeholder = startNode.data;
+        const childNodes = [startNode];
+        let childNode = startNode.nextSibling;
+        while (childNode && childNode.data !== `/${placeholder}`) {
+            childNodes.push(childNode);
+            childNode = childNode.nextSibling;
+        }
+
+        endNode = childNode;
+        childNodes.push(endNode);
+
+        return new PartMarkers(startNode, endNode, childNodes);
+    }
+}

package/src/dom-parts/TemplatePart.js

@@ -2,17 +2,21 @@ import { COMMENT_NODE, convertStringToTemplate } from '../util/DOMHelper.js';
 import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { AttributePart } from './AttributePart.js';
-import { ChildNodePart, processNodePart } from './ChildNodePart.js';
+import { ChildNodePart, getNodesBetweenComments, replaceNodesBetweenComments } from './ChildNodePart.js';
 import { NodePart } from './NodePart.js';
 import { RawTextNodePart } from './RawTextNodePart.js';
+import { PartMarkers } from './PartMarkers.js';
 
-/** @type {Map<TemplateStringsArray, Part[]>} */
+/** @type {WeakMap<TemplateStringsArray, Part[]>} */
 const partsCache = new WeakMap();
 
-/** @type {Map<TemplateStringsArray, DocumentFragment>} */
+/** @type {WeakMap<TemplateStringsArray, DocumentFragment>} */
 const fragmentsCache = new WeakMap();
 
 export class TemplatePart extends Part {
+    /** @type {PartMarkers|undefined} */
+    markers;
+
     /** @type {Part[]} */
     parts = [];
 
@@ -21,9 +25,10 @@ export class TemplatePart extends Part {
 
     /** @type {Node[]} */
     childNodes = [];
+    // TODO: there is childNodes here and also in this.markers now...
 
     /**
-     * @param {Node} startNode - the start comment marker node
+     * @param {Node|undefined} startNode - the start comment marker node
      * @param {TemplateResult} value
      */
     constructor(startNode, value) {
@@ -33,55 +38,37 @@ export class TemplatePart extends Part {
 
         super();
 
-        let serverSideRendered = false;
         if (startNode) {
             startNode.__part = this; // add Part to comment node for debugging in the browser
-
-            const placeholder = startNode.data;
-            const childNodes = [startNode];
-            let childNode = startNode.nextSibling;
-            while (childNode && childNode.data !== `/${placeholder}`) {
-                childNodes.push(childNode);
-                childNode = childNode.nextSibling;
-            }
-
-            const endNode = childNode;
-            childNodes.push(endNode);
-
-            // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
-            if (childNodes.length > 2) {
-                serverSideRendered = true;
-            }
-
-            this.childNodes = childNodes;
-            this.startNode = startNode;
-            this.endNode = endNode;
+            this.markers = PartMarkers.createFromStartNode(startNode);
+            this.childNodes = this.markers.childNodes;
         }
 
         this.parseValue(value);
 
-        if (!serverSideRendered) {
+        if (!this.markers?.serverSideRendered) {
+            // TODO: this is causing double diffing because of the this.parseValue() before, ChildNode parts will be constructed + processed
+            // TODO: I think that maybe ChildNode Parts work, but Other Parts like Attributes are not set initially otherwise...
             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];
-
-        if (this.endNode) {
-            this.processor = processNodePart(this.endNode, this);
-        }
+        // TODO: this is somewhat strange that we are creating this twice...
+        this.markers = PartMarkers.createFromStartNode(this.childNodes[0]);
     }
 
     /**
-     * @param {TemplateResult} value
+     * @param {TemplateResult} templateResult
      */
-    update(value) {
-        this.parseValue(value);
-        this.updateParts(value.values);
-        this.childNodes = [...this.childNodes];
-        this.processor?.(this);
+    update(templateResult) {
+        const shouldUpdateDOM = this.strings !== templateResult.strings;
+        if (shouldUpdateDOM) {
+            this.parseValue(templateResult);
+            // TODO: this is a strange way of replacing the childnodes...
+            const endNode = this.childNodes[this.childNodes.length - 1];
+            // INFO: this is similar to TemplateResult#237
+            replaceNodesBetweenComments(this.markers?.endNode, getNodesBetweenComments(endNode));
+        }
+        this.updateParts(templateResult.values);
     }
 
     /**
@@ -97,53 +84,42 @@ export class TemplatePart extends Part {
      * @param {TemplateResult} templateResult
      */
     parseValue(templateResult) {
-        if (this.strings !== templateResult.strings) {
-            let fragment = fragmentsCache.get(templateResult.strings);
-            if (!fragment) {
-                fragment = this.parseFragment(templateResult);
-                fragmentsCache.set(templateResult.strings, fragment);
-            }
-            const importedFragment = globalThis.document?.importNode(fragment, true);
-            this.childNodes = importedFragment.childNodes;
-
-            let parts = partsCache.get(templateResult.strings);
-            if (!parts) {
-                parts = templateResult.parseParts(this.childNodes);
-                partsCache.set(templateResult.strings, parts);
-            }
-
-            this.parts = parts
-                .map((part) => {
-                    // We currently need the path because the fragment will be cloned via importNode and therefore the node will be a different one
-                    part.node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
-                    return part;
-                })
-                .map((part, index) => {
-                    if (part.type === 'node') {
-                        return new ChildNodePart(part.node, templateResult.values[index]);
-                    }
-                    if (part.type === 'attribute') {
-                        return new AttributePart(part.node, part.name, part.initialValue);
-                    }
-                    if (part.type === 'raw-text-node') {
-                        return new RawTextNodePart(part.node, part.initialValue);
-                    }
-                    if (part.type === 'directive') {
-                        return new NodePart(part.node, templateResult.values[index]);
-                    }
-                    throw `cannot map part: ${part}`;
-                });
-            this.strings = templateResult.strings;
+        let fragment = fragmentsCache.get(templateResult.strings);
+        if (!fragment) {
+            fragment = convertStringToTemplate(templateResult.templateString);
+            fragmentsCache.set(templateResult.strings, fragment);
         }
-        return this.childNodes;
-    }
+        const importedFragment = globalThis.document?.importNode(fragment, true);
+        this.childNodes = importedFragment.childNodes;
 
-    /**
-     * @param {TemplateResult} templateResult
-     * @return {DocumentFragment}
-     */
-    parseFragment(templateResult) {
-        const templateString = templateResult.templateString;
-        return convertStringToTemplate(templateString);
+        let parts = partsCache.get(templateResult.strings);
+        if (!parts) {
+            parts = templateResult.parseParts(this.childNodes);
+            partsCache.set(templateResult.strings, parts);
+        }
+
+        this.parts = parts
+            .map((part) => {
+                // We currently need the path because the fragment will be cloned via importNode and therefore the node will be a different one
+                part.node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+                return part;
+            })
+            .map((part, index) => {
+                if (part.type === 'node') {
+                    return new ChildNodePart(part.node, templateResult.values[index]);
+                }
+                if (part.type === 'attribute') {
+                    return new AttributePart(part.node, part.name, part.initialValue);
+                }
+                if (part.type === 'raw-text-node') {
+                    return new RawTextNodePart(part.node, part.initialValue);
+                }
+                if (part.type === 'directive') {
+                    return new NodePart(part.node, templateResult.values[index]);
+                }
+                throw `cannot map part: ${part}`;
+            });
+        this.strings = templateResult.strings;
+        this.childNodes = [...this.childNodes];
     }
 }