@oscarpalmer/abydon 0.8.0 → 0.10.0

package/dist/fragment.mjs

@@ -1,15 +1,20 @@
 // src/fragment.ts
-import {createTemplate, getNodes} from "./helpers/dom";
+import {html as html2} from "@oscarpalmer/toretto/html";
 import {parse} from "./html";
 import {mapNodes} from "./node";
+import {removeNodes} from "./helpers/dom";
 
 class Fragment {
+  $fragment = true;
   data;
+  get identifier() {
+    return this.data.identifier;
+  }
   constructor(strings, expressions) {
     this.data = {
       expressions,
       strings,
-      nodes: [],
+      items: [],
       values: []
     };
   }
@@ -17,21 +22,35 @@ class Fragment {
     element.append(...this.get());
   }
   get() {
-    if (this.data.nodes.length === 0) {
+    if (this.data.items.length === 0) {
       const parsed = parse(this.data);
-      const templated = createTemplate(parsed);
-      this.data.nodes.splice(0, this.data.nodes.length, ...getNodes(templated));
-      mapNodes(this.data, this.data.nodes);
+      const templated = html2(parsed, {
+        sanitiseBooleanAttributes: false
+      });
+      this.data.items.splice(0, this.data.items.length, ...templated.map((node2) => ({
+        nodes: [node2]
+      })));
+      mapNodes(this.data, this.data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes));
     }
-    return [...this.data.nodes];
+    return [
+      ...this.data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes)
+    ];
+  }
+  identify(identifier) {
+    this.data.identifier = identifier;
+    return this;
   }
   remove() {
-    const { length } = this.data.nodes;
+    const { length } = this.data.items;
     for (let index = 0;index < length; index += 1) {
-      const node2 = this.data.nodes[index];
-      node2.parentNode?.removeChild(node2);
+      const { fragments, nodes } = this.data.items[index];
+      const { length: length2 } = fragments ?? [];
+      for (let index2 = 0;index2 < length2; index2 += 1) {
+        fragments?.[index2]?.remove();
+      }
+      removeNodes(nodes);
     }
-    this.data.nodes.splice(0, length);
+    this.data.items.splice(0, length);
   }
 }
 export {

package/dist/helpers/dom.mjs

@@ -1,46 +1,44 @@
 // src/helpers/dom.ts
 import {getString} from "@oscarpalmer/atoms/string";
-import {isFragment, isFragmentNode} from "./index";
+import {isFragment, isProperElement, isProperNode} from "./index";
+import {removeEvents} from "../node/event";
 function createNodes(value) {
-  if (isFragmentNode(value)) {
-    return [value];
-  }
   if (isFragment(value)) {
     return value.get();
   }
+  if (isProperNode(value)) {
+    return [value];
+  }
   return [new Text(getString(value))];
 }
-function createTemplate(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  const cloned = template.content.cloneNode(true);
-  const scripts = [
-    ...cloned instanceof Element ? cloned.querySelectorAll("script") : []
-  ];
-  const { length } = scripts;
+function removeNodes(nodes) {
+  sanitiseNodes(nodes);
+  const { length } = nodes;
   for (let index = 0;index < length; index += 1) {
-    scripts[index].remove();
+    nodes[index].remove();
   }
-  cloned.normalize();
-  return cloned;
-}
-function getNodes(node) {
-  return /^documentfragment$/i.test(node.constructor.name) ? [...node.childNodes] : [node];
 }
 function replaceNodes(from, to) {
+  from[0]?.replaceWith(...to);
   const { length } = from;
+  for (let index = 1;index < length; index += 1) {
+    from[index].remove();
+  }
+}
+function sanitiseNodes(nodes) {
+  const { length } = nodes;
   for (let index = 0;index < length; index += 1) {
-    const node = from[index];
-    if (index === 0) {
-      node.replaceWith(...to);
-    } else {
-      node.remove();
+    const node = nodes[index];
+    if (isProperElement(node)) {
+      removeEvents(node);
+    }
+    if (node.hasChildNodes()) {
+      sanitiseNodes([...node.childNodes]);
     }
   }
 }
 export {
   replaceNodes,
-  getNodes,
-  createTemplate,
+  removeNodes,
   createNodes
 };

package/dist/helpers/index.mjs

@@ -1,15 +1,25 @@
 // src/helpers/index.ts
+function compareArrays(first, second) {
+  const firstIsLarger = first.length > second.length;
+  const from = firstIsLarger ? first : second;
+  const to = firstIsLarger ? second : first;
+  if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) {
+    return "dissimilar";
+  }
+  return firstIsLarger ? "removed" : "added";
+}
 function isFragment(value) {
   return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
 }
-function isFragmentElement(value) {
+function isProperElement(value) {
   return value instanceof HTMLElement || value instanceof SVGElement;
 }
-function isFragmentNode(value) {
-  return value instanceof Comment || value instanceof Element || value instanceof Text;
+function isProperNode(value) {
+  return value instanceof CharacterData || value instanceof Element;
 }
 export {
-  isFragmentNode,
-  isFragmentElement,
-  isFragment
+  isProperNode,
+  isProperElement,
+  isFragment,
+  compareArrays
 };