@oscarpalmer/abydon 0.22.0 → 0.23.1

package/dist/attribute/index.d.mts

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

package/dist/attribute/index.mjs

@@ -1,42 +1,48 @@
 import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX } from "../constants.mjs";
-import { isInputElement } from "../helpers/dom.mjs";
+import { setComputedValue } from "../helpers/index.mjs";
 import { mapEvent } from "../node/event.mjs";
 import { setAttribute } from "./value.mjs";
-import { computed, isSignal } from "@oscarpalmer/mora";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { isSignal } from "@oscarpalmer/mora";
+import { isInputElement } from "@oscarpalmer/toretto/is";
 //#region src/attribute/index.ts
+function compareAttributes(first, second) {
+	return first.name.localeCompare(second.name);
+}
 function getValue(data, original) {
 	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
 	return matches == null ? original : data.values[+matches[1]];
 }
-function mapAttributes(data, element) {
-	const attributes = [...element.attributes].sort((first, second) => first.name.localeCompare(second.name));
+function mapAttributeValue(data, element, name, value) {
+	if (typeof value === "function") setComputedAttribute(data, element, name, value);
+	else setAttribute(data, element, name, value);
+	if (isInputElement(element) && isSignal(value) && name in element) mapEvent(element, "on", () => {
+		value.set(element[name]);
+	});
+}
+function mapAttributes(data, element, ignoreValue) {
+	const attributes = [...element.attributes].sort(compareAttributes);
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
 		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, "");
-		const actualValue = getValue(data, value);
 		if (actualName !== name) element.removeAttribute(name);
+		if (isNullableOrWhitespace(value) || actualName === "value" && ignoreValue) continue;
+		const actualValue = getValue(data, value);
 		switch (true) {
 			case EXPRESSION_EVENT_PREFIX.test(actualName):
 				mapEvent(element, actualName, actualValue);
 				break;
 			default:
-				mapValue(data, element, actualName, actualValue);
+				mapAttributeValue(data, element, actualName, actualValue);
 				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) && name in element) mapEvent(element, "on", () => {
-		value.set(element[name]);
-	});
-}
 function setComputedAttribute(data, element, name, callback) {
-	const value = computed(callback);
-	data.mora.values.add(value);
-	setAttribute(data, element, name, value);
+	setComputedValue(data, callback, (computation) => {
+		setAttribute(data, element, name, computation);
+	});
 }
 //#endregion
-export { mapAttributes };
+export { mapAttributeValue, mapAttributes };

package/dist/attribute/value.mjs

@@ -1,17 +1,16 @@
-import { EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_ATTRIBUTE_STYLE_PROPERTY } from "../constants.mjs";
+import { EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_ATTRIBUTE_STYLE_VARIABLE } 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;
+function getStyleValue(value, unit, isVariable) {
+	if (removeStyleValue(value, unit, isVariable)) 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;
+function removeStyleValue(value, unit, isVariable) {
+	if (value == null || value === false || isVariable && isNullableOrWhitespace(value)) return true;
 	return unit == null && (value === true || value === "true");
 }
 function setAttribute(data, element, name, value) {
@@ -28,36 +27,27 @@ function setAttribute(data, element, name, value) {
 	}
 }
 function setClassValues(data, element, name, value) {
-	function update(value) {
+	const classes = name.slice(6).split(".");
+	updateValue(data, value, (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);
+	const isVariable = EXPRESSION_ATTRIBUTE_STYLE_VARIABLE.test(name);
+	updateValue(data, value, (value) => {
+		setStyle(element, property, getStyleValue(value, unit, isVariable));
+	});
 }
 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);
+	updateValue(data, value, (value) => {
+		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 === "" ? "_" : "";
+function updateValue(data, value, updater) {
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(updater));
+	else updater(value);
 }
 //#endregion
 export { setAttribute };

package/dist/constants.d.mts

@@ -2,11 +2,11 @@
 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_CLASS_PREFIX_LENGTH: number;
 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_DUPLICATE = "Duplicate identifier found: '<>'";
 declare const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
 declare const EVENT_CHANGE = "change";
 declare const EVENT_INPUT = "input";
@@ -20,24 +20,20 @@ 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_ATTRIBUTE_STYLE_PROPERTY: RegExp;
+declare const EXPRESSION_ATTRIBUTE_STYLE_VARIABLE: 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;
 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 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, 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 };
+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_VARIABLE, EXPRESSION_EVENT_ATTRIBUTE, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_TEXTAREA_VALUE, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM, VALUE_TRUE, WHITESPACE };

package/dist/constants.mjs

@@ -6,7 +6,7 @@ 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_DUPLICATE = "Duplicate identifier found: '<>'";
 const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
 const EVENT_CHANGE = "change";
 const EVENT_INPUT = "input";
@@ -27,24 +27,20 @@ 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_ATTRIBUTE_STYLE_PROPERTY = /^style\.--/;
+const EXPRESSION_ATTRIBUTE_STYLE_VARIABLE = /^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_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 = /(?:<|&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, 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 };
+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_VARIABLE, EXPRESSION_EVENT_ATTRIBUTE, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_TEXTAREA_VALUE, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM, VALUE_TRUE, WHITESPACE };

package/dist/fragment.d.mts

@@ -6,39 +6,52 @@ declare class Fragment {
   /**
    * Is template caching enabled?
    */
-  get caching(): boolean;
+  get cache(): boolean;
   /**
-   * Fragment identifier
+   * Identifier for the _Fragment_
+   *
+   * _An identifier can be used to uniquely identify a Fragment, which helps prevent re-rendering in reactive arrays and Fragments_
    */
   get identifier(): unknown;
   constructor(strings: TemplateStringsArray, expressions: unknown[]);
   /**
-   * Append the fragment to the given element
+   * Insert the _Fragment_ after the given element
+   * @param element Element to insert after
+   */
+  after(element: Element): void;
+  /**
+   * Append the _Fragment_ to the given element
    * @param element Element to append to
    */
   appendTo(element: Element): void;
   /**
-   * Configure the fragment
+   * Insert the _Fragment_ before the given element
+   * @param element Element to insert before
+   */
+  before(element: Element): void;
+  /**
+   * Configure the _Fragment_
+   *
+   * _Returns the Fragment instance for chaining_
    * @param configuration Configuration options
-   * @returns Fragment
+   * @returns _Fragment_
    */
   configure(configuration: FragmentConfiguration): Fragment;
   /**
-   * Get a list of the fragment's nodes
+   * 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
+   * Prepend the _Fragment_ to the given element
+   * @param element Element to prepend to
    */
-  identify(identifier: unknown): Fragment;
+  prependTo(element: Element): void;
   /**
-   * Remove the fragment from the DOM
+   * Remove the _Fragment_ _(and all its descendants)_ from the _DOM_
+   *
+   * - _Any events, reactive values, and Fragments will also be cleaned up and removed_
+   * - _After being removed, the Fragment can be re-inserted into the DOM_
    */
   remove(): void;
 }

package/dist/fragment.mjs

@@ -16,11 +16,13 @@ var Fragment = class {
 	/**
 	* Is template caching enabled?
 	*/
-	get caching() {
+	get cache() {
 		return this.#configuration.cache;
 	}
 	/**
-	* Fragment identifier
+	* Identifier for the _Fragment_
+	*
+	* _An identifier can be used to uniquely identify a Fragment, which helps prevent re-rendering in reactive arrays and Fragments_
 	*/
 	get identifier() {
 		return this.#configuration.identifier;
@@ -39,16 +41,32 @@ var Fragment = class {
 		};
 	}
 	/**
-	* Append the fragment to the given element
+	* Insert the _Fragment_ after the given element
+	* @param element Element to insert after
+	*/
+	after(element) {
+		element.after(...this.get());
+	}
+	/**
+	* Append the _Fragment_ to the given element
 	* @param element Element to append to
 	*/
 	appendTo(element) {
 		element.append(...this.get());
 	}
 	/**
-	* Configure the fragment
+	* Insert the _Fragment_ before the given element
+	* @param element Element to insert before
+	*/
+	before(element) {
+		element.before(...this.get());
+	}
+	/**
+	* Configure the _Fragment_
+	*
+	* _Returns the Fragment instance for chaining_
 	* @param configuration Configuration options
-	* @returns Fragment
+	* @returns _Fragment_
 	*/
 	configure(configuration) {
 		const actual = isPlainObject(configuration) ? configuration : {};
@@ -57,7 +75,7 @@ var Fragment = class {
 		return this;
 	}
 	/**
-	* Get a list of the fragment's nodes
+	* Get a list of the _Fragment_'s nodes
 	* @returns List of nodes
 	*/
 	get() {
@@ -70,19 +88,17 @@ 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
+	* Prepend the _Fragment_ to the given element
+	* @param element Element to prepend to
 	*/
-	identify(identifier) {
-		this.#configuration.identifier = identifier;
-		return this;
+	prependTo(element) {
+		element.prepend(...this.get());
 	}
 	/**
-	* Remove the fragment from the DOM
+	* Remove the _Fragment_ _(and all its descendants)_ from the _DOM_
+	*
+	* - _Any events, reactive values, and Fragments will also be cleaned up and removed_
+	* - _After being removed, the Fragment can be re-inserted into the DOM_
 	*/
 	remove() {
 		removeFragment(this.#data);

package/dist/fragments.d.mts

@@ -8,7 +8,6 @@ declare class Fragments {
   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, fragmentsStates, handleFragments, initializeFragments };
+export { Fragments, fragmentsStates, handleFragments };

package/dist/fragments.mjs

@@ -38,7 +38,7 @@ function handleItems(state, items) {
 			instance = state.fragment(item);
 			if (!isFragment(instance)) throw new Error(ERROR_FRAGMENT);
 		}
-		instance.identify(key);
+		instance.configure({ identifier: key });
 		state.instances[key] = instance;
 		keys.add(key);
 		mapped.push(instance);
@@ -71,4 +71,4 @@ function updateFragments(state, active) {
 }
 const fragmentsStates = /* @__PURE__ */ new WeakMap();
 //#endregion
-export { Fragments, fragmentsStates, handleFragments, initializeFragments };
+export { Fragments, fragmentsStates, handleFragments };

package/dist/helpers/dom.d.mts

@@ -1,7 +1,6 @@
 //#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;
+declare function replaceNodes(from: ChildNode[], to: ChildNode[]): ChildNode[];
 //#endregion
-export { createNodes, isInputElement, removeNodes, replaceNodes };
+export { createNodes, removeNodes, replaceNodes };

package/dist/helpers/dom.mjs

@@ -7,9 +7,6 @@ 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();
@@ -18,6 +15,7 @@ function replaceNodes(from, to) {
 	from[0]?.replaceWith(...to);
 	const { length } = from;
 	for (let index = 1; index < length; index += 1) from[index].remove();
+	return to;
 }
 //#endregion
-export { createNodes, isInputElement, removeNodes, replaceNodes };
+export { createNodes, removeNodes, replaceNodes };

package/dist/helpers/index.d.mts

@@ -1,20 +1,24 @@
 import { Fragment } from "../fragment.mjs";
+import { FragmentData } from "../models.mjs";
 import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED } from "../constants.mjs";
 import { Fragments } from "../fragments.mjs";
+import { Computed } from "@oscarpalmer/mora";
+import { GenericCallback } from "@oscarpalmer/atoms/models";
 
 //#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?
+ * Is the value a _Fragment_?
  * @param value Value to check
- * @returns `true` if the value is a Fragment, otherwise `false`
+ * @returns `true` if the value is a _Fragment_, otherwise `false`
  */
 declare function isFragment(value: unknown): value is Fragment;
 /**
- * Is the value a Fragments?
+ * Is the value a _Fragments_ instance?
  * @param value Value to check
- * @returns `true` if the value is a Fragments, otherwise `false`
+ * @returns `true` if the value is a _Fragments_ instance, otherwise `false`
  */
 declare function isFragments(value: unknown): value is Fragments;
+declare function setComputedValue(data: FragmentData, callback: GenericCallback, after: (computation: Computed<unknown>) => void): void;
 //#endregion
-export { compareArrays, isFragment, isFragments };
+export { compareArrays, isFragment, isFragments, setComputedValue };

package/dist/helpers/index.mjs

@@ -1,4 +1,5 @@
 import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.mjs";
+import { computed } from "@oscarpalmer/mora";
 //#region src/helpers/index.ts
 function compareArrays(first, second) {
 	const firstIsLarger = first.length > second.length;
@@ -8,17 +9,17 @@ function compareArrays(first, second) {
 	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 /**
-* Is the value a Fragment?
+* Is the value a _Fragment_?
 * @param value Value to check
-* @returns `true` if the value is a Fragment, otherwise `false`
+* @returns `true` if the value is a _Fragment_, otherwise `false`
 */
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
 }
 /**
-* Is the value a Fragments?
+* Is the value a _Fragments_ instance?
 * @param value Value to check
-* @returns `true` if the value is a Fragments, otherwise `false`
+* @returns `true` if the value is a _Fragments_ instance, otherwise `false`
 */
 function isFragments(value) {
 	return isNamed(value, NAME_FRAGMENTS);
@@ -26,5 +27,10 @@ function isFragments(value) {
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
+function setComputedValue(data, callback, after) {
+	const computation = computed(callback);
+	data.mora.values.add(computation);
+	after(computation);
+}
 //#endregion
-export { compareArrays, isFragment, isFragments };
+export { compareArrays, isFragment, isFragments, setComputedValue };

package/dist/index.d.mts

@@ -6,16 +6,43 @@ export * from "@oscarpalmer/mora";
 
 //#region src/index.d.ts
 /**
- * Create a Fragments from a reactive array
+ * Create a _Fragments_ instance from a reactive array
+ *
+ * _A Fragments instance can be used to efficiently render a list of items that may change over time, using unique identifiers to track each item, only adding, removing, or updating each related Fragment._
+ *
+ * @example
+ * ```ts
+ * const fruits = array(['Apple', 'Banana', 'Cherry']);
+ * const items = fragments(
+ *   fruits,
+ *   fruit => fruit,                           // Identifies a unique item
+ *   fruit => html`<p>${fruit}</p>`,           // Creates a Fragment from an item
+ * );
+ * html`${items}`.appendTo(document.body)      // Renders '<p>Apple</p><p>Banana</p><p>Cherry</p>'
+ * fruits.push(['Date', 'Elderberry', 'Fig']); // Appends '<p>Date</p><p>Elderberry</p><p>Fig</p>'
+ *                                             // without re-rendering the existing Fragments
+ * ```
+ *
  * @param array Reactive array
- * @param identify Function to identify item
- * @param fragment Function to create fragment from item
- * @returns Fragments
+ * @param identify Function to identify item uniquely _(non-nullable)_
+ * @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 a Fragment from a template
- * @returns Fragment
+ * Create a _Fragment_ from a template
+ *
+ * _A Fragment can be used to efficiently render a template that may change over time, only updating the necessary parts of the DOM._
+ *
+ * @example
+ * ```ts
+ * const name = signal('World');
+ * const fragment = html`<p>Hello, ${name}!</p>`;
+ * fragment.appendTo(document.body);              // Renders '<p>Hello, World!</p>'
+ * name.set('Alice');                             // Replaces 'World' with 'Alice'
+ * ```
+ *
+ * @returns _Fragment_
  */
 declare function html(template: TemplateStringsArray, ...values: unknown[]): Fragment;
 //#endregion

package/dist/index.mjs

@@ -5,11 +5,27 @@ import { isArray } from "@oscarpalmer/mora";
 export * from "@oscarpalmer/mora";
 //#region src/index.ts
 /**
-* Create a Fragments from a reactive array
+* Create a _Fragments_ instance from a reactive array
+*
+* _A Fragments instance can be used to efficiently render a list of items that may change over time, using unique identifiers to track each item, only adding, removing, or updating each related Fragment._
+*
+* @example
+* ```ts
+* const fruits = array(['Apple', 'Banana', 'Cherry']);
+* const items = fragments(
+*   fruits,
+*   fruit => fruit,                           // Identifies a unique item
+*   fruit => html`<p>${fruit}</p>`,           // Creates a Fragment from an item
+* );
+* html`${items}`.appendTo(document.body)      // Renders '<p>Apple</p><p>Banana</p><p>Cherry</p>'
+* fruits.push(['Date', 'Elderberry', 'Fig']); // Appends '<p>Date</p><p>Elderberry</p><p>Fig</p>'
+*                                             // without re-rendering the existing Fragments
+* ```
+*
 * @param array Reactive array
-* @param identify Function to identify item
-* @param fragment Function to create fragment from item
-* @returns Fragments
+* @param identify Function to identify item uniquely _(non-nullable)_
+* @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");
@@ -18,8 +34,19 @@ function fragments(array, identify, fragment) {
 	return new Fragments(array, identify, fragment);
 }
 /**
-* Create a Fragment from a template
-* @returns Fragment
+* Create a _Fragment_ from a template
+*
+* _A Fragment can be used to efficiently render a template that may change over time, only updating the necessary parts of the DOM._
+*
+* @example
+* ```ts
+* const name = signal('World');
+* const fragment = html`<p>Hello, ${name}!</p>`;
+* fragment.appendTo(document.body);              // Renders '<p>Hello, World!</p>'
+* name.set('Alice');                             // Replaces 'World' with 'Alice'
+* ```
+*
+* @returns _Fragment_
 */
 function html(template, ...values) {
 	return new Fragment(template, values);

package/dist/models.d.mts

@@ -2,16 +2,18 @@ import { Fragment } from "./fragment.mjs";
 import { Reactive, ReactiveArray, Unsubscribe } from "@oscarpalmer/mora";
 
 //#region src/models.d.ts
+/**
+ * Configuration for a _Fragment_
+ */
 type FragmentConfiguration = {
   /**
    * Should the template be cached? _(defaults to `true`)_
    */
   cache?: boolean;
   /**
-   * Identifier for the fragment
+   * Identifier for the _Fragment_
    *
-   * _(An identifier can be used to uniquely identify a fragment,
-   * which helps prevent re-rendering in certain scenarios)_
+   * _An identifier can be used to uniquely identify a Fragment, which helps prevent re-rendering in reactive arrays and Fragments_
    */
   identifier?: unknown;
 };
@@ -19,7 +21,7 @@ type FragmentData = {
   expressions: unknown[];
   items: FragmentItem[];
   mora: MoraData;
-  strings: TemplateStringsArray;
+  strings: TemplateStringsArray | string[];
   template?: string;
   values: unknown[];
 };