@oscarpalmer/abydon 0.16.0 → 0.19.0

package/dist/constants.d.mts

@@ -0,0 +1,37 @@
+//#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;
+declare const EXPRESSION_ATTRIBUTE_CLASS: RegExp;
+declare const EXPRESSION_ATTRIBUTE_STYLE_FULL: RegExp;
+declare const EXPRESSION_ATTRIBUTE_STYLE_PREFIX: RegExp;
+declare const EXPRESSION_EVENT_CHANGE_TYPES: RegExp;
+declare const EXPRESSION_EVENT_NAME: RegExp;
+declare const EXPRESSION_EVENT_OPTIONS_ACTIVE: RegExp;
+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 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 { 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 };

package/dist/constants.mjs

@@ -0,0 +1,44 @@
+//#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: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT
+};
+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\./;
+const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
+const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
+const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+const EXPRESSION_EVENT_PREFIX = /^@/;
+const EXPRESSION_PERIOD = /\./;
+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 { 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 };

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

@@ -0,0 +1,82 @@
+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/fragment.d.mts

@@ -0,0 +1,2 @@
+import { t as Fragment } from "./fragment-9qTBAvtR.mjs";
+export { Fragment };

package/dist/{fragment.js → fragment.mjs}

@@ -1,17 +1,21 @@
-import { NAME_FRAGMENT } from "./constants.js";
-import { isFragments } from "./helpers/index.js";
-import { handleFragments } from "./fragments.js";
-import { removeNodes } from "./helpers/dom.js";
-import { mapNodes } from "./node/index.js";
-import { parse } from "./parse.js";
+import { NAME_FRAGMENT } from "./constants.mjs";
+import { isFragments } from "./helpers/index.mjs";
+import { handleFragments } from "./fragments.mjs";
+import { removeNodes } from "./helpers/dom.mjs";
+import { mapNodes } from "./node/index.mjs";
+import { parse } from "./parse.mjs";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { html } from "@oscarpalmer/toretto/html";
+//#region src/fragment.ts
 var Fragment = class {
 	#data;
 	#configuration = {
 		identifier: void 0,
 		cache: true
 	};
+	/**
+	* Fragment identifier
+	*/
 	get identifier() {
 		return this.#configuration.identifier;
 	}
@@ -28,15 +32,28 @@ var Fragment = class {
 			values: []
 		};
 	}
+	/**
+	* Append the fragment to the given element
+	* @param element Element to append to
+	*/
 	appendTo(element) {
 		element.append(...this.get());
 	}
+	/**
+	* Configure the fragment
+	* @param configuration Configuration options
+	* @returns Fragment
+	*/
 	configure(configuration) {
 		const actual = isPlainObject(configuration) ? configuration : {};
 		if ("identifier" in actual) this.#configuration.identifier = actual.identifier;
 		if (typeof actual.cache === "boolean") this.#configuration.cache = actual.cache;
 		return this;
 	}
+	/**
+	* Get a list of the fragment's nodes
+	* @returns List of nodes
+	*/
 	get() {
 		const data = this.#data;
 		if (data.items.length === 0) {
@@ -46,10 +63,21 @@ var Fragment = class {
 		}
 		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []);
 	}
+	/**
+	* 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) {
 		this.#configuration.identifier = identifier;
 		return this;
 	}
+	/**
+	* Remove the fragment from the DOM
+	*/
 	remove() {
 		removeFragment(this.#data);
 	}
@@ -76,4 +104,5 @@ function removeMora(data) {
 	data.mora.values.clear();
 	for (const unsubscribe of unsubscribers) unsubscribe();
 }
+//#endregion
 export { Fragment };

package/dist/fragments.d.mts

@@ -0,0 +1,16 @@
+import { a as FragmentsState, t as Fragment } from "./fragment-9qTBAvtR.mjs";
+import { ReactiveArray } from "@oscarpalmer/mora";
+
+//#region src/fragments.d.ts
+declare class Fragments {
+  #private;
+  /**
+   * Fragment items
+   */
+  get items(): ReactiveArray<Fragment>;
+  constructor(items: ReactiveArray<unknown>, identify: (item: unknown) => unknown, fragment: (item: unknown) => Fragment);
+}
+declare function handleFragments(item: Fragments | FragmentsState, remove: boolean): void;
+declare function initializeFragments(state: FragmentsState): void;
+//#endregion
+export { Fragments, handleFragments, initializeFragments };

package/dist/{fragments.js → fragments.mjs}

@@ -1,9 +1,13 @@
-import { NAME_FRAGMENTS } from "./constants.js";
-import { isFragment, isFragments } from "./helpers/index.js";
+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";
+//#region src/fragments.ts
 var Fragments = class {
 	#state;
+	/**
+	* Fragment items
+	*/
 	get items() {
 		return this.#state.mapped;
 	}
@@ -32,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;
@@ -71,5 +75,6 @@ function updateFragments(state, active) {
 	state.instances = next;
 	active?.clear();
 }
-var states = /* @__PURE__ */ new WeakMap();
+const states = /* @__PURE__ */ new WeakMap();
+//#endregion
 export { Fragments, handleFragments, initializeFragments };

package/dist/helpers/dom.d.mts

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

package/dist/helpers/{dom.js → dom.mjs}

@@ -1,11 +1,15 @@
-import { isFragment } from "./index.js";
+import { isFragment } from "./index.mjs";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isChildNode } from "@oscarpalmer/toretto/is";
+//#region src/helpers/dom.ts
 function createNodes(value) {
 	if (isFragment(value)) return value.get();
 	if (isChildNode(value)) return [value];
 	return [new Text(getString(value))];
 }
+function isInputElement(node) {
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+}
 function removeNodes(nodes) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
@@ -15,4 +19,5 @@ function replaceNodes(from, to) {
 	const { length } = from;
 	for (let index = 1; index < length; index += 1) from[index].remove();
 }
-export { createNodes, removeNodes, replaceNodes };
+//#endregion
+export { createNodes, isInputElement, removeNodes, replaceNodes };

package/dist/helpers/index.d.mts

@@ -0,0 +1,10 @@
+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[]): 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
+export { compareArrays, isFragment, isFragments };

package/dist/helpers/{index.js → index.mjs}

@@ -1,10 +1,11 @@
-import { NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.js";
+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);
@@ -15,7 +16,5 @@ function isFragments(value) {
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
-var COMPARISON_ADDED = "added";
-var COMPARISON_DISSIMILAR = "dissimilar";
-var COMPARISON_REMOVED = "removed";
+//#endregion
 export { compareArrays, isFragment, isFragments };

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import { t as Fragment } from "./fragment-9qTBAvtR.mjs";
+import { Fragments } from "./fragments.mjs";
+import { ReactiveArray } from "@oscarpalmer/mora";
+export * from "@oscarpalmer/mora";
+
+//#region src/index.d.ts
+/**
+ * Create Fragments from a reactive array
+ * @param array Reactive array
+ * @param identify Function to identify item
+ * @param fragment Function to create fragment from item
+ * @returns Fragments
+ */
+declare function fragments<Item>(array: ReactiveArray<Item>, identify: (item: Item) => unknown, fragment: (item: Item) => Fragment): Fragments;
+/**
+ * Create Fragment from a template
+ * @returns Fragment
+ */
+declare function html(template: TemplateStringsArray, ...values: unknown[]): Fragment;
+//#endregion
+export { type Fragment, type Fragments, fragments, html };

package/dist/index.mjs

@@ -0,0 +1,24 @@
+import { Fragments } from "./fragments.mjs";
+import { Fragment } from "./fragment.mjs";
+import "@oscarpalmer/mora";
+export * from "@oscarpalmer/mora";
+//#region src/index.ts
+/**
+* Create Fragments from a reactive array
+* @param array Reactive array
+* @param identify Function to identify item
+* @param fragment Function to create fragment from item
+* @returns Fragments
+*/
+function fragments(array, identify, fragment) {
+	return new Fragments(array, identify, fragment);
+}
+/**
+* Create Fragment from a template
+* @returns Fragment
+*/
+function html(template, ...values) {
+	return new Fragment(template, values);
+}
+//#endregion
+export { fragments, html };

package/dist/models.d.mts

@@ -0,0 +1,2 @@
+import { a as FragmentsState, i as FragmentItem, n as FragmentConfiguration, r as FragmentData } from "./fragment-9qTBAvtR.mjs";
+export { FragmentConfiguration, FragmentData, FragmentItem, FragmentsState };

package/dist/models.mjs

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+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/{index.js → index.mjs}

@@ -1,7 +1,10 @@
-import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD } from "../../constants.js";
-import { mapEvent } from "../event.js";
-import { setAttribute } from "./value.js";
-import { computed, isReactive } from "@oscarpalmer/mora";
+import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD } 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]];
@@ -30,10 +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 (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
+		value.set(parse(element.value) ?? element.value);
+	});
 }
 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.d.mts

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

package/dist/node/attribute/{value.js → value.mjs}

@@ -1,6 +1,7 @@
-import { ATTRIBUTE_CLASS_PREFIX_LENGTH, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX } from "../../constants.js";
+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, setProperty } from "@oscarpalmer/toretto/attribute";
+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;
@@ -19,8 +20,8 @@ function setAttribute(data, element, name, value) {
 	}
 }
 function setClasses(data, element, name, value) {
-	function update(value$1) {
-		if (value$1 === true) element.classList.add(...classes);
+	function update(value) {
+		if (value === true) element.classList.add(...classes);
 		else element.classList.remove(...classes);
 	}
 	const classes = name.slice(6).split(".");
@@ -30,9 +31,9 @@ function setClasses(data, element, name, value) {
 function setStyle(data, element, name, value) {
 	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
 	if (property == null) return;
-	function update(value$1) {
-		if (value$1 == null || value$1 === false || value$1 === true && unit == null) element.style.removeProperty(property);
-		else element.style.setProperty(property, value$1 === true ? unit : String(value$1));
+	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);
@@ -45,18 +46,20 @@ 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;
 	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) {
-	setProperty(element, name, value === true);
+	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.d.mts

@@ -0,0 +1,4 @@
+//#region src/node/event.d.ts
+declare function mapEvent(element: HTMLElement | SVGElement, name: string, value: unknown): void;
+//#endregion
+export { mapEvent };

package/dist/node/{event.js → event.mjs}

@@ -1,5 +1,6 @@
-import { EVENT_DEFAULTS, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.js";
+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) {
 	const parts = options.split(":");
 	return {
@@ -11,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;
 }
@@ -20,4 +21,5 @@ function mapEvent(element, name, value) {
 	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
 	if (type != null && typeof value === "function") on(element, getType(element, type), value, getOptions(options ?? ""));
 }
+//#endregion
 export { mapEvent };

package/dist/node/index.d.mts

@@ -0,0 +1,6 @@
+import { r as FragmentData } from "../fragment-9qTBAvtR.mjs";
+
+//#region src/node/index.d.ts
+declare function mapNodes(data: FragmentData, nodes: ChildNode[]): void;
+//#endregion
+export { mapNodes };

package/dist/node/{index.js → index.mjs}

@@ -1,11 +1,12 @@
-import { EXPRESSION_ABYDON_CONTENT } from "../constants.js";
-import { isFragment, isFragments } from "../helpers/index.js";
-import { handleFragments } from "../fragments.js";
-import { createNodes } from "../helpers/dom.js";
-import { mapAttributes } from "./attribute/index.js";
-import { setReactiveValue } from "./value.js";
+import { EXPRESSION_ABYDON_CONTENT } from "../constants.mjs";
+import { isFragment, isFragments } from "../helpers/index.mjs";
+import { handleFragments } from "../fragments.mjs";
+import { createNodes } from "../helpers/dom.mjs";
+import { mapAttributes } from "./attribute/index.mjs";
+import { setReactiveValue } from "./value.mjs";
 import { computed, isReactive } from "@oscarpalmer/mora";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+//#region src/node/index.ts
 function mapNode(data, comment) {
 	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? "");
 	const value = matches == null ? null : data.values[+matches[1]];
@@ -41,7 +42,7 @@ function mapValue(data, comment, value) {
 	}
 }
 function replaceComment(data, comment, value) {
-	const item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	const item = data.items.find((item) => item.nodes?.includes(comment));
 	const nodes = createNodes(value);
 	if (item != null) {
 		item.fragments = isFragment(value) ? [value] : void 0;
@@ -54,4 +55,5 @@ function setComputedValue(data, comment, callback) {
 	data.mora.values.add(value);
 	setReactiveValue(data, comment, value);
 }
+//#endregion
 export { mapNodes };

package/dist/node/value.d.mts

@@ -0,0 +1,7 @@
+import { r as FragmentData } from "../fragment-9qTBAvtR.mjs";
+import { Reactive } from "@oscarpalmer/mora";
+
+//#region src/node/value.d.ts
+declare function setReactiveValue(data: FragmentData, comment: Comment, reactive: Reactive<unknown>): void;
+//#endregion
+export { setReactiveValue };