@oscarpalmer/abydon 0.10.0 → 0.11.0

package/dist/index.js

@@ -433,6 +433,15 @@ class Computed extends ReactiveValue {
 var primitives = new Set(["boolean", "number", "string"]);
 
 // 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(value11) {
   return typeof value11 === "object" && value11 != null && "$fragment" in value11 && value11.$fragment === true;
 }
@@ -497,13 +506,10 @@ function removeNodes(nodes) {
   }
 }
 function replaceNodes(from, to) {
+  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 sanitiseNodes2(nodes) {
@@ -631,8 +637,66 @@ function mapValue(element, name, value12) {
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 
 // src/node/value.ts
-function setNodes(nodes, comment, text, value12) {
-  const next = createNodes(value12);
+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, value12) {
+  if (value12.length === 0) {
+    return {
+      nodes: setText(fragments, nodes, comment, text, value12)
+    };
+  }
+  let templates2 = value12.filter((item) => isFragment(item) && item.identifier != null);
+  const identifiers = templates2.map((fragment) => fragment.identifier);
+  const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
+  if (new Set(identifiers).size !== templates2.length) {
+    templates2 = [];
+  }
+  const noTemplates = templates2.length === 0;
+  if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) {
+    return {
+      fragments: noTemplates ? undefined : templates2,
+      nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value12.flatMap((item) => createNodes(item)) : templates2.flatMap((template4) => template4.get()))
+    };
+  }
+  const next = templates2.map((template4) => fragments?.find((fragment) => fragment.identifier === template4.identifier) ?? template4);
+  const comparison = compareArrays(fragments ?? [], templates2);
+  if (comparison !== "removed") {
+    let position = nodes[0];
+    const before = comparison === "added" && !oldIdentifiers.includes(templates2[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);
@@ -642,42 +706,50 @@ function setNodes(nodes, comment, text, value12) {
   } else {
     replaceNodes(nodes, next);
   }
+  removeFragments(fragments);
   return next;
 }
 function setReactiveNode(data, comment, reactive3) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const text = new Text;
+  let fragments;
   let nodes;
   effect(() => {
     const value12 = reactive3.get();
-    const valueIsFragment = isFragment(value12);
-    if (valueIsFragment || isProperNode(value12)) {
-      nodes = setNodes(nodes, comment, text, value12);
+    if (Array.isArray(value12)) {
+      const result = setArray(fragments, nodes, comment, text, value12);
+      fragments = typeof result === "boolean" ? undefined : result?.fragments;
+      nodes = typeof result === "boolean" ? result ? [text] : undefined : result?.nodes;
     } else {
-      nodes = setText(nodes, comment, text, value12) ? [text] : undefined;
+      const valueIsFragment = isFragment(value12);
+      fragments = valueIsFragment ? [value12] : undefined;
+      if (valueIsFragment || isProperNode(value12)) {
+        nodes = setNodes(fragments, nodes, comment, text, createNodes(value12));
+      } else {
+        nodes = setText(fragments, nodes, comment, text, value12);
+      }
     }
     if (item != null) {
-      item.fragment = valueIsFragment ? value12 : undefined;
+      item.fragments = fragments;
       item.nodes = [...nodes ?? [comment]];
     }
   });
 }
-function setText(nodes, comment, text, value12) {
+function setText(fragments, nodes, comment, text, value12) {
   const isNullable = isNullableOrWhitespace(value12);
   text.textContent = isNullable ? "" : getString(value12);
+  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;
 }
 
 // src/node/index.ts
@@ -721,7 +793,7 @@ function replaceComment(data, comment, value13) {
   const item = data.items.find((item2) => item2.nodes.includes(comment));
   const nodes = createNodes(value13);
   if (item != null) {
-    item.fragment = isFragment(value13) ? value13 : undefined;
+    item.fragments = isFragment(value13) ? [value13] : undefined;
     item.nodes = nodes;
   }
   comment.replaceWith(...nodes);
@@ -732,6 +804,9 @@ var commentExpression2 = /^abydon\.(\d+)$/;
 class Fragment {
   $fragment = true;
   data;
+  get identifier() {
+    return this.data.identifier;
+  }
   constructor(strings, expressions) {
     this.data = {
       expressions,
@@ -752,17 +827,24 @@ 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 { fragment, nodes } = this.data.items[index];
-      fragment?.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/package.json

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

package/src/fragment.ts

@@ -1,3 +1,4 @@
+import type {Key} from '@oscarpalmer/atoms/models';
 import {html} from '@oscarpalmer/toretto/html';
 import {parse} from './html';
 import type {FragmentData, ProperNode} from './models';
@@ -8,6 +9,10 @@ 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,
@@ -45,15 +50,27 @@ export class Fragment {
 
 			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
 	 */
@@ -61,9 +78,12 @@ export class Fragment {
 		const {length} = this.data.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const {fragment, nodes} = this.data.items[index];
+			const {fragments, nodes} = this.data.items[index];
+			const {length} = fragments ?? [];
 
-			fragment?.remove();
+			for (let index = 0; index < length; index += 1) {
+				fragments?.[index]?.remove();
+			}
 
 			removeNodes(nodes);
 		}

package/src/helpers/dom.ts

@@ -26,14 +26,12 @@ export function removeNodes(nodes: ProperNode[]): void {
 }
 
 export function replaceNodes(from: ProperNode[], to: ProperNode[]): 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();
 	}
 }
 

package/src/helpers/index.ts

@@ -1,6 +1,25 @@
 import type {Fragment} from '../fragment';
 import type {ProperElement, ProperNode} 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 isFragment(value: unknown): value is Fragment {
 	return (
 		typeof value === 'object' &&

package/src/models.ts

@@ -1,14 +1,16 @@
+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[];
 };
 

package/src/node/index.ts

@@ -64,7 +64,7 @@ function replaceComment(
 	const nodes = createNodes(value);
 
 	if (item != null) {
-		item.fragment = isFragment(value) ? value : undefined;
+		item.fragments = isFragment(value) ? [value] : undefined;
 		item.nodes = nodes;
 	}
 

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,7 +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
@@ -11,6 +13,7 @@ export declare class Fragment {
      * Gets a list of the fragment's nodes
      */
     get(): ProperNode[];
+    identify(identifier: Key): Fragment;
     /**
      * Removes the fragment from the DOM
      */

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,9 +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
@@ -13,6 +16,7 @@ export declare class Fragment {
 	 * Gets a list of the fragment's nodes
 	 */
 	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;