@oscarpalmer/abydon 0.23.0 → 0.24.0

package/dist/attribute/index.d.mts

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

package/dist/attribute/index.mjs

@@ -2,6 +2,7 @@ import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSI
 import { setComputedValue } from "../helpers/index.mjs";
 import { mapEvent } from "../node/event.mjs";
 import { setAttribute } from "./value.mjs";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { isSignal } from "@oscarpalmer/mora";
 import { isInputElement } from "@oscarpalmer/toretto/is";
 //#region src/attribute/index.ts
@@ -25,16 +26,14 @@ function mapAttributes(data, element, ignoreValue) {
 	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 (actualName === "value" && ignoreValue) continue;
+		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:
-				mapAttributeValue(data, element, actualName, actualValue);
-				break;
+			default: mapAttributeValue(data, element, actualName, actualValue);
 		}
 	}
 }

package/dist/attribute/value.d.mts

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

package/dist/attribute/value.mjs

@@ -21,9 +21,7 @@ function setAttribute(data, element, name, value) {
 		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
 			setStyleValues(data, element, name, value);
 			return;
-		default:
-			setValue(data, element, name, value);
-			break;
+		default: setValue(data, element, name, value);
 	}
 }
 function setClassValues(data, element, name, value) {
@@ -46,7 +44,7 @@ function setValue(data, element, name, value) {
 	});
 }
 function updateValue(data, value, updater) {
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(updater));
+	if (isReactive(value)) data.mora.subscriptions.add(value.subscribe(updater));
 	else updater(value);
 }
 //#endregion

package/dist/constants.d.mts

@@ -1,39 +1,43 @@
 //#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: 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: '<>'";
-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_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_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_TEXTAREA_VALUE: RegExp;
-declare const NAME_FRAGMENT = "$fragment";
-declare const NAME_FRAGMENTS = "$fragments";
-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_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 };
+export declare const ARRAY_COMPARISON_ADDED = "added";
+export declare const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+export declare const ARRAY_COMPARISON_REMOVED = "removed";
+export declare const ATTRIBUTE_CLASS_PREFIX_LENGTH: number;
+export declare const ATTRIBUTE_NAME_DELIMITER = ".";
+export declare const CHANGE_INPUTS: Set<string>;
+export declare const EVENT_CHANGE = "change";
+export declare const EVENT_INPUT = "input";
+export declare const EVENT_SUBMIT = "submit";
+export declare const EVENT_DEFAULTS: Record<string, string>;
+export declare const EVENT_ON_VALUE = "on";
+export declare const EVENT_OPTIONS_DELIMITER = ":";
+export declare const EXPRESSION_ABYDON_ATTRIBUTE_FULL: RegExp;
+export declare const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX: RegExp;
+export declare const EXPRESSION_ABYDON_CONTENT: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_CLASS: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_STYLE_FULL: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_STYLE_PREFIX: RegExp;
+export declare const EXPRESSION_ATTRIBUTE_STYLE_VARIABLE: RegExp;
+export declare const EXPRESSION_EVENT_ATTRIBUTE: RegExp;
+export declare const EXPRESSION_EVENT_NAME: RegExp;
+export declare const EXPRESSION_EVENT_OPTIONS_ACTIVE: RegExp;
+export declare const EXPRESSION_EVENT_OPTIONS_CAPTURE: RegExp;
+export declare const EXPRESSION_EVENT_OPTIONS_ONCE: RegExp;
+export declare const EXPRESSION_EVENT_PREFIX: RegExp;
+export declare const EXPRESSION_TEXTAREA_VALUE: RegExp;
+export declare const MESSAGE_FRAGMENT_VALUE = "Fragment template must be a string or a template strings array";
+export declare const MESSAGE_FRAGMENTS_FRAGMENT_RESULT = "Fragment function must return a Fragment instance";
+export declare const MESSAGE_FRAGMENTS_FRAGMENT_TYPE = "Fragment handler must be a function";
+export declare const MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_DUPLICATE = "Duplicate identifier found: '<>'";
+export declare const MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_TYPE = "Identifier cannot be null or undefined";
+export declare const MESSAGE_FRAGMENTS_IDENTIFIER_TYPE = "Identifier handler must be a function";
+export declare const MESSAGE_FRAGMENTS_VALUE = "Fragments array must be a reactive array";
+export declare const NAME_FRAGMENT = "fragment";
+export declare const NAME_FRAGMENTS = "fragments";
+export declare const PROPERTY_IDENTIFIER = "identifier";
+export declare const PROPERTY_VALUE = "value";
+export declare const SYMBOL: unique symbol;
+export declare const TEMPLATE_ITEM = "<>";
+export declare const VALUE_TRUE = "true";
+export declare const WHITESPACE: RegExp;
+//#endregion

package/dist/constants.mjs

@@ -4,10 +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: '<>'";
-const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+const CHANGE_INPUTS = /* @__PURE__ */ new Set(["checkbox", "radio"]);
 const EVENT_CHANGE = "change";
 const EVENT_INPUT = "input";
 const EVENT_SUBMIT = "submit";
@@ -35,12 +32,20 @@ const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(?:apture)$/i;
 const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(?:nce)$/i;
 const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
-const NAME_FRAGMENT = "$fragment";
-const NAME_FRAGMENTS = "$fragments";
+const MESSAGE_FRAGMENT_VALUE = "Fragment template must be a string or a template strings array";
+const MESSAGE_FRAGMENTS_FRAGMENT_RESULT = "Fragment function must return a Fragment instance";
+const MESSAGE_FRAGMENTS_FRAGMENT_TYPE = "Fragment handler must be a function";
+const MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_DUPLICATE = "Duplicate identifier found: '<>'";
+const MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_TYPE = "Identifier cannot be null or undefined";
+const MESSAGE_FRAGMENTS_IDENTIFIER_TYPE = "Identifier handler must be a function";
+const MESSAGE_FRAGMENTS_VALUE = "Fragments array must be a reactive array";
+const NAME_FRAGMENT = "fragment";
+const NAME_FRAGMENTS = "fragments";
 const PROPERTY_IDENTIFIER = "identifier";
 const PROPERTY_VALUE = "value";
+const SYMBOL = Symbol("abydon");
 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_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 };
+export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, CHANGE_INPUTS, 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, MESSAGE_FRAGMENTS_FRAGMENT_RESULT, MESSAGE_FRAGMENTS_FRAGMENT_TYPE, MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_DUPLICATE, MESSAGE_FRAGMENTS_IDENTIFIER_RESULT_TYPE, MESSAGE_FRAGMENTS_IDENTIFIER_TYPE, MESSAGE_FRAGMENTS_VALUE, MESSAGE_FRAGMENT_VALUE, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_IDENTIFIER, PROPERTY_VALUE, SYMBOL, TEMPLATE_ITEM, VALUE_TRUE, WHITESPACE };

package/dist/fragment.d.mts

@@ -1,59 +1,33 @@
-import { FragmentConfiguration } from "./models.mjs";
-
+import { Fragment } from "./models.mjs";
 //#region src/fragment.d.ts
-declare class Fragment {
-  #private;
-  /**
-   * Is template caching enabled?
-   */
-  get cache(): boolean;
-  /**
-   * 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[]);
-  /**
-   * 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;
-  /**
-   * 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_
-   */
-  configure(configuration: FragmentConfiguration): Fragment;
-  /**
-   * Get a list of the _Fragment_'s nodes
-   * @returns List of nodes
-   */
-  get(): ChildNode[];
-  /**
-   * Prepend the _Fragment_ to the given element
-   * @param element Element to prepend to
-   */
-  prependTo(element: Element): void;
-  /**
-   * 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;
-}
+declare function Fragment(this: any, strings: TemplateStringsArray, expressions: unknown[]): void;
+/**
+ * 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 = fragment`<p>Hello, ${name}!</p>`; // or `html`<p>Hello, ${name}!</p>`
+ * fragment.appendTo(document.body);                  // Renders '<p>Hello, World!</p>'
+ * name.set('Alice');                                 // Replaces 'World' with 'Alice'
+ * ```
+ *
+ * @returns _Fragment_
+ */
+export declare function fragment(template: TemplateStringsArray, ...values: unknown[]): Fragment;
+/**
+ * Create a _Fragment_ from a simple template
+ *
+ * @example
+ * ```ts
+ * const fragment = fragment('<p>Hello, World!</p>'); // or `html`('<p>Hello, World!</p>')
+ * fragment.appendTo(document.body);                  // Renders '<p>Hello, World!</p>'
+ * ```
+ *
+ * @returns _Fragment_
+ */
+export declare function fragment(template: string): Fragment;
 //#endregion
-export { Fragment };
+export { fragment as html };

package/dist/fragment.mjs

@@ -1,130 +1,105 @@
-import { NAME_FRAGMENT } from "./constants.mjs";
+import { MESSAGE_FRAGMENT_VALUE, NAME_FRAGMENT, SYMBOL } 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 { isNonTemplateStringsArray, isPlainObject } from "@oscarpalmer/atoms/is";
 import { html } from "@oscarpalmer/toretto/html";
 //#region src/fragment.ts
-var Fragment = class {
-	#data;
-	#configuration = {
+function Fragment(strings, expressions) {
+	this[SYMBOL] = {
+		expressions,
+		strings,
+		cache: true,
 		identifier: void 0,
-		cache: true
+		items: [],
+		mora: {
+			subscriptions: /* @__PURE__ */ new Set(),
+			values: /* @__PURE__ */ new Set()
+		},
+		name: NAME_FRAGMENT,
+		values: []
 	};
-	/**
-	* Is template caching enabled?
-	*/
-	get cache() {
-		return this.#configuration.cache;
-	}
-	/**
-	* 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;
-	}
-	constructor(strings, expressions) {
-		Object.defineProperty(this, NAME_FRAGMENT, { value: true });
-		this.#data = {
-			expressions,
-			strings,
-			items: [],
-			mora: {
-				subscribers: /* @__PURE__ */ new Set(),
-				values: /* @__PURE__ */ new Set()
-			},
-			values: []
-		};
-	}
-	/**
-	* 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());
-	}
-	/**
-	* 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_
-	*/
-	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) {
-			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.nodes));
-		}
-		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes);
-	}
-	/**
-	* Prepend the _Fragment_ to the given element
-	* @param element Element to prepend to
-	*/
-	prependTo(element) {
-		element.prepend(...this.get());
+}
+Fragment.prototype.after = insertFragmentAfter;
+Fragment.prototype.appendTo = appendFragmentTo;
+Fragment.prototype.before = insertFragmentBefore;
+Fragment.prototype.configure = configureFragment;
+Fragment.prototype.get = getFragmentNodes;
+Fragment.prototype.prependTo = prependFragmentTo;
+Fragment.prototype.remove = removeFragment;
+Object.defineProperties(Fragment.prototype, {
+	cache: {
+		enumerable: true,
+		get: getFragmentCache
+	},
+	identifier: {
+		enumerable: true,
+		get: getFragmentIdentifier
 	}
-	/**
-	* 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);
+});
+function appendFragmentTo(element) {
+	element.append(...this.get());
+}
+function configureFragment(configuration) {
+	const state = this[SYMBOL];
+	const actual = isPlainObject(configuration) ? configuration : {};
+	if ("identifier" in actual) state.identifier = actual.identifier;
+	if (typeof actual.cache === "boolean") state.cache = actual.cache;
+	return this;
+}
+function fragment(template, ...values) {
+	if (typeof template !== "string" && isNonTemplateStringsArray(template)) throw new TypeError(MESSAGE_FRAGMENT_VALUE);
+	return new Fragment(template, values);
+}
+function getFragmentCache() {
+	return this[SYMBOL].cache;
+}
+function getFragmentIdentifier() {
+	return this[SYMBOL].identifier;
+}
+function getFragmentNodes() {
+	const state = this[SYMBOL];
+	if (state.items.length === 0) {
+		const parsed = parse(state);
+		const templated = html(parsed, { cache: state.cache });
+		state.items.splice(0, state.items.length, ...templated.map((node) => ({ nodes: [node] })));
+		mapNodes(state, state.items.flatMap((item) => item.nodes));
 	}
-};
-function removeFragment(data) {
-	removeMora(data);
-	let { length } = data.items;
+	return state.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes);
+}
+function insertFragmentAfter(element) {
+	element.after(...this.get());
+}
+function insertFragmentBefore(element) {
+	element.before(...this.get());
+}
+function prependFragmentTo(element) {
+	element.prepend(...this.get());
+}
+function removeFragment() {
+	const state = this[SYMBOL];
+	removeMora(state);
+	let { length } = state.items;
 	for (let index = 0; index < length; index += 1) {
-		const { fragments, nodes } = data.items[index];
+		const { fragments, nodes } = state.items[index];
 		const fragmentsLength = fragments?.length ?? 0;
 		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) fragments?.[fragmentIndex]?.remove();
 		removeNodes(nodes);
 	}
-	data.items.length = 0;
-	length = data.values.length;
+	state.items.length = 0;
+	length = state.values.length;
 	for (let index = 0; index < length; index += 1) {
-		const value = data.values[index];
+		const value = state.values[index];
 		if (isFragments(value)) handleFragments(value, true);
 	}
 }
-function removeMora(data) {
-	const unsubscribers = [...data.mora.subscribers];
-	data.mora.subscribers.clear();
-	data.mora.values.clear();
-	for (const unsubscribe of unsubscribers) unsubscribe();
+function removeMora(state) {
+	const subscriptions = [...state.mora.subscriptions];
+	state.mora.subscriptions.clear();
+	state.mora.values.clear();
+	for (const subscription of subscriptions) subscription.unsubscribe();
 }
 //#endregion
-export { Fragment };
+export { fragment, fragment as html };

package/dist/fragments.d.mts

@@ -1,13 +1,30 @@
-import { Fragment } from "./fragment.mjs";
-import { FragmentsState } from "./models.mjs";
+import { Fragment, Fragments } from "./models.mjs";
 import { ReactiveArray } from "@oscarpalmer/mora";
-
 //#region src/fragments.d.ts
-declare class Fragments {
-  #private;
-  constructor(items: ReactiveArray<unknown>, identify: (item: unknown) => unknown, fragment: (item: unknown) => Fragment);
-}
-declare function handleFragments(item: Fragments | FragmentsState, remove: boolean): void;
-declare const fragmentsStates: WeakMap<Fragments, FragmentsState>;
-//#endregion
-export { Fragments, fragmentsStates, handleFragments };
+declare function Fragments(this: any, items: ReactiveArray<unknown>, identify: (item: unknown) => unknown, fragment: (item: unknown) => Fragment): void;
+/**
+ * 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 uniquely _(non-nullable)_
+ * @param fragment Function to create _Fragment_ from item
+ * @returns _Fragments_
+ */
+export declare function fragments<Item>(array: ReactiveArray<Item>, identify: (item: Item) => unknown, fragment: (item: Item) => Fragment): Fragments;
+export declare function handleFragments(instance: Fragments, remove: boolean): void;
+//#endregion