@oscarpalmer/abydon 0.10.0 → 0.12.0

package/src/node/event.ts

@@ -1,10 +1,12 @@
-import type {ProperElement} from '../models';
+import type {HTMLOrSVGElement} from '../models';
 
-const controllers = new WeakMap<ProperElement, AbortController>();
+const controllers = new WeakMap<HTMLOrSVGElement, AbortController>();
 
 const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
 
-function getController(element: ProperElement): AbortController {
+const reason = 'Event removed as element was removed from document by Abydon';
+
+function getController(element: HTMLOrSVGElement): AbortController {
 	let controller = controllers.get(element);
 
 	if (controller == null) {
@@ -27,7 +29,7 @@ function getOptions(options: string): AddEventListenerOptions {
 }
 
 export function mapEvent(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -43,9 +45,7 @@ export function mapEvent(
 	}
 }
 
-export function removeEvents(element: ProperElement): void {
-	if (controllers.has(element)) {
-		controllers.get(element)?.abort();
-		controllers.delete(element);
-	}
+export function removeEvents(element: HTMLOrSVGElement): void {
+	controllers.get(element)?.abort(reason);
+	controllers.delete(element);
 }

package/src/node/index.ts

@@ -1,10 +1,10 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {computed, isReactive} from '@oscarpalmer/sentinel';
-import {isFragment, isProperElement} from '../helpers';
+import {isFragment, isHTMLOrSVGElement} from '../helpers';
 import {createNodes} from '../helpers/dom';
-import type {FragmentData, ProperNode} from '../models';
+import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
-import {setReactiveNode} from './value';
+import {setReactiveValue} from './value';
 
 const commentExpression = /^abydon\.(\d+)$/;
 
@@ -17,7 +17,7 @@ function mapNode(data: FragmentData, comment: Comment): void {
 	}
 }
 
-export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
+export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -29,12 +29,12 @@ export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 			continue;
 		}
 
-		if (isProperElement(node)) {
+		if (isHTMLOrSVGElement(node)) {
 			mapAttributes(data, node);
 		}
 
 		if (node.hasChildNodes()) {
-			mapNodes(data, [...node.childNodes] as ProperNode[]);
+			mapNodes(data, [...node.childNodes] as ChildNode[]);
 		}
 	}
 }
@@ -42,11 +42,11 @@ export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			setReactiveNode(data, comment, computed(value as GenericCallback));
+			setComputedValue(data, comment, value as GenericCallback);
 			break;
 
 		case isReactive(value):
-			setReactiveNode(data, comment, value);
+			setReactiveValue(data, comment, value);
 			break;
 
 		default:
@@ -64,9 +64,21 @@ function replaceComment(
 	const nodes = createNodes(value);
 
 	if (item != null) {
-		item.fragment = isFragment(value) ? value : undefined;
+		item.fragments = isFragment(value) ? [value] : undefined;
 		item.nodes = nodes;
 	}
 
 	comment.replaceWith(...nodes);
 }
+
+function setComputedValue(
+	data: FragmentData,
+	comment: Comment,
+	callback: GenericCallback,
+): void {
+	const value = computed(callback);
+
+	data.sentinel.values.add(value);
+
+	setReactiveValue(data, comment, value);
+}

package/src/node/value.ts

@@ -1,19 +1,134 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import type {Key} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
 import {type Reactive, effect} from '@oscarpalmer/sentinel';
 import type {Fragment} from '../fragment';
-import {isFragment, isProperNode} from '../helpers';
+import {compareArrays, isChildNode, isFragment} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
-import type {FragmentData, ProperNode} from '../models';
+import type {FragmentData, FragmentItem} from '../models';
 
-function setNodes(
-	nodes: ProperNode[] | undefined,
+function removeFragments(fragments: Fragment[] | undefined): void {
+	if (fragments != null) {
+		const {length} = fragments;
+
+		for (let index = 0; index < length; index += 1) {
+			fragments[index].remove();
+		}
+	}
+}
+
+function setArray(
+	fragments: Fragment[] | undefined,
+	nodes: ChildNode[] | undefined,
 	comment: Comment,
 	text: Text,
-	value: Fragment | ProperNode,
-): ProperNode[] {
-	const next = createNodes(value);
+	value: unknown[],
+): Partial<FragmentItem> | boolean {
+	if (value.length === 0) {
+		return {
+			nodes: setText(fragments, nodes, comment, text, value),
+		};
+	}
+
+	let templates = value.filter(
+		item => isFragment(item) && item.identifier != null,
+	) as Fragment[];
+
+	const identifiers = templates.map(fragment => fragment.identifier) as Key[];
+	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} = items;
+
+		for (let index = 0; index < length; 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 as Key),
+		) ?? [];
+
+	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: Fragment[] | undefined,
+	nodes: ChildNode[] | undefined,
+	comment: Comment,
+	text: Text,
+	next: ChildNode[],
+): ChildNode[] {
 	if (nodes == null) {
 		if (comment.parentNode != null) {
 			replaceNodes([comment], next);
@@ -24,10 +139,12 @@ function setNodes(
 		replaceNodes(nodes, next);
 	}
 
+	removeFragments(fragments);
+
 	return next;
 }
 
-export function setReactiveNode(
+export function setReactiveValue(
 	data: FragmentData,
 	comment: Comment,
 	reactive: Reactive,
@@ -35,53 +152,70 @@ export function setReactiveNode(
 	const item = data.items.find(item => item.nodes.includes(comment));
 	const text = new Text();
 
-	let nodes: ProperNode[] | undefined;
-
-	effect(() => {
-		const value = reactive.get();
-
-		const valueIsFragment = isFragment(value);
-
-		if (valueIsFragment || isProperNode(value)) {
-			nodes = setNodes(nodes, comment, text, value);
-		} else {
-			nodes = setText(nodes, comment, text, value) ? [text] : undefined;
-		}
-
-		if (item != null) {
-			item.fragment = valueIsFragment ? value : undefined;
-			item.nodes = [...(nodes ?? [comment])];
-		}
-	});
+	let fragments: Fragment[] | undefined;
+	let nodes: ChildNode[] | undefined;
+
+	data.sentinel.effects.add(
+		effect(() => {
+			const value = reactive.get();
+
+			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 || isChildNode(value)) {
+					nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
+				} else {
+					nodes = setText(fragments, nodes, comment, text, value);
+				}
+			}
+
+			if (item != null) {
+				item.fragments = fragments;
+				item.nodes = [...(nodes ?? [comment])];
+			}
+		}),
+	);
 }
 
 function setText(
-	nodes: ProperNode[] | undefined,
+	fragments: Fragment[] | undefined,
+	nodes: ChildNode[] | undefined,
 	comment: Comment,
 	text: Text,
 	value: unknown,
-): boolean {
+): ChildNode[] | undefined {
 	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;
 }

package/types/fragment.d.ts

@@ -1,7 +1,8 @@
-import type { ProperNode } from './models';
+import type { Key } from '@oscarpalmer/atoms/models';
 export declare class Fragment {
     private readonly $fragment;
     private readonly data;
+    get identifier(): Key | undefined;
     constructor(strings: TemplateStringsArray, expressions: unknown[]);
     /**
      * Appends the fragment to the given element
@@ -10,7 +11,8 @@ export declare class Fragment {
     /**
      * Gets a list of the fragment's nodes
      */
-    get(): ProperNode[];
+    get(): ChildNode[];
+    identify(identifier: Key): Fragment;
     /**
      * Removes the fragment from the DOM
      */

package/types/helpers/dom.d.ts

@@ -1,4 +1,3 @@
-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;
+export declare function createNodes(value: unknown): ChildNode[];
+export declare function removeNodes(nodes: ChildNode[]): void;
+export declare function replaceNodes(from: ChildNode[], to: ChildNode[]): void;

package/types/helpers/index.d.ts

@@ -1,5 +1,6 @@
 import type { Fragment } from '../fragment';
-import type { ProperElement, ProperNode } from '../models';
+import type { HTMLOrSVGElement } from '../models';
+export declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
+export declare function isChildNode(value: unknown): value is ChildNode;
 export declare function isFragment(value: unknown): value is Fragment;
-export declare function isProperElement(value: unknown): value is ProperElement;
-export declare function isProperNode(value: unknown): value is ProperNode;
+export declare function isHTMLOrSVGElement(value: unknown): value is HTMLOrSVGElement;

package/types/index.d.cts

@@ -1,9 +1,11 @@
 // Generated by dts-bundle-generator v9.5.1
 
-export type ProperNode = CharacterData | Element;
+import { Key } from '@oscarpalmer/atoms/models';
+
 export declare class Fragment {
 	private readonly $fragment;
 	private readonly data;
+	get identifier(): Key | undefined;
 	constructor(strings: TemplateStringsArray, expressions: unknown[]);
 	/**
 	 * Appends the fragment to the given element
@@ -12,7 +14,8 @@ export declare class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): ProperNode[];
+	get(): ChildNode[];
+	identify(identifier: Key): Fragment;
 	/**
 	 * Removes the fragment from the DOM
 	 */

package/types/index.d.ts

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

package/types/models.d.ts

@@ -1,13 +1,21 @@
+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[];
 };
+type FragmentDataSentinel = {
+    effects: Set<Effect>;
+    values: Set<Reactive>;
+};
 export type FragmentItem = {
-    fragment?: Fragment;
-    nodes: ProperNode[];
+    fragments?: Fragment[];
+    nodes: ChildNode[];
 };
-export type ProperElement = HTMLElement | SVGElement;
-export type ProperNode = CharacterData | Element;
+export type HTMLOrSVGElement = HTMLElement | SVGElement;
+export {};

package/types/node/attribute/index.d.ts

@@ -1,2 +1,2 @@
-import type { FragmentData, ProperElement } from '../../models';
-export declare function mapAttributes(data: FragmentData, element: ProperElement): void;
+import type { FragmentData, HTMLOrSVGElement } from '../../models';
+export declare function mapAttributes(data: FragmentData, element: HTMLOrSVGElement): void;

package/types/node/attribute/value.d.ts

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

package/types/node/event.d.ts

@@ -1,3 +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;
+import type { HTMLOrSVGElement } from '../models';
+export declare function mapEvent(element: HTMLOrSVGElement, name: string, value: unknown): void;
+export declare function removeEvents(element: HTMLOrSVGElement): void;

package/types/node/index.d.ts

@@ -1,2 +1,2 @@
-import type { FragmentData, ProperNode } from '../models';
-export declare function mapNodes(data: FragmentData, nodes: ProperNode[]): void;
+import type { FragmentData } from '../models';
+export declare function mapNodes(data: FragmentData, nodes: ChildNode[]): void;

package/types/node/value.d.ts

@@ -1,3 +1,3 @@
 import { type Reactive } from '@oscarpalmer/sentinel';
 import type { FragmentData } from '../models';
-export declare function setReactiveNode(data: FragmentData, comment: Comment, reactive: Reactive): void;
+export declare function setReactiveValue(data: FragmentData, comment: Comment, reactive: Reactive): void;