@webtides/element-js 1.0.0-alpha.5 → 1.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "1.0.0-alpha.5",
+	"version": "1.0.0-alpha.7",
 	"module": "index.js",
 	"main": "index.js",
 	"type": "module",

package/src/dom-parts/AttributePart.js

@@ -78,6 +78,9 @@ const processAttribute = (node, name) => {
 	};
 };
 
+/** @type {Map<Element, AttributePart>} */
+const attributePartsCache = new WeakMap();
+
 /**
  * @param {Element} node
  * @param {String} name
@@ -114,24 +117,27 @@ export class AttributePart extends Part {
 	initialValue = undefined;
 
 	/**
-	 * @param {Node} node
+	 * @param {Comment} node
 	 * @param {String} name
 	 * @param {String} initialValue
 	 */
 	constructor(node, name, initialValue) {
+		// If we have multiple attribute parts with the same name, it means we have multiple
+		// interpolations inside that attribute. Instead of creating a new part, we will return the same
+		// as before and let it defer the update until the last interpolation gets updated
+		const attributePart = attributePartsCache.get(node.nextElementSibling);
+		if (attributePart && attributePart.name === name) {
+			attributePart.interpolations++;
+			node.__part = attributePart; // add Part to comment node for debugging in the browser
+			return attributePart;
+		}
+
 		super();
-		node.__part = this; // add Part to comment node for debugging in the browser
 		this.name = name;
 		this.initialValue = initialValue;
 		this.processor = processAttributePart(node.nextElementSibling, this.name);
-	}
-
-	/**
-	 * @param {Node} node
-	 */
-	addNode(node) {
-		this.interpolations++;
-		// TODO: what about the comment node? It will always be the first for now...
+		node.__part = this; // add Part to comment node for debugging in the browser
+		attributePartsCache.set(node.nextElementSibling, this);
 	}
 
 	/**

package/src/dom-parts/TemplatePart.js

@@ -34,6 +34,8 @@ export class TemplatePart extends Part {
 
 		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;
@@ -99,8 +101,6 @@ export class TemplatePart extends Part {
 				partsCache.set(templateResult.strings, parts);
 			}
 
-			/** @type AttributePart */
-			let previousAttributePart = undefined;
 			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
@@ -110,22 +110,13 @@ export class TemplatePart extends Part {
 				.map((part, index) => {
 					if (part.type === 'node') {
 						return new ChildNodePart(part.node, templateResult.values[index]);
-						// TODO: the nodes in the parts array also have nested parts information... could we start creating the nested parts here as well?
 					}
 					if (part.type === 'attribute') {
-						// If we have multiple attribute parts with the same name, it means we have multiple
-						// interpolations inside that attribute. Instead of creating a new part, we will return the same
-						// as before and let it defer the update until the last interpolation gets updated
-						if (previousAttributePart && previousAttributePart.name === part.name) {
-							previousAttributePart.addNode(part.node);
-							return previousAttributePart;
-						}
-						return (previousAttributePart = new AttributePart(part.node, part.name, part.initialValue));
+						return new AttributePart(part.node, part.name, part.initialValue);
 					}
 					if (part.type === 'directive') {
 						return new NodePart(part.node, templateResult.values[index]);
 					}
-
 					throw `cannot map part: ${part}`;
 				});
 			this.strings = templateResult.strings;

package/src/dom-parts/TemplateResult.js

@@ -12,7 +12,7 @@ const partPositions = /[\x01\x02]/g;
 // \x03 COMMENT.ATTRIBUTE_TOKEN
 // \x04 Node.ATTRIBUTE_TOKEN
 
-const interpolation = new RegExp(`(<!--dom-part-(\\d+)--><!--/dom-part-(\\d+)-->|(\\S\\w+)="\x04(")?|\x04)`, 'g');
+const interpolation = new RegExp(`(<!--dom-part-(\\d+)--><!--/dom-part-(\\d+)-->|(\\S[-\\w]+)="\x04(")?|\x04)`, 'g');
 
 /**
  * Given a template, find part positions as both nodes and attributes and
@@ -258,40 +258,39 @@ export class TemplateResult {
 		const template = range.cloneContents();
 
 		const treeWalker = globalThis.document?.createTreeWalker(template, 128);
-		let node = treeWalker.currentNode;
+		let node = treeWalker.nextNode(); //to skip the root template-part
+		const parts = [];
 
-		// this is kinda freaky because the tree walker is shared throughout the recursion - but YOLO
-		const getParts = () => {
-			const parts = [];
-			let currentPart = undefined;
-			// search for parts through numbered comment nodes with placeholders
-			while ((node = treeWalker.nextNode())) {
-				if (/^template-part$/.test(node.data) && currentPart) {
-					// start recursion -> add nested parts to previous part
-					currentPart.parts = getParts();
-				}
-				if (/^\/template-part$/.test(node.data)) {
-					// end recursion
-					return parts;
-				}
-				if (/^dom-part-\d+$/.test(node.data)) {
-					parts.push((currentPart = { type: 'node', path: getNodePath(node), parts: [] }));
-				}
-				if (/^dom-part-\d+:/.test(node.data)) {
-					const [_, attribute] = node.data.split(':');
-					const [name, initialValue] = attribute.split('=');
-					currentPart = undefined;
-					parts.push({ type: 'attribute', path: getNodePath(node), name: name, initialValue });
-				}
-				if (/^dom-part-\d+\$/.test(node.data)) {
-					currentPart = undefined;
-					parts.push({ type: 'directive', path: getNodePath(node) });
+		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;
 			}
-			return parts;
-		};
-
-		const parts = getParts();
+			if (nestedLevel > 0) {
+				continue;
+			}
+			if (/^dom-part-\d+$/.test(node.data)) {
+				parts.push({ type: 'node', path: getNodePath(node) });
+				continue;
+			}
+			if (/^dom-part-\d+:/.test(node.data)) {
+				const [_, ...attribute] = node.data.split(':');
+				const [name, initialValue] = attribute.join(':').split('=');
+				parts.push({ type: 'attribute', path: getNodePath(node), name: name, initialValue });
+				continue;
+			}
+			if (/^dom-part-\d+\$/.test(node.data)) {
+				parts.push({ type: 'directive', path: getNodePath(node) });
+			}
+		}
 
 		// We couldn't correctly parse parts from the template
 		if (parts.length !== this.strings.length - 1) {