@oscarpalmer/abydon 0.10.0 → 0.12.0

package/dist/index.mjs

@@ -1,4 +1,5 @@
 // src/index.ts
+import"@oscarpalmer/sentinel";
 import {html} from "./html";
 export {
   html

package/dist/node/attribute/index.mjs

@@ -15,20 +15,25 @@ function mapAttributes(data, element) {
     if (name.startsWith("@")) {
       mapEvent(element, name, actual);
     } else if (name.includes(".") || typeof value2 === "function" || isReactive(actual)) {
-      mapValue(element, name, actual);
+      mapValue(data, element, name, actual);
     }
   }
 }
-function mapValue(element, name, value2) {
+function mapValue(data, element, name, value2) {
   switch (true) {
     case typeof value2 === "function":
-      setAttribute(element, name, computed(value2));
+      setComputedAttribute(data, element, name, value2);
       break;
     default:
-      setAttribute(element, name, value2);
+      setAttribute(data, element, name, value2);
       break;
   }
 }
+function setComputedAttribute(data, element, name, callback) {
+  const value2 = computed(callback);
+  data.sentinel.values.add(value2);
+  setAttribute(data, element, name, value2);
+}
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 export {
   mapAttributes

package/dist/node/attribute/value.mjs

@@ -5,21 +5,21 @@ import {
 isBooleanAttribute,
 setAttribute as setAttr
 } from "@oscarpalmer/toretto/attribute";
-function setAttribute(element, name, value) {
+function setAttribute(data, element, name, value) {
   element.removeAttribute(name);
   switch (true) {
     case classExpression.test(name):
-      setClasses(element, name, value);
+      setClasses(data, element, name, value);
       return;
     case stylePrefixExpression.test(name):
-      setStyle(element, name, value);
+      setStyle(data, element, name, value);
       return;
     default:
-      setValue(element, name, value);
+      setValue(data, element, name, value);
       break;
   }
 }
-function setClasses(element, name, value) {
+function setClasses(data, element, name, value) {
   function update(value2) {
     if (value2 === true) {
       element.classList.add(...classes);
@@ -29,14 +29,14 @@ function setClasses(element, name, value) {
   }
   const classes = name.slice(6).split(".");
   if (isReactive(value)) {
-    effect(() => {
+    data.sentinel.effects.add(effect(() => {
       update(value.get());
-    });
+    }));
   } else {
     update(value);
   }
 }
-function setStyle(element, name, value) {
+function setStyle(data, element, name, value) {
   function update(value2) {
     if (value2 == null || value2 === false || value2 === true && unit == null) {
       element.style.removeProperty(property);
@@ -47,20 +47,20 @@ function setStyle(element, name, value) {
   const [, property, unit] = styleFullExpression.exec(name) ?? [];
   if (property != null) {
     if (isReactive(value)) {
-      effect(() => {
+      data.sentinel.effects.add(effect(() => {
         update(value.get());
-      });
+      }));
     } else {
       update(value);
     }
   }
 }
-function setValue(element, name, value) {
+function setValue(data, element, name, value) {
   const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttr;
   if (isReactive(value)) {
-    effect(() => {
+    data.sentinel.effects.add(effect(() => {
       callback(element, name, value.get());
-    });
+    }));
   } else {
     callback(element, name, value);
   }

package/dist/node/event.mjs

@@ -26,13 +26,12 @@ function mapEvent(element, name, value) {
   }
 }
 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";
 export {
   removeEvents,
   mapEvent

package/dist/node/index.mjs

@@ -1,9 +1,9 @@
 // src/node/index.ts
 import {computed, isReactive} from "@oscarpalmer/sentinel";
-import {isFragment, isProperElement} from "../helpers";
+import {isFragment, isHTMLOrSVGElement} from "../helpers";
 import {createNodes} from "../helpers/dom";
 import {mapAttributes} from "./attribute";
-import {setReactiveNode} from "./value";
+import {setReactiveValue} from "./value";
 function mapNode(data, comment) {
   const matches = commentExpression.exec(comment.textContent ?? "");
   const value2 = matches == null ? null : data.values[+matches[1]];
@@ -19,7 +19,7 @@ function mapNodes(data, nodes) {
       mapNode(data, node);
       continue;
     }
-    if (isProperElement(node)) {
+    if (isHTMLOrSVGElement(node)) {
       mapAttributes(data, node);
     }
     if (node.hasChildNodes()) {
@@ -30,10 +30,10 @@ function mapNodes(data, nodes) {
 function mapValue(data, comment, value2) {
   switch (true) {
     case typeof value2 === "function":
-      setReactiveNode(data, comment, computed(value2));
+      setComputedValue(data, comment, value2);
       break;
     case isReactive(value2):
-      setReactiveNode(data, comment, value2);
+      setReactiveValue(data, comment, value2);
       break;
     default:
       replaceComment(data, comment, value2);
@@ -49,6 +49,11 @@ function replaceComment(data, comment, value2) {
   }
   comment.replaceWith(...nodes);
 }
+function setComputedValue(data, comment, callback) {
+  const value2 = computed(callback);
+  data.sentinel.values.add(value2);
+  setReactiveValue(data, comment, value2);
+}
 var commentExpression = /^abydon\.(\d+)$/;
 export {
   mapNodes

package/dist/node/value.mjs

@@ -2,7 +2,7 @@
 import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
 import {getString} from "@oscarpalmer/atoms/string";
 import {effect} from "@oscarpalmer/sentinel";
-import {compareArrays, isFragment, isProperNode} from "../helpers";
+import {compareArrays, isChildNode, isFragment} from "../helpers";
 import {createNodes, replaceNodes} from "../helpers/dom";
 function removeFragments(fragments) {
   if (fragments != null) {
@@ -76,12 +76,12 @@ function setNodes(fragments, nodes, comment, text, next) {
   removeFragments(fragments);
   return next;
 }
-function setReactiveNode(data, comment, reactive) {
+function setReactiveValue(data, comment, reactive) {
   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 value = reactive.get();
     if (Array.isArray(value)) {
       const result = setArray(fragments, nodes, comment, text, value);
@@ -90,7 +90,7 @@ function setReactiveNode(data, comment, reactive) {
     } else {
       const valueIsFragment = isFragment(value);
       fragments = valueIsFragment ? [value] : undefined;
-      if (valueIsFragment || isProperNode(value)) {
+      if (valueIsFragment || isChildNode(value)) {
         nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
       } else {
         nodes = setText(fragments, nodes, comment, text, value);
@@ -100,7 +100,7 @@ function setReactiveNode(data, comment, reactive) {
       item.fragments = fragments;
       item.nodes = [...nodes ?? [comment]];
     }
-  });
+  }));
 }
 function setText(fragments, nodes, comment, text, value) {
   const isNullable = isNullableOrWhitespace(value);
@@ -119,5 +119,5 @@ function setText(fragments, nodes, comment, text, value) {
   return result ? [text] : undefined;
 }
 export {
-  setReactiveNode
+  setReactiveValue
 };

package/package.json

@@ -47,5 +47,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.10.0"
+	"version": "0.12.0"
 }

package/src/fragment.ts

@@ -1,6 +1,7 @@
+import type {Key} from '@oscarpalmer/atoms/models';
 import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
-import type {FragmentData, ProperNode} from './models';
+import type {FragmentData} from './models';
 import {mapNodes} from './node';
 import {removeNodes} from './helpers/dom';
 
@@ -8,11 +9,19 @@ export class Fragment {
 	private readonly $fragment = true;
 	private readonly data: FragmentData;
 
+	get identifier(): Key | undefined {
+		return this.data.identifier;
+	}
+
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
 		this.data = {
 			expressions,
 			strings,
 			items: [],
+			sentinel: {
+				effects: new Set(),
+				values: new Set(),
+			},
 			values: [],
 		};
 	}
@@ -27,7 +36,7 @@ export class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): ProperNode[] {
+	get(): ChildNode[] {
 		if (this.data.items.length === 0) {
 			const parsed = parse(this.data);
 
@@ -39,35 +48,68 @@ export class Fragment {
 				0,
 				this.data.items.length,
 				...templated.map(node => ({
-					nodes: [node as ProperNode],
+					nodes: [node as ChildNode],
 				})),
 			);
 
 			mapNodes(
 				this.data,
-				this.data.items.flatMap(item => item.fragment?.get() ?? item.nodes),
+				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: Key): Fragment {
+		this.data.identifier = identifier;
+
+		return this;
+	}
+
 	/**
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		const {length} = this.data.items;
+		removeFragment(this.data);
+	}
+}
 
-		for (let index = 0; index < length; index += 1) {
-			const {fragment, nodes} = this.data.items[index];
+function removeFragment(data: FragmentData): void {
+	removeSentinels(data);
 
-			fragment?.remove();
+	const {length} = data.items;
 
-			removeNodes(nodes);
+	for (let index = 0; index < length; index += 1) {
+		const {fragments, nodes} = data.items[index];
+		const {length} = fragments ?? [];
+
+		for (let index = 0; index < length; index += 1) {
+			fragments?.[index]?.remove();
 		}
 
-		this.data.items.splice(0, length);
+		removeNodes(nodes);
+	}
+
+	data.items.splice(0, length);
+}
+
+function removeSentinels(data: FragmentData): void {
+	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();
 }

package/src/helpers/dom.ts

@@ -1,21 +1,20 @@
 import {getString} from '@oscarpalmer/atoms/string';
-import type {ProperNode} from '../models';
-import {isFragment, isProperElement, isProperNode} from './index';
+import {isChildNode, isFragment, isHTMLOrSVGElement} from './index';
 import {removeEvents} from '../node/event';
 
-export function createNodes(value: unknown): ProperNode[] {
+export function createNodes(value: unknown): ChildNode[] {
 	if (isFragment(value)) {
-		return value.get() as ProperNode[];
+		return value.get() as ChildNode[];
 	}
 
-	if (isProperNode(value)) {
+	if (isChildNode(value)) {
 		return [value];
 	}
 
 	return [new Text(getString(value))];
 }
 
-export function removeNodes(nodes: ProperNode[]): void {
+export function removeNodes(nodes: ChildNode[]): void {
 	sanitiseNodes(nodes);
 
 	const {length} = nodes;
@@ -25,30 +24,28 @@ export function removeNodes(nodes: ProperNode[]): void {
 	}
 }
 
-export function replaceNodes(from: ProperNode[], to: ProperNode[]): void {
+export function replaceNodes(from: ChildNode[], to: ChildNode[]): void {
+	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 sanitiseNodes(nodes: ProperNode[]): void {
+function sanitiseNodes(nodes: ChildNode[]): void {
 	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()) {
-			sanitiseNodes([...node.childNodes] as ProperNode[]);
+			sanitiseNodes([...node.childNodes] as ChildNode[]);
 		}
 	}
 }

package/src/helpers/index.ts

@@ -1,5 +1,28 @@
 import type {Fragment} from '../fragment';
-import type {ProperElement, ProperNode} from '../models';
+import type {HTMLOrSVGElement} from '../models';
+
+export function compareArrays(
+	first: unknown[],
+	second: unknown[],
+): 'added' | 'dissimilar' | 'removed' {
+	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';
+}
+
+export function isChildNode(value: unknown): value is ChildNode {
+	return value instanceof CharacterData || value instanceof Element;
+}
 
 export function isFragment(value: unknown): value is Fragment {
 	return (
@@ -10,10 +33,6 @@ export function isFragment(value: unknown): value is Fragment {
 	);
 }
 
-export function isProperElement(value: unknown): value is ProperElement {
+export function isHTMLOrSVGElement(value: unknown): value is HTMLOrSVGElement {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
-
-export function isProperNode(value: unknown): value is ProperNode {
-	return value instanceof CharacterData || value instanceof Element;
-}

package/src/index.ts

@@ -1,2 +1,3 @@
+import '@oscarpalmer/sentinel';
 export type {Fragment} from './fragment';
 export {html} from './html';

package/src/models.ts

@@ -1,17 +1,24 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+import type {Effect, Reactive} from '@oscarpalmer/sentinel';
 import type {Fragment} from './fragment';
 
 export type FragmentData = {
 	expressions: unknown[];
+	identifier?: Key;
 	items: FragmentItem[];
+	sentinel: FragmentDataSentinel;
 	strings: TemplateStringsArray;
 	values: unknown[];
 };
 
-export type FragmentItem = {
-	fragment?: Fragment;
-	nodes: ProperNode[];
+type FragmentDataSentinel = {
+	effects: Set<Effect>;
+	values: Set<Reactive>;
 };
 
-export type ProperElement = HTMLElement | SVGElement;
+export type FragmentItem = {
+	fragments?: Fragment[];
+	nodes: ChildNode[];
+};
 
-export type ProperNode = CharacterData | Element;
+export type HTMLOrSVGElement = HTMLElement | SVGElement;

package/src/node/attribute/index.ts

@@ -1,6 +1,6 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {computed, isReactive} from '@oscarpalmer/sentinel';
-import type {FragmentData, ProperElement} from '../../models';
+import type {FragmentData, HTMLOrSVGElement} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
@@ -14,7 +14,7 @@ function getValue(data: FragmentData, original: string): unknown {
 
 export function mapAttributes(
 	data: FragmentData,
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 ): void {
 	const attributes = [...element.attributes];
 	const {length} = attributes;
@@ -31,19 +31,37 @@ export function mapAttributes(
 			typeof value === 'function' ||
 			isReactive(actual)
 		) {
-			mapValue(element, name, actual);
+			mapValue(data, element, name, actual);
 		}
 	}
 }
 
-function mapValue(element: ProperElement, name: string, value: unknown): void {
+function mapValue(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	switch (true) {
 		case typeof value === 'function':
-			setAttribute(element, name, computed(value as GenericCallback));
+			setComputedAttribute(data, element, name, value as GenericCallback);
 			break;
 
 		default:
-			setAttribute(element, name, value);
+			setAttribute(data, element, name, value);
 			break;
 	}
 }
+
+function setComputedAttribute(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	callback: GenericCallback,
+): void {
+	const value = computed(callback);
+
+	data.sentinel.values.add(value);
+
+	setAttribute(data, element, name, value);
+}

package/src/node/attribute/value.ts

@@ -5,14 +5,15 @@ import {
 	isBooleanAttribute,
 	setAttribute as setAttr,
 } from '@oscarpalmer/toretto/attribute';
-import type {ProperElement} from '../../models';
+import type {FragmentData, HTMLOrSVGElement} from '../../models';
 
 const classExpression = /^class\./;
 const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
 const stylePrefixExpression = /^style\./;
 
 export function setAttribute(
-	element: ProperElement,
+	data: FragmentData,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -20,21 +21,22 @@ export function setAttribute(
 
 	switch (true) {
 		case classExpression.test(name):
-			setClasses(element, name, value);
+			setClasses(data, element, name, value);
 			return;
 
 		case stylePrefixExpression.test(name):
-			setStyle(element, name, value);
+			setStyle(data, element, name, value);
 			return;
 
 		default:
-			setValue(element, name, value);
+			setValue(data, element, name, value);
 			break;
 	}
 }
 
 function setClasses(
-	element: ProperElement,
+	data: FragmentData,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -49,15 +51,22 @@ function setClasses(
 	const classes = name.slice(6).split('.');
 
 	if (isReactive(value)) {
-		effect(() => {
-			update(value.get());
-		});
+		data.sentinel.effects.add(
+			effect(() => {
+				update(value.get());
+			}),
+		);
 	} else {
 		update(value);
 	}
 }
 
-function setStyle(element: ProperElement, name: string, value: unknown): void {
+function setStyle(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	function update(value: unknown): void {
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
@@ -73,16 +82,23 @@ function setStyle(element: ProperElement, name: string, value: unknown): void {
 
 	if (property != null) {
 		if (isReactive(value)) {
-			effect(() => {
-				update(value.get());
-			});
+			data.sentinel.effects.add(
+				effect(() => {
+					update(value.get());
+				}),
+			);
 		} else {
 			update(value);
 		}
 	}
 }
 
-function setValue(element: ProperElement, name: string, value: unknown): void {
+function setValue(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	const callback =
 		isBooleanAttribute(name) && name in element
 			? name === 'selected'
@@ -91,9 +107,11 @@ function setValue(element: ProperElement, name: string, value: unknown): void {
 			: setAttr;
 
 	if (isReactive(value)) {
-		effect(() => {
-			callback(element, name, value.get());
-		});
+		data.sentinel.effects.add(
+			effect(() => {
+				callback(element, name, value.get());
+			}),
+		);
 	} else {
 		callback(element, name, value);
 	}
@@ -106,7 +124,7 @@ function triggerSelectChange(select: HTMLSelectElement): void {
 }
 
 function updateProperty(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -114,7 +132,7 @@ function updateProperty(
 }
 
 function updateSelected(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {