@oscarpalmer/toretto 0.28.0 → 0.30.0

package/package.json

@@ -8,17 +8,15 @@
 	},
 	"description": "A collection of badass DOM utilities.",
 	"devDependencies": {
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.3",
-		"@types/node": "^24.10",
+		"@types/node": "^25",
 		"@vitest/coverage-istanbul": "^4",
-		"jsdom": "^27.2",
-		"oxfmt": "^0.16",
-		"oxlint": "^1.31",
-		"rollup": "^4.53",
+		"jsdom": "^27.3",
+		"oxfmt": "^0.18",
+		"oxlint": "^1.33",
+		"rolldown": "1.0.0-beta.55",
 		"tslib": "^2.8",
 		"typescript": "^5.9",
-		"vite": "8.0.0-beta.0",
+		"vite": "8.0.0-beta.2",
 		"vitest": "^4"
 	},
 	"exports": {
@@ -74,6 +72,8 @@
 	],
 	"keywords": [
 		"dom",
+		"html",
+		"sanitization",
 		"utility"
 	],
 	"license": "MIT",
@@ -84,14 +84,14 @@
 		"url": "git+https://github.com/oscarpalmer/toretto.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rollup:build && npx tsc",
+		"build": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup:build": "npx rollup -c",
-		"rollup:watch": "npx rollup -c --watch",
+		"rolldown:build": "npx rolldown -c",
+		"rolldown:watch": "npx rolldown -c --watch",
 		"test": "npx vitest --coverage",
 		"watch": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.28.0"
+	"version": "0.30.0"
 }

package/src/attribute/index.ts

@@ -1,9 +1,90 @@
-export {
-	booleanAttributes,
-	isBadAttribute,
-	isBooleanAttribute,
-	isEmptyNonBooleanAttribute,
-	isInvalidBooleanAttribute,
+import {
+	isBadAttribute as internalIsBadAttribute,
+	isBooleanAttribute as _isBooleanAttribute,
+	isEmptyNonBooleanAttribute as _isEmptyNonBooleanAttribute,
+	isInvalidBooleanAttribute as _isInvalidBooleanAttribute,
 } from '../internal/attribute';
+import type {Attribute} from '../models';
+
+/**
+ * Is the attribute considered bad and potentially harmful?
+ * @param attribute Attribute to check
+ * @returns `true` if attribute is considered bad
+ */
+export function isBadAttribute(attribute: Attr | Attribute): boolean;
+
+/**
+ * Is the attribute considered bad and potentially harmful?
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns `true` if attribute is considered bad
+ */
+export function isBadAttribute(name: string, value: string): boolean;
+
+export function isBadAttribute(first: unknown, second?: unknown): boolean {
+	return internalIsBadAttribute(first, second, true);
+}
+
+/**
+ * Is the attribute a boolean attribute?
+ * @param name Attribute to check
+ * @returns `true` if attribute is a boolean attribute
+ */
+export function isBooleanAttribute(attribute: Attr | Attribute): boolean;
+
+/**
+ * Is the attribute a boolean attribute?
+ * @param name Attribute name
+ * @returns `true` if attribute is a boolean attribute
+ */
+export function isBooleanAttribute(name: string): boolean;
+
+export function isBooleanAttribute(first: unknown): boolean {
+	return _isBooleanAttribute(first, true);
+}
+
+/**
+ * Is the attribute empty and not a boolean attribute?
+ * @param attribute Attribute to check
+ * @returns `true` if attribute is empty and not a boolean attribute
+ */
+export function isEmptyNonBooleanAttribute(attribute: Attr | Attribute): boolean;
+
+/**
+ * Is the attribute empty and not a boolean attribute?
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns `true` if attribute is empty and not a boolean attribute
+ */
+export function isEmptyNonBooleanAttribute(name: string, value: string): boolean;
+
+export function isEmptyNonBooleanAttribute(first: unknown, second?: unknown): boolean {
+	return _isEmptyNonBooleanAttribute(first, second, true);
+}
+
+/**
+ * Is the attribute an invalid boolean attribute?
+ *
+ * _(I.e., its value is not empty or the same as its name)_
+ * @param attribute Attribute to check
+ * @returns `true` if attribute is an invalid boolean attribute
+ */
+export function isInvalidBooleanAttribute(attribute: Attr | Attribute): boolean;
+
+/**
+ * Is the attribute an invalid boolean attribute?
+ *
+ * _(I.e., its value is not empty or the same as its name)_
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns `true` if attribute is an invalid boolean attribute
+ */
+export function isInvalidBooleanAttribute(name: string, value: string): boolean;
+
+export function isInvalidBooleanAttribute(first: unknown, second?: unknown): boolean {
+	return _isInvalidBooleanAttribute(first, second, true);
+}
+
+export {booleanAttributes} from '../internal/attribute';
 export * from './get';
 export * from './set';

package/src/{html.ts → html/index.ts}

@@ -1,5 +1,5 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getSanitizeOptions, type SanitizeOptions, sanitizeNodes} from './internal/sanitize';
+import {sanitizeNodes} from './sanitize';
 
 //
 
@@ -34,66 +34,75 @@ type Html = {
 
 type HtmlOptions = {
 	/**
-	 * Ignore caching the template element for the HTML string? _(defaults to `false`)_
+	 * Cache template element for the HTML string? _(defaults to `true`)_
 	 */
-	ignoreCache?: boolean;
-} & SanitizeOptions;
+	cache?: boolean;
+};
 
 type Options = Required<HtmlOptions>;
 
 //
 
-function createTemplate(html: string, ignore: boolean): HTMLTemplateElement {
-	const template = document.createElement('template');
+function createHtml(value: string | HTMLTemplateElement): string {
+	const html = getParser().parseFromString(
+		typeof value === 'string' ? value : value.innerHTML,
+		HTML_PARSE_TYPE,
+	);
 
-	template.innerHTML = html;
+	html.body.normalize();
 
-	if (!ignore) {
-		templates[html] = template;
-	}
+	sanitizeNodes([html.body], 0);
 
-	return template;
+	return html.body.innerHTML;
 }
 
-function getHtml(value: string | HTMLTemplateElement, options: Options): Node[] {
-	if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
-		return [];
-	}
+function createTemplate(
+	value: string | HTMLTemplateElement,
+	options: Options,
+): HTMLTemplateElement {
+	const template = document.createElement(TEMPLATE_TAG);
 
-	const template =
-		value instanceof HTMLTemplateElement ? value : getTemplate(value, options.ignoreCache);
+	template.innerHTML = createHtml(value);
 
-	if (template == null) {
-		return [];
+	if (typeof value === 'string' && options.cache) {
+		templates[value] = template;
 	}
 
-	const cloned = template.content.cloneNode(true) as DocumentFragment;
-
-	const scripts = cloned.querySelectorAll('script');
+	return template;
+}
 
-	for (const script of scripts) {
-		script.remove();
+function getNodes(value: string | HTMLTemplateElement, options: Options): Node[] {
+	if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
+		return [];
 	}
 
-	cloned.normalize();
+	const template = getTemplate(value, options);
 
-	return sanitizeNodes([...cloned.childNodes], options);
+	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
 }
 
 function getOptions(input?: HtmlOptions): Options {
 	const options = isPlainObject(input) ? input : {};
 
-	options.ignoreCache = typeof options.ignoreCache === 'boolean' ? options.ignoreCache : false;
-
-	options.sanitizeBooleanAttributes =
-		typeof options.sanitizeBooleanAttributes === 'boolean'
-			? options.sanitizeBooleanAttributes
-			: true;
+	options.cache = typeof options.cache === 'boolean' ? options.cache : true;
 
 	return options as Options;
 }
 
-function getTemplate(value: string, ignore: boolean): HTMLTemplateElement | undefined {
+function getParser(): DOMParser {
+	parser ??= new DOMParser();
+
+	return parser;
+}
+
+function getTemplate(
+	value: string | HTMLTemplateElement,
+	options: Options,
+): HTMLTemplateElement | undefined {
+	if (value instanceof HTMLTemplateElement) {
+		return createTemplate(value, options);
+	}
+
 	if (typeof value !== 'string' || value.trim().length === 0) {
 		return;
 	}
@@ -106,13 +115,13 @@ function getTemplate(value: string, ignore: boolean): HTMLTemplateElement | unde
 
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
 
-	template = element instanceof HTMLTemplateElement ? element : createTemplate(value, ignore);
+	template = element instanceof HTMLTemplateElement ? element : createTemplate(value, options);
 
 	return template;
 }
 
 const html = ((value: string | HTMLTemplateElement, options?: Options): Node[] => {
-	return getHtml(value, getOptions(options));
+	return getNodes(value, getOptions(options));
 }) as Html;
 
 html.clear = (): void => {
@@ -146,14 +155,20 @@ html.remove = (template: string): void => {
  * @param options Sanitization options
  * @returns Sanitized nodes
  */
-export function sanitize(value: Node | Node[], options?: SanitizeOptions): Node[] {
-	return sanitizeNodes(Array.isArray(value) ? value : [value], getSanitizeOptions(options));
+export function sanitize(value: Node | Node[]): Node[] {
+	return sanitizeNodes(Array.isArray(value) ? value : [value], 0);
 }
 
 //
 
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 
+const HTML_PARSE_TYPE = 'text/html';
+
+const TEMPLATE_TAG = 'template';
+
+let parser: DOMParser;
+
 let templates: Record<string, HTMLTemplateElement> = {};
 
 //

package/src/html/sanitize.ts

@@ -0,0 +1,83 @@
+import {
+	isBadAttribute,
+	isEmptyNonBooleanAttribute,
+	isInvalidBooleanAttribute,
+} from '../internal/attribute';
+
+function handleElement(element: Element, depth: number): boolean {
+	if (isClobbered(element)) {
+		element.remove();
+
+		return true;
+	}
+
+	if (depth === 0) {
+		const scripts = element.querySelectorAll('script');
+
+		for (const script of scripts) {
+			script.remove();
+		}
+	}
+
+	sanitizeAttributes(element, [...element.attributes]);
+
+	return false;
+}
+
+/**
+ * Is the element clobbered?
+ *
+ * Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
+ */
+function isClobbered(element: Element): 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')
+	);
+}
+
+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)) {
+			element.removeAttribute(name);
+		} else if (isInvalidBooleanAttribute(name, value, false)) {
+			element.setAttribute(name, '');
+		}
+	}
+}
+
+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)) {
+			actual.splice(index, 1);
+
+			length -= 1;
+			index -= 1;
+
+			continue;
+		}
+
+		if (node.hasChildNodes()) {
+			sanitizeNodes([...node.childNodes], depth + 1);
+		}
+	}
+
+	return nodes;
+}

package/src/index.ts

@@ -1,11 +1,16 @@
 import supportsTouch from './touch';
 
-export * from './attribute';
+export {
+	isBadAttribute,
+	isBooleanAttribute,
+	isEmptyNonBooleanAttribute,
+	isInvalidBooleanAttribute,
+} from './attribute';
 export * from './data';
 export * from './event/index';
 export * from './find/index';
 export * from './focusable';
-export * from './html';
+export * from './html/index';
 export * from './is';
 export * from './models';
 export * from './style';

package/src/internal/attribute.ts

@@ -4,6 +4,75 @@ import {getString} from '@oscarpalmer/atoms/string';
 import type {Attribute, HTMLOrSVGElement, Property} from '../models';
 import {isHTMLOrSVGElement} from './is';
 
+function badAttributeHandler(name?: string, value?: string): boolean {
+	if (name == null || value == null) {
+		return true;
+	}
+
+	if (
+		(EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement)) ||
+		EXPRESSION_EVENT_NAME.test(name)
+	) {
+		return true;
+	}
+
+	if (
+		EXPRESSION_SKIP_NAME.test(name) ||
+		EXPRESSION_URI_VALUE.test(value) ||
+		isValidSourceAttribute(name, value)
+	) {
+		return false;
+	}
+
+	return EXPRESSION_DATA_OR_SCRIPT.test(value);
+}
+
+function booleanAttributeHandler(name?: string, value?: string): boolean {
+	if (name == null || value == null) {
+		return true;
+	}
+
+	if (!booleanAttributesSet.has(name)) {
+		return false;
+	}
+
+	const normalized = value.toLowerCase().trim();
+
+	return !(normalized.length === 0 || normalized === name);
+}
+
+function decodeAttribute(value: string): string {
+	textArea ??= document.createElement('textarea');
+
+	textArea.innerHTML = value;
+
+	return decodeURIComponent(textArea.value);
+}
+
+function handleAttribute(
+	callback: (name?: string, value?: string) => boolean,
+	decode: boolean,
+	first: unknown,
+	second?: unknown,
+): boolean {
+	let name: string | undefined;
+	let value: string | undefined;
+
+	if (isAttribute(first)) {
+		name = first.name;
+		value = String(first.value);
+	} else if (typeof first === 'string' && typeof second === 'string') {
+		name = first;
+		value = second;
+	}
+
+	if (decode && value != null) {
+		value = decodeAttribute(value);
+	}
+
+	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ''));
+}
+
 function isAttribute(value: unknown): value is Attr | Attribute {
 	return (
 		value instanceof Attr ||
@@ -13,148 +82,51 @@ function isAttribute(value: unknown): value is Attr | Attribute {
 	);
 }
 
-/**
- * Is the attribute considered bad and potentially harmful?
- * @param attribute Attribute to check
- * @returns `true` if attribute is considered bad
- */
-export function isBadAttribute(attribute: Attr | Attribute): boolean;
-
-/**
- * Is the attribute considered bad and potentially harmful?
- * @param name Attribute name
- * @param value Attribute value
- * @returns `true` if attribute is considered bad
- */
-export function isBadAttribute(name: string, value: string): boolean;
-
-export function isBadAttribute(first: string | Attr | Attribute, second?: string): boolean {
-	return isValidAttribute(
-		attribute =>
-			attribute == null ||
-			EXPRESSION_ON_PREFIX.test(attribute.name) ||
-			(EXPRESSION_SOURCE_PREFIX.test(attribute.name) &&
-				EXPRESSION_VALUE_PREFIX.test(String(attribute.value))),
-		first,
-		second,
-	);
+export function isBadAttribute(first: unknown, second: unknown, decode: boolean): boolean {
+	return handleAttribute(badAttributeHandler, decode, first, second);
 }
 
-/**
- * Is the attribute a boolean attribute?
- * @param name Attribute to check
- * @returns `true` if attribute is a boolean attribute
- */
-export function isBooleanAttribute(attribute: Attr | Attribute): boolean;
-
-/**
- * Is the attribute a boolean attribute?
- * @param name Attribute name
- * @returns `true` if attribute is a boolean attribute
- */
-export function isBooleanAttribute(name: string): boolean;
-
-export function isBooleanAttribute(value: string | Attr | Attribute): boolean {
-	return isValidAttribute(
-		attribute => attribute != null && booleanAttributes.includes(attribute.name.toLowerCase()),
-		value,
+export function isBooleanAttribute(first: unknown, decode: boolean): boolean {
+	return handleAttribute(
+		name => booleanAttributesSet.has(name?.toLowerCase() as string),
+		decode,
+		first,
 		'',
 	);
 }
 
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param attribute Attribute to check
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-export function isEmptyNonBooleanAttribute(attribute: Attr | Attribute): boolean;
-
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param name Attribute name
- * @param value Attribute value
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-export function isEmptyNonBooleanAttribute(name: string, value: string): boolean;
-
 export function isEmptyNonBooleanAttribute(
-	first: string | Attr | Attribute,
-	second?: string,
+	first: unknown,
+	second: unknown,
+	decode: boolean,
 ): boolean {
-	return isValidAttribute(
-		attribute =>
-			attribute != null &&
-			!booleanAttributes.includes(attribute.name) &&
-			String(attribute.value).trim().length === 0,
+	return handleAttribute(
+		(name, value) =>
+			name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0,
+		decode,
 		first,
 		second,
 	);
 }
 
-/**
- * Is the attribute an invalid boolean attribute?
- *
- * _(I.e., its value is not empty or the same as its name)_
- * @param attribute Attribute to check
- * @returns `true` if attribute is an invalid boolean attribute
- */
-export function isInvalidBooleanAttribute(attribute: Attr | Attribute): boolean;
-
-/**
- * Is the attribute an invalid boolean attribute?
- *
- * _(I.e., its value is not empty or the same as its name)_
- * @param name Attribute name
- * @param value Attribute value
- * @returns `true` if attribute is an invalid boolean attribute
- */
-export function isInvalidBooleanAttribute(name: string, value: string): boolean;
-
 export function isInvalidBooleanAttribute(
-	first: string | Attr | Attribute,
-	second?: string,
+	first: unknown,
+	second: unknown,
+	decode: boolean,
 ): boolean {
-	return isValidAttribute(
-		attribute => {
-			if (attribute == null) {
-				return true;
-			}
-
-			if (!booleanAttributes.includes(attribute.name)) {
-				return false;
-			}
-
-			const normalized = String(attribute.value).toLowerCase().trim();
-
-			return !(normalized.length === 0 || normalized === attribute.name);
-		},
-		first,
-		second,
-	);
+	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
 
 export function isProperty(value: unknown): value is Property {
 	return isPlainObject(value) && typeof (value as PlainObject).name === 'string';
 }
 
-function isValidAttribute(
-	callback: (attribute: Attr | Attribute | undefined) => boolean,
-	first: string | Attr | Attribute,
-	second?: string,
-): boolean {
-	let attribute: Attribute | undefined;
-
-	if (isAttribute(first)) {
-		attribute = first;
-	} else if (typeof first === 'string' && typeof second === 'string') {
-		attribute = {name: first, value: second};
-	}
-
-	return callback(attribute);
+function isValidSourceAttribute(name: string, value: string): boolean {
+	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
 }
 
 function updateAttribute(element: HTMLOrSVGElement, name: string, value: unknown): void {
-	const isBoolean = booleanAttributes.includes(name.toLowerCase());
+	const isBoolean = booleanAttributesSet.has(name.toLowerCase());
 
 	if (isBoolean) {
 		updateProperty(element, name, value);
@@ -211,11 +183,23 @@ export function updateValues(
 
 //
 
-const EXPRESSION_ON_PREFIX = /^on/i;
+const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
+
+const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
+
+const EXPRESSION_EVENT_NAME = /^on/i;
+
+const EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
+
+const EXPRESSION_SOURCE_NAME = /^src$/i;
 
-const EXPRESSION_SOURCE_PREFIX = /^(href|src|xlink:href)$/i;
+const EXPRESSION_SOURCE_VALUE = /^data:/i;
 
-const EXPRESSION_VALUE_PREFIX = /(data:text\/html|javascript:)/i;
+const EXPRESSION_URI_VALUE =
+	/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+
+// oxlint-disable-next-line no-control-regex
+const EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 
 /**
  * List of boolean attributes
@@ -246,3 +230,9 @@ export const booleanAttributes: readonly string[] = Object.freeze([
 	'reversed',
 	'selected',
 ]);
+
+const booleanAttributesSet = new Set(booleanAttributes);
+
+const formElement = document.createElement('form');
+
+let textArea: HTMLTextAreaElement;