@oscarpalmer/abydon 0.21.0 → 0.23.0

package/dist/index.mjs

@@ -1,24 +1,55 @@
+import { isFragment, isFragments } from "./helpers/index.mjs";
 import { Fragments } from "./fragments.mjs";
 import { Fragment } from "./fragment.mjs";
-import "@oscarpalmer/mora";
+import { isArray } from "@oscarpalmer/mora";
 export * from "@oscarpalmer/mora";
 //#region src/index.ts
 /**
-* Create Fragments from a reactive array
+* Create a _Fragments_ instance from a reactive array
+* 
+* _A Fragments instance can be used to efficiently render a list of items that may change over time, using unique identifiers to track each item, only adding, removing, or updating each related Fragment._
+*
+* @example
+* ```ts
+* const fruits = array(['Apple', 'Banana', 'Cherry']);
+* const items = fragments(
+*   fruits,
+*   fruit => fruit,                           // Identifies a unique item
+*   fruit => html`<p>${fruit}</p>`,           // Creates a Fragment from an item
+* );
+* html`${items}`.appendTo(document.body)      // Renders '<p>Apple</p><p>Banana</p><p>Cherry</p>'
+* fruits.push(['Date', 'Elderberry', 'Fig']); // Appends '<p>Date</p><p>Elderberry</p><p>Fig</p>'
+*                                             // without re-rendering the existing Fragments
+* ```
+*
 * @param array Reactive array
-* @param identify Function to identify item
-* @param fragment Function to create fragment from item
-* @returns Fragments
+* @param identify Function to identify item uniquely _(non-nullable)_
+* @param fragment Function to create _Fragment_ from item
+* @returns _Fragments_
 */
 function fragments(array, identify, fragment) {
+	if (!isArray(array)) throw new TypeError("Fragments array must be a reactive array");
+	if (typeof identify !== "function") throw new TypeError("Fragments identify must be a function");
+	if (typeof fragment !== "function") throw new TypeError("Fragments fragment must be a function");
 	return new Fragments(array, identify, fragment);
 }
 /**
-* Create Fragment from a template
-* @returns Fragment
+* Create a _Fragment_ from a template
+* 
+* _A Fragment can be used to efficiently render a template that may change over time, only updating the necessary parts of the DOM._
+*
+* @example
+* ```ts
+* const name = signal('World');
+* const fragment = html`<p>Hello, ${name}!</p>`;
+* fragment.appendTo(document.body);              // Renders '<p>Hello, World!</p>'
+* name.set('Alice');                             // Replaces 'World' with 'Alice'
+* ```
+*
+* @returns _Fragment_
 */
 function html(template, ...values) {
 	return new Fragment(template, values);
 }
 //#endregion
-export { fragments, html };
+export { fragments, html, isFragment, isFragments };

package/dist/models.d.mts

@@ -2,16 +2,18 @@ import { Fragment } from "./fragment.mjs";
 import { Reactive, ReactiveArray, Unsubscribe } from "@oscarpalmer/mora";
 
 //#region src/models.d.ts
+/**
+ * Configuration for a _Fragment_
+ */
 type FragmentConfiguration = {
   /**
    * Should the template be cached? _(defaults to `true`)_
    */
   cache?: boolean;
   /**
-   * Identifier for the fragment
+   * Identifier for the _Fragment_
    *
-   * _(An identifier can be used to uniquely identify a fragment,
-   * which helps prevent re-rendering in certain scenarios)_
+   * _An identifier can be used to uniquely identify a Fragment, which helps prevent re-rendering in reactive arrays and Fragments_
    */
   identifier?: unknown;
 };
@@ -19,7 +21,7 @@ type FragmentData = {
   expressions: unknown[];
   items: FragmentItem[];
   mora: MoraData;
-  strings: TemplateStringsArray;
+  strings: TemplateStringsArray | string[];
   template?: string;
   values: unknown[];
 };

package/dist/node/event.mjs

@@ -1,4 +1,4 @@
-import { EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_SUBMIT, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
+import { CHANGE_INPUTS, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_SUBMIT, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/node/event.ts
 function getOptions(options) {
@@ -12,14 +12,19 @@ function getOptions(options) {
 function getType(element, type) {
 	if (type !== "on") return type;
 	if (element instanceof HTMLInputElement) {
-		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return EVENT_CHANGE;
+		if (CHANGE_INPUTS.has(element.type)) return EVENT_CHANGE;
 		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }
 function mapEvent(element, name, value) {
-	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
-	if (type != null && typeof value === "function") on(element, getType(element, type), value, getOptions(options ?? ""));
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name);
+	const values = Array.isArray(value) ? value : [value];
+	const { length } = values;
+	for (let index = 0; index < length; index += 1) {
+		const item = values[index];
+		if (typeof item === "function") on(element, getType(element, type), item, getOptions(options ?? ""));
+	}
 }
 //#endregion
 export { mapEvent };

package/dist/node/index.mjs

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

package/dist/node/value.mjs

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

package/dist/parse.mjs

@@ -1,15 +1,17 @@
-import { EXPRESSION_ABYDON_ATTRIBUTE_FULL } from "./constants.mjs";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_EVENT_ATTRIBUTE, WHITESPACE } from "./constants.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
 //#region src/parse.ts
 function handleExpression(data, prefix, expression) {
 	if (Array.isArray(expression)) {
+		if (EXPRESSION_EVENT_ATTRIBUTE.test(prefix.split(WHITESPACE).at(-1))) return transformExpression(prefix, data.values.push(expression) - 1);
 		const { length } = expression;
 		let expressions = "";
 		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 transformExpression(prefix, data.values.push(expression) - 1);
-	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
+	const asString = getString(expression);
+	return asString.trim().length === 0 ? prefix : `${prefix}${asString}`;
 }
 function parse(data) {
 	if (data.template != null) return data.template;
@@ -22,7 +24,7 @@ function parse(data) {
 	return data.template;
 }
 function transformAttribute(_, name, index) {
-	return `_${name}="@abydon.${index}@"`;
+	return `abydon-${name}="abydon.${index}"`;
 }
 function transformExpression(prefix, index) {
 	return `${prefix}<!--abydon.${index}-->`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.21.0",
+	"version": "0.23.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -42,15 +42,16 @@
 		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.183",
-		"@oscarpalmer/mora": "^0.28",
-		"@oscarpalmer/toretto": "^0.42"
+		"@oscarpalmer/atoms": "^0.185",
+		"@oscarpalmer/mora": "^0.29",
+		"@oscarpalmer/toretto": "^0.45"
 	},
 	"devDependencies": {
 		"@oscarpalmer/oui": "^0.20",
+		"@oxlint/plugins": "^1.62",
 		"@types/node": "^25.6",
 		"@vitest/coverage-istanbul": "^4.1",
-		"jsdom": "^29",
+		"jsdom": "^29.1",
 		"tsdown": "^0.21",
 		"typescript": "^5.9",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",

package/src/attribute/index.ts

@@ -0,0 +1,89 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {isSignal} from '@oscarpalmer/mora';
+import {isInputElement} from '@oscarpalmer/toretto/is';
+import {
+	EVENT_ON_VALUE,
+	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
+	EXPRESSION_ABYDON_CONTENT,
+	EXPRESSION_EVENT_PREFIX,
+	PROPERTY_VALUE,
+} from '../constants';
+import {setComputedValue} from '../helpers';
+import type {FragmentData} from '../models';
+import {mapEvent} from '../node/event';
+import {setAttribute} from './value';
+
+function compareAttributes(first: Attr, second: Attr): number {
+	return first.name.localeCompare(second.name);
+}
+
+function getValue(data: FragmentData, original: string): unknown {
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
+
+	return matches == null ? original : data.values[+matches[1]];
+}
+
+export function mapAttributeValue(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	if (typeof value === 'function') {
+		setComputedAttribute(data, element, name, value as GenericCallback);
+	} else {
+		setAttribute(data, element, name, value);
+	}
+
+	if (isInputElement(element) && isSignal(value) && name in element) {
+		mapEvent(element, EVENT_ON_VALUE, () => {
+			value.set(element[name as keyof typeof element]);
+		});
+	}
+}
+
+export function mapAttributes(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	ignoreValue: boolean,
+): void {
+	const attributes = [...element.attributes].sort(compareAttributes);
+
+	const {length} = attributes;
+
+	for (let index = 0; index < length; index += 1) {
+		const {name, value} = attributes[index];
+
+		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, '');
+		const actualValue = getValue(data, value);
+
+		if (actualName !== name) {
+			element.removeAttribute(name);
+		}
+
+		if (actualName === PROPERTY_VALUE && ignoreValue) {
+			continue;
+		}
+
+		switch (true) {
+			case EXPRESSION_EVENT_PREFIX.test(actualName):
+				mapEvent(element, actualName, actualValue);
+				break;
+
+			default:
+				mapAttributeValue(data, element, actualName, actualValue);
+				break;
+		}
+	}
+}
+
+function setComputedAttribute(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	callback: GenericCallback,
+): void {
+	setComputedValue(data, callback, computation => {
+		setAttribute(data, element, name, computation);
+	});
+}

package/src/attribute/value.ts

@@ -0,0 +1,107 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getString} from '@oscarpalmer/atoms/string';
+import {isReactive} from '@oscarpalmer/mora';
+import {setAttribute as setTorettoAttribute} from '@oscarpalmer/toretto/attribute';
+import {setStyle} from '@oscarpalmer/toretto/style';
+import {
+	ATTRIBUTE_CLASS_PREFIX_LENGTH,
+	ATTRIBUTE_NAME_DELIMITER,
+	EXPRESSION_ATTRIBUTE_CLASS,
+	EXPRESSION_ATTRIBUTE_STYLE_FULL,
+	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
+	EXPRESSION_ATTRIBUTE_STYLE_VARIABLE,
+	VALUE_TRUE,
+} from '../constants';
+import type {FragmentData} from '../models';
+
+function getStyleValue(value: unknown, unit: string, isVariable: boolean): string | undefined {
+	if (removeStyleValue(value, unit, isVariable)) {
+		return;
+	}
+
+	return value === true || value === VALUE_TRUE ? unit : `${getString(value)}${unit ?? ''}`;
+}
+
+function removeStyleValue(value: unknown, unit: unknown, isVariable: boolean): boolean {
+	if (value == null || value === false || (isVariable && isNullableOrWhitespace(value))) {
+		return true;
+	}
+
+	return unit == null && (value === true || value === VALUE_TRUE);
+}
+
+export function setAttribute(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	switch (true) {
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
+			setClassValues(data, element, name, value);
+			return;
+
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
+			setStyleValues(data, element, name, value);
+			return;
+
+		default:
+			setValue(data, element, name, value);
+			break;
+	}
+}
+
+function setClassValues(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
+
+	updateValue(data, value, value => {
+		if (value === true || value === VALUE_TRUE) {
+			element.classList.add(...classes);
+		} else {
+			element.classList.remove(...classes);
+		}
+	});
+}
+
+function setStyleValues(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name)!;
+
+	const isVariable = EXPRESSION_ATTRIBUTE_STYLE_VARIABLE.test(name);
+
+	updateValue(data, value, value => {
+		setStyle(
+			element,
+			property as keyof CSSStyleDeclaration,
+			getStyleValue(value, unit, isVariable),
+		);
+	});
+}
+
+function setValue(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	updateValue(data, value, value => {
+		setTorettoAttribute(element, name, value);
+	});
+}
+
+function updateValue(data: FragmentData, value: unknown, updater: (value: unknown) => void): void {
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(updater));
+	} else {
+		updater(value);
+	}
+}