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

package/package.json

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

@@ -12,13 +12,13 @@ const removeChildNodes = (node) => {
 	const firstChild = Array.isArray(node)
 		? node[0]
 		: node instanceof TemplatePart
-		? node.childNodes[0]
-		: node.firstChild;
+		  ? node.childNodes[0]
+		  : node.firstChild;
 	const lastChild = Array.isArray(node)
 		? node[node.length - 1]
 		: node instanceof TemplatePart
-		? node.childNodes[node.childNodes.length - 1]
-		: node.lastChild;
+		  ? node.childNodes[node.childNodes.length - 1]
+		  : node.lastChild;
 	range.setStartAfter(firstChild);
 	range.setEndAfter(lastChild);
 	range.deleteContents();
@@ -75,28 +75,12 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
 		}
 
 		// If DOM node is equal to the template node, don't do anything
-		// if (domChildNode.isEqualNode(templateChildNode)) {
 		if (domChildNode === templateChildNode) {
 			continue;
 		}
 
-		// If node types are not the same, replace the DOM node with the template node
-		if (templateChildNode.nodeType !== domChildNode.nodeType) {
-			parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the element tag names are not the same, replace the DOM node with the template node
-		if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName !== domChildNode.tagName) {
-			parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the node is an SVG element, don't even think about diffing it, just replace it
-		if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName === 'SVG') {
-			parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
+		// Everything else is somehow different and can be replaced
+		parentNode.replaceChild(templateChildNode, domChildNode);
 	}
 	return templateChildNodes;
 };

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;