@oscarpalmer/abydon 0.19.0 → 0.20.0

package/dist/abydon.full.mjs

@@ -948,6 +948,7 @@ const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
 const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
 const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_PERIOD = /\./;
+const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
 const PROPERTY_CHECKED = "checked";
@@ -1068,7 +1069,7 @@ function createNodes(value) {
 	return [new Text(getString(value))];
 }
 function isInputElement(node) {
-	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
 }
 function removeNodes(nodes) {
 	const { length } = nodes;
@@ -1312,8 +1313,13 @@ function mapAttributes(data, element) {
 function mapValue$1(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
 	else setAttribute(data, element, name, value);
-	if (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
-		value.set(parse$1(element.value) ?? element.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$1(String(next)) ?? next);
 	});
 }
 function setComputedAttribute(data, element, name, callback) {
@@ -1445,10 +1451,31 @@ function mapNodes(data, nodes) {
 			mapNode(data, node);
 			continue;
 		}
+		if (node instanceof HTMLTextAreaElement) mapTextarea(data, node);
 		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
 		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
 	}
 }
+function mapTextarea(data, element) {
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	if (index == null) return;
+	element.value = "";
+	const value = data.values[Number.parseInt(index, 10)];
+	if (isSignal(value)) {
+		element.value = String(value.peek());
+		mapEvent(element, "@on", () => {
+			value.set(element.value);
+		});
+		return;
+	}
+	let reactive;
+	if (typeof value === "function") reactive = computed(value);
+	else if (isComputed(value)) reactive = value;
+	if (reactive == null) element.value = String(value);
+	else data.mora.subscribers.add(reactive.subscribe((value) => {
+		element.value = String(value);
+	}));
+}
 function mapValue(data, comment, value) {
 	switch (true) {
 		case typeof value === "function":

package/dist/constants.d.mts

@@ -27,6 +27,8 @@ declare const EXPRESSION_EVENT_OPTIONS_CAPTURE: RegExp;
 declare const EXPRESSION_EVENT_OPTIONS_ONCE: RegExp;
 declare const EXPRESSION_EVENT_PREFIX: RegExp;
 declare const EXPRESSION_PERIOD: RegExp;
+declare const EXPRESSION_TEXTAREA_VALUE: RegExp;
+declare const INPUT_TYPE_CHECKBOX = "checkbox";
 declare const NAME_FRAGMENT = "$fragment";
 declare const NAME_FRAGMENTS = "$fragments";
 declare const PROPERTY_CHECKED = "checked";
@@ -34,4 +36,4 @@ declare const PROPERTY_IDENTIFIER = "identifier";
 declare const PROPERTY_VALUE = "value";
 declare const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };
+export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, EXPRESSION_TEXTAREA_VALUE, INPUT_TYPE_CHECKBOX, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };

package/dist/constants.mjs

@@ -34,6 +34,8 @@ const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
 const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
 const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_PERIOD = /\./;
+const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+const INPUT_TYPE_CHECKBOX = "checkbox";
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
 const PROPERTY_CHECKED = "checked";
@@ -41,4 +43,4 @@ const PROPERTY_IDENTIFIER = "identifier";
 const PROPERTY_VALUE = "value";
 const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };
+export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, EXPRESSION_TEXTAREA_VALUE, INPUT_TYPE_CHECKBOX, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };

package/dist/helpers/dom.d.mts

@@ -1,6 +1,6 @@
 //#region src/helpers/dom.d.ts
 declare function createNodes(value: unknown): ChildNode[];
-declare function isInputElement(node: Node): node is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+declare function isInputElement(node: Node): node is HTMLInputElement | HTMLSelectElement;
 declare function removeNodes(nodes: ChildNode[]): void;
 declare function replaceNodes(from: ChildNode[], to: ChildNode[]): void;
 //#endregion

package/dist/helpers/dom.mjs

@@ -8,7 +8,7 @@ function createNodes(value) {
 	return [new Text(getString(value))];
 }
 function isInputElement(node) {
-	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
 }
 function removeNodes(nodes) {
 	const { length } = nodes;

package/dist/node/attribute/index.mjs

@@ -1,4 +1,4 @@
-import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD } from "../../constants.mjs";
+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";
@@ -33,8 +33,13 @@ function mapAttributes(data, element) {
 function mapValue(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
 	else setAttribute(data, element, name, value);
-	if (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
-		value.set(parse(element.value) ?? element.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) {

package/dist/node/index.mjs

@@ -1,10 +1,11 @@
-import { EXPRESSION_ABYDON_CONTENT } from "../constants.mjs";
+import { EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE } from "../constants.mjs";
 import { isFragment, isFragments } from "../helpers/index.mjs";
 import { handleFragments } from "../fragments.mjs";
 import { createNodes } from "../helpers/dom.mjs";
+import { mapEvent } from "./event.mjs";
 import { mapAttributes } from "./attribute/index.mjs";
 import { setReactiveValue } from "./value.mjs";
-import { computed, isReactive } from "@oscarpalmer/mora";
+import { computed, isComputed, isReactive, isSignal } from "@oscarpalmer/mora";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/node/index.ts
 function mapNode(data, comment) {
@@ -20,10 +21,31 @@ function mapNodes(data, nodes) {
 			mapNode(data, node);
 			continue;
 		}
+		if (node instanceof HTMLTextAreaElement) mapTextarea(data, node);
 		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
 		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
 	}
 }
+function mapTextarea(data, element) {
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	if (index == null) return;
+	element.value = "";
+	const value = data.values[Number.parseInt(index, 10)];
+	if (isSignal(value)) {
+		element.value = String(value.peek());
+		mapEvent(element, "@on", () => {
+			value.set(element.value);
+		});
+		return;
+	}
+	let reactive;
+	if (typeof value === "function") reactive = computed(value);
+	else if (isComputed(value)) reactive = value;
+	if (reactive == null) element.value = String(value);
+	else data.mora.subscribers.add(reactive.subscribe((value) => {
+		element.value = String(value);
+	}));
+}
 function mapValue(data, comment, value) {
 	switch (true) {
 		case typeof value === "function":

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"keywords": [
 		"components",
 		"dom",

package/src/constants.ts

@@ -61,6 +61,10 @@ export const EXPRESSION_EVENT_PREFIX = /^@/;
 
 export const EXPRESSION_PERIOD = /\./;
 
+export const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+
+export const INPUT_TYPE_CHECKBOX = 'checkbox';
+
 export const NAME_FRAGMENT = '$fragment';
 
 export const NAME_FRAGMENTS = '$fragments';

package/src/helpers/dom.ts

@@ -14,14 +14,8 @@ export function createNodes(value: unknown): ChildNode[] {
 	return [new Text(getString(value))];
 }
 
-export function isInputElement(
-	node: Node,
-): node is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
-	return (
-		node instanceof HTMLInputElement ||
-		node instanceof HTMLSelectElement ||
-		node instanceof HTMLTextAreaElement
-	);
+export function isInputElement(node: Node): node is HTMLInputElement | HTMLSelectElement {
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
 }
 
 export function removeNodes(nodes: ChildNode[]): void {

package/src/node/attribute/index.ts

@@ -7,6 +7,8 @@ import {
 	EXPRESSION_ABYDON_CONTENT,
 	EXPRESSION_EVENT_PREFIX,
 	EXPRESSION_PERIOD,
+	INPUT_TYPE_CHECKBOX,
+	PROPERTY_CHECKED,
 	PROPERTY_VALUE,
 } from '../../constants';
 import {isInputElement} from '../../helpers/dom';
@@ -63,9 +65,23 @@ function mapValue(
 		setAttribute(data, element, name, value);
 	}
 
-	if (name === PROPERTY_VALUE && isInputElement(element) && isSignal(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, () => {
-			value.set(parse(element.value) ?? element.value);
+			const next = element[property as keyof typeof element];
+
+			value.set(parse(String(next)) ?? next);
 		});
 	}
 }

package/src/node/index.ts

@@ -1,13 +1,21 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive, type Reactive} from '@oscarpalmer/mora';
+import {
+	computed,
+	isComputed,
+	isReactive,
+	isSignal,
+	type Computed,
+	type Reactive,
+} from '@oscarpalmer/mora';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {EXPRESSION_ABYDON_CONTENT} from '../constants';
+import {EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE} 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';
+import {mapEvent} from './event';
 
 function mapNode(data: FragmentData, comment: Comment): void {
 	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? '');
@@ -30,6 +38,10 @@ export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 			continue;
 		}
 
+		if (node instanceof HTMLTextAreaElement) {
+			mapTextarea(data, node);
+		}
+
 		if (isHTMLOrSVGElement(node)) {
 			mapAttributes(data, node);
 		}
@@ -40,6 +52,46 @@ export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 	}
 }
 
+function mapTextarea(data: FragmentData, element: HTMLTextAreaElement): void {
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+
+	if (index == null) {
+		return;
+	}
+
+	element.value = '';
+
+	const value = data.values[Number.parseInt(index, 10)];
+
+	if (isSignal(value)) {
+		element.value = String(value.peek());
+
+		mapEvent(element, '@on', () => {
+			value.set(element.value);
+		});
+
+		return;
+	}
+
+	let reactive: Computed<unknown> | undefined;
+
+	if (typeof value === 'function') {
+		reactive = computed(value as GenericCallback);
+	} else if (isComputed(value)) {
+		reactive = value;
+	}
+
+	if (reactive == null) {
+		element.value = String(value);
+	} else {
+		data.mora.subscribers.add(
+			reactive.subscribe(value => {
+				element.value = String(value);
+			}),
+		);
+	}
+}
+
 function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':