@oscarpalmer/abydon 0.9.0 → 0.11.0

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, isFragment, isProperNode} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
-import type {FragmentData, ProperNode} from '../models';
+import type {FragmentData, FragmentItem, ProperNode} from '../models';
+
+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: ProperNode[] | undefined,
+	comment: Comment,
+	text: Text,
+	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: ProperNode[] | undefined,
 	comment: Comment,
 	text: Text,
-	value: Fragment | ProperNode,
+	next: ProperNode[],
 ): ProperNode[] {
-	const next = createNodes(value);
-
 	if (nodes == null) {
 		if (comment.parentNode != null) {
 			replaceNodes([comment], next);
@@ -24,6 +139,8 @@ function setNodes(
 		replaceNodes(nodes, next);
 	}
 
+	removeFragments(fragments);
+
 	return next;
 }
 
@@ -35,53 +152,68 @@ export function setReactiveNode(
 	const item = data.items.find(item => item.nodes.includes(comment));
 	const text = new Text();
 
+	let fragments: Fragment[] | undefined;
 	let nodes: ProperNode[] | undefined;
 
 	effect(() => {
 		const value = reactive.get();
 
-		const valueIsFragment = isFragment(value);
+		if (Array.isArray(value)) {
+			const result = setArray(fragments, nodes, comment, text, value);
+
+			fragments = typeof result === 'boolean' ? undefined : result?.fragments;
 
-		if (valueIsFragment || isProperNode(value)) {
-			nodes = setNodes(nodes, comment, text, value);
+			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(
+	fragments: Fragment[] | undefined,
 	nodes: ProperNode[] | undefined,
 	comment: Comment,
 	text: Text,
 	value: unknown,
-): boolean {
+): ProperNode[] | 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,6 +1,9 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+import type { ProperNode } from './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
@@ -9,7 +12,8 @@ export declare class Fragment {
     /**
      * Gets a list of the fragment's nodes
      */
-    get(): Node[];
+    get(): ProperNode[];
+    identify(identifier: Key): Fragment;
     /**
      * 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/helpers/index.d.ts

@@ -1,5 +1,6 @@
 import type { Fragment } from '../fragment';
 import type { ProperElement, ProperNode } from '../models';
+export declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
 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;

package/types/index.d.cts

@@ -1,8 +1,12 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { Key } from '@oscarpalmer/atoms/models';
+
+export type ProperNode = CharacterData | Element;
 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
@@ -11,7 +15,8 @@ export declare class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): Node[];
+	get(): ProperNode[];
+	identify(identifier: Key): Fragment;
 	/**
 	 * Removes the fragment from the DOM
 	 */

package/types/models.d.ts

@@ -1,12 +1,14 @@
+import type { Key } from '@oscarpalmer/atoms/models';
 import type { Fragment } from './fragment';
 export type FragmentData = {
     expressions: unknown[];
+    identifier?: Key;
     items: FragmentItem[];
     strings: TemplateStringsArray;
     values: unknown[];
 };
 export type FragmentItem = {
-    fragment?: Fragment;
+    fragments?: Fragment[];
     nodes: ProperNode[];
 };
 export type ProperElement = HTMLElement | SVGElement;

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;