@oscarpalmer/abydon 0.13.0 → 0.15.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

@@ -1,15 +1,22 @@
 import { parse } from "./parse.js";
+import { isFragments } from "./helpers/index.js";
+import { handleFragments } from "./fragments.js";
 import { removeNodes } from "./helpers/dom.js";
 import { mapNodes } from "./node/index.js";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { html } from "@oscarpalmer/toretto/html";
 var Fragment = class {
-	$fragment = true;
-	data;
+	#data;
+	#configuration = {
+		identifier: void 0,
+		ignoreCache: false
+	};
 	get identifier() {
-		return this.data.identifier;
+		return this.#configuration.identifier;
 	}
 	constructor(strings, expressions) {
-		this.data = {
+		Object.defineProperty(this, "$fragment", { value: true });
+		this.#data = {
 			expressions,
 			strings,
 			items: [],
@@ -23,33 +30,47 @@ var Fragment = class {
 	appendTo(element) {
 		element.append(...this.get());
 	}
+	configure(configuration) {
+		const actual = isPlainObject(configuration) ? configuration : {};
+		if (actual.identifier !== void 0) this.#configuration.identifier = actual.identifier;
+		if (typeof actual.ignoreCache === "boolean") this.#configuration.ignoreCache = actual.ignoreCache;
+		return this;
+	}
 	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), {
+				ignoreCache: this.#configuration.ignoreCache,
+				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.#configuration.identifier = identifier;
 		return this;
 	}
 	remove() {
-		removeFragment(this.data);
+		removeFragment(this.#data);
 	}
 };
 function removeFragment(data) {
 	removeMora(data);
-	const { length } = data.items;
+	let { length } = data.items;
 	for (let index = 0; index < length; index += 1) {
 		const { fragments, nodes } = data.items[index];
-		const { length: length$1 } = fragments ?? [];
-		for (let index$1 = 0; index$1 < length$1; index$1 += 1) fragments?.[index$1]?.remove();
-		removeNodes(nodes);
+		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;
+	for (let index = 0; index < length; index += 1) {
+		const value = data.values[index];
+		if (isFragments(value)) handleFragments(value, true);
 	}
-	data.items.splice(0, length);
 }
 function removeMora(data) {
 	const unsubscribers = [...data.mora.subscribers];

package/dist/fragments.js

@@ -0,0 +1,74 @@
+import { isFragment, isFragments } from "./helpers/index.js";
+import { array } from "@oscarpalmer/mora";
+import { getString } from "@oscarpalmer/atoms/string";
+var Fragments = class {
+	#state;
+	get items() {
+		return this.#state.mapped;
+	}
+	constructor(items, identify, fragment) {
+		Object.defineProperty(this, "$fragments", { value: true });
+		this.#state = {
+			fragment,
+			identify,
+			array: items,
+			instances: {},
+			mapped: array([]),
+			subscriber: void 0
+		};
+		states.set(this, this.#state);
+		initializeFragments(this.#state);
+	}
+};
+function handleFragments(item, remove) {
+	const state = isFragments(item) ? states.get(item) : item;
+	if (state != null) (remove ? removeFragments : initializeFragments)(state);
+}
+function handleItems(state, items) {
+	const keys = /* @__PURE__ */ new Set();
+	const mapped = [];
+	const { length } = items;
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const identifier = state.identify(item);
+		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		const key = getString(identifier);
+		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		let instance = state.instances[key];
+		if (instance == null) {
+			instance = state.fragment(item);
+			if (!isFragment(instance)) throw new Error("Fragment function must return a Fragment instance");
+		}
+		instance.identify(key);
+		state.instances[key] = instance;
+		keys.add(key);
+		mapped.push(instance);
+	}
+	state.mapped.set(mapped);
+	updateFragments(state, keys);
+}
+function initializeFragments(state) {
+	state.subscriber ??= state.array.subscribe((items) => {
+		handleItems(state, items);
+	});
+}
+function removeFragments(state) {
+	state.subscriber?.();
+	updateFragments(state);
+	state.subscriber = void 0;
+}
+function updateFragments(state, active) {
+	const next = {};
+	const previous = { ...state.instances };
+	const keys = Object.keys(previous);
+	const { length } = keys;
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (active?.has(key)) next[key] = previous[key];
+		else previous[key].remove();
+	}
+	state.instances = next;
+	active?.clear();
+}
+var states = /* @__PURE__ */ new WeakMap();
+export { Fragments, handleFragments, initializeFragments };

package/dist/helpers/dom.js

@@ -1,5 +1,5 @@
-import { removeEvents } from "../node/event.js";
 import { isFragment } from "./index.js";
+import { removeEvents } from "../node/event.js";
 import { getString } from "@oscarpalmer/atoms/string";
 import { isChildNode, isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 function createNodes(value) {
@@ -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/helpers/index.js

@@ -8,4 +8,7 @@ function compareArrays(first, second) {
 function isFragment(value) {
 	return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
 }
-export { compareArrays, isFragment };
+function isFragments(value) {
+	return typeof value === "object" && value != null && "$fragments" in value && value.$fragments === true;
+}
+export { compareArrays, isFragment, isFragments };

package/dist/index.js

@@ -1,7 +1,11 @@
+import { Fragments } from "./fragments.js";
 import { Fragment } from "./fragment.js";
 import "@oscarpalmer/mora";
 export * from "@oscarpalmer/mora";
+function fragments(array$1, identify, fragment) {
+	return new Fragments(array$1, identify, fragment);
+}
 function html(strings, ...values) {
 	return new Fragment(strings, values);
 }
-export { html };
+export { fragments, html };

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,13 @@
-import { isFragment } from "../helpers/index.js";
+import { isFragment, isFragments } from "../helpers/index.js";
+import { handleFragments } from "../fragments.js";
+import { EXPRESSION_COMMENT_CONTENT } from "../constants.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);
 }
@@ -27,6 +28,10 @@ function mapValue(data, comment, value) {
 		case typeof value === "function":
 			setComputedValue(data, comment, value);
 			break;
+		case isFragments(value):
+			handleFragments(value, false);
+			setReactiveValue(data, comment, value.items);
+			break;
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
 			break;
@@ -36,7 +41,7 @@ function mapValue(data, comment, value) {
 	}
 }
 function replaceComment(data, comment, value) {
-	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
+	const item = data.items.find((item$1) => item$1.nodes?.includes(comment));
 	const nodes = createNodes(value);
 	if (item != null) {
 		item.fragments = isFragment(value) ? [value] : void 0;

package/dist/node/value.js

@@ -3,91 +3,111 @@ 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) };
-	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 = [];
+function replaceText(item, comment, isNullable) {
+	let to;
+	if (isNullable) to = [comment];
+	else to = item.text == null ? [] : [item.text];
+	replaceNodes(item.nodes ?? [], to);
+}
+function setArray(item, comment, value) {
+	if (value.length === 0) return { nodes: setText(item, comment, value) };
+	let templates = value.filter((item$1) => isFragment(item$1) && item$1.identifier != null);
+	const next = templates.map((fragment) => fragment.identifier);
+	const previous = item.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 || item.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(item, comment, noTemplates ? value.flatMap((item$1) => createNodes(item$1)) : templates.flatMap((template) => template.get()))
 	};
+	return handleArray({
+		next,
+		previous
+	}, {
+		templates,
+		fragments: item.fragments ?? []
+	}, item.nodes);
 }
-function setNodes(fragments, nodes, comment, text, next) {
-	if (nodes == null) {
+function setNodes(item, comment, next) {
+	if (item.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 (item.text?.parentNode != null) replaceNodes([item.text], next);
+	} else replaceNodes(item.nodes, next);
+	removeFragments(item.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;
+	let item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	item ??= {};
+	item.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 (item != null) {
-			item.fragments = fragments;
-			item.nodes = [...nodes ?? [comment]];
-		}
+		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
+		else setReactiveValueForSingle(item, comment, value);
+		item.nodes = [...item.nodes ?? [comment]];
 	}));
 }
-function setText(fragments, nodes, comment, text, value) {
+function setReactiveValueForArray(item, comment, value) {
+	const result = setArray(item, comment, value);
+	item.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+	if (typeof result === "boolean") if (result) item.nodes = item.text == null ? [] : [item.text];
+	else item.nodes = void 0;
+	else item.nodes = result?.nodes;
+}
+function setReactiveValueForSingle(item, comment, value) {
+	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);
+}
+function setText(item, comment, value) {
 	const isNullable = isNullableOrWhitespace(value);
-	text.textContent = isNullable ? "" : getString(value);
+	if (item.text != null) item.text.textContent = isNullable ? "" : getString(value);
 	let result = false;
-	if (nodes != null) {
-		replaceNodes(nodes, [isNullable ? comment : text]);
+	if (item.nodes != null) {
+		replaceText(item, comment, isNullable);
 		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) item.text?.replaceWith(comment);
+	else if (!isNullable && item?.text?.parentNode == null) {
+		if (item.text != null) comment.replaceWith(item.text);
 		result = true;
 	}
-	removeFragments(fragments);
-	return result ? [text] : void 0;
+	removeFragments(item.fragments);
+	if (result) return item.text == null ? [] : [item.text];
 }
 export { setReactiveValue };

package/dist/parse.js

@@ -6,16 +6,16 @@ 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) {
+	if (data.template != null) return data.template;
 	const { length } = data.strings;
-	let template = "";
-	for (let index = 0; index < length; index += 1) template += handleExpression(data, data.strings[index], data.expressions[index]);
-	return template;
+	data.template = "";
+	for (let index = 0; index < length; index += 1) data.template += handleExpression(data, data.strings[index], data.expressions[index]);
+	data.expressions = [];
+	data.strings = [];
+	return data.template;
 }
 export { parse };