@oscarpalmer/abydon 0.13.0 → 0.14.0

package/src/helpers/dom.ts

@@ -16,7 +16,7 @@ export function createNodes(value: unknown): ChildNode[] {
 }
 
 export function removeNodes(nodes: ChildNode[]): void {
-	sanitiseNodes(nodes);
+	sanitizeNodes(nodes);
 
 	const {length} = nodes;
 
@@ -35,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) {
@@ -46,7 +46,7 @@ function sanitiseNodes(nodes: ChildNode[]): void {
 		}
 
 		if (node.hasChildNodes()) {
-			sanitiseNodes([...node.childNodes] as ChildNode[]);
+			sanitizeNodes([...node.childNodes] as ChildNode[]);
 		}
 	}
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 import '@oscarpalmer/mora';
-import {Fragment} from './fragment';
+import { Fragment } from './fragment';
 
 export function html(
 	strings: TemplateStringsArray,
@@ -9,4 +9,5 @@ export function html(
 }
 
 export * from '@oscarpalmer/mora';
-export type {Fragment} from './fragment';
+export type { Fragment } from './fragment';
+

package/src/models.ts

@@ -1,19 +1,24 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 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[];
 	mora: MoraData;
 	strings: TemplateStringsArray;
+	template?: string;
 	values: unknown[];
 };
 
 export type FragmentItem = {
 	fragments?: Fragment[];
-	nodes: ChildNode[];
+	nodes?: ChildNode[];
+	text?: Text;
 };
 
 type MoraData = {

package/src/node/attribute/index.ts

@@ -1,14 +1,14 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/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]];
 }
@@ -25,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;
 		}
 	}
 }
@@ -43,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);
 	}
 }
 

package/src/node/attribute/value.ts

@@ -6,12 +6,14 @@ import {
 	setAttribute as setAttr,
 } from '@oscarpalmer/toretto/attribute';
 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';
 
-const classExpression = /^class\./;
-const styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
-const stylePrefixExpression = /^style\./;
-
 export function setAttribute(
 	data: FragmentData,
 	element: HTMLOrSVGElement,
@@ -21,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;
 
@@ -49,7 +51,7 @@ function setClasses(
 		}
 	}
 
-	const classes = name.slice(6).split('.');
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(value.subscribe(update));
@@ -64,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);
@@ -75,14 +83,10 @@ function setStyle(
 		}
 	}
 
-	const [, property, unit] = styleFullExpression.exec(name) ?? [];
-
-	if (property != null) {
-		if (isReactive(value)) {
-			data.mora.subscribers.add(value.subscribe(update));
-		} else {
-			update(value);
-		}
+	if (isReactive(value)) {
+		data.mora.subscribers.add(value.subscribe(update));
+	} else {
+		update(value);
 	}
 }
 
@@ -92,12 +96,17 @@ 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.mora.subscribers.add(
@@ -110,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,
@@ -133,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 '@oscarpalmer/toretto/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 {
+	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,16 +1,15 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
 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) {
@@ -61,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) {