@oscarpalmer/abydon 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.21.0",
+	"version": "0.22.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.43"
 	},
 	"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/{node/attribute → attribute}/index.ts

@@ -1,29 +1,31 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {parse} from '@oscarpalmer/atoms/string';
-import {computed, isReactive, isSignal} from '@oscarpalmer/mora';
+import {computed, isSignal} from '@oscarpalmer/mora';
 import {
-	EVENT_ON_PREFIXED,
+	EVENT_ON_VALUE,
 	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
 	EXPRESSION_ABYDON_CONTENT,
 	EXPRESSION_EVENT_PREFIX,
-	EXPRESSION_PERIOD,
 	INPUT_TYPE_CHECKBOX,
+	INPUT_TYPE_RADIO,
 	PROPERTY_CHECKED,
 	PROPERTY_VALUE,
-} from '../../constants';
-import {isInputElement} from '../../helpers/dom';
-import type {FragmentData} from '../../models';
-import {mapEvent} from '../event';
+} from '../constants';
+import {isInputElement} from '../helpers/dom';
+import type {FragmentData} from '../models';
+import {mapEvent} from '../node/event';
 import {setAttribute} from './value';
 
 function getValue(data: FragmentData, original: string): unknown {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? '');
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
 
 	return matches == null ? original : data.values[+matches[1]];
 }
 
 export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElement): void {
-	const attributes = [...element.attributes];
+	const attributes = [...element.attributes].sort((first, second) =>
+		first.name.localeCompare(second.name),
+	);
+
 	const {length} = attributes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -41,13 +43,8 @@ export function mapAttributes(data: FragmentData, element: HTMLElement | SVGElem
 				mapEvent(element, actualName, actualValue);
 				break;
 
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === 'function':
-			case isReactive(actualValue):
-				mapValue(data, element, actualName, actualValue);
-				break;
-
 			default:
+				mapValue(data, element, actualName, actualValue);
 				break;
 		}
 	}
@@ -65,23 +62,9 @@ function mapValue(
 		setAttribute(data, element, name, value);
 	}
 
-	if (!isInputElement(element) || !isSignal(value)) {
-		return;
-	}
-
-	let property: string | undefined;
-
-	if (name === PROPERTY_CHECKED && element.type === INPUT_TYPE_CHECKBOX) {
-		property = PROPERTY_CHECKED;
-	} else if (name === PROPERTY_VALUE) {
-		property = PROPERTY_VALUE;
-	}
-
-	if (property != null) {
-		mapEvent(element, EVENT_ON_PREFIXED, () => {
-			const next = element[property as keyof typeof element];
-
-			value.set(parse(String(next)) ?? next);
+	if (isInputElement(element) && isSignal(value) && name in element) {
+		mapEvent(element, EVENT_ON_VALUE, () => {
+			value.set(element[name as keyof typeof element]);
 		});
 	}
 }

package/src/attribute/value.ts

@@ -0,0 +1,140 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getString} from '@oscarpalmer/atoms/string';
+import {camelCase} from '@oscarpalmer/atoms/string/case';
+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_PROPERTY,
+	PROPERTY_CHECKED,
+	PROPERTY_VALUE,
+	VALUE_TRUE,
+} from '../constants';
+import type {FragmentData} from '../models';
+
+function getStyleValue(value: unknown, unit: string, isProperty: boolean): string | undefined {
+	if (removeStyleValue(value, unit, isProperty)) {
+		return;
+	}
+
+	return value === true || value === VALUE_TRUE ? unit : `${getString(value)}${unit ?? ''}`;
+}
+
+function removeStyleValue(value: unknown, unit: unknown, isProperty: boolean): boolean {
+	if (value == null || value === false || (isProperty && 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 {
+	function update(value: unknown): void {
+		if (value === true || value === VALUE_TRUE) {
+			element.classList.add(...classes);
+		} else {
+			element.classList.remove(...classes);
+		}
+	}
+
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
+
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
+	}
+}
+
+function setStyleValues(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name)!;
+
+	const isProperty = EXPRESSION_ATTRIBUTE_STYLE_PROPERTY.test(name);
+
+	property = camelCase(property);
+
+	if (isProperty) {
+		property = `--${property}`;
+	}
+
+	function update(value: unknown): void {
+		setStyle(
+			element,
+			property as keyof CSSStyleDeclaration,
+			getStyleValue(value, unit, isProperty),
+		);
+	}
+
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
+	}
+}
+
+function setValue(
+	data: FragmentData,
+	element: HTMLElement | SVGElement,
+	name: string,
+	value: unknown,
+): void {
+	const isReactiveValue = isReactive(value);
+
+	unsetValue(element, name, isReactiveValue ? value.peek() : value);
+
+	if (isReactiveValue) {
+		data.mora.subscribers.add(
+			value.subscribe(next => {
+				setTorettoAttribute(element, name, next);
+			}),
+		);
+	} else {
+		setTorettoAttribute(element, name, value);
+	}
+}
+
+function unsetValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
+	if (name === PROPERTY_CHECKED) {
+		(element as HTMLInputElement).checked = !(value === true || value === VALUE_TRUE);
+	}
+
+	if (name === PROPERTY_VALUE) {
+		(element as HTMLInputElement).value = (element as HTMLInputElement).value === '' ? '_' : '';
+	}
+}

package/src/constants.ts

@@ -8,6 +8,8 @@ export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
 export const ATTRIBUTE_NAME_DELIMITER = '.';
 
+export const CHANGE_INPUTS = new Set(['checkbox', 'radio']);
+
 export const ERROR_FRAGMENT = 'Fragment function must return a Fragment instance';
 
 export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
@@ -29,17 +31,15 @@ export const EVENT_DEFAULTS: Record<string, string> = {
 	TEXTAREA: EVENT_INPUT,
 };
 
-export const EVENT_ON_PREFIXED = '@on';
-
 export const EVENT_ON_VALUE = 'on';
 
 export const EVENT_OPTIONS_DELIMITER = ':';
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-.]+(?::[a-z:]+)?)="<!--abydon.(\d+)-->"/g;
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^abydon-/;
 
-export const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
+export const EXPRESSION_ABYDON_CONTENT = /^abydon\.(\d+)$/;
 
 export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 
@@ -47,9 +47,11 @@ export const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$
 
 export const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
 
-export const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
+export const EXPRESSION_ATTRIBUTE_STYLE_PROPERTY = /^style\.--/;
+
+export const EXPRESSION_EVENT_ATTRIBUTE = /^@([\w-]+)(?::([a-z:]+))?="$/i;
 
-export const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+export const EXPRESSION_EVENT_NAME = /^@?([\w-]+)(?::([a-z:]+))?$/i;
 
 export const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
 
@@ -61,10 +63,12 @@ export const EXPRESSION_EVENT_PREFIX = /^@/;
 
 export const EXPRESSION_PERIOD = /\./;
 
-export const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+export const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
 
 export const INPUT_TYPE_CHECKBOX = 'checkbox';
 
+export const INPUT_TYPE_RADIO = 'radio';
+
 export const NAME_FRAGMENT = '$fragment';
 
 export const NAME_FRAGMENTS = '$fragments';
@@ -76,3 +80,7 @@ export const PROPERTY_IDENTIFIER = 'identifier';
 export const PROPERTY_VALUE = 'value';
 
 export const TEMPLATE_ITEM = '<>';
+
+export const VALUE_TRUE = 'true';
+
+export const WHITESPACE = /\s+/g;

package/src/fragment.ts

@@ -16,6 +16,13 @@ export class Fragment {
 		cache: true,
 	};
 
+	/**
+	 * Is template caching enabled?
+	 */
+	get caching(): boolean {
+		return this.#configuration.cache;
+	}
+
 	/**
 	 * Fragment identifier
 	 */
@@ -91,14 +98,12 @@ export class Fragment {
 
 			mapNodes(
 				data,
-				data.items.flatMap(
-					item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
-				),
+				data.items.flatMap(item => item.nodes!),
 			);
 		}
 
 		return data.items.flatMap(
-			item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
+			item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes!,
 		);
 	}
 
@@ -137,7 +142,7 @@ function removeFragment(data: FragmentData): void {
 			fragments?.[fragmentIndex]?.remove();
 		}
 
-		removeNodes(nodes ?? []);
+		removeNodes(nodes!);
 	}
 
 	data.items.length = 0;

package/src/fragments.ts

@@ -14,13 +14,6 @@ import type {FragmentsState} from './models';
 export class Fragments {
 	readonly #state: FragmentsState;
 
-	/**
-	 * Fragment items
-	 */
-	get items(): ReactiveArray<Fragment> {
-		return this.#state.mapped;
-	}
-
 	constructor(
 		items: ReactiveArray<unknown>,
 		identify: (item: unknown) => unknown,
@@ -39,18 +32,16 @@ export class Fragments {
 			subscriber: undefined,
 		};
 
-		states.set(this, this.#state);
+		fragmentsStates.set(this, this.#state);
 
 		initializeFragments(this.#state);
 	}
 }
 
 export function handleFragments(item: Fragments | FragmentsState, remove: boolean): void {
-	const state = isFragments(item) ? states.get(item) : item;
+	const state = isFragments(item) ? fragmentsStates.get(item) : item;
 
-	if (state != null) {
-		(remove ? removeFragments : initializeFragments)(state);
-	}
+	(remove ? removeFragments : initializeFragments)(state!);
 }
 
 function handleItems(state: FragmentsState, items: unknown[]): void {
@@ -135,4 +126,4 @@ function updateFragments(state: FragmentsState, active?: Set<string>): void {
 
 //
 
-const states: WeakMap<Fragments, FragmentsState> = new WeakMap();
+export const fragmentsStates: WeakMap<Fragments, FragmentsState> = new WeakMap();

package/src/helpers/index.ts

@@ -27,10 +27,20 @@ export function compareArrays(
 	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 
+/**
+ * Is the value a Fragment?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragment, otherwise `false`
+ */
 export function isFragment(value: unknown): value is Fragment {
 	return isNamed(value, NAME_FRAGMENT);
 }
 
+/**
+ * Is the value a Fragments?
+ * @param value Value to check
+ * @returns `true` if the value is a Fragments, otherwise `false`
+ */
 export function isFragments(value: unknown): value is Fragments {
 	return isNamed(value, NAME_FRAGMENTS);
 }

package/src/index.ts

@@ -1,10 +1,10 @@
 import '@oscarpalmer/mora';
-import type {ReactiveArray} from '@oscarpalmer/mora';
+import {isArray, type ReactiveArray} from '@oscarpalmer/mora';
 import {Fragment} from './fragment';
 import {Fragments} from './fragments';
 
 /**
- * Create Fragments from a reactive array
+ * Create a Fragments from a reactive array
  * @param array Reactive array
  * @param identify Function to identify item
  * @param fragment Function to create fragment from item
@@ -15,11 +15,23 @@ export function fragments<Item>(
 	identify: (item: Item) => unknown,
 	fragment: (item: Item) => Fragment,
 ): Fragments {
+	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 as ReactiveArray<unknown>, identify as never, fragment as never);
 }
 
 /**
- * Create Fragment from a template
+ * Create a Fragment from a template
  * @returns Fragment
  */
 export function html(template: TemplateStringsArray, ...values: unknown[]): Fragment {
@@ -29,3 +41,4 @@ export function html(template: TemplateStringsArray, ...values: unknown[]): Frag
 export * from '@oscarpalmer/mora';
 export type {Fragment} from './fragment';
 export type {Fragments} from './fragments';
+export {isFragment, isFragments} from './helpers';

package/src/node/event.ts

@@ -1,12 +1,12 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {
+	CHANGE_INPUTS,
 	EVENT_CHANGE,
 	EVENT_DEFAULTS,
 	EVENT_INPUT,
 	EVENT_ON_VALUE,
 	EVENT_OPTIONS_DELIMITER,
 	EVENT_SUBMIT,
-	EXPRESSION_EVENT_CHANGE_TYPES,
 	EXPRESSION_EVENT_NAME,
 	EXPRESSION_EVENT_OPTIONS_ACTIVE,
 	EXPRESSION_EVENT_OPTIONS_CAPTURE,
@@ -29,7 +29,7 @@ function getType(element: HTMLElement | SVGElement, type: string): string {
 	}
 
 	if (element instanceof HTMLInputElement) {
-		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) {
+		if (CHANGE_INPUTS.has(element.type)) {
 			return EVENT_CHANGE;
 		}
 
@@ -40,9 +40,16 @@ function getType(element: HTMLElement | SVGElement, type: string): string {
 }
 
 export function mapEvent(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name)!;
 
-	if (type != null && typeof value === 'function') {
-		on(element, getType(element, type), value as EventListener, getOptions(options ?? ''));
+	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 as EventListener, getOptions(options ?? ''));
+		}
 	}
 }

package/src/node/index.ts

@@ -1,24 +1,25 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
 import {
 	computed,
 	isComputed,
 	isReactive,
 	isSignal,
 	type Computed,
-	type Reactive,
+	type ReactiveArray,
 } from '@oscarpalmer/mora';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE} from '../constants';
-import {handleFragments} from '../fragments';
+import {mapAttributes} from '../attribute/index';
+import {EVENT_ON_VALUE, EXPRESSION_ABYDON_CONTENT, EXPRESSION_TEXTAREA_VALUE} from '../constants';
+import {Fragments, fragmentsStates, handleFragments} from '../fragments';
 import {isFragment, isFragments} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
-import {mapAttributes} from './attribute';
-import {setReactiveValue} from './value';
 import {mapEvent} from './event';
+import {setReactiveValue} from './value';
 
 function mapNode(data: FragmentData, comment: Comment): void {
-	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) {
@@ -53,23 +54,33 @@ export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 }
 
 function mapTextarea(data: FragmentData, element: HTMLTextAreaElement): void {
-	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	const [, index] =
+		EXPRESSION_TEXTAREA_VALUE.exec(element.textContent) ??
+		EXPRESSION_TEXTAREA_VALUE.exec(element.value) ??
+		[];
 
 	if (index == null) {
 		return;
 	}
 
+	element.textContent = '';
 	element.value = '';
 
 	const value = data.values[Number.parseInt(index, 10)];
 
 	if (isSignal(value)) {
-		element.value = String(value.peek());
+		element.value = getString(value.peek());
 
-		mapEvent(element, '@on', () => {
+		mapEvent(element, EVENT_ON_VALUE, () => {
 			value.set(element.value);
 		});
 
+		data.mora.subscribers.add(
+			value.subscribe(value => {
+				element.value = getString(value);
+			}),
+		);
+
 		return;
 	}
 
@@ -82,11 +93,11 @@ function mapTextarea(data: FragmentData, element: HTMLTextAreaElement): void {
 	}
 
 	if (reactive == null) {
-		element.value = String(value);
+		element.value = '';
 	} else {
 		data.mora.subscribers.add(
 			reactive.subscribe(value => {
-				element.value = String(value);
+				element.value = getString(value);
 			}),
 		);
 	}
@@ -99,8 +110,7 @@ function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 			break;
 
 		case isFragments(value):
-			handleFragments(value, false);
-			setReactiveValue(data, comment, value.items as Reactive<unknown[], unknown>);
+			setFragmentsValue(data, comment, value);
 			break;
 
 		case isReactive(value):
@@ -132,3 +142,11 @@ function setComputedValue(data: FragmentData, comment: Comment, callback: Generi
 
 	setReactiveValue(data, comment, value);
 }
+
+function setFragmentsValue(data: FragmentData, comment: Comment, fragments: Fragments): void {
+	const state = fragmentsStates.get(fragments)!;
+
+	handleFragments(state, false);
+
+	setReactiveValue(data, comment, state.mapped as ReactiveArray<unknown>);
+}

package/src/node/value.ts

@@ -113,11 +113,7 @@ function replaceText(item: FragmentItem, comment: Comment, isNullable: boolean):
 	replaceNodes(item.nodes ?? [], to);
 }
 
-function setArray(
-	item: FragmentItem,
-	comment: Comment,
-	value: unknown[],
-): Partial<FragmentItem> | boolean {
+function setArray(item: FragmentItem, comment: Comment, value: unknown[]): Partial<FragmentItem> {
 	if (value.length === 0) {
 		return {
 			nodes: setText(item, comment, value),
@@ -129,7 +125,9 @@ function setArray(
 	const next = templates.map(fragment => fragment.identifier) as unknown[];
 	const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
 
-	if (new Set(next).size !== templates.length) {
+	const nextSet = new Set(next);
+
+	if (nextSet.size !== templates.length) {
 		templates = [];
 	}
 
@@ -150,7 +148,7 @@ function setArray(
 
 	return handleArray(
 		{
-			next: new Set(next),
+			next: nextSet,
 			previous: new Set(previous),
 		},
 		{
@@ -163,11 +161,7 @@ function setArray(
 
 function setNodes(item: FragmentItem, comment: Comment, next: ChildNode[]): ChildNode[] {
 	if (item.nodes == null) {
-		if (comment.parentNode != null) {
-			replaceNodes([comment], next);
-		} else if (item.text?.parentNode != null) {
-			replaceNodes([item.text], next);
-		}
+		replaceNodes([comment], next);
 	} else {
 		replaceNodes(item.nodes, next);
 	}
@@ -196,25 +190,16 @@ export function setReactiveValue(
 				setReactiveValueForSingle(item, comment, value);
 			}
 
-			item.nodes = [...(item.nodes ?? [comment])];
+			item.nodes ??= [comment];
 		}),
 	);
 }
 
 function setReactiveValueForArray(item: FragmentItem, comment: Comment, value: unknown[]): void {
-	const result = setArray(item, comment, value);
-
-	item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
+	const {fragments, nodes} = setArray(item, comment, value);
 
-	if (typeof result === 'boolean') {
-		if (result) {
-			item.nodes = item.text == null ? [] : [item.text];
-		} else {
-			item.nodes = undefined;
-		}
-	} else {
-		item.nodes = result?.nodes;
-	}
+	item.fragments = fragments;
+	item.nodes = nodes;
 }
 
 function setReactiveValueForSingle(item: FragmentItem, comment: Comment, value: unknown): void {