@oscarpalmer/abydon 0.13.0 → 0.14.0

package/dist/constants.js

@@ -0,0 +1,10 @@
+const ABORT_CONTROLLERS = /* @__PURE__ */ new WeakMap();
+const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
+const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
+const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
+const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+const REASON_EVENT_REMOVED = "Event removed as element was removed from document by Abydon";
+export { ABORT_CONTROLLERS, ATTRIBUTE_CLASS_PREFIX_LENGTH, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_COMMENT_CONTENT, EXPRESSION_COMMENT_FULL, EXPRESSION_EVENT_NAME, REASON_EVENT_REMOVED };

package/dist/fragment.js

@@ -3,13 +3,12 @@ import { removeNodes } from "./helpers/dom.js";
 import { mapNodes } from "./node/index.js";
 import { html } from "@oscarpalmer/toretto/html";
 var Fragment = class {
-	$fragment = true;
-	data;
+	#data;
 	get identifier() {
-		return this.data.identifier;
+		return this.#data.identifier;
 	}
 	constructor(strings, expressions) {
-		this.data = {
+		this.#data = {
 			expressions,
 			strings,
 			items: [],
@@ -19,25 +18,26 @@ var Fragment = class {
 			},
 			values: []
 		};
+		Object.defineProperty(this, "$fragment", { value: true });
 	}
 	appendTo(element) {
 		element.append(...this.get());
 	}
 	get() {
-		if (this.data.items.length === 0) {
-			const parsed = parse(this.data);
-			const templated = html(parsed, { sanitizeBooleanAttributes: false });
-			this.data.items.splice(0, this.data.items.length, ...templated.map((node) => ({ nodes: [node] })));
-			mapNodes(this.data, this.data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes));
+		const data = this.#data;
+		if (data.items.length === 0) {
+			const templated = html(parse(data), { sanitizeBooleanAttributes: false });
+			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));
 		}
-		return [...this.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)];
 	}
 	identify(identifier) {
-		this.data.identifier = identifier;
+		this.#data.identifier = identifier;
 		return this;
 	}
 	remove() {
-		removeFragment(this.data);
+		removeFragment(this.#data);
 	}
 };
 function removeFragment(data) {

package/dist/helpers/dom.js

@@ -8,7 +8,7 @@ function createNodes(value) {
 	return [new Text(getString(value))];
 }
 function removeNodes(nodes) {
-	sanitiseNodes(nodes);
+	sanitizeNodes(nodes);
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
 }
@@ -17,12 +17,12 @@ function replaceNodes(from, to) {
 	const { length } = from;
 	for (let index = 1; index < length; index += 1) from[index].remove();
 }
-function sanitiseNodes(nodes) {
+function sanitizeNodes(nodes) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) {
 		const node = nodes[index];
 		if (isHTMLOrSVGElement(node)) removeEvents(node);
-		if (node.hasChildNodes()) sanitiseNodes([...node.childNodes]);
+		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes]);
 	}
 }
 export { createNodes, removeNodes, replaceNodes };

package/dist/node/attribute/index.js

@@ -1,9 +1,10 @@
+import { EXPRESSION_COMMENT_FULL } from "../../constants.js";
 import { mapEvent } from "../event.js";
-import { setAttribute } from "./value.js";
+import { setAttribute as setAttribute$1 } from "./value.js";
 import { computed, isReactive } from "@oscarpalmer/mora";
-var commentExpression = /^<!--abydon\.(\d+)-->$/;
+import { isBooleanAttribute, setProperty } from "@oscarpalmer/toretto/attribute";
 function getValue(data, original) {
-	const matches = commentExpression.exec(original ?? "");
+	const matches = EXPRESSION_COMMENT_FULL.exec(original ?? "");
 	return matches == null ? original : data.values[+matches[1]];
 }
 function mapAttributes(data, element) {
@@ -12,23 +13,27 @@ function mapAttributes(data, element) {
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
 		const actual = getValue(data, value);
-		if (name.startsWith("@")) mapEvent(element, name, actual);
-		else if (name.includes(".") || typeof value === "function" || isReactive(actual)) mapValue(data, element, name, actual);
+		switch (true) {
+			case name.startsWith("@"):
+				mapEvent(element, name, actual);
+				break;
+			case name.includes(".") || typeof actual === "function" || isReactive(actual):
+				mapValue(data, element, name, actual);
+				break;
+			case isBooleanAttribute(name):
+				setProperty(element, name, value);
+				break;
+			default: break;
+		}
 	}
 }
 function mapValue(data, element, name, value) {
-	switch (true) {
-		case typeof value === "function":
-			setComputedAttribute(data, element, name, value);
-			break;
-		default:
-			setAttribute(data, element, name, value);
-			break;
-	}
+	if (typeof value === "function") setComputedAttribute(data, element, name, value);
+	else setAttribute$1(data, element, name, value);
 }
 function setComputedAttribute(data, element, name, callback) {
 	const value = computed(callback);
 	data.mora.values.add(value);
-	setAttribute(data, element, name, value);
+	setAttribute$1(data, element, name, value);
 }
 export { mapAttributes };

package/dist/node/attribute/value.js

@@ -1,16 +1,14 @@
+import { ATTRIBUTE_CLASS_PREFIX_LENGTH, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX } from "../../constants.js";
 import { isReactive } from "@oscarpalmer/mora";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isBooleanAttribute, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto/attribute";
-var classExpression = /^class\./;
-var styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
-var stylePrefixExpression = /^style\./;
 function setAttribute(data, element, name, value) {
 	element.removeAttribute(name);
 	switch (true) {
-		case classExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
 			setClasses(data, element, name, value);
 			return;
-		case stylePrefixExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
 			setStyle(data, element, name, value);
 			return;
 		default:
@@ -28,31 +26,31 @@ function setClasses(data, element, name, value) {
 	else update(value);
 }
 function setStyle(data, element, name, value) {
+	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+	if (property == null) return;
 	function update(value$1) {
 		if (value$1 == null || value$1 === false || value$1 === true && unit == null) element.style.removeProperty(property);
 		else element.style.setProperty(property, value$1 === true ? unit : getString(value$1));
 	}
-	const [, property, unit] = styleFullExpression.exec(name) ?? [];
-	if (property != null) if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
 	else update(value);
 }
 function setValue(data, element, name, value) {
-	const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttribute$1;
+	let callback;
+	if (isBooleanAttribute(name) && name in element) callback = name === "selected" ? updateSelected : updateProperty;
+	else callback = setAttribute$1;
 	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
 		callback(element, name, next);
 	}));
 	else callback(element, name, value);
 }
-function triggerSelectChange(select) {
-	if (select != null) select.dispatchEvent(new Event("change", { bubbles: true }));
-}
 function updateProperty(element, name, value) {
 	element[name] = value === true;
 }
 function updateSelected(element, name, value) {
 	const select = element.closest("select");
 	const options = [...select?.options ?? []];
-	if (select != null && options.includes(element)) triggerSelectChange(select);
+	if (select != null && options.includes(element)) select.dispatchEvent(new Event("change", { bubbles: true }));
 	updateProperty(element, name, value);
 }
 export { setAttribute };

package/dist/node/event.js

@@ -1,11 +1,9 @@
-var controllers = /* @__PURE__ */ new WeakMap();
-var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
-var reason = "Event removed as element was removed from document by Abydon";
+import { ABORT_CONTROLLERS, EXPRESSION_EVENT_NAME, REASON_EVENT_REMOVED } from "../constants.js";
 function getController(element) {
-	let controller = controllers.get(element);
+	let controller = ABORT_CONTROLLERS.get(element);
 	if (controller == null) {
 		controller = new AbortController();
-		controllers.set(element, controller);
+		ABORT_CONTROLLERS.set(element, controller);
 	}
 	return controller;
 }
@@ -14,19 +12,19 @@ function getOptions(options) {
 	return {
 		capture: parts.includes("c") || parts.includes("capture"),
 		once: parts.includes("o") || parts.includes("once"),
-		passive: !parts.includes("a") && !parts.includes("active")
+		passive: !(parts.includes("a") || parts.includes("active"))
 	};
 }
 function mapEvent(element, name, value) {
 	element.removeAttribute(name);
-	const [, type, options] = eventNamePattern.exec(name) ?? [];
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
 	if (typeof value === "function" && type != null) element.addEventListener(type, value, {
 		...getOptions(options ?? ""),
 		signal: getController(element).signal
 	});
 }
 function removeEvents(element) {
-	controllers.get(element)?.abort(reason);
-	controllers.delete(element);
+	ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
+	ABORT_CONTROLLERS.delete(element);
 }
 export { mapEvent, removeEvents };

package/dist/node/index.js

@@ -1,12 +1,12 @@
+import { EXPRESSION_COMMENT_CONTENT } from "../constants.js";
 import { isFragment } from "../helpers/index.js";
 import { createNodes } from "../helpers/dom.js";
 import { mapAttributes } from "./attribute/index.js";
 import { setReactiveValue } from "./value.js";
 import { computed, isReactive } from "@oscarpalmer/mora";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-var commentExpression = /^abydon\.(\d+)$/;
 function mapNode(data, comment) {
-	const matches = commentExpression.exec(comment.textContent ?? "");
+	const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? "");
 	const value = matches == null ? null : data.values[+matches[1]];
 	if (value != null) mapValue(data, comment, value);
 }

package/dist/node/value.js

@@ -3,91 +3,106 @@ import { createNodes, replaceNodes } from "../helpers/dom.js";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isChildNode } from "@oscarpalmer/toretto/is";
+function addToArray(identifiers, items, nodes, added) {
+	let position = nodes[0];
+	const before = added && !identifiers.previous.includes(items.templates[0].identifier);
+	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
+		identifier: fragment.identifier,
+		value: node
+	})));
+	const { length } = next;
+	for (let index = 0; index < length; index += 1) {
+		const node = next[index];
+		if (!(added && identifiers.previous.includes(node.identifier))) if (index === 0 && before) position.before(node.value);
+		else position.after(node.value);
+		position = node.value;
+	}
+}
+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);
+	if (comparison !== "removed") addToArray(identifiers, {
+		...items,
+		next
+	}, nodes, comparison === "added");
+	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.includes(fragment.identifier)) ?? [];
+	const { length } = toRemove;
+	for (let index = 0; index < length; index += 1) toRemove[index].remove();
+	return {
+		fragments: next,
+		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 setArray(fragments, nodes, comment, text, value) {
-	if (value.length === 0) return { nodes: setText(fragments, nodes, comment, text, value) };
+function setArray(state, comment, value) {
+	if (value.length === 0) return { nodes: setText(state, comment, value) };
 	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
-	const identifiers = templates.map((fragment) => fragment.identifier);
-	const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
-	if (new Set(identifiers).size !== templates.length) templates = [];
+	const next = templates.map((fragment) => fragment.identifier);
+	const previous = state.fragments?.map((fragment) => fragment.identifier) ?? [];
+	if (new Set(next).size !== templates.length) templates = [];
 	const noTemplates = templates.length === 0;
-	if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) return {
+	if (noTemplates || state.nodes == null || previous.some((identifier) => identifier == null)) return {
 		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
-	};
-	const next = templates.map((template) => fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
-	const comparison = compareArrays(fragments ?? [], templates);
-	if (comparison !== "removed") {
-		let position = nodes[0];
-		const before = comparison === "added" && !oldIdentifiers.includes(templates[0].identifier);
-		const items = next.flatMap((fragment) => fragment.get().flatMap((node) => ({
-			identifier: fragment.identifier,
-			value: node
-		})));
-		const { length: length$1 } = items;
-		for (let index = 0; index < length$1; index += 1) {
-			const item = items[index];
-			if (comparison === "dissimilar" || !oldIdentifiers.includes(item.identifier)) if (index === 0 && before) position.before(item.value);
-			else position.after(item.value);
-			position = item.value;
-		}
-	}
-	const toRemove = fragments?.filter((fragment) => !identifiers.includes(fragment.identifier)) ?? [];
-	const { length } = toRemove;
-	for (let index = 0; index < length; index += 1) toRemove[index].remove();
-	return {
-		fragments: next,
-		nodes: next.flatMap((fragment) => fragment.get())
+		nodes: setNodes(state, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
 	};
+	return handleArray({
+		next,
+		previous
+	}, {
+		templates,
+		fragments: state.fragments ?? []
+	}, state.nodes);
 }
-function setNodes(fragments, nodes, comment, text, next) {
-	if (nodes == null) {
+function setNodes(state, comment, next) {
+	if (state.nodes == null) {
 		if (comment.parentNode != null) replaceNodes([comment], next);
-		else if (text.parentNode != null) replaceNodes([text], next);
-	} else replaceNodes(nodes, next);
-	removeFragments(fragments);
+		else if (state.text.parentNode != null) replaceNodes([state.text], next);
+	} else replaceNodes(state.nodes, next);
+	removeFragments(state.fragments);
 	return next;
 }
 function setReactiveValue(data, comment, reactive) {
 	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
-	const text = new Text();
-	let fragments;
-	let nodes;
+	const state = { text: new Text() };
 	data.mora.subscribers.add(reactive.subscribe((value) => {
-		if (Array.isArray(value)) {
-			const result = setArray(fragments, nodes, comment, text, value);
-			fragments = typeof result === "boolean" ? void 0 : result?.fragments;
-			nodes = typeof result === "boolean" ? result ? [text] : void 0 : result?.nodes;
-		} else {
-			const valueIsFragment = isFragment(value);
-			fragments = valueIsFragment ? [value] : void 0;
-			if (valueIsFragment || isChildNode(value)) nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
-			else nodes = setText(fragments, nodes, comment, text, value);
-		}
+		if (Array.isArray(value)) setReactiveValueForArray(state, comment, value);
+		else setReactiveValueForSingle(state, comment, value);
 		if (item != null) {
-			item.fragments = fragments;
-			item.nodes = [...nodes ?? [comment]];
+			item.fragments = state.fragments;
+			item.nodes = [...state.nodes ?? [comment]];
 		}
 	}));
 }
-function setText(fragments, nodes, comment, text, value) {
+function setReactiveValueForArray(state, comment, value) {
+	const result = setArray(state, comment, value);
+	state.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+	if (typeof result === "boolean") state.nodes = result ? [state.text] : void 0;
+	else state.nodes = result?.nodes;
+}
+function setReactiveValueForSingle(state, comment, value) {
+	const valueIsFragment = isFragment(value);
+	state.fragments = valueIsFragment ? [value] : void 0;
+	if (valueIsFragment || isChildNode(value)) state.nodes = setNodes(state, comment, createNodes(value));
+	else state.nodes = setText(state, comment, value);
+}
+function setText(state, comment, value) {
 	const isNullable = isNullableOrWhitespace(value);
-	text.textContent = isNullable ? "" : getString(value);
+	state.text.textContent = isNullable ? "" : getString(value);
 	let result = false;
-	if (nodes != null) {
-		replaceNodes(nodes, [isNullable ? comment : text]);
+	if (state.nodes != null) {
+		replaceNodes(state.nodes, [isNullable ? comment : state.text]);
 		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) text.replaceWith(comment);
-	else if (!isNullable && text.parentNode == null) {
-		comment.replaceWith(text);
+	} else if (isNullable && comment.parentNode == null) state.text.replaceWith(comment);
+	else if (!isNullable && state.text.parentNode == null) {
+		comment.replaceWith(state.text);
 		result = true;
 	}
-	removeFragments(fragments);
-	return result ? [text] : void 0;
+	removeFragments(state.fragments);
+	return result ? [state.text] : void 0;
 }
 export { setReactiveValue };

package/dist/parse.js

@@ -6,10 +6,7 @@ function handleExpression(data, prefix, expression) {
 		for (let index = 0; index < length; index += 1) expressions += handleExpression(data, "", expression[index]);
 		return `${prefix}${expressions}`;
 	}
-	if (typeof expression === "function" || typeof expression === "object" && expression != null) {
-		const index = data.values.push(expression) - 1;
-		return `${prefix}<!--abydon.${index}-->`;
-	}
+	if (typeof expression === "function" || typeof expression === "object" && expression != null) return `${prefix}<!--abydon.${data.values.push(expression) - 1}-->`;
 	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {

package/package.json

@@ -4,25 +4,24 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.108",
-		"@oscarpalmer/mora": "^0.21",
-		"@oscarpalmer/toretto": "^0.22"
+		"@oscarpalmer/atoms": "^0.114",
+		"@oscarpalmer/mora": "^0.23",
+		"@oscarpalmer/toretto": "^0.24"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.2",
-		"@oscarpalmer/oui": "^0.17",
+		"@biomejs/biome": "^2.3",
+		"@oscarpalmer/oui": "^0.18",
 		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24.3",
-		"@vitest/coverage-istanbul": "^3.2",
-		"dts-bundle-generator": "^9.5",
+		"@rollup/plugin-typescript": "^12.3",
+		"@types/node": "^24.9",
+		"@vitest/coverage-istanbul": "^4",
 		"glob": "^11",
-		"jsdom": "^26.1",
-		"rollup": "^4.50",
+		"jsdom": "^27.1",
+		"rollup": "^4.52",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
 		"vite": "npm:rolldown-vite@latest",
-		"vitest": "^3.2"
+		"vitest": "^4"
 	},
 	"exports": {
 		"./package.json": "./package.json",
@@ -50,15 +49,14 @@
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rollup:build && npm run types",
+		"build": "npm run clean && npx vite build && npm run rollup:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
 		"rollup:build": "npx rollup -c",
 		"rollup:watch": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
-		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
-	"types": "types/index.d.cts",
-	"version": "0.13.0"
+	"types": "types/index.d.ts",
+	"version": "0.14.0"
 }

package/src/constants.ts

@@ -0,0 +1,20 @@
+export const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController> =
+	new WeakMap();
+
+export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+
+export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
+
+export const EXPRESSION_ATTRIBUTE_STYLE_FULL =
+	/^style\.([\w-]+)(?:\.([\w-]+))?$/;
+
+export const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
+
+export const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
+
+export const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+
+export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
+export const REASON_EVENT_REMOVED =
+	'Event removed as element was removed from document by Abydon';

package/src/fragment.ts

@@ -1,20 +1,24 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 import {html} from '@oscarpalmer/toretto/html';
 import {removeNodes} from './helpers/dom';
-import type {FragmentData} from './models';
+import type {FragmentConfiguration, FragmentData} from './models';
 import {mapNodes} from './node';
 import {parse} from './parse';
+import { isPlainObject } from '@oscarpalmer/atoms';
 
 export class Fragment {
-	private readonly $fragment = true;
-	private readonly data: FragmentData;
+	readonly #data: FragmentData;
 
-	get identifier(): Key | undefined {
-		return this.data.identifier;
+	readonly #configuration: Required<FragmentConfiguration> = {
+		identifier: undefined,
+		ignoreCache: false,
+	}
+
+	get identifier(): unknown {
+		return this.#configuration.identifier;
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
-		this.data = {
+		this.#data = {
 			expressions,
 			strings,
 			items: [],
@@ -24,6 +28,10 @@ export class Fragment {
 			},
 			values: [],
 		};
+
+		Object.defineProperty(this, '$fragment', {
+			value: true,
+		});
 	}
 
 	/**
@@ -33,44 +41,64 @@ export class Fragment {
 		element.append(...this.get());
 	}
 
+	configure(configuration: FragmentConfiguration): Fragment {
+		const actual = isPlainObject(configuration) ? configuration : {};
+
+		if (actual.identifier !== undefined) {
+			this.#configuration.identifier = actual.identifier;
+		}
+
+		if (typeof actual.ignoreCache === 'boolean') {
+			this.#configuration.ignoreCache = actual.ignoreCache;
+		}
+
+		return this;
+	}
+
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
 	get(): ChildNode[] {
-		if (this.data.items.length === 0) {
-			const parsed = parse(this.data);
+		const data = this.#data;
+
+		if (data.items.length === 0) {
+			const parsed = parse(data);
 
 			const templated = html(parsed, {
 				sanitizeBooleanAttributes: false,
 			});
 
-			this.data.items.splice(
+			if (this.#configuration.ignoreCache) {
+				html.remove(parsed);
+			}
+
+			data.items.splice(
 				0,
-				this.data.items.length,
+				data.items.length,
 				...templated.map(node => ({
 					nodes: [node as ChildNode],
 				})),
 			);
 
 			mapNodes(
-				this.data,
-				this.data.items.flatMap(
+				data,
+				data.items.flatMap(
 					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
 				),
 			);
 		}
 
 		return [
-			...this.data.items.flatMap(
+			...data.items.flatMap(
 				item =>
-					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
 			),
 		];
 	}
 
-	identify(identifier: Key): Fragment {
-		this.data.identifier = identifier;
+	identify(identifier: unknown): Fragment {
+		this.#configuration.identifier = identifier;
 
 		return this;
 	}
@@ -79,7 +107,7 @@ export class Fragment {
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		removeFragment(this.data);
+		removeFragment(this.#data);
 	}
 }
 
@@ -90,16 +118,16 @@ function removeFragment(data: FragmentData): void {
 
 	for (let index = 0; index < length; index += 1) {
 		const {fragments, nodes} = data.items[index];
-		const {length} = fragments ?? [];
+		const length = fragments?.length ?? 0;
 
 		for (let index = 0; index < length; index += 1) {
 			fragments?.[index]?.remove();
 		}
 
-		removeNodes(nodes);
+		removeNodes(nodes ?? []);
 	}
 
-	data.items.splice(0, length);
+	data.items.length = 0;
 }
 
 function removeMora(data: FragmentData): void {