@oscarpalmer/abydon 0.20.0 → 0.22.0

package/dist/attribute/index.d.mts

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

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

@@ -1,16 +1,15 @@
-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 { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX } from "../constants.mjs";
+import { isInputElement } from "../helpers/dom.mjs";
+import { mapEvent } from "../node/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
+import { computed, isSignal } from "@oscarpalmer/mora";
+//#region src/attribute/index.ts
 function getValue(data, original) {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(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 attributes = [...element.attributes].sort((first, second) => first.name.localeCompare(second.name));
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
@@ -21,25 +20,17 @@ function mapAttributes(data, element) {
 			case EXPRESSION_EVENT_PREFIX.test(actualName):
 				mapEvent(element, actualName, actualValue);
 				break;
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === "function":
-			case isReactive(actualValue):
+			default:
 				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);
+	if (isInputElement(element) && isSignal(value) && name in element) mapEvent(element, "on", () => {
+		value.set(element[name]);
 	});
 }
 function setComputedAttribute(data, element, name, callback) {

package/dist/{node/attribute → attribute}/value.d.mts

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

package/dist/attribute/value.mjs

@@ -0,0 +1,63 @@
+import { EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_ATTRIBUTE_STYLE_PROPERTY } from "../constants.mjs";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
+import { isReactive } from "@oscarpalmer/mora";
+import { camelCase } from "@oscarpalmer/atoms/string/case";
+import { setAttribute as setAttribute$1 } from "@oscarpalmer/toretto/attribute";
+import { setStyle } from "@oscarpalmer/toretto/style";
+//#region src/attribute/value.ts
+function getStyleValue(value, unit, isProperty) {
+	if (removeStyleValue(value, unit, isProperty)) return;
+	return value === true || value === "true" ? unit : `${getString(value)}${unit ?? ""}`;
+}
+function removeStyleValue(value, unit, isProperty) {
+	if (value == null || value === false || isProperty && isNullableOrWhitespace(value)) return true;
+	return unit == null && (value === true || value === "true");
+}
+function setAttribute(data, element, name, value) {
+	switch (true) {
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
+			setClassValues(data, element, name, value);
+			return;
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
+			setStyleValues(data, element, name, value);
+			return;
+		default:
+			setValue(data, element, name, value);
+			break;
+	}
+}
+function setClassValues(data, element, name, value) {
+	function update(value) {
+		if (value === true || 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 setStyleValues(data, element, name, value) {
+	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name);
+	const isProperty = EXPRESSION_ATTRIBUTE_STYLE_PROPERTY.test(name);
+	property = camelCase(property);
+	if (isProperty) property = `--${property}`;
+	function update(value) {
+		setStyle(element, property, getStyleValue(value, unit, isProperty));
+	}
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	else update(value);
+}
+function setValue(data, element, name, value) {
+	const isReactiveValue = isReactive(value);
+	unsetValue(element, name, isReactiveValue ? value.peek() : value);
+	if (isReactiveValue) data.mora.subscribers.add(value.subscribe((next) => {
+		setAttribute$1(element, name, next);
+	}));
+	else setAttribute$1(element, name, value);
+}
+function unsetValue(element, name, value) {
+	if (name === "checked") element.checked = !(value === true || value === "true");
+	if (name === "value") element.value = element.value === "" ? "_" : "";
+}
+//#endregion
+export { setAttribute };

package/dist/constants.d.mts

@@ -4,6 +4,7 @@ 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 CHANGE_INPUTS: Set<string>;
 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";
@@ -11,7 +12,6 @@ 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;
@@ -20,7 +20,8 @@ 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_ATTRIBUTE_STYLE_PROPERTY: RegExp;
+declare const EXPRESSION_EVENT_ATTRIBUTE: RegExp;
 declare const EXPRESSION_EVENT_NAME: RegExp;
 declare const EXPRESSION_EVENT_OPTIONS_ACTIVE: RegExp;
 declare const EXPRESSION_EVENT_OPTIONS_CAPTURE: RegExp;
@@ -29,11 +30,14 @@ 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 INPUT_TYPE_RADIO = "radio";
 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 = "<>";
+declare const VALUE_TRUE = "true";
+declare const WHITESPACE: RegExp;
 //#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, EXPRESSION_TEXTAREA_VALUE, INPUT_TYPE_CHECKBOX, 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, CHANGE_INPUTS, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, 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_ATTRIBUTE_STYLE_PROPERTY, EXPRESSION_EVENT_ATTRIBUTE, 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, INPUT_TYPE_RADIO, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM, VALUE_TRUE, WHITESPACE };

package/dist/constants.mjs

@@ -4,6 +4,7 @@ const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
 const ARRAY_COMPARISON_REMOVED = "removed";
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 const ATTRIBUTE_NAME_DELIMITER = ".";
+const CHANGE_INPUTS = new Set(["checkbox", "radio"]);
 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";
@@ -18,29 +19,32 @@ const EVENT_DEFAULTS = {
 	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_ABYDON_ATTRIBUTE_FULL = /(@?[\w-.]+(?::[a-z:]+)?)="<!--abydon.(\d+)-->"/g;
+const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^abydon-/;
+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_ATTRIBUTE_STYLE_PROPERTY = /^style\.--/;
+const EXPRESSION_EVENT_ATTRIBUTE = /^@([\w-]+)(?::([a-z:]+))?="$/i;
+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 EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
 const INPUT_TYPE_CHECKBOX = "checkbox";
+const INPUT_TYPE_RADIO = "radio";
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
 const PROPERTY_CHECKED = "checked";
 const PROPERTY_IDENTIFIER = "identifier";
 const PROPERTY_VALUE = "value";
 const TEMPLATE_ITEM = "<>";
+const VALUE_TRUE = "true";
+const WHITESPACE = /\s+/g;
 //#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, EXPRESSION_TEXTAREA_VALUE, INPUT_TYPE_CHECKBOX, 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, CHANGE_INPUTS, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, 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_ATTRIBUTE_STYLE_PROPERTY, EXPRESSION_EVENT_ATTRIBUTE, 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, INPUT_TYPE_RADIO, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM, VALUE_TRUE, WHITESPACE };

package/dist/fragment.d.mts

@@ -1,2 +1,46 @@
-import { t as Fragment } from "./fragment-9qTBAvtR.mjs";
+import { FragmentConfiguration } from "./models.mjs";
+
+//#region src/fragment.d.ts
+declare class Fragment {
+  #private;
+  /**
+   * Is template caching enabled?
+   */
+  get caching(): boolean;
+  /**
+   * 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 { Fragment };

package/dist/fragment.mjs

@@ -14,6 +14,12 @@ var Fragment = class {
 		cache: true
 	};
 	/**
+	* Is template caching enabled?
+	*/
+	get caching() {
+		return this.#configuration.cache;
+	}
+	/**
 	* Fragment identifier
 	*/
 	get identifier() {
@@ -59,9 +65,9 @@ var Fragment = class {
 		if (data.items.length === 0) {
 			const templated = html(parse(data), { cache: this.#configuration.cache });
 			data.items.splice(0, data.items.length, ...templated.map((node) => ({ nodes: [node] })));
-			mapNodes(data, data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []));
+			mapNodes(data, data.items.flatMap((item) => item.nodes));
 		}
-		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []);
+		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes);
 	}
 	/**
 	* Set an identifier for the fragment
@@ -89,7 +95,7 @@ function removeFragment(data) {
 		const { fragments, nodes } = data.items[index];
 		const fragmentsLength = fragments?.length ?? 0;
 		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) fragments?.[fragmentIndex]?.remove();
-		removeNodes(nodes ?? []);
+		removeNodes(nodes);
 	}
 	data.items.length = 0;
 	length = data.values.length;

package/dist/fragments.d.mts

@@ -1,16 +1,14 @@
-import { a as FragmentsState, t as Fragment } from "./fragment-9qTBAvtR.mjs";
+import { Fragment } from "./fragment.mjs";
+import { FragmentsState } from "./models.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;
+declare const fragmentsStates: WeakMap<Fragments, FragmentsState>;
 //#endregion
-export { Fragments, handleFragments, initializeFragments };
+export { Fragments, fragmentsStates, handleFragments, initializeFragments };

package/dist/fragments.mjs

@@ -5,12 +5,6 @@ import { array } from "@oscarpalmer/mora";
 //#region src/fragments.ts
 var Fragments = class {
 	#state;
-	/**
-	* Fragment items
-	*/
-	get items() {
-		return this.#state.mapped;
-	}
 	constructor(items, identify, fragment) {
 		Object.defineProperty(this, NAME_FRAGMENTS, { value: true });
 		this.#state = {
@@ -21,13 +15,13 @@ var Fragments = class {
 			mapped: array([]),
 			subscriber: void 0
 		};
-		states.set(this, this.#state);
+		fragmentsStates.set(this, this.#state);
 		initializeFragments(this.#state);
 	}
 };
 function handleFragments(item, remove) {
-	const state = isFragments(item) ? states.get(item) : item;
-	if (state != null) (remove ? removeFragments : initializeFragments)(state);
+	const state = isFragments(item) ? fragmentsStates.get(item) : item;
+	(remove ? removeFragments : initializeFragments)(state);
 }
 function handleItems(state, items) {
 	const keys = /* @__PURE__ */ new Set();
@@ -75,6 +69,6 @@ function updateFragments(state, active) {
 	state.instances = next;
 	active?.clear();
 }
-const states = /* @__PURE__ */ new WeakMap();
+const fragmentsStates = /* @__PURE__ */ new WeakMap();
 //#endregion
-export { Fragments, handleFragments, initializeFragments };
+export { Fragments, fragmentsStates, handleFragments, initializeFragments };

package/dist/helpers/index.d.mts

@@ -1,10 +1,20 @@
+import { Fragment } from "../fragment.mjs";
 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;
+/**
+ * Is the value a Fragment?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragment, otherwise `false`
+ */
 declare function isFragment(value: unknown): value is Fragment;
+/**
+ * Is the value a Fragments?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragments, otherwise `false`
+ */
 declare function isFragments(value: unknown): value is Fragments;
 //#endregion
 export { compareArrays, isFragment, isFragments };

package/dist/helpers/index.mjs

@@ -7,9 +7,19 @@ function compareArrays(first, second) {
 	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;
 }
+/**
+* Is the value a Fragment?
+* @param value Value to check
+* @returns `true` if the value is a Fragment, otherwise `false`
+*/
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
 }
+/**
+* Is the value a Fragments?
+* @param value Value to check
+* @returns `true` if the value is a Fragments, otherwise `false`
+*/
 function isFragments(value) {
 	return isNamed(value, NAME_FRAGMENTS);
 }

package/dist/index.d.mts

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

package/dist/index.mjs

@@ -1,24 +1,28 @@
+import { isFragment, isFragments } from "./helpers/index.mjs";
 import { Fragments } from "./fragments.mjs";
 import { Fragment } from "./fragment.mjs";
-import "@oscarpalmer/mora";
+import { isArray } from "@oscarpalmer/mora";
 export * from "@oscarpalmer/mora";
 //#region src/index.ts
 /**
-* Create Fragments from a reactive array
+* Create a 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) {
+	if (!isArray(array)) throw new TypeError("Fragments array must be a reactive array");
+	if (typeof identify !== "function") throw new TypeError("Fragments identify must be a function");
+	if (typeof fragment !== "function") throw new TypeError("Fragments fragment must be a function");
 	return new Fragments(array, identify, fragment);
 }
 /**
-* Create Fragment from a template
+* Create a Fragment from a template
 * @returns Fragment
 */
 function html(template, ...values) {
 	return new Fragment(template, values);
 }
 //#endregion
-export { fragments, html };
+export { fragments, html, isFragment, isFragments };

package/dist/models.d.mts

@@ -1,2 +1,44 @@
-import { a as FragmentsState, i as FragmentItem, n as FragmentConfiguration, r as FragmentData } from "./fragment-9qTBAvtR.mjs";
+import { Fragment } from "./fragment.mjs";
+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
 export { FragmentConfiguration, FragmentData, FragmentItem, FragmentsState };

package/dist/node/event.mjs

@@ -1,4 +1,4 @@
-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 { CHANGE_INPUTS, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_SUBMIT, 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,14 +12,19 @@ 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 EVENT_CHANGE;
+		if (CHANGE_INPUTS.has(element.type)) return EVENT_CHANGE;
 		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }
 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 ?? ""));
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name);
+	const values = Array.isArray(value) ? value : [value];
+	const { length } = values;
+	for (let index = 0; index < length; index += 1) {
+		const item = values[index];
+		if (typeof item === "function") on(element, getType(element, type), item, getOptions(options ?? ""));
+	}
 }
 //#endregion
 export { mapEvent };

package/dist/node/index.d.mts

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

package/dist/node/index.mjs

@@ -1,15 +1,16 @@
 import { EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE } from "../constants.mjs";
 import { isFragment, isFragments } from "../helpers/index.mjs";
-import { handleFragments } from "../fragments.mjs";
+import { fragmentsStates, handleFragments } from "../fragments.mjs";
 import { createNodes } from "../helpers/dom.mjs";
 import { mapEvent } from "./event.mjs";
-import { mapAttributes } from "./attribute/index.mjs";
+import { mapAttributes } from "../attribute/index.mjs";
 import { setReactiveValue } from "./value.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 import { computed, isComputed, isReactive, isSignal } 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 matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent);
 	const value = matches == null ? null : data.values[+matches[1]];
 	if (value != null) mapValue(data, comment, value);
 }
@@ -27,23 +28,27 @@ function mapNodes(data, nodes) {
 	}
 }
 function mapTextarea(data, element) {
-	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.textContent) ?? EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
 	if (index == null) return;
+	element.textContent = "";
 	element.value = "";
 	const value = data.values[Number.parseInt(index, 10)];
 	if (isSignal(value)) {
-		element.value = String(value.peek());
-		mapEvent(element, "@on", () => {
+		element.value = getString(value.peek());
+		mapEvent(element, "on", () => {
 			value.set(element.value);
 		});
+		data.mora.subscribers.add(value.subscribe((value) => {
+			element.value = getString(value);
+		}));
 		return;
 	}
 	let reactive;
 	if (typeof value === "function") reactive = computed(value);
 	else if (isComputed(value)) reactive = value;
-	if (reactive == null) element.value = String(value);
+	if (reactive == null) element.value = "";
 	else data.mora.subscribers.add(reactive.subscribe((value) => {
-		element.value = String(value);
+		element.value = getString(value);
 	}));
 }
 function mapValue(data, comment, value) {
@@ -52,8 +57,7 @@ function mapValue(data, comment, value) {
 			setComputedValue(data, comment, value);
 			break;
 		case isFragments(value):
-			handleFragments(value, false);
-			setReactiveValue(data, comment, value.items);
+			setFragmentsValue(data, comment, value);
 			break;
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
@@ -77,5 +81,10 @@ function setComputedValue(data, comment, callback) {
 	data.mora.values.add(value);
 	setReactiveValue(data, comment, value);
 }
+function setFragmentsValue(data, comment, fragments) {
+	const state = fragmentsStates.get(fragments);
+	handleFragments(state, false);
+	setReactiveValue(data, comment, state.mapped);
+}
 //#endregion
 export { mapNodes };

package/dist/node/value.d.mts

@@ -1,4 +1,4 @@
-import { r as FragmentData } from "../fragment-9qTBAvtR.mjs";
+import { FragmentData } from "../models.mjs";
 import { Reactive } from "@oscarpalmer/mora";
 
 //#region src/node/value.d.ts