@oscarpalmer/abydon 0.17.0 → 0.20.0

package/dist/constants.d.mts

@@ -1,6 +1,19 @@
 //#region src/constants.d.ts
+declare const ARRAY_COMPARISON_ADDED = "added";
+declare const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+declare const ARRAY_COMPARISON_REMOVED = "removed";
 declare const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+declare const ATTRIBUTE_NAME_DELIMITER = ".";
+declare const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
+declare const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+declare const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+declare const EVENT_CHANGE = "change";
+declare const EVENT_INPUT = "input";
+declare const EVENT_SUBMIT = "submit";
 declare const EVENT_DEFAULTS: Record<string, string>;
+declare const EVENT_ON_PREFIXED = "@on";
+declare const EVENT_ON_VALUE = "on";
+declare const EVENT_OPTIONS_DELIMITER = ":";
 declare const EXPRESSION_ABYDON_ATTRIBUTE_FULL: RegExp;
 declare const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX: RegExp;
 declare const EXPRESSION_ABYDON_CONTENT: RegExp;
@@ -14,7 +27,13 @@ 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";
+declare const PROPERTY_IDENTIFIER = "identifier";
+declare const PROPERTY_VALUE = "value";
+declare const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ATTRIBUTE_CLASS_PREFIX_LENGTH, EVENT_DEFAULTS, 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 };
+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

@@ -1,14 +1,27 @@
 //#region src/constants.ts
+const ARRAY_COMPARISON_ADDED = "added";
+const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+const ARRAY_COMPARISON_REMOVED = "removed";
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+const ATTRIBUTE_NAME_DELIMITER = ".";
+const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
+const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+const EVENT_CHANGE = "change";
+const EVENT_INPUT = "input";
+const EVENT_SUBMIT = "submit";
 const EVENT_DEFAULTS = {
 	A: "click",
 	BUTTON: "click",
 	DETAILS: "toggle",
-	FORM: "submit",
-	SELECT: "change",
-	TEXTAREA: "input"
+	FORM: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT
 };
-const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+const EVENT_ON_PREFIXED = "@on";
+const EVENT_ON_VALUE = "on";
+const EVENT_OPTIONS_DELIMITER = ":";
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
 const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
 const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
@@ -21,7 +34,13 @@ 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";
+const PROPERTY_IDENTIFIER = "identifier";
+const PROPERTY_VALUE = "value";
+const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ATTRIBUTE_CLASS_PREFIX_LENGTH, EVENT_DEFAULTS, 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 };
+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/fragments.mjs

@@ -1,4 +1,4 @@
-import { NAME_FRAGMENTS } from "./constants.mjs";
+import { ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, NAME_FRAGMENTS } from "./constants.mjs";
 import { isFragment, isFragments } from "./helpers/index.mjs";
 import { getString } from "@oscarpalmer/atoms/string";
 import { array } from "@oscarpalmer/mora";
@@ -36,13 +36,13 @@ function handleItems(state, items) {
 	for (let index = 0; index < length; index += 1) {
 		const item = items[index];
 		const identifier = state.identify(item);
-		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		if (identifier == null) throw new TypeError(ERROR_IDENTIFIER_TYPE);
 		const key = getString(identifier);
-		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		if (keys.has(key)) throw new Error(ERROR_IDENTIFIER_DUPLICATE.replace("<>", key));
 		let instance = state.instances[key];
 		if (instance == null) {
 			instance = state.fragment(item);
-			if (!isFragment(instance)) throw new Error("Fragment function must return a Fragment instance");
+			if (!isFragment(instance)) throw new Error(ERROR_FRAGMENT);
 		}
 		instance.identify(key);
 		state.instances[key] = instance;

package/dist/helpers/dom.d.mts

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

package/dist/helpers/dom.mjs

@@ -7,6 +7,9 @@ function createNodes(value) {
 	if (isChildNode(value)) return [value];
 	return [new Text(getString(value))];
 }
+function isInputElement(node) {
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
+}
 function removeNodes(nodes) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
@@ -17,4 +20,4 @@ function replaceNodes(from, to) {
 	for (let index = 1; index < length; index += 1) from[index].remove();
 }
 //#endregion
-export { createNodes, removeNodes, replaceNodes };
+export { createNodes, isInputElement, removeNodes, replaceNodes };

package/dist/helpers/index.d.mts

@@ -1,8 +1,9 @@
+import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED } from "../constants.mjs";
 import { t as Fragment } from "../fragment-9qTBAvtR.mjs";
 import { Fragments } from "../fragments.mjs";
 
 //#region src/helpers/index.d.ts
-declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
+declare function compareArrays(first: unknown[], second: unknown[]): typeof ARRAY_COMPARISON_ADDED | typeof ARRAY_COMPARISON_DISSIMILAR | typeof ARRAY_COMPARISON_REMOVED;
 declare function isFragment(value: unknown): value is Fragment;
 declare function isFragments(value: unknown): value is Fragments;
 //#endregion

package/dist/helpers/index.mjs

@@ -1,11 +1,11 @@
-import { NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.mjs";
+import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.mjs";
 //#region src/helpers/index.ts
 function compareArrays(first, second) {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
-	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return COMPARISON_DISSIMILAR;
-	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
+	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return ARRAY_COMPARISON_DISSIMILAR;
+	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
@@ -16,8 +16,5 @@ function isFragments(value) {
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
-const COMPARISON_ADDED = "added";
-const COMPARISON_DISSIMILAR = "dissimilar";
-const COMPARISON_REMOVED = "removed";
 //#endregion
 export { compareArrays, isFragment, isFragments };

package/dist/node/attribute/index.mjs

@@ -1,7 +1,9 @@
-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";
-import { computed, isReactive } from "@oscarpalmer/mora";
+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 ?? "");
@@ -31,6 +33,14 @@ 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 (!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);

package/dist/node/attribute/value.mjs

@@ -1,4 +1,4 @@
-import { EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX } from "../../constants.mjs";
+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
@@ -46,7 +46,7 @@ function setValue(data, element, name, value) {
 	else callback(element, name, value);
 }
 function updateChecked(element, name, value) {
-	updateElement("change", "checked", element, name, value, value === true);
+	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;
@@ -59,7 +59,7 @@ function updateProperty(element, name, value) {
 	setAttribute$1(element, name, value === true);
 }
 function updateValue(element, name, value) {
-	updateElement(element instanceof HTMLSelectElement ? "change" : "input", "value", element, name, value, String(value));
+	updateElement(element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT, PROPERTY_VALUE, element, name, value, String(value));
 }
 //#endregion
 export { setAttribute };

package/dist/node/event.mjs

@@ -1,4 +1,4 @@
-import { EVENT_DEFAULTS, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
+import { EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_SUBMIT, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/node/event.ts
 function getOptions(options) {
@@ -12,8 +12,8 @@ function getOptions(options) {
 function getType(element, type) {
 	if (type !== "on") return type;
 	if (element instanceof HTMLInputElement) {
-		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return "change";
-		return element.type === "submit" ? "submit" : "input";
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return EVENT_CHANGE;
+		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }

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/dist/node/value.mjs

@@ -1,3 +1,4 @@
+import { ARRAY_COMPARISON_ADDED } from "../constants.mjs";
 import { compareArrays, isFragment } from "../helpers/index.mjs";
 import { createNodes, replaceNodes } from "../helpers/dom.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -25,7 +26,7 @@ function handleArray(identifiers, items, nodes) {
 	if (comparison !== "removed") addToArray(identifiers, {
 		...items,
 		next
-	}, nodes, comparison === "added");
+	}, nodes, comparison === ARRAY_COMPARISON_ADDED);
 	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.17.0",
+	"version": "0.20.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -39,12 +39,11 @@
 		"tsdown:build": "npx tsdown -c ./tsdown.config.ts",
 		"tsdown:watch": "npx tsdown -c ./tsdown.config.ts --watch",
 		"test": "npx vp test run --coverage",
-		"test:leak": "npx vp test run --detect-async-leaks --coverage",
-		"watch": "npx vite build --watch"
+		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.165",
-		"@oscarpalmer/mora": "^0.26",
+		"@oscarpalmer/mora": "^0.27",
 		"@oscarpalmer/toretto": "^0.41"
 	},
 	"devDependencies": {

package/src/constants.ts

@@ -1,15 +1,41 @@
+export const ARRAY_COMPARISON_ADDED = 'added';
+
+export const ARRAY_COMPARISON_DISSIMILAR = 'dissimilar';
+
+export const ARRAY_COMPARISON_REMOVED = 'removed';
+
 export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
+export const ATTRIBUTE_NAME_DELIMITER = '.';
+
+export const ERROR_FRAGMENT = 'Fragment function must return a Fragment instance';
+
+export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+
+export const ERROR_IDENTIFIER_TYPE = 'Identifier cannot be null or undefined';
+
+export const EVENT_CHANGE = 'change';
+
+export const EVENT_INPUT = 'input';
+
+export const EVENT_SUBMIT = 'submit';
+
 export const EVENT_DEFAULTS: Record<string, string> = {
 	A: 'click',
 	BUTTON: 'click',
 	DETAILS: 'toggle',
-	FORM: 'submit',
-	SELECT: 'change',
-	TEXTAREA: 'input',
+	FORM: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT,
 };
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+export const EVENT_ON_PREFIXED = '@on';
+
+export const EVENT_ON_VALUE = 'on';
+
+export const EVENT_OPTIONS_DELIMITER = ':';
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
 
 export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
 
@@ -35,6 +61,18 @@ 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';
+
+export const PROPERTY_CHECKED = 'checked';
+
+export const PROPERTY_IDENTIFIER = 'identifier';
+
+export const PROPERTY_VALUE = 'value';
+
+export const TEMPLATE_ITEM = '<>';

package/src/fragment.ts

@@ -1,6 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {html} from '@oscarpalmer/toretto/html';
-import {NAME_FRAGMENT} from './constants';
+import {NAME_FRAGMENT, PROPERTY_IDENTIFIER} from './constants';
 import {handleFragments} from './fragments';
 import {isFragments} from './helpers';
 import {removeNodes} from './helpers/dom';
@@ -56,7 +56,7 @@ export class Fragment {
 	configure(configuration: FragmentConfiguration): Fragment {
 		const actual = isPlainObject(configuration) ? configuration : {};
 
-		if ('identifier' in actual) {
+		if (PROPERTY_IDENTIFIER in actual) {
 			this.#configuration.identifier = actual.identifier;
 		}
 

package/src/fragments.ts

@@ -1,6 +1,12 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {array, type ReactiveArray} from '@oscarpalmer/mora';
-import {NAME_FRAGMENTS} from './constants';
+import {
+	ERROR_FRAGMENT,
+	ERROR_IDENTIFIER_DUPLICATE,
+	ERROR_IDENTIFIER_TYPE,
+	NAME_FRAGMENTS,
+	TEMPLATE_ITEM,
+} from './constants';
 import type {Fragment} from './fragment';
 import {isFragment, isFragments} from './helpers';
 import type {FragmentsState} from './models';
@@ -58,13 +64,13 @@ function handleItems(state: FragmentsState, items: unknown[]): void {
 		const identifier = state.identify(item);
 
 		if (identifier == null) {
-			throw new Error('Identifier cannot be null or undefined');
+			throw new TypeError(ERROR_IDENTIFIER_TYPE);
 		}
 
 		const key = getString(identifier);
 
 		if (keys.has(key)) {
-			throw new Error(`Duplicate identifier found: "${key}"`);
+			throw new Error(ERROR_IDENTIFIER_DUPLICATE.replace(TEMPLATE_ITEM, key));
 		}
 
 		let instance = state.instances[key];
@@ -73,7 +79,7 @@ function handleItems(state: FragmentsState, items: unknown[]): void {
 			instance = state.fragment(item);
 
 			if (!isFragment(instance)) {
-				throw new Error('Fragment function must return a Fragment instance');
+				throw new Error(ERROR_FRAGMENT);
 			}
 		}
 

package/src/helpers/dom.ts

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

package/src/helpers/index.ts

@@ -1,21 +1,30 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import {NAME_FRAGMENT, NAME_FRAGMENTS} from '../constants';
+import {
+	ARRAY_COMPARISON_ADDED,
+	ARRAY_COMPARISON_DISSIMILAR,
+	ARRAY_COMPARISON_REMOVED,
+	NAME_FRAGMENT,
+	NAME_FRAGMENTS,
+} from '../constants';
 import type {Fragment} from '../fragment';
 import type {Fragments} from '../fragments';
 
 export function compareArrays(
 	first: unknown[],
 	second: unknown[],
-): 'added' | 'dissimilar' | 'removed' {
+):
+	| typeof ARRAY_COMPARISON_ADDED
+	| typeof ARRAY_COMPARISON_DISSIMILAR
+	| typeof ARRAY_COMPARISON_REMOVED {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
 
 	if (!from.filter(key => to.includes(key)).every((key, index) => to[index] === key)) {
-		return COMPARISON_DISSIMILAR;
+		return ARRAY_COMPARISON_DISSIMILAR;
 	}
 
-	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
+	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 
 export function isFragment(value: unknown): value is Fragment {
@@ -34,9 +43,3 @@ function isNamed(value: unknown, name: string): boolean {
 		(value as PlainObject)[name] === true
 	);
 }
-
-const COMPARISON_ADDED = 'added';
-
-const COMPARISON_DISSIMILAR = 'dissimilar';
-
-const COMPARISON_REMOVED = 'removed';

package/src/node/attribute/index.ts

@@ -1,11 +1,17 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/mora';
+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';
@@ -58,6 +64,26 @@ function mapValue(
 	} 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(

package/src/node/attribute/value.ts

@@ -6,18 +6,23 @@ import {
 } 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 === 'checked' ? updateChecked : updateProperty;
+		return name === PROPERTY_CHECKED ? updateChecked : updateProperty;
 	}
 
-	return name === 'value' ? updateValue : setTorettoAttribute;
+	return name === PROPERTY_VALUE ? updateValue : setTorettoAttribute;
 }
 
 export function setAttribute(
@@ -55,7 +60,7 @@ function setClasses(
 		}
 	}
 
-	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(value.subscribe(update));
@@ -111,7 +116,7 @@ function setValue(
 }
 
 function updateChecked(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	updateElement('change', 'checked', element, name, value, value === true);
+	updateElement(EVENT_CHANGE, PROPERTY_CHECKED, element, name, value, value === true);
 }
 
 function updateElement(
@@ -143,8 +148,8 @@ function updateProperty(element: HTMLElement | SVGElement, name: string, value:
 
 function updateValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
 	updateElement(
-		element instanceof HTMLSelectElement ? 'change' : 'input',
-		'value',
+		element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT,
+		PROPERTY_VALUE,
 		element,
 		name,
 		value,

package/src/node/event.ts

@@ -1,6 +1,11 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {
+	EVENT_CHANGE,
 	EVENT_DEFAULTS,
+	EVENT_INPUT,
+	EVENT_ON_VALUE,
+	EVENT_OPTIONS_DELIMITER,
+	EVENT_SUBMIT,
 	EXPRESSION_EVENT_CHANGE_TYPES,
 	EXPRESSION_EVENT_NAME,
 	EXPRESSION_EVENT_OPTIONS_ACTIVE,
@@ -9,7 +14,7 @@ import {
 } from '../constants';
 
 function getOptions(options: string): AddEventListenerOptions {
-	const parts = options.split(':');
+	const parts = options.split(EVENT_OPTIONS_DELIMITER);
 
 	return {
 		capture: parts.some(part => EXPRESSION_EVENT_OPTIONS_CAPTURE.test(part)),
@@ -19,16 +24,16 @@ function getOptions(options: string): AddEventListenerOptions {
 }
 
 function getType(element: HTMLElement | SVGElement, type: string): string {
-	if (type !== 'on') {
+	if (type !== EVENT_ON_VALUE) {
 		return type;
 	}
 
 	if (element instanceof HTMLInputElement) {
 		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) {
-			return 'change';
+			return EVENT_CHANGE;
 		}
 
-		return element.type === 'submit' ? 'submit' : 'input';
+		return element.type === EVENT_SUBMIT ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 
 	return EVENT_DEFAULTS[element.tagName] ?? type;