@oscarpalmer/toretto 0.30.0 → 0.31.0

package/package.json

@@ -11,8 +11,8 @@
 		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
 		"jsdom": "^27.3",
-		"oxfmt": "^0.18",
-		"oxlint": "^1.33",
+		"oxfmt": "^0.19",
+		"oxlint": "^1.34",
 		"rolldown": "1.0.0-beta.55",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
@@ -46,8 +46,8 @@
 			"default": "./dist/focusable.js"
 		},
 		"./html": {
-			"types": "./types/html.d.ts",
-			"default": "./dist/html.js"
+			"types": "./types/html/index.d.ts",
+			"default": "./dist/html/index.js"
 		},
 		"./is": {
 			"types": "./types/is.d.ts",
@@ -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.0"
+	"version": "0.31.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

@@ -14,22 +14,22 @@ export type EventTargetWithListeners = EventTarget &
 	}>;
 
 function addDelegatedHandler(
-	document: DocumentWithListenerCounts,
+	doc: DocumentWithListenerCounts,
 	type: string,
 	name: string,
 	passive: boolean,
 ): void {
 	const count = `${name}${COUNT_SUFFIX}`;
 
-	if (document[count] != null) {
-		(document[count] as number) += 1;
+	if (doc[count] != null) {
+		(doc[count] as number) += 1;
 
 		return;
 	}
 
-	document[count] = 1;
+	doc[count] = 1;
 
-	document.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, {
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, {
 		passive,
 	});
 }
@@ -103,19 +103,19 @@ export function getDelegatedName(
 }
 
 function removeDelegatedHandler(
-	document: DocumentWithListenerCounts,
+	doc: DocumentWithListenerCounts,
 	type: string,
 	name: string,
 	passive: boolean,
 ): void {
 	const count = `${name}${COUNT_SUFFIX}`;
 
-	(document[count] as number) -= 1;
+	(doc[count] as number) -= 1;
 
-	if ((document[count] as number) < 1) {
-		document[count] = undefined;
+	if ((doc[count] as number) < 1) {
+		doc[count] = undefined;
 
-		document.removeEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE);
+		doc.removeEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE);
 	}
 }
 

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);

package/src/find/relative.ts

@@ -3,20 +3,24 @@
  * - If the distance cannot be calculated, `-1` is returned
  */
 function getDistanceBetweenElements(origin: Element, target: Element): number | undefined {
-	if (origin === target || origin.parentElement === target) {
+	if (origin === target) {
 		return 0;
 	}
 
-	const comparison = origin.compareDocumentPosition(target);
+	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 beforeOrInside = !!(comparison & 2 || comparison & 8);
+	const comparison = origin.compareDocumentPosition(target);
+	const beforeOrInside = Boolean(comparison & 2 || comparison & 8);
 
-	if (beforeOrInside || !!(comparison & 4 || comparison & 16)) {
+	if (beforeOrInside || Boolean(comparison & 4 || comparison & 16)) {
 		return traverse(beforeOrInside ? origin : target, beforeOrInside ? target : origin) ?? -1;
 	}
 }
@@ -86,10 +90,6 @@ export function findRelatives(
 		return [];
 	}
 
-	if (origin.matches(selector)) {
-		return [origin];
-	}
-
 	const elements = [
 		...(context instanceof Document || context instanceof Element
 			? context
@@ -99,12 +99,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 +109,9 @@ export function findRelatives(
 
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
-		const distance = getDistanceBetweenElements(origin, element) ?? -1;
+		const distance = getDistanceBetweenElements(origin, element);
 
-		if (distance > -1) {
+		if (distance != null && distance > 0) {
 			if (minimum == null || distance < minimum) {
 				minimum = distance;
 			}
@@ -127,16 +123,16 @@ export function findRelatives(
 		}
 	}
 
-	return minimum == null
-		? []
-		: distances.filter(found => found.distance === minimum).map(found => found.element);
+	return distances
+		.filter(found => found.distance === minimum && found.element !== origin)
+		.map(found => found.element);
 }
 
 function traverse(from: Element, to: Element): number | undefined {
 	let index = [...to.children].indexOf(from);
 
 	if (index > -1) {
-		return index + 1;
+		return 1;
 	}
 
 	let current = from;
@@ -148,7 +144,7 @@ function traverse(from: Element, to: Element): number | undefined {
 			return distance + 1;
 		}
 
-		const children = [...(parent.children ?? [])];
+		const children = [...parent.children];
 
 		if (children.includes(to)) {
 			return distance + Math.abs(children.indexOf(current) - children.indexOf(to));
@@ -157,9 +153,9 @@ function traverse(from: Element, to: Element): number | undefined {
 		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> = {};

package/src/html/sanitize.ts

@@ -1,27 +1,20 @@
+import {setAttribute} from '../attribute/set';
 import {
-	isBadAttribute,
-	isEmptyNonBooleanAttribute,
-	isInvalidBooleanAttribute,
+	_isBadAttribute,
+	_isEmptyNonBooleanAttribute,
+	_isInvalidBooleanAttribute,
 } from '../internal/attribute';
 
-function handleElement(element: Element, depth: number): boolean {
-	if (isClobbered(element)) {
-		element.remove();
-
-		return true;
-	}
-
+function handleElement(element: Element, depth: number): void {
 	if (depth === 0) {
-		const scripts = element.querySelectorAll('script');
+		const removable = element.querySelectorAll(REMOVE_SELECTOR);
 
-		for (const script of scripts) {
-			script.remove();
+		for (const item of removable) {
+			item.remove();
 		}
 	}
 
 	sanitizeAttributes(element, [...element.attributes]);
-
-	return false;
 }
 
 /**
@@ -29,47 +22,75 @@ function handleElement(element: Element, depth: number): boolean {
  *
  * Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
  */
-function isClobbered(element: Element): boolean {
+function isClobbered(value: unknown): boolean {
 	return (
-		element instanceof HTMLFormElement &&
-		(typeof element.nodeName !== 'string' ||
-			typeof element.textContent !== 'string' ||
-			typeof element.removeChild !== 'function' ||
-			!(element.attributes instanceof NamedNodeMap) ||
-			typeof element.removeAttribute !== 'function' ||
-			typeof element.setAttribute !== 'function' ||
-			typeof element.namespaceURI !== 'string' ||
-			typeof element.insertBefore !== 'function' ||
-			typeof element.hasChildNodes !== 'function')
+		value instanceof HTMLFormElement &&
+		(typeof value.nodeName !== 'string' ||
+			typeof value.textContent !== 'string' ||
+			typeof value.removeChild !== 'function' ||
+			!(value.attributes instanceof NamedNodeMap) ||
+			typeof value.removeAttribute !== 'function' ||
+			typeof value.setAttribute !== 'function' ||
+			typeof value.namespaceURI !== 'string' ||
+			typeof value.insertBefore !== 'function' ||
+			typeof value.hasChildNodes !== 'function')
 	);
 }
 
+function removeNode(node: Node): void {
+	if (typeof (node as ChildNode).remove === 'function') {
+		(node as ChildNode).remove();
+	}
+}
+
 export function sanitizeAttributes(element: Element, attributes: Attr[]): void {
 	const {length} = attributes;
 
 	for (let index = 0; index < length; index += 1) {
 		const {name, value} = attributes[index];
 
-		if (isBadAttribute(name, value, false) || isEmptyNonBooleanAttribute(name, value, false)) {
+		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) {
 			element.removeAttribute(name);
-		} else if (isInvalidBooleanAttribute(name, value, false)) {
-			element.setAttribute(name, '');
+		} else if (_isInvalidBooleanAttribute(name, value, false)) {
+			setAttribute(element, name, true);
 		}
 	}
 }
 
 export function sanitizeNodes(nodes: Node[], depth: number): Node[] {
 	const actual = nodes.filter(node => node instanceof Node);
+
 	let {length} = nodes;
 
 	for (let index = 0; index < length; index += 1) {
 		const node = actual[index];
 
-		if (node instanceof Element && handleElement(node, depth)) {
+		let remove = isClobbered(node);
+
+		if (!remove) {
+			switch (node.nodeType) {
+				case Node.ELEMENT_NODE:
+					handleElement(node as Element, depth);
+					break;
+
+				case Node.COMMENT_NODE:
+					remove = COMMENT_HARMFUL.test((node as Comment).data);
+					break;
+
+				case Node.DOCUMENT_TYPE_NODE:
+				case Node.PROCESSING_INSTRUCTION_NODE:
+					remove = true;
+					break;
+			}
+		}
+
+		if (remove) {
+			removeNode(node);
+
 			actual.splice(index, 1);
 
-			length -= 1;
 			index -= 1;
+			length -= 1;
 
 			continue;
 		}
@@ -81,3 +102,9 @@ export function sanitizeNodes(nodes: Node[], depth: number): Node[] {
 
 	return nodes;
 }
+
+//
+
+const COMMENT_HARMFUL = /<[/\w]/g;
+
+const REMOVE_SELECTOR = 'script, toretto-temporary';