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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "1.0.0-alpha.6",
+	"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

@@ -101,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
@@ -114,19 +112,11 @@ export class TemplatePart extends Part {
 						return new ChildNodePart(part.node, templateResult.values[index]);
 					}
 					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;