@oscarpalmer/abydon 0.22.0 → 0.23.0

package/dist/node/index.mjs

@@ -1,12 +1,10 @@
 import { EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE } from "../constants.mjs";
-import { isFragment, isFragments } from "../helpers/index.mjs";
+import { isFragment, isFragments, setComputedValue } from "../helpers/index.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 { mapAttributeValue, 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 { isReactive } from "@oscarpalmer/mora";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/node/index.ts
 function mapNode(data, comment) {
@@ -22,42 +20,29 @@ function mapNodes(data, nodes) {
 			mapNode(data, node);
 			continue;
 		}
-		if (node instanceof HTMLTextAreaElement) mapTextarea(data, node);
-		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
+		if (isHTMLOrSVGElement(node)) {
+			let ignoreValueAttribute = false;
+			if (node instanceof HTMLTextAreaElement) ignoreValueAttribute = mapTextarea(data, node);
+			mapAttributes(data, node, ignoreValueAttribute);
+		}
 		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
 	}
 }
 function mapTextarea(data, element) {
 	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.textContent) ?? EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
-	if (index == null) return;
+	if (index == null) return false;
 	element.textContent = "";
 	element.value = "";
-	const value = data.values[Number.parseInt(index, 10)];
-	if (isSignal(value)) {
-		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 = "";
-	else data.mora.subscribers.add(reactive.subscribe((value) => {
-		element.value = getString(value);
-	}));
+	mapAttributeValue(data, element, "value", data.values[Number.parseInt(index, 10)]);
+	return true;
 }
 function mapValue(data, comment, value) {
 	switch (true) {
 		case typeof value === "function":
-			setComputedValue(data, comment, value);
+			setComputedNode(data, comment, value);
 			break;
 		case isFragments(value):
-			setFragmentsValue(data, comment, value);
+			setFragmentsNode(data, comment, value);
 			break;
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
@@ -76,12 +61,12 @@ function replaceComment(data, comment, value) {
 	}
 	comment.replaceWith(...nodes);
 }
-function setComputedValue(data, comment, callback) {
-	const value = computed(callback);
-	data.mora.values.add(value);
-	setReactiveValue(data, comment, value);
+function setComputedNode(data, comment, callback) {
+	setComputedValue(data, callback, (computation) => {
+		setReactiveValue(data, comment, computation);
+	});
 }
-function setFragmentsValue(data, comment, fragments) {
+function setFragmentsNode(data, comment, fragments) {
 	const state = fragmentsStates.get(fragments);
 	handleFragments(state, false);
 	setReactiveValue(data, comment, state.mapped);

package/dist/node/value.mjs

@@ -7,7 +7,7 @@ import { isChildNode } from "@oscarpalmer/toretto/is";
 //#region src/node/value.ts
 function addToArray(identifiers, items, nodes, added) {
 	let position = nodes[0];
-	const before = added && !identifiers.previous.has(items.templates[0].identifier);
+	const before = added && !identifiers.previous.set.has(items.templates[0].identifier);
 	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
 		identifier: fragment.identifier,
 		value: node
@@ -15,19 +15,48 @@ function addToArray(identifiers, items, nodes, added) {
 	const { length } = next;
 	for (let index = 0; index < length; index += 1) {
 		const node = next[index];
-		if (!(added && identifiers.previous.has(node.identifier))) if (index === 0 && before) position.before(node.value);
+		if (!(added && identifiers.previous.set.has(node.identifier))) if (index === 0 && before) position.before(node.value);
 		else position.after(node.value);
 		position = node.value;
 	}
 }
+function getArrayData(item, values) {
+	const { length } = values;
+	const next = [];
+	let templates = [];
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+		if (isFragment(value) && value.identifier != null) {
+			next.push(value.identifier);
+			templates.push(value);
+		}
+	}
+	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
+	const nextSet = new Set(next);
+	if (nextSet.size !== templates.length) templates = [];
+	return {
+		next: {
+			array: next,
+			set: nextSet
+		},
+		previous: {
+			array: previous,
+			set: new Set(previous)
+		},
+		template: {
+			empty: templates.length === 0,
+			items: templates
+		}
+	};
+}
 function handleArray(identifiers, items, nodes) {
-	const next = items.templates.map((template) => items.fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
-	const comparison = compareArrays(items.fragments ?? [], items.templates);
+	const next = items.templates.map((template) => items.fragments.find((fragment) => fragment.identifier === template.identifier) ?? template);
+	const comparison = compareArrays(identifiers.previous.array, identifiers.next.array);
 	if (comparison !== "removed") addToArray(identifiers, {
 		...items,
 		next
 	}, nodes, comparison === ARRAY_COMPARISON_ADDED);
-	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
+	const toRemove = items.fragments.filter((fragment) => !identifiers.next.set.has(fragment.identifier));
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();
 	return {
@@ -35,52 +64,45 @@ function handleArray(identifiers, items, nodes) {
 		nodes: next.flatMap((fragment) => fragment.get())
 	};
 }
-function removeFragments(fragments) {
-	if (fragments != null) {
-		const { length } = fragments;
-		for (let index = 0; index < length; index += 1) fragments[index].remove();
-	}
+function removeArray(item, comment) {
+	const fragments = (item.fragments ?? []).slice();
+	const result = { nodes: setText(item, comment) };
+	removeFragmentsItems(fragments);
+	return result;
 }
-function replaceText(item, comment, isNullable) {
-	let to;
-	if (isNullable) to = [comment];
-	else to = item.text == null ? [] : [item.text];
-	replaceNodes(item.nodes ?? [], to);
+function removeFragmentsItems(fragments) {
+	const { length } = fragments;
+	for (let index = 0; index < length; index += 1) fragments[index].remove();
 }
 function setArray(item, comment, value) {
-	if (value.length === 0) return { nodes: setText(item, comment, value) };
-	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
-	const next = templates.map((fragment) => fragment.identifier);
-	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
-	const nextSet = new Set(next);
-	if (nextSet.size !== templates.length) templates = [];
-	const noTemplates = templates.length === 0;
-	if (noTemplates || item.nodes == null || previous.some((identifier) => identifier == null)) return {
-		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
-	};
+	if (value.length === 0) return removeArray(item, comment);
+	const { next, previous, template } = getArrayData(item, value);
+	if (template.empty || item.nodes == null || previous.array.some((identifier) => identifier == null)) {
+		const fragments = (item.fragments ?? []).slice();
+		const result = {
+			fragments: template.empty ? void 0 : template.items,
+			nodes: replaceNodes(item.nodes ?? [comment], template.empty ? value.flatMap((item) => createNodes(item)) : template.items.flatMap((template) => template.get()))
+		};
+		removeFragmentsItems(fragments);
+		return result;
+	}
 	return handleArray({
-		next: nextSet,
-		previous: new Set(previous)
+		next,
+		previous
 	}, {
-		templates,
-		fragments: item.fragments ?? []
+		fragments: item.fragments ?? [],
+		templates: template.items
 	}, item.nodes);
 }
 function setNodes(item, comment, next) {
-	if (item.nodes == null) replaceNodes([comment], next);
-	else replaceNodes(item.nodes, next);
-	removeFragments(item.fragments);
-	return next;
+	return replaceNodes(item.nodes ?? [comment], next);
 }
 function setReactiveValue(data, comment, reactive) {
 	let item = data.items.find((item) => item.nodes?.includes(comment));
 	item ??= {};
-	item.text = new Text();
 	data.mora.subscribers.add(reactive.subscribe((value) => {
 		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
 		else setReactiveValueForSingle(item, comment, value);
-		item.nodes ??= [comment];
 	}));
 }
 function setReactiveValueForArray(item, comment, value) {
@@ -89,25 +111,20 @@ function setReactiveValueForArray(item, comment, value) {
 	item.nodes = nodes;
 }
 function setReactiveValueForSingle(item, comment, value) {
+	const fragments = (item.fragments ?? []).slice();
 	const valueIsFragment = isFragment(value);
-	item.fragments = valueIsFragment ? [value] : void 0;
 	if (valueIsFragment || isChildNode(value)) item.nodes = setNodes(item, comment, createNodes(value));
 	else item.nodes = setText(item, comment, value);
+	item.fragments = valueIsFragment ? [value] : void 0;
+	removeFragmentsItems(fragments);
 }
 function setText(item, comment, value) {
-	const isNullable = isNullableOrWhitespace(value);
-	if (item.text != null) item.text.textContent = isNullable ? "" : getString(value);
-	let result = false;
-	if (item.nodes != null) {
-		replaceText(item, comment, isNullable);
-		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) item.text?.replaceWith(comment);
-	else if (!isNullable && item?.text?.parentNode == null) {
-		if (item.text != null) comment.replaceWith(item.text);
-		result = true;
-	}
-	removeFragments(item.fragments);
-	if (result) return item.text == null ? [] : [item.text];
+	const valueIsNullable = isNullableOrWhitespace(value);
+	item.text ??= new Text();
+	item.text.textContent = valueIsNullable ? "" : getString(value);
+	const result = valueIsNullable ? [comment] : [item.text];
+	replaceNodes(item.nodes ?? [comment], result);
+	return result;
 }
 //#endregion
 export { setReactiveValue };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -44,7 +44,7 @@
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.185",
 		"@oscarpalmer/mora": "^0.29",
-		"@oscarpalmer/toretto": "^0.43"
+		"@oscarpalmer/toretto": "^0.45"
 	},
 	"devDependencies": {
 		"@oscarpalmer/oui": "^0.20",

package/src/attribute/index.ts

@@ -1,30 +1,53 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isSignal} from '@oscarpalmer/mora';
+import {isSignal} from '@oscarpalmer/mora';
+import {isInputElement} from '@oscarpalmer/toretto/is';
 import {
 	EVENT_ON_VALUE,
 	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
 	EXPRESSION_ABYDON_CONTENT,
 	EXPRESSION_EVENT_PREFIX,
-	INPUT_TYPE_CHECKBOX,
-	INPUT_TYPE_RADIO,
-	PROPERTY_CHECKED,
 	PROPERTY_VALUE,
 } from '../constants';
-import {isInputElement} from '../helpers/dom';
+import {setComputedValue} from '../helpers';
 import type {FragmentData} from '../models';
 import {mapEvent} from '../node/event';
 import {setAttribute} from './value';
 
+function compareAttributes(first: Attr, second: Attr): number {
+	return first.name.localeCompare(second.name);
+}
+
 function getValue(data: FragmentData, original: string): unknown {
 	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
 
 	return matches == null ? original : data.values[+matches[1]];
 }
 
-export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void {
-	const attributes = [...element.attributes].sort((first, second) =>
-		first.name.localeCompare(second.name),
-	);
+export function mapAttributeValue(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	if (typeof value === 'function') {
+		setComputedAttribute(data, element, name, value as GenericCallback);
+	} else {
+		setAttribute(data, element, name, value);
+	}
+
+	if (isInputElement(element) && isSignal(value) && name in element) {
+		mapEvent(element, EVENT_ON_VALUE, () => {
+			value.set(element[name as keyof typeof element]);
+		});
+	}
+}
+
+export function mapAttributes(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	ignoreValue: boolean,
+): void {
+	const attributes = [...element.attributes].sort(compareAttributes);
 
 	const {length} = attributes;
 
@@ -32,52 +55,35 @@ export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElem
 		const {name, value} = attributes[index];
 
 		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, '');
-		const actualValue = getValue(data, value) as never;
+		const actualValue = getValue(data, value);
 
 		if (actualName !== name) {
 			element.removeAttribute(name);
 		}
 
+		if (actualName === PROPERTY_VALUE && ignoreValue) {
+			continue;
+		}
+
 		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: FragmentData,
-	element: HTMLElement | SVGElement,
-	name: string,
-	value: unknown,
-): void {
-	if (typeof value === 'function') {
-		setComputedAttribute(data, element, name, value as GenericCallback);
-	} else {
-		setAttribute(data, element, name, value);
-	}
-
-	if (isInputElement(element) && isSignal(value) && name in element) {
-		mapEvent(element, EVENT_ON_VALUE, () => {
-			value.set(element[name as keyof typeof element]);
-		});
-	}
-}
-
 function setComputedAttribute(
 	data: FragmentData,
 	element: HTMLElement | SVGElement,
 	name: string,
 	callback: GenericCallback,
 ): void {
-	const value = computed(callback);
-
-	data.mora.values.add(value);
-
-	setAttribute(data, element, name, value);
+	setComputedValue(data, callback, computation => {
+		setAttribute(data, element, name, computation);
+	});
 }

package/src/attribute/value.ts

@@ -1,6 +1,5 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {getString} from '@oscarpalmer/atoms/string';
-import {camelCase} from '@oscarpalmer/atoms/string/case';
 import {isReactive} from '@oscarpalmer/mora';
 import {setAttribute as setTorettoAttribute} from '@oscarpalmer/toretto/attribute';
 import {setStyle} from '@oscarpalmer/toretto/style';
@@ -10,23 +9,21 @@ import {
 	EXPRESSION_ATTRIBUTE_CLASS,
 	EXPRESSION_ATTRIBUTE_STYLE_FULL,
 	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
-	EXPRESSION_ATTRIBUTE_STYLE_PROPERTY,
-	PROPERTY_CHECKED,
-	PROPERTY_VALUE,
+	EXPRESSION_ATTRIBUTE_STYLE_VARIABLE,
 	VALUE_TRUE,
 } from '../constants';
 import type {FragmentData} from '../models';
 
-function getStyleValue(value: unknown, unit: string, isProperty: boolean): string | undefined {
-	if (removeStyleValue(value, unit, isProperty)) {
+function getStyleValue(value: unknown, unit: string, isVariable: boolean): string | undefined {
+	if (removeStyleValue(value, unit, isVariable)) {
 		return;
 	}
 
 	return value === true || value === VALUE_TRUE ? unit : `${getString(value)}${unit ?? ''}`;
 }
 
-function removeStyleValue(value: unknown, unit: unknown, isProperty: boolean): boolean {
-	if (value == null || value === false || (isProperty && isNullableOrWhitespace(value))) {
+function removeStyleValue(value: unknown, unit: unknown, isVariable: boolean): boolean {
+	if (value == null || value === false || (isVariable && isNullableOrWhitespace(value))) {
 		return true;
 	}
 
@@ -60,21 +57,15 @@ function setClassValues(
 	name: string,
 	value: unknown,
 ): void {
-	function update(value: unknown): void {
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
+
+	updateValue(data, value, value => {
 		if (value === true || value === VALUE_TRUE) {
 			element.classList.add(...classes);
 		} else {
 			element.classList.remove(...classes);
 		}
-	}
-
-	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
-
-	if (isReactive(value)) {
-		data.mora.subscribers.add(value.subscribe(update));
-	} else {
-		update(value);
-	}
+	});
 }
 
 function setStyleValues(
@@ -85,27 +76,15 @@ function setStyleValues(
 ): void {
 	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name)!;
 
-	const isProperty = EXPRESSION_ATTRIBUTE_STYLE_PROPERTY.test(name);
-
-	property = camelCase(property);
+	const isVariable = EXPRESSION_ATTRIBUTE_STYLE_VARIABLE.test(name);
 
-	if (isProperty) {
-		property = `--${property}`;
-	}
-
-	function update(value: unknown): void {
+	updateValue(data, value, value => {
 		setStyle(
 			element,
 			property as keyof CSSStyleDeclaration,
-			getStyleValue(value, unit, isProperty),
+			getStyleValue(value, unit, isVariable),
 		);
-	}
-
-	if (isReactive(value)) {
-		data.mora.subscribers.add(value.subscribe(update));
-	} else {
-		update(value);
-	}
+	});
 }
 
 function setValue(
@@ -114,27 +93,15 @@ function setValue(
 	name: string,
 	value: unknown,
 ): void {
-	const isReactiveValue = isReactive(value);
-
-	unsetValue(element, name, isReactiveValue ? value.peek() : value);
-
-	if (isReactiveValue) {
-		data.mora.subscribers.add(
-			value.subscribe(next => {
-				setTorettoAttribute(element, name, next);
-			}),
-		);
-	} else {
+	updateValue(data, value, value => {
 		setTorettoAttribute(element, name, value);
-	}
+	});
 }
 
-function unsetValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	if (name === PROPERTY_CHECKED) {
-		(element as HTMLInputElement).checked = !(value === true || value === VALUE_TRUE);
-	}
-
-	if (name === PROPERTY_VALUE) {
-		(element as HTMLInputElement).value = (element as HTMLInputElement).value === '' ? '_' : '';
+function updateValue(data: FragmentData, value: unknown, updater: (value: unknown) => void): void {
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(updater));
+	} else {
+		updater(value);
 	}
 }

package/src/constants.ts

@@ -4,7 +4,7 @@ export const ARRAY_COMPARISON_DISSIMILAR = 'dissimilar';
 
 export const ARRAY_COMPARISON_REMOVED = 'removed';
 
-export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 'class.'.length;
 
 export const ATTRIBUTE_NAME_DELIMITER = '.';
 
@@ -12,7 +12,7 @@ export const CHANGE_INPUTS = new Set(['checkbox', 'radio']);
 
 export const ERROR_FRAGMENT = 'Fragment function must return a Fragment instance';
 
-export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<>'";
 
 export const ERROR_IDENTIFIER_TYPE = 'Identifier cannot be null or undefined';
 
@@ -47,34 +47,26 @@ export const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$
 
 export const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
 
-export const EXPRESSION_ATTRIBUTE_STYLE_PROPERTY = /^style\.--/;
+export const EXPRESSION_ATTRIBUTE_STYLE_VARIABLE = /^style\.--/;
 
 export const EXPRESSION_EVENT_ATTRIBUTE = /^@([\w-]+)(?::([a-z:]+))?="$/i;
 
 export const EXPRESSION_EVENT_NAME = /^@?([\w-]+)(?::([a-z:]+))?$/i;
 
-export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(?:ctive)$/i;
 
-export const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+export const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(?:apture)$/i;
 
-export const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+export const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(?:nce)$/i;
 
 export const EXPRESSION_EVENT_PREFIX = /^@/;
 
-export const EXPRESSION_PERIOD = /\./;
-
 export const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
 
-export const INPUT_TYPE_CHECKBOX = 'checkbox';
-
-export const INPUT_TYPE_RADIO = 'radio';
-
 export const NAME_FRAGMENT = '$fragment';
 
 export const NAME_FRAGMENTS = '$fragments';
 
-export const PROPERTY_CHECKED = 'checked';
-
 export const PROPERTY_IDENTIFIER = 'identifier';
 
 export const PROPERTY_VALUE = 'value';

package/src/fragment.ts

@@ -19,12 +19,14 @@ export class Fragment {
 	/**
 	 * Is template caching enabled?
 	 */
-	get caching(): boolean {
+	get cache(): boolean {
 		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(): unknown {
 		return this.#configuration.identifier;
@@ -48,7 +50,15 @@ export class Fragment {
 	}
 
 	/**
-	 * Append the fragment to the given element
+	 * Insert the _Fragment_ after the given element
+	 * @param element Element to insert after
+	 */
+	after(element: Element): void {
+		element.after(...this.get());
+	}
+
+	/**
+	 * Append the _Fragment_ to the given element
 	 * @param element Element to append to
 	 */
 	appendTo(element: Element): void {
@@ -56,9 +66,19 @@ export class Fragment {
 	}
 
 	/**
-	 * Configure the fragment
+	 * Insert the _Fragment_ before the given element
+	 * @param element Element to insert before
+	 */
+	before(element: Element): void {
+		element.before(...this.get());
+	}
+
+	/**
+	 * Configure the _Fragment_
+	 *
+	 * _Returns the Fragment instance for chaining_
 	 * @param configuration Configuration options
-	 * @returns Fragment
+	 * @returns _Fragment_
 	 */
 	configure(configuration: FragmentConfiguration): Fragment {
 		const actual = isPlainObject(configuration) ? configuration : {};
@@ -75,7 +95,7 @@ export class Fragment {
 	}
 
 	/**
-	 * Get a list of the fragment's nodes
+	 * Get a list of the _Fragment_'s nodes
 	 * @returns List of nodes
 	 */
 	get(): ChildNode[] {
@@ -108,21 +128,18 @@ export class Fragment {
 	}
 
 	/**
-	 * 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 {
-		this.#configuration.identifier = identifier;
-
-		return this;
+	prependTo(element: Element): void {
+		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(): void {
 		removeFragment(this.#data);