@oscarpalmer/abydon 0.10.0 → 0.12.0

package/dist/index.js

@@ -1,167 +1,3 @@
-// node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
-function getString(value2) {
-  if (typeof value2 === "string") {
-    return value2;
-  }
-  if (typeof value2 !== "object" || value2 == null) {
-    return String(value2);
-  }
-  const valueOff = value2.valueOf?.() ?? value2;
-  const asString = valueOff?.toString?.() ?? String(valueOff);
-  return asString.startsWith("[object ") ? JSON.stringify(value2) : asString;
-}
-// node_modules/@oscarpalmer/atoms/dist/js/is.mjs
-function isNullableOrWhitespace(value2) {
-  return value2 == null || /^\s*$/.test(getString(value2));
-}
-// node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
-function getString2(value3) {
-  if (typeof value3 === "string") {
-    return value3;
-  }
-  if (typeof value3 !== "object" || value3 == null) {
-    return String(value3);
-  }
-  const valueOff = value3.valueOf?.() ?? value3;
-  const asString = valueOff?.toString?.() ?? String(valueOff);
-  return asString.startsWith("[object ") ? JSON.stringify(value3) : asString;
-}
-// node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/js/is.mjs
-function isPlainObject2(value3) {
-  if (typeof value3 !== "object" || value3 === null) {
-    return false;
-  }
-  const prototype = Object.getPrototypeOf(value3);
-  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value3) && !(Symbol.iterator in value3);
-}
-
-// node_modules/@oscarpalmer/toretto/dist/attribute.mjs
-function isBadAttribute(attribute) {
-  return onPrefix.test(attribute.name) || sourcePrefix.test(attribute.name) && valuePrefix.test(attribute.value);
-}
-function isBooleanAttribute(name) {
-  return booleanAttributes.includes(name.toLowerCase());
-}
-function isEmptyNonBooleanAttribute(attribute) {
-  return !booleanAttributes.includes(attribute.name) && attribute.value.trim().length === 0;
-}
-function isInvalidBooleanAttribute(attribute) {
-  if (!booleanAttributes.includes(attribute.name)) {
-    return true;
-  }
-  const normalised = attribute.value.toLowerCase().trim();
-  return !(normalised.length === 0 || normalised === attribute.name || attribute.name === "hidden" && normalised === "until-found");
-}
-function setAttribute(element, first, second) {
-  if (isPlainObject2(first) && typeof first?.name === "string") {
-    setAttributeValue(element, first.name, first.value);
-  } else if (typeof first === "string") {
-    setAttributeValue(element, first, second);
-  }
-}
-function setAttributeValue(element, name, value3) {
-  if (value3 == null) {
-    element.removeAttribute(name);
-  } else {
-    element.setAttribute(name, typeof value3 === "string" ? value3 : getString2(value3));
-  }
-}
-var booleanAttributes = Object.freeze([
-  "async",
-  "autofocus",
-  "autoplay",
-  "checked",
-  "controls",
-  "default",
-  "defer",
-  "disabled",
-  "formnovalidate",
-  "hidden",
-  "inert",
-  "ismap",
-  "itemscope",
-  "loop",
-  "multiple",
-  "muted",
-  "nomodule",
-  "novalidate",
-  "open",
-  "playsinline",
-  "readonly",
-  "required",
-  "reversed",
-  "selected"
-]);
-var onPrefix = /^on/i;
-var sourcePrefix = /^(href|src|xlink:href)$/i;
-var valuePrefix = /(data:text\/html|javascript:)/i;
-
-// node_modules/@oscarpalmer/toretto/dist/sanitise.mjs
-function sanitise(value3, options) {
-  return sanitiseNodes(Array.isArray(value3) ? value3 : [value3], {
-    sanitiseBooleanAttributes: options?.sanitiseBooleanAttributes ?? true
-  });
-}
-function sanitiseAttributes(element, attributes, options) {
-  const { length } = attributes;
-  for (let index = 0;index < length; index += 1) {
-    const attribute2 = attributes[index];
-    if (isBadAttribute(attribute2) || isEmptyNonBooleanAttribute(attribute2)) {
-      element.removeAttribute(attribute2.name);
-    } else if (options.sanitiseBooleanAttributes && isInvalidBooleanAttribute(attribute2)) {
-      element.setAttribute(attribute2.name, "");
-    }
-  }
-}
-function sanitiseNodes(nodes, options) {
-  const { length } = nodes;
-  for (let index = 0;index < length; index += 1) {
-    const node = nodes[index];
-    if (node instanceof Element) {
-      sanitiseAttributes(node, [...node.attributes], options);
-    }
-    sanitiseNodes([...node.childNodes], options);
-  }
-  return nodes;
-}
-
-// node_modules/@oscarpalmer/toretto/dist/html.mjs
-function createTemplate(html) {
-  const template3 = document.createElement("template");
-  template3.innerHTML = html;
-  templates[html] = template3;
-  return template3;
-}
-function getTemplate(value3) {
-  if (value3.trim().length === 0) {
-    return;
-  }
-  let template3;
-  if (/^[\w-]+$/.test(value3)) {
-    template3 = document.querySelector(`#${value3}`);
-  }
-  if (template3 instanceof HTMLTemplateElement) {
-    return template3;
-  }
-  return templates[value3] ?? createTemplate(value3);
-}
-function html(value3, sanitisation) {
-  const options = sanitisation == null || sanitisation === true ? {} : isPlainObject2(sanitisation) ? { ...sanitisation } : null;
-  const template3 = value3 instanceof HTMLTemplateElement ? value3 : typeof value3 === "string" ? getTemplate(value3) : null;
-  if (template3 == null) {
-    return [];
-  }
-  const cloned = template3.content.cloneNode(true);
-  const scripts = cloned.querySelectorAll("script");
-  const { length } = scripts;
-  for (let index = 0;index < length; index += 1) {
-    scripts[index].remove();
-  }
-  cloned.normalize();
-  return options != null ? sanitise([...cloned.childNodes], options) : [...cloned.childNodes];
-}
-var templates = {};
-
 // node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/queue.mjs
 function queue(callback) {
   _atomic_queued.add(callback);
@@ -252,11 +88,11 @@ class Effect {
 }
 
 // node_modules/@oscarpalmer/sentinel/dist/helpers/is.mjs
-function isReactive(value3) {
-  return isSentinel(value3, /^array|computed|signal|store$/i);
+function isReactive(value) {
+  return isSentinel(value, /^array|computed|signal|store$/i);
 }
-function isSentinel(value3, expression) {
-  return expression.test(value3?.$sentinel ?? "");
+function isSentinel(value, expression) {
+  return expression.test(value?.$sentinel ?? "");
 }
 
 // node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/function.mjs
@@ -265,22 +101,22 @@ function noop() {
 
 // node_modules/@oscarpalmer/sentinel/dist/helpers/subscription.mjs
 function subscribe(state, subscriber, key) {
-  let set5;
+  let set;
   if (key != null) {
     if (state.callbacks.keys.has(key)) {
-      set5 = state.callbacks.values.get(key);
+      set = state.callbacks.values.get(key);
     } else {
-      set5 = new Set;
+      set = new Set;
       state.callbacks.keys.add(key);
-      state.callbacks.values.set(key, set5);
+      state.callbacks.values.set(key, set);
     }
   } else {
-    set5 = state.callbacks.any;
+    set = state.callbacks.any;
   }
-  if (set5 == null || set5.has(subscriber)) {
+  if (set == null || set.has(subscriber)) {
     return noop;
   }
-  set5.add(subscriber);
+  set.add(subscriber);
   subscriber(state.value);
   return () => {
     unsubscribe(state, subscriber, key);
@@ -288,14 +124,14 @@ function subscribe(state, subscriber, key) {
 }
 function unsubscribe(state, subscriber, key) {
   if (key != null) {
-    const set5 = state.callbacks.values.get(key);
-    if (set5 != null) {
+    const set = state.callbacks.values.get(key);
+    if (set != null) {
       if (subscriber == null) {
-        set5.clear();
+        set.clear();
       } else {
-        set5.delete(subscriber);
+        set.delete(subscriber);
       }
-      if (set5.size === 0) {
+      if (set.size === 0) {
         state.callbacks.keys.delete(key);
         state.callbacks.values.delete(key);
       }
@@ -309,7 +145,7 @@ function unsubscribe(state, subscriber, key) {
 function disable(state) {
   if (state.active) {
     state.active = false;
-    const effects = [...state.callbacks.any, ...state.callbacks.values.values()].flatMap((value3) => value3 instanceof Set ? [...value3.values()] : value3).filter((value3) => typeof value3 !== "function");
+    const effects = [...state.callbacks.any, ...state.callbacks.values.values()].flatMap((value) => value instanceof Set ? [...value.values()] : value).filter((value) => typeof value !== "function");
     for (const fx of effects) {
       if (typeof fx !== "function") {
         fx.reactives.delete(state);
@@ -321,8 +157,8 @@ function emit(state, keys) {
   if (state.active) {
     const subscribers = [
       ...state.callbacks.any,
-      ...[...state.callbacks.values.entries()].filter(([key]) => keys == null || keys.includes(key)).map(([, value3]) => value3)
-    ].flatMap((value3) => value3 instanceof Set ? [...value3.values()] : value3).map((value3) => typeof value3 === "function" ? value3 : value3.callback);
+      ...[...state.callbacks.values.entries()].filter(([key]) => keys == null || keys.includes(key)).map(([, value]) => value)
+    ].flatMap((value) => value instanceof Set ? [...value.values()] : value).map((value) => typeof value === "function" ? value : value.callback);
     for (const subsriber of subscribers) {
       if (typeof subsriber === "function") {
         queue(() => {
@@ -340,13 +176,13 @@ function enable(state) {
 }
 
 // node_modules/@oscarpalmer/sentinel/dist/helpers/value.mjs
-function getValue3(reactive, key) {
+function getValue(reactive, key) {
   watch(reactive, typeof key === "symbol" ? undefined : key);
   return key == null ? reactive.value : Array.isArray(reactive.value) ? reactive.value.at(key) : reactive.value[key];
 }
-function setValue3(reactive, value3) {
-  if (!Object.is(reactive.value, value3)) {
-    reactive.value = value3;
+function setValue(reactive, value) {
+  if (!Object.is(reactive.value, value)) {
+    reactive.value = value;
     emit(reactive);
   }
 }
@@ -365,10 +201,10 @@ var arrayOperations = new Set([
 // node_modules/@oscarpalmer/sentinel/dist/reactive/instance.mjs
 class ReactiveInstance {
   state;
-  constructor(type, value22) {
+  constructor(type, value2) {
     this.$sentinel = type;
     this.state = {
-      value: value22,
+      value: value2,
       active: true,
       callbacks: {
         any: new Set,
@@ -378,7 +214,7 @@ class ReactiveInstance {
     };
   }
   get() {
-    return getValue3(this.state);
+    return getValue(this.state);
   }
   peek() {
     return this.state.value;
@@ -390,10 +226,10 @@ class ReactiveInstance {
     disable(this.state);
   }
   toJSON() {
-    return getValue3(this.state);
+    return getValue(this.state);
   }
   toString() {
-    return String(getValue3(this.state));
+    return String(getValue(this.state));
   }
 }
 
@@ -420,7 +256,7 @@ class Computed extends ReactiveValue {
   fx;
   constructor(value32) {
     super("computed", undefined);
-    this.fx = effect(() => setValue3(this.state, value32()));
+    this.fx = effect(() => setValue(this.state, value32()));
   }
   run() {
     this.fx.start();
@@ -431,17 +267,189 @@ class Computed extends ReactiveValue {
 }
 // node_modules/@oscarpalmer/sentinel/dist/reactive/index.mjs
 var primitives = new Set(["boolean", "number", "string"]);
+// node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
+function getString2(value10) {
+  if (typeof value10 === "string") {
+    return value10;
+  }
+  if (typeof value10 !== "object" || value10 == null) {
+    return String(value10);
+  }
+  const valueOff = value10.valueOf?.() ?? value10;
+  const asString = valueOff?.toString?.() ?? String(valueOff);
+  return asString.startsWith("[object ") ? JSON.stringify(value10) : asString;
+}
+// node_modules/@oscarpalmer/atoms/dist/js/is.mjs
+function isNullableOrWhitespace(value10) {
+  return value10 == null || /^\s*$/.test(getString2(value10));
+}
+// node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
+function getString3(value11) {
+  if (typeof value11 === "string") {
+    return value11;
+  }
+  if (typeof value11 !== "object" || value11 == null) {
+    return String(value11);
+  }
+  const valueOff = value11.valueOf?.() ?? value11;
+  const asString = valueOff?.toString?.() ?? String(valueOff);
+  return asString.startsWith("[object ") ? JSON.stringify(value11) : asString;
+}
+// node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/js/is.mjs
+function isPlainObject3(value11) {
+  if (typeof value11 !== "object" || value11 === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value11);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value11) && !(Symbol.iterator in value11);
+}
+
+// node_modules/@oscarpalmer/toretto/dist/attribute.mjs
+function isBadAttribute(attribute) {
+  return onPrefix.test(attribute.name) || sourcePrefix.test(attribute.name) && valuePrefix.test(attribute.value);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.includes(name.toLowerCase());
+}
+function isEmptyNonBooleanAttribute(attribute) {
+  return !booleanAttributes.includes(attribute.name) && attribute.value.trim().length === 0;
+}
+function isInvalidBooleanAttribute(attribute) {
+  if (!booleanAttributes.includes(attribute.name)) {
+    return true;
+  }
+  const normalised = attribute.value.toLowerCase().trim();
+  return !(normalised.length === 0 || normalised === attribute.name || attribute.name === "hidden" && normalised === "until-found");
+}
+function setAttribute(element, first, second) {
+  if (isPlainObject3(first) && typeof first?.name === "string") {
+    setAttributeValue(element, first.name, first.value);
+  } else if (typeof first === "string") {
+    setAttributeValue(element, first, second);
+  }
+}
+function setAttributeValue(element, name, value11) {
+  if (value11 == null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, typeof value11 === "string" ? value11 : getString3(value11));
+  }
+}
+var booleanAttributes = Object.freeze([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var onPrefix = /^on/i;
+var sourcePrefix = /^(href|src|xlink:href)$/i;
+var valuePrefix = /(data:text\/html|javascript:)/i;
+
+// node_modules/@oscarpalmer/toretto/dist/sanitise.mjs
+function sanitise(value11, options) {
+  return sanitiseNodes(Array.isArray(value11) ? value11 : [value11], {
+    sanitiseBooleanAttributes: options?.sanitiseBooleanAttributes ?? true
+  });
+}
+function sanitiseAttributes(element, attributes, options) {
+  const { length } = attributes;
+  for (let index = 0;index < length; index += 1) {
+    const attribute2 = attributes[index];
+    if (isBadAttribute(attribute2) || isEmptyNonBooleanAttribute(attribute2)) {
+      element.removeAttribute(attribute2.name);
+    } else if (options.sanitiseBooleanAttributes && isInvalidBooleanAttribute(attribute2)) {
+      element.setAttribute(attribute2.name, "");
+    }
+  }
+}
+function sanitiseNodes(nodes, options) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (node instanceof Element) {
+      sanitiseAttributes(node, [...node.attributes], options);
+    }
+    sanitiseNodes([...node.childNodes], options);
+  }
+  return nodes;
+}
+
+// node_modules/@oscarpalmer/toretto/dist/html.mjs
+function createTemplate(html) {
+  const template4 = document.createElement("template");
+  template4.innerHTML = html;
+  templates[html] = template4;
+  return template4;
+}
+function getTemplate(value11) {
+  if (value11.trim().length === 0) {
+    return;
+  }
+  let template4;
+  if (/^[\w-]+$/.test(value11)) {
+    template4 = document.querySelector(`#${value11}`);
+  }
+  if (template4 instanceof HTMLTemplateElement) {
+    return template4;
+  }
+  return templates[value11] ?? createTemplate(value11);
+}
+function html(value11, sanitisation) {
+  const options = sanitisation == null || sanitisation === true ? {} : isPlainObject3(sanitisation) ? { ...sanitisation } : null;
+  const template4 = value11 instanceof HTMLTemplateElement ? value11 : typeof value11 === "string" ? getTemplate(value11) : null;
+  if (template4 == null) {
+    return [];
+  }
+  const cloned = template4.content.cloneNode(true);
+  const scripts = cloned.querySelectorAll("script");
+  const { length } = scripts;
+  for (let index = 0;index < length; index += 1) {
+    scripts[index].remove();
+  }
+  cloned.normalize();
+  return options != null ? sanitise([...cloned.childNodes], options) : [...cloned.childNodes];
+}
+var templates = {};
 
 // 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 isChildNode(value11) {
+  return value11 instanceof CharacterData || value11 instanceof Element;
+}
 function isFragment(value11) {
   return typeof value11 === "object" && value11 != null && "$fragment" in value11 && value11.$fragment === true;
 }
-function isProperElement(value11) {
+function isHTMLOrSVGElement(value11) {
   return value11 instanceof HTMLElement || value11 instanceof SVGElement;
 }
-function isProperNode(value11) {
-  return value11 instanceof CharacterData || value11 instanceof Element;
-}
 
 // src/node/event.ts
 function getController(element) {
@@ -471,23 +479,22 @@ function mapEvent(element, name, value11) {
   }
 }
 function removeEvents(element) {
-  if (controllers.has(element)) {
-    controllers.get(element)?.abort();
-    controllers.delete(element);
-  }
+  controllers.get(element)?.abort(reason);
+  controllers.delete(element);
 }
 var controllers = new WeakMap;
 var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
+var reason = "Event removed as element was removed from document by Abydon";
 
 // src/helpers/dom.ts
 function createNodes(value11) {
   if (isFragment(value11)) {
     return value11.get();
   }
-  if (isProperNode(value11)) {
+  if (isChildNode(value11)) {
     return [value11];
   }
-  return [new Text(getString(value11))];
+  return [new Text(getString2(value11))];
 }
 function removeNodes(nodes) {
   sanitiseNodes2(nodes);
@@ -497,20 +504,17 @@ function removeNodes(nodes) {
   }
 }
 function replaceNodes(from, to) {
+  from[0]?.replaceWith(...to);
   const { length } = from;
-  for (let index = 0;index < length; index += 1) {
-    if (index === 0) {
-      from[index].replaceWith(...to);
-    } else {
-      from[index].remove();
-    }
+  for (let index = 1;index < length; index += 1) {
+    from[index].remove();
   }
 }
 function sanitiseNodes2(nodes) {
   const { length } = nodes;
   for (let index = 0;index < length; index += 1) {
     const node = nodes[index];
-    if (isProperElement(node)) {
+    if (isHTMLOrSVGElement(node)) {
       removeEvents(node);
     }
     if (node.hasChildNodes()) {
@@ -520,21 +524,21 @@ function sanitiseNodes2(nodes) {
 }
 
 // src/node/attribute/value.ts
-function setAttribute2(element, name, value11) {
+function setAttribute2(data, element, name, value11) {
   element.removeAttribute(name);
   switch (true) {
     case classExpression.test(name):
-      setClasses(element, name, value11);
+      setClasses(data, element, name, value11);
       return;
     case stylePrefixExpression.test(name):
-      setStyle(element, name, value11);
+      setStyle(data, element, name, value11);
       return;
     default:
-      setValue5(element, name, value11);
+      setValue5(data, element, name, value11);
       break;
   }
 }
-function setClasses(element, name, value11) {
+function setClasses(data, element, name, value11) {
   function update(value12) {
     if (value12 === true) {
       element.classList.add(...classes);
@@ -544,38 +548,38 @@ function setClasses(element, name, value11) {
   }
   const classes = name.slice(6).split(".");
   if (isReactive(value11)) {
-    effect(() => {
+    data.sentinel.effects.add(effect(() => {
       update(value11.get());
-    });
+    }));
   } else {
     update(value11);
   }
 }
-function setStyle(element, name, value11) {
+function setStyle(data, element, name, value11) {
   function update(value12) {
     if (value12 == null || value12 === false || value12 === true && unit == null) {
       element.style.removeProperty(property);
     } else {
-      element.style.setProperty(property, value12 === true ? unit : getString(value12));
+      element.style.setProperty(property, value12 === true ? unit : getString2(value12));
     }
   }
   const [, property, unit] = styleFullExpression.exec(name) ?? [];
   if (property != null) {
     if (isReactive(value11)) {
-      effect(() => {
+      data.sentinel.effects.add(effect(() => {
         update(value11.get());
-      });
+      }));
     } else {
       update(value11);
     }
   }
 }
-function setValue5(element, name, value11) {
+function setValue5(data, element, name, value11) {
   const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttribute;
   if (isReactive(value11)) {
-    effect(() => {
+    data.sentinel.effects.add(effect(() => {
       callback(element, name, value11.get());
-    });
+    }));
   } else {
     callback(element, name, value11);
   }
@@ -614,25 +618,88 @@ function mapAttributes(data, element) {
     if (name.startsWith("@")) {
       mapEvent(element, name, actual);
     } else if (name.includes(".") || typeof value12 === "function" || isReactive(actual)) {
-      mapValue(element, name, actual);
+      mapValue(data, element, name, actual);
     }
   }
 }
-function mapValue(element, name, value12) {
+function mapValue(data, element, name, value12) {
   switch (true) {
     case typeof value12 === "function":
-      setAttribute2(element, name, computed(value12));
+      setComputedAttribute(data, element, name, value12);
       break;
     default:
-      setAttribute2(element, name, value12);
+      setAttribute2(data, element, name, value12);
       break;
   }
 }
+function setComputedAttribute(data, element, name, callback) {
+  const value12 = computed(callback);
+  data.sentinel.values.add(value12);
+  setAttribute2(data, element, name, value12);
+}
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 
 // src/node/value.ts
-function setNodes(nodes, comment, text, value12) {
-  const next = createNodes(value12);
+function removeFragments(fragments) {
+  if (fragments != null) {
+    const { length } = fragments;
+    for (let index = 0;index < length; index += 1) {
+      fragments[index].remove();
+    }
+  }
+}
+function setArray(fragments, nodes, comment, text, value12) {
+  if (value12.length === 0) {
+    return {
+      nodes: setText(fragments, nodes, comment, text, value12)
+    };
+  }
+  let templates2 = value12.filter((item) => isFragment(item) && item.identifier != null);
+  const identifiers = templates2.map((fragment) => fragment.identifier);
+  const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
+  if (new Set(identifiers).size !== templates2.length) {
+    templates2 = [];
+  }
+  const noTemplates = templates2.length === 0;
+  if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) {
+    return {
+      fragments: noTemplates ? undefined : templates2,
+      nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value12.flatMap((item) => createNodes(item)) : templates2.flatMap((template4) => template4.get()))
+    };
+  }
+  const next = templates2.map((template4) => fragments?.find((fragment) => fragment.identifier === template4.identifier) ?? template4);
+  const comparison = compareArrays(fragments ?? [], templates2);
+  if (comparison !== "removed") {
+    let position = nodes[0];
+    const before = comparison === "added" && !oldIdentifiers.includes(templates2[0].identifier);
+    const items = next.flatMap((fragment) => fragment.get().flatMap((node) => ({
+      identifier: fragment.identifier,
+      value: node
+    })));
+    const { length: length2 } = items;
+    for (let index = 0;index < length2; index += 1) {
+      const item = items[index];
+      if (comparison === "dissimilar" || !oldIdentifiers.includes(item.identifier)) {
+        if (index === 0 && before) {
+          position.before(item.value);
+        } else {
+          position.after(item.value);
+        }
+      }
+      position = item.value;
+    }
+  }
+  const toRemove = fragments?.filter((fragment) => !identifiers.includes(fragment.identifier)) ?? [];
+  const { length } = toRemove;
+  for (let index = 0;index < length; index += 1) {
+    toRemove[index].remove();
+  }
+  return {
+    fragments: next,
+    nodes: next.flatMap((fragment) => fragment.get())
+  };
+}
+function setNodes(fragments, nodes, comment, text, next) {
   if (nodes == null) {
     if (comment.parentNode != null) {
       replaceNodes([comment], next);
@@ -642,42 +709,50 @@ function setNodes(nodes, comment, text, value12) {
   } else {
     replaceNodes(nodes, next);
   }
+  removeFragments(fragments);
   return next;
 }
-function setReactiveNode(data, comment, reactive3) {
+function setReactiveValue(data, comment, reactive3) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const text = new Text;
+  let fragments;
   let nodes;
-  effect(() => {
+  data.sentinel.effects.add(effect(() => {
     const value12 = reactive3.get();
-    const valueIsFragment = isFragment(value12);
-    if (valueIsFragment || isProperNode(value12)) {
-      nodes = setNodes(nodes, comment, text, value12);
+    if (Array.isArray(value12)) {
+      const result = setArray(fragments, nodes, comment, text, value12);
+      fragments = typeof result === "boolean" ? undefined : result?.fragments;
+      nodes = typeof result === "boolean" ? result ? [text] : undefined : result?.nodes;
     } else {
-      nodes = setText(nodes, comment, text, value12) ? [text] : undefined;
+      const valueIsFragment = isFragment(value12);
+      fragments = valueIsFragment ? [value12] : undefined;
+      if (valueIsFragment || isChildNode(value12)) {
+        nodes = setNodes(fragments, nodes, comment, text, createNodes(value12));
+      } else {
+        nodes = setText(fragments, nodes, comment, text, value12);
+      }
     }
     if (item != null) {
-      item.fragment = valueIsFragment ? value12 : undefined;
+      item.fragments = fragments;
       item.nodes = [...nodes ?? [comment]];
     }
-  });
+  }));
 }
-function setText(nodes, comment, text, value12) {
+function setText(fragments, nodes, comment, text, value12) {
   const isNullable = isNullableOrWhitespace(value12);
-  text.textContent = isNullable ? "" : getString(value12);
+  text.textContent = isNullable ? "" : getString2(value12);
+  let result = false;
   if (nodes != null) {
     replaceNodes(nodes, [isNullable ? comment : text]);
-    return !isNullable;
-  }
-  if (isNullable && comment.parentNode == null) {
+    result = !isNullable;
+  } else if (isNullable && comment.parentNode == null) {
     text.replaceWith(comment);
-    return false;
-  }
-  if (!isNullable && text.parentNode == null) {
+  } else if (!isNullable && text.parentNode == null) {
     comment.replaceWith(text);
-    return true;
+    result = true;
   }
-  return false;
+  removeFragments(fragments);
+  return result ? [text] : undefined;
 }
 
 // src/node/index.ts
@@ -696,7 +771,7 @@ function mapNodes(data, nodes) {
       mapNode(data, node);
       continue;
     }
-    if (isProperElement(node)) {
+    if (isHTMLOrSVGElement(node)) {
       mapAttributes(data, node);
     }
     if (node.hasChildNodes()) {
@@ -707,10 +782,10 @@ function mapNodes(data, nodes) {
 function mapValue2(data, comment, value13) {
   switch (true) {
     case typeof value13 === "function":
-      setReactiveNode(data, comment, computed(value13));
+      setComputedValue(data, comment, value13);
       break;
     case isReactive(value13):
-      setReactiveNode(data, comment, value13);
+      setReactiveValue(data, comment, value13);
       break;
     default:
       replaceComment(data, comment, value13);
@@ -721,22 +796,57 @@ function replaceComment(data, comment, value13) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const nodes = createNodes(value13);
   if (item != null) {
-    item.fragment = isFragment(value13) ? value13 : undefined;
+    item.fragments = isFragment(value13) ? [value13] : undefined;
     item.nodes = nodes;
   }
   comment.replaceWith(...nodes);
 }
+function setComputedValue(data, comment, callback) {
+  const value13 = computed(callback);
+  data.sentinel.values.add(value13);
+  setReactiveValue(data, comment, value13);
+}
 var commentExpression2 = /^abydon\.(\d+)$/;
 
 // src/fragment.ts
+function removeFragment(data) {
+  removeSentinels(data);
+  const { length } = data.items;
+  for (let index = 0;index < length; index += 1) {
+    const { fragments, nodes } = data.items[index];
+    const { length: length2 } = fragments ?? [];
+    for (let index2 = 0;index2 < length2; index2 += 1) {
+      fragments?.[index2]?.remove();
+    }
+    removeNodes(nodes);
+  }
+  data.items.splice(0, length);
+}
+function removeSentinels(data) {
+  const sentinels = [...data.sentinel.effects, ...data.sentinel.values];
+  const { length } = sentinels;
+  for (let index = 0;index < length; index += 1) {
+    sentinels[index].stop();
+  }
+  data.sentinel.effects.clear();
+  data.sentinel.values.clear();
+}
+
 class Fragment {
   $fragment = true;
   data;
+  get identifier() {
+    return this.data.identifier;
+  }
   constructor(strings, expressions) {
     this.data = {
       expressions,
       strings,
       items: [],
+      sentinel: {
+        effects: new Set,
+        values: new Set
+      },
       values: []
     };
   }
@@ -752,20 +862,18 @@ class Fragment {
       this.data.items.splice(0, this.data.items.length, ...templated.map((node2) => ({
         nodes: [node2]
       })));
-      mapNodes(this.data, this.data.items.flatMap((item) => item.fragment?.get() ?? item.nodes));
+      mapNodes(this.data, this.data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes));
     }
     return [
-      ...this.data.items.flatMap((item) => item.fragment?.get() ?? item.nodes)
+      ...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.items;
-    for (let index = 0;index < length; index += 1) {
-      const { fragment, nodes } = this.data.items[index];
-      fragment?.remove();
-      removeNodes(nodes);
-    }
-    this.data.items.splice(0, length);
+    removeFragment(this.data);
   }
 }