@webtides/element-js 1.2.12 → 1.3.1

package/src/dom-parts/PartMarkers.js

@@ -1,5 +1,42 @@
 import { COMMENT_NODE } from '../util/DOMHelper.js';
 
+const SHOW_COMMENT = 128; // NodeFilter.SHOW_COMMENT
+const SLASH = 47; // '/'
+const PART_MARKER_PREFIX = 'dom-part-';
+const TEMPLATE_MARKER = 'template-part';
+
+/**
+ * Walks the comment markers of one template instance in document order, starting at its `<!--template-part-->`
+ * comment, and calls back for every top level part marker with the marker node and the index of its part. Closing
+ * markers and everything inside nested templates (between their own template-part comments) are skipped.
+ *
+ * Works on a freshly cloned template fragment as well as on live, server rendered DOM: there the values sit between
+ * the markers, but they are not comments, so the walk sees the same sequence of markers in both cases.
+ *
+ * @param {Comment} startNode - the `<!--template-part-->` comment of the instance
+ * @param {(node: Comment, index: number) => void} [onPartMarker]
+ * @return {Comment} the matching `<!--/template-part-->` comment
+ */
+export const walkPartMarkers = (startNode, onPartMarker) => {
+    const walker = globalThis.document.createTreeWalker(startNode.parentNode, SHOW_COMMENT);
+    walker.currentNode = startNode;
+    let depth = 1;
+    let node;
+    while ((node = walker.nextNode())) {
+        const data = node.data;
+        if (data === TEMPLATE_MARKER) {
+            depth++;
+        } else if (data === `/${TEMPLATE_MARKER}`) {
+            depth--;
+            if (depth === 0) return node;
+        } else if (depth === 1 && data.charCodeAt(0) !== SLASH && data.startsWith(PART_MARKER_PREFIX)) {
+            // 'dom-part-12?type=attribute&…' → 12, parseInt stops at the '?'
+            onPartMarker?.(node, parseInt(data.slice(PART_MARKER_PREFIX.length), 10));
+        }
+    }
+    throw new Error('PartMarkers: missing closing template-part marker');
+};
+
 export class PartMarkers {
     /** @type {Comment} */
     startNode;
@@ -7,56 +44,77 @@ export class PartMarkers {
     /** @type {Comment} */
     endNode;
 
-    /** @type {Node[]} */
+    /** @type {Node[]} all sibling nodes from the start to the end marker, both included */
     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;
+    /**
+     * The start comments of the nested parts directly between the markers, in document order. Markers inside those
+     * nested parts are not included.
+     * @param {string} partType - the marker name to search for. Defaults to 'template-part'.
+     * @return {Comment[]}
+     */
+    findNestedStartNodes(partType = TEMPLATE_MARKER) {
+        const closing = `/${partType}`;
+        const startNodes = [];
+        let depth = 0;
+        for (const node of this.childNodes.slice(1, -1)) {
+            if (node.nodeType !== COMMENT_NODE) continue;
+            if (node.data === partType) {
+                if (depth === 0) startNodes.push(node);
+                depth++;
+            } else if (node.data === closing) {
+                depth--;
+            }
         }
+        return startNodes;
     }
 
     /**
-     * @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.
+     * @param {string} partType - the marker name to search for. Defaults to 'template-part'.
+     * @return {Comment|undefined} the first nested start comment, or undefined if there is none
      */
-    findNestedStartNode(partType = 'template-part') {
-        return this.childNodes.filter((node) => node.nodeType === COMMENT_NODE).find((node) => node.data === partType);
+    findNestedStartNode(partType = TEMPLATE_MARKER) {
+        return this.findNestedStartNodes(partType)[0];
     }
 
     /**
-     * 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.
+     * Creates markers from a start comment by walking its siblings to the matching end comment. Nested markers with
+     * the same name, for example a nested template at the root of a template, are skipped.
+     * @param {Comment} startNode - the start comment that marks the beginning of the section
+     * @return {PartMarkers}
      */
     static createFromStartNode(startNode) {
-        let endNode;
-
         const placeholder = startNode.data;
+        const closing = `/${placeholder}`;
         const childNodes = [startNode];
-        let childNode = startNode.nextSibling;
-        while (childNode && childNode.data !== `/${placeholder}`) {
-            childNodes.push(childNode);
-            childNode = childNode.nextSibling;
+        let depth = 1;
+        let node = startNode.nextSibling;
+        while (node) {
+            childNodes.push(node);
+            if (node.nodeType === COMMENT_NODE) {
+                if (node.data === placeholder) {
+                    depth++;
+                } else if (node.data === closing) {
+                    depth--;
+                    if (depth === 0) break;
+                }
+            }
+            node = node.nextSibling;
         }
-
-        endNode = childNode;
-        childNodes.push(endNode);
-
-        return new PartMarkers(startNode, endNode, childNodes);
+        if (!node) {
+            throw new Error(`PartMarkers: missing closing marker for "${placeholder}"`);
+        }
+        return new PartMarkers(startNode, node, childNodes);
     }
 }

package/src/dom-parts/TemplatePart.js

@@ -1,38 +1,79 @@
 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, getNodesBetweenComments, replaceNodesBetweenComments } from './ChildNodePart.js';
 import { NodePart } from './NodePart.js';
 import { RawTextNodePart } from './RawTextNodePart.js';
-import { PartMarkers } from './PartMarkers.js';
-
-/** @type {WeakMap<TemplateStringsArray, Part[]>} */
-const partsCache = new WeakMap();
+import { PartMarkers, walkPartMarkers } from './PartMarkers.js';
 
 /** @type {WeakMap<TemplateStringsArray, DocumentFragment>} */
 const fragmentsCache = new WeakMap();
 
+/** @type {WeakMap<TemplateStringsArray, {descriptors: object[], markerData: string[], hasRootNodeParts: boolean}>} */
+const partsCache = new WeakMap();
+
+/**
+ * The parsed template for a `strings` array: the fragment to clone, the part descriptors in part order, the comment
+ * data of each part marker and whether a node part sits at the root of the template. All computed once per literal.
+ * @param {TemplateResult} templateResult
+ * @return {{fragment: DocumentFragment, descriptors: object[], markerData: string[], hasRootNodeParts: boolean}}
+ */
+const parseTemplate = (templateResult) => {
+    let fragment = fragmentsCache.get(templateResult.strings);
+    if (!fragment) {
+        fragment = convertStringToTemplate(templateResult.templateString);
+        fragmentsCache.set(templateResult.strings, fragment);
+    }
+    let parts = partsCache.get(templateResult.strings);
+    if (!parts) {
+        const descriptors = templateResult.parseParts(fragment.childNodes);
+        const markerData = [];
+        let hasRootNodeParts = false;
+        walkPartMarkers(fragment.firstChild, (node, index) => {
+            markerData[index] = node.data;
+            if (descriptors[index].type === 'node' && node.parentNode === fragment) hasRootNodeParts = true;
+        });
+        parts = { descriptors, markerData, hasRootNodeParts };
+        partsCache.set(templateResult.strings, parts);
+    }
+    return { fragment, ...parts };
+};
+
+/**
+ * One rendered instance of a template. Binds the parts of the template to DOM nodes: either to a fresh clone of the
+ * template fragment, or, when hydrating, to the markers in server rendered DOM. Both bindings walk the same comment
+ * markers, see walkPartMarkers(). Construction only binds, values flow through update().
+ */
 export class TemplatePart extends Part {
-    /** @type {PartMarkers|undefined} */
+    /** @type {PartMarkers} */
     markers;
 
-    /** @type {Part[]} */
+    /** @type {Part[]} indexed like the values of the template */
     parts = [];
 
     /** @type {TemplateStringsArray} */
     strings = undefined;
 
-    /** @type {Node[]} */
+    /**
+     * The top level nodes of this instance, including its template-part markers and the content of parts at the root
+     * of the template. Refreshed after every update while the nodes are attached, kept as is while they are detached
+     * so that a removed instance can be inserted again.
+     * @type {Node[]}
+     */
     childNodes = [];
-    // TODO: there is childNodes here and also in this.markers now...
+
+    /** @type {boolean} true when the parts are bound to server rendered DOM */
+    hydrated = false;
+
+    /** @type {boolean} true when a node part at the root of the template can change the top level nodes */
+    hasRootNodeParts = false;
 
     /**
-     * @param {Node|undefined} startNode - the start comment marker node
-     * @param {TemplateResult} value
+     * @param {Comment|undefined} startNode - the `<!--template-part-->` comment of server rendered DOM to hydrate, or undefined to render client side
+     * @param {TemplateResult} templateResult
      */
-    constructor(startNode, value) {
-        if (startNode && startNode?.nodeType !== COMMENT_NODE) {
+    constructor(startNode, templateResult) {
+        if (startNode && startNode.nodeType !== COMMENT_NODE) {
             throw new Error('TemplatePart: startNode is not a comment node');
         }
 
@@ -40,86 +81,136 @@ export class TemplatePart extends Part {
 
         if (startNode) {
             startNode.__part = this; // add Part to comment node for debugging in the browser
-            this.markers = PartMarkers.createFromStartNode(startNode);
-            this.childNodes = this.markers.childNodes;
+            this.hydrated = this.bindLive(startNode, templateResult);
         }
-
-        this.parseValue(value);
-
-        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);
+        if (!this.hydrated) {
+            this.bindClone(templateResult);
         }
-
-        // TODO: this is somewhat strange that we are creating this twice...
-        this.markers = PartMarkers.createFromStartNode(this.childNodes[0]);
     }
 
     /**
      * @param {TemplateResult} templateResult
+     * @param {boolean} [hydrate] - first update of server rendered DOM: nested parts bind to the server rendered
+     *   markers instead of cloning, see ChildNodePart.parseValue(). Nodes that are in place already stay untouched.
      */
-    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));
+    update(templateResult, hydrate = false) {
+        if (this.strings !== templateResult.strings) {
+            // a different template: render it fresh and swap the content between the existing markers
+            const { startNode, endNode } = this.markers;
+            this.bindClone(templateResult);
+            const innerNodes = this.childNodes.slice(1, -1);
+            replaceNodesBetweenComments(endNode, innerNodes);
+            this.markers = new PartMarkers(startNode, endNode, [startNode, ...innerNodes, endNode]);
+            this.childNodes = this.markers.childNodes;
+            this.hydrated = false;
         }
-        this.updateParts(templateResult.values);
+        // an instance that could not be bound to server DOM is a fresh clone, its parts clone as well
+        this.updateParts(templateResult.values, hydrate && this.hydrated);
+        if (this.hasRootNodeParts) this.refreshChildNodes();
     }
 
     /**
      * @param {any[]} values
+     * @param {boolean} [hydrate]
      */
-    updateParts(values) {
+    updateParts(values, hydrate = false) {
         for (let index = 0; index < values.length; index++) {
-            this.parts[index]?.update(values[index]);
+            this.parts[index]?.update(values[index], hydrate);
         }
     }
 
     /**
-     * @param {TemplateResult} templateResult
+     * Re-reads the top level nodes between the markers. Parts at the root of the template insert and remove their
+     * content there, so the list is only known after an update. Detached nodes have no siblings to walk, the last
+     * known list is kept in that case.
      */
-    parseValue(templateResult) {
-        let fragment = fragmentsCache.get(templateResult.strings);
-        if (!fragment) {
-            fragment = convertStringToTemplate(templateResult.templateString);
-            fragmentsCache.set(templateResult.strings, fragment);
+    refreshChildNodes() {
+        const { startNode, endNode } = this.markers;
+        if (startNode.parentNode) {
+            this.childNodes = [startNode, ...getNodesBetweenComments(endNode), endNode];
         }
-        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);
-        }
+    /**
+     * Clones the template fragment and binds the parts to the markers in the clone.
+     * @param {TemplateResult} templateResult
+     */
+    bindClone(templateResult) {
+        const { fragment, descriptors, hasRootNodeParts } = parseTemplate(templateResult);
+        const clone = globalThis.document.importNode(fragment, true);
+        const startNode = clone.firstChild;
+        startNode.__part = this; // add Part to comment node for debugging in the browser
+        const parts = [];
+        const endNode = walkPartMarkers(startNode, (node, index) => {
+            parts[index] = this.createPart(descriptors[index], node, templateResult.values[index]);
+        });
+        this.parts = parts;
+        this.strings = templateResult.strings;
+        this.hasRootNodeParts = hasRootNodeParts;
+        this.childNodes = [...clone.childNodes];
+        this.markers = new PartMarkers(startNode, endNode, this.childNodes);
+    }
 
-        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]);
+    /**
+     * Binds the parts to the markers of server rendered DOM.
+     * @param {Comment} startNode - the live `<!--template-part-->` comment
+     * @param {TemplateResult} templateResult
+     * @return {boolean} false if the markers do not match the template, nothing is bound in that case
+     */
+    bindLive(startNode, templateResult) {
+        const { descriptors, markerData, hasRootNodeParts } = parseTemplate(templateResult);
+        const values = templateResult.values;
+        const parts = [];
+        let found = 0;
+        let endNode;
+        try {
+            endNode = walkPartMarkers(startNode, (node, index) => {
+                found++;
+                // the marker must be the one the template would render at this position: same type, name and
+                // static attribute content. Differences in the static markup around the markers are not detected.
+                if (descriptors[index] && node.data === markerData[index]) {
+                    parts[index] = this.createPart(descriptors[index], node, values[index]);
                 }
-                throw `cannot map part: ${part}`;
             });
+        } catch (error) {
+            endNode = undefined;
+        }
+
+        const complete = found === descriptors.length && descriptors.every((_, index) => parts[index] !== undefined);
+        if (!endNode || !complete) {
+            console.warn(
+                'element-js: the server rendered markers do not match the template, rendering client side instead.',
+                { template: templateResult.templateString, startNode },
+            );
+            return false;
+        }
+
+        this.parts = parts;
         this.strings = templateResult.strings;
-        this.childNodes = [...this.childNodes];
+        this.hasRootNodeParts = hasRootNodeParts;
+        this.markers = PartMarkers.createFromStartNode(startNode);
+        this.childNodes = this.markers.childNodes;
+        return true;
+    }
+
+    /**
+     * @param {{type: string, name?: string, initialValue?: string}} descriptor
+     * @param {Comment} node - the marker comment
+     * @param {any} value - the first value, only needed for directives
+     * @return {Part}
+     */
+    createPart(descriptor, node, value) {
+        switch (descriptor.type) {
+            case 'node':
+                return new ChildNodePart(node);
+            case 'attribute':
+                return new AttributePart(node, descriptor.name, descriptor.initialValue);
+            case 'raw-text-node':
+                return new RawTextNodePart(node, descriptor.initialValue);
+            case 'directive':
+                return new NodePart(node, value);
+            default:
+                throw new Error(`TemplatePart: cannot create a part for type "${descriptor.type}"`);
+        }
     }
 }

package/src/dom-parts/TemplateResult.js

@@ -1,6 +1,7 @@
-import { COMMENT_NODE, getNodePath, encodeHTML } from '../util/DOMHelper.js';
-import { encodeAttribute, isObjectLike } from '../util/AttributeParser.js';
+import { COMMENT_NODE, encodeHTML } from '../util/DOMHelper.js';
+import { camelToDash, encodeAttribute, isObjectLike } from '../util/AttributeParser.js';
 import { TemplatePart } from './TemplatePart.js';
+import { walkPartMarkers } from './PartMarkers.js';
 
 const voidElements = /^(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
 const rawTextElements = /<(script|style|textarea|title)([^>]*)>(.*?)<\/\1>/i;
@@ -203,6 +204,39 @@ const ssrUpdatesCache = new WeakMap();
 /** @type {Map<Element, TemplatePart>} */
 const templatePartsCache = new WeakMap();
 
+/**
+ * @param {Node[] | NodeList} childNodes
+ * @return {Comment|undefined} the first `<!--template-part-->` comment among the nodes
+ */
+const findTemplatePartStartNode = (childNodes) =>
+    Array.from(childNodes).find((node) => node.nodeType === COMMENT_NODE && node.data === 'template-part');
+
+/**
+ * Parses the descriptor of a part from the data of its comment marker.
+ * For html`<div id="${'foo'}" class="${'bar'}">${'baz'}</div>` the markers are:
+ * <!--dom-part-0?type=attribute&name=id&initialValue=\x03--><!--dom-part-1?type=attribute&name=class&initialValue=\x03--><div><!--dom-part-2-->
+ * @param {string} data
+ * @return {{type: string, name?: string, initialValue?: string}}
+ */
+const parsePartDescriptor = (data) => {
+    const query = data.indexOf('?');
+    if (query === -1) {
+        return { type: 'node' };
+    }
+    const searchParams = new URLSearchParams(data.slice(query + 1));
+    const type = searchParams.get('type');
+    if (type === 'attribute') {
+        return { type, name: searchParams.get('name'), initialValue: searchParams.get('initialValue') };
+    }
+    if (type === 'raw-text-node') {
+        return { type, initialValue: searchParams.get('initialValue') };
+    }
+    if (type === 'directive') {
+        return { type };
+    }
+    throw new Error(`TemplateResult: unknown part type "${type}" in marker "${data}"`);
+};
+
 export class TemplateResult {
     /**
      * @param {TemplateStringsArray} strings
@@ -214,30 +248,26 @@ export class TemplateResult {
     }
 
     /**
+     * Renders into a DOM node. A node that already holds a rendered instance of this template is updated, a node with
+     * server rendered markup (a `<!--template-part-->` marker) is hydrated, anything else is replaced by a fresh render.
      * @param {Element} domNode
      */
     renderInto(domNode) {
-        const startNode = Array.from(domNode.childNodes)
-            .filter((node) => node.nodeType === COMMENT_NODE)
-            .find((node) => node.data === 'template-part');
-
-        let serverSideRendered = startNode !== undefined;
+        const startNode = findTemplatePartStartNode(domNode.childNodes);
 
         let templatePart = templatePartsCache.get(domNode);
+        if (templatePart && startNode) {
+            templatePart.update(this);
+            return;
+        }
 
-        if (!templatePart || !startNode) {
-            if (!startNode) {
-                domNode.replaceChildren();
-            }
-
-            templatePart = new TemplatePart(startNode, this);
-            templatePartsCache.set(domNode, templatePart);
+        templatePart = new TemplatePart(startNode, this);
+        templatePartsCache.set(domNode, templatePart);
 
-            if (!serverSideRendered) {
-                domNode.replaceChildren(...templatePart.childNodes);
-            }
-        } else {
-            templatePart.update(this);
+        const hydrated = templatePart.hydrated;
+        templatePart.update(this, hydrated);
+        if (!hydrated) {
+            domNode.replaceChildren(...templatePart.childNodes);
         }
     }
 
@@ -281,7 +311,9 @@ export class TemplateResult {
                     }
 
                     if (name.startsWith('.')) {
-                        const propertyName = name.replace('.', '');
+                        // a property cannot be set in a string, the value is written as the attribute that
+                        // BaseElement maps back to the property on upgrade: camelCase becomes dash-case
+                        const attributeName = camelToDash(name.replace('.', ''));
                         return [
                             {
                                 type: 'attribute',
@@ -291,13 +323,13 @@ export class TemplateResult {
                                         return '';
                                     }
                                     // in all other cases, just escape it in quotes
-                                    return attribute(propertyName, value, quotes);
+                                    return attribute(attributeName, value, quotes);
                                 },
                             },
                         ];
                     }
 
-                    if (name.startsWith('@') || name.startsWith('on')) {
+                    if (name.startsWith('@')) {
                         return [
                             {
                                 type: 'attribute',
@@ -333,7 +365,13 @@ export class TemplateResult {
                             // Note: this will coarse the values into strings, but it's probably ok since there can only be multiple values in string attributes?!
                             const parsedValue = initialValue.replace(/\x03/g, () => values[replaceIndex++]);
                             values = [];
-                            return attribute(searchParams.get('name'), parsedValue, quotes);
+                            // an attribute whose sole value is null or undefined is left out, the DOM renderer
+                            // removes it as well
+                            if (initialValue === '\x03' && value == null) return '';
+                            // a listener on an "old school" event attribute (onevent=${...}) has nothing to do on
+                            // the server side, any other value of an attribute that starts with "on" is written
+                            if (name.startsWith('on') && typeof value === 'function') return '';
+                            return attribute(name, parsedValue, quotes);
                         },
                     });
                     return attributeUpdates;
@@ -369,72 +407,22 @@ export class TemplateResult {
     }
 
     /**
-     * @param {Node[]} childNodes
-     * @return {object[]}
+     * Parses the part descriptors of this template from the comment markers of its rendered or cloned nodes.
+     * The descriptors are indexed like the values of the template.
+     * @param {Node[] | NodeList} childNodes - the top level nodes of a template instance, including the template-part markers
+     * @return {{type: string, name?: string, initialValue?: string}[]}
      */
     parseParts(childNodes) {
-        // we always create a template fragment so that we can start at the root for traversing the node path
-        const range = globalThis.document?.createRange();
-        range.setStartBefore(childNodes[0]);
-        range.setEndAfter(childNodes[childNodes.length - 1]);
-        const template = range.cloneContents();
-
-        const treeWalker = globalThis.document?.createTreeWalker(template, 128);
-        let node = treeWalker.nextNode(); //to skip the root template-part
+        const startNode = findTemplatePartStartNode(childNodes);
         const parts = [];
-
-        let nestedLevel = 0;
-        // search for parts through numbered comment nodes with placeholders
-        while ((node = treeWalker.nextNode())) {
-            if (/^template-part$/.test(node.data)) {
-                nestedLevel++;
-                continue;
-            }
-            if (/^\/template-part$/.test(node.data)) {
-                if (nestedLevel > 0) {
-                    nestedLevel--;
-                }
-                continue;
-            }
-            if (nestedLevel > 0) {
-                continue;
-            }
-            if (/^dom-part-\d+$/.test(node.data)) {
-                parts.push({ type: 'node', path: getNodePath(node) });
-                continue;
-            }
-            if (/^dom-part-\d+\?type=attribute&(.*?)$/.test(node.data)) {
-                // For html`<div id="${'foo'}" class="${'bar'}"></div>` we will get:
-                // <!--dom-part-0?type=attribute&name=id&initialValue=\x03--><!--dom-part-1?type=attribute&name=class&initialValue=\x03-->
-                const [_, paramsString] = node.data.split('?');
-                const searchParams = new URLSearchParams(paramsString);
-                parts.push({
-                    type: 'attribute',
-                    path: getNodePath(node),
-                    name: searchParams.get('name'),
-                    initialValue: searchParams.get('initialValue'),
-                });
-                continue;
-            }
-            if (/^dom-part-\d+\?type=raw-text-node&(.*?)$/.test(node.data)) {
-                // For html`<textarea>${'foo'} bar</textarea>` we will get:
-                // <!--dom-part-0?type=raw-text-node&initialValue=\x03 bar-->
-                const [_, paramsString] = node.data.split('?');
-                const searchParams = new URLSearchParams(paramsString);
-                parts.push({
-                    type: 'raw-text-node',
-                    path: getNodePath(node),
-                    initialValue: searchParams.get('initialValue'),
-                });
-                continue;
-            }
-            if (/^dom-part-\d+\?type=directive$/.test(node.data)) {
-                parts.push({ type: 'directive', path: getNodePath(node) });
-            }
+        if (startNode) {
+            walkPartMarkers(startNode, (node, index) => {
+                parts[index] = parsePartDescriptor(node.data);
+            });
         }
 
         // We couldn't correctly parse parts from the template
-        if (parts.length !== this.strings.length - 1) {
+        if (parts.length !== this.strings.length - 1 || parts.includes(undefined)) {
             throw {
                 name: 'ParseTemplateError',
                 message:
@@ -443,7 +431,6 @@ export class TemplateResult {
                         strings: this.strings,
                         templateString: this.templateString,
                         childNodes,
-                        template,
                         parts,
                     }),
             };