jails-js 6.4.1 → 6.5.1

package/dist/index.js

@@ -84,9 +84,6 @@ var Idiomorph = function() {
   }
   function morphOuterHTML(ctx, oldNode, newNode) {
     const oldParent = normalizeParent(oldNode);
-    let childNodes = Array.from(oldParent.childNodes);
-    const index = childNodes.indexOf(oldNode);
-    const rightMargin = childNodes.length - (index + 1);
     morphChildren(
       ctx,
       oldParent,
@@ -97,8 +94,7 @@ var Idiomorph = function() {
       oldNode.nextSibling
       // end point for iteration
     );
-    childNodes = Array.from(oldParent.childNodes);
-    return childNodes.slice(index, childNodes.length - rightMargin);
+    return Array.from(oldParent.childNodes);
   }
   function saveAndRestoreFocus(ctx, fn) {
     var _a;
@@ -113,7 +109,7 @@ var Idiomorph = function() {
     const { id: activeElementId, selectionStart, selectionEnd } = activeElement;
     const results = fn();
     if (activeElementId && activeElementId !== ((_a = document.activeElement) == null ? void 0 : _a.id)) {
-      activeElement = ctx.target.querySelector(`#${activeElementId}`);
+      activeElement = ctx.target.querySelector(`[id="${activeElementId}"]`);
       activeElement == null ? void 0 : activeElement.focus();
     }
     if (activeElement && !activeElement.selectionEnd && selectionEnd) {
@@ -271,7 +267,7 @@ var Idiomorph = function() {
     function moveBeforeById(parentNode, id, after, ctx) {
       const target = (
         /** @type {Element} - will always be found */
-        ctx.target.querySelector(`#${id}`) || ctx.pantry.querySelector(`#${id}`)
+        ctx.target.id === id && ctx.target || ctx.target.querySelector(`[id="${id}"]`) || ctx.pantry.querySelector(`[id="${id}"]`)
       );
       removeElementFromAncestorsIdMaps(target, ctx);
       moveBefore(parentNode, target, after);
@@ -646,7 +642,10 @@ var Idiomorph = function() {
         );
       } else if (newContent instanceof Node) {
         if (newContent.parentNode) {
-          return createDuckTypedParent(newContent);
+          return (
+            /** @type {any} */
+            new SlicedParentNode(newContent)
+          );
         } else {
           const dummyParent = document.createElement("div");
           dummyParent.append(newContent);
@@ -660,27 +659,68 @@ var Idiomorph = function() {
         return dummyParent;
       }
     }
-    function createDuckTypedParent(newContent) {
-      return (
-        /** @type {Element} */
-        /** @type {unknown} */
-        {
-          childNodes: [newContent],
-          /** @ts-ignore - cover your eyes for a minute, tsc */
-          querySelectorAll: (s) => {
-            const elements = newContent.querySelectorAll(s);
-            return newContent.matches(s) ? [newContent, ...elements] : elements;
-          },
-          /** @ts-ignore */
-          insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
-          /** @ts-ignore */
-          moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
-          // for later use with populateIdMapWithTree to halt upwards iteration
-          get __idiomorphRoot() {
-            return newContent;
-          }
+    class SlicedParentNode {
+      /** @param {Node} node */
+      constructor(node) {
+        this.originalNode = node;
+        this.realParentNode = /** @type {Element} */
+        node.parentNode;
+        this.previousSibling = node.previousSibling;
+        this.nextSibling = node.nextSibling;
+      }
+      /** @returns {Node[]} */
+      get childNodes() {
+        const nodes = [];
+        let cursor = this.previousSibling ? this.previousSibling.nextSibling : this.realParentNode.firstChild;
+        while (cursor && cursor != this.nextSibling) {
+          nodes.push(cursor);
+          cursor = cursor.nextSibling;
         }
-      );
+        return nodes;
+      }
+      /**
+       * @param {string} selector
+       * @returns {Element[]}
+       */
+      querySelectorAll(selector) {
+        return this.childNodes.reduce(
+          (results, node) => {
+            if (node instanceof Element) {
+              if (node.matches(selector)) results.push(node);
+              const nodeList = node.querySelectorAll(selector);
+              for (let i = 0; i < nodeList.length; i++) {
+                results.push(nodeList[i]);
+              }
+            }
+            return results;
+          },
+          /** @type {Element[]} */
+          []
+        );
+      }
+      /**
+       * @param {Node} node
+       * @param {Node} referenceNode
+       * @returns {Node}
+       */
+      insertBefore(node, referenceNode) {
+        return this.realParentNode.insertBefore(node, referenceNode);
+      }
+      /**
+       * @param {Node} node
+       * @param {Node} referenceNode
+       * @returns {Node}
+       */
+      moveBefore(node, referenceNode) {
+        return this.realParentNode.moveBefore(node, referenceNode);
+      }
+      /**
+       * for later use with populateIdMapWithTree to halt upwards iteration
+       * @returns {Node}
+       */
+      get __idiomorphRoot() {
+        return this.originalNode;
+      }
     }
     function parseContent(newContent) {
       let parser = new DOMParser();
@@ -985,10 +1025,13 @@ const Element$1 = ({ component, templates: templates2, start: start2 }) => {
     }
   };
 };
-const templates = {};
 const config = {
   tags: ["{{", "}}"]
 };
+const templates = {};
+const booleanAttrs = /html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)="(.*?)"/g;
+const htmlAttr = /html-([^\s]*?)="(.*?)"/g;
+const tagExpr = () => new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, "g");
 const templateConfig$1 = (newconfig) => {
   Object.assign(config, newconfig);
 };
@@ -1014,31 +1057,29 @@ const compile = (html) => {
 	`);
 };
 const tagElements = (target, keys, components) => {
-  target.querySelectorAll(keys.toString()).forEach((node) => {
-    const name = node.localName;
-    if (name === "template") {
-      return tagElements(node.content, keys, components);
+  const isComponent = (key) => key in components;
+  const selector = keys.join(",");
+  target.querySelectorAll(selector).forEach((node) => {
+    if (node.localName === "template") {
+      tagElements(node.content, keys, components);
+      return;
     }
-    if (node.getAttribute("html-if") && !node.id) {
+    if (node.hasAttribute("html-if") && !node.id) {
       node.id = uuid();
     }
-    if (name in components) {
+    if (isComponent(node.localName)) {
       node.setAttribute("tplid", uuid());
     }
   });
 };
 const transformAttributes = (html) => {
-  const regexTags = new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, "g");
-  return html.replace(/jails___scope-id/g, "%%_=$scopeid_%%").replace(regexTags, "%%_=$1_%%").replace(/html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)=\"(.*?)\"/g, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`).replace(/html-([^\s]*?)=\"(.*?)\"/g, (all, key, value) => {
-    if (key === "key" || key === "model" || key === "scopeid") {
-      return all;
-    }
+  return html.replace(/jails___scope-id/g, "%%_=$scopeid_%%").replace(tagExpr(), "%%_=$1_%%").replace(booleanAttrs, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`).replace(htmlAttr, (all, key, value) => {
+    if (["key", "model", "scopeid"].includes(key)) return all;
     if (value) {
       value = value.replace(/^{|}$/g, "");
       return `${key}="%%_=safe(function(){ return ${value} })_%%"`;
-    } else {
-      return all;
     }
+    return all;
   });
 };
 const transformTemplate = (clone) => {