@oscarpalmer/abydon 0.9.0 → 0.10.0

package/dist/fragment.mjs

@@ -2,10 +2,14 @@
 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,
@@ -26,20 +30,25 @@ 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 item = this.data.items[index];
-      item.fragment?.remove();
-      for (const node2 of item.nodes) {
-        node2.remove();
+      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.items.splice(0, length);
   }

package/dist/helpers/dom.mjs

@@ -1,6 +1,7 @@
 // src/helpers/dom.ts
 import {getString} from "@oscarpalmer/atoms/string";
-import {isFragment, isProperNode} from "./index";
+import {isFragment, isProperElement, isProperNode} from "./index";
+import {removeEvents} from "../node/event";
 function createNodes(value) {
   if (isFragment(value)) {
     return value.get();
@@ -10,18 +11,34 @@ function createNodes(value) {
   }
   return [new Text(getString(value))];
 }
+function removeNodes(nodes) {
+  sanitiseNodes(nodes);
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    nodes[index].remove();
+  }
+}
 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,
+  removeNodes,
   createNodes
 };

package/dist/helpers/index.mjs

@@ -1,4 +1,13 @@
 // 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;
 }
@@ -11,5 +20,6 @@ function isProperNode(value) {
 export {
   isProperNode,
   isProperElement,
-  isFragment
+  isFragment,
+  compareArrays
 };

package/dist/index.js

@@ -163,6 +163,19 @@ function html(value3, sanitisation) {
 var templates = {};
 
 // node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/queue.mjs
+function queue(callback) {
+  _atomic_queued.add(callback);
+  if (_atomic_queued.size > 0) {
+    queueMicrotask(() => {
+      const callbacks = [..._atomic_queued];
+      const { length } = callbacks;
+      _atomic_queued.clear();
+      for (let index = 0;index < length; index += 1) {
+        callbacks[index]();
+      }
+    });
+  }
+}
 if (globalThis._atomic_queued == null) {
   const queued = new Set;
   Object.defineProperty(globalThis, "_atomic_queued", {
@@ -186,6 +199,22 @@ if (globalThis._sentinels == null) {
 function effect(callback) {
   return new Effect(callback);
 }
+function watch(reactive, key) {
+  const effect2 = globalThis._sentinels[globalThis._sentinels.length - 1];
+  if (effect2 != null) {
+    if (key == null) {
+      reactive.callbacks.any.add(effect2);
+    } else {
+      if (!reactive.callbacks.keys.has(key)) {
+        reactive.callbacks.keys.add(key);
+        reactive.callbacks.values.set(key, new Set);
+      }
+      reactive.callbacks.values.get(key)?.add(effect2);
+    }
+    effect2.reactives.add(reactive);
+  }
+}
+
 class Effect {
   $sentinel = "effect";
   state;
@@ -230,7 +259,97 @@ function isSentinel(value3, expression) {
   return expression.test(value3?.$sentinel ?? "");
 }
 
+// node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/function.mjs
+function noop() {
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/helpers/subscription.mjs
+function subscribe(state, subscriber, key) {
+  let set5;
+  if (key != null) {
+    if (state.callbacks.keys.has(key)) {
+      set5 = state.callbacks.values.get(key);
+    } else {
+      set5 = new Set;
+      state.callbacks.keys.add(key);
+      state.callbacks.values.set(key, set5);
+    }
+  } else {
+    set5 = state.callbacks.any;
+  }
+  if (set5 == null || set5.has(subscriber)) {
+    return noop;
+  }
+  set5.add(subscriber);
+  subscriber(state.value);
+  return () => {
+    unsubscribe(state, subscriber, key);
+  };
+}
+function unsubscribe(state, subscriber, key) {
+  if (key != null) {
+    const set5 = state.callbacks.values.get(key);
+    if (set5 != null) {
+      if (subscriber == null) {
+        set5.clear();
+      } else {
+        set5.delete(subscriber);
+      }
+      if (set5.size === 0) {
+        state.callbacks.keys.delete(key);
+        state.callbacks.values.delete(key);
+      }
+    }
+  } else if (subscriber != null) {
+    state.callbacks.any.delete(subscriber);
+  }
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/helpers/event.mjs
+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");
+    for (const fx of effects) {
+      if (typeof fx !== "function") {
+        fx.reactives.delete(state);
+      }
+    }
+  }
+}
+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);
+    for (const subsriber of subscribers) {
+      if (typeof subsriber === "function") {
+        queue(() => {
+          subsriber(state.value);
+        });
+      }
+    }
+  }
+}
+function enable(state) {
+  if (!state.active) {
+    state.active = true;
+    emit(state);
+  }
+}
+
 // node_modules/@oscarpalmer/sentinel/dist/helpers/value.mjs
+function getValue3(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;
+    emit(reactive);
+  }
+}
 var arrayOperations = new Set([
   "copyWithin",
   "fill",
@@ -242,6 +361,74 @@ var arrayOperations = new Set([
   "splice",
   "unshift"
 ]);
+
+// node_modules/@oscarpalmer/sentinel/dist/reactive/instance.mjs
+class ReactiveInstance {
+  state;
+  constructor(type, value22) {
+    this.$sentinel = type;
+    this.state = {
+      value: value22,
+      active: true,
+      callbacks: {
+        any: new Set,
+        keys: new Set,
+        values: new Map
+      }
+    };
+  }
+  get() {
+    return getValue3(this.state);
+  }
+  peek() {
+    return this.state.value;
+  }
+  run() {
+    enable(this.state);
+  }
+  stop() {
+    disable(this.state);
+  }
+  toJSON() {
+    return getValue3(this.state);
+  }
+  toString() {
+    return String(getValue3(this.state));
+  }
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/reactive/value.mjs
+class ReactiveValue extends ReactiveInstance {
+  subscribe(subscriber) {
+    return subscribe(this.state, subscriber);
+  }
+  unsubscribe(subscriber) {
+    if (subscriber == null) {
+      this.state.callbacks.any.clear();
+    } else {
+      this.state.callbacks.any.delete(subscriber);
+    }
+  }
+}
+
+// node_modules/@oscarpalmer/sentinel/dist/reactive/computed.mjs
+function computed(value32) {
+  return new Computed(value32);
+}
+
+class Computed extends ReactiveValue {
+  fx;
+  constructor(value32) {
+    super("computed", undefined);
+    this.fx = effect(() => setValue3(this.state, value32()));
+  }
+  run() {
+    this.fx.start();
+  }
+  stop() {
+    this.fx.stop();
+  }
+}
 // node_modules/@oscarpalmer/sentinel/dist/reactive/index.mjs
 var primitives = new Set(["boolean", "number", "string"]);
 
@@ -256,6 +443,42 @@ function isProperNode(value11) {
   return value11 instanceof CharacterData || value11 instanceof Element;
 }
 
+// src/node/event.ts
+function getController(element) {
+  let controller = controllers.get(element);
+  if (controller == null) {
+    controller = new AbortController;
+    controllers.set(element, controller);
+  }
+  return controller;
+}
+function getOptions(options) {
+  const parts = options.split(":");
+  return {
+    capture: parts.includes("c") || parts.includes("capture"),
+    once: parts.includes("o") || parts.includes("once"),
+    passive: !parts.includes("a") && !parts.includes("active")
+  };
+}
+function mapEvent(element, name, value11) {
+  element.removeAttribute(name);
+  const [, type, options] = eventNamePattern.exec(name) ?? [];
+  if (typeof value11 === "function" && type != null) {
+    element.addEventListener(type, value11, {
+      ...getOptions(options ?? ""),
+      signal: getController(element).signal
+    });
+  }
+}
+function removeEvents(element) {
+  if (controllers.has(element)) {
+    controllers.get(element)?.abort();
+    controllers.delete(element);
+  }
+}
+var controllers = new WeakMap;
+var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
 // src/helpers/dom.ts
 function createNodes(value11) {
   if (isFragment(value11)) {
@@ -266,32 +489,33 @@ function createNodes(value11) {
   }
   return [new Text(getString(value11))];
 }
+function removeNodes(nodes) {
+  sanitiseNodes2(nodes);
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    nodes[index].remove();
+  }
+}
 function replaceNodes(from, to) {
   const { length } = from;
   for (let index = 0;index < length; index += 1) {
-    const node = from[index];
     if (index === 0) {
-      node.replaceWith(...to);
+      from[index].replaceWith(...to);
     } else {
-      node.remove();
+      from[index].remove();
     }
   }
 }
-
-// src/node/event.ts
-function getOptions(options) {
-  const parts = options.split(":");
-  return {
-    capture: parts.includes("c") || parts.includes("capture"),
-    once: parts.includes("o") || parts.includes("once"),
-    passive: !parts.includes("a") && !parts.includes("active")
-  };
-}
-function mapEvent(element, name, value11) {
-  element.removeAttribute(name);
-  const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
-  if (typeof value11 === "function" && type != null) {
-    element.addEventListener(type, value11, getOptions(options ?? ""));
+function sanitiseNodes2(nodes) {
+  const { length } = nodes;
+  for (let index = 0;index < length; index += 1) {
+    const node = nodes[index];
+    if (isProperElement(node)) {
+      removeEvents(node);
+    }
+    if (node.hasChildNodes()) {
+      sanitiseNodes2([...node.childNodes]);
+    }
   }
 }
 
@@ -299,10 +523,10 @@ function mapEvent(element, name, value11) {
 function setAttribute2(element, name, value11) {
   element.removeAttribute(name);
   switch (true) {
-    case classPattern.test(name):
+    case classExpression.test(name):
       setClasses(element, name, value11);
       return;
-    case stylePattern.test(name):
+    case stylePrefixExpression.test(name):
       setStyle(element, name, value11);
       return;
     default:
@@ -312,7 +536,7 @@ function setAttribute2(element, name, value11) {
 }
 function setClasses(element, name, value11) {
   function update(value12) {
-    if (/^(|true)$/.test(getString(value12))) {
+    if (value12 === true) {
       element.classList.add(...classes);
     } else {
       element.classList.remove(...classes);
@@ -335,16 +559,15 @@ function setStyle(element, name, value11) {
       element.style.setProperty(property, value12 === true ? unit : getString(value12));
     }
   }
-  const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
-  if (property == null) {
-    return;
-  }
-  if (isReactive(value11)) {
-    effect(() => {
-      update(value11.get());
-    });
-  } else {
-    update(value11);
+  const [, property, unit] = styleFullExpression.exec(name) ?? [];
+  if (property != null) {
+    if (isReactive(value11)) {
+      effect(() => {
+        update(value11.get());
+      });
+    } else {
+      update(value11);
+    }
   }
 }
 function setValue5(element, name, value11) {
@@ -363,7 +586,7 @@ function triggerSelectChange(select) {
   }
 }
 function updateProperty(element, name, value11) {
-  element[name] = /^(|true)$/.test(getString(value11));
+  element[name] = value11 === true;
 }
 function updateSelected(element, name, value11) {
   const select = element.closest("select");
@@ -373,8 +596,9 @@ function updateSelected(element, name, value11) {
   }
   updateProperty(element, name, value11);
 }
-var classPattern = /^class\./;
-var stylePattern = /^style\./;
+var classExpression = /^class\./;
+var styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+var stylePrefixExpression = /^style\./;
 
 // src/node/attribute/index.ts
 function getValue5(data, original) {
@@ -389,7 +613,7 @@ function mapAttributes(data, element) {
     const actual = getValue5(data, value12);
     if (name.startsWith("@")) {
       mapEvent(element, name, actual);
-    } else if (name.includes(".") || isReactive(actual)) {
+    } else if (name.includes(".") || typeof value12 === "function" || isReactive(actual)) {
       mapValue(element, name, actual);
     }
   }
@@ -397,8 +621,8 @@ function mapAttributes(data, element) {
 function mapValue(element, name, value12) {
   switch (true) {
     case typeof value12 === "function":
-      mapValue(element, name, value12());
-      return;
+      setAttribute2(element, name, computed(value12));
+      break;
     default:
       setAttribute2(element, name, value12);
       break;
@@ -483,8 +707,8 @@ function mapNodes(data, nodes) {
 function mapValue2(data, comment, value13) {
   switch (true) {
     case typeof value13 === "function":
-      mapValue2(data, comment, value13());
-      return;
+      setReactiveNode(data, comment, computed(value13));
+      break;
     case isReactive(value13):
       setReactiveNode(data, comment, value13);
       break;
@@ -537,11 +761,9 @@ class Fragment {
   remove() {
     const { length } = this.data.items;
     for (let index = 0;index < length; index += 1) {
-      const item = this.data.items[index];
-      item.fragment?.remove();
-      for (const node2 of item.nodes) {
-        node2.remove();
-      }
+      const { fragment, nodes } = this.data.items[index];
+      fragment?.remove();
+      removeNodes(nodes);
     }
     this.data.items.splice(0, length);
   }

package/dist/node/attribute/index.mjs

@@ -1,5 +1,5 @@
 // src/node/attribute/index.ts
-import {isReactive} from "@oscarpalmer/sentinel";
+import {computed, isReactive} from "@oscarpalmer/sentinel";
 import {mapEvent} from "../event";
 import {setAttribute} from "./value";
 function getValue(data, original) {
@@ -14,7 +14,7 @@ function mapAttributes(data, element) {
     const actual = getValue(data, value2);
     if (name.startsWith("@")) {
       mapEvent(element, name, actual);
-    } else if (name.includes(".") || isReactive(actual)) {
+    } else if (name.includes(".") || typeof value2 === "function" || isReactive(actual)) {
       mapValue(element, name, actual);
     }
   }
@@ -22,8 +22,8 @@ function mapAttributes(data, element) {
 function mapValue(element, name, value2) {
   switch (true) {
     case typeof value2 === "function":
-      mapValue(element, name, value2());
-      return;
+      setAttribute(element, name, computed(value2));
+      break;
     default:
       setAttribute(element, name, value2);
       break;

package/dist/node/attribute/value.mjs

@@ -8,10 +8,10 @@ setAttribute as setAttr
 function setAttribute(element, name, value) {
   element.removeAttribute(name);
   switch (true) {
-    case classPattern.test(name):
+    case classExpression.test(name):
       setClasses(element, name, value);
       return;
-    case stylePattern.test(name):
+    case stylePrefixExpression.test(name):
       setStyle(element, name, value);
       return;
     default:
@@ -21,7 +21,7 @@ function setAttribute(element, name, value) {
 }
 function setClasses(element, name, value) {
   function update(value2) {
-    if (/^(|true)$/.test(getString(value2))) {
+    if (value2 === true) {
       element.classList.add(...classes);
     } else {
       element.classList.remove(...classes);
@@ -44,16 +44,15 @@ function setStyle(element, name, value) {
       element.style.setProperty(property, value2 === true ? unit : getString(value2));
     }
   }
-  const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
-  if (property == null) {
-    return;
-  }
-  if (isReactive(value)) {
-    effect(() => {
-      update(value.get());
-    });
-  } else {
-    update(value);
+  const [, property, unit] = styleFullExpression.exec(name) ?? [];
+  if (property != null) {
+    if (isReactive(value)) {
+      effect(() => {
+        update(value.get());
+      });
+    } else {
+      update(value);
+    }
   }
 }
 function setValue(element, name, value) {
@@ -72,7 +71,7 @@ function triggerSelectChange(select) {
   }
 }
 function updateProperty(element, name, value) {
-  element[name] = /^(|true)$/.test(getString(value));
+  element[name] = value === true;
 }
 function updateSelected(element, name, value) {
   const select = element.closest("select");
@@ -82,8 +81,9 @@ function updateSelected(element, name, value) {
   }
   updateProperty(element, name, value);
 }
-var classPattern = /^class\./;
-var stylePattern = /^style\./;
+var classExpression = /^class\./;
+var styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+var stylePrefixExpression = /^style\./;
 export {
   setAttribute
 };

package/dist/node/event.mjs

@@ -1,4 +1,12 @@
 // src/node/event.ts
+function getController(element) {
+  let controller = controllers.get(element);
+  if (controller == null) {
+    controller = new AbortController;
+    controllers.set(element, controller);
+  }
+  return controller;
+}
 function getOptions(options) {
   const parts = options.split(":");
   return {
@@ -9,11 +17,23 @@ function getOptions(options) {
 }
 function mapEvent(element, name, value) {
   element.removeAttribute(name);
-  const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+  const [, type, options] = eventNamePattern.exec(name) ?? [];
   if (typeof value === "function" && type != null) {
-    element.addEventListener(type, value, getOptions(options ?? ""));
+    element.addEventListener(type, value, {
+      ...getOptions(options ?? ""),
+      signal: getController(element).signal
+    });
+  }
+}
+function removeEvents(element) {
+  if (controllers.has(element)) {
+    controllers.get(element)?.abort();
+    controllers.delete(element);
   }
 }
+var controllers = new WeakMap;
+var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
 export {
+  removeEvents,
   mapEvent
 };

package/dist/node/index.mjs

@@ -1,5 +1,5 @@
 // src/node/index.ts
-import {isReactive} from "@oscarpalmer/sentinel";
+import {computed, isReactive} from "@oscarpalmer/sentinel";
 import {isFragment, isProperElement} from "../helpers";
 import {createNodes} from "../helpers/dom";
 import {mapAttributes} from "./attribute";
@@ -30,8 +30,8 @@ function mapNodes(data, nodes) {
 function mapValue(data, comment, value2) {
   switch (true) {
     case typeof value2 === "function":
-      mapValue(data, comment, value2());
-      return;
+      setReactiveNode(data, comment, computed(value2));
+      break;
     case isReactive(value2):
       setReactiveNode(data, comment, value2);
       break;
@@ -44,7 +44,7 @@ function replaceComment(data, comment, value2) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const nodes = createNodes(value2);
   if (item != null) {
-    item.fragment = isFragment(value2) ? value2 : undefined;
+    item.fragments = isFragment(value2) ? [value2] : undefined;
     item.nodes = nodes;
   }
   comment.replaceWith(...nodes);

package/dist/node/value.mjs

@@ -2,10 +2,68 @@
 import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect} from "@oscarpalmer/sentinel";
-import {isFragment, isProperNode} from "../helpers";
+import {compareArrays, isFragment, isProperNode} from "../helpers";
 import {createNodes, replaceNodes} from "../helpers/dom";
-function setNodes(nodes, comment, text, value) {
-  const next = createNodes(value);
+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, value) {
+  if (value.length === 0) {
+    return {
+      nodes: setText(fragments, nodes, comment, text, value)
+    };
+  }
+  let templates = value.filter((item) => isFragment(item) && item.identifier != null);
+  const identifiers = templates.map((fragment) => fragment.identifier);
+  const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
+  if (new Set(identifiers).size !== templates.length) {
+    templates = [];
+  }
+  const noTemplates = templates.length === 0;
+  if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) {
+    return {
+      fragments: noTemplates ? undefined : templates,
+      nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
+    };
+  }
+  const next = templates.map((template) => fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
+  const comparison = compareArrays(fragments ?? [], templates);
+  if (comparison !== "removed") {
+    let position = nodes[0];
+    const before = comparison === "added" && !oldIdentifiers.includes(templates[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);
@@ -15,42 +73,50 @@ function setNodes(nodes, comment, text, value) {
   } else {
     replaceNodes(nodes, next);
   }
+  removeFragments(fragments);
   return next;
 }
 function setReactiveNode(data, comment, reactive) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const text = new Text;
+  let fragments;
   let nodes;
   effect(() => {
     const value = reactive.get();
-    const valueIsFragment = isFragment(value);
-    if (valueIsFragment || isProperNode(value)) {
-      nodes = setNodes(nodes, comment, text, value);
+    if (Array.isArray(value)) {
+      const result = setArray(fragments, nodes, comment, text, value);
+      fragments = typeof result === "boolean" ? undefined : result?.fragments;
+      nodes = typeof result === "boolean" ? result ? [text] : undefined : result?.nodes;
     } else {
-      nodes = setText(nodes, comment, text, value) ? [text] : undefined;
+      const valueIsFragment = isFragment(value);
+      fragments = valueIsFragment ? [value] : undefined;
+      if (valueIsFragment || isProperNode(value)) {
+        nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
+      } else {
+        nodes = setText(fragments, nodes, comment, text, value);
+      }
     }
     if (item != null) {
-      item.fragment = valueIsFragment ? value : undefined;
+      item.fragments = fragments;
       item.nodes = [...nodes ?? [comment]];
     }
   });
 }
-function setText(nodes, comment, text, value) {
+function setText(fragments, nodes, comment, text, value) {
   const isNullable = isNullableOrWhitespace(value);
   text.textContent = isNullable ? "" : getString(value);
+  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;
 }
 export {
   setReactiveNode

package/package.json

@@ -10,8 +10,8 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
-		"@types/bun": "^1.1.6",
-		"bun": "^1.1.24",
+		"@types/bun": "^1.1.8",
+		"bun": "^1.1.27",
 		"dts-bundle-generator": "^9.5.1",
 		"typescript": "^5.5.4"
 	},
@@ -47,5 +47,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.9.0"
+	"version": "0.10.0"
 }

package/src/fragment.ts

@@ -2,6 +2,7 @@ import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
 import type {FragmentData, ProperNode} from './models';
 import {mapNodes} from './node';
+import {removeNodes} from './helpers/dom';
 
 export class Fragment {
 	private readonly $fragment = true;
@@ -26,7 +27,7 @@ export class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): Node[] {
+	get(): ProperNode[] {
 		if (this.data.items.length === 0) {
 			const parsed = parse(this.data);
 
@@ -44,16 +45,12 @@ export class Fragment {
 
 			mapNodes(
 				this.data,
-				this.data.items.flatMap(
-					item => item.fragment?.get() ?? item.nodes,
-				) as ProperNode[],
+				this.data.items.flatMap(item => item.fragment?.get() ?? item.nodes),
 			);
 		}
 
 		return [
-			...(this.data.items.flatMap(
-				item => item.fragment?.get() ?? item.nodes,
-			) as ProperNode[]),
+			...this.data.items.flatMap(item => item.fragment?.get() ?? item.nodes),
 		];
 	}
 
@@ -64,13 +61,11 @@ export class Fragment {
 		const {length} = this.data.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const item = this.data.items[index];
+			const {fragment, nodes} = this.data.items[index];
 
-			item.fragment?.remove();
+			fragment?.remove();
 
-			for (const node of item.nodes) {
-				node.remove();
-			}
+			removeNodes(nodes);
 		}
 
 		this.data.items.splice(0, length);

package/src/helpers/dom.ts

@@ -1,6 +1,7 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import type {ProperNode} from '../models';
-import {isFragment, isProperNode} from './index';
+import {isFragment, isProperElement, isProperNode} from './index';
+import {removeEvents} from '../node/event';
 
 export function createNodes(value: unknown): ProperNode[] {
 	if (isFragment(value)) {
@@ -14,16 +15,40 @@ export function createNodes(value: unknown): ProperNode[] {
 	return [new Text(getString(value))];
 }
 
+export function removeNodes(nodes: ProperNode[]): void {
+	sanitiseNodes(nodes);
+
+	const {length} = nodes;
+
+	for (let index = 0; index < length; index += 1) {
+		nodes[index].remove();
+	}
+}
+
 export function replaceNodes(from: ProperNode[], to: ProperNode[]): void {
 	const {length} = from;
 
 	for (let index = 0; index < length; index += 1) {
-		const node = from[index];
-
 		if (index === 0) {
-			node.replaceWith(...to);
+			from[index].replaceWith(...to);
 		} else {
-			node.remove();
+			from[index].remove();
+		}
+	}
+}
+
+function sanitiseNodes(nodes: ProperNode[]): void {
+	const {length} = nodes;
+
+	for (let index = 0; index < length; index += 1) {
+		const node = nodes[index];
+
+		if (isProperElement(node)) {
+			removeEvents(node);
+		}
+
+		if (node.hasChildNodes()) {
+			sanitiseNodes([...node.childNodes] as ProperNode[]);
 		}
 	}
 }

package/src/node/attribute/index.ts

@@ -1,4 +1,5 @@
-import {isReactive} from '@oscarpalmer/sentinel';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {computed, isReactive} from '@oscarpalmer/sentinel';
 import type {FragmentData, ProperElement} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
@@ -11,28 +12,35 @@ function getValue(data: FragmentData, original: string): unknown {
 	return matches == null ? original : data.values[+matches[1]];
 }
 
-export function mapAttributes(data: FragmentData, element: ProperElement): void {
-		const attributes = [...element.attributes];
-		const {length} = attributes;
-
-		for (let index = 0; index < length; index += 1) {
-			const {name, value} = attributes[index];
-
-			const actual = getValue(data, value);
-
-			if (name.startsWith('@')) {
-				mapEvent(element, name, actual);
-			} else if (name.includes('.') || isReactive(actual)) {
-				mapValue(element, name, actual);
-			}
+export function mapAttributes(
+	data: FragmentData,
+	element: ProperElement,
+): void {
+	const attributes = [...element.attributes];
+	const {length} = attributes;
+
+	for (let index = 0; index < length; index += 1) {
+		const {name, value} = attributes[index];
+
+		const actual = getValue(data, value);
+
+		if (name.startsWith('@')) {
+			mapEvent(element, name, actual);
+		} else if (
+			name.includes('.') ||
+			typeof value === 'function' ||
+			isReactive(actual)
+		) {
+			mapValue(element, name, actual);
 		}
 	}
+}
 
 function mapValue(element: ProperElement, name: string, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			mapValue(element, name, value());
-			return;
+			setAttribute(element, name, computed(value as GenericCallback));
+			break;
 
 		default:
 			setAttribute(element, name, value);

package/src/node/attribute/value.ts

@@ -7,8 +7,9 @@ import {
 } from '@oscarpalmer/toretto/attribute';
 import type {ProperElement} from '../../models';
 
-const classPattern = /^class\./;
-const stylePattern = /^style\./;
+const classExpression = /^class\./;
+const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+const stylePrefixExpression = /^style\./;
 
 export function setAttribute(
 	element: ProperElement,
@@ -18,11 +19,11 @@ export function setAttribute(
 	element.removeAttribute(name);
 
 	switch (true) {
-		case classPattern.test(name):
+		case classExpression.test(name):
 			setClasses(element, name, value);
 			return;
 
-		case stylePattern.test(name):
+		case stylePrefixExpression.test(name):
 			setStyle(element, name, value);
 			return;
 
@@ -38,7 +39,7 @@ function setClasses(
 	value: unknown,
 ): void {
 	function update(value: unknown): void {
-		if (/^(|true)$/.test(getString(value))) {
+		if (value === true) {
 			element.classList.add(...classes);
 		} else {
 			element.classList.remove(...classes);
@@ -68,18 +69,16 @@ function setStyle(element: ProperElement, name: string, value: unknown): void {
 		}
 	}
 
-	const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
+	const [, property, unit] = styleFullExpression.exec(name) ?? [];
 
-	if (property == null) {
-		return;
-	}
-
-	if (isReactive(value)) {
-		effect(() => {
-			update(value.get());
-		});
-	} else {
-		update(value);
+	if (property != null) {
+		if (isReactive(value)) {
+			effect(() => {
+				update(value.get());
+			});
+		} else {
+			update(value);
+		}
 	}
 }
 
@@ -111,9 +110,7 @@ function updateProperty(
 	name: string,
 	value: unknown,
 ): void {
-	(element as unknown as PlainObject)[name] = /^(|true)$/.test(
-		getString(value),
-	);
+	(element as unknown as PlainObject)[name] = value === true;
 }
 
 function updateSelected(

package/src/node/event.ts

@@ -1,5 +1,21 @@
 import type {ProperElement} from '../models';
 
+const controllers = new WeakMap<ProperElement, AbortController>();
+
+const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
+function getController(element: ProperElement): AbortController {
+	let controller = controllers.get(element);
+
+	if (controller == null) {
+		controller = new AbortController();
+
+		controllers.set(element, controller);
+	}
+
+	return controller;
+}
+
 function getOptions(options: string): AddEventListenerOptions {
 	const parts = options.split(':');
 
@@ -17,13 +33,19 @@ export function mapEvent(
 ): void {
 	element.removeAttribute(name);
 
-	const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+	const [, type, options] = eventNamePattern.exec(name) ?? [];
 
 	if (typeof value === 'function' && type != null) {
-		element.addEventListener(
-			type,
-			value as EventListener,
-			getOptions(options ?? ''),
-		);
+		element.addEventListener(type, value as EventListener, {
+			...getOptions(options ?? ''),
+			signal: getController(element).signal,
+		});
+	}
+}
+
+export function removeEvents(element: ProperElement): void {
+	if (controllers.has(element)) {
+		controllers.get(element)?.abort();
+		controllers.delete(element);
 	}
 }

package/src/node/index.ts

@@ -1,4 +1,5 @@
-import {isReactive} from '@oscarpalmer/sentinel';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {computed, isReactive} from '@oscarpalmer/sentinel';
 import {isFragment, isProperElement} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData, ProperNode} from '../models';
@@ -41,8 +42,8 @@ export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			mapValue(data, comment, value());
-			return;
+			setReactiveNode(data, comment, computed(value as GenericCallback));
+			break;
 
 		case isReactive(value):
 			setReactiveNode(data, comment, value);

package/types/fragment.d.ts

@@ -1,3 +1,4 @@
+import type { ProperNode } from './models';
 export declare class Fragment {
     private readonly $fragment;
     private readonly data;
@@ -9,7 +10,7 @@ export declare class Fragment {
     /**
      * Gets a list of the fragment's nodes
      */
-    get(): Node[];
+    get(): ProperNode[];
     /**
      * Removes the fragment from the DOM
      */

package/types/helpers/dom.d.ts

@@ -1,3 +1,4 @@
 import type { ProperNode } from '../models';
 export declare function createNodes(value: unknown): ProperNode[];
+export declare function removeNodes(nodes: ProperNode[]): void;
 export declare function replaceNodes(from: ProperNode[], to: ProperNode[]): void;

package/types/index.d.cts

@@ -1,5 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
+export type ProperNode = CharacterData | Element;
 export declare class Fragment {
 	private readonly $fragment;
 	private readonly data;
@@ -11,7 +12,7 @@ export declare class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): Node[];
+	get(): ProperNode[];
 	/**
 	 * Removes the fragment from the DOM
 	 */

package/types/node/event.d.ts

@@ -1,2 +1,3 @@
 import type { ProperElement } from '../models';
 export declare function mapEvent(element: ProperElement, name: string, value: unknown): void;
+export declare function removeEvents(element: ProperElement): void;