@webtides/element-js 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -16,6 +16,15 @@ to [Semantic Versioning](http://semver.org/).
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+
+## [1.1.3] - 2024-11-11
+
+### FIXED
+
+- Fixed unsafeHtml having more than one child ([#135](https://github.com/webtides/element-js/issues/135))
+- Fixed early returns from templates and fixes static html changes not reflecting to DOM ([#132](https://github.com/webtides/element-js/issues/132))
+
+
 ## [1.1.2] - 2024-10-30
 
 ### FIXED

package/package.json

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

package/src/dom-parts/ChildNodePart.js

@@ -8,6 +8,9 @@ import { TemplatePart } from './TemplatePart.js';
  * @return {ChildNode}
  */
 const removeChildNodes = (node) => {
+    if (!Array.isArray(node) && !(node instanceof TemplatePart) && !node.hasChildNodes()) {
+        return node;
+    }
     const range = globalThis.document?.createRange();
     const firstChild = Array.isArray(node)
         ? node[0]
@@ -48,8 +51,25 @@ const removeNodesBetweenComments = (commentNode) => {
  * @return {Node[]}
  */
 const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
+    // We always want to have the two arrays (domChildNodes and templateChildNodes) to have the same length.
+    // We also don't ever want to replace/diff the last node of the domChildNodes as it will always be the
+    // closing comment marker (/template-part) aka the anchorNode. So we push it to the end by inserting undefined items.
+    if (templateChildNodes.length > domChildNodes.length) {
+        const nodesToFill = templateChildNodes.length - domChildNodes.length;
+        for (let i = 0; i < nodesToFill; i++) {
+            domChildNodes.splice(domChildNodes.length - 1, 0, undefined);
+        }
+    }
+
+    if (domChildNodes.length > templateChildNodes.length) {
+        const nodesToFill = domChildNodes.length - templateChildNodes.length;
+        for (let i = 0; i < nodesToFill; i++) {
+            templateChildNodes.splice(templateChildNodes.length - 1, 0, undefined);
+        }
+    }
+
+    const length = domChildNodes.length;
     // Diff each node in the child node lists
-    let length = Math.max(templateChildNodes.length, domChildNodes.length);
     for (let index = 0; index < length; index++) {
         let domChildNode = domChildNodes[index];
         let templateChildNode = templateChildNodes[index];
@@ -58,6 +78,8 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
         if (!domChildNode) {
             if (templateChildNode instanceof TemplatePart) {
                 anchorNode.before(...templateChildNode.childNodes);
+            } else if (Array.isArray(templateChildNode)) {
+                anchorNode.before(...templateChildNode);
             } else if (typeof templateChildNode === 'object' && 'ELEMENT_NODE' in templateChildNode) {
                 parentNode.insertBefore(templateChildNode, anchorNode);
             } else {
@@ -75,7 +97,12 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
         }
 
         // If DOM node is equal to the template node, don't do anything
-        if (domChildNode === templateChildNode) {
+        if (
+            domChildNode === templateChildNode ||
+            (domChildNode.nodeType === COMMENT_NODE &&
+                templateChildNode.nodeType === COMMENT_NODE &&
+                domChildNode.isEqualNode(templateChildNode))
+        ) {
             continue;
         }
 
@@ -91,7 +118,7 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
  * @return {(function(*): void)|*}
  */
 export const processNodePart = (comment, initialValue) => {
-    let nodes = [];
+    let nodes = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : [];
     let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
     // this is for string values to be inserted into the DOM. A cached TextNode will be used so that we don't have to constantly create new DOM nodes.
     let cachedTextNode = undefined;
@@ -145,7 +172,7 @@ export const processNodePart = (comment, initialValue) => {
                         oldValue = newValue;
                         nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
                     } else if (newValue instanceof TemplatePart) {
-                        oldValue = newValue;
+                        oldValue = [...newValue.childNodes];
                         nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
                     } else {
                         console.warn('Could not process value', newValue);

package/src/dom-parts/TemplatePart.js

@@ -2,7 +2,7 @@ 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 } from './ChildNodePart.js';
+import { ChildNodePart, processNodePart } from './ChildNodePart.js';
 import { NodePart } from './NodePart.js';
 
 /** @type {Map<TemplateStringsArray, Part[]>} */
@@ -50,8 +50,11 @@ export class TemplatePart extends Part {
             // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
             if (childNodes.length > 2) {
                 serverSideRendered = true;
-                this.childNodes = childNodes;
             }
+
+            this.childNodes = childNodes;
+            this.startNode = startNode;
+            this.endNode = endNode;
         }
 
         this.parseValue(value);
@@ -61,6 +64,13 @@ export class TemplatePart extends Part {
             // We need a childNodes list that is NOT live so that we don't loose elements when they get removed from the dom and we can (re)add them back in later.
             this.childNodes = [...this.childNodes];
         }
+
+        this.startNode = this.childNodes[0];
+        this.endNode = this.childNodes[this.childNodes.length - 1];
+
+        if (this.endNode) {
+            this.processor = processNodePart(this.endNode, this);
+        }
     }
 
     /**
@@ -69,6 +79,8 @@ export class TemplatePart extends Part {
     update(value) {
         this.parseValue(value);
         this.updateParts(value.values);
+        this.childNodes = [...this.childNodes];
+        this.processor?.(this);
     }
 
     /**
@@ -85,15 +97,13 @@ export class TemplatePart extends Part {
      */
     parseValue(templateResult) {
         if (this.strings !== templateResult.strings) {
-            if (this.childNodes.length === 0) {
-                let fragment = fragmentsCache.get(templateResult.strings);
-                if (!fragment) {
-                    fragment = this.parseFragment(templateResult);
-                    fragmentsCache.set(templateResult.strings, fragment);
-                }
-                const importedFragment = globalThis.document?.importNode(fragment, true);
-                this.childNodes = importedFragment.childNodes;
+            let fragment = fragmentsCache.get(templateResult.strings);
+            if (!fragment) {
+                fragment = this.parseFragment(templateResult);
+                fragmentsCache.set(templateResult.strings, fragment);
             }
+            const importedFragment = globalThis.document?.importNode(fragment, true);
+            this.childNodes = importedFragment.childNodes;
 
             let parts = partsCache.get(templateResult.strings);
             if (!parts) {
@@ -121,6 +131,7 @@ export class TemplatePart extends Part {
                 });
             this.strings = templateResult.strings;
         }
+        return this.childNodes;
     }
 
     /**

package/src/dom-parts/directives.js

@@ -56,15 +56,15 @@ const choose = (value, cases, defaultCase) => {
 /**
  * Renders a given string as HTML instead of text or as unescaped string in SSR mode
  * @param {string} string
- * @returns {(function(): Node) | { __unsafeHTML: true, string: string }}
+ * @returns {(function(): [Node]) | { __unsafeHTML: true, string: string }}
  */
 const unsafeHTML = (string) => {
     if (!globalThis.DOMParser) {
         return { __unsafeHTML: true, string };
     }
-    const node = convertStringToHTML(string).firstChild;
-    const importedNode = globalThis.document?.importNode(node, true);
-    return () => importedNode;
+    const body = convertStringToHTML(string);
+    const childNodes = [...body.childNodes];
+    return () => childNodes;
 };
 
 /**