@oscarpalmer/abydon 0.14.0 → 0.15.0

package/dist/fragments.js

@@ -0,0 +1,74 @@
+import { isFragment, isFragments } from "./helpers/index.js";
+import { array } from "@oscarpalmer/mora";
+import { getString } from "@oscarpalmer/atoms/string";
+var Fragments = class {
+	#state;
+	get items() {
+		return this.#state.mapped;
+	}
+	constructor(items, identify, fragment) {
+		Object.defineProperty(this, "$fragments", { value: true });
+		this.#state = {
+			fragment,
+			identify,
+			array: items,
+			instances: {},
+			mapped: array([]),
+			subscriber: void 0
+		};
+		states.set(this, this.#state);
+		initializeFragments(this.#state);
+	}
+};
+function handleFragments(item, remove) {
+	const state = isFragments(item) ? states.get(item) : item;
+	if (state != null) (remove ? removeFragments : initializeFragments)(state);
+}
+function handleItems(state, items) {
+	const keys = /* @__PURE__ */ new Set();
+	const mapped = [];
+	const { length } = items;
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const identifier = state.identify(item);
+		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		const key = getString(identifier);
+		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		let instance = state.instances[key];
+		if (instance == null) {
+			instance = state.fragment(item);
+			if (!isFragment(instance)) throw new Error("Fragment function must return a Fragment instance");
+		}
+		instance.identify(key);
+		state.instances[key] = instance;
+		keys.add(key);
+		mapped.push(instance);
+	}
+	state.mapped.set(mapped);
+	updateFragments(state, keys);
+}
+function initializeFragments(state) {
+	state.subscriber ??= state.array.subscribe((items) => {
+		handleItems(state, items);
+	});
+}
+function removeFragments(state) {
+	state.subscriber?.();
+	updateFragments(state);
+	state.subscriber = void 0;
+}
+function updateFragments(state, active) {
+	const next = {};
+	const previous = { ...state.instances };
+	const keys = Object.keys(previous);
+	const { length } = keys;
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (active?.has(key)) next[key] = previous[key];
+		else previous[key].remove();
+	}
+	state.instances = next;
+	active?.clear();
+}
+var states = /* @__PURE__ */ new WeakMap();
+export { Fragments, handleFragments, initializeFragments };

package/dist/helpers/dom.js

@@ -1,5 +1,5 @@
-import { removeEvents } from "../node/event.js";
 import { isFragment } from "./index.js";
+import { removeEvents } from "../node/event.js";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isChildNode, isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 function createNodes(value) {

package/dist/helpers/index.js

@@ -8,4 +8,7 @@ function compareArrays(first, second) {
 function isFragment(value) {
 	return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
 }
-export { compareArrays, isFragment };
+function isFragments(value) {
+	return typeof value === "object" && value != null && "$fragments" in value && value.$fragments === true;
+}
+export { compareArrays, isFragment, isFragments };

package/dist/index.js

@@ -1,7 +1,11 @@
+import { Fragments } from "./fragments.js";
 import { Fragment } from "./fragment.js";
 import "@oscarpalmer/mora";
 export * from "@oscarpalmer/mora";
+function fragments(array$1, identify, fragment) {
+	return new Fragments(array$1, identify, fragment);
+}
 function html(strings, ...values) {
 	return new Fragment(strings, values);
 }
-export { html };
+export { fragments, html };

package/dist/node/index.js

@@ -1,5 +1,6 @@
+import { isFragment, isFragments } from "../helpers/index.js";
+import { handleFragments } from "../fragments.js";
 import { EXPRESSION_COMMENT_CONTENT } from "../constants.js";
-import { isFragment } from "../helpers/index.js";
 import { createNodes } from "../helpers/dom.js";
 import { mapAttributes } from "./attribute/index.js";
 import { setReactiveValue } from "./value.js";
@@ -27,6 +28,10 @@ function mapValue(data, comment, value) {
 		case typeof value === "function":
 			setComputedValue(data, comment, value);
 			break;
+		case isFragments(value):
+			handleFragments(value, false);
+			setReactiveValue(data, comment, value.items);
+			break;
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
 			break;
@@ -36,7 +41,7 @@ function mapValue(data, comment, value) {
 	}
 }
 function replaceComment(data, comment, value) {
-	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
+	const item = data.items.find((item$1) => item$1.nodes?.includes(comment));
 	const nodes = createNodes(value);
 	if (item != null) {
 		item.fragments = isFragment(value) ? [value] : void 0;

package/dist/node/value.js

@@ -39,70 +39,75 @@ function removeFragments(fragments) {
 		for (let index = 0; index < length; index += 1) fragments[index].remove();
 	}
 }
-function setArray(state, comment, value) {
-	if (value.length === 0) return { nodes: setText(state, comment, value) };
-	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
+function replaceText(item, comment, isNullable) {
+	let to;
+	if (isNullable) to = [comment];
+	else to = item.text == null ? [] : [item.text];
+	replaceNodes(item.nodes ?? [], to);
+}
+function setArray(item, comment, value) {
+	if (value.length === 0) return { nodes: setText(item, comment, value) };
+	let templates = value.filter((item$1) => isFragment(item$1) && item$1.identifier != null);
 	const next = templates.map((fragment) => fragment.identifier);
-	const previous = state.fragments?.map((fragment) => fragment.identifier) ?? [];
+	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
 	if (new Set(next).size !== templates.length) templates = [];
 	const noTemplates = templates.length === 0;
-	if (noTemplates || state.nodes == null || previous.some((identifier) => identifier == null)) return {
+	if (noTemplates || item.nodes == null || previous.some((identifier) => identifier == null)) return {
 		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(state, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
+		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item$1) => createNodes(item$1)) : templates.flatMap((template) => template.get()))
 	};
 	return handleArray({
 		next,
 		previous
 	}, {
 		templates,
-		fragments: state.fragments ?? []
-	}, state.nodes);
+		fragments: item.fragments ?? []
+	}, item.nodes);
 }
-function setNodes(state, comment, next) {
-	if (state.nodes == null) {
+function setNodes(item, comment, next) {
+	if (item.nodes == null) {
 		if (comment.parentNode != null) replaceNodes([comment], next);
-		else if (state.text.parentNode != null) replaceNodes([state.text], next);
-	} else replaceNodes(state.nodes, next);
-	removeFragments(state.fragments);
+		else if (item.text?.parentNode != null) replaceNodes([item.text], next);
+	} else replaceNodes(item.nodes, next);
+	removeFragments(item.fragments);
 	return next;
 }
 function setReactiveValue(data, comment, reactive) {
-	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
-	const state = { text: new Text() };
+	let item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	item ??= {};
+	item.text = new Text();
 	data.mora.subscribers.add(reactive.subscribe((value) => {
-		if (Array.isArray(value)) setReactiveValueForArray(state, comment, value);
-		else setReactiveValueForSingle(state, comment, value);
-		if (item != null) {
-			item.fragments = state.fragments;
-			item.nodes = [...state.nodes ?? [comment]];
-		}
+		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
+		else setReactiveValueForSingle(item, comment, value);
+		item.nodes = [...item.nodes ?? [comment]];
 	}));
 }
-function setReactiveValueForArray(state, comment, value) {
-	const result = setArray(state, comment, value);
-	state.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
-	if (typeof result === "boolean") state.nodes = result ? [state.text] : void 0;
-	else state.nodes = result?.nodes;
+function setReactiveValueForArray(item, comment, value) {
+	const result = setArray(item, comment, value);
+	item.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+	if (typeof result === "boolean") if (result) item.nodes = item.text == null ? [] : [item.text];
+	else item.nodes = void 0;
+	else item.nodes = result?.nodes;
 }
-function setReactiveValueForSingle(state, comment, value) {
+function setReactiveValueForSingle(item, comment, value) {
 	const valueIsFragment = isFragment(value);
-	state.fragments = valueIsFragment ? [value] : void 0;
-	if (valueIsFragment || isChildNode(value)) state.nodes = setNodes(state, comment, createNodes(value));
-	else state.nodes = setText(state, comment, value);
+	item.fragments = valueIsFragment ? [value] : void 0;
+	if (valueIsFragment || isChildNode(value)) item.nodes = setNodes(item, comment, createNodes(value));
+	else item.nodes = setText(item, comment, value);
 }
-function setText(state, comment, value) {
+function setText(item, comment, value) {
 	const isNullable = isNullableOrWhitespace(value);
-	state.text.textContent = isNullable ? "" : getString(value);
+	if (item.text != null) item.text.textContent = isNullable ? "" : getString(value);
 	let result = false;
-	if (state.nodes != null) {
-		replaceNodes(state.nodes, [isNullable ? comment : state.text]);
+	if (item.nodes != null) {
+		replaceText(item, comment, isNullable);
 		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) state.text.replaceWith(comment);
-	else if (!isNullable && state.text.parentNode == null) {
-		comment.replaceWith(state.text);
+	} else if (isNullable && comment.parentNode == null) item.text?.replaceWith(comment);
+	else if (!isNullable && item?.text?.parentNode == null) {
+		if (item.text != null) comment.replaceWith(item.text);
 		result = true;
 	}
-	removeFragments(state.fragments);
-	return result ? [state.text] : void 0;
+	removeFragments(item.fragments);
+	if (result) return item.text == null ? [] : [item.text];
 }
 export { setReactiveValue };

package/dist/parse.js

@@ -10,9 +10,12 @@ function handleExpression(data, prefix, expression) {
 	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {
+	if (data.template != null) return data.template;
 	const { length } = data.strings;
-	let template = "";
-	for (let index = 0; index < length; index += 1) template += handleExpression(data, data.strings[index], data.expressions[index]);
-	return template;
+	data.template = "";
+	for (let index = 0; index < length; index += 1) data.template += handleExpression(data, data.strings[index], data.expressions[index]);
+	data.expressions = [];
+	data.strings = [];
+	return data.template;
 }
 export { parse };

package/package.json

@@ -6,7 +6,7 @@
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.114",
 		"@oscarpalmer/mora": "^0.23",
-		"@oscarpalmer/toretto": "^0.24"
+		"@oscarpalmer/toretto": "^0.25"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3",
@@ -58,5 +58,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.14.0"
+	"version": "0.15.0"
 }

package/src/fragment.ts

@@ -1,9 +1,11 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {html} from '@oscarpalmer/toretto/html';
+import {handleFragments} from './fragments';
+import {isFragments} from './helpers';
 import {removeNodes} from './helpers/dom';
 import type {FragmentConfiguration, FragmentData} from './models';
 import {mapNodes} from './node';
 import {parse} from './parse';
-import { isPlainObject } from '@oscarpalmer/atoms';
 
 export class Fragment {
 	readonly #data: FragmentData;
@@ -11,13 +13,20 @@ export class Fragment {
 	readonly #configuration: Required<FragmentConfiguration> = {
 		identifier: undefined,
 		ignoreCache: false,
-	}
+	};
 
+	/**
+	 * Fragment identifier
+	 */
 	get identifier(): unknown {
 		return this.#configuration.identifier;
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
+		Object.defineProperty(this, '$fragment', {
+			value: true,
+		});
+
 		this.#data = {
 			expressions,
 			strings,
@@ -28,19 +37,21 @@ export class Fragment {
 			},
 			values: [],
 		};
-
-		Object.defineProperty(this, '$fragment', {
-			value: true,
-		});
 	}
 
 	/**
-	 * Appends the fragment to the given element
+	 * Append the fragment to the given element
+	 * @param element Element to append to
 	 */
 	appendTo(element: Element): void {
 		element.append(...this.get());
 	}
 
+	/**
+	 * Configure the fragment
+	 * @param configuration Configuration options
+	 * @returns Fragment
+	 */
 	configure(configuration: FragmentConfiguration): Fragment {
 		const actual = isPlainObject(configuration) ? configuration : {};
 
@@ -56,7 +67,8 @@ export class Fragment {
 	}
 
 	/**
-	 * Gets a list of the fragment's nodes
+	 * Get a list of the fragment's nodes
+	 * @returns List of nodes
 	 */
 	get(): ChildNode[] {
 		const data = this.#data;
@@ -65,13 +77,10 @@ export class Fragment {
 			const parsed = parse(data);
 
 			const templated = html(parsed, {
+				ignoreCache: this.#configuration.ignoreCache,
 				sanitizeBooleanAttributes: false,
 			});
 
-			if (this.#configuration.ignoreCache) {
-				html.remove(parsed);
-			}
-
 			data.items.splice(
 				0,
 				data.items.length,
@@ -84,7 +93,9 @@ export class Fragment {
 				data,
 				data.items.flatMap(
 					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
+						item.fragments?.flatMap(fragment => fragment.get()) ??
+						item.nodes ??
+						[],
 				),
 			);
 		}
@@ -92,11 +103,21 @@ export class Fragment {
 		return [
 			...data.items.flatMap(
 				item =>
-					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
+					item.fragments?.flatMap(fragment => fragment.get()) ??
+					item.nodes ??
+					[],
 			),
 		];
 	}
 
+	/**
+	 * Set an identifier for the fragment
+	 *
+	 * _An identifier can be used to uniquely identify a fragment,
+	 * which helps prevent re-rendering in certain scenarios._
+	 * @param identifier Identifier
+	 * @returns Fragment
+	 */
 	identify(identifier: unknown): Fragment {
 		this.#configuration.identifier = identifier;
 
@@ -104,7 +125,7 @@ export class Fragment {
 	}
 
 	/**
-	 * Removes the fragment from the DOM
+	 * Remove the fragment from the DOM
 	 */
 	remove(): void {
 		removeFragment(this.#data);
@@ -114,20 +135,34 @@ export class Fragment {
 function removeFragment(data: FragmentData): void {
 	removeMora(data);
 
-	const {length} = data.items;
+	let {length} = data.items;
 
 	for (let index = 0; index < length; index += 1) {
 		const {fragments, nodes} = data.items[index];
-		const length = fragments?.length ?? 0;
-
-		for (let index = 0; index < length; index += 1) {
-			fragments?.[index]?.remove();
+		const fragmentsLength = fragments?.length ?? 0;
+
+		for (
+			let fragmentIndex = 0;
+			fragmentIndex < fragmentsLength;
+			fragmentIndex += 1
+		) {
+			fragments?.[fragmentIndex]?.remove();
 		}
 
 		removeNodes(nodes ?? []);
 	}
 
 	data.items.length = 0;
+
+	length = data.values.length;
+
+	for (let index = 0; index < length; index += 1) {
+		const value = data.values[index];
+
+		if (isFragments(value)) {
+			handleFragments(value, true);
+		}
+	}
 }
 
 function removeMora(data: FragmentData): void {

package/src/fragments.ts

@@ -0,0 +1,134 @@
+import {getString} from '@oscarpalmer/atoms/string';
+import {array, type ReactiveArray} from '@oscarpalmer/mora';
+import type {Fragment} from './fragment';
+import {isFragment, isFragments} from './helpers';
+import type {FragmentsState} from './models';
+
+export class Fragments {
+	readonly #state: FragmentsState;
+
+	/**
+	 * Fragment items
+	 */
+	get items(): ReactiveArray<Fragment> {
+		return this.#state.mapped;
+	}
+
+	constructor(
+		items: ReactiveArray<unknown>,
+		identify: (item: unknown) => unknown,
+		fragment: (item: unknown) => Fragment,
+	) {
+		Object.defineProperty(this, '$fragments', {
+			value: true,
+		});
+
+		this.#state = {
+			fragment,
+			identify,
+			array: items,
+			instances: {},
+			mapped: array<Fragment>([]),
+			subscriber: undefined,
+		};
+
+		states.set(this, this.#state);
+
+		initializeFragments(this.#state);
+	}
+}
+
+export function handleFragments(
+	item: Fragments | FragmentsState,
+	remove: boolean,
+): void {
+	const state = isFragments(item) ? states.get(item) : item;
+
+	if (state != null) {
+		(remove ? removeFragments : initializeFragments)(state);
+	}
+}
+
+function handleItems(state: FragmentsState, items: unknown[]): void {
+	const keys = new Set<string>();
+	const mapped: Fragment[] = [];
+
+	const {length} = items;
+
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const identifier = state.identify(item);
+
+		if (identifier == null) {
+			throw new Error('Identifier cannot be null or undefined');
+		}
+
+		const key = getString(identifier);
+
+		if (keys.has(key)) {
+			throw new Error(`Duplicate identifier found: "${key}"`);
+		}
+
+		let instance = state.instances[key];
+
+		if (instance == null) {
+			instance = state.fragment(item);
+
+			if (!isFragment(instance)) {
+				throw new Error('Fragment function must return a Fragment instance');
+			}
+		}
+
+		instance.identify(key);
+
+		state.instances[key] = instance;
+
+		keys.add(key);
+
+		mapped.push(instance);
+	}
+
+	state.mapped.set(mapped);
+
+	updateFragments(state, keys);
+}
+
+export function initializeFragments(state: FragmentsState): void {
+	state.subscriber ??= state.array.subscribe(items => {
+		handleItems(state, items);
+	});
+}
+
+function removeFragments(state: FragmentsState): void {
+	state.subscriber?.();
+
+	updateFragments(state);
+
+	state.subscriber = undefined;
+}
+
+function updateFragments(state: FragmentsState, active?: Set<string>): void {
+	const next: Record<string, Fragment> = {};
+
+	const previous = {...state.instances};
+	const keys = Object.keys(previous);
+	const {length} = keys;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+
+		if (active?.has(key)) {
+			next[key] = previous[key];
+		} else {
+			previous[key].remove();
+		}
+	}
+
+	state.instances = next;
+
+	active?.clear();
+}
+
+//
+
+const states: WeakMap<Fragments, FragmentsState> = new WeakMap();

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 import type {Fragment} from '../fragment';
+import type {Fragments} from '../fragments';
 
 export function compareArrays(
 	first: unknown[],
@@ -27,3 +28,12 @@ export function isFragment(value: unknown): value is Fragment {
 		value.$fragment === true
 	);
 }
+
+export function isFragments(value: unknown): value is Fragments {
+	return (
+		typeof value === 'object' &&
+		value != null &&
+		'$fragments' in value &&
+		value.$fragments === true
+	);
+}

package/src/index.ts

@@ -1,13 +1,27 @@
 import '@oscarpalmer/mora';
-import { Fragment } from './fragment';
+import type {ReactiveArray} from '@oscarpalmer/mora';
+import {Fragment} from './fragment';
+import {Fragments} from './fragments';
+
+export function fragments<Item>(
+	array: ReactiveArray<Item>,
+	identify: (item: Item) => unknown,
+	fragment: (item: Item) => Fragment,
+): Fragments {
+	return new Fragments(
+		array as ReactiveArray<unknown>,
+		identify as never,
+		fragment as never,
+	);
+}
 
 export function html(
 	strings: TemplateStringsArray,
 	...values: unknown[]
-): Fragment {
+): unknown {
 	return new Fragment(strings, values);
 }
 
 export * from '@oscarpalmer/mora';
-export type { Fragment } from './fragment';
-
+export type {Fragment} from './fragment';
+export type {Fragments} from './fragments';

package/src/models.ts

@@ -1,4 +1,4 @@
-import type {Reactive} from '@oscarpalmer/mora';
+import type {Reactive, ReactiveArray, Unsubscribe} from '@oscarpalmer/mora';
 import type {Fragment} from './fragment';
 
 export type FragmentConfiguration = {
@@ -21,6 +21,15 @@ export type FragmentItem = {
 	text?: Text;
 };
 
+export type FragmentsState = {
+	array: ReactiveArray<unknown>;
+	fragment: (item: unknown) => Fragment;
+	identify: (item: unknown) => unknown;
+	instances: Record<string, Fragment>;
+	mapped: ReactiveArray<Fragment>;
+	subscriber: Unsubscribe | undefined;
+};
+
 type MoraData = {
 	subscribers: Set<() => void>;
 	values: Set<Reactive<unknown>>;

package/src/node/index.ts

@@ -1,8 +1,9 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/mora';
+import {computed, isReactive, Reactive} from '@oscarpalmer/mora';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {EXPRESSION_COMMENT_CONTENT} from '../constants';
-import {isFragment} from '../helpers';
+import {handleFragments} from '../fragments';
+import {isFragment, isFragments} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
@@ -45,6 +46,15 @@ function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 			setComputedValue(data, comment, value as GenericCallback);
 			break;
 
+		case isFragments(value):
+			handleFragments(value, false);
+			setReactiveValue(
+				data,
+				comment,
+				value.items as Reactive<unknown[], unknown>,
+			);
+			break;
+
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
 			break;