@oscarpalmer/abydon 0.8.0 → 0.10.0

package/dist/node/attribute/index.mjs

@@ -1,27 +1,20 @@
 // 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) {
   const matches = commentExpression.exec(original ?? "");
   return matches == null ? original : data.values[+matches[1]];
 }
-function isBadAttribute(name, value2) {
-  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value2);
-}
 function mapAttributes(data, element) {
   const attributes = [...element.attributes];
   const { length } = attributes;
   for (let index = 0;index < length; index += 1) {
     const { name, value: value2 } = attributes[index];
-    if (isBadAttribute(name, value2)) {
-      element.removeAttribute(name);
-      continue;
-    }
     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);
     }
   }
@@ -29,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;
@@ -38,6 +31,5 @@ function mapValue(element, name, value2) {
 }
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 export {
-  mapAttributes,
-  isBadAttribute
+  mapAttributes
 };

package/dist/node/attribute/value.mjs

@@ -1,27 +1,30 @@
 // src/node/attribute/value.ts
-import {closest} from "@oscarpalmer/atoms/element";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect, isReactive} from "@oscarpalmer/sentinel";
-function setAttribute(element2, name, value) {
-  element2.removeAttribute(name);
+import {
+isBooleanAttribute,
+setAttribute as setAttr
+} from "@oscarpalmer/toretto/attribute";
+function setAttribute(element, name, value) {
+  element.removeAttribute(name);
   switch (true) {
-    case classPattern.test(name):
-      setClasses(element2, name, value);
+    case classExpression.test(name):
+      setClasses(element, name, value);
       return;
-    case stylePattern.test(name):
-      setStyle(element2, name, value);
+    case stylePrefixExpression.test(name):
+      setStyle(element, name, value);
       return;
     default:
-      setValue(element2, name, value);
+      setValue(element, name, value);
       break;
   }
 }
-function setClasses(element2, name, value) {
+function setClasses(element, name, value) {
   function update(value2) {
-    if (/^(|true)$/.test(getString(value2))) {
-      element2.classList.add(...classes);
+    if (value2 === true) {
+      element.classList.add(...classes);
     } else {
-      element2.classList.remove(...classes);
+      element.classList.remove(...classes);
     }
   }
   const classes = name.slice(6).split(".");
@@ -33,34 +36,33 @@ function setClasses(element2, name, value) {
     update(value);
   }
 }
-function setStyle(element2, name, value) {
+function setStyle(element, name, value) {
   function update(value2) {
     if (value2 == null || value2 === false || value2 === true && unit == null) {
-      element2.style.removeProperty(property);
+      element.style.removeProperty(property);
     } else {
-      element2.style.setProperty(property, value2 === true ? unit : getString(value2));
+      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(element2, name, value) {
-  const callback = booleanAttributes.has(name) && name in element2 ? name === "selected" ? updateSelected(element2) : updateProperty : updateAttribute;
+function setValue(element, name, value) {
+  const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttr;
   if (isReactive(value)) {
     effect(() => {
-      callback(element2, name, value.get());
+      callback(element, name, value.get());
     });
   } else {
-    callback(element2, name, value);
+    callback(element, name, value);
   }
 }
 function triggerSelectChange(select) {
@@ -68,39 +70,20 @@ function triggerSelectChange(select) {
     select.dispatchEvent(new Event("change", { bubbles: true }));
   }
 }
-function updateAttribute(element2, name, value) {
-  if (value == null) {
-    element2.removeAttribute(name);
-  } else {
-    element2.setAttribute(name, getString(value));
-  }
+function updateProperty(element, name, value) {
+  element[name] = value === true;
 }
-function updateProperty(element2, name, value) {
-  element2[name] = /^(|true)$/.test(getString(value));
-}
-function updateSelected(element2) {
-  const select = closest(element2, "select")[0];
+function updateSelected(element, name, value) {
+  const select = element.closest("select");
   const options = [...select?.options ?? []];
-  return (element3, name, value) => {
-    if (select != null && options.includes(element3)) {
-      triggerSelectChange(select);
-    }
-    updateProperty(element3, name, value);
-  };
+  if (select != null && options.includes(element)) {
+    triggerSelectChange(select);
+  }
+  updateProperty(element, name, value);
 }
-var booleanAttributes = new Set([
-  "checked",
-  "disabled",
-  "hidden",
-  "inert",
-  "multiple",
-  "open",
-  "readOnly",
-  "required",
-  "selected"
-]);
-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,6 +1,6 @@
 // src/node/index.ts
-import {isReactive} from "@oscarpalmer/sentinel";
-import {isFragmentElement} from "../helpers";
+import {computed, isReactive} from "@oscarpalmer/sentinel";
+import {isFragment, isProperElement} from "../helpers";
 import {createNodes} from "../helpers/dom";
 import {mapAttributes} from "./attribute";
 import {setReactiveNode} from "./value";
@@ -8,7 +8,7 @@ function mapNode(data, comment) {
   const matches = commentExpression.exec(comment.textContent ?? "");
   const value2 = matches == null ? null : data.values[+matches[1]];
   if (value2 != null) {
-    mapValue(comment, value2);
+    mapValue(data, comment, value2);
   }
 }
 function mapNodes(data, nodes) {
@@ -19,7 +19,7 @@ function mapNodes(data, nodes) {
       mapNode(data, node);
       continue;
     }
-    if (isFragmentElement(node)) {
+    if (isProperElement(node)) {
       mapAttributes(data, node);
     }
     if (node.hasChildNodes()) {
@@ -27,19 +27,28 @@ function mapNodes(data, nodes) {
     }
   }
 }
-function mapValue(comment, value2) {
+function mapValue(data, comment, value2) {
   switch (true) {
     case typeof value2 === "function":
-      mapValue(comment, value2());
-      return;
+      setReactiveNode(data, comment, computed(value2));
+      break;
     case isReactive(value2):
-      setReactiveNode(comment, value2);
+      setReactiveNode(data, comment, value2);
       break;
     default:
-      comment.replaceWith(...createNodes(value2));
+      replaceComment(data, comment, value2);
       break;
   }
 }
+function replaceComment(data, comment, value2) {
+  const item = data.items.find((item2) => item2.nodes.includes(comment));
+  const nodes = createNodes(value2);
+  if (item != null) {
+    item.fragments = isFragment(value2) ? [value2] : undefined;
+    item.nodes = nodes;
+  }
+  comment.replaceWith(...nodes);
+}
 var commentExpression = /^abydon\.(\d+)$/;
 export {
   mapNodes

package/dist/node/value.mjs

@@ -2,39 +2,122 @@
 import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect} from "@oscarpalmer/sentinel";
-import {isFragment, isFragmentNode} from "../helpers";
+import {compareArrays, isFragment, isProperNode} from "../helpers";
 import {createNodes, replaceNodes} from "../helpers/dom";
-function setReactiveNode(comment, reactive) {
+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);
+    } else if (text.parentNode != null) {
+      replaceNodes([text], next);
+    }
+  } 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();
-    if (isFragment(value) || isFragmentNode(value)) {
-      const next = createNodes(value);
-      if (nodes == null) {
-        if (comment.parentNode != null) {
-          replaceNodes([comment], next);
-        } else if (text.parentNode != null) {
-          replaceNodes([text], next);
-        }
+    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 {
+      const valueIsFragment = isFragment(value);
+      fragments = valueIsFragment ? [value] : undefined;
+      if (valueIsFragment || isProperNode(value)) {
+        nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
       } else {
-        replaceNodes(nodes, next);
+        nodes = setText(fragments, nodes, comment, text, value);
       }
-      nodes = next;
-      return;
     }
-    const isNullable = isNullableOrWhitespace(value);
-    text.textContent = getString(value);
-    if (nodes != null) {
-      replaceNodes(nodes, [isNullable ? comment : text]);
-    } else if (isNullable && comment.parentNode == null) {
-      text.replaceWith(comment);
-    } else if (!isNullable && text.parentNode == null) {
-      comment.replaceWith(text);
+    if (item != null) {
+      item.fragments = fragments;
+      item.nodes = [...nodes ?? [comment]];
     }
-    nodes = undefined;
   });
 }
+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]);
+    result = !isNullable;
+  } else if (isNullable && comment.parentNode == null) {
+    text.replaceWith(comment);
+  } else if (!isNullable && text.parentNode == null) {
+    comment.replaceWith(text);
+    result = true;
+  }
+  removeFragments(fragments);
+  return result ? [text] : undefined;
+}
 export {
   setReactiveNode
 };

package/package.json

@@ -4,13 +4,14 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.67.0",
-		"@oscarpalmer/sentinel": "^0.23.0"
+		"@oscarpalmer/atoms": "^0.71.0",
+		"@oscarpalmer/sentinel": "^0.23.0",
+		"@oscarpalmer/toretto": "0.12.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
-		"@types/bun": "^1.1.6",
-		"bun": "^1.1.21",
+		"@types/bun": "^1.1.8",
+		"bun": "^1.1.27",
 		"dts-bundle-generator": "^9.5.1",
 		"typescript": "^5.5.4"
 	},
@@ -46,5 +47,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.8.0"
+	"version": "0.10.0"
 }

package/src/fragment.ts

@@ -1,17 +1,18 @@
-import {createTemplate, getNodes} from './helpers/dom';
+import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
-import type {FragmentData} from './models';
+import type {FragmentData, ProperNode} from './models';
 import {mapNodes} from './node';
+import {removeNodes} from './helpers/dom';
 
 export class Fragment {
-	private declare readonly $fragment = true;
+	private readonly $fragment = true;
 	private readonly data: FragmentData;
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
 		this.data = {
 			expressions,
 			strings,
-			nodes: [],
+			items: [],
 			values: [],
 		};
 	}
@@ -26,31 +27,47 @@ export class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): Node[] {
-		if (this.data.nodes.length === 0) {
+	get(): ProperNode[] {
+		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));
+			const templated = html(parsed, {
+				sanitiseBooleanAttributes: false,
+			});
 
-			mapNodes(this.data, this.data.nodes);
+			this.data.items.splice(
+				0,
+				this.data.items.length,
+				...templated.map(node => ({
+					nodes: [node as ProperNode],
+				})),
+			);
+
+			mapNodes(
+				this.data,
+				this.data.items.flatMap(item => item.fragment?.get() ?? item.nodes),
+			);
 		}
 
-		return [...this.data.nodes];
+		return [
+			...this.data.items.flatMap(item => item.fragment?.get() ?? item.nodes),
+		];
 	}
 
 	/**
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		const {length} = this.data.nodes;
+		const {length} = this.data.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const node = this.data.nodes[index];
+			const {fragment, nodes} = this.data.items[index];
+
+			fragment?.remove();
 
-			node.parentNode?.removeChild(node);
+			removeNodes(nodes);
 		}
 
-		this.data.nodes.splice(0, length);
+		this.data.items.splice(0, length);
 	}
 }

package/src/helpers/dom.ts

@@ -1,57 +1,54 @@
 import {getString} from '@oscarpalmer/atoms/string';
-import type {FragmentNode} from '../models';
-import {isFragment, isFragmentNode} from './index';
+import type {ProperNode} from '../models';
+import {isFragment, isProperElement, isProperNode} from './index';
+import {removeEvents} from '../node/event';
 
-export function createNodes(value: unknown): FragmentNode[] {
-	if (isFragmentNode(value)) {
-		return [value];
+export function createNodes(value: unknown): ProperNode[] {
+	if (isFragment(value)) {
+		return value.get() as ProperNode[];
 	}
 
-	if (isFragment(value)) {
-		return value.get() as FragmentNode[];
+	if (isProperNode(value)) {
+		return [value];
 	}
 
 	return [new Text(getString(value))];
 }
 
-export function createTemplate(html: string): Node {
-	const template = document.createElement('template');
-
-	template.innerHTML = html;
-
-	const cloned = template.content.cloneNode(true);
+export function removeNodes(nodes: ProperNode[]): void {
+	sanitiseNodes(nodes);
 
-	const scripts = [
-		...(cloned instanceof Element ? cloned.querySelectorAll('script') : []),
-	];
-
-	const {length} = scripts;
+	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
-		scripts[index].remove();
+		nodes[index].remove();
 	}
-
-	cloned.normalize();
-
-	return cloned;
-}
-
-export function getNodes(node: Node): Node[] {
-	return /^documentfragment$/i.test(node.constructor.name)
-		? [...node.childNodes]
-		: [node];
 }
 
-export function replaceNodes(from: FragmentNode[], to: FragmentNode[]): void {
+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/helpers/index.ts

@@ -1,5 +1,5 @@
 import type {Fragment} from '../fragment';
-import type {FragmentElement, FragmentNode} from '../models';
+import type {ProperElement, ProperNode} from '../models';
 
 export function isFragment(value: unknown): value is Fragment {
 	return (
@@ -10,14 +10,10 @@ export function isFragment(value: unknown): value is Fragment {
 	);
 }
 
-export function isFragmentElement(value: unknown): value is FragmentElement {
+export function isProperElement(value: unknown): value is ProperElement {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
 
-export function isFragmentNode(value: unknown): value is FragmentNode {
-	return (
-		value instanceof Comment ||
-		value instanceof Element ||
-		value instanceof Text
-	);
+export function isProperNode(value: unknown): value is ProperNode {
+	return value instanceof CharacterData || value instanceof Element;
 }

package/src/models.ts

@@ -1,10 +1,17 @@
+import type {Fragment} from './fragment';
+
 export type FragmentData = {
 	expressions: unknown[];
-	nodes: Node[];
+	items: FragmentItem[];
 	strings: TemplateStringsArray;
 	values: unknown[];
 };
 
-export type FragmentElement = HTMLElement | SVGElement;
+export type FragmentItem = {
+	fragment?: Fragment;
+	nodes: ProperNode[];
+};
+
+export type ProperElement = HTMLElement | SVGElement;
 
-export type FragmentNode = Comment | Element | Text;
+export type ProperNode = CharacterData | Element;