@oscarpalmer/abydon 0.8.0 → 0.10.0

package/src/node/attribute/index.ts

@@ -1,5 +1,6 @@
-import {isReactive} from '@oscarpalmer/sentinel';
-import type {FragmentData, FragmentElement} from '../../models';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {computed, isReactive} from '@oscarpalmer/sentinel';
+import type {FragmentData, ProperElement} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
 
@@ -11,17 +12,9 @@ function getValue(data: FragmentData, original: string): unknown {
 	return matches == null ? original : data.values[+matches[1]];
 }
 
-export function isBadAttribute(name: string, value: string): boolean {
-	return (
-		/^on/i.test(name) ||
-		(/^(href|src|xlink:href)$/i.test(name) &&
-			/(data:text\/html|javascript:)/i.test(value))
-	);
-}
-
 export function mapAttributes(
 	data: FragmentData,
-	element: FragmentElement,
+	element: ProperElement,
 ): void {
 	const attributes = [...element.attributes];
 	const {length} = attributes;
@@ -29,31 +22,25 @@ export function mapAttributes(
 	for (let index = 0; index < length; index += 1) {
 		const {name, value} = attributes[index];
 
-		if (isBadAttribute(name, value)) {
-			element.removeAttribute(name);
-
-			continue;
-		}
-
 		const actual = getValue(data, value);
 
 		if (name.startsWith('@')) {
 			mapEvent(element, name, actual);
-		} else if (name.includes('.') || isReactive(actual)) {
+		} else if (
+			name.includes('.') ||
+			typeof value === 'function' ||
+			isReactive(actual)
+		) {
 			mapValue(element, name, actual);
 		}
 	}
 }
 
-function mapValue(
-	element: FragmentElement,
-	name: string,
-	value: unknown,
-): void {
+function mapValue(element: ProperElement, name: string, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			mapValue(element, name, value());
-			return;
+			setAttribute(element, name, computed(value as GenericCallback));
+			break;
 
 		default:
 			setAttribute(element, name, value);

package/src/node/attribute/value.ts

@@ -1,37 +1,29 @@
-import {closest} from '@oscarpalmer/atoms/element';
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
 import {effect, isReactive} from '@oscarpalmer/sentinel';
-import type {FragmentElement} from '../../models';
-
-const booleanAttributes = new Set([
-	'checked',
-	'disabled',
-	'hidden',
-	'inert',
-	'multiple',
-	'open',
-	'readOnly',
-	'required',
-	'selected',
-]);
-
-const classPattern = /^class\./;
-const stylePattern = /^style\./;
+import {
+	isBooleanAttribute,
+	setAttribute as setAttr,
+} from '@oscarpalmer/toretto/attribute';
+import type {ProperElement} from '../../models';
+
+const classExpression = /^class\./;
+const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
+const stylePrefixExpression = /^style\./;
 
 export function setAttribute(
-	element: FragmentElement,
+	element: ProperElement,
 	name: string,
 	value: unknown,
 ): void {
 	element.removeAttribute(name);
 
 	switch (true) {
-		case classPattern.test(name):
+		case classExpression.test(name):
 			setClasses(element, name, value);
 			return;
 
-		case stylePattern.test(name):
+		case stylePrefixExpression.test(name):
 			setStyle(element, name, value);
 			return;
 
@@ -42,12 +34,12 @@ export function setAttribute(
 }
 
 function setClasses(
-	element: FragmentElement,
+	element: ProperElement,
 	name: string,
 	value: unknown,
 ): void {
 	function update(value: unknown): void {
-		if (/^(|true)$/.test(getString(value))) {
+		if (value === true) {
 			element.classList.add(...classes);
 		} else {
 			element.classList.remove(...classes);
@@ -65,11 +57,7 @@ function setClasses(
 	}
 }
 
-function setStyle(
-	element: FragmentElement,
-	name: string,
-	value: unknown,
-): void {
+function setStyle(element: ProperElement, name: string, value: unknown): void {
 	function update(value: unknown): void {
 		if (value == null || value === false || (value === true && unit == null)) {
 			element.style.removeProperty(property);
@@ -81,32 +69,26 @@ function setStyle(
 		}
 	}
 
-	const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
+	const [, property, unit] = styleFullExpression.exec(name) ?? [];
 
-	if (property == null) {
-		return;
-	}
-
-	if (isReactive(value)) {
-		effect(() => {
-			update(value.get());
-		});
-	} else {
-		update(value);
+	if (property != null) {
+		if (isReactive(value)) {
+			effect(() => {
+				update(value.get());
+			});
+		} else {
+			update(value);
+		}
 	}
 }
 
-function setValue(
-	element: FragmentElement,
-	name: string,
-	value: unknown,
-): void {
+function setValue(element: ProperElement, name: string, value: unknown): void {
 	const callback =
-		booleanAttributes.has(name) && name in element
+		isBooleanAttribute(name) && name in element
 			? name === 'selected'
-				? updateSelected(element)
+				? updateSelected
 				: updateProperty
-			: updateAttribute;
+			: setAttr;
 
 	if (isReactive(value)) {
 		effect(() => {
@@ -123,37 +105,25 @@ function triggerSelectChange(select: HTMLSelectElement): void {
 	}
 }
 
-function updateAttribute(
-	element: FragmentElement,
+function updateProperty(
+	element: ProperElement,
 	name: string,
 	value: unknown,
 ): void {
-	if (value == null) {
-		element.removeAttribute(name);
-	} else {
-		element.setAttribute(name, getString(value));
-	}
+	(element as unknown as PlainObject)[name] = value === true;
 }
 
-function updateProperty(
-	element: FragmentElement,
+function updateSelected(
+	element: ProperElement,
 	name: string,
 	value: unknown,
 ): void {
-	(element as unknown as PlainObject)[name] = /^(|true)$/.test(
-		getString(value),
-	);
-}
-
-function updateSelected(element: FragmentElement) {
-	const select = closest(element, 'select')[0] as HTMLSelectElement;
+	const select = element.closest('select') as HTMLSelectElement;
 	const options = [...(select?.options ?? [])];
 
-	return (element: FragmentElement, name: string, value: unknown): void => {
-		if (select != null && options.includes(element as HTMLOptionElement)) {
-			triggerSelectChange(select);
-		}
+	if (select != null && options.includes(element as HTMLOptionElement)) {
+		triggerSelectChange(select);
+	}
 
-		updateProperty(element, name, value);
-	};
+	updateProperty(element, name, value);
 }

package/src/node/event.ts

@@ -1,4 +1,20 @@
-import type {FragmentElement} from '../models';
+import type {ProperElement} from '../models';
+
+const controllers = new WeakMap<ProperElement, AbortController>();
+
+const eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
+
+function getController(element: ProperElement): AbortController {
+	let controller = controllers.get(element);
+
+	if (controller == null) {
+		controller = new AbortController();
+
+		controllers.set(element, controller);
+	}
+
+	return controller;
+}
 
 function getOptions(options: string): AddEventListenerOptions {
 	const parts = options.split(':');
@@ -11,19 +27,25 @@ function getOptions(options: string): AddEventListenerOptions {
 }
 
 export function mapEvent(
-	element: FragmentElement,
+	element: ProperElement,
 	name: string,
 	value: unknown,
 ): void {
 	element.removeAttribute(name);
 
-	const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+	const [, type, options] = eventNamePattern.exec(name) ?? [];
 
 	if (typeof value === 'function' && type != null) {
-		element.addEventListener(
-			type,
-			value as EventListener,
-			getOptions(options ?? ''),
-		);
+		element.addEventListener(type, value as EventListener, {
+			...getOptions(options ?? ''),
+			signal: getController(element).signal,
+		});
+	}
+}
+
+export function removeEvents(element: ProperElement): void {
+	if (controllers.has(element)) {
+		controllers.get(element)?.abort();
+		controllers.delete(element);
 	}
 }

package/src/node/index.ts

@@ -1,7 +1,8 @@
-import {isReactive} from '@oscarpalmer/sentinel';
-import {isFragmentElement} from '../helpers';
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {computed, isReactive} from '@oscarpalmer/sentinel';
+import {isFragment, isProperElement} from '../helpers';
 import {createNodes} from '../helpers/dom';
-import type {FragmentData} from '../models';
+import type {FragmentData, ProperNode} from '../models';
 import {mapAttributes} from './attribute';
 import {setReactiveNode} from './value';
 
@@ -12,11 +13,11 @@ function mapNode(data: FragmentData, comment: Comment): void {
 	const value = matches == null ? null : data.values[+matches[1]];
 
 	if (value != null) {
-		mapValue(comment, value);
+		mapValue(data, comment, value);
 	}
 }
 
-export function mapNodes(data: FragmentData, nodes: Node[]): void {
+export function mapNodes(data: FragmentData, nodes: ProperNode[]): void {
 	const {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -28,28 +29,44 @@ export function mapNodes(data: FragmentData, nodes: Node[]): void {
 			continue;
 		}
 
-		if (isFragmentElement(node)) {
+		if (isProperElement(node)) {
 			mapAttributes(data, node);
 		}
 
 		if (node.hasChildNodes()) {
-			mapNodes(data, [...node.childNodes]);
+			mapNodes(data, [...node.childNodes] as ProperNode[]);
 		}
 	}
 }
 
-function mapValue(comment: Comment, value: unknown): void {
+function mapValue(data: FragmentData, comment: Comment, value: unknown): void {
 	switch (true) {
 		case typeof value === 'function':
-			mapValue(comment, value());
-			return;
+			setReactiveNode(data, comment, computed(value as GenericCallback));
+			break;
 
 		case isReactive(value):
-			setReactiveNode(comment, value);
+			setReactiveNode(data, comment, value);
 			break;
 
 		default:
-			comment.replaceWith(...createNodes(value));
+			replaceComment(data, comment, value);
 			break;
 	}
 }
+
+function replaceComment(
+	data: FragmentData,
+	comment: Comment,
+	value: unknown,
+): void {
+	const item = data.items.find(item => item.nodes.includes(comment));
+	const nodes = createNodes(value);
+
+	if (item != null) {
+		item.fragment = isFragment(value) ? value : undefined;
+		item.nodes = nodes;
+	}
+
+	comment.replaceWith(...nodes);
+}

package/src/node/value.ts

@@ -1,48 +1,87 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {getString} from '@oscarpalmer/atoms/string';
 import {type Reactive, effect} from '@oscarpalmer/sentinel';
-import {isFragment, isFragmentNode} from '../helpers';
+import type {Fragment} from '../fragment';
+import {isFragment, isProperNode} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
-import type {FragmentNode} from '../models';
+import type {FragmentData, ProperNode} from '../models';
 
-export function setReactiveNode(comment: Comment, reactive: Reactive): void {
+function setNodes(
+	nodes: ProperNode[] | undefined,
+	comment: Comment,
+	text: Text,
+	value: Fragment | ProperNode,
+): ProperNode[] {
+	const next = createNodes(value);
+
+	if (nodes == null) {
+		if (comment.parentNode != null) {
+			replaceNodes([comment], next);
+		} else if (text.parentNode != null) {
+			replaceNodes([text], next);
+		}
+	} else {
+		replaceNodes(nodes, next);
+	}
+
+	return next;
+}
+
+export function setReactiveNode(
+	data: FragmentData,
+	comment: Comment,
+	reactive: Reactive,
+): void {
+	const item = data.items.find(item => item.nodes.includes(comment));
 	const text = new Text();
 
-	let nodes: FragmentNode[] | undefined;
+	let nodes: ProperNode[] | undefined;
 
 	effect(() => {
 		const value = reactive.get();
 
-		if (isFragment(value) || isFragmentNode(value)) {
-			const next = createNodes(value);
-
-			if (nodes == null) {
-				if (comment.parentNode != null) {
-					replaceNodes([comment], next);
-				} else if (text.parentNode != null) {
-					replaceNodes([text], next);
-				}
-			} else {
-				replaceNodes(nodes, next);
-			}
+		const valueIsFragment = isFragment(value);
 
-			nodes = next;
+		if (valueIsFragment || isProperNode(value)) {
+			nodes = setNodes(nodes, comment, text, value);
+		} else {
+			nodes = setText(nodes, comment, text, value) ? [text] : undefined;
+		}
 
-			return;
+		if (item != null) {
+			item.fragment = valueIsFragment ? value : undefined;
+			item.nodes = [...(nodes ?? [comment])];
 		}
+	});
+}
 
-		const isNullable = isNullableOrWhitespace(value);
+function setText(
+	nodes: ProperNode[] | undefined,
+	comment: Comment,
+	text: Text,
+	value: unknown,
+): boolean {
+	const isNullable = isNullableOrWhitespace(value);
 
-		text.textContent = getString(value);
+	text.textContent = isNullable ? '' : getString(value);
 
-		if (nodes != null) {
-			replaceNodes(nodes, [isNullable ? comment : text]);
-		} else if (isNullable && comment.parentNode == null) {
-			text.replaceWith(comment);
-		} else if (!isNullable && text.parentNode == null) {
-			comment.replaceWith(text);
-		}
+	if (nodes != null) {
+		replaceNodes(nodes, [isNullable ? comment : text]);
 
-		nodes = undefined;
-	});
+		return !isNullable;
+	}
+
+	if (isNullable && comment.parentNode == null) {
+		text.replaceWith(comment);
+
+		return false;
+	}
+
+	if (!isNullable && text.parentNode == null) {
+		comment.replaceWith(text);
+
+		return true;
+	}
+
+	return false;
 }

package/types/fragment.d.ts

@@ -1,3 +1,4 @@
+import type { ProperNode } from './models';
 export declare class Fragment {
     private readonly $fragment;
     private readonly data;
@@ -9,7 +10,7 @@ export declare class Fragment {
     /**
      * Gets a list of the fragment's nodes
      */
-    get(): Node[];
+    get(): ProperNode[];
     /**
      * Removes the fragment from the DOM
      */

package/types/helpers/dom.d.ts

@@ -1,5 +1,4 @@
-import type { FragmentNode } from '../models';
-export declare function createNodes(value: unknown): FragmentNode[];
-export declare function createTemplate(html: string): Node;
-export declare function getNodes(node: Node): Node[];
-export declare function replaceNodes(from: FragmentNode[], to: FragmentNode[]): void;
+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;

package/types/helpers/index.d.ts

@@ -1,5 +1,5 @@
 import type { Fragment } from '../fragment';
-import type { FragmentElement, FragmentNode } from '../models';
+import type { ProperElement, ProperNode } from '../models';
 export declare function isFragment(value: unknown): value is Fragment;
-export declare function isFragmentElement(value: unknown): value is FragmentElement;
-export declare function isFragmentNode(value: unknown): value is FragmentNode;
+export declare function isProperElement(value: unknown): value is ProperElement;
+export declare function isProperNode(value: unknown): value is ProperNode;

package/types/index.d.cts

@@ -1,5 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
+export type ProperNode = CharacterData | Element;
 export declare class Fragment {
 	private readonly $fragment;
 	private readonly data;
@@ -11,7 +12,7 @@ export declare class Fragment {
 	/**
 	 * Gets a list of the fragment's nodes
 	 */
-	get(): Node[];
+	get(): ProperNode[];
 	/**
 	 * Removes the fragment from the DOM
 	 */

package/types/models.d.ts

@@ -1,8 +1,13 @@
+import type { Fragment } from './fragment';
 export type FragmentData = {
     expressions: unknown[];
-    nodes: Node[];
+    items: FragmentItem[];
     strings: TemplateStringsArray;
     values: unknown[];
 };
-export type FragmentElement = HTMLElement | SVGElement;
-export type FragmentNode = Comment | Element | Text;
+export type FragmentItem = {
+    fragment?: Fragment;
+    nodes: ProperNode[];
+};
+export type ProperElement = HTMLElement | SVGElement;
+export type ProperNode = CharacterData | Element;

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

@@ -1,3 +1,2 @@
-import type { FragmentData, FragmentElement } from '../../models';
-export declare function isBadAttribute(name: string, value: string): boolean;
-export declare function mapAttributes(data: FragmentData, element: FragmentElement): void;
+import type { FragmentData, ProperElement } from '../../models';
+export declare function mapAttributes(data: FragmentData, element: ProperElement): void;

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

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

package/types/node/event.d.ts

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

package/types/node/index.d.ts

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

package/types/node/value.d.ts

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