@oscarpalmer/toretto 0.31.0 → 0.33.0

package/package.json

@@ -4,19 +4,19 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.115"
+		"@oscarpalmer/atoms": "^0.119"
 	},
 	"description": "A collection of badass DOM utilities.",
 	"devDependencies": {
 		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
-		"jsdom": "^27.3",
-		"oxfmt": "^0.19",
-		"oxlint": "^1.34",
-		"rolldown": "1.0.0-beta.55",
+		"jsdom": "^27.4",
+		"oxfmt": "^0.21",
+		"oxlint": "^1.36",
+		"rolldown": "1.0.0-beta.57",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
-		"vite": "8.0.0-beta.2",
+		"vite": "8.0.0-beta.5",
 		"vitest": "^4"
 	},
 	"exports": {
@@ -93,5 +93,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.31.0"
+	"version": "0.33.0"
 }

package/src/attribute/set.ts

@@ -1,5 +1,28 @@
-import {updateValue, updateValues} from '../internal/attribute';
-import type {Attribute, Property} from '../models';
+import {updateAttribute} from '../internal/attribute';
+import {setElementValue, setElementValues} from '../internal/element-value';
+import type {Attribute} from '../models';
+
+//
+
+type DispatchedAttribute = 'checked' | 'open' | 'value';
+
+//
+
+/**
+ * Set an attribute on an element
+ *
+ * _(Or remove it, if value is `null` or `undefined`)_
+ * @param element Element for attribute
+ * @param name Attribute name
+ * @param value Attribute value
+ * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
+ */
+export function setAttribute<Name extends DispatchedAttribute>(
+	element: Element,
+	name: Name,
+	value?: unknown,
+	dispatch?: boolean,
+): void;
 
 /**
  * Set an attribute on an element
@@ -17,11 +40,21 @@ export function setAttribute(element: Element, name: string, value?: unknown): v
  * _(Or remove it, if value is `null` or `undefined`)_
  * @param element Element for attribute
  * @param attribute Attribute to set
+ * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
  */
-export function setAttribute(element: Element, attribute: Attr | Attribute): void;
+export function setAttribute(
+	element: Element,
+	attribute: Attr | Attribute,
+	dispatch?: boolean,
+): void;
 
-export function setAttribute(element: Element, first: unknown, second?: unknown): void {
-	updateValue(element, first, second);
+export function setAttribute(
+	element: Element,
+	first: unknown,
+	second?: unknown,
+	third?: unknown,
+): void {
+	setElementValue(element, first, second, third, updateAttribute);
 }
 
 /**
@@ -30,8 +63,13 @@ export function setAttribute(element: Element, first: unknown, second?: unknown)
  * _(Or remove them, if their value is `null` or `undefined`)_
  * @param element Element for attributes
  * @param attributes Attributes to set
+ * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_
  */
-export function setAttributes(element: Element, attributes: Array<Attr | Attribute>): void;
+export function setAttributes(
+	element: Element,
+	attributes: Array<Attr | Attribute>,
+	dispatch?: boolean,
+): void;
 
 /**
  * Set one or more attributes on an element
@@ -39,60 +77,18 @@ export function setAttributes(element: Element, attributes: Array<Attr | Attribu
  * _(Or remove them, if their value is `null` or `undefined`)_
  * @param element Element for attributes
  * @param attributes Attributes to set
+ * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_
  */
-export function setAttributes(element: Element, attributes: Record<string, unknown>): void;
-
 export function setAttributes(
 	element: Element,
-	attributes: Attribute[] | Record<string, unknown>,
-): void {
-	updateValues(element, attributes);
-}
-
-/**
- * Set a property on an element
- *
- * _(Or remove it, if value is not an empty string or does not match the name)_
- * @param element Element for property
- * @param name Property name
- * @param value Property value
- */
-export function setProperty(element: Element, name: string, value: boolean | string): void;
-
-/**
- * Set a property on an element
- *
- * _(Or remove it, if value is not an empty string or does not match the name)_
- * @param element Element for property
- * @param property Property to set
- */
-export function setProperty(element: Element, property: Property): void;
-
-export function setProperty(element: Element, first: unknown, second?: unknown): void {
-	updateValue(element, first, second);
-}
+	attributes: Record<string, unknown>,
+	dispatch?: boolean,
+): void;
 
-/**
- * Set one or more properties on an element
- *
- * _(Or remove them, if their value is not an empty string or does not match the name)_
- * @param element Element for properties
- * @param properties Properties to set
- */
-export function setProperties(element: Element, properties: Property[]): void;
-
-/**
- * Set one or more properties on an element
- *
- * _(Or remove them, if their value is not an empty string or does not match the name)_
- * @param element Element for properties
- * @param properties Properties to set
- */
-export function setProperties(element: Element, properties: Record<string, unknown>): void;
-
-export function setProperties(
+export function setAttributes(
 	element: Element,
-	properties: Property[] | Record<string, unknown>,
+	attributes: Attribute[] | Record<string, unknown>,
+	dispatch?: boolean,
 ): void {
-	updateValues(element, properties);
+	setElementValues(element, attributes, null, dispatch, updateAttribute);
 }

package/src/data.ts

@@ -81,7 +81,7 @@ export function setData(element: Element, data: PlainObject): void;
 export function setData(element: Element, key: string, value: unknown): void;
 
 export function setData(element: Element, first: PlainObject | string, second?: unknown): void {
-	setElementValues(element, first, second, updateDataAttribute);
+	setElementValues(element, first, second, null, updateDataAttribute);
 }
 
 function updateDataAttribute(element: Element, key: string, value: unknown): void {
@@ -91,6 +91,7 @@ function updateDataAttribute(element: Element, key: string, value: unknown): voi
 		value,
 		element.setAttribute,
 		element.removeAttribute,
+		false,
 		true,
 	);
 }

package/src/event/delegation.ts

@@ -3,31 +3,17 @@ 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(
-	doc: DocumentWithListenerCounts,
-	type: string,
-	name: string,
-	passive: boolean,
-): void {
-	const count = `${name}${COUNT_SUFFIX}`;
-
-	if (doc[count] != null) {
-		(doc[count] as number) += 1;
-
+function addDelegatedHandler(doc: Document, type: string, name: string, passive: boolean): void {
+	if (DELEGATED.has(name)) {
 		return;
 	}
 
-	doc[count] = 1;
+	DELEGATED.add(name);
 
 	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(
-	doc: DocumentWithListenerCounts,
-	type: string,
-	name: string,
-	passive: boolean,
-): void {
-	const count = `${name}${COUNT_SUFFIX}`;
-
-	(doc[count] as number) -= 1;
-
-	if ((doc[count] as number) < 1) {
-		doc[count] = undefined;
-
-		doc.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

@@ -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,30 +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) {
-		return 0;
-	}
-
-	if (origin.parentElement === target) {
-		return 1;
-	}
-
-	const children = [...(origin.parentElement?.children ?? [])];
-
-	if (children.includes(target)) {
-		return Math.abs(children.indexOf(origin) - children.indexOf(target));
-	}
-
-	const comparison = origin.compareDocumentPosition(target);
-	const beforeOrInside = Boolean(comparison & 2 || comparison & 8);
-
-	if (beforeOrInside || Boolean(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)_
  *
@@ -74,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
@@ -109,9 +81,9 @@ export function findRelatives(
 
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
-		const distance = getDistanceBetweenElements(origin, element);
+		const distance = getDistance(origin, element);
 
-		if (distance != null && distance > 0) {
+		if (distance > 0) {
 			if (minimum == null || distance < minimum) {
 				minimum = distance;
 			}
@@ -124,17 +96,43 @@ export function findRelatives(
 	}
 
 	return distances
-		.filter(found => found.distance === minimum && found.element !== origin)
+		.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 (index > -1) {
+	if (origin.parentElement === target || target.parentElement === origin) {
 		return 1;
 	}
 
+	if (origin.parentElement != null && origin.parentElement === target.parentElement) {
+		const children = [...origin.parentElement.children];
+
+		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;
@@ -146,11 +144,11 @@ function traverse(from: Element, to: Element): number | undefined {
 
 		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]);

package/src/index.ts

@@ -5,7 +5,7 @@ export {
 	isBooleanAttribute,
 	isEmptyNonBooleanAttribute,
 	isInvalidBooleanAttribute,
-} from './attribute';
+} from './attribute/index';
 export * from './data';
 export * from './event/index';
 export * from './find/index';

package/src/internal/attribute.ts

@@ -1,11 +1,10 @@
 import type {PlainObject} from '@oscarpalmer/atoms';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getString} from '@oscarpalmer/atoms/string';
-import type {Attribute, Property} from '../models';
-import {isHTMLOrSVGElement} from './is';
+import type {Attribute} from '../models';
+import {updateElementValue} from './element-value';
 
 function badAttributeHandler(name?: string, value?: string): boolean {
-	if (name == null || value == null) {
+	if (typeof name !== 'string' || name.trim().length === 0 || typeof value !== 'string') {
 		return true;
 	}
 
@@ -28,17 +27,19 @@ function badAttributeHandler(name?: string, value?: string): boolean {
 }
 
 function booleanAttributeHandler(name?: string, value?: string): boolean {
-	if (name == null || value == null) {
+	if (typeof name !== 'string' || name.trim().length === 0 || typeof value !== 'string') {
 		return true;
 	}
 
-	if (!booleanAttributesSet.has(name)) {
+	const normalizedName = name.toLowerCase();
+
+	if (!booleanAttributesSet.has(normalizedName)) {
 		return false;
 	}
 
-	const normalized = value.toLowerCase().trim();
+	const normalized = value.toLowerCase();
 
-	return !(normalized.length === 0 || normalized === name);
+	return !(normalized.length === 0 || normalized === normalizedName);
 }
 
 function decodeAttribute(value: string): string {
@@ -73,12 +74,12 @@ function handleAttribute(
 	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ''));
 }
 
-function isAttribute(value: unknown): value is Attr | Attribute {
+export function isAttribute(value: unknown): value is Attr | Attribute {
 	return (
 		value instanceof Attr ||
 		(isPlainObject(value) &&
 			typeof (value as PlainObject).name === 'string' &&
-			typeof (value as PlainObject).value === 'string')
+			'value' in (value as PlainObject))
 	);
 }
 
@@ -117,67 +118,53 @@ export function _isInvalidBooleanAttribute(
 	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
 
-export function isProperty(value: unknown): value is Property {
-	return isPlainObject(value) && typeof (value as PlainObject).name === 'string';
-}
-
 function isValidSourceAttribute(name: string, value: string): boolean {
 	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
 }
 
-function updateAttribute(element: Element, name: string, value: unknown): void {
-	const isBoolean = booleanAttributesSet.has(name.toLowerCase());
-
-	if (isBoolean) {
-		updateProperty(element, name, value);
-	}
+export function updateAttribute(
+	element: Element,
+	name: string,
+	value: unknown,
+	dispatch?: unknown,
+): void {
+	const normalizedName = name.toLowerCase();
 
-	if (isBoolean ? value !== true : value == null) {
-		element.removeAttribute(name);
-	} else {
-		element.setAttribute(name, isBoolean ? '' : getString(value));
-	}
-}
+	const isBoolean = booleanAttributesSet.has(normalizedName);
 
-function updateProperty(element: Element, name: string, value: unknown): void {
-	const actual = name.toLowerCase();
+	const next = isBoolean
+		? value === true ||
+			(typeof value === 'string' && (value === '' || value.toLowerCase() === normalizedName))
+		: value == null
+			? ''
+			: value;
 
-	(element as unknown as PlainObject)[actual] =
-		value === '' || (typeof value === 'string' && value.toLowerCase() === actual) || value === true;
-}
-
-export function updateValue(element: Element, first: unknown, second: unknown): void {
-	if (!isHTMLOrSVGElement(element)) {
-		return;
+	if (name in element) {
+		updateProperty(element, normalizedName, next, dispatch);
 	}
 
-	if (isProperty(first)) {
-		updateAttribute(element, (first as Attribute).name, (first as Attribute).value);
-	} else if (typeof first === 'string') {
-		updateAttribute(element, first as string, second);
-	}
+	updateElementValue(
+		element,
+		name,
+		isBoolean ? (next ? '' : null) : value,
+		element.setAttribute,
+		element.removeAttribute,
+		isBoolean,
+		false,
+	);
 }
 
-export function updateValues(
-	element: Element,
-	values: Attribute<unknown>[] | Record<string, unknown>,
-): void {
-	if (!isHTMLOrSVGElement(element)) {
+function updateProperty(element: Element, name: string, value: unknown, dispatch?: unknown): void {
+	if (Object.is((element as unknown as PlainObject)[name], value)) {
 		return;
 	}
 
-	const isArray = Array.isArray(values);
-	const entries = Object.entries(values);
-	const {length} = entries;
+	(element as unknown as PlainObject)[name] = value;
 
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
+	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
 
-		if (isArray) {
-			updateAttribute(element, (entry[1] as Attribute).name, (entry[1] as Attribute).value);
-		} else {
-			updateAttribute(element, entry[0], entry[1]);
-		}
+	if (typeof event === 'string') {
+		element.dispatchEvent(new Event(event, {bubbles: true}));
 	}
 }
 
@@ -201,6 +188,8 @@ const EXPRESSION_URI_VALUE =
 // oxlint-disable-next-line no-control-regex
 const EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 
+//
+
 /**
  * List of boolean attributes
  */
@@ -233,6 +222,13 @@ export const booleanAttributes: readonly string[] = Object.freeze([
 
 const booleanAttributesSet = new Set(booleanAttributes);
 
+const elementEvents: Record<string, Record<string, string>> = {
+	DETAILS: {open: 'toggle'},
+	INPUT: {checked: 'change', value: 'input'},
+	SELECT: {value: 'change'},
+	TEXTAREA: {value: 'input'},
+};
+
 const formElement = document.createElement('form');
 
 let textArea: HTMLTextAreaElement;