@oscarpalmer/abydon 0.15.0 → 0.17.0

package/dist/node/{value.js → value.mjs}

@@ -1,11 +1,12 @@
-import { compareArrays, isFragment } from "../helpers/index.js";
-import { createNodes, replaceNodes } from "../helpers/dom.js";
+import { compareArrays, isFragment } from "../helpers/index.mjs";
+import { createNodes, replaceNodes } from "../helpers/dom.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isChildNode } from "@oscarpalmer/toretto/is";
+//#region src/node/value.ts
 function addToArray(identifiers, items, nodes, added) {
 	let position = nodes[0];
-	const before = added && !identifiers.previous.includes(items.templates[0].identifier);
+	const before = added && !identifiers.previous.has(items.templates[0].identifier);
 	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
 		identifier: fragment.identifier,
 		value: node
@@ -13,7 +14,7 @@ function addToArray(identifiers, items, nodes, added) {
 	const { length } = next;
 	for (let index = 0; index < length; index += 1) {
 		const node = next[index];
-		if (!(added && identifiers.previous.includes(node.identifier))) if (index === 0 && before) position.before(node.value);
+		if (!(added && identifiers.previous.has(node.identifier))) if (index === 0 && before) position.before(node.value);
 		else position.after(node.value);
 		position = node.value;
 	}
@@ -25,7 +26,7 @@ function handleArray(identifiers, items, nodes) {
 		...items,
 		next
 	}, nodes, comparison === "added");
-	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.includes(fragment.identifier)) ?? [];
+	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();
 	return {
@@ -47,18 +48,18 @@ function replaceText(item, comment, isNullable) {
 }
 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);
+	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
 	const next = templates.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 || item.nodes == null || previous.some((identifier) => identifier == null)) return {
 		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item$1) => createNodes(item$1)) : templates.flatMap((template) => template.get()))
+		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
 	};
 	return handleArray({
-		next,
-		previous
+		next: new Set(next),
+		previous: new Set(previous)
 	}, {
 		templates,
 		fragments: item.fragments ?? []
@@ -73,7 +74,7 @@ function setNodes(item, comment, next) {
 	return next;
 }
 function setReactiveValue(data, comment, reactive) {
-	let item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	let item = data.items.find((item) => item.nodes?.includes(comment));
 	item ??= {};
 	item.text = new Text();
 	data.mora.subscribers.add(reactive.subscribe((value) => {
@@ -110,4 +111,5 @@ function setText(item, comment, value) {
 	removeFragments(item.fragments);
 	if (result) return item.text == null ? [] : [item.text];
 }
+//#endregion
 export { setReactiveValue };

package/dist/parse.d.mts

@@ -0,0 +1,6 @@
+import { r as FragmentData } from "./fragment-9qTBAvtR.mjs";
+
+//#region src/parse.d.ts
+declare function parse(data: FragmentData): string;
+//#endregion
+export { parse };

package/dist/{parse.js → parse.mjs}

@@ -1,4 +1,6 @@
+import { EXPRESSION_ABYDON_ATTRIBUTE_FULL } from "./constants.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+//#region src/parse.ts
 function handleExpression(data, prefix, expression) {
 	if (Array.isArray(expression)) {
 		const { length } = expression;
@@ -6,7 +8,7 @@ function handleExpression(data, prefix, expression) {
 		for (let index = 0; index < length; index += 1) expressions += handleExpression(data, "", expression[index]);
 		return `${prefix}${expressions}`;
 	}
-	if (typeof expression === "function" || typeof expression === "object" && expression != null) return `${prefix}<!--abydon.${data.values.push(expression) - 1}-->`;
+	if (typeof expression === "function" || typeof expression === "object" && expression != null) return transformExpression(prefix, data.values.push(expression) - 1);
 	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {
@@ -14,8 +16,16 @@ function parse(data) {
 	const { length } = data.strings;
 	data.template = "";
 	for (let index = 0; index < length; index += 1) data.template += handleExpression(data, data.strings[index], data.expressions[index]);
+	data.template = data.template.replaceAll(EXPRESSION_ABYDON_ATTRIBUTE_FULL, transformAttribute);
 	data.expressions = [];
 	data.strings = [];
 	return data.template;
 }
+function transformAttribute(_, name, index) {
+	return `_${name}="@abydon.${index}@"`;
+}
+function transformExpression(prefix, index) {
+	return `${prefix}<!--abydon.${index}-->`;
+}
+//#endregion
 export { parse };

package/package.json

@@ -1,36 +1,6 @@
 {
-	"author": {
-		"name": "Oscar Palmér",
-		"url": "https://oscarpalmer.se"
-	},
-	"dependencies": {
-		"@oscarpalmer/atoms": "^0.114",
-		"@oscarpalmer/mora": "^0.23",
-		"@oscarpalmer/toretto": "^0.25"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.3",
-		"@oscarpalmer/oui": "^0.18",
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.3",
-		"@types/node": "^24.9",
-		"@vitest/coverage-istanbul": "^4",
-		"glob": "^11",
-		"jsdom": "^27.1",
-		"rollup": "^4.52",
-		"tslib": "^2.8",
-		"typescript": "^5.9",
-		"vite": "npm:rolldown-vite@latest",
-		"vitest": "^4"
-	},
-	"exports": {
-		"./package.json": "./package.json",
-		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/index.js"
-		}
-	},
-	"files": ["dist", "src", "types"],
+	"name": "@oscarpalmer/abydon",
+	"version": "0.17.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -42,21 +12,51 @@
 		"vanilla"
 	],
 	"license": "MIT",
-	"module": "dist/index.js",
-	"name": "@oscarpalmer/abydon",
+	"author": {
+		"name": "Oscar Palmér",
+		"url": "https://oscarpalmer.se"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.mts",
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"types": "./dist/index.d.mts",
+			"default": "./dist/index.mjs"
+		}
+	},
 	"scripts": {
-		"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",
+		"build": "npm run tsdown:build && npx vp pack",
+		"tsdown:build": "npx tsdown -c ./tsdown.config.ts",
+		"tsdown:watch": "npx tsdown -c ./tsdown.config.ts --watch",
+		"test": "npx vp test run --coverage",
+		"test:leak": "npx vp test run --detect-async-leaks --coverage",
 		"watch": "npx vite build --watch"
 	},
-	"type": "module",
-	"types": "types/index.d.ts",
-	"version": "0.15.0"
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.165",
+		"@oscarpalmer/mora": "^0.26",
+		"@oscarpalmer/toretto": "^0.41"
+	},
+	"devDependencies": {
+		"@oscarpalmer/oui": "^0.19",
+		"@types/node": "^25.5",
+		"@vitest/coverage-istanbul": "^4.1",
+		"jsdom": "^28.1",
+		"tsdown": "^0.21",
+		"typescript": "^5.9",
+		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"packageManager": "npm@11.11.1"
 }

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,5 +1,6 @@
 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';
@@ -12,7 +13,7 @@ export class Fragment {
 
 	readonly #configuration: Required<FragmentConfiguration> = {
 		identifier: undefined,
-		ignoreCache: false,
+		cache: true,
 	};
 
 	/**
@@ -23,7 +24,7 @@ export class Fragment {
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
-		Object.defineProperty(this, '$fragment', {
+		Object.defineProperty(this, NAME_FRAGMENT, {
 			value: true,
 		});
 
@@ -55,12 +56,12 @@ export class 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;
@@ -77,8 +78,7 @@ export class Fragment {
 			const parsed = parse(data);
 
 			const templated = html(parsed, {
-				ignoreCache: this.#configuration.ignoreCache,
-				sanitizeBooleanAttributes: false,
+				cache: this.#configuration.cache,
 			});
 
 			data.items.splice(
@@ -92,22 +92,14 @@ 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 ?? [],
+		);
 	}
 
 	/**
@@ -141,11 +133,7 @@ function removeFragment(data: FragmentData): void {
 		const {fragments, nodes} = data.items[index];
 		const fragmentsLength = fragments?.length ?? 0;
 
-		for (
-			let fragmentIndex = 0;
-			fragmentIndex < fragmentsLength;
-			fragmentIndex += 1
-		) {
+		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) {
 			fragments?.[fragmentIndex]?.remove();
 		}
 

package/src/fragments.ts

@@ -1,5 +1,6 @@
 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';
@@ -19,7 +20,7 @@ export class Fragments {
 		identify: (item: unknown) => unknown,
 		fragment: (item: unknown) => Fragment,
 	) {
-		Object.defineProperty(this, '$fragments', {
+		Object.defineProperty(this, NAME_FRAGMENTS, {
 			value: true,
 		});
 
@@ -38,10 +39,7 @@ export class Fragments {
 	}
 }
 
-export function handleFragments(
-	item: Fragments | FragmentsState,
-	remove: boolean,
-): void {
+export function handleFragments(item: Fragments | FragmentsState, remove: boolean): void {
 	const state = isFragments(item) ? states.get(item) : item;
 
 	if (state != null) {

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,3 +1,5 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {NAME_FRAGMENT, NAME_FRAGMENTS} from '../constants';
 import type {Fragment} from '../fragment';
 import type {Fragments} from '../fragments';
 
@@ -9,31 +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 (
-		typeof value === 'object' &&
-		value != null &&
-		'$fragment' in value &&
-		value.$fragment === true
-	);
+	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 &&
-		'$fragments' in value &&
-		value.$fragments === 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

@@ -3,23 +3,27 @@ import type {ReactiveArray} from '@oscarpalmer/mora';
 import {Fragment} from './fragment';
 import {Fragments} from './fragments';
 
+/**
+ * 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,
-	);
+	return new Fragments(array as ReactiveArray<unknown>, identify as never, fragment as never);
 }
 
-export function html(
-	strings: TemplateStringsArray,
-	...values: unknown[]
-): unknown {
-	return new Fragment(strings, values);
+/**
+ * Create Fragment from a template
+ * @returns Fragment
+ */
+export function html(template: TemplateStringsArray, ...values: unknown[]): Fragment {
+	return new Fragment(template, values);
 }
 
 export * from '@oscarpalmer/mora';

package/src/models.ts

@@ -2,8 +2,17 @@ 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 = {

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 {