@oscarpalmer/abydon 0.13.0 → 0.15.0

package/package.json

@@ -4,25 +4,24 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.108",
-		"@oscarpalmer/mora": "^0.21",
-		"@oscarpalmer/toretto": "^0.22"
+		"@oscarpalmer/atoms": "^0.114",
+		"@oscarpalmer/mora": "^0.23",
+		"@oscarpalmer/toretto": "^0.25"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.2",
-		"@oscarpalmer/oui": "^0.17",
+		"@biomejs/biome": "^2.3",
+		"@oscarpalmer/oui": "^0.18",
 		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24.3",
-		"@vitest/coverage-istanbul": "^3.2",
-		"dts-bundle-generator": "^9.5",
+		"@rollup/plugin-typescript": "^12.3",
+		"@types/node": "^24.9",
+		"@vitest/coverage-istanbul": "^4",
 		"glob": "^11",
-		"jsdom": "^26.1",
-		"rollup": "^4.50",
+		"jsdom": "^27.1",
+		"rollup": "^4.52",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
 		"vite": "npm:rolldown-vite@latest",
-		"vitest": "^3.2"
+		"vitest": "^4"
 	},
 	"exports": {
 		"./package.json": "./package.json",
@@ -50,15 +49,14 @@
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rollup:build && npm run types",
+		"build": "npm run clean && npx vite build && npm run rollup:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
 		"rollup:build": "npx rollup -c",
 		"rollup:watch": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
-		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
-	"types": "types/index.d.cts",
-	"version": "0.13.0"
+	"types": "types/index.d.ts",
+	"version": "0.15.0"
 }

package/src/constants.ts

@@ -0,0 +1,20 @@
+export const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController> =
+	new WeakMap();
+
+export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+
+export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
+
+export const EXPRESSION_ATTRIBUTE_STYLE_FULL =
+	/^style\.([\w-]+)(?:\.([\w-]+))?$/;
+
+export const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
+
+export const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
+
+export const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+
+export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
+export const REASON_EVENT_REMOVED =
+	'Event removed as element was removed from document by Abydon';

package/src/fragment.ts

@@ -1,20 +1,33 @@
-import type {Key} from '@oscarpalmer/atoms/models';
+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 {FragmentData} from './models';
+import type {FragmentConfiguration, FragmentData} from './models';
 import {mapNodes} from './node';
 import {parse} from './parse';
 
 export class Fragment {
-	private readonly $fragment = true;
-	private readonly data: FragmentData;
+	readonly #data: FragmentData;
 
-	get identifier(): Key | undefined {
-		return this.data.identifier;
+	readonly #configuration: Required<FragmentConfiguration> = {
+		identifier: undefined,
+		ignoreCache: false,
+	};
+
+	/**
+	 * Fragment identifier
+	 */
+	get identifier(): unknown {
+		return this.#configuration.identifier;
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
-		this.data = {
+		Object.defineProperty(this, '$fragment', {
+			value: true,
+		});
+
+		this.#data = {
 			expressions,
 			strings,
 			items: [],
@@ -27,79 +40,129 @@ export class Fragment {
 	}
 
 	/**
-	 * 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());
 	}
 
 	/**
-	 * Gets a list of the fragment's nodes
+	 * Configure the fragment
+	 * @param configuration Configuration options
+	 * @returns Fragment
+	 */
+	configure(configuration: FragmentConfiguration): Fragment {
+		const actual = isPlainObject(configuration) ? configuration : {};
+
+		if (actual.identifier !== undefined) {
+			this.#configuration.identifier = actual.identifier;
+		}
+
+		if (typeof actual.ignoreCache === 'boolean') {
+			this.#configuration.ignoreCache = actual.ignoreCache;
+		}
+
+		return this;
+	}
+
+	/**
+	 * Get a list of the fragment's nodes
+	 * @returns List of nodes
 	 */
 	get(): ChildNode[] {
-		if (this.data.items.length === 0) {
-			const parsed = parse(this.data);
+		const data = this.#data;
+
+		if (data.items.length === 0) {
+			const parsed = parse(data);
 
 			const templated = html(parsed, {
+				ignoreCache: this.#configuration.ignoreCache,
 				sanitizeBooleanAttributes: false,
 			});
 
-			this.data.items.splice(
+			data.items.splice(
 				0,
-				this.data.items.length,
+				data.items.length,
 				...templated.map(node => ({
 					nodes: [node as ChildNode],
 				})),
 			);
 
 			mapNodes(
-				this.data,
-				this.data.items.flatMap(
+				data,
+				data.items.flatMap(
 					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+						item.fragments?.flatMap(fragment => fragment.get()) ??
+						item.nodes ??
+						[],
 				),
 			);
 		}
 
 		return [
-			...this.data.items.flatMap(
+			...data.items.flatMap(
 				item =>
-					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+					item.fragments?.flatMap(fragment => fragment.get()) ??
+					item.nodes ??
+					[],
 			),
 		];
 	}
 
-	identify(identifier: Key): Fragment {
-		this.data.identifier = identifier;
+	/**
+	 * 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;
 
 		return this;
 	}
 
 	/**
-	 * Removes the fragment from the DOM
+	 * Remove the fragment from the DOM
 	 */
 	remove(): void {
-		removeFragment(this.data);
+		removeFragment(this.#data);
 	}
 }
 
 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 ?? [];
-
-		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);
+		removeNodes(nodes ?? []);
 	}
 
-	data.items.splice(0, length);
+	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/dom.ts

@@ -16,7 +16,7 @@ export function createNodes(value: unknown): ChildNode[] {
 }
 
 export function removeNodes(nodes: ChildNode[]): void {
-	sanitiseNodes(nodes);
+	sanitizeNodes(nodes);
 
 	const {length} = nodes;
 
@@ -35,7 +35,7 @@ export function replaceNodes(from: ChildNode[], to: ChildNode[]): void {
 	}
 }
 
-function sanitiseNodes(nodes: ChildNode[]): void {
+function sanitizeNodes(nodes: ChildNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -46,7 +46,7 @@ function sanitiseNodes(nodes: ChildNode[]): void {
 		}
 
 		if (node.hasChildNodes()) {
-			sanitiseNodes([...node.childNodes] as ChildNode[]);
+			sanitizeNodes([...node.childNodes] as ChildNode[]);
 		}
 	}
 }

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,12 +1,27 @@
 import '@oscarpalmer/mora';
+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 {Fragments} from './fragments';

package/src/models.ts

@@ -1,19 +1,33 @@
-import type {Key} from '@oscarpalmer/atoms/models';
-import type {Reactive} from '@oscarpalmer/mora';
+import type {Reactive, ReactiveArray, Unsubscribe} from '@oscarpalmer/mora';
 import type {Fragment} from './fragment';
 
+export type FragmentConfiguration = {
+	identifier?: unknown;
+	ignoreCache?: boolean;
+};
+
 export type FragmentData = {
 	expressions: unknown[];
-	identifier?: Key;
 	items: FragmentItem[];
 	mora: MoraData;
 	strings: TemplateStringsArray;
+	template?: string;
 	values: unknown[];
 };
 
 export type FragmentItem = {
 	fragments?: Fragment[];
-	nodes: ChildNode[];
+	nodes?: ChildNode[];
+	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 = {

package/src/node/attribute/index.ts

@@ -1,14 +1,14 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {computed, isReactive} from '@oscarpalmer/mora';
+import {isBooleanAttribute, setProperty} from '@oscarpalmer/toretto/attribute';
 import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {EXPRESSION_COMMENT_FULL} from '../../constants';
 import type {FragmentData} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
-const commentExpression = /^<!--abydon\.(\d+)-->$/;
-
 function getValue(data: FragmentData, original: string): unknown {
-	const matches = commentExpression.exec(original ?? '');
+	const matches = EXPRESSION_COMMENT_FULL.exec(original ?? '');
 
 	return matches == null ? original : data.values[+matches[1]];
 }
@@ -25,14 +25,23 @@ export function mapAttributes(
 
 		const actual = getValue(data, value);
 
-		if (name.startsWith('@')) {
-			mapEvent(element, name, actual);
-		} else if (
-			name.includes('.') ||
-			typeof value === 'function' ||
-			isReactive(actual)
-		) {
-			mapValue(data, element, name, actual);
+		switch (true) {
+			case name.startsWith('@'):
+				mapEvent(element, name, actual);
+				break;
+
+			case name.includes('.') ||
+				typeof actual === 'function' ||
+				isReactive(actual):
+				mapValue(data, element, name, actual);
+				break;
+
+			case isBooleanAttribute(name):
+				setProperty(element, name, value);
+				break;
+
+			default:
+				break;
 		}
 	}
 }
@@ -43,14 +52,10 @@ function mapValue(
 	name: string,
 	value: unknown,
 ): void {
-	switch (true) {
-		case typeof value === 'function':
-			setComputedAttribute(data, element, name, value as GenericCallback);
-			break;
-
-		default:
-			setAttribute(data, element, name, value);
-			break;
+	if (typeof value === 'function') {
+		setComputedAttribute(data, element, name, value as GenericCallback);
+	} else {
+		setAttribute(data, element, name, value);
 	}
 }