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

package/package.json

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

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;
@@ -110,7 +112,6 @@ 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

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) {