@oscarpalmer/abydon 0.21.0 → 0.22.0

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/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/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),
-	);
-}