@oscarpalmer/abydon 0.20.0 → 0.22.0

package/src/node/index.ts

@@ -1,24 +1,25 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
 import {
 	computed,
 	isComputed,
 	isReactive,
 	isSignal,
 	type Computed,
-	type Reactive,
+	type ReactiveArray,
 } from '@oscarpalmer/mora';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE} from '../constants';
-import {handleFragments} from '../fragments';
+import {mapAttributes} from '../attribute/index';
+import {EVENT_ON_VALUE, EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE} from '../constants';
+import {Fragments, fragmentsStates, 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';
 import {mapEvent} from './event';
+import {setReactiveValue} from './value';
 
 function mapNode(data: FragmentData, comment: Comment): void {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? '');
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent);
 	const value = matches == null ? null : data.values[+matches[1]];
 
 	if (value != null) {
@@ -53,23 +54,33 @@ export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 }
 
 function mapTextarea(data: FragmentData, element: HTMLTextAreaElement): void {
-	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	const [, index] =
+		EXPRESSION_TEXTAREA_VALUE.exec(element.textContent) ??
+		EXPRESSION_TEXTAREA_VALUE.exec(element.value) ??
+		[];
 
 	if (index == null) {
 		return;
 	}
 
+	element.textContent = '';
 	element.value = '';
 
 	const value = data.values[Number.parseInt(index, 10)];
 
 	if (isSignal(value)) {
-		element.value = String(value.peek());
+		element.value = getString(value.peek());
 
-		mapEvent(element, '@on', () => {
+		mapEvent(element, EVENT_ON_VALUE, () => {
 			value.set(element.value);
 		});
 
+		data.mora.subscribers.add(
+			value.subscribe(value => {
+				element.value = getString(value);
+			}),
+		);
+
 		return;
 	}
 
@@ -82,11 +93,11 @@ function mapTextarea(data: FragmentData, element: HTMLTextAreaElement): void {
 	}
 
 	if (reactive == null) {
-		element.value = String(value);
+		element.value = '';
 	} else {
 		data.mora.subscribers.add(
 			reactive.subscribe(value => {
-				element.value = String(value);
+				element.value = getString(value);
 			}),
 		);
 	}
@@ -99,8 +110,7 @@ function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 			break;
 
 		case isFragments(value):
-			handleFragments(value, false);
-			setReactiveValue(data, comment, value.items as Reactive<unknown[], unknown>);
+			setFragmentsValue(data, comment, value);
 			break;
 
 		case isReactive(value):
@@ -132,3 +142,11 @@ function setComputedValue(data: FragmentData, comment: Comment, callback: Generi
 
 	setReactiveValue(data, comment, value);
 }
+
+function setFragmentsValue(data: FragmentData, comment: Comment, fragments: Fragments): void {
+	const state = fragmentsStates.get(fragments)!;
+
+	handleFragments(state, false);
+
+	setReactiveValue(data, comment, state.mapped as ReactiveArray<unknown>);
+}

package/src/node/value.ts

@@ -113,11 +113,7 @@ function replaceText(item: FragmentItem, comment: Comment, isNullable: boolean):
 	replaceNodes(item.nodes ?? [], to);
 }
 
-function setArray(
-	item: FragmentItem,
-	comment: Comment,
-	value: unknown[],
-): Partial<FragmentItem> | boolean {
+function setArray(item: FragmentItem, comment: Comment, value: unknown[]): Partial<FragmentItem> {
 	if (value.length === 0) {
 		return {
 			nodes: setText(item, comment, value),
@@ -129,7 +125,9 @@ function setArray(
 	const next = templates.map(fragment => fragment.identifier) as unknown[];
 	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
 
-	if (new Set(next).size !== templates.length) {
+	const nextSet = new Set(next);
+
+	if (nextSet.size !== templates.length) {
 		templates = [];
 	}
 
@@ -150,7 +148,7 @@ function setArray(
 
 	return handleArray(
 		{
-			next: new Set(next),
+			next: nextSet,
 			previous: new Set(previous),
 		},
 		{
@@ -163,11 +161,7 @@ function setArray(
 
 function setNodes(item: FragmentItem, comment: Comment, next: ChildNode[]): ChildNode[] {
 	if (item.nodes == null) {
-		if (comment.parentNode != null) {
-			replaceNodes([comment], next);
-		} else if (item.text?.parentNode != null) {
-			replaceNodes([item.text], next);
-		}
+		replaceNodes([comment], next);
 	} else {
 		replaceNodes(item.nodes, next);
 	}
@@ -196,25 +190,16 @@ export function setReactiveValue(
 				setReactiveValueForSingle(item, comment, value);
 			}
 
-			item.nodes = [...(item.nodes ?? [comment])];
+			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;
+	const {fragments, nodes} = setArray(item, comment, value);
 
-	if (typeof result === 'boolean') {
-		if (result) {
-			item.nodes = item.text == null ? [] : [item.text];
-		} else {
-			item.nodes = undefined;
-		}
-	} else {
-		item.nodes = result?.nodes;
-	}
+	item.fragments = fragments;
+	item.nodes = nodes;
 }
 
 function setReactiveValueForSingle(item: FragmentItem, comment: Comment, value: unknown): void {

package/src/parse.ts

@@ -1,9 +1,17 @@
-import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {EXPRESSION_ABYDON_ATTRIBUTE_FULL} from './constants';
+import {getString} from '@oscarpalmer/atoms/string';
+import {
+	EXPRESSION_ABYDON_ATTRIBUTE_FULL,
+	EXPRESSION_EVENT_ATTRIBUTE,
+	WHITESPACE,
+} from './constants';
 import type {FragmentData} from './models';
 
 function handleExpression(data: FragmentData, prefix: string, expression: unknown): string {
 	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 = '';
@@ -19,7 +27,9 @@ function handleExpression(data: FragmentData, prefix: string, expression: unknow
 		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}`;
 }
 
 export function parse(data: FragmentData): string {
@@ -44,7 +54,7 @@ export function parse(data: FragmentData): string {
 }
 
 function transformAttribute(_: string, name: string, index: string): string {
-	return `_${name}="@abydon.${index}@"`;
+	return `abydon-${name}="abydon.${index}"`;
 }
 
 function transformExpression(prefix: string, index: number): string {

package/dist/fragment-9qTBAvtR.d.mts

@@ -1,82 +0,0 @@
-import { Reactive, ReactiveArray, Unsubscribe } from "@oscarpalmer/mora";
-
-//#region src/models.d.ts
-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;
-};
-type FragmentData = {
-  expressions: unknown[];
-  items: FragmentItem[];
-  mora: MoraData;
-  strings: TemplateStringsArray;
-  template?: string;
-  values: unknown[];
-};
-type FragmentItem = {
-  fragments?: Fragment[];
-  nodes?: ChildNode[];
-  text?: Text;
-};
-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>>;
-};
-//#endregion
-//#region src/fragment.d.ts
-declare class Fragment {
-  #private;
-  /**
-   * Fragment identifier
-   */
-  get identifier(): unknown;
-  constructor(strings: TemplateStringsArray, expressions: unknown[]);
-  /**
-   * Append the fragment to the given element
-   * @param element Element to append to
-   */
-  appendTo(element: Element): void;
-  /**
-   * 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[];
-  /**
-   * 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;
-}
-//#endregion
-export { FragmentsState as a, FragmentItem as i, FragmentConfiguration as n, FragmentData as r, Fragment as t };

package/dist/node/attribute/index.d.mts

@@ -1,6 +0,0 @@
-import { r as FragmentData } from "../../fragment-9qTBAvtR.mjs";
-
-//#region src/node/attribute/index.d.ts
-declare function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void;
-//#endregion
-export { mapAttributes };

package/dist/node/attribute/value.mjs

@@ -1,65 +0,0 @@
-import { EVENT_CHANGE, EVENT_INPUT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, PROPERTY_CHECKED, PROPERTY_VALUE } from "../../constants.mjs";
-import { isReactive } from "@oscarpalmer/mora";
-import { isBooleanAttribute, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto/attribute";
-//#region src/node/attribute/value.ts
-function getCallback(element, name) {
-	if (isBooleanAttribute(name) && name in element) return name === "checked" ? updateChecked : updateProperty;
-	return name === "value" ? updateValue : setAttribute$1;
-}
-function setAttribute(data, element, name, value) {
-	switch (true) {
-		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
-			setClasses(data, element, name, value);
-			return;
-		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
-			setStyle(data, element, name, value);
-			return;
-		default:
-			setValue(data, element, name, value);
-			break;
-	}
-}
-function setClasses(data, element, name, value) {
-	function update(value) {
-		if (value === true) element.classList.add(...classes);
-		else element.classList.remove(...classes);
-	}
-	const classes = name.slice(6).split(".");
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
-	else update(value);
-}
-function setStyle(data, element, name, value) {
-	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
-	if (property == null) return;
-	function update(value) {
-		if (value == null || value === false || value === true && unit == null) element.style.removeProperty(property);
-		else element.style.setProperty(property, value === true ? unit : String(value));
-	}
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
-	else update(value);
-}
-function setValue(data, element, name, value) {
-	const callback = getCallback(element, name);
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
-		callback(element, name, next);
-	}));
-	else callback(element, name, value);
-}
-function updateChecked(element, name, value) {
-	updateElement(EVENT_CHANGE, PROPERTY_CHECKED, element, name, value, value === true);
-}
-function updateElement(event, property, element, name, value, next) {
-	if (!(property in element) || element[property] === next) return;
-	setAttribute$1(element, name, value);
-	if (element[property] === next) return;
-	element[property] = next;
-	element.dispatchEvent(new Event(event, { bubbles: true }));
-}
-function updateProperty(element, name, value) {
-	setAttribute$1(element, name, value === true);
-}
-function updateValue(element, name, value) {
-	updateElement(element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT, PROPERTY_VALUE, element, name, value, String(value));
-}
-//#endregion
-export { setAttribute };

package/src/node/attribute/value.ts

@@ -1,158 +0,0 @@
-import type {PlainObject} from '@oscarpalmer/atoms/models';
-import {isReactive} from '@oscarpalmer/mora';
-import {
-	isBooleanAttribute,
-	setAttribute as setTorettoAttribute,
-} from '@oscarpalmer/toretto/attribute';
-import {
-	ATTRIBUTE_CLASS_PREFIX_LENGTH,
-	ATTRIBUTE_NAME_DELIMITER,
-	EVENT_CHANGE,
-	EVENT_INPUT,
-	EXPRESSION_ATTRIBUTE_CLASS,
-	EXPRESSION_ATTRIBUTE_STYLE_FULL,
-	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
-	PROPERTY_CHECKED,
-	PROPERTY_VALUE,
-} from '../../constants';
-import type {FragmentData} from '../../models';
-
-function getCallback(element: HTMLElement | SVGElement, name: string) {
-	if (isBooleanAttribute(name) && name in element) {
-		return name === PROPERTY_CHECKED ? updateChecked : updateProperty;
-	}
-
-	return name === PROPERTY_VALUE ? updateValue : setTorettoAttribute;
-}
-
-export function setAttribute(
-	data: FragmentData,
-	element: HTMLElement | SVGElement,
-	name: string,
-	value: unknown,
-): void {
-	switch (true) {
-		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
-			setClasses(data, element, name, value);
-			return;
-
-		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
-			setStyle(data, element, name, value);
-			return;
-
-		default:
-			setValue(data, element, name, value);
-			break;
-	}
-}
-
-function setClasses(
-	data: FragmentData,
-	element: HTMLElement | SVGElement,
-	name: string,
-	value: unknown,
-): void {
-	function update(value: unknown): void {
-		if (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 setStyle(
-	data: FragmentData,
-	element: HTMLElement | SVGElement,
-	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);
-		} else {
-			element.style.setProperty(property, value === true ? unit : String(value));
-		}
-	}
-
-	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 callback = getCallback(element, name);
-
-	if (isReactive(value)) {
-		data.mora.subscribers.add(
-			value.subscribe(next => {
-				callback(element, name, next);
-			}),
-		);
-	} else {
-		callback(element, name, value);
-	}
-}
-
-function updateChecked(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	updateElement(EVENT_CHANGE, PROPERTY_CHECKED, element, name, value, value === true);
-}
-
-function updateElement(
-	event: string,
-	property: string,
-	element: HTMLElement | SVGElement,
-	name: string,
-	value: unknown,
-	next: unknown,
-): void {
-	if (!(property in element) || (element as unknown as PlainObject)[property] === next) {
-		return;
-	}
-
-	setTorettoAttribute(element, name, value);
-
-	if ((element as unknown as PlainObject)[property] === next) {
-		return;
-	}
-
-	(element as unknown as PlainObject)[property] = next;
-
-	element.dispatchEvent(new Event(event, {bubbles: true}));
-}
-
-function updateProperty(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	setTorettoAttribute(element, name, value === true);
-}
-
-function updateValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	updateElement(
-		element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT,
-		PROPERTY_VALUE,
-		element,
-		name,
-		value,
-		String(value),
-	);
-}