@oscarpalmer/abydon 0.11.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.11.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 type {FragmentData, ProperNode} from './models';
-import {mapNodes} from './node';
 import {removeNodes} from './helpers/dom';
+import type {FragmentData} from './models';
+import {mapNodes} from './node';
+import {parse} from './parse';
 
 export class Fragment {
 	private readonly $fragment = true;
@@ -18,6 +18,10 @@ export class Fragment {
 			expressions,
 			strings,
 			items: [],
+			mora: {
+				subscribers: new Set(),
+				values: new Set(),
+			},
 			values: [],
 		};
 	}
@@ -32,19 +36,19 @@ export class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): ProperNode[] {
+	get(): ChildNode[] {
 		if (this.data.items.length === 0) {
 			const parsed = parse(this.data);
 
 			const templated = html(parsed, {
-				sanitiseBooleanAttributes: false,
+				sanitizeBooleanAttributes: false,
 			});
 
 			this.data.items.splice(
 				0,
 				this.data.items.length,
 				...templated.map(node => ({
-					nodes: [node as ProperNode],
+					nodes: [node as ChildNode],
 				})),
 			);
 
@@ -75,19 +79,36 @@ export class Fragment {
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		const {length} = this.data.items;
+		removeFragment(this.data);
+	}
+}
 
-		for (let index = 0; index < length; index += 1) {
-			const {fragments, nodes} = this.data.items[index];
-			const {length} = fragments ?? [];
+function removeFragment(data: FragmentData): void {
+	removeMora(data);
+
+	const {length} = data.items;
 
-			for (let index = 0; index < length; index += 1) {
-				fragments?.[index]?.remove();
-			}
+	for (let index = 0; index < length; index += 1) {
+		const {fragments, nodes} = data.items[index];
+		const {length} = fragments ?? [];
 
-			removeNodes(nodes);
+		for (let index = 0; index < length; index += 1) {
+			fragments?.[index]?.remove();
 		}
 
-		this.data.items.splice(0, length);
+		removeNodes(nodes);
+	}
+
+	data.items.splice(0, length);
+}
+
+function removeMora(data: FragmentData): void {
+	const unsubscribers = [...data.mora.subscribers];
+
+	data.mora.subscribers.clear();
+	data.mora.values.clear();
+
+	for (const unsubscribe of unsubscribers) {
+		unsubscribe();
 	}
 }

package/src/helpers/dom.ts

@@ -1,21 +1,21 @@
 import {getString} from '@oscarpalmer/atoms/string';
-import type {ProperNode} from '../models';
-import {isFragment, isProperElement, isProperNode} from './index';
+import {isChildNode, isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {removeEvents} from '../node/event';
+import {isFragment} from './index';
 
-export function createNodes(value: unknown): ProperNode[] {
+export function createNodes(value: unknown): ChildNode[] {
 	if (isFragment(value)) {
-		return value.get() as ProperNode[];
+		return value.get() as ChildNode[];
 	}
 
-	if (isProperNode(value)) {
+	if (isChildNode(value)) {
 		return [value];
 	}
 
 	return [new Text(getString(value))];
 }
 
-export function removeNodes(nodes: ProperNode[]): void {
+export function removeNodes(nodes: ChildNode[]): void {
 	sanitiseNodes(nodes);
 
 	const {length} = nodes;
@@ -25,7 +25,7 @@ export function removeNodes(nodes: ProperNode[]): void {
 	}
 }
 
-export function replaceNodes(from: ProperNode[], to: ProperNode[]): void {
+export function replaceNodes(from: ChildNode[], to: ChildNode[]): void {
 	from[0]?.replaceWith(...to);
 
 	const {length} = from;
@@ -35,18 +35,18 @@ export function replaceNodes(from: ProperNode[], to: ProperNode[]): void {
 	}
 }
 
-function sanitiseNodes(nodes: ProperNode[]): void {
+function sanitiseNodes(nodes: ChildNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
 		const node = nodes[index];
 
-		if (isProperElement(node)) {
+		if (isHTMLOrSVGElement(node)) {
 			removeEvents(node);
 		}
 
 		if (node.hasChildNodes()) {
-			sanitiseNodes([...node.childNodes] as ProperNode[]);
+			sanitiseNodes([...node.childNodes] as ChildNode[]);
 		}
 	}
 }

package/src/helpers/index.ts

@@ -1,5 +1,4 @@
 import type {Fragment} from '../fragment';
-import type {ProperElement, ProperNode} from '../models';
 
 export function compareArrays(
 	first: unknown[],
@@ -28,11 +27,3 @@ export function isFragment(value: unknown): value is Fragment {
 		value.$fragment === true
 	);
 }
-
-export function isProperElement(value: unknown): value is ProperElement {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}
-
-export function isProperNode(value: unknown): value is ProperNode {
-	return value instanceof CharacterData || value instanceof Element;
-}

package/src/index.ts

@@ -1,2 +1,12 @@
+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,19 +1,22 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+import type {Reactive} from '@oscarpalmer/mora';
 import type {Fragment} from './fragment';
 
 export type FragmentData = {
 	expressions: unknown[];
 	identifier?: Key;
 	items: FragmentItem[];
+	mora: MoraData;
 	strings: TemplateStringsArray;
 	values: unknown[];
 };
 
 export type FragmentItem = {
 	fragments?: Fragment[];
-	nodes: ProperNode[];
+	nodes: ChildNode[];
 };
 
-export type ProperElement = HTMLElement | SVGElement;
-
-export type ProperNode = CharacterData | Element;
+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, ProperElement} 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';
 
@@ -14,7 +15,7 @@ function getValue(data: FragmentData, original: string): unknown {
 
 export function mapAttributes(
 	data: FragmentData,
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 ): void {
 	const attributes = [...element.attributes];
 	const {length} = attributes;
@@ -31,19 +32,37 @@ export function mapAttributes(
 			typeof value === 'function' ||
 			isReactive(actual)
 		) {
-			mapValue(element, name, actual);
+			mapValue(data, element, name, actual);
 		}
 	}
 }
 
-function mapValue(element: ProperElement, name: string, value: unknown): void {
+function mapValue(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	switch (true) {
 		case typeof value === 'function':
-			setAttribute(element, name, computed(value as GenericCallback));
+			setComputedAttribute(data, element, name, value as GenericCallback);
 			break;
 
 		default:
-			setAttribute(element, name, value);
+			setAttribute(data, element, name, value);
 			break;
 	}
 }
+
+function setComputedAttribute(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	callback: GenericCallback,
+): void {
+	const value = computed(callback);
+
+	data.mora.values.add(value);
+
+	setAttribute(data, element, name, value);
+}