@oscarpalmer/toretto 0.27.0 → 0.29.0

package/src/html.ts

@@ -1,9 +1,5 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {
-	getSanitizeOptions,
-	type SanitizeOptions,
-	sanitizeNodes,
-} from './internal/sanitize';
+import {sanitizeNodes} from './internal/sanitize';
 
 //
 
@@ -41,72 +37,72 @@ type HtmlOptions = {
 	 * Ignore caching the template element for the HTML string? _(defaults to `false`)_
 	 */
 	ignoreCache?: boolean;
-} & SanitizeOptions;
+};
 
 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]);
 
-	return template;
+	return html.body.innerHTML;
 }
 
-function getHtml(
+function createTemplate(
 	value: string | HTMLTemplateElement,
 	options: Options,
-): Node[] {
-	if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
-		return [];
-	}
+): 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.ignoreCache) {
+		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.ignoreCache = typeof options.ignoreCache === 'boolean' ? options.ignoreCache : false;
 
 	return options as Options;
 }
 
+function getParser(): DOMParser {
+	parser ??= new DOMParser();
+
+	return parser;
+}
+
 function getTemplate(
-	value: string,
-	ignore: boolean,
+	value: string | HTMLTemplateElement,
+	options: Options,
 ): HTMLTemplateElement | undefined {
+	if (value instanceof HTMLTemplateElement) {
+		return createTemplate(value, options);
+	}
+
 	if (typeof value !== 'string' || value.trim().length === 0) {
 		return;
 	}
@@ -117,23 +113,15 @@ function getTemplate(
 		return template;
 	}
 
-	const element = EXPRESSION_ID.test(value)
-		? document.querySelector(`#${value}`)
-		: null;
+	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));
+const html = ((value: string | HTMLTemplateElement, options?: Options): Node[] => {
+	return getNodes(value, getOptions(options));
 }) as Html;
 
 html.clear = (): void => {
@@ -167,20 +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]);
 }
 
 //
 
 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/internal/attribute.ts

@@ -28,10 +28,7 @@ export function isBadAttribute(attribute: Attr | Attribute): boolean;
  */
 export function isBadAttribute(name: string, value: string): boolean;
 
-export function isBadAttribute(
-	first: string | Attr | Attribute,
-	second?: string,
-): boolean {
+export function isBadAttribute(first: string | Attr | Attribute, second?: string): boolean {
 	return isValidAttribute(
 		attribute =>
 			attribute == null ||
@@ -59,9 +56,7 @@ export function isBooleanAttribute(name: string): boolean;
 
 export function isBooleanAttribute(value: string | Attr | Attribute): boolean {
 	return isValidAttribute(
-		attribute =>
-			attribute != null &&
-			booleanAttributes.includes(attribute.name.toLowerCase()),
+		attribute => attribute != null && booleanAttributes.includes(attribute.name.toLowerCase()),
 		value,
 		'',
 	);
@@ -72,9 +67,7 @@ export function isBooleanAttribute(value: string | Attr | Attribute): boolean {
  * @param attribute Attribute to check
  * @returns `true` if attribute is empty and not a boolean attribute
  */
-export function isEmptyNonBooleanAttribute(
-	attribute: Attr | Attribute,
-): boolean;
+export function isEmptyNonBooleanAttribute(attribute: Attr | Attribute): boolean;
 
 /**
  * Is the attribute empty and not a boolean attribute?
@@ -82,10 +75,7 @@ export function isEmptyNonBooleanAttribute(
  * @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(name: string, value: string): boolean;
 
 export function isEmptyNonBooleanAttribute(
 	first: string | Attr | Attribute,
@@ -144,9 +134,7 @@ export function isInvalidBooleanAttribute(
 }
 
 export function isProperty(value: unknown): value is Property {
-	return (
-		isPlainObject(value) && typeof (value as PlainObject).name === 'string'
-	);
+	return isPlainObject(value) && typeof (value as PlainObject).name === 'string';
 }
 
 function isValidAttribute(
@@ -165,11 +153,7 @@ function isValidAttribute(
 	return callback(attribute);
 }
 
-function updateAttribute(
-	element: HTMLOrSVGElement,
-	name: string,
-	value: unknown,
-): void {
+function updateAttribute(element: HTMLOrSVGElement, name: string, value: unknown): void {
 	const isBoolean = booleanAttributes.includes(name.toLowerCase());
 
 	if (isBoolean) {
@@ -183,34 +167,20 @@ function updateAttribute(
 	}
 }
 
-function updateProperty(
-	element: HTMLOrSVGElement,
-	name: string,
-	value: unknown,
-): void {
+function updateProperty(element: HTMLOrSVGElement, name: string, value: unknown): void {
 	const actual = name.toLowerCase();
 
 	(element as unknown as PlainObject)[actual] =
-		value === '' ||
-		(typeof value === 'string' && value.toLowerCase() === actual) ||
-		value === true;
+		value === '' || (typeof value === 'string' && value.toLowerCase() === actual) || value === true;
 }
 
-export function updateValue(
-	element: HTMLOrSVGElement,
-	first: unknown,
-	second: unknown,
-): void {
+export function updateValue(element: HTMLOrSVGElement, first: unknown, second: unknown): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
 	if (isProperty(first)) {
-		updateAttribute(
-			element,
-			(first as Attribute).name,
-			(first as Attribute).value,
-		);
+		updateAttribute(element, (first as Attribute).name, (first as Attribute).value);
 	} else if (typeof first === 'string') {
 		updateAttribute(element, first as string, second);
 	}
@@ -232,11 +202,7 @@ export function updateValues(
 		const entry = entries[index];
 
 		if (isArray) {
-			updateAttribute(
-				element,
-				(entry[1] as Attribute).name,
-				(entry[1] as Attribute).value,
-			);
+			updateAttribute(element, (entry[1] as Attribute).name, (entry[1] as Attribute).value);
 		} else {
 			updateAttribute(element, entry[0], entry[1]);
 		}

package/src/internal/element-value.ts

@@ -27,7 +27,6 @@ export function setElementValues(
 	}
 }
 
-// biome-ignore lint/nursery/useMaxParams: Internal function, so it's fine
 export function updateElementValue(
 	element: HTMLOrSVGElement,
 	key: string,

package/src/internal/get-value.ts

@@ -14,9 +14,7 @@ export function getAttributeValue(
 	const attribute = element.attributes[normalized as keyof NamedNodeMap];
 	const value = attribute instanceof Attr ? attribute.value : undefined;
 
-	return EXPRESSION_DATA_PREFIX.test(normalized) &&
-		typeof value === 'string' &&
-		parseValue
+	return EXPRESSION_DATA_PREFIX.test(normalized) && typeof value === 'string' && parseValue
 		? (parse(value) ?? value)
 		: value;
 }
@@ -28,9 +26,7 @@ export function getStyleValue(
 ): string | undefined {
 	const name = camelCase(property);
 
-	return computed
-		? getComputedStyle(element)[name as never]
-		: element.style[name as never];
+	return computed ? getComputedStyle(element)[name as never] : element.style[name as never];
 }
 
 export const EXPRESSION_DATA_PREFIX = /^data-/i;

package/src/internal/sanitize.ts

@@ -1,41 +1,6 @@
-import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {
-	isBadAttribute,
-	isEmptyNonBooleanAttribute,
-	isInvalidBooleanAttribute,
-} from './attribute';
+import {isBadAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute} from './attribute';
 
-//
-
-type Options = Required<SanitizeOptions>;
-
-export type SanitizeOptions = {
-	/**
-	 * Sanitize boolean attributes? _(Defaults to `true`)_
-	 *
-	 * E.g. `checked="abc"` => `checked=""`
-	 */
-	sanitizeBooleanAttributes?: boolean;
-};
-
-//
-
-export function getSanitizeOptions(input?: SanitizeOptions): Options {
-	const options = isPlainObject(input) ? input : {};
-
-	options.sanitizeBooleanAttributes =
-		typeof options.sanitizeBooleanAttributes === 'boolean'
-			? options.sanitizeBooleanAttributes
-			: true;
-
-	return options as Options;
-}
-
-export function sanitizeAttributes(
-	element: Element,
-	attributes: Attr[],
-	options: Options,
-): void {
+export function sanitizeAttributes(element: Element, attributes: Attr[]): void {
 	const {length} = attributes;
 
 	for (let index = 0; index < length; index += 1) {
@@ -43,16 +8,13 @@ export function sanitizeAttributes(
 
 		if (isBadAttribute(attribute) || isEmptyNonBooleanAttribute(attribute)) {
 			element.removeAttribute(attribute.name);
-		} else if (
-			options.sanitizeBooleanAttributes &&
-			isInvalidBooleanAttribute(attribute)
-		) {
+		} else if (isInvalidBooleanAttribute(attribute)) {
 			element.setAttribute(attribute.name, '');
 		}
 	}
 }
 
-export function sanitizeNodes(nodes: Node[], options: Options): Node[] {
+export function sanitizeNodes(nodes: Node[]): Node[] {
 	const actual = nodes.filter(node => node instanceof Node);
 	const {length} = nodes;
 
@@ -66,11 +28,11 @@ export function sanitizeNodes(nodes: Node[], options: Options): Node[] {
 				script.remove();
 			}
 
-			sanitizeAttributes(node, [...node.attributes], options);
+			sanitizeAttributes(node, [...node.attributes]);
 		}
 
 		if (node.hasChildNodes()) {
-			sanitizeNodes([...node.childNodes], options);
+			sanitizeNodes([...node.childNodes]);
 		}
 	}
 

package/src/is.ts

@@ -48,4 +48,4 @@ const CHILD_NODE_TYPES: Set<number> = new Set([
 
 //
 
-export {isEventTarget, isHTMLOrSVGElement} from './internal/is'
+export {isEventTarget, isHTMLOrSVGElement} from './internal/is';

package/src/style.ts

@@ -57,11 +57,7 @@ export function getStyles<Property extends keyof CSSStyleDeclaration>(
 		const property = properties[index];
 
 		if (typeof property === 'string') {
-			styles[property] = getStyleValue(
-				element,
-				property,
-				computed === true,
-			) as never;
+			styles[property] = getStyleValue(element, property, computed === true) as never;
 		}
 	}
 
@@ -74,10 +70,7 @@ export function getStyles<Property extends keyof CSSStyleDeclaration>(
  * @param computed Get the computed text direction? _(defaults to `false`)_
  * @returns Text direction
  */
-export function getTextDirection(
-	element: HTMLOrSVGElement,
-	computed?: boolean,
-): TextDirection {
+export function getTextDirection(element: HTMLOrSVGElement, computed?: boolean): TextDirection {
 	if (!(element instanceof Element)) {
 		return undefined as never;
 	}
@@ -112,10 +105,7 @@ export function setStyle(
  * @param element Element to set the styles on
  * @param styles Styles to set
  */
-export function setStyles(
-	element: HTMLOrSVGElement,
-	styles: Partial<CSSStyleDeclaration>,
-): void {
+export function setStyles(element: HTMLOrSVGElement, styles: Partial<CSSStyleDeclaration>): void {
 	setElementValues(element, styles as never, null, updateStyleProperty);
 }
 
@@ -170,11 +160,7 @@ export function toggleStyles(
 	};
 }
 
-function updateStyleProperty(
-	element: HTMLOrSVGElement,
-	key: string,
-	value: unknown,
-): void {
+function updateStyleProperty(element: HTMLOrSVGElement, key: string, value: unknown): void {
 	updateElementValue(
 		element,
 		key,

package/src/touch.ts

@@ -36,16 +36,12 @@ function getSupport(): boolean {
 		return true;
 	}
 
-	if (
-		typeof navigator.maxTouchPoints === 'number' &&
-		navigator.maxTouchPoints > 0
-	) {
+	if (typeof navigator.maxTouchPoints === 'number' && navigator.maxTouchPoints > 0) {
 		return true;
 	}
 
 	if (
-		typeof (navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints ===
-			'number' &&
+		typeof (navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints === 'number' &&
 		(navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints > 0
 	) {
 		return true;

package/types/html.d.ts

@@ -1,4 +1,3 @@
-import { type SanitizeOptions } from './internal/sanitize';
 type Html = {
     /**
      * Create nodes from an HTML string or a template element
@@ -29,7 +28,7 @@ type HtmlOptions = {
      * Ignore caching the template element for the HTML string? _(defaults to `false`)_
      */
     ignoreCache?: boolean;
-} & SanitizeOptions;
+};
 declare const html: Html;
 /**
  * Sanitize one or more nodes, recursively
@@ -37,5 +36,5 @@ declare const html: Html;
  * @param options Sanitization options
  * @returns Sanitized nodes
  */
-export declare function sanitize(value: Node | Node[], options?: SanitizeOptions): Node[];
+export declare function sanitize(value: Node | Node[]): Node[];
 export { html };

package/types/internal/sanitize.d.ts

@@ -1,13 +1,2 @@
-type Options = Required<SanitizeOptions>;
-export type SanitizeOptions = {
-    /**
-     * Sanitize boolean attributes? _(Defaults to `true`)_
-     *
-     * E.g. `checked="abc"` => `checked=""`
-     */
-    sanitizeBooleanAttributes?: boolean;
-};
-export declare function getSanitizeOptions(input?: SanitizeOptions): Options;
-export declare function sanitizeAttributes(element: Element, attributes: Attr[], options: Options): void;
-export declare function sanitizeNodes(nodes: Node[], options: Options): Node[];
-export {};
+export declare function sanitizeAttributes(element: Element, attributes: Attr[]): void;
+export declare function sanitizeNodes(nodes: Node[]): Node[];