@oscarpalmer/abydon 0.15.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,21 +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,
-		ignoreCache: false
+		cache: true
 	};
 	get identifier() {
 		return this.#configuration.identifier;
 	}
 	constructor(strings, expressions) {
-		Object.defineProperty(this, "$fragment", { value: true });
+		Object.defineProperty(this, NAME_FRAGMENT, { value: true });
 		this.#data = {
 			expressions,
 			strings,
@@ -32,21 +33,18 @@ var Fragment = class {
 	}
 	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;
+		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), {
-				ignoreCache: this.#configuration.ignoreCache,
-				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 ?? []));
 		}
-		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.#configuration.identifier = identifier;

package/dist/fragments.js

@@ -1,13 +1,14 @@
+import { NAME_FRAGMENTS } from "./constants.js";
 import { isFragment, isFragments } from "./helpers/index.js";
-import { array } from "@oscarpalmer/mora";
 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, "$fragments", { value: true });
+		Object.defineProperty(this, NAME_FRAGMENTS, { value: true });
 		this.#state = {
 			fragment,
 			identify,

package/dist/helpers/dom.js

@@ -1,14 +1,12 @@
 import { isFragment } from "./index.js";
-import { removeEvents } from "../node/event.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,14 +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);
 }
 function isFragments(value) {
-	return typeof value === "object" && value != null && "$fragments" in value && value.$fragments === true;
+	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

@@ -5,7 +5,7 @@ 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);
+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,13 +1,13 @@
+import { EXPRESSION_ABYDON_CONTENT } from "../constants.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";
 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);
 }

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 {
@@ -57,8 +57,8 @@ function setArray(item, comment, value) {
 		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: item.fragments ?? []

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,7 +7,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) 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) {
@@ -14,8 +15,15 @@ function parse(data) {
 	const { length } = data.strings;
 	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 };

package/package.json

@@ -4,23 +4,21 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.114",
-		"@oscarpalmer/mora": "^0.23",
-		"@oscarpalmer/toretto": "^0.25"
+		"@oscarpalmer/atoms": "^0.118",
+		"@oscarpalmer/mora": "^0.25",
+		"@oscarpalmer/toretto": "^0.32"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3",
 		"@oscarpalmer/oui": "^0.18",
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.3",
-		"@types/node": "^24.9",
+		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
-		"glob": "^11",
-		"jsdom": "^27.1",
-		"rollup": "^4.52",
+		"jsdom": "^27.3",
+		"oxfmt": "^0.19",
+		"oxlint": "^1.34",
+		"rolldown": "1.0.0-beta.56",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
-		"vite": "npm:rolldown-vite@latest",
+		"vite": "8.0.0-beta.2",
 		"vitest": "^4"
 	},
 	"exports": {
@@ -49,14 +47,14 @@
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rollup:build && npx tsc",
+		"build": "npm run clean && npx vite build && npm run rolldown: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",
+		"rolldown:build": "npx rolldown -c",
+		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
 		"test": "npx vitest --coverage",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.15.0"
+	"version": "0.16.0"
 }

package/src/constants.ts

@@ -1,20 +1,40 @@
-export const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController> =
-	new WeakMap();
-
 export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
+export const EVENT_DEFAULTS: Record<string, string> = {
+	A: 'click',
+	BUTTON: 'click',
+	DETAILS: 'toggle',
+	FORM: 'submit',
+	SELECT: 'change',
+	TEXTAREA: 'input',
+};
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+
+export const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
+
 export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 
-export const EXPRESSION_ATTRIBUTE_STYLE_FULL =
-	/^style\.([\w-]+)(?:\.([\w-]+))?$/;
+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_CHANGE_TYPES = /^(checkbox|radio)$/;
 
 export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
 
-export const REASON_EVENT_REMOVED =
-	'Event removed as element was removed from document by Abydon';
+export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+
+export const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+
+export const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+
+export const EXPRESSION_EVENT_PREFIX = /^@/;
+
+export const EXPRESSION_PERIOD = /\./;
+
+export const NAME_FRAGMENT = '$fragment';
+
+export const NAME_FRAGMENTS = '$fragments';

package/src/fragment.ts

@@ -1,5 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {html} from '@oscarpalmer/toretto/html';
+import {NAME_FRAGMENT} from './constants';
 import {handleFragments} from './fragments';
 import {isFragments} from './helpers';
 import {removeNodes} from './helpers/dom';
@@ -12,7 +13,7 @@ export class Fragment {
 
 	readonly #configuration: Required<FragmentConfiguration> = {
 		identifier: undefined,
-		ignoreCache: false,
+		cache: true,
 	};
 
 	/**
@@ -23,7 +24,7 @@ export class Fragment {
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
-		Object.defineProperty(this, '$fragment', {
+		Object.defineProperty(this, NAME_FRAGMENT, {
 			value: true,
 		});
 
@@ -55,12 +56,12 @@ export class Fragment {
 	configure(configuration: FragmentConfiguration): Fragment {
 		const actual = isPlainObject(configuration) ? configuration : {};
 
-		if (actual.identifier !== undefined) {
+		if ('identifier' in actual) {
 			this.#configuration.identifier = actual.identifier;
 		}
 
-		if (typeof actual.ignoreCache === 'boolean') {
-			this.#configuration.ignoreCache = actual.ignoreCache;
+		if (typeof actual.cache === 'boolean') {
+			this.#configuration.cache = actual.cache;
 		}
 
 		return this;
@@ -77,8 +78,7 @@ export class Fragment {
 			const parsed = parse(data);
 
 			const templated = html(parsed, {
-				ignoreCache: this.#configuration.ignoreCache,
-				sanitizeBooleanAttributes: false,
+				cache: this.#configuration.cache,
 			});
 
 			data.items.splice(
@@ -92,22 +92,14 @@ export class Fragment {
 			mapNodes(
 				data,
 				data.items.flatMap(
-					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ??
-						item.nodes ??
-						[],
+					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 ?? [],
+		);
 	}
 
 	/**
@@ -141,11 +133,7 @@ function removeFragment(data: FragmentData): void {
 		const {fragments, nodes} = data.items[index];
 		const fragmentsLength = fragments?.length ?? 0;
 
-		for (
-			let fragmentIndex = 0;
-			fragmentIndex < fragmentsLength;
-			fragmentIndex += 1
-		) {
+		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) {
 			fragments?.[fragmentIndex]?.remove();
 		}
 

package/src/fragments.ts

@@ -1,5 +1,6 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {array, type ReactiveArray} from '@oscarpalmer/mora';
+import {NAME_FRAGMENTS} from './constants';
 import type {Fragment} from './fragment';
 import {isFragment, isFragments} from './helpers';
 import type {FragmentsState} from './models';
@@ -19,7 +20,7 @@ export class Fragments {
 		identify: (item: unknown) => unknown,
 		fragment: (item: unknown) => Fragment,
 	) {
-		Object.defineProperty(this, '$fragments', {
+		Object.defineProperty(this, NAME_FRAGMENTS, {
 			value: true,
 		});
 
@@ -38,10 +39,7 @@ export class Fragments {
 	}
 }
 
-export function handleFragments(
-	item: Fragments | FragmentsState,
-	remove: boolean,
-): void {
+export function handleFragments(item: Fragments | FragmentsState, remove: boolean): void {
 	const state = isFragments(item) ? states.get(item) : item;
 
 	if (state != null) {