@oscarpalmer/abydon 0.14.0 → 0.16.0

package/dist/constants.js

@@ -1,10 +1,25 @@
-const ABORT_CONTROLLERS = /* @__PURE__ */ new WeakMap();
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+const EVENT_DEFAULTS = {
+	A: "click",
+	BUTTON: "click",
+	DETAILS: "toggle",
+	FORM: "submit",
+	SELECT: "change",
+	TEXTAREA: "input"
+};
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
 const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
-const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
-const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
 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 };
+const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+const EXPRESSION_EVENT_PREFIX = /^@/;
+const EXPRESSION_PERIOD = /\./;
+const NAME_FRAGMENT = "$fragment";
+const NAME_FRAGMENTS = "$fragments";
+export { ATTRIBUTE_CLASS_PREFIX_LENGTH, EVENT_DEFAULTS, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS };

package/dist/fragment.js

@@ -1,13 +1,22 @@
-import { parse } from "./parse.js";
+import { NAME_FRAGMENT } from "./constants.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 { parse } from "./parse.js";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { html } from "@oscarpalmer/toretto/html";
 var Fragment = class {
 	#data;
+	#configuration = {
+		identifier: void 0,
+		cache: true
+	};
 	get identifier() {
-		return this.#data.identifier;
+		return this.#configuration.identifier;
 	}
 	constructor(strings, expressions) {
+		Object.defineProperty(this, NAME_FRAGMENT, { value: true });
 		this.#data = {
 			expressions,
 			strings,
@@ -18,22 +27,27 @@ var Fragment = class {
 			},
 			values: []
 		};
-		Object.defineProperty(this, "$fragment", { value: true });
 	}
 	appendTo(element) {
 		element.append(...this.get());
 	}
+	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() {
 		const data = this.#data;
 		if (data.items.length === 0) {
-			const templated = html(parse(data), { sanitizeBooleanAttributes: false });
+			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.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes));
+			mapNodes(data, 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)];
+		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() {
@@ -42,14 +56,19 @@ var Fragment = class {
 };
 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,75 @@
+import { NAME_FRAGMENTS } from "./constants.js";
+import { isFragment, isFragments } from "./helpers/index.js";
+import { getString } from "@oscarpalmer/atoms/string";
+import { array } from "@oscarpalmer/mora";
+var Fragments = class {
+	#state;
+	get items() {
+		return this.#state.mapped;
+	}
+	constructor(items, identify, fragment) {
+		Object.defineProperty(this, NAME_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,14 +1,12 @@
-import { removeEvents } from "../node/event.js";
 import { isFragment } from "./index.js";
 import { getString } from "@oscarpalmer/atoms/string";
-import { isChildNode, isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { isChildNode } from "@oscarpalmer/toretto/is";
 function createNodes(value) {
 	if (isFragment(value)) return value.get();
 	if (isChildNode(value)) return [value];
 	return [new Text(getString(value))];
 }
 function removeNodes(nodes) {
-	sanitizeNodes(nodes);
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
 }
@@ -17,12 +15,4 @@ function replaceNodes(from, to) {
 	const { length } = from;
 	for (let index = 1; index < length; index += 1) from[index].remove();
 }
-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()) sanitizeNodes([...node.childNodes]);
-	}
-}
 export { createNodes, removeNodes, replaceNodes };

package/dist/helpers/index.js

@@ -1,11 +1,21 @@
+import { NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.js";
 function compareArrays(first, second) {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
-	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return "dissimilar";
-	return firstIsLarger ? "removed" : "added";
+	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return COMPARISON_DISSIMILAR;
+	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
 }
 function isFragment(value) {
-	return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
+	return isNamed(value, NAME_FRAGMENT);
 }
-export { compareArrays, isFragment };
+function isFragments(value) {
+	return isNamed(value, NAME_FRAGMENTS);
+}
+function isNamed(value, name) {
+	return typeof value === "object" && value != null && name in value && value[name] === true;
+}
+var COMPARISON_ADDED = "added";
+var COMPARISON_DISSIMILAR = "dissimilar";
+var COMPARISON_REMOVED = "removed";
+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 html(strings, ...values) {
-	return new Fragment(strings, values);
+function fragments(array$1, identify, fragment) {
+	return new Fragments(array$1, identify, fragment);
 }
-export { html };
+function html(template, ...values) {
+	return new Fragment(template, values);
+}
+export { fragments, html };

package/dist/node/attribute/index.js

@@ -1,10 +1,9 @@
-import { EXPRESSION_COMMENT_FULL } from "../../constants.js";
+import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD } from "../../constants.js";
 import { mapEvent } from "../event.js";
-import { setAttribute as setAttribute$1 } from "./value.js";
+import { setAttribute } from "./value.js";
 import { computed, isReactive } from "@oscarpalmer/mora";
-import { isBooleanAttribute, setProperty } from "@oscarpalmer/toretto/attribute";
 function getValue(data, original) {
-	const matches = EXPRESSION_COMMENT_FULL.exec(original ?? "");
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? "");
 	return matches == null ? original : data.values[+matches[1]];
 }
 function mapAttributes(data, element) {
@@ -12,16 +11,17 @@ function mapAttributes(data, element) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
-		const actual = getValue(data, value);
+		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, "");
+		const actualValue = getValue(data, value);
+		if (actualName !== name) element.removeAttribute(name);
 		switch (true) {
-			case name.startsWith("@"):
-				mapEvent(element, name, actual);
+			case EXPRESSION_EVENT_PREFIX.test(actualName):
+				mapEvent(element, actualName, actualValue);
 				break;
-			case name.includes(".") || typeof actual === "function" || isReactive(actual):
-				mapValue(data, element, name, actual);
-				break;
-			case isBooleanAttribute(name):
-				setProperty(element, name, value);
+			case EXPRESSION_PERIOD.test(actualName):
+			case typeof actualValue === "function":
+			case isReactive(actualValue):
+				mapValue(data, element, actualName, actualValue);
 				break;
 			default: break;
 		}
@@ -29,11 +29,11 @@ function mapAttributes(data, element) {
 }
 function mapValue(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
-	else setAttribute$1(data, element, name, value);
+	else setAttribute(data, element, name, value);
 }
 function setComputedAttribute(data, element, name, callback) {
 	const value = computed(callback);
 	data.mora.values.add(value);
-	setAttribute$1(data, element, name, value);
+	setAttribute(data, element, name, value);
 }
 export { mapAttributes };

package/dist/node/attribute/value.js

@@ -1,9 +1,11 @@
 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";
+import { isBooleanAttribute, setAttribute as setAttribute$1, setProperty } from "@oscarpalmer/toretto/attribute";
+function getCallback(element, name) {
+	if (isBooleanAttribute(name) && name in element) return name === "checked" ? updateChecked : updateProperty;
+	return name === "value" ? updateValue : setAttribute$1;
+}
 function setAttribute(data, element, name, value) {
-	element.removeAttribute(name);
 	switch (true) {
 		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
 			setClasses(data, element, name, value);
@@ -30,27 +32,31 @@ function setStyle(data, element, name, value) {
 	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));
+		else element.style.setProperty(property, value$1 === true ? unit : String(value$1));
 	}
 	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
 	else update(value);
 }
 function setValue(data, element, name, value) {
-	let callback;
-	if (isBooleanAttribute(name) && name in element) callback = name === "selected" ? updateSelected : updateProperty;
-	else callback = setAttribute$1;
+	const callback = getCallback(element, name);
 	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
 		callback(element, name, next);
 	}));
 	else callback(element, name, value);
 }
+function updateChecked(element, name, value) {
+	updateElement("change", "checked", element, name, value, value === true);
+}
+function updateElement(event, property, element, name, value, next) {
+	if (!(property in element) || element[property] === next) return;
+	setAttribute$1(element, name, value);
+	element[property] = next;
+	element.dispatchEvent(new Event(event, { bubbles: true }));
+}
 function updateProperty(element, name, value) {
-	element[name] = value === true;
+	setProperty(element, name, value === true);
 }
-function updateSelected(element, name, value) {
-	const select = element.closest("select");
-	const options = [...select?.options ?? []];
-	if (select != null && options.includes(element)) select.dispatchEvent(new Event("change", { bubbles: true }));
-	updateProperty(element, name, value);
+function updateValue(element, name, value) {
+	updateElement(element instanceof HTMLSelectElement ? "change" : "input", "value", element, name, value, String(value));
 }
 export { setAttribute };

package/dist/node/event.js

@@ -1,30 +1,23 @@
-import { ABORT_CONTROLLERS, EXPRESSION_EVENT_NAME, REASON_EVENT_REMOVED } from "../constants.js";
-function getController(element) {
-	let controller = ABORT_CONTROLLERS.get(element);
-	if (controller == null) {
-		controller = new AbortController();
-		ABORT_CONTROLLERS.set(element, controller);
-	}
-	return controller;
-}
+import { EVENT_DEFAULTS, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.js";
+import { on } from "@oscarpalmer/toretto/event";
 function getOptions(options) {
 	const parts = options.split(":");
 	return {
-		capture: parts.includes("c") || parts.includes("capture"),
-		once: parts.includes("o") || parts.includes("once"),
-		passive: !(parts.includes("a") || parts.includes("active"))
+		capture: parts.some((part) => EXPRESSION_EVENT_OPTIONS_CAPTURE.test(part)),
+		once: parts.some((part) => EXPRESSION_EVENT_OPTIONS_ONCE.test(part)),
+		passive: !parts.some((part) => EXPRESSION_EVENT_OPTIONS_ACTIVE.test(part))
 	};
 }
+function getType(element, type) {
+	if (type !== "on") return type;
+	if (element instanceof HTMLInputElement) {
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return "change";
+		return element.type === "submit" ? "submit" : "input";
+	}
+	return EVENT_DEFAULTS[element.tagName] ?? type;
+}
 function mapEvent(element, name, value) {
-	element.removeAttribute(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) {
-	ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
-	ABORT_CONTROLLERS.delete(element);
+	if (type != null && typeof value === "function") on(element, getType(element, type), value, getOptions(options ?? ""));
 }
-export { mapEvent, removeEvents };
+export { mapEvent };

package/dist/node/index.js

@@ -1,12 +1,13 @@
-import { EXPRESSION_COMMENT_CONTENT } from "../constants.js";
-import { isFragment } from "../helpers/index.js";
+import { EXPRESSION_ABYDON_CONTENT } from "../constants.js";
+import { isFragment, isFragments } from "../helpers/index.js";
+import { handleFragments } from "../fragments.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";
 function mapNode(data, comment) {
-	const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? "");
+	const matches = EXPRESSION_ABYDON_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

@@ -5,7 +5,7 @@ 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 before = added && !identifiers.previous.has(items.templates[0].identifier);
 	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
 		identifier: fragment.identifier,
 		value: node
@@ -13,7 +13,7 @@ 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.includes(node.identifier))) if (index === 0 && before) position.before(node.value);
+		if (!(added && identifiers.previous.has(node.identifier))) if (index === 0 && before) position.before(node.value);
 		else position.after(node.value);
 		position = node.value;
 	}
@@ -25,7 +25,7 @@ function handleArray(identifiers, items, nodes) {
 		...items,
 		next
 	}, nodes, comparison === "added");
-	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.includes(fragment.identifier)) ?? [];
+	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();
 	return {
@@ -39,70 +39,75 @@ function removeFragments(fragments) {
 		for (let index = 0; index < length; index += 1) fragments[index].remove();
 	}
 }
-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);
+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 = state.fragments?.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 || state.nodes == null || previous.some((identifier) => identifier == null)) return {
+	if (noTemplates || item.nodes == null || previous.some((identifier) => identifier == null)) return {
 		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(state, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
+		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item$1) => createNodes(item$1)) : templates.flatMap((template) => template.get()))
 	};
 	return handleArray({
-		next,
-		previous
+		next: new Set(next),
+		previous: new Set(previous)
 	}, {
 		templates,
-		fragments: state.fragments ?? []
-	}, state.nodes);
+		fragments: item.fragments ?? []
+	}, item.nodes);
 }
-function setNodes(state, comment, next) {
-	if (state.nodes == null) {
+function setNodes(item, comment, next) {
+	if (item.nodes == null) {
 		if (comment.parentNode != null) replaceNodes([comment], next);
-		else if (state.text.parentNode != null) replaceNodes([state.text], next);
-	} else replaceNodes(state.nodes, next);
-	removeFragments(state.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 state = { text: new Text() };
+	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)) setReactiveValueForArray(state, comment, value);
-		else setReactiveValueForSingle(state, comment, value);
-		if (item != null) {
-			item.fragments = state.fragments;
-			item.nodes = [...state.nodes ?? [comment]];
-		}
+		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
+		else setReactiveValueForSingle(item, comment, value);
+		item.nodes = [...item.nodes ?? [comment]];
 	}));
 }
-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 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(state, comment, value) {
+function setReactiveValueForSingle(item, 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);
+	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(state, comment, value) {
+function setText(item, comment, value) {
 	const isNullable = isNullableOrWhitespace(value);
-	state.text.textContent = isNullable ? "" : getString(value);
+	if (item.text != null) item.text.textContent = isNullable ? "" : getString(value);
 	let result = false;
-	if (state.nodes != null) {
-		replaceNodes(state.nodes, [isNullable ? comment : state.text]);
+	if (item.nodes != null) {
+		replaceText(item, comment, isNullable);
 		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) state.text.replaceWith(comment);
-	else if (!isNullable && state.text.parentNode == null) {
-		comment.replaceWith(state.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(state.fragments);
-	return result ? [state.text] : void 0;
+	removeFragments(item.fragments);
+	if (result) return item.text == null ? [] : [item.text];
 }
 export { setReactiveValue };

package/dist/parse.js

@@ -1,3 +1,4 @@
+import { EXPRESSION_ABYDON_ATTRIBUTE_FULL } from "./constants.js";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 function handleExpression(data, prefix, expression) {
 	if (Array.isArray(expression)) {
@@ -6,13 +7,23 @@ 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) return `${prefix}<!--abydon.${data.values.push(expression) - 1}-->`;
+	if (typeof expression === "function" || typeof expression === "object" && expression != null) return transformExpression(prefix, 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.template = data.template.replaceAll(EXPRESSION_ABYDON_ATTRIBUTE_FULL, transformAttribute);
+	data.expressions = [];
+	data.strings = [];
+	return data.template;
+}
+function transformAttribute(_, name, index) {
+	return `_${name}="@abydon.${index}@"`;
+}
+function transformExpression(prefix, index) {
+	return `${prefix}<!--abydon.${index}-->`;
 }
 export { parse };