@oscarpalmer/abydon 0.12.0 → 0.13.0

package/dist/node/attribute/index.js

@@ -0,0 +1,34 @@
+import { mapEvent } from "../event.js";
+import { setAttribute } from "./value.js";
+import { computed, isReactive } from "@oscarpalmer/mora";
+var commentExpression = /^<!--abydon\.(\d+)-->$/;
+function getValue(data, original) {
+	const matches = commentExpression.exec(original ?? "");
+	return matches == null ? original : data.values[+matches[1]];
+}
+function mapAttributes(data, element) {
+	const attributes = [...element.attributes];
+	const { length } = attributes;
+	for (let index = 0; index < length; index += 1) {
+		const { name, value } = attributes[index];
+		const actual = getValue(data, value);
+		if (name.startsWith("@")) mapEvent(element, name, actual);
+		else if (name.includes(".") || typeof value === "function" || isReactive(actual)) mapValue(data, element, name, actual);
+	}
+}
+function mapValue(data, element, name, value) {
+	switch (true) {
+		case typeof value === "function":
+			setComputedAttribute(data, element, name, value);
+			break;
+		default:
+			setAttribute(data, element, name, value);
+			break;
+	}
+}
+function setComputedAttribute(data, element, name, callback) {
+	const value = computed(callback);
+	data.mora.values.add(value);
+	setAttribute(data, element, name, value);
+}
+export { mapAttributes };

package/dist/node/attribute/value.js

@@ -0,0 +1,58 @@
+import { isReactive } from "@oscarpalmer/mora";
+import { getString } from "@oscarpalmer/atoms/string";
+import { isBooleanAttribute, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto/attribute";
+var classExpression = /^class\./;
+var styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+var stylePrefixExpression = /^style\./;
+function setAttribute(data, element, name, value) {
+	element.removeAttribute(name);
+	switch (true) {
+		case classExpression.test(name):
+			setClasses(data, element, name, value);
+			return;
+		case stylePrefixExpression.test(name):
+			setStyle(data, element, name, value);
+			return;
+		default:
+			setValue(data, element, name, value);
+			break;
+	}
+}
+function setClasses(data, element, name, value) {
+	function update(value$1) {
+		if (value$1 === true) element.classList.add(...classes);
+		else element.classList.remove(...classes);
+	}
+	const classes = name.slice(6).split(".");
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	else update(value);
+}
+function setStyle(data, element, name, value) {
+	function update(value$1) {
+		if (value$1 == null || value$1 === false || value$1 === true && unit == null) element.style.removeProperty(property);
+		else element.style.setProperty(property, value$1 === true ? unit : getString(value$1));
+	}
+	const [, property, unit] = styleFullExpression.exec(name) ?? [];
+	if (property != null) if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	else update(value);
+}
+function setValue(data, element, name, value) {
+	const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttribute$1;
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
+		callback(element, name, next);
+	}));
+	else callback(element, name, value);
+}
+function triggerSelectChange(select) {
+	if (select != null) select.dispatchEvent(new Event("change", { bubbles: true }));
+}
+function updateProperty(element, name, value) {
+	element[name] = value === true;
+}
+function updateSelected(element, name, value) {
+	const select = element.closest("select");
+	const options = [...select?.options ?? []];
+	if (select != null && options.includes(element)) triggerSelectChange(select);
+	updateProperty(element, name, value);
+}
+export { setAttribute };

package/dist/node/event.js

@@ -0,0 +1,32 @@
+var controllers = /* @__PURE__ */ new WeakMap();
+var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
+var reason = "Event removed as element was removed from document by Abydon";
+function getController(element) {
+	let controller = controllers.get(element);
+	if (controller == null) {
+		controller = new AbortController();
+		controllers.set(element, controller);
+	}
+	return controller;
+}
+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")
+	};
+}
+function mapEvent(element, name, value) {
+	element.removeAttribute(name);
+	const [, type, options] = eventNamePattern.exec(name) ?? [];
+	if (typeof value === "function" && type != null) element.addEventListener(type, value, {
+		...getOptions(options ?? ""),
+		signal: getController(element).signal
+	});
+}
+function removeEvents(element) {
+	controllers.get(element)?.abort(reason);
+	controllers.delete(element);
+}
+export { mapEvent, removeEvents };

package/dist/node/index.js

@@ -0,0 +1,52 @@
+import { isFragment } from "../helpers/index.js";
+import { createNodes } from "../helpers/dom.js";
+import { mapAttributes } from "./attribute/index.js";
+import { setReactiveValue } from "./value.js";
+import { computed, isReactive } from "@oscarpalmer/mora";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+var commentExpression = /^abydon\.(\d+)$/;
+function mapNode(data, comment) {
+	const matches = commentExpression.exec(comment.textContent ?? "");
+	const value = matches == null ? null : data.values[+matches[1]];
+	if (value != null) mapValue(data, comment, value);
+}
+function mapNodes(data, nodes) {
+	const { length } = nodes;
+	for (let index = 0; index < length; index += 1) {
+		const node = nodes[index];
+		if (node instanceof Comment) {
+			mapNode(data, node);
+			continue;
+		}
+		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
+		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
+	}
+}
+function mapValue(data, comment, value) {
+	switch (true) {
+		case typeof value === "function":
+			setComputedValue(data, comment, value);
+			break;
+		case isReactive(value):
+			setReactiveValue(data, comment, value);
+			break;
+		default:
+			replaceComment(data, comment, value);
+			break;
+	}
+}
+function replaceComment(data, comment, value) {
+	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;
+		item.nodes = nodes;
+	}
+	comment.replaceWith(...nodes);
+}
+function setComputedValue(data, comment, callback) {
+	const value = computed(callback);
+	data.mora.values.add(value);
+	setReactiveValue(data, comment, value);
+}
+export { mapNodes };

package/dist/node/value.js

@@ -0,0 +1,93 @@
+import { compareArrays, isFragment } from "../helpers/index.js";
+import { createNodes, replaceNodes } from "../helpers/dom.js";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
+import { isChildNode } from "@oscarpalmer/toretto/is";
+function removeFragments(fragments) {
+	if (fragments != null) {
+		const { length } = fragments;
+		for (let index = 0; index < length; index += 1) fragments[index].remove();
+	}
+}
+function setArray(fragments, nodes, comment, text, value) {
+	if (value.length === 0) return { nodes: setText(fragments, nodes, comment, text, value) };
+	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
+	const identifiers = templates.map((fragment) => fragment.identifier);
+	const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
+	if (new Set(identifiers).size !== templates.length) templates = [];
+	const noTemplates = templates.length === 0;
+	if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) return {
+		fragments: noTemplates ? void 0 : templates,
+		nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
+	};
+	const next = templates.map((template) => fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
+	const comparison = compareArrays(fragments ?? [], templates);
+	if (comparison !== "removed") {
+		let position = nodes[0];
+		const before = comparison === "added" && !oldIdentifiers.includes(templates[0].identifier);
+		const items = next.flatMap((fragment) => fragment.get().flatMap((node) => ({
+			identifier: fragment.identifier,
+			value: node
+		})));
+		const { length: length$1 } = items;
+		for (let index = 0; index < length$1; index += 1) {
+			const item = items[index];
+			if (comparison === "dissimilar" || !oldIdentifiers.includes(item.identifier)) if (index === 0 && before) position.before(item.value);
+			else position.after(item.value);
+			position = item.value;
+		}
+	}
+	const toRemove = fragments?.filter((fragment) => !identifiers.includes(fragment.identifier)) ?? [];
+	const { length } = toRemove;
+	for (let index = 0; index < length; index += 1) toRemove[index].remove();
+	return {
+		fragments: next,
+		nodes: next.flatMap((fragment) => fragment.get())
+	};
+}
+function setNodes(fragments, nodes, comment, text, next) {
+	if (nodes == null) {
+		if (comment.parentNode != null) replaceNodes([comment], next);
+		else if (text.parentNode != null) replaceNodes([text], next);
+	} else replaceNodes(nodes, next);
+	removeFragments(fragments);
+	return next;
+}
+function setReactiveValue(data, comment, reactive) {
+	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
+	const text = new Text();
+	let fragments;
+	let nodes;
+	data.mora.subscribers.add(reactive.subscribe((value) => {
+		if (Array.isArray(value)) {
+			const result = setArray(fragments, nodes, comment, text, value);
+			fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+			nodes = typeof result === "boolean" ? result ? [text] : void 0 : result?.nodes;
+		} else {
+			const valueIsFragment = isFragment(value);
+			fragments = valueIsFragment ? [value] : void 0;
+			if (valueIsFragment || isChildNode(value)) nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
+			else nodes = setText(fragments, nodes, comment, text, value);
+		}
+		if (item != null) {
+			item.fragments = fragments;
+			item.nodes = [...nodes ?? [comment]];
+		}
+	}));
+}
+function setText(fragments, nodes, comment, text, value) {
+	const isNullable = isNullableOrWhitespace(value);
+	text.textContent = isNullable ? "" : getString(value);
+	let result = false;
+	if (nodes != null) {
+		replaceNodes(nodes, [isNullable ? comment : text]);
+		result = !isNullable;
+	} else if (isNullable && comment.parentNode == null) text.replaceWith(comment);
+	else if (!isNullable && text.parentNode == null) {
+		comment.replaceWith(text);
+		result = true;
+	}
+	removeFragments(fragments);
+	return result ? [text] : void 0;
+}
+export { setReactiveValue };

package/dist/parse.js

@@ -0,0 +1,21 @@
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+function handleExpression(data, prefix, expression) {
+	if (Array.isArray(expression)) {
+		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) {
+		const index = data.values.push(expression) - 1;
+		return `${prefix}<!--abydon.${index}-->`;
+	}
+	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
+}
+function parse(data) {
+	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;
+}
+export { parse };

package/package.json

@@ -4,48 +4,61 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.71.0",
-		"@oscarpalmer/sentinel": "^0.23.0",
-		"@oscarpalmer/toretto": "0.12.1"
+		"@oscarpalmer/atoms": "^0.108",
+		"@oscarpalmer/mora": "^0.21",
+		"@oscarpalmer/toretto": "^0.22"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^1.8.3",
-		"@types/bun": "^1.1.8",
-		"bun": "^1.1.27",
-		"dts-bundle-generator": "^9.5.1",
-		"typescript": "^5.5.4"
+		"@biomejs/biome": "^2.2",
+		"@oscarpalmer/oui": "^0.17",
+		"@rollup/plugin-node-resolve": "^16",
+		"@rollup/plugin-typescript": "^12.1",
+		"@types/node": "^24.3",
+		"@vitest/coverage-istanbul": "^3.2",
+		"dts-bundle-generator": "^9.5",
+		"glob": "^11",
+		"jsdom": "^26.1",
+		"rollup": "^4.50",
+		"tslib": "^2.8",
+		"typescript": "^5.9",
+		"vite": "npm:rolldown-vite@latest",
+		"vitest": "^3.2"
 	},
 	"exports": {
+		"./package.json": "./package.json",
 		".": {
-			"bun": "./src/index.ts",
-			"import": {
-				"types": "./types/index.d.ts",
-				"default": "./dist/index.mjs"
-			},
-			"require": {
-				"types": "./types/index.d.cts",
-				"default": "./dist/index.js"
-			}
+			"types": "./types/index.d.ts",
+			"default": "./dist/index.js"
 		}
 	},
-	"files": ["dist/index.js", "dist/**/*.mjs", "src", "types"],
+	"files": ["dist", "src", "types"],
+	"keywords": [
+		"components",
+		"dom",
+		"library",
+		"literals",
+		"reactive",
+		"signal",
+		"template",
+		"vanilla"
+	],
 	"license": "MIT",
-	"main": "dist/index.js",
-	"module": "dist/index.mjs",
+	"module": "dist/index.js",
 	"name": "@oscarpalmer/abydon",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/oscarpalmer/abydon.git"
 	},
 	"scripts": {
-		"build": "bun run clean && bunx bun ./.bun.ts && bunx bun ./.bun.ts --mjs && bun run types",
-		"clean": "rm -rf ./dist && rm -rf ./types && rm -rf ./tsconfig.tsbuildinfo",
-		"types": "bun run types:cjs && bun run types:esm",
-		"types:cjs": "bunx dts-bundle-generator --out-file ./types/index.d.cts --no-check --silent ./src/index.ts",
-		"types:esm": "bunx tsc -p ./tsconfig.json",
-		"watch": "bun build ./src/index.ts --outfile ./dist/index.js --watch"
+		"build": "npm run clean && npx vite build && npm run rollup:build && npm run types",
+		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
+		"rollup:build": "npx rollup -c",
+		"rollup:watch": "npx rollup -c --watch",
+		"test": "npx vitest --coverage",
+		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
+		"watch": "npx vite build --watch"
 	},
 	"type": "module",
-	"types": "types/index.d.ts",
-	"version": "0.12.0"
+	"types": "types/index.d.cts",
+	"version": "0.13.0"
 }

package/src/fragment.ts

@@ -1,9 +1,9 @@
 import type {Key} from '@oscarpalmer/atoms/models';
 import {html} from '@oscarpalmer/toretto/html';
-import {parse} from './html';
+import {removeNodes} from './helpers/dom';
 import type {FragmentData} from './models';
 import {mapNodes} from './node';
-import {removeNodes} from './helpers/dom';
+import {parse} from './parse';
 
 export class Fragment {
 	private readonly $fragment = true;
@@ -18,8 +18,8 @@ export class Fragment {
 			expressions,
 			strings,
 			items: [],
-			sentinel: {
-				effects: new Set(),
+			mora: {
+				subscribers: new Set(),
 				values: new Set(),
 			},
 			values: [],
@@ -41,7 +41,7 @@ export class Fragment {
 			const parsed = parse(this.data);
 
 			const templated = html(parsed, {
-				sanitiseBooleanAttributes: false,
+				sanitizeBooleanAttributes: false,
 			});
 
 			this.data.items.splice(
@@ -84,7 +84,7 @@ export class Fragment {
 }
 
 function removeFragment(data: FragmentData): void {
-	removeSentinels(data);
+	removeMora(data);
 
 	const {length} = data.items;
 
@@ -102,14 +102,13 @@ function removeFragment(data: FragmentData): void {
 	data.items.splice(0, length);
 }
 
-function removeSentinels(data: FragmentData): void {
-	const sentinels = [...data.sentinel.effects, ...data.sentinel.values];
-	const {length} = sentinels;
+function removeMora(data: FragmentData): void {
+	const unsubscribers = [...data.mora.subscribers];
 
-	for (let index = 0; index < length; index += 1) {
-		sentinels[index].stop();
-	}
+	data.mora.subscribers.clear();
+	data.mora.values.clear();
 
-	data.sentinel.effects.clear();
-	data.sentinel.values.clear();
+	for (const unsubscribe of unsubscribers) {
+		unsubscribe();
+	}
 }

package/src/helpers/dom.ts

@@ -1,6 +1,7 @@
 import {getString} from '@oscarpalmer/atoms/string';
-import {isChildNode, isFragment, isHTMLOrSVGElement} from './index';
+import {isChildNode, isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {removeEvents} from '../node/event';
+import {isFragment} from './index';
 
 export function createNodes(value: unknown): ChildNode[] {
 	if (isFragment(value)) {

package/src/helpers/index.ts

@@ -1,5 +1,4 @@
 import type {Fragment} from '../fragment';
-import type {HTMLOrSVGElement} from '../models';
 
 export function compareArrays(
 	first: unknown[],
@@ -20,10 +19,6 @@ export function compareArrays(
 	return firstIsLarger ? 'removed' : 'added';
 }
 
-export function isChildNode(value: unknown): value is ChildNode {
-	return value instanceof CharacterData || value instanceof Element;
-}
-
 export function isFragment(value: unknown): value is Fragment {
 	return (
 		typeof value === 'object' &&
@@ -32,7 +27,3 @@ export function isFragment(value: unknown): value is Fragment {
 		value.$fragment === true
 	);
 }
-
-export function isHTMLOrSVGElement(value: unknown): value is HTMLOrSVGElement {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}

package/src/index.ts

@@ -1,3 +1,12 @@
-import '@oscarpalmer/sentinel';
+import '@oscarpalmer/mora';
+import {Fragment} from './fragment';
+
+export function html(
+	strings: TemplateStringsArray,
+	...values: unknown[]
+): Fragment {
+	return new Fragment(strings, values);
+}
+
+export * from '@oscarpalmer/mora';
 export type {Fragment} from './fragment';
-export {html} from './html';

package/src/models.ts

@@ -1,24 +1,22 @@
 import type {Key} from '@oscarpalmer/atoms/models';
-import type {Effect, Reactive} from '@oscarpalmer/sentinel';
+import type {Reactive} from '@oscarpalmer/mora';
 import type {Fragment} from './fragment';
 
 export type FragmentData = {
 	expressions: unknown[];
 	identifier?: Key;
 	items: FragmentItem[];
-	sentinel: FragmentDataSentinel;
+	mora: MoraData;
 	strings: TemplateStringsArray;
 	values: unknown[];
 };
 
-type FragmentDataSentinel = {
-	effects: Set<Effect>;
-	values: Set<Reactive>;
-};
-
 export type FragmentItem = {
 	fragments?: Fragment[];
 	nodes: ChildNode[];
 };
 
-export type HTMLOrSVGElement = HTMLElement | SVGElement;
+type MoraData = {
+	subscribers: Set<() => void>;
+	values: Set<Reactive<unknown>>;
+};

package/src/node/attribute/index.ts

@@ -1,6 +1,7 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/sentinel';
-import type {FragmentData, HTMLOrSVGElement} from '../../models';
+import {computed, isReactive} from '@oscarpalmer/mora';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import type {FragmentData} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
@@ -61,7 +62,7 @@ function setComputedAttribute(
 ): void {
 	const value = computed(callback);
 
-	data.sentinel.values.add(value);
+	data.mora.values.add(value);
 
 	setAttribute(data, element, name, value);
 }

package/src/node/attribute/value.ts

@@ -1,11 +1,12 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
-import {effect, isReactive} from '@oscarpalmer/sentinel';
+import {isReactive} from '@oscarpalmer/mora';
 import {
 	isBooleanAttribute,
 	setAttribute as setAttr,
 } from '@oscarpalmer/toretto/attribute';
-import type {FragmentData, HTMLOrSVGElement} from '../../models';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import type {FragmentData} from '../../models';
 
 const classExpression = /^class\./;
 const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
@@ -51,11 +52,7 @@ function setClasses(
 	const classes = name.slice(6).split('.');
 
 	if (isReactive(value)) {
-		data.sentinel.effects.add(
-			effect(() => {
-				update(value.get());
-			}),
-		);
+		data.mora.subscribers.add(value.subscribe(update));
 	} else {
 		update(value);
 	}
@@ -82,11 +79,7 @@ function setStyle(
 
 	if (property != null) {
 		if (isReactive(value)) {
-			data.sentinel.effects.add(
-				effect(() => {
-					update(value.get());
-				}),
-			);
+			data.mora.subscribers.add(value.subscribe(update));
 		} else {
 			update(value);
 		}
@@ -107,9 +100,9 @@ function setValue(
 			: setAttr;
 
 	if (isReactive(value)) {
-		data.sentinel.effects.add(
-			effect(() => {
-				callback(element, name, value.get());
+		data.mora.subscribers.add(
+			value.subscribe(next => {
+				callback(element, name, next);
 			}),
 		);
 	} else {

package/src/node/event.ts

@@ -1,4 +1,4 @@
-import type {HTMLOrSVGElement} from '../models';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
 
 const controllers = new WeakMap<HTMLOrSVGElement, AbortController>();
 

package/src/node/index.ts

@@ -1,6 +1,7 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/sentinel';
-import {isFragment, isHTMLOrSVGElement} from '../helpers';
+import {computed, isReactive} from '@oscarpalmer/mora';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {isFragment} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
@@ -78,7 +79,7 @@ function setComputedValue(
 ): void {
 	const value = computed(callback);
 
-	data.sentinel.values.add(value);
+	data.mora.values.add(value);
 
 	setReactiveValue(data, comment, value);
 }

package/src/node/value.ts

@@ -1,9 +1,10 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import type {Key} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
-import {type Reactive, effect} from '@oscarpalmer/sentinel';
+import type {Reactive} from '@oscarpalmer/mora';
+import {isChildNode} from '@oscarpalmer/toretto/is';
 import type {Fragment} from '../fragment';
-import {compareArrays, isChildNode, isFragment} from '../helpers';
+import {compareArrays, isFragment} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
 import type {FragmentData, FragmentItem} from '../models';
 
@@ -147,7 +148,7 @@ function setNodes(
 export function setReactiveValue(
 	data: FragmentData,
 	comment: Comment,
-	reactive: Reactive,
+	reactive: Reactive<unknown>,
 ): void {
 	const item = data.items.find(item => item.nodes.includes(comment));
 	const text = new Text();
@@ -155,10 +156,8 @@ export function setReactiveValue(
 	let fragments: Fragment[] | undefined;
 	let nodes: ChildNode[] | undefined;
 
-	data.sentinel.effects.add(
-		effect(() => {
-			const value = reactive.get();
-
+	data.mora.subscribers.add(
+		reactive.subscribe(value => {
 			if (Array.isArray(value)) {
 				const result = setArray(fragments, nodes, comment, text, value);