@oscarpalmer/abydon 0.11.0 → 0.13.0

package/src/node/attribute/value.ts

@@ -1,18 +1,20 @@
 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 {ProperElement} from '../../models';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
+import type {FragmentData} from '../../models';
 
 const classExpression = /^class\./;
 const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
 const stylePrefixExpression = /^style\./;
 
 export function setAttribute(
-	element: ProperElement,
+	data: FragmentData,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -20,21 +22,22 @@ export function setAttribute(
 
 	switch (true) {
 		case classExpression.test(name):
-			setClasses(element, name, value);
+			setClasses(data, element, name, value);
 			return;
 
 		case stylePrefixExpression.test(name):
-			setStyle(element, name, value);
+			setStyle(data, element, name, value);
 			return;
 
 		default:
-			setValue(element, name, value);
+			setValue(data, element, name, value);
 			break;
 	}
 }
 
 function setClasses(
-	element: ProperElement,
+	data: FragmentData,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -49,15 +52,18 @@ function setClasses(
 	const classes = name.slice(6).split('.');
 
 	if (isReactive(value)) {
-		effect(() => {
-			update(value.get());
-		});
+		data.mora.subscribers.add(value.subscribe(update));
 	} else {
 		update(value);
 	}
 }
 
-function setStyle(element: ProperElement, name: string, value: unknown): void {
+function setStyle(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	function update(value: unknown): void {
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
@@ -73,16 +79,19 @@ function setStyle(element: ProperElement, name: string, value: unknown): void {
 
 	if (property != null) {
 		if (isReactive(value)) {
-			effect(() => {
-				update(value.get());
-			});
+			data.mora.subscribers.add(value.subscribe(update));
 		} else {
 			update(value);
 		}
 	}
 }
 
-function setValue(element: ProperElement, name: string, value: unknown): void {
+function setValue(
+	data: FragmentData,
+	element: HTMLOrSVGElement,
+	name: string,
+	value: unknown,
+): void {
 	const callback =
 		isBooleanAttribute(name) && name in element
 			? name === 'selected'
@@ -91,9 +100,11 @@ function setValue(element: ProperElement, name: string, value: unknown): void {
 			: setAttr;
 
 	if (isReactive(value)) {
-		effect(() => {
-			callback(element, name, value.get());
-		});
+		data.mora.subscribers.add(
+			value.subscribe(next => {
+				callback(element, name, next);
+			}),
+		);
 	} else {
 		callback(element, name, value);
 	}
@@ -106,7 +117,7 @@ function triggerSelectChange(select: HTMLSelectElement): void {
 }
 
 function updateProperty(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -114,7 +125,7 @@ function updateProperty(
 }
 
 function updateSelected(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {

package/src/node/event.ts

@@ -1,10 +1,12 @@
-import type {ProperElement} from '../models';
+import type {HTMLOrSVGElement} from '@oscarpalmer/toretto/models';
 
-const controllers = new WeakMap<ProperElement, AbortController>();
+const controllers = new WeakMap<HTMLOrSVGElement, AbortController>();
 
 const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
 
-function getController(element: ProperElement): AbortController {
+const reason = 'Event removed as element was removed from document by Abydon';
+
+function getController(element: HTMLOrSVGElement): AbortController {
 	let controller = controllers.get(element);
 
 	if (controller == null) {
@@ -27,7 +29,7 @@ function getOptions(options: string): AddEventListenerOptions {
 }
 
 export function mapEvent(
-	element: ProperElement,
+	element: HTMLOrSVGElement,
 	name: string,
 	value: unknown,
 ): void {
@@ -43,9 +45,7 @@ export function mapEvent(
 	}
 }
 
-export function removeEvents(element: ProperElement): void {
-	if (controllers.has(element)) {
-		controllers.get(element)?.abort();
-		controllers.delete(element);
-	}
+export function removeEvents(element: HTMLOrSVGElement): void {
+	controllers.get(element)?.abort(reason);
+	controllers.delete(element);
 }

package/src/node/index.ts

@@ -1,10 +1,11 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/sentinel';
-import {isFragment, isProperElement} 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, ProperNode} from '../models';
+import type {FragmentData} from '../models';
 import {mapAttributes} from './attribute';
-import {setReactiveNode} from './value';
+import {setReactiveValue} from './value';
 
 const commentExpression = /^abydon\.(\d+)$/;
 
@@ -17,7 +18,7 @@ function mapNode(data: FragmentData, comment: Comment): void {
 	}
 }
 
-export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
+export function mapNodes(data: FragmentData, nodes: ChildNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -29,12 +30,12 @@ export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 			continue;
 		}
 
-		if (isProperElement(node)) {
+		if (isHTMLOrSVGElement(node)) {
 			mapAttributes(data, node);
 		}
 
 		if (node.hasChildNodes()) {
-			mapNodes(data, [...node.childNodes] as ProperNode[]);
+			mapNodes(data, [...node.childNodes] as ChildNode[]);
 		}
 	}
 }
@@ -42,11 +43,11 @@ export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			setReactiveNode(data, comment, computed(value as GenericCallback));
+			setComputedValue(data, comment, value as GenericCallback);
 			break;
 
 		case isReactive(value):
-			setReactiveNode(data, comment, value);
+			setReactiveValue(data, comment, value);
 			break;
 
 		default:
@@ -70,3 +71,15 @@ function replaceComment(
 
 	comment.replaceWith(...nodes);
 }
+
+function setComputedValue(
+	data: FragmentData,
+	comment: Comment,
+	callback: GenericCallback,
+): void {
+	const value = computed(callback);
+
+	data.mora.values.add(value);
+
+	setReactiveValue(data, comment, value);
+}

package/src/node/value.ts

@@ -1,11 +1,12 @@
 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, isFragment, isProperNode} from '../helpers';
+import {compareArrays, isFragment} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
-import type {FragmentData, FragmentItem, ProperNode} from '../models';
+import type {FragmentData, FragmentItem} from '../models';
 
 function removeFragments(fragments: Fragment[] | undefined): void {
 	if (fragments != null) {
@@ -19,7 +20,7 @@ function removeFragments(fragments: Fragment[] | undefined): void {
 
 function setArray(
 	fragments: Fragment[] | undefined,
-	nodes: ProperNode[] | undefined,
+	nodes: ChildNode[] | undefined,
 	comment: Comment,
 	text: Text,
 	value: unknown[],
@@ -124,11 +125,11 @@ function setArray(
 
 function setNodes(
 	fragments: Fragment[] | undefined,
-	nodes: ProperNode[] | undefined,
+	nodes: ChildNode[] | undefined,
 	comment: Comment,
 	text: Text,
-	next: ProperNode[],
-): ProperNode[] {
+	next: ChildNode[],
+): ChildNode[] {
 	if (nodes == null) {
 		if (comment.parentNode != null) {
 			replaceNodes([comment], next);
@@ -144,57 +145,57 @@ function setNodes(
 	return next;
 }
 
-export function setReactiveNode(
+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();
 
 	let fragments: Fragment[] | undefined;
-	let nodes: ProperNode[] | undefined;
+	let nodes: ChildNode[] | undefined;
 
-	effect(() => {
-		const value = reactive.get();
+	data.mora.subscribers.add(
+		reactive.subscribe(value => {
+			if (Array.isArray(value)) {
+				const result = setArray(fragments, nodes, comment, text, value);
 
-		if (Array.isArray(value)) {
-			const result = setArray(fragments, nodes, comment, text, value);
+				fragments = typeof result === 'boolean' ? undefined : result?.fragments;
 
-			fragments = typeof result === 'boolean' ? undefined : result?.fragments;
-
-			nodes =
-				typeof result === 'boolean'
-					? result
-						? [text]
-						: undefined
-					: result?.nodes;
-		} else {
-			const valueIsFragment = isFragment(value);
+				nodes =
+					typeof result === 'boolean'
+						? result
+							? [text]
+							: undefined
+						: result?.nodes;
+			} else {
+				const valueIsFragment = isFragment(value);
 
-			fragments = valueIsFragment ? [value] : undefined;
+				fragments = valueIsFragment ? [value] : undefined;
 
-			if (valueIsFragment || isProperNode(value)) {
-				nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
-			} else {
-				nodes = setText(fragments, nodes, comment, text, value);
+				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])];
-		}
-	});
+			if (item != null) {
+				item.fragments = fragments;
+				item.nodes = [...(nodes ?? [comment])];
+			}
+		}),
+	);
 }
 
 function setText(
 	fragments: Fragment[] | undefined,
-	nodes: ProperNode[] | undefined,
+	nodes: ChildNode[] | undefined,
 	comment: Comment,
 	text: Text,
 	value: unknown,
-): ProperNode[] | undefined {
+): ChildNode[] | undefined {
 	const isNullable = isNullableOrWhitespace(value);
 
 	text.textContent = isNullable ? '' : getString(value);

package/src/{html.ts → parse.ts}

@@ -1,5 +1,4 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {Fragment} from './fragment';
 import type {FragmentData} from './models';
 
 function handleExpression(
@@ -7,10 +6,6 @@ function handleExpression(
 	prefix: string,
 	expression: unknown,
 ): string {
-	if (isNullableOrWhitespace(expression)) {
-		return prefix;
-	}
-
 	if (Array.isArray(expression)) {
 		const {length} = expression;
 
@@ -23,20 +18,16 @@ function handleExpression(
 		return `${prefix}${expressions}`;
 	}
 
-	if (typeof expression === 'function' || typeof expression === 'object') {
+	if (
+		typeof expression === 'function' ||
+		(typeof expression === 'object' && expression != null)
+	) {
 		const index = data.values.push(expression) - 1;
 
 		return `${prefix}<!--abydon.${index}-->`;
 	}
 
-	return `${prefix}${expression}`;
-}
-
-export function html(
-	strings: TemplateStringsArray,
-	...values: unknown[]
-): Fragment {
-	return new Fragment(strings, values);
+	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 
 export function parse(data: FragmentData): string {

package/types/fragment.d.cts

@@ -0,0 +1,27 @@
+// Generated by dts-bundle-generator v9.5.1
+
+/**
+ * A generic key type
+ */
+export type Key = number | string;
+export declare class Fragment {
+	private readonly $fragment;
+	private readonly data;
+	get identifier(): Key | undefined;
+	constructor(strings: TemplateStringsArray, expressions: unknown[]);
+	/**
+	 * Appends the fragment to the given element
+	 */
+	appendTo(element: Element): void;
+	/**
+	 * Gets a list of the fragment's nodes
+	 */
+	get(): ChildNode[];
+	identify(identifier: Key): Fragment;
+	/**
+	 * Removes the fragment from the DOM
+	 */
+	remove(): void;
+}
+
+export {};

package/types/fragment.d.ts

@@ -1,5 +1,4 @@
 import type { Key } from '@oscarpalmer/atoms/models';
-import type { ProperNode } from './models';
 export declare class Fragment {
     private readonly $fragment;
     private readonly data;
@@ -12,7 +11,7 @@ export declare class Fragment {
     /**
      * Gets a list of the fragment's nodes
      */
-    get(): ProperNode[];
+    get(): ChildNode[];
     identify(identifier: Key): Fragment;
     /**
      * Removes the fragment from the DOM

package/types/helpers/dom.d.cts

@@ -0,0 +1,7 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare function createNodes(value: unknown): ChildNode[];
+export declare function removeNodes(nodes: ChildNode[]): void;
+export declare function replaceNodes(from: ChildNode[], to: ChildNode[]): void;
+
+export {};

package/types/helpers/dom.d.ts

@@ -1,4 +1,3 @@
-import type { ProperNode } from '../models';
-export declare function createNodes(value: unknown): ProperNode[];
-export declare function removeNodes(nodes: ProperNode[]): void;
-export declare function replaceNodes(from: ProperNode[], to: ProperNode[]): void;
+export declare function createNodes(value: unknown): ChildNode[];
+export declare function removeNodes(nodes: ChildNode[]): void;
+export declare function replaceNodes(from: ChildNode[], to: ChildNode[]): void;

package/types/helpers/index.d.cts

@@ -0,0 +1,29 @@
+// Generated by dts-bundle-generator v9.5.1
+
+/**
+ * A generic key type
+ */
+export type Key = number | string;
+declare class Fragment {
+	private readonly $fragment;
+	private readonly data;
+	get identifier(): Key | undefined;
+	constructor(strings: TemplateStringsArray, expressions: unknown[]);
+	/**
+	 * Appends the fragment to the given element
+	 */
+	appendTo(element: Element): void;
+	/**
+	 * Gets a list of the fragment's nodes
+	 */
+	get(): ChildNode[];
+	identify(identifier: Key): Fragment;
+	/**
+	 * Removes the fragment from the DOM
+	 */
+	remove(): void;
+}
+export declare function compareArrays(first: unknown[], second: unknown[]): "added" | "dissimilar" | "removed";
+export declare function isFragment(value: unknown): value is Fragment;
+
+export {};

package/types/helpers/index.d.ts

@@ -1,6 +1,3 @@
 import type { Fragment } from '../fragment';
-import type { ProperElement, ProperNode } from '../models';
 export declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
 export declare function isFragment(value: unknown): value is Fragment;
-export declare function isProperElement(value: unknown): value is ProperElement;
-export declare function isProperNode(value: unknown): value is ProperNode;