@oscarpalmer/abydon 0.14.0 → 0.16.0

package/package.json

@@ -4,23 +4,21 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.114",
-		"@oscarpalmer/mora": "^0.23",
-		"@oscarpalmer/toretto": "^0.24"
+		"@oscarpalmer/atoms": "^0.118",
+		"@oscarpalmer/mora": "^0.25",
+		"@oscarpalmer/toretto": "^0.32"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3",
 		"@oscarpalmer/oui": "^0.18",
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.3",
-		"@types/node": "^24.9",
+		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
-		"glob": "^11",
-		"jsdom": "^27.1",
-		"rollup": "^4.52",
+		"jsdom": "^27.3",
+		"oxfmt": "^0.19",
+		"oxlint": "^1.34",
+		"rolldown": "1.0.0-beta.56",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
-		"vite": "npm:rolldown-vite@latest",
+		"vite": "8.0.0-beta.2",
 		"vitest": "^4"
 	},
 	"exports": {
@@ -49,14 +47,14 @@
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rollup:build && npx tsc",
+		"build": "npm run clean && npx vite build && npm run rolldown: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",
+		"rolldown:build": "npx rolldown -c",
+		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
 		"test": "npx vitest --coverage",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.14.0"
+	"version": "0.16.0"
 }

package/src/constants.ts

@@ -1,20 +1,40 @@
-export const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController> =
-	new WeakMap();
-
 export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
+export const EVENT_DEFAULTS: Record<string, string> = {
+	A: 'click',
+	BUTTON: 'click',
+	DETAILS: 'toggle',
+	FORM: 'submit',
+	SELECT: 'change',
+	TEXTAREA: 'input',
+};
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+
+export const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
+
 export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 
-export const EXPRESSION_ATTRIBUTE_STYLE_FULL =
-	/^style\.([\w-]+)(?:\.([\w-]+))?$/;
+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_CHANGE_TYPES = /^(checkbox|radio)$/;
 
 export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
 
-export const REASON_EVENT_REMOVED =
-	'Event removed as element was removed from document by Abydon';
+export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+
+export const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+
+export const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+
+export const EXPRESSION_EVENT_PREFIX = /^@/;
+
+export const EXPRESSION_PERIOD = /\./;
+
+export const NAME_FRAGMENT = '$fragment';
+
+export const NAME_FRAGMENTS = '$fragments';

package/src/fragment.ts

@@ -1,23 +1,33 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {html} from '@oscarpalmer/toretto/html';
+import {NAME_FRAGMENT} from './constants';
+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;
 
 	readonly #configuration: Required<FragmentConfiguration> = {
 		identifier: undefined,
-		ignoreCache: false,
-	}
+		cache: true,
+	};
 
+	/**
+	 * Fragment identifier
+	 */
 	get identifier(): unknown {
 		return this.#configuration.identifier;
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
+		Object.defineProperty(this, NAME_FRAGMENT, {
+			value: true,
+		});
+
 		this.#data = {
 			expressions,
 			strings,
@@ -28,35 +38,38 @@ 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 : {};
 
-		if (actual.identifier !== undefined) {
+		if ('identifier' in actual) {
 			this.#configuration.identifier = actual.identifier;
 		}
 
-		if (typeof actual.ignoreCache === 'boolean') {
-			this.#configuration.ignoreCache = actual.ignoreCache;
+		if (typeof actual.cache === 'boolean') {
+			this.#configuration.cache = actual.cache;
 		}
 
 		return this;
 	}
 
 	/**
-	 * 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 +78,9 @@ export class Fragment {
 			const parsed = parse(data);
 
 			const templated = html(parsed, {
-				sanitizeBooleanAttributes: false,
+				cache: this.#configuration.cache,
 			});
 
-			if (this.#configuration.ignoreCache) {
-				html.remove(parsed);
-			}
-
 			data.items.splice(
 				0,
 				data.items.length,
@@ -83,20 +92,24 @@ export class Fragment {
 			mapNodes(
 				data,
 				data.items.flatMap(
-					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
+					item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
 				),
 			);
 		}
 
-		return [
-			...data.items.flatMap(
-				item =>
-					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
-			),
-		];
+		return data.items.flatMap(
+			item => 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 +117,7 @@ export class Fragment {
 	}
 
 	/**
-	 * Removes the fragment from the DOM
+	 * Remove the fragment from the DOM
 	 */
 	remove(): void {
 		removeFragment(this.#data);
@@ -114,20 +127,30 @@ 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;
+		const fragmentsLength = fragments?.length ?? 0;
 
-		for (let index = 0; index < length; index += 1) {
-			fragments?.[index]?.remove();
+		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,132 @@
+import {getString} from '@oscarpalmer/atoms/string';
+import {array, type ReactiveArray} from '@oscarpalmer/mora';
+import {NAME_FRAGMENTS} from './constants';
+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, NAME_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

@@ -1,6 +1,5 @@
 import {getString} from '@oscarpalmer/atoms/string';
-import {isChildNode, isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {removeEvents} from '../node/event';
+import {isChildNode} from '@oscarpalmer/toretto/is';
 import {isFragment} from './index';
 
 export function createNodes(value: unknown): ChildNode[] {
@@ -16,8 +15,6 @@ export function createNodes(value: unknown): ChildNode[] {
 }
 
 export function removeNodes(nodes: ChildNode[]): void {
-	sanitizeNodes(nodes);
-
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -34,19 +31,3 @@ export function replaceNodes(from: ChildNode[], to: ChildNode[]): void {
 		from[index].remove();
 	}
 }
-
-function sanitizeNodes(nodes: ChildNode[]): void {
-	const {length} = nodes;
-
-	for (let index = 0; index < length; index += 1) {
-		const node = nodes[index];
-
-		if (isHTMLOrSVGElement(node)) {
-			removeEvents(node);
-		}
-
-		if (node.hasChildNodes()) {
-			sanitizeNodes([...node.childNodes] as ChildNode[]);
-		}
-	}
-}

package/src/helpers/index.ts

@@ -1,4 +1,7 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {NAME_FRAGMENT, NAME_FRAGMENTS} from '../constants';
 import type {Fragment} from '../fragment';
+import type {Fragments} from '../fragments';
 
 export function compareArrays(
 	first: unknown[],
@@ -8,22 +11,32 @@ export function compareArrays(
 	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';
+	if (!from.filter(key => to.includes(key)).every((key, index) => to[index] === key)) {
+		return COMPARISON_DISSIMILAR;
 	}
 
-	return firstIsLarger ? 'removed' : 'added';
+	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
 }
 
 export function isFragment(value: unknown): value is Fragment {
+	return isNamed(value, NAME_FRAGMENT);
+}
+
+export function isFragments(value: unknown): value is Fragments {
+	return isNamed(value, NAME_FRAGMENTS);
+}
+
+function isNamed(value: unknown, name: string): boolean {
 	return (
 		typeof value === 'object' &&
 		value != null &&
-		'$fragment' in value &&
-		value.$fragment === true
+		name in value &&
+		(value as PlainObject)[name] === true
 	);
 }
+
+const COMPARISON_ADDED = 'added';
+
+const COMPARISON_DISSIMILAR = 'dissimilar';
+
+const COMPARISON_REMOVED = 'removed';

package/src/index.ts

@@ -1,13 +1,31 @@
 import '@oscarpalmer/mora';
-import { Fragment } from './fragment';
+import type {ReactiveArray} from '@oscarpalmer/mora';
+import {Fragment} from './fragment';
+import {Fragments} from './fragments';
 
-export function html(
-	strings: TemplateStringsArray,
-	...values: unknown[]
-): Fragment {
-	return new Fragment(strings, values);
+/**
+ * Create Fragments from a reactive array
+ * @param array Reactive array
+ * @param identify Function to identify item
+ * @param fragment Function to create fragment from item
+ * @returns 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 * from '@oscarpalmer/mora';
-export type { Fragment } from './fragment';
+/**
+ * Create Fragment from a template
+ * @returns Fragment
+ */
+export function html(template: TemplateStringsArray, ...values: unknown[]): Fragment {
+	return new Fragment(template, values);
+}
 
+export * from '@oscarpalmer/mora';
+export type {Fragment} from './fragment';
+export type {Fragments} from './fragments';

package/src/models.ts

@@ -1,9 +1,18 @@
-import type {Reactive} from '@oscarpalmer/mora';
+import type {Reactive, ReactiveArray, Unsubscribe} from '@oscarpalmer/mora';
 import type {Fragment} from './fragment';
 
 export type FragmentConfiguration = {
+	/**
+	 * Should the template be cached? _(defaults to `true`)_
+	 */
+	cache?: boolean;
+	/**
+	 * Identifier for the fragment
+	 *
+	 * _(An identifier can be used to uniquely identify a fragment,
+	 * which helps prevent re-rendering in certain scenarios)_
+	 */
 	identifier?: unknown;
-	ignoreCache?: boolean;
 };
 
 export type FragmentData = {
@@ -21,6 +30,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/attribute/index.ts

@@ -1,43 +1,44 @@
 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 {
+	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
+	EXPRESSION_ABYDON_CONTENT,
+	EXPRESSION_EVENT_PREFIX,
+	EXPRESSION_PERIOD,
+} from '../../constants';
 import type {FragmentData} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
 function getValue(data: FragmentData, original: string): unknown {
-	const matches = EXPRESSION_COMMENT_FULL.exec(original ?? '');
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? '');
 
 	return matches == null ? original : data.values[+matches[1]];
 }
 
-export function mapAttributes(
-	data: FragmentData,
-	element: HTMLOrSVGElement,
-): void {
+export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void {
 	const attributes = [...element.attributes];
 	const {length} = attributes;
 
 	for (let index = 0; index < length; index += 1) {
 		const {name, value} = attributes[index];
 
-		const actual = getValue(data, value);
+		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, '');
+		const actualValue = getValue(data, value) as never;
 
-		switch (true) {
-			case name.startsWith('@'):
-				mapEvent(element, name, actual);
-				break;
+		if (actualName !== name) {
+			element.removeAttribute(name);
+		}
 
-			case name.includes('.') ||
-				typeof actual === 'function' ||
-				isReactive(actual):
-				mapValue(data, element, name, actual);
+		switch (true) {
+			case EXPRESSION_EVENT_PREFIX.test(actualName):
+				mapEvent(element, actualName, actualValue);
 				break;
 
-			case isBooleanAttribute(name):
-				setProperty(element, name, value);
+			case EXPRESSION_PERIOD.test(actualName):
+			case typeof actualValue === 'function':
+			case isReactive(actualValue):
+				mapValue(data, element, actualName, actualValue);
 				break;
 
 			default:
@@ -48,7 +49,7 @@ export function mapAttributes(
 
 function mapValue(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -61,7 +62,7 @@ function mapValue(
 
 function setComputedAttribute(
 	data: FragmentData,
-	element: HTMLOrSVGElement,
+	element: HTMLElement | SVGElement,
 	name: string,
 	callback: GenericCallback,
 ): void {