@oscarpalmer/abydon 0.21.0 → 0.23.0

package/src/node/value.ts

@@ -10,9 +10,30 @@ import type {FragmentData, FragmentItem} from '../models';
 
 //
 
+type ArrayData = {
+	next: ArrayDataIdentifiers;
+	previous: ArrayDataIdentifiers;
+	template: ArrayDataTemplate;
+};
+
+type ArrayDataIdentifiers = {
+	array: unknown[];
+	set: Set<unknown>;
+};
+
+type ArrayDataTemplate = {
+	empty: boolean;
+	items: Fragment[];
+};
+
 type Identifiers = {
-	next: Set<unknown>;
-	previous: Set<unknown>;
+	next: IdentifiersValues;
+	previous: IdentifiersValues;
+};
+
+type IdentifiersValues = {
+	array: unknown[];
+	set: Set<unknown>;
 };
 
 type BaseItems = {
@@ -34,7 +55,7 @@ function addToArray(
 ): void {
 	let position = nodes[0];
 
-	const before = added && !identifiers.previous.has(items.templates[0].identifier);
+	const before = added && !identifiers.previous.set.has(items.templates[0].identifier);
 
 	const next = items.next.flatMap(fragment =>
 		fragment.get().flatMap(node => ({
@@ -48,7 +69,7 @@ function addToArray(
 	for (let index = 0; index < length; index += 1) {
 		const node = next[index];
 
-		if (!(added && identifiers.previous.has(node.identifier))) {
+		if (!(added && identifiers.previous.set.has(node.identifier))) {
 			if (index === 0 && before) {
 				position.before(node.value);
 			} else {
@@ -60,6 +81,46 @@ function addToArray(
 	}
 }
 
+function getArrayData(item: FragmentItem, values: unknown[]): ArrayData {
+	const {length} = values;
+
+	const next: unknown[] = [];
+
+	let templates: Fragment[] = [];
+
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+
+		if (isFragment(value) && value.identifier != null) {
+			next.push(value.identifier);
+			templates.push(value);
+		}
+	}
+
+	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
+
+	const nextSet = new Set(next);
+
+	if (nextSet.size !== templates.length) {
+		templates = [];
+	}
+
+	return {
+		next: {
+			array: next,
+			set: nextSet,
+		},
+		previous: {
+			array: previous,
+			set: new Set(previous),
+		},
+		template: {
+			empty: templates.length === 0,
+			items: templates,
+		},
+	};
+}
+
 function handleArray(
 	identifiers: Identifiers,
 	items: BaseItems,
@@ -67,17 +128,18 @@ function handleArray(
 ): Partial<FragmentItem> {
 	const next = items.templates.map(
 		template =>
-			items.fragments?.find(fragment => fragment.identifier === template.identifier) ?? template,
+			items.fragments.find(fragment => fragment.identifier === template.identifier) ?? template,
 	);
 
-	const comparison = compareArrays(items.fragments ?? [], items.templates);
+	const comparison = compareArrays(identifiers.previous.array, identifiers.next.array);
 
 	if (comparison !== ARRAY_COMPARISON_REMOVED) {
 		addToArray(identifiers, {...items, next}, nodes, comparison === ARRAY_COMPARISON_ADDED);
 	}
 
-	const toRemove =
-		items.fragments?.filter(fragment => !identifiers.next.has(fragment.identifier)) ?? [];
+	const toRemove = items.fragments.filter(
+		fragment => !identifiers.next.set.has(fragment.identifier),
+	);
 
 	const {length} = toRemove;
 
@@ -91,90 +153,70 @@ function handleArray(
 	};
 }
 
-function removeFragments(fragments: Fragment[] | undefined): void {
-	if (fragments != null) {
-		const {length} = fragments;
+function removeArray(item: FragmentItem, comment: Comment): Partial<FragmentItem> {
+	const fragments = (item.fragments ?? []).slice();
 
-		for (let index = 0; index < length; index += 1) {
-			fragments[index].remove();
-		}
-	}
+	const result = {
+		nodes: setText(item, comment),
+	};
+
+	removeFragmentsItems(fragments);
+
+	return result;
 }
 
-function replaceText(item: FragmentItem, comment: Comment, isNullable: boolean): void {
-	let to: ChildNode[];
+function removeFragmentsItems(fragments: Fragment[]): void {
+	const {length} = fragments;
 
-	if (isNullable) {
-		to = [comment];
-	} else {
-		to = item.text == null ? [] : [item.text];
+	for (let index = 0; index < length; index += 1) {
+		fragments[index].remove();
 	}
-
-	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),
-		};
+		return removeArray(item, comment);
 	}
 
-	let templates = value.filter(item => isFragment(item) && item.identifier != null) as Fragment[];
+	const {next, previous, template} = getArrayData(item, value);
 
-	const next = templates.map(fragment => fragment.identifier) as unknown[];
-	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
+	if (
+		template.empty ||
+		item.nodes == null ||
+		previous.array.some(identifier => identifier == null)
+	) {
+		const fragments = (item.fragments ?? []).slice();
 
-	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 ? undefined : templates,
-			nodes: setNodes(
-				item,
-				comment,
-				noTemplates
+		const result = {
+			fragments: template.empty ? undefined : template.items,
+			nodes: replaceNodes(
+				item.nodes ?? [comment],
+				template.empty
 					? value.flatMap(item => createNodes(item))
-					: templates.flatMap(template => template.get()),
+					: template.items.flatMap(template => template.get()),
 			),
 		};
+
+		removeFragmentsItems(fragments);
+
+		return result;
 	}
 
 	return handleArray(
 		{
-			next: new Set(next),
-			previous: new Set(previous),
+			next,
+			previous,
 		},
 		{
-			templates,
 			fragments: item.fragments ?? [],
+			templates: template.items,
 		},
 		item.nodes,
 	);
 }
 
 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);
-		}
-	} else {
-		replaceNodes(item.nodes, next);
-	}
-
-	removeFragments(item.fragments);
-
-	return next;
+	return replaceNodes(item.nodes ?? [comment], next);
 }
 
 export function setReactiveValue(
@@ -186,8 +228,6 @@ export function setReactiveValue(
 
 	item ??= {};
 
-	item.text = new Text();
-
 	data.mora.subscribers.add(
 		reactive.subscribe(value => {
 			if (Array.isArray(value)) {
@@ -195,66 +235,43 @@ export function setReactiveValue(
 			} else {
 				setReactiveValueForSingle(item, comment, value);
 			}
-
-			item.nodes = [...(item.nodes ?? [comment])];
 		}),
 	);
 }
 
 function setReactiveValueForArray(item: FragmentItem, comment: Comment, value: unknown[]): void {
-	const result = setArray(item, comment, value);
+	const {fragments, nodes} = 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;
-	}
+	item.fragments = fragments;
+	item.nodes = nodes;
 }
 
 function setReactiveValueForSingle(item: FragmentItem, comment: Comment, value: unknown): void {
-	const valueIsFragment = isFragment(value);
+	const fragments = (item.fragments ?? []).slice();
 
-	item.fragments = valueIsFragment ? [value] : undefined;
+	const valueIsFragment = isFragment(value);
 
 	if (valueIsFragment || isChildNode(value)) {
 		item.nodes = setNodes(item, comment, createNodes(value));
 	} else {
 		item.nodes = setText(item, comment, value);
 	}
-}
 
-function setText(item: FragmentItem, comment: Comment, value: unknown): ChildNode[] | undefined {
-	const isNullable = isNullableOrWhitespace(value);
+	item.fragments = valueIsFragment ? [value] : undefined;
 
-	if (item.text != null) {
-		item.text.textContent = isNullable ? '' : getString(value);
-	}
+	removeFragmentsItems(fragments);
+}
 
-	let result = false;
+function setText(item: FragmentItem, comment: Comment, value?: unknown): ChildNode[] {
+	const valueIsNullable = isNullableOrWhitespace(value);
 
-	if (item.nodes != null) {
-		replaceText(item, comment, isNullable);
+	item.text ??= new Text();
 
-		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) {
-		item.text?.replaceWith(comment);
-	} else if (!isNullable && item?.text?.parentNode == null) {
-		if (item.text != null) {
-			comment.replaceWith(item.text);
-		}
+	item.text.textContent = valueIsNullable ? '' : getString(value);
 
-		result = true;
-	}
+	const result = valueIsNullable ? [comment] : [item.text];
 
-	removeFragments(item.fragments);
+	replaceNodes(item.nodes ?? [comment], result);
 
-	if (result) {
-		return item.text == null ? [] : [item.text];
-	}
+	return result;
 }

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 {
@@ -38,13 +48,13 @@ export function parse(data: FragmentData): string {
 	data.template = data.template.replaceAll(EXPRESSION_ABYDON_ATTRIBUTE_FULL, transformAttribute);
 
 	data.expressions = [];
-	data.strings = [] as never;
+	data.strings = [];
 
 	return data.template;
 }
 
 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/node/attribute/index.d.mts

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

package/dist/node/attribute/index.mjs

@@ -1,51 +0,0 @@
-import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, PROPERTY_CHECKED, PROPERTY_VALUE } from "../../constants.mjs";
-import { isInputElement } from "../../helpers/dom.mjs";
-import { mapEvent } from "../event.mjs";
-import { setAttribute } from "./value.mjs";
-import { parse } from "@oscarpalmer/atoms/string";
-import { computed, isReactive, isSignal } from "@oscarpalmer/mora";
-//#region src/node/attribute/index.ts
-function getValue(data, original) {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? "");
-	return matches == null ? original : data.values[+matches[1]];
-}
-function mapAttributes(data, element) {
-	const attributes = [...element.attributes];
-	const { length } = attributes;
-	for (let index = 0; index < length; index += 1) {
-		const { name, value } = attributes[index];
-		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, "");
-		const actualValue = getValue(data, value);
-		if (actualName !== name) element.removeAttribute(name);
-		switch (true) {
-			case EXPRESSION_EVENT_PREFIX.test(actualName):
-				mapEvent(element, actualName, actualValue);
-				break;
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === "function":
-			case isReactive(actualValue):
-				mapValue(data, element, actualName, actualValue);
-				break;
-			default: break;
-		}
-	}
-}
-function mapValue(data, element, name, value) {
-	if (typeof value === "function") setComputedAttribute(data, element, name, value);
-	else setAttribute(data, element, name, value);
-	if (!isInputElement(element) || !isSignal(value)) return;
-	let property;
-	if (name === "checked" && element.type === "checkbox") property = PROPERTY_CHECKED;
-	else if (name === "value") property = PROPERTY_VALUE;
-	if (property != null) mapEvent(element, "@on", () => {
-		const next = element[property];
-		value.set(parse(String(next)) ?? next);
-	});
-}
-function setComputedAttribute(data, element, name, callback) {
-	const value = computed(callback);
-	data.mora.values.add(value);
-	setAttribute(data, element, name, value);
-}
-//#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/index.ts

@@ -1,100 +0,0 @@
-import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {parse} from '@oscarpalmer/atoms/string';
-import {computed, isReactive, isSignal} from '@oscarpalmer/mora';
-import {
-	EVENT_ON_PREFIXED,
-	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
-	EXPRESSION_ABYDON_CONTENT,
-	EXPRESSION_EVENT_PREFIX,
-	EXPRESSION_PERIOD,
-	INPUT_TYPE_CHECKBOX,
-	PROPERTY_CHECKED,
-	PROPERTY_VALUE,
-} from '../../constants';
-import {isInputElement} from '../../helpers/dom';
-import type {FragmentData} from '../../models';
-import {mapEvent} from '../event';
-import {setAttribute} from './value';
-
-function getValue(data: FragmentData, original: string): unknown {
-	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 {length} = attributes;
-
-	for (let index = 0; index < length; index += 1) {
-		const {name, value} = attributes[index];
-
-		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, '');
-		const actualValue = getValue(data, value) as never;
-
-		if (actualName !== name) {
-			element.removeAttribute(name);
-		}
-
-		switch (true) {
-			case EXPRESSION_EVENT_PREFIX.test(actualName):
-				mapEvent(element, actualName, actualValue);
-				break;
-
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === 'function':
-			case isReactive(actualValue):
-				mapValue(data, element, actualName, actualValue);
-				break;
-
-			default:
-				break;
-		}
-	}
-}
-
-function mapValue(
-	data: FragmentData,
-	element: HTMLElement | SVGElement,
-	name: string,
-	value: unknown,
-): void {
-	if (typeof value === 'function') {
-		setComputedAttribute(data, element, name, value as GenericCallback);
-	} else {
-		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);
-		});
-	}
-}
-
-function setComputedAttribute(
-	data: FragmentData,
-	element: HTMLElement | SVGElement,
-	name: string,
-	callback: GenericCallback,
-): void {
-	const value = computed(callback);
-
-	data.mora.values.add(value);
-
-	setAttribute(data, element, name, value);
-}