@oscarpalmer/abydon 0.12.0 → 0.14.0

package/src/models.ts

@@ -1,24 +1,27 @@
-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 FragmentConfiguration = {
+	identifier?: unknown;
+	ignoreCache?: boolean;
+};
+
 export type FragmentData = {
 	expressions: unknown[];
-	identifier?: Key;
 	items: FragmentItem[];
-	sentinel: FragmentDataSentinel;
+	mora: MoraData;
 	strings: TemplateStringsArray;
+	template?: string;
 	values: unknown[];
 };
 
-type FragmentDataSentinel = {
-	effects: Set<Effect>;
-	values: Set<Reactive>;
-};
-
 export type FragmentItem = {
 	fragments?: Fragment[];
-	nodes: ChildNode[];
+	nodes?: ChildNode[];
+	text?: Text;
 };
 
-export type HTMLOrSVGElement = HTMLElement | SVGElement;
+type MoraData = {
+	subscribers: Set<() => void>;
+	values: Set<Reactive<unknown>>;
+};

package/src/node/attribute/index.ts

@@ -1,13 +1,14 @@
 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 {isBooleanAttribute, setProperty} from '@oscarpalmer/toretto/attribute';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {EXPRESSION_COMMENT_FULL} from '../../constants';
+import type {FragmentData} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
-const commentExpression = /^<!--abydon\.(\d+)-->$/;
-
 function getValue(data: FragmentData, original: string): unknown {
-	const matches = commentExpression.exec(original ?? '');
+	const matches = EXPRESSION_COMMENT_FULL.exec(original ?? '');
 
 	return matches == null ? original : data.values[+matches[1]];
 }
@@ -24,14 +25,23 @@ export function mapAttributes(
 
 		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);
+		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;
 		}
 	}
 }
@@ -42,14 +52,10 @@ function mapValue(
 	name: string,
 	value: unknown,
 ): void {
-	switch (true) {
-		case typeof value === 'function':
-			setComputedAttribute(data, element, name, value as GenericCallback);
-			break;
-
-		default:
-			setAttribute(data, element, name, value);
-			break;
+	if (typeof value === 'function') {
+		setComputedAttribute(data, element, name, value as GenericCallback);
+	} else {
+		setAttribute(data, element, name, value);
 	}
 }
 
@@ -61,7 +67,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,15 +1,18 @@
 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';
-
-const classExpression = /^class\./;
-const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
-const stylePrefixExpression = /^style\./;
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {
+	ATTRIBUTE_CLASS_PREFIX_LENGTH,
+	EXPRESSION_ATTRIBUTE_CLASS,
+	EXPRESSION_ATTRIBUTE_STYLE_FULL,
+	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
+} from '../../constants';
+import type {FragmentData} from '../../models';
 
 export function setAttribute(
 	data: FragmentData,
@@ -20,11 +23,11 @@ export function setAttribute(
 	element.removeAttribute(name);
 
 	switch (true) {
-		case classExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
 			setClasses(data, element, name, value);
 			return;
 
-		case stylePrefixExpression.test(name):
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
 			setStyle(data, element, name, value);
 			return;
 
@@ -48,14 +51,10 @@ function setClasses(
 		}
 	}
 
-	const classes = name.slice(6).split('.');
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
 
 	if (isReactive(value)) {
-		data.sentinel.effects.add(
-			effect(() => {
-				update(value.get());
-			}),
-		);
+		data.mora.subscribers.add(value.subscribe(update));
 	} else {
 		update(value);
 	}
@@ -67,6 +66,12 @@ function setStyle(
 	name: string,
 	value: unknown,
 ): void {
+	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+
+	if (property == null) {
+		return;
+	}
+
 	function update(value: unknown): void {
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
@@ -78,18 +83,10 @@ function setStyle(
 		}
 	}
 
-	const [, property, unit] = styleFullExpression.exec(name) ?? [];
-
-	if (property != null) {
-		if (isReactive(value)) {
-			data.sentinel.effects.add(
-				effect(() => {
-					update(value.get());
-				}),
-			);
-		} else {
-			update(value);
-		}
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
 	}
 }
 
@@ -99,17 +96,22 @@ function setValue(
 	name: string,
 	value: unknown,
 ): void {
-	const callback =
-		isBooleanAttribute(name) && name in element
-			? name === 'selected'
-				? updateSelected
-				: updateProperty
-			: setAttr;
+	let callback: (
+		element: HTMLOrSVGElement,
+		name: string,
+		value: unknown,
+	) => void;
+
+	if (isBooleanAttribute(name) && name in element) {
+		callback = name === 'selected' ? updateSelected : updateProperty;
+	} else {
+		callback = 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 {
@@ -117,12 +119,6 @@ function setValue(
 	}
 }
 
-function triggerSelectChange(select: HTMLSelectElement): void {
-	if (select != null) {
-		select.dispatchEvent(new Event('change', {bubbles: true}));
-	}
-}
-
 function updateProperty(
 	element: HTMLOrSVGElement,
 	name: string,
@@ -140,7 +136,7 @@ function updateSelected(
 	const options = [...(select?.options ?? [])];
 
 	if (select != null && options.includes(element as HTMLOptionElement)) {
-		triggerSelectChange(select);
+		select.dispatchEvent(new Event('change', {bubbles: true}));
 	}
 
 	updateProperty(element, name, value);

package/src/node/event.ts

@@ -1,18 +1,17 @@
-import type {HTMLOrSVGElement} from '../models';
-
-const controllers = new WeakMap<HTMLOrSVGElement, AbortController>();
-
-const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
-
-const reason = 'Event removed as element was removed from document by Abydon';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import {
+	ABORT_CONTROLLERS,
+	EXPRESSION_EVENT_NAME,
+	REASON_EVENT_REMOVED,
+} from '../constants';
 
 function getController(element: HTMLOrSVGElement): AbortController {
-	let controller = controllers.get(element);
+	let controller = ABORT_CONTROLLERS.get(element);
 
 	if (controller == null) {
 		controller = new AbortController();
 
-		controllers.set(element, controller);
+		ABORT_CONTROLLERS.set(element, controller);
 	}
 
 	return controller;
@@ -24,7 +23,7 @@ function getOptions(options: string): AddEventListenerOptions {
 	return {
 		capture: parts.includes('c') || parts.includes('capture'),
 		once: parts.includes('o') || parts.includes('once'),
-		passive: !parts.includes('a') && !parts.includes('active'),
+		passive: !(parts.includes('a') || parts.includes('active')),
 	};
 }
 
@@ -35,7 +34,7 @@ export function mapEvent(
 ): void {
 	element.removeAttribute(name);
 
-	const [, type, options] = eventNamePattern.exec(name) ?? [];
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
 
 	if (typeof value === 'function' && type != null) {
 		element.addEventListener(type, value as EventListener, {
@@ -46,6 +45,6 @@ export function mapEvent(
 }
 
 export function removeEvents(element: HTMLOrSVGElement): void {
-	controllers.get(element)?.abort(reason);
-	controllers.delete(element);
+	ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
+	ABORT_CONTROLLERS.delete(element);
 }

package/src/node/index.ts

@@ -1,15 +1,15 @@
 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 {EXPRESSION_COMMENT_CONTENT} from '../constants';
+import {isFragment} from '../helpers';
 import {createNodes} from '../helpers/dom';
 import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
 import {setReactiveValue} from './value';
 
-const commentExpression = /^abydon\.(\d+)$/;
-
 function mapNode(data: FragmentData, comment: Comment): void {
-	const matches = commentExpression.exec(comment.textContent ?? '');
+	const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? '');
 	const value = matches == null ? null : data.values[+matches[1]];
 
 	if (value != null) {
@@ -60,7 +60,7 @@ function replaceComment(
 	comment: Comment,
 	value: unknown,
 ): void {
-	const item = data.items.find(item => item.nodes.includes(comment));
+	const item = data.items.find(item => item.nodes?.includes(comment));
 	const nodes = createNodes(value);
 
 	if (item != null) {
@@ -78,7 +78,7 @@ function setComputedValue(
 ): void {
 	const value = computed(callback);
 
-	data.sentinel.values.add(value);
+	data.mora.values.add(value);
 
 	setReactiveValue(data, comment, value);
 }