@oscarpalmer/abydon 0.20.0 → 0.22.0

package/dist/node/value.mjs

@@ -52,14 +52,15 @@ function setArray(item, comment, value) {
 	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 nextSet = new Set(next);
+	if (nextSet.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) => createNodes(item)) : templates.flatMap((template) => template.get()))
 	};
 	return handleArray({
-		next: new Set(next),
+		next: nextSet,
 		previous: new Set(previous)
 	}, {
 		templates,
@@ -67,10 +68,8 @@ function setArray(item, comment, value) {
 	}, item.nodes);
 }
 function setNodes(item, comment, next) {
-	if (item.nodes == null) {
-		if (comment.parentNode != null) replaceNodes([comment], next);
-		else if (item.text?.parentNode != null) replaceNodes([item.text], next);
-	} else replaceNodes(item.nodes, next);
+	if (item.nodes == null) replaceNodes([comment], next);
+	else replaceNodes(item.nodes, next);
 	removeFragments(item.fragments);
 	return next;
 }
@@ -81,15 +80,13 @@ function setReactiveValue(data, comment, reactive) {
 	data.mora.subscribers.add(reactive.subscribe((value) => {
 		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
 		else setReactiveValueForSingle(item, comment, value);
-		item.nodes = [...item.nodes ?? [comment]];
+		item.nodes ??= [comment];
 	}));
 }
 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;
+	const { fragments, nodes } = setArray(item, comment, value);
+	item.fragments = fragments;
+	item.nodes = nodes;
 }
 function setReactiveValueForSingle(item, comment, value) {
 	const valueIsFragment = isFragment(value);

package/dist/parse.d.mts

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

package/dist/parse.mjs

@@ -1,15 +1,17 @@
-import { EXPRESSION_ABYDON_ATTRIBUTE_FULL } from "./constants.mjs";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_EVENT_ATTRIBUTE, WHITESPACE } from "./constants.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 //#region src/parse.ts
 function handleExpression(data, prefix, expression) {
 	if (Array.isArray(expression)) {
+		if (EXPRESSION_EVENT_ATTRIBUTE.test(prefix.split(WHITESPACE).at(-1))) return transformExpression(prefix, data.values.push(expression) - 1);
 		const { length } = expression;
 		let expressions = "";
 		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 transformExpression(prefix, data.values.push(expression) - 1);
-	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
+	const asString = getString(expression);
+	return asString.trim().length === 0 ? prefix : `${prefix}${asString}`;
 }
 function parse(data) {
 	if (data.template != null) return data.template;
@@ -22,7 +24,7 @@ function parse(data) {
 	return data.template;
 }
 function transformAttribute(_, name, index) {
-	return `_${name}="@abydon.${index}@"`;
+	return `abydon-${name}="abydon.${index}"`;
 }
 function transformExpression(prefix, index) {
 	return `${prefix}<!--abydon.${index}-->`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.20.0",
+	"version": "0.22.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -42,15 +42,16 @@
 		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.165",
-		"@oscarpalmer/mora": "^0.27",
-		"@oscarpalmer/toretto": "^0.41"
+		"@oscarpalmer/atoms": "^0.185",
+		"@oscarpalmer/mora": "^0.29",
+		"@oscarpalmer/toretto": "^0.43"
 	},
 	"devDependencies": {
-		"@oscarpalmer/oui": "^0.19",
-		"@types/node": "^25.5",
+		"@oscarpalmer/oui": "^0.20",
+		"@oxlint/plugins": "^1.62",
+		"@types/node": "^25.6",
 		"@vitest/coverage-istanbul": "^4.1",
-		"jsdom": "^28.1",
+		"jsdom": "^29.1",
 		"tsdown": "^0.21",
 		"typescript": "^5.9",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",

package/src/{node/attribute → attribute}/index.ts

@@ -1,29 +1,31 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {parse} from '@oscarpalmer/atoms/string';
-import {computed, isReactive, isSignal} from '@oscarpalmer/mora';
+import {computed, isSignal} from '@oscarpalmer/mora';
 import {
-	EVENT_ON_PREFIXED,
+	EVENT_ON_VALUE,
 	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
 	EXPRESSION_ABYDON_CONTENT,
 	EXPRESSION_EVENT_PREFIX,
-	EXPRESSION_PERIOD,
 	INPUT_TYPE_CHECKBOX,
+	INPUT_TYPE_RADIO,
 	PROPERTY_CHECKED,
 	PROPERTY_VALUE,
-} from '../../constants';
-import {isInputElement} from '../../helpers/dom';
-import type {FragmentData} from '../../models';
-import {mapEvent} from '../event';
+} from '../constants';
+import {isInputElement} from '../helpers/dom';
+import type {FragmentData} from '../models';
+import {mapEvent} from '../node/event';
 import {setAttribute} from './value';
 
 function getValue(data: FragmentData, original: string): unknown {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? '');
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
 
 	return matches == null ? original : data.values[+matches[1]];
 }
 
 export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void {
-	const attributes = [...element.attributes];
+	const attributes = [...element.attributes].sort((first, second) =>
+		first.name.localeCompare(second.name),
+	);
+
 	const {length} = attributes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -41,13 +43,8 @@ export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElem
 				mapEvent(element, actualName, actualValue);
 				break;
 
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === 'function':
-			case isReactive(actualValue):
-				mapValue(data, element, actualName, actualValue);
-				break;
-
 			default:
+				mapValue(data, element, actualName, actualValue);
 				break;
 		}
 	}
@@ -65,23 +62,9 @@ function mapValue(
 		setAttribute(data, element, name, value);
 	}
 
-	if (!isInputElement(element) || !isSignal(value)) {
-		return;
-	}
-
-	let property: string | undefined;
-
-	if (name === PROPERTY_CHECKED && element.type === INPUT_TYPE_CHECKBOX) {
-		property = PROPERTY_CHECKED;
-	} else if (name === PROPERTY_VALUE) {
-		property = PROPERTY_VALUE;
-	}
-
-	if (property != null) {
-		mapEvent(element, EVENT_ON_PREFIXED, () => {
-			const next = element[property as keyof typeof element];
-
-			value.set(parse(String(next)) ?? next);
+	if (isInputElement(element) && isSignal(value) && name in element) {
+		mapEvent(element, EVENT_ON_VALUE, () => {
+			value.set(element[name as keyof typeof element]);
 		});
 	}
 }

package/src/attribute/value.ts

@@ -0,0 +1,140 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getString} from '@oscarpalmer/atoms/string';
+import {camelCase} from '@oscarpalmer/atoms/string/case';
+import {isReactive} from '@oscarpalmer/mora';
+import {setAttribute as setTorettoAttribute} from '@oscarpalmer/toretto/attribute';
+import {setStyle} from '@oscarpalmer/toretto/style';
+import {
+	ATTRIBUTE_CLASS_PREFIX_LENGTH,
+	ATTRIBUTE_NAME_DELIMITER,
+	EXPRESSION_ATTRIBUTE_CLASS,
+	EXPRESSION_ATTRIBUTE_STYLE_FULL,
+	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
+	EXPRESSION_ATTRIBUTE_STYLE_PROPERTY,
+	PROPERTY_CHECKED,
+	PROPERTY_VALUE,
+	VALUE_TRUE,
+} from '../constants';
+import type {FragmentData} from '../models';
+
+function getStyleValue(value: unknown, unit: string, isProperty: boolean): string | undefined {
+	if (removeStyleValue(value, unit, isProperty)) {
+		return;
+	}
+
+	return value === true || value === VALUE_TRUE ? unit : `${getString(value)}${unit ?? ''}`;
+}
+
+function removeStyleValue(value: unknown, unit: unknown, isProperty: boolean): boolean {
+	if (value == null || value === false || (isProperty && isNullableOrWhitespace(value))) {
+		return true;
+	}
+
+	return unit == null && (value === true || value === VALUE_TRUE);
+}
+
+export function setAttribute(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	switch (true) {
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
+			setClassValues(data, element, name, value);
+			return;
+
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
+			setStyleValues(data, element, name, value);
+			return;
+
+		default:
+			setValue(data, element, name, value);
+			break;
+	}
+}
+
+function setClassValues(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	function update(value: unknown): void {
+		if (value === true || value === VALUE_TRUE) {
+			element.classList.add(...classes);
+		} else {
+			element.classList.remove(...classes);
+		}
+	}
+
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
+
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
+	}
+}
+
+function setStyleValues(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name)!;
+
+	const isProperty = EXPRESSION_ATTRIBUTE_STYLE_PROPERTY.test(name);
+
+	property = camelCase(property);
+
+	if (isProperty) {
+		property = `--${property}`;
+	}
+
+	function update(value: unknown): void {
+		setStyle(
+			element,
+			property as keyof CSSStyleDeclaration,
+			getStyleValue(value, unit, isProperty),
+		);
+	}
+
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
+	}
+}
+
+function setValue(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	const isReactiveValue = isReactive(value);
+
+	unsetValue(element, name, isReactiveValue ? value.peek() : value);
+
+	if (isReactiveValue) {
+		data.mora.subscribers.add(
+			value.subscribe(next => {
+				setTorettoAttribute(element, name, next);
+			}),
+		);
+	} else {
+		setTorettoAttribute(element, name, value);
+	}
+}
+
+function unsetValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	if (name === PROPERTY_CHECKED) {
+		(element as HTMLInputElement).checked = !(value === true || value === VALUE_TRUE);
+	}
+
+	if (name === PROPERTY_VALUE) {
+		(element as HTMLInputElement).value = (element as HTMLInputElement).value === '' ? '_' : '';
+	}
+}

package/src/constants.ts

@@ -8,6 +8,8 @@ export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
 export const ATTRIBUTE_NAME_DELIMITER = '.';
 
+export const CHANGE_INPUTS = new Set(['checkbox', 'radio']);
+
 export const ERROR_FRAGMENT = 'Fragment function must return a Fragment instance';
 
 export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
@@ -29,17 +31,15 @@ export const EVENT_DEFAULTS: Record<string, string> = {
 	TEXTAREA: EVENT_INPUT,
 };
 
-export const EVENT_ON_PREFIXED = '@on';
-
 export const EVENT_ON_VALUE = 'on';
 
 export const EVENT_OPTIONS_DELIMITER = ':';
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-.]+(?::[a-z:]+)?)="<!--abydon.(\d+)-->"/g;
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^abydon-/;
 
-export const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
+export const EXPRESSION_ABYDON_CONTENT = /^abydon\.(\d+)$/;
 
 export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 
@@ -47,9 +47,11 @@ export const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$
 
 export const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
 
-export const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
+export const EXPRESSION_ATTRIBUTE_STYLE_PROPERTY = /^style\.--/;
+
+export const EXPRESSION_EVENT_ATTRIBUTE = /^@([\w-]+)(?::([a-z:]+))?="$/i;
 
-export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+export const EXPRESSION_EVENT_NAME = /^@?([\w-]+)(?::([a-z:]+))?$/i;
 
 export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
 
@@ -61,10 +63,12 @@ export const EXPRESSION_EVENT_PREFIX = /^@/;
 
 export const EXPRESSION_PERIOD = /\./;
 
-export const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+export const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
 
 export const INPUT_TYPE_CHECKBOX = 'checkbox';
 
+export const INPUT_TYPE_RADIO = 'radio';
+
 export const NAME_FRAGMENT = '$fragment';
 
 export const NAME_FRAGMENTS = '$fragments';
@@ -76,3 +80,7 @@ export const PROPERTY_IDENTIFIER = 'identifier';
 export const PROPERTY_VALUE = 'value';
 
 export const TEMPLATE_ITEM = '<>';
+
+export const VALUE_TRUE = 'true';
+
+export const WHITESPACE = /\s+/g;

package/src/fragment.ts

@@ -16,6 +16,13 @@ export class Fragment {
 		cache: true,
 	};
 
+	/**
+	 * Is template caching enabled?
+	 */
+	get caching(): boolean {
+		return this.#configuration.cache;
+	}
+
 	/**
 	 * Fragment identifier
 	 */
@@ -91,14 +98,12 @@ export class Fragment {
 
 			mapNodes(
 				data,
-				data.items.flatMap(
-					item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
-				),
+				data.items.flatMap(item => item.nodes!),
 			);
 		}
 
 		return data.items.flatMap(
-			item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
+			item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes!,
 		);
 	}
 
@@ -137,7 +142,7 @@ function removeFragment(data: FragmentData): void {
 			fragments?.[fragmentIndex]?.remove();
 		}
 
-		removeNodes(nodes ?? []);
+		removeNodes(nodes!);
 	}
 
 	data.items.length = 0;

package/src/fragments.ts

@@ -14,13 +14,6 @@ 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,
@@ -39,18 +32,16 @@ export class Fragments {
 			subscriber: undefined,
 		};
 
-		states.set(this, this.#state);
+		fragmentsStates.set(this, this.#state);
 
 		initializeFragments(this.#state);
 	}
 }
 
 export function handleFragments(item: Fragments | FragmentsState, remove: boolean): void {
-	const state = isFragments(item) ? states.get(item) : item;
+	const state = isFragments(item) ? fragmentsStates.get(item) : item;
 
-	if (state != null) {
-		(remove ? removeFragments : initializeFragments)(state);
-	}
+	(remove ? removeFragments : initializeFragments)(state!);
 }
 
 function handleItems(state: FragmentsState, items: unknown[]): void {
@@ -135,4 +126,4 @@ function updateFragments(state: FragmentsState, active?: Set<string>): void {
 
 //
 
-const states: WeakMap<Fragments, FragmentsState> = new WeakMap();
+export const fragmentsStates: WeakMap<Fragments, FragmentsState> = new WeakMap();

package/src/helpers/index.ts

@@ -27,10 +27,20 @@ export function compareArrays(
 	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 
+/**
+ * Is the value a Fragment?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragment, otherwise `false`
+ */
 export function isFragment(value: unknown): value is Fragment {
 	return isNamed(value, NAME_FRAGMENT);
 }
 
+/**
+ * Is the value a Fragments?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragments, otherwise `false`
+ */
 export function isFragments(value: unknown): value is Fragments {
 	return isNamed(value, NAME_FRAGMENTS);
 }

package/src/index.ts

@@ -1,10 +1,10 @@
 import '@oscarpalmer/mora';
-import type {ReactiveArray} from '@oscarpalmer/mora';
+import {isArray, type ReactiveArray} from '@oscarpalmer/mora';
 import {Fragment} from './fragment';
 import {Fragments} from './fragments';
 
 /**
- * Create Fragments from a reactive array
+ * Create a Fragments from a reactive array
  * @param array Reactive array
  * @param identify Function to identify item
  * @param fragment Function to create fragment from item
@@ -15,11 +15,23 @@ export function fragments<Item>(
 	identify: (item: Item) => unknown,
 	fragment: (item: Item) => Fragment,
 ): Fragments {
+	if (!isArray(array)) {
+		throw new TypeError('Fragments array must be a reactive array');
+	}
+
+	if (typeof identify !== 'function') {
+		throw new TypeError('Fragments identify must be a function');
+	}
+
+	if (typeof fragment !== 'function') {
+		throw new TypeError('Fragments fragment must be a function');
+	}
+
 	return new Fragments(array as ReactiveArray<unknown>, identify as never, fragment as never);
 }
 
 /**
- * Create Fragment from a template
+ * Create a Fragment from a template
  * @returns Fragment
  */
 export function html(template: TemplateStringsArray, ...values: unknown[]): Fragment {
@@ -29,3 +41,4 @@ export function html(template: TemplateStringsArray, ...values: unknown[]): Frag
 export * from '@oscarpalmer/mora';
 export type {Fragment} from './fragment';
 export type {Fragments} from './fragments';
+export {isFragment, isFragments} from './helpers';

package/src/node/event.ts

@@ -1,12 +1,12 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {
+	CHANGE_INPUTS,
 	EVENT_CHANGE,
 	EVENT_DEFAULTS,
 	EVENT_INPUT,
 	EVENT_ON_VALUE,
 	EVENT_OPTIONS_DELIMITER,
 	EVENT_SUBMIT,
-	EXPRESSION_EVENT_CHANGE_TYPES,
 	EXPRESSION_EVENT_NAME,
 	EXPRESSION_EVENT_OPTIONS_ACTIVE,
 	EXPRESSION_EVENT_OPTIONS_CAPTURE,
@@ -29,7 +29,7 @@ function getType(element: HTMLElement | SVGElement, type: string): string {
 	}
 
 	if (element instanceof HTMLInputElement) {
-		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) {
+		if (CHANGE_INPUTS.has(element.type)) {
 			return EVENT_CHANGE;
 		}
 
@@ -40,9 +40,16 @@ function getType(element: HTMLElement | SVGElement, type: string): string {
 }
 
 export function mapEvent(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name)!;
 
-	if (type != null && typeof value === 'function') {
-		on(element, getType(element, type), value as EventListener, getOptions(options ?? ''));
+	const values = Array.isArray(value) ? value : [value];
+	const {length} = values;
+
+	for (let index = 0; index < length; index += 1) {
+		const item = values[index];
+
+		if (typeof item === 'function') {
+			on(element, getType(element, type), item as EventListener, getOptions(options ?? ''));
+		}
 	}
 }