@oscarpalmer/abydon 0.13.0 → 0.15.0

package/src/node/attribute/value.ts

@@ -6,12 +6,14 @@ import {
 	setAttribute as setAttr,
 } from '@oscarpalmer/toretto/attribute';
 import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {
+	ATTRIBUTE_CLASS_PREFIX_LENGTH,
+	EXPRESSION_ATTRIBUTE_CLASS,
+	EXPRESSION_ATTRIBUTE_STYLE_FULL,
+	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
+} from '../../constants';
 import type {FragmentData} from '../../models';
 
-const classExpression = /^class\./;
-const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
-const stylePrefixExpression = /^style\./;
-
 export function setAttribute(
 	data: FragmentData,
 	element: HTMLOrSVGElement,
@@ -21,11 +23,11 @@ export function setAttribute(
 	element.removeAttribute(name);
 
 	switch (true) {
-		case classExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
 			setClasses(data, element, name, value);
 			return;
 
-		case stylePrefixExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
 			setStyle(data, element, name, value);
 			return;
 
@@ -49,7 +51,7 @@ function setClasses(
 		}
 	}
 
-	const classes = name.slice(6).split('.');
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(value.subscribe(update));
@@ -64,6 +66,12 @@ function setStyle(
 	name: string,
 	value: unknown,
 ): void {
+	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+
+	if (property == null) {
+		return;
+	}
+
 	function update(value: unknown): void {
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
@@ -75,14 +83,10 @@ function setStyle(
 		}
 	}
 
-	const [, property, unit] = styleFullExpression.exec(name) ?? [];
-
-	if (property != null) {
-		if (isReactive(value)) {
-			data.mora.subscribers.add(value.subscribe(update));
-		} else {
-			update(value);
-		}
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
 	}
 }
 
@@ -92,12 +96,17 @@ function setValue(
 	name: string,
 	value: unknown,
 ): void {
-	const callback =
-		isBooleanAttribute(name) && name in element
-			? name === 'selected'
-				? updateSelected
-				: updateProperty
-			: setAttr;
+	let callback: (
+		element: HTMLOrSVGElement,
+		name: string,
+		value: unknown,
+	) => void;
+
+	if (isBooleanAttribute(name) && name in element) {
+		callback = name === 'selected' ? updateSelected : updateProperty;
+	} else {
+		callback = setAttr;
+	}
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(
@@ -110,12 +119,6 @@ function setValue(
 	}
 }
 
-function triggerSelectChange(select: HTMLSelectElement): void {
-	if (select != null) {
-		select.dispatchEvent(new Event('change', {bubbles: true}));
-	}
-}
-
 function updateProperty(
 	element: HTMLOrSVGElement,
 	name: string,
@@ -133,7 +136,7 @@ function updateSelected(
 	const options = [...(select?.options ?? [])];
 
 	if (select != null && options.includes(element as HTMLOptionElement)) {
-		triggerSelectChange(select);
+		select.dispatchEvent(new Event('change', {bubbles: true}));
 	}
 
 	updateProperty(element, name, value);

package/src/node/event.ts

@@ -1,18 +1,17 @@
 import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
-
-const controllers = new WeakMap<HTMLOrSVGElement, AbortController>();
-
-const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
-
-const reason = 'Event removed as element was removed from document by Abydon';
+import {
+	ABORT_CONTROLLERS,
+	EXPRESSION_EVENT_NAME,
+	REASON_EVENT_REMOVED,
+} from '../constants';
 
 function getController(element: HTMLOrSVGElement): AbortController {
-	let controller = controllers.get(element);
+	let controller = ABORT_CONTROLLERS.get(element);
 
 	if (controller == null) {
 		controller = new AbortController();
 
-		controllers.set(element, controller);
+		ABORT_CONTROLLERS.set(element, controller);
 	}
 
 	return controller;
@@ -24,7 +23,7 @@ function getOptions(options: string): AddEventListenerOptions {
 	return {
 		capture: parts.includes('c') || parts.includes('capture'),
 		once: parts.includes('o') || parts.includes('once'),
-		passive: !parts.includes('a') && !parts.includes('active'),
+		passive: !(parts.includes('a') || parts.includes('active')),
 	};
 }
 
@@ -35,7 +34,7 @@ export function mapEvent(
 ): void {
 	element.removeAttribute(name);
 
-	const [, type, options] = eventNamePattern.exec(name) ?? [];
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
 
 	if (typeof value === 'function' && type != null) {
 		element.addEventListener(type, value as EventListener, {
@@ -46,6 +45,6 @@ export function mapEvent(
 }
 
 export function removeEvents(element: HTMLOrSVGElement): void {
-	controllers.get(element)?.abort(reason);
-	controllers.delete(element);
+	ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
+	ABORT_CONTROLLERS.delete(element);
 }

package/src/node/index.ts

@@ -1,16 +1,16 @@
 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 {isFragment} from '../helpers';
+import {EXPRESSION_COMMENT_CONTENT} from '../constants';
+import {handleFragments} from '../fragments';
+import {isFragment, isFragments} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
 import {setReactiveValue} from './value';
 
-const commentExpression = /^abydon\.(\d+)$/;
-
 function mapNode(data: FragmentData, comment: Comment): void {
-	const matches = commentExpression.exec(comment.textContent ?? '');
+	const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? '');
 	const value = matches == null ? null : data.values[+matches[1]];
 
 	if (value != null) {
@@ -46,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;
@@ -61,7 +70,7 @@ function replaceComment(
 	comment: Comment,
 	value: unknown,
 ): void {
-	const item = data.items.find(item => item.nodes.includes(comment));
+	const item = data.items.find(item => item.nodes?.includes(comment));
 	const nodes = createNodes(value);
 
 	if (item != null) {

package/src/node/value.ts

@@ -1,5 +1,4 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import type {Key} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
 import type {Reactive} from '@oscarpalmer/mora';
 import {isChildNode} from '@oscarpalmer/toretto/is';
@@ -8,6 +7,94 @@ import {compareArrays, isFragment} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
 import type {FragmentData, FragmentItem} from '../models';
 
+//
+
+type Identifiers = {
+	next: unknown[];
+	previous: (unknown | undefined)[];
+};
+
+type BaseItems = {
+	fragments: Fragment[];
+	templates: Fragment[];
+};
+
+type ExtendedItems = {
+	next: Fragment[];
+} & BaseItems;
+
+//
+
+function addToArray(
+	identifiers: Identifiers,
+	items: ExtendedItems,
+	nodes: ChildNode[],
+	added: boolean,
+): void {
+	let position = nodes[0];
+
+	const before =
+		added && !identifiers.previous.includes(items.templates[0].identifier);
+
+	const next = items.next.flatMap(fragment =>
+		fragment.get().flatMap(node => ({
+			identifier: fragment.identifier,
+			value: node,
+		})),
+	);
+
+	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);
+			} else {
+				position.after(node.value);
+			}
+		}
+
+		position = node.value;
+	}
+}
+
+function handleArray(
+	identifiers: Identifiers,
+	items: BaseItems,
+	nodes: ChildNode[],
+): Partial<FragmentItem> {
+	const next = items.templates.map(
+		template =>
+			items.fragments?.find(
+				fragment => fragment.identifier === template.identifier,
+			) ?? template,
+	);
+
+	const comparison = compareArrays(items.fragments ?? [], items.templates);
+
+	if (comparison !== 'removed') {
+		addToArray(identifiers, {...items, next}, nodes, comparison === 'added');
+	}
+
+	const toRemove =
+		items.fragments?.filter(
+			fragment => !identifiers.next.includes(fragment.identifier),
+		) ?? [];
+
+	const {length} = toRemove;
+
+	for (let index = 0; index < length; index += 1) {
+		toRemove[index].remove();
+	}
+
+	return {
+		fragments: next,
+		nodes: next.flatMap(fragment => fragment.get()),
+	};
+}
+
 function removeFragments(fragments: Fragment[] | undefined): void {
 	if (fragments != null) {
 		const {length} = fragments;
@@ -18,16 +105,30 @@ function removeFragments(fragments: Fragment[] | undefined): void {
 	}
 }
 
+function replaceText(
+	item: FragmentItem,
+	comment: Comment,
+	isNullable: boolean,
+): void {
+	let to: ChildNode[];
+
+	if (isNullable) {
+		to = [comment];
+	} else {
+		to = item.text == null ? [] : [item.text];
+	}
+
+	replaceNodes(item.nodes ?? [], to);
+}
+
 function setArray(
-	fragments: Fragment[] | undefined,
-	nodes: ChildNode[] | undefined,
+	item: FragmentItem,
 	comment: Comment,
-	text: Text,
 	value: unknown[],
 ): Partial<FragmentItem> | boolean {
 	if (value.length === 0) {
 		return {
-			nodes: setText(fragments, nodes, comment, text, value),
+			nodes: setText(item, comment, value),
 		};
 	}
 
@@ -35,10 +136,10 @@ function setArray(
 		item => isFragment(item) && item.identifier != null,
 	) as Fragment[];
 
-	const identifiers = templates.map(fragment => fragment.identifier) as Key[];
-	const oldIdentifiers = fragments?.map(fragment => fragment.identifier) ?? [];
+	const next = templates.map(fragment => fragment.identifier) as unknown[];
+	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
 
-	if (new Set(identifiers).size !== templates.length) {
+	if (new Set(next).size !== templates.length) {
 		templates = [];
 	}
 
@@ -46,16 +147,14 @@ function setArray(
 
 	if (
 		noTemplates ||
-		nodes == null ||
-		oldIdentifiers.some(identifier => identifier == null)
+		item.nodes == null ||
+		previous.some(identifier => identifier == null)
 	) {
 		return {
 			fragments: noTemplates ? undefined : templates,
 			nodes: setNodes(
-				fragments,
-				nodes,
+				item,
 				comment,
-				text,
 				noTemplates
 					? value.flatMap(item => createNodes(item))
 					: templates.flatMap(template => template.get()),
@@ -63,84 +162,35 @@ function setArray(
 		};
 	}
 
-	const next = templates.map(
-		template =>
-			fragments?.find(
-				fragment => fragment.identifier === template.identifier,
-			) ?? template,
+	return handleArray(
+		{
+			next,
+			previous,
+		},
+		{
+			templates,
+			fragments: item.fragments ?? [],
+		},
+		item.nodes,
 	);
-
-	const comparison = compareArrays(fragments ?? [], templates);
-
-	if (comparison !== 'removed') {
-		let position = nodes[0];
-
-		const before =
-			comparison === 'added' &&
-			!oldIdentifiers.includes(templates[0].identifier);
-
-		const items = next.flatMap(fragment =>
-			fragment.get().flatMap(node => ({
-				identifier: fragment.identifier,
-				value: node,
-			})),
-		);
-
-		const {length} = items;
-
-		for (let index = 0; index < length; index += 1) {
-			const item = items[index];
-
-			if (
-				comparison === 'dissimilar' ||
-				!oldIdentifiers.includes(item.identifier)
-			) {
-				if (index === 0 && before) {
-					position.before(item.value);
-				} else {
-					position.after(item.value);
-				}
-			}
-
-			position = item.value;
-		}
-	}
-
-	const toRemove =
-		fragments?.filter(
-			fragment => !identifiers.includes(fragment.identifier as Key),
-		) ?? [];
-
-	const {length} = toRemove;
-
-	for (let index = 0; index < length; index += 1) {
-		toRemove[index].remove();
-	}
-
-	return {
-		fragments: next,
-		nodes: next.flatMap(fragment => fragment.get()),
-	};
 }
 
 function setNodes(
-	fragments: Fragment[] | undefined,
-	nodes: ChildNode[] | undefined,
+	item: FragmentItem,
 	comment: Comment,
-	text: Text,
 	next: ChildNode[],
 ): ChildNode[] {
-	if (nodes == null) {
+	if (item.nodes == null) {
 		if (comment.parentNode != null) {
 			replaceNodes([comment], next);
-		} else if (text.parentNode != null) {
-			replaceNodes([text], next);
+		} else if (item.text?.parentNode != null) {
+			replaceNodes([item.text], next);
 		}
 	} else {
-		replaceNodes(nodes, next);
+		replaceNodes(item.nodes, next);
 	}
 
-	removeFragments(fragments);
+	removeFragments(item.fragments);
 
 	return next;
 }
@@ -150,71 +200,91 @@ export function setReactiveValue(
 	comment: Comment,
 	reactive: Reactive<unknown>,
 ): void {
-	const item = data.items.find(item => item.nodes.includes(comment));
-	const text = new Text();
+	let item = data.items.find(item => item.nodes?.includes(comment));
+
+	item ??= {};
 
-	let fragments: Fragment[] | undefined;
-	let nodes: ChildNode[] | undefined;
+	item.text = new Text();
 
 	data.mora.subscribers.add(
 		reactive.subscribe(value => {
 			if (Array.isArray(value)) {
-				const result = setArray(fragments, nodes, comment, text, value);
-
-				fragments = typeof result === 'boolean' ? undefined : result?.fragments;
-
-				nodes =
-					typeof result === 'boolean'
-						? result
-							? [text]
-							: undefined
-						: result?.nodes;
+				setReactiveValueForArray(item, comment, value);
 			} else {
-				const valueIsFragment = isFragment(value);
-
-				fragments = valueIsFragment ? [value] : undefined;
-
-				if (valueIsFragment || isChildNode(value)) {
-					nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
-				} else {
-					nodes = setText(fragments, nodes, comment, text, value);
-				}
+				setReactiveValueForSingle(item, comment, value);
 			}
 
-			if (item != null) {
-				item.fragments = fragments;
-				item.nodes = [...(nodes ?? [comment])];
-			}
+			item.nodes = [...(item.nodes ?? [comment])];
 		}),
 	);
 }
 
+function setReactiveValueForArray(
+	item: FragmentItem,
+	comment: Comment,
+	value: unknown[],
+): void {
+	const result = setArray(item, comment, value);
+
+	item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
+
+	if (typeof result === 'boolean') {
+		if (result) {
+			item.nodes = item.text == null ? [] : [item.text];
+		} else {
+			item.nodes = undefined;
+		}
+	} else {
+		item.nodes = result?.nodes;
+	}
+}
+
+function setReactiveValueForSingle(
+	item: FragmentItem,
+	comment: Comment,
+	value: unknown,
+): void {
+	const valueIsFragment = isFragment(value);
+
+	item.fragments = valueIsFragment ? [value] : undefined;
+
+	if (valueIsFragment || isChildNode(value)) {
+		item.nodes = setNodes(item, comment, createNodes(value));
+	} else {
+		item.nodes = setText(item, comment, value);
+	}
+}
+
 function setText(
-	fragments: Fragment[] | undefined,
-	nodes: ChildNode[] | undefined,
+	item: FragmentItem,
 	comment: Comment,
-	text: Text,
 	value: unknown,
 ): ChildNode[] | undefined {
 	const isNullable = isNullableOrWhitespace(value);
 
-	text.textContent = isNullable ? '' : getString(value);
+	if (item.text != null) {
+		item.text.textContent = isNullable ? '' : getString(value);
+	}
 
 	let result = false;
 
-	if (nodes != null) {
-		replaceNodes(nodes, [isNullable ? comment : text]);
+	if (item.nodes != null) {
+		replaceText(item, comment, isNullable);
 
 		result = !isNullable;
 	} else if (isNullable && comment.parentNode == null) {
-		text.replaceWith(comment);
-	} else if (!isNullable && text.parentNode == null) {
-		comment.replaceWith(text);
+		item.text?.replaceWith(comment);
+	} else if (!isNullable && item?.text?.parentNode == null) {
+		if (item.text != null) {
+			comment.replaceWith(item.text);
+		}
 
 		result = true;
 	}
 
-	removeFragments(fragments);
+	removeFragments(item.fragments);
 
-	return result ? [text] : undefined;
+	if (result) {
+		return item.text == null ? [] : [item.text];
+	}
 }

package/src/parse.ts

@@ -31,17 +31,24 @@ function handleExpression(
 }
 
 export function parse(data: FragmentData): string {
+	if (data.template != null) {
+		return data.template;
+	}
+
 	const {length} = data.strings;
 
-	let template = '';
+	data.template = '';
 
 	for (let index = 0; index < length; index += 1) {
-		template += handleExpression(
+		data.template += handleExpression(
 			data,
 			data.strings[index],
 			data.expressions[index],
 		);
 	}
 
-	return template;
+	data.expressions = [];
+	data.strings = [] as never;
+
+	return data.template;
 }

package/types/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController>;
+export declare const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+export declare const EXPRESSION_ATTRIBUTE_CLASS: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_STYLE_FULL: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_STYLE_PREFIX: RegExp;
+export declare const EXPRESSION_COMMENT_FULL: RegExp;
+export declare const EXPRESSION_COMMENT_CONTENT: RegExp;
+export declare const EXPRESSION_EVENT_NAME: RegExp;
+export declare const REASON_EVENT_REMOVED = "Event removed as element was removed from document by Abydon";

package/types/fragment.d.ts

@@ -1,20 +1,38 @@
-import type { Key } from '@oscarpalmer/atoms/models';
+import type { FragmentConfiguration } from './models';
 export declare class Fragment {
-    private readonly $fragment;
-    private readonly data;
-    get identifier(): Key | undefined;
+    #private;
+    /**
+     * Fragment identifier
+     */
+    get identifier(): unknown;
     constructor(strings: TemplateStringsArray, expressions: unknown[]);
     /**
-     * Appends the fragment to the given element
+     * Append the fragment to the given element
+     * @param element Element to append to
      */
     appendTo(element: Element): void;
     /**
-     * Gets a list of the fragment's nodes
+     * Configure the fragment
+     * @param configuration Configuration options
+     * @returns Fragment
+     */
+    configure(configuration: FragmentConfiguration): Fragment;
+    /**
+     * Get a list of the fragment's nodes
+     * @returns List of nodes
      */
     get(): ChildNode[];
-    identify(identifier: Key): Fragment;
     /**
-     * Removes the fragment from the DOM
+     * 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;
+    /**
+     * Remove the fragment from the DOM
      */
     remove(): void;
 }