@oscarpalmer/abydon 0.11.0 → 0.12.0

package/src/node/index.ts

@@ -1,10 +1,10 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {computed, isReactive} from '@oscarpalmer/sentinel';
-import {isFragment, isProperElement} from '../helpers';
+import {isFragment, isHTMLOrSVGElement} 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 +17,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 +29,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 +42,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 +70,15 @@ function replaceComment(
 
 	comment.replaceWith(...nodes);
 }
+
+function setComputedValue(
+	data: FragmentData,
+	comment: Comment,
+	callback: GenericCallback,
+): void {
+	const value = computed(callback);
+
+	data.sentinel.values.add(value);
+
+	setReactiveValue(data, comment, value);
+}

package/src/node/value.ts

@@ -3,9 +3,9 @@ import type {Key} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
 import {type Reactive, effect} from '@oscarpalmer/sentinel';
 import type {Fragment} from '../fragment';
-import {compareArrays, isFragment, isProperNode} from '../helpers';
+import {compareArrays, isChildNode, 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 +19,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 +124,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,7 +144,7 @@ function setNodes(
 	return next;
 }
 
-export function setReactiveNode(
+export function setReactiveValue(
 	data: FragmentData,
 	comment: Comment,
 	reactive: Reactive,
@@ -153,48 +153,50 @@ export function setReactiveNode(
 	const text = new Text();
 
 	let fragments: Fragment[] | undefined;
-	let nodes: ProperNode[] | undefined;
+	let nodes: ChildNode[] | undefined;
 
-	effect(() => {
-		const value = reactive.get();
+	data.sentinel.effects.add(
+		effect(() => {
+			const value = reactive.get();
 
-		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/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.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.ts

@@ -1,6 +1,6 @@
 import type { Fragment } from '../fragment';
-import type { ProperElement, ProperNode } from '../models';
+import type { HTMLOrSVGElement } from '../models';
 export declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
+export declare function isChildNode(value: unknown): value is ChildNode;
 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;
+export declare function isHTMLOrSVGElement(value: unknown): value is HTMLOrSVGElement;

package/types/index.d.cts

@@ -2,7 +2,6 @@
 
 import { Key } from '@oscarpalmer/atoms/models';
 
-export type ProperNode = CharacterData | Element;
 export declare class Fragment {
 	private readonly $fragment;
 	private readonly data;
@@ -15,7 +14,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/index.d.ts

@@ -1,2 +1,3 @@
+import '@oscarpalmer/sentinel';
 export type { Fragment } from './fragment';
 export { html } from './html';

package/types/models.d.ts

@@ -1,15 +1,21 @@
 import type { Key } from '@oscarpalmer/atoms/models';
+import type { Effect, Reactive } from '@oscarpalmer/sentinel';
 import type { Fragment } from './fragment';
 export type FragmentData = {
     expressions: unknown[];
     identifier?: Key;
     items: FragmentItem[];
+    sentinel: FragmentDataSentinel;
     strings: TemplateStringsArray;
     values: unknown[];
 };
+type FragmentDataSentinel = {
+    effects: Set<Effect>;
+    values: Set<Reactive>;
+};
 export type FragmentItem = {
     fragments?: Fragment[];
-    nodes: ProperNode[];
+    nodes: ChildNode[];
 };
-export type ProperElement = HTMLElement | SVGElement;
-export type ProperNode = CharacterData | Element;
+export type HTMLOrSVGElement = HTMLElement | SVGElement;
+export {};

package/types/node/attribute/index.d.ts

@@ -1,2 +1,2 @@
-import type { FragmentData, ProperElement } from '../../models';
-export declare function mapAttributes(data: FragmentData, element: ProperElement): void;
+import type { FragmentData, HTMLOrSVGElement } from '../../models';
+export declare function mapAttributes(data: FragmentData, element: HTMLOrSVGElement): void;

package/types/node/attribute/value.d.ts

@@ -1,2 +1,2 @@
-import type { ProperElement } from '../../models';
-export declare function setAttribute(element: ProperElement, name: string, value: unknown): void;
+import type { FragmentData, HTMLOrSVGElement } from '../../models';
+export declare function setAttribute(data: FragmentData, element: HTMLOrSVGElement, name: string, value: unknown): void;

package/types/node/event.d.ts

@@ -1,3 +1,3 @@
-import type { ProperElement } from '../models';
-export declare function mapEvent(element: ProperElement, name: string, value: unknown): void;
-export declare function removeEvents(element: ProperElement): void;
+import type { HTMLOrSVGElement } from '../models';
+export declare function mapEvent(element: HTMLOrSVGElement, name: string, value: unknown): void;
+export declare function removeEvents(element: HTMLOrSVGElement): void;

package/types/node/index.d.ts

@@ -1,2 +1,2 @@
-import type { FragmentData, ProperNode } from '../models';
-export declare function mapNodes(data: FragmentData, nodes: ProperNode[]): void;
+import type { FragmentData } from '../models';
+export declare function mapNodes(data: FragmentData, nodes: ChildNode[]): void;

package/types/node/value.d.ts

@@ -1,3 +1,3 @@
 import { type Reactive } from '@oscarpalmer/sentinel';
 import type { FragmentData } from '../models';
-export declare function setReactiveNode(data: FragmentData, comment: Comment, reactive: Reactive): void;
+export declare function setReactiveValue(data: FragmentData, comment: Comment, reactive: Reactive): void;