@oscarpalmer/toretto 0.30.1 → 0.32.0

package/package.json

@@ -4,16 +4,16 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.115"
+		"@oscarpalmer/atoms": "^0.117"
 	},
 	"description": "A collection of badass DOM utilities.",
 	"devDependencies": {
 		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
 		"jsdom": "^27.3",
-		"oxfmt": "^0.18",
-		"oxlint": "^1.33",
-		"rolldown": "1.0.0-beta.55",
+		"oxfmt": "^0.19",
+		"oxlint": "^1.34",
+		"rolldown": "1.0.0-beta.56",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
 		"vite": "8.0.0-beta.2",
@@ -87,11 +87,11 @@
 		"build": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
 		"rolldown:build": "npx rolldown -c",
-		"rolldown:watch": "npx rolldown -c --watch",
+		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
 		"test": "npx vitest --coverage",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.30.1"
+	"version": "0.32.0"
 }

package/src/attribute/get.ts

@@ -8,11 +8,7 @@ import {isHTMLOrSVGElement} from '../internal/is';
  * @param parse Parse value? _(defaults to `true`)_
  * @returns Attribute value _(or `undefined`)_
  */
-export function getAttribute(
-	element: HTMLOrSVGElement,
-	name: `data-${string}`,
-	parse?: boolean,
-): unknown;
+export function getAttribute(element: Element, name: `data-${string}`, parse?: boolean): unknown;
 
 /**
  * Get the value of a specific attribute from an element
@@ -20,13 +16,9 @@ export function getAttribute(
  * @param name Attribute name
  * @returns Attribute value _(or `undefined`)_
  */
-export function getAttribute(element: HTMLOrSVGElement, name: string): unknown;
+export function getAttribute(element: Element, name: string): unknown;
 
-export function getAttribute(
-	element: HTMLOrSVGElement,
-	name: string,
-	parseValues?: boolean,
-): unknown {
+export function getAttribute(element: Element, name: string, parseValues?: boolean): unknown {
 	if (isHTMLOrSVGElement(element) && typeof name === 'string') {
 		return getAttributeValue(element, name, parseValues !== false);
 	}
@@ -40,7 +32,7 @@ export function getAttribute(
  * @returns Object of named attributes
  */
 export function getAttributes<Key extends string>(
-	element: HTMLOrSVGElement,
+	element: Element,
 	names: Key[],
 	parseData?: boolean,
 ): Record<Key, unknown> {

package/src/attribute/index.ts

@@ -1,8 +1,8 @@
 import {
-	isBadAttribute as internalIsBadAttribute,
-	isBooleanAttribute as _isBooleanAttribute,
-	isEmptyNonBooleanAttribute as _isEmptyNonBooleanAttribute,
-	isInvalidBooleanAttribute as _isInvalidBooleanAttribute,
+	_isBadAttribute,
+	_isBooleanAttribute,
+	_isEmptyNonBooleanAttribute,
+	_isInvalidBooleanAttribute,
 } from '../internal/attribute';
 import type {Attribute} from '../models';
 
@@ -22,7 +22,7 @@ export function isBadAttribute(attribute: Attr | Attribute): boolean;
 export function isBadAttribute(name: string, value: string): boolean;
 
 export function isBadAttribute(first: unknown, second?: unknown): boolean {
-	return internalIsBadAttribute(first, second, true);
+	return _isBadAttribute(first, second, true);
 }
 
 /**

package/src/attribute/set.ts

@@ -1,5 +1,5 @@
 import {updateValue, updateValues} from '../internal/attribute';
-import type {Attribute, HTMLOrSVGElement, Property} from '../models';
+import type {Attribute, Property} from '../models';
 
 /**
  * Set an attribute on an element
@@ -9,7 +9,7 @@ import type {Attribute, HTMLOrSVGElement, Property} from '../models';
  * @param name Attribute name
  * @param value Attribute value
  */
-export function setAttribute(element: HTMLOrSVGElement, name: string, value?: unknown): void;
+export function setAttribute(element: Element, name: string, value?: unknown): void;
 
 /**
  * Set an attribute on an element
@@ -18,9 +18,9 @@ export function setAttribute(element: HTMLOrSVGElement, name: string, value?: un
  * @param element Element for attribute
  * @param attribute Attribute to set
  */
-export function setAttribute(element: HTMLOrSVGElement, attribute: Attr | Attribute): void;
+export function setAttribute(element: Element, attribute: Attr | Attribute): void;
 
-export function setAttribute(element: HTMLOrSVGElement, first: unknown, second?: unknown): void {
+export function setAttribute(element: Element, first: unknown, second?: unknown): void {
 	updateValue(element, first, second);
 }
 
@@ -31,7 +31,7 @@ export function setAttribute(element: HTMLOrSVGElement, first: unknown, second?:
  * @param element Element for attributes
  * @param attributes Attributes to set
  */
-export function setAttributes(element: HTMLOrSVGElement, attributes: Array<Attr | Attribute>): void;
+export function setAttributes(element: Element, attributes: Array<Attr | Attribute>): void;
 
 /**
  * Set one or more attributes on an element
@@ -40,10 +40,10 @@ export function setAttributes(element: HTMLOrSVGElement, attributes: Array<Attr
  * @param element Element for attributes
  * @param attributes Attributes to set
  */
-export function setAttributes(element: HTMLOrSVGElement, attributes: Record<string, unknown>): void;
+export function setAttributes(element: Element, attributes: Record<string, unknown>): void;
 
 export function setAttributes(
-	element: HTMLOrSVGElement,
+	element: Element,
 	attributes: Attribute[] | Record<string, unknown>,
 ): void {
 	updateValues(element, attributes);
@@ -57,7 +57,7 @@ export function setAttributes(
  * @param name Property name
  * @param value Property value
  */
-export function setProperty(element: HTMLOrSVGElement, name: string, value: boolean | string): void;
+export function setProperty(element: Element, name: string, value: boolean | string): void;
 
 /**
  * Set a property on an element
@@ -66,9 +66,9 @@ export function setProperty(element: HTMLOrSVGElement, name: string, value: bool
  * @param element Element for property
  * @param property Property to set
  */
-export function setProperty(element: HTMLOrSVGElement, property: Property): void;
+export function setProperty(element: Element, property: Property): void;
 
-export function setProperty(element: HTMLOrSVGElement, first: unknown, second?: unknown): void {
+export function setProperty(element: Element, first: unknown, second?: unknown): void {
 	updateValue(element, first, second);
 }
 
@@ -79,7 +79,7 @@ export function setProperty(element: HTMLOrSVGElement, first: unknown, second?:
  * @param element Element for properties
  * @param properties Properties to set
  */
-export function setProperties(element: HTMLOrSVGElement, properties: Property[]): void;
+export function setProperties(element: Element, properties: Property[]): void;
 
 /**
  * Set one or more properties on an element
@@ -88,10 +88,10 @@ export function setProperties(element: HTMLOrSVGElement, properties: Property[])
  * @param element Element for properties
  * @param properties Properties to set
  */
-export function setProperties(element: HTMLOrSVGElement, properties: Record<string, unknown>): void;
+export function setProperties(element: Element, properties: Record<string, unknown>): void;
 
 export function setProperties(
-	element: HTMLOrSVGElement,
+	element: Element,
 	properties: Property[] | Record<string, unknown>,
 ): void {
 	updateValues(element, properties);

package/src/data.ts

@@ -3,7 +3,6 @@ import {kebabCase, parse} from '@oscarpalmer/atoms/string';
 import {setElementValues, updateElementValue} from './internal/element-value';
 import {EXPRESSION_DATA_PREFIX} from './internal/get-value';
 import {isHTMLOrSVGElement} from './internal/is';
-import type {HTMLOrSVGElement} from './models';
 
 /**
  * Get a keyed data value from an element
@@ -12,7 +11,7 @@ import type {HTMLOrSVGElement} from './models';
  * @param parse Parse values? _(defaults to `true`)_
  * @returns Data value
  */
-export function getData(element: HTMLOrSVGElement, key: string, parse?: boolean): unknown;
+export function getData(element: Element, key: string, parse?: boolean): unknown;
 
 /**
  * Get keyed data values from an element
@@ -22,16 +21,12 @@ export function getData(element: HTMLOrSVGElement, key: string, parse?: boolean)
  * @returns Keyed data values
  */
 export function getData<Key extends string>(
-	element: HTMLOrSVGElement,
+	element: Element,
 	keys: Key[],
 	parse?: boolean,
 ): Record<Key, unknown>;
 
-export function getData(
-	element: HTMLOrSVGElement,
-	keys: string | string[],
-	parseValues?: boolean,
-): unknown {
+export function getData(element: Element, keys: string | string[], parseValues?: boolean): unknown {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
@@ -75,7 +70,7 @@ function getName(original: string): string {
  * @param element Element to set data on
  * @param data Data to set
  */
-export function setData(element: HTMLOrSVGElement, data: PlainObject): void;
+export function setData(element: Element, data: PlainObject): void;
 
 /**
  * Set a data value on an element
@@ -83,17 +78,13 @@ export function setData(element: HTMLOrSVGElement, data: PlainObject): void;
  * @param key Data key
  * @param value Data value
  */
-export function setData(element: HTMLOrSVGElement, key: string, value: unknown): void;
+export function setData(element: Element, key: string, value: unknown): void;
 
-export function setData(
-	element: HTMLOrSVGElement,
-	first: PlainObject | string,
-	second?: unknown,
-): void {
+export function setData(element: Element, first: PlainObject | string, second?: unknown): void {
 	setElementValues(element, first, second, updateDataAttribute);
 }
 
-function updateDataAttribute(element: HTMLOrSVGElement, key: string, value: unknown): void {
+function updateDataAttribute(element: Element, key: string, value: unknown): void {
 	updateElementValue(
 		element,
 		getName(key),

package/src/event/delegation.ts

@@ -3,33 +3,19 @@ import type {CustomEventListener, RemovableEventListener} from '../models';
 
 //
 
-type DocumentWithListenerCounts = Document &
-	Partial<{
-		[key: string]: number;
-	}>;
-
 export type EventTargetWithListeners = EventTarget &
 	Partial<{
 		[key: string]: Set<EventListener | CustomEventListener>;
 	}>;
 
-function addDelegatedHandler(
-	document: DocumentWithListenerCounts,
-	type: string,
-	name: string,
-	passive: boolean,
-): void {
-	const count = `${name}${COUNT_SUFFIX}`;
-
-	if (document[count] != null) {
-		(document[count] as number) += 1;
-
+function addDelegatedHandler(doc: Document, type: string, name: string, passive: boolean): void {
+	if (DELEGATED.has(name)) {
 		return;
 	}
 
-	document[count] = 1;
+	DELEGATED.add(name);
 
-	document.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, {
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, {
 		passive,
 	});
 }
@@ -43,12 +29,12 @@ export function addDelegatedListener(
 ): RemovableEventListener {
 	target[name] ??= new Set();
 
-	target[name]?.add(listener);
+	target[name].add(listener);
 
-	addDelegatedHandler(document as DocumentWithListenerCounts, type, name, passive);
+	addDelegatedHandler(document, type, name, passive);
 
 	return () => {
-		removeDelegatedListener(target, type, name, listener, passive);
+		removeDelegatedListener(target, name, listener);
 	};
 }
 
@@ -58,9 +44,19 @@ function delegatedEventHandler(this: boolean, event: Event): void {
 	const items = event.composedPath();
 	const {length} = items;
 
-	Object.defineProperty(event, 'target', {
-		configurable: true,
-		value: items[0],
+	let target = items[0];
+
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			},
+		},
+		target: {
+			configurable: true,
+			value: target,
+		},
 	});
 
 	for (let index = 0; index < length; index += 1) {
@@ -71,10 +67,7 @@ function delegatedEventHandler(this: boolean, event: Event): void {
 			continue;
 		}
 
-		Object.defineProperty(event, 'currentTarget', {
-			configurable: true,
-			value: item,
-		});
+		target = item;
 
 		for (const listener of listeners) {
 			(listener as EventListener).call(item, event);
@@ -102,29 +95,10 @@ export function getDelegatedName(
 	}
 }
 
-function removeDelegatedHandler(
-	document: DocumentWithListenerCounts,
-	type: string,
-	name: string,
-	passive: boolean,
-): void {
-	const count = `${name}${COUNT_SUFFIX}`;
-
-	(document[count] as number) -= 1;
-
-	if ((document[count] as number) < 1) {
-		document[count] = undefined;
-
-		document.removeEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE);
-	}
-}
-
 export function removeDelegatedListener(
 	target: EventTargetWithListeners,
-	type: string,
 	name: string,
 	listener: EventListener | CustomEventListener,
-	passive: boolean,
 ): boolean {
 	const handlers = target[name];
 
@@ -138,14 +112,12 @@ export function removeDelegatedListener(
 		target[name] = undefined;
 	}
 
-	removeDelegatedHandler(document as DocumentWithListenerCounts, type, name, passive);
-
 	return true;
 }
 
 //
 
-const COUNT_SUFFIX = '.count';
+const DELEGATED = new Set<string>();
 
 const EVENT_PREFIX = '@';
 
@@ -178,6 +150,6 @@ const EVENT_TYPES: Set<string> = new Set([
 	'touchstart',
 ]);
 
-const HANDLER_ACTIVE: EventListener = delegatedEventHandler.bind(false);
+const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
 
-const HANDLER_PASSIVE: EventListener = delegatedEventHandler.bind(true);
+const HANDLER_PASSIVE = delegatedEventHandler.bind(true);

package/src/event/index.ts

@@ -151,13 +151,7 @@ export function off(
 
 	if (
 		delegated == null ||
-		!removeDelegatedListener(
-			target as EventTargetWithListeners,
-			type,
-			delegated,
-			listener,
-			extended.passive,
-		)
+		!removeDelegatedListener(target as EventTargetWithListeners, delegated, listener)
 	) {
 		target.removeEventListener(type, listener as EventListener, extended);
 	}

package/src/find/index.ts

@@ -93,7 +93,7 @@ function findElementOrElementsFromNodes(
 			element != null &&
 			(context == null ||
 				contexts.length === 0 ||
-				contexts.some(context => context === element || context.contains(element))) &&
+				contexts.some(ctx => ctx === element || ctx.contains(element))) &&
 			!result.includes(element)
 		) {
 			result.push(element);
@@ -171,4 +171,4 @@ const TAG_HEAD = 'HEAD';
 //
 
 export {findElement as $, findElements as $$};
-export {findAncestor, findRelatives} from './relative';
+export {findAncestor, findRelatives, getDistance} from './relative';

package/src/find/relative.ts

@@ -1,26 +1,3 @@
-/**
- * - Get the distance between two elements _(i.e., the amount of nodes of between them)_
- * - If the distance cannot be calculated, `-1` is returned
- */
-function getDistanceBetweenElements(origin: Element, target: Element): number | undefined {
-	if (origin === target || origin.parentElement === target) {
-		return 0;
-	}
-
-	const comparison = origin.compareDocumentPosition(target);
-	const children = [...(origin.parentElement?.children ?? [])];
-
-	if (children.includes(target)) {
-		return Math.abs(children.indexOf(origin) - children.indexOf(target));
-	}
-
-	const beforeOrInside = !!(comparison & 2 || comparison & 8);
-
-	if (beforeOrInside || !!(comparison & 4 || comparison & 16)) {
-		return traverse(beforeOrInside ? origin : target, beforeOrInside ? target : origin) ?? -1;
-	}
-}
-
 /**
  * Find the closest ancestor element that matches the selector _(string or callback)_
  *
@@ -70,8 +47,7 @@ export function findAncestor(
 /**
  * Finds the closest elements to the origin element that matches the selector
  *
- * - Traverses up, down, and sideways in the _DOM_-tree
- * - _(If you only want to traverse up, use {@link findAncestor})_
+ * Traverses up, down, and sideways in the _DOM_-tree. _(If you only want to traverse up, use {@link findAncestor})_
  * @param origin Element to start from
  * @param selector Selector to match
  * @param context Context to search within
@@ -86,10 +62,6 @@ export function findRelatives(
 		return [];
 	}
 
-	if (origin.matches(selector)) {
-		return [origin];
-	}
-
 	const elements = [
 		...(context instanceof Document || context instanceof Element
 			? context
@@ -99,12 +71,8 @@ export function findRelatives(
 
 	const {length} = elements;
 
-	if (length === 0) {
-		return [];
-	}
-
-	if (length === 1) {
-		return [elements[0]];
+	if (length < 2) {
+		return elements.filter(element => element !== origin);
 	}
 
 	const distances = [];
@@ -113,9 +81,9 @@ export function findRelatives(
 
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
-		const distance = getDistanceBetweenElements(origin, element) ?? -1;
+		const distance = getDistance(origin, element);
 
-		if (distance > -1) {
+		if (distance > 0) {
 			if (minimum == null || distance < minimum) {
 				minimum = distance;
 			}
@@ -127,18 +95,44 @@ export function findRelatives(
 		}
 	}
 
-	return minimum == null
-		? []
-		: distances.filter(found => found.distance === minimum).map(found => found.element);
+	return distances
+		.filter(found => found.distance === minimum)
+		.map(found => found.element);
 }
 
-function traverse(from: Element, to: Element): number | undefined {
-	let index = [...to.children].indexOf(from);
+/**
+ * Get the distance between two elements _(i.e., the amount of nodes of between them)_
+ * @param origin Origin element
+ * @param target Target element
+ * @returns Distance between elements, or `-1` if distance cannot be calculated
+ */
+export function getDistance(origin: Element, target: Element): number {
+	if (origin === target) {
+		return 0;
+	}
+
+	if (origin.parentElement === target || target.parentElement === origin) {
+		return 1;
+	}
+
+	if (origin.parentElement != null && origin.parentElement === target.parentElement) {
+		const children = [...origin.parentElement.children];
 
-	if (index > -1) {
-		return index + 1;
+		return Math.abs(children.indexOf(origin) - children.indexOf(target));
+	}
+
+	const comparison = origin.compareDocumentPosition(target);
+
+	if (comparison & Node.DOCUMENT_POSITION_DISCONNECTED) {
+		return -1;
 	}
 
+	const preceding = comparison & Node.DOCUMENT_POSITION_PRECEDING;
+
+	return traverse(preceding ? origin : target, preceding ? target : origin) ?? -1;
+}
+
+function traverse(from: Element, to: Element): number | undefined {
 	let current = from;
 	let distance = 0;
 	let parent: Element | null = from.parentElement;
@@ -148,18 +142,18 @@ function traverse(from: Element, to: Element): number | undefined {
 			return distance + 1;
 		}
 
-		const children = [...(parent.children ?? [])];
+		const children = [...parent.children];
 
-		if (children.includes(to)) {
+		if (to.parentElement === parent) {
 			return distance + Math.abs(children.indexOf(current) - children.indexOf(to));
 		}
 
-		index = children.findIndex(child => child.contains(to));
+		const index = children.findIndex(child => child.contains(to));
 
 		if (index > -1) {
-			const traversed = traverse(current, children[index]) ?? -1;
+			const traversed = traverse(current, children[index]);
 
-			return traversed === -1
+			return traversed == null || traversed === -1
 				? -1
 				: distance + Math.abs(index - children.indexOf(current)) + traversed;
 		}

package/src/html/index.ts

@@ -44,16 +44,13 @@ type Options = Required<HtmlOptions>;
 //
 
 function createHtml(value: string | HTMLTemplateElement): string {
-	const html = getParser().parseFromString(
-		typeof value === 'string' ? value : value.innerHTML,
-		HTML_PARSE_TYPE,
-	);
+	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
 
-	html.body.normalize();
+	parsed.body.normalize();
 
-	sanitizeNodes([html.body], 0);
+	sanitizeNodes([parsed.body], 0);
 
-	return html.body.innerHTML;
+	return parsed.body.innerHTML;
 }
 
 function createTemplate(
@@ -71,6 +68,10 @@ function createTemplate(
 	return template;
 }
 
+function getHtml(value: string | HTMLTemplateElement): string {
+	return `${TEMPORARY_ELEMENT}${typeof value === 'string' ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
+}
+
 function getNodes(value: string | HTMLTemplateElement, options: Options): Node[] {
 	if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
 		return [];
@@ -103,7 +104,7 @@ function getTemplate(
 		return createTemplate(value, options);
 	}
 
-	if (typeof value !== 'string' || value.trim().length === 0) {
+	if (value.trim().length === 0) {
 		return;
 	}
 
@@ -115,9 +116,7 @@ function getTemplate(
 
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
 
-	template = element instanceof HTMLTemplateElement ? element : createTemplate(value, options);
-
-	return template;
+	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
 
 const html = ((value: string | HTMLTemplateElement, options?: Options): Node[] => {
@@ -163,10 +162,12 @@ export function sanitize(value: Node | Node[]): Node[] {
 
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 
-const HTML_PARSE_TYPE = 'text/html';
+const PARSE_TYPE_HTML = 'text/html';
 
 const TEMPLATE_TAG = 'template';
 
+const TEMPORARY_ELEMENT = '<toretto-temporary></toretto-temporary>';
+
 let parser: DOMParser;
 
 let templates: Record<string, HTMLTemplateElement> = {};