@oscarpalmer/abydon 0.12.0 → 0.14.0

package/dist/node/attribute/index.js

@@ -0,0 +1,39 @@
+import { EXPRESSION_COMMENT_FULL } from "../../constants.js";
+import { mapEvent } from "../event.js";
+import { setAttribute as setAttribute$1 } 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 ?? "");
+	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);
+		switch (true) {
+			case name.startsWith("@"):
+				mapEvent(element, name, actual);
+				break;
+			case name.includes(".") || typeof actual === "function" || isReactive(actual):
+				mapValue(data, element, name, actual);
+				break;
+			case isBooleanAttribute(name):
+				setProperty(element, name, value);
+				break;
+			default: break;
+		}
+	}
+}
+function mapValue(data, element, name, value) {
+	if (typeof value === "function") setComputedAttribute(data, element, name, value);
+	else setAttribute$1(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);
+}
+export { mapAttributes };

package/dist/node/attribute/value.js

@@ -0,0 +1,56 @@
+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";
+function setAttribute(data, element, name, value) {
+	element.removeAttribute(name);
+	switch (true) {
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
+			setClasses(data, element, name, value);
+			return;
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.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) {
+	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+	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));
+	}
+	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;
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
+		callback(element, name, next);
+	}));
+	else callback(element, name, value);
+}
+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)) select.dispatchEvent(new Event("change", { bubbles: true }));
+	updateProperty(element, name, value);
+}
+export { setAttribute };

package/dist/node/event.js

@@ -0,0 +1,30 @@
+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;
+}
+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] = 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);
+}
+export { mapEvent, removeEvents };

package/dist/node/index.js

@@ -0,0 +1,52 @@
+import { EXPRESSION_COMMENT_CONTENT } from "../constants.js";
+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";
+function mapNode(data, comment) {
+	const matches = EXPRESSION_COMMENT_CONTENT.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,108 @@
+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 addToArray(identifiers, items, nodes, added) {
+	let position = nodes[0];
+	const before = added && !identifiers.previous.includes(items.templates[0].identifier);
+	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
+		identifier: fragment.identifier,
+		value: node
+	})));
+	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);
+		else position.after(node.value);
+		position = node.value;
+	}
+}
+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);
+	if (comparison !== "removed") addToArray(identifiers, {
+		...items,
+		next
+	}, nodes, comparison === "added");
+	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.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 removeFragments(fragments) {
+	if (fragments != null) {
+		const { length } = fragments;
+		for (let index = 0; index < length; index += 1) fragments[index].remove();
+	}
+}
+function setArray(state, comment, value) {
+	if (value.length === 0) return { nodes: setText(state, comment, value) };
+	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
+	const next = templates.map((fragment) => fragment.identifier);
+	const previous = state.fragments?.map((fragment) => fragment.identifier) ?? [];
+	if (new Set(next).size !== templates.length) templates = [];
+	const noTemplates = templates.length === 0;
+	if (noTemplates || state.nodes == null || previous.some((identifier) => identifier == null)) return {
+		fragments: noTemplates ? void 0 : templates,
+		nodes: setNodes(state, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
+	};
+	return handleArray({
+		next,
+		previous
+	}, {
+		templates,
+		fragments: state.fragments ?? []
+	}, state.nodes);
+}
+function setNodes(state, comment, next) {
+	if (state.nodes == null) {
+		if (comment.parentNode != null) replaceNodes([comment], next);
+		else if (state.text.parentNode != null) replaceNodes([state.text], next);
+	} else replaceNodes(state.nodes, next);
+	removeFragments(state.fragments);
+	return next;
+}
+function setReactiveValue(data, comment, reactive) {
+	const item = data.items.find((item$1) => item$1.nodes.includes(comment));
+	const state = { text: new Text() };
+	data.mora.subscribers.add(reactive.subscribe((value) => {
+		if (Array.isArray(value)) setReactiveValueForArray(state, comment, value);
+		else setReactiveValueForSingle(state, comment, value);
+		if (item != null) {
+			item.fragments = state.fragments;
+			item.nodes = [...state.nodes ?? [comment]];
+		}
+	}));
+}
+function setReactiveValueForArray(state, comment, value) {
+	const result = setArray(state, comment, value);
+	state.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+	if (typeof result === "boolean") state.nodes = result ? [state.text] : void 0;
+	else state.nodes = result?.nodes;
+}
+function setReactiveValueForSingle(state, comment, value) {
+	const valueIsFragment = isFragment(value);
+	state.fragments = valueIsFragment ? [value] : void 0;
+	if (valueIsFragment || isChildNode(value)) state.nodes = setNodes(state, comment, createNodes(value));
+	else state.nodes = setText(state, comment, value);
+}
+function setText(state, comment, value) {
+	const isNullable = isNullableOrWhitespace(value);
+	state.text.textContent = isNullable ? "" : getString(value);
+	let result = false;
+	if (state.nodes != null) {
+		replaceNodes(state.nodes, [isNullable ? comment : state.text]);
+		result = !isNullable;
+	} else if (isNullable && comment.parentNode == null) state.text.replaceWith(comment);
+	else if (!isNullable && state.text.parentNode == null) {
+		comment.replaceWith(state.text);
+		result = true;
+	}
+	removeFragments(state.fragments);
+	return result ? [state.text] : void 0;
+}
+export { setReactiveValue };

package/dist/parse.js

@@ -0,0 +1,18 @@
+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) return `${prefix}<!--abydon.${data.values.push(expression) - 1}-->`;
+	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,59 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.71.0",
-		"@oscarpalmer/sentinel": "^0.23.0",
-		"@oscarpalmer/toretto": "0.12.1"
+		"@oscarpalmer/atoms": "^0.114",
+		"@oscarpalmer/mora": "^0.23",
+		"@oscarpalmer/toretto": "^0.24"
 	},
 	"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.3",
+		"@oscarpalmer/oui": "^0.18",
+		"@rollup/plugin-node-resolve": "^16",
+		"@rollup/plugin-typescript": "^12.3",
+		"@types/node": "^24.9",
+		"@vitest/coverage-istanbul": "^4",
+		"glob": "^11",
+		"jsdom": "^27.1",
+		"rollup": "^4.52",
+		"tslib": "^2.8",
+		"typescript": "^5.9",
+		"vite": "npm:rolldown-vite@latest",
+		"vitest": "^4"
 	},
 	"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 && npx tsc",
+		"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",
+		"watch": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.12.0"
+	"version": "0.14.0"
 }

package/src/constants.ts

@@ -0,0 +1,20 @@
+export const ABORT_CONTROLLERS: WeakMap<HTMLOrSVGElement, AbortController> =
+	new WeakMap();
+
+export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+
+export const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
+
+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_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
+export const REASON_EVENT_REMOVED =
+	'Event removed as element was removed from document by Abydon';

package/src/fragment.ts

@@ -1,29 +1,37 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 import {html} from '@oscarpalmer/toretto/html';
-import {parse} from './html';
-import type {FragmentData} from './models';
-import {mapNodes} from './node';
 import {removeNodes} from './helpers/dom';
+import type {FragmentConfiguration, FragmentData} from './models';
+import {mapNodes} from './node';
+import {parse} from './parse';
+import { isPlainObject } from '@oscarpalmer/atoms';
 
 export class Fragment {
-	private readonly $fragment = true;
-	private readonly data: FragmentData;
+	readonly #data: FragmentData;
 
-	get identifier(): Key | undefined {
-		return this.data.identifier;
+	readonly #configuration: Required<FragmentConfiguration> = {
+		identifier: undefined,
+		ignoreCache: false,
+	}
+
+	get identifier(): unknown {
+		return this.#configuration.identifier;
 	}
 
 	constructor(strings: TemplateStringsArray, expressions: unknown[]) {
-		this.data = {
+		this.#data = {
 			expressions,
 			strings,
 			items: [],
-			sentinel: {
-				effects: new Set(),
+			mora: {
+				subscribers: new Set(),
 				values: new Set(),
 			},
 			values: [],
 		};
+
+		Object.defineProperty(this, '$fragment', {
+			value: true,
+		});
 	}
 
 	/**
@@ -33,44 +41,64 @@ export class Fragment {
 		element.append(...this.get());
 	}
 
+	configure(configuration: FragmentConfiguration): Fragment {
+		const actual = isPlainObject(configuration) ? configuration : {};
+
+		if (actual.identifier !== undefined) {
+			this.#configuration.identifier = actual.identifier;
+		}
+
+		if (typeof actual.ignoreCache === 'boolean') {
+			this.#configuration.ignoreCache = actual.ignoreCache;
+		}
+
+		return this;
+	}
+
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
 	get(): ChildNode[] {
-		if (this.data.items.length === 0) {
-			const parsed = parse(this.data);
+		const data = this.#data;
+
+		if (data.items.length === 0) {
+			const parsed = parse(data);
 
 			const templated = html(parsed, {
-				sanitiseBooleanAttributes: false,
+				sanitizeBooleanAttributes: false,
 			});
 
-			this.data.items.splice(
+			if (this.#configuration.ignoreCache) {
+				html.remove(parsed);
+			}
+
+			data.items.splice(
 				0,
-				this.data.items.length,
+				data.items.length,
 				...templated.map(node => ({
 					nodes: [node as ChildNode],
 				})),
 			);
 
 			mapNodes(
-				this.data,
-				this.data.items.flatMap(
+				data,
+				data.items.flatMap(
 					item =>
-						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+						item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
 				),
 			);
 		}
 
 		return [
-			...this.data.items.flatMap(
+			...data.items.flatMap(
 				item =>
-					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes,
+					item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? [],
 			),
 		];
 	}
 
-	identify(identifier: Key): Fragment {
-		this.data.identifier = identifier;
+	identify(identifier: unknown): Fragment {
+		this.#configuration.identifier = identifier;
 
 		return this;
 	}
@@ -79,37 +107,36 @@ export class Fragment {
 	 * Removes the fragment from the DOM
 	 */
 	remove(): void {
-		removeFragment(this.data);
+		removeFragment(this.#data);
 	}
 }
 
 function removeFragment(data: FragmentData): void {
-	removeSentinels(data);
+	removeMora(data);
 
 	const {length} = data.items;
 
 	for (let index = 0; index < length; index += 1) {
 		const {fragments, nodes} = data.items[index];
-		const {length} = fragments ?? [];
+		const length = fragments?.length ?? 0;
 
 		for (let index = 0; index < length; index += 1) {
 			fragments?.[index]?.remove();
 		}
 
-		removeNodes(nodes);
+		removeNodes(nodes ?? []);
 	}
 
-	data.items.splice(0, length);
+	data.items.length = 0;
 }
 
-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)) {
@@ -15,7 +16,7 @@ export function createNodes(value: unknown): ChildNode[] {
 }
 
 export function removeNodes(nodes: ChildNode[]): void {
-	sanitiseNodes(nodes);
+	sanitizeNodes(nodes);
 
 	const {length} = nodes;
 
@@ -34,7 +35,7 @@ export function replaceNodes(from: ChildNode[], to: ChildNode[]): void {
 	}
 }
 
-function sanitiseNodes(nodes: ChildNode[]): void {
+function sanitizeNodes(nodes: ChildNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -45,7 +46,7 @@ function sanitiseNodes(nodes: ChildNode[]): void {
 		}
 
 		if (node.hasChildNodes()) {
-			sanitiseNodes([...node.childNodes] as ChildNode[]);
+			sanitizeNodes([...node.childNodes] as ChildNode[]);
 		}
 	}
 }

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,13 @@
-import '@oscarpalmer/sentinel';
-export type {Fragment} from './fragment';
-export {html} from './html';
+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';
+