@oscarpalmer/toretto 0.28.0 → 0.29.0

package/dist/html.js

@@ -1,37 +1,42 @@
-import { getSanitizeOptions, sanitizeNodes } from "./internal/sanitize.js";
+import { sanitizeNodes } from "./internal/sanitize.js";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-function createTemplate(html$1, ignore) {
-	const template = document.createElement("template");
-	template.innerHTML = html$1;
-	if (!ignore) templates[html$1] = template;
+function createHtml(value) {
+	const html$1 = getParser().parseFromString(typeof value === "string" ? value : value.innerHTML, HTML_PARSE_TYPE);
+	html$1.body.normalize();
+	sanitizeNodes([html$1.body]);
+	return html$1.body.innerHTML;
+}
+function createTemplate(value, options) {
+	const template = document.createElement(TEMPLATE_TAG);
+	template.innerHTML = createHtml(value);
+	if (typeof value === "string" && !options.ignoreCache) templates[value] = template;
 	return template;
 }
-function getHtml(value, options) {
+function getNodes(value, options) {
 	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	const template = value instanceof HTMLTemplateElement ? value : getTemplate(value, options.ignoreCache);
-	if (template == null) return [];
-	const cloned = template.content.cloneNode(true);
-	const scripts = cloned.querySelectorAll("script");
-	for (const script of scripts) script.remove();
-	cloned.normalize();
-	return sanitizeNodes([...cloned.childNodes], options);
+	const template = getTemplate(value, options);
+	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
 }
 function getOptions(input) {
 	const options = isPlainObject(input) ? input : {};
 	options.ignoreCache = typeof options.ignoreCache === "boolean" ? options.ignoreCache : false;
-	options.sanitizeBooleanAttributes = typeof options.sanitizeBooleanAttributes === "boolean" ? options.sanitizeBooleanAttributes : true;
 	return options;
 }
-function getTemplate(value, ignore) {
+function getParser() {
+	parser ??= new DOMParser();
+	return parser;
+}
+function getTemplate(value, options) {
+	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
 	if (typeof value !== "string" || value.trim().length === 0) return;
 	let template = templates[value];
 	if (template != null) return template;
 	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;
 }
 var html = ((value, options) => {
-	return getHtml(value, getOptions(options));
+	return getNodes(value, getOptions(options));
 });
 html.clear = () => {
 	templates = {};
@@ -47,9 +52,12 @@ html.remove = (template) => {
 	}
 	templates = updated;
 };
-function sanitize(value, options) {
-	return sanitizeNodes(Array.isArray(value) ? value : [value], getSanitizeOptions(options));
+function sanitize(value) {
+	return sanitizeNodes(Array.isArray(value) ? value : [value]);
 }
 var EXPRESSION_ID = /^[a-z][\w-]*$/i;
+var HTML_PARSE_TYPE = "text/html";
+var TEMPLATE_TAG = "template";
+var parser;
 var templates = {};
 export { html, sanitize };

package/dist/internal/sanitize.js

@@ -1,19 +1,13 @@
 import { isBadAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute } from "./attribute.js";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-function getSanitizeOptions(input) {
-	const options = isPlainObject(input) ? input : {};
-	options.sanitizeBooleanAttributes = typeof options.sanitizeBooleanAttributes === "boolean" ? options.sanitizeBooleanAttributes : true;
-	return options;
-}
-function sanitizeAttributes(element, attributes, options) {
+function sanitizeAttributes(element, attributes) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const attribute = attributes[index];
 		if (isBadAttribute(attribute) || isEmptyNonBooleanAttribute(attribute)) element.removeAttribute(attribute.name);
-		else if (options.sanitizeBooleanAttributes && isInvalidBooleanAttribute(attribute)) element.setAttribute(attribute.name, "");
+		else if (isInvalidBooleanAttribute(attribute)) element.setAttribute(attribute.name, "");
 	}
 }
-function sanitizeNodes(nodes, options) {
+function sanitizeNodes(nodes) {
 	const actual = nodes.filter((node) => node instanceof Node);
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) {
@@ -21,10 +15,10 @@ function sanitizeNodes(nodes, options) {
 		if (node instanceof Element) {
 			const scripts = node.querySelectorAll("script");
 			for (const script of scripts) script.remove();
-			sanitizeAttributes(node, [...node.attributes], options);
+			sanitizeAttributes(node, [...node.attributes]);
 		}
-		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], options);
+		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes]);
 	}
 	return nodes;
 }
-export { getSanitizeOptions, sanitizeAttributes, sanitizeNodes };
+export { sanitizeAttributes, sanitizeNodes };

package/dist/toretto.full.js

@@ -1075,28 +1075,19 @@ const TABINDEX_BASE = 0;
 const TABINDEX_DEFAULT = -1;
 const TYPE_RADIO = 'radio';
 
-//
-function getSanitizeOptions(input) {
-    const options = isPlainObject(input) ? input : {};
-    options.sanitizeBooleanAttributes =
-        typeof options.sanitizeBooleanAttributes === 'boolean'
-            ? options.sanitizeBooleanAttributes
-            : true;
-    return options;
-}
-function sanitizeAttributes(element, attributes, options) {
+function sanitizeAttributes(element, attributes) {
     const { length } = attributes;
     for (let index = 0; index < length; index += 1) {
         const attribute = attributes[index];
         if (isBadAttribute(attribute) || isEmptyNonBooleanAttribute(attribute)) {
             element.removeAttribute(attribute.name);
         }
-        else if (options.sanitizeBooleanAttributes && isInvalidBooleanAttribute(attribute)) {
+        else if (isInvalidBooleanAttribute(attribute)) {
             element.setAttribute(attribute.name, '');
         }
     }
 }
-function sanitizeNodes(nodes, options) {
+function sanitizeNodes(nodes) {
     const actual = nodes.filter(node => node instanceof Node);
     const { length } = nodes;
     for (let index = 0; index < length; index += 1) {
@@ -1106,50 +1097,50 @@ function sanitizeNodes(nodes, options) {
             for (const script of scripts) {
                 script.remove();
             }
-            sanitizeAttributes(node, [...node.attributes], options);
+            sanitizeAttributes(node, [...node.attributes]);
         }
         if (node.hasChildNodes()) {
-            sanitizeNodes([...node.childNodes], options);
+            sanitizeNodes([...node.childNodes]);
         }
     }
     return nodes;
 }
 
 //
-function createTemplate(html, ignore) {
-    const template = document.createElement('template');
-    template.innerHTML = html;
-    if (!ignore) {
-        templates[html] = template;
+function createHtml(value) {
+    const html = getParser().parseFromString(typeof value === 'string' ? value : value.innerHTML, HTML_PARSE_TYPE);
+    html.body.normalize();
+    sanitizeNodes([html.body]);
+    return html.body.innerHTML;
+}
+function createTemplate(value, options) {
+    const template = document.createElement(TEMPLATE_TAG);
+    template.innerHTML = createHtml(value);
+    if (typeof value === 'string' && !options.ignoreCache) {
+        templates[value] = template;
     }
     return template;
 }
-function getHtml(value, options) {
+function getNodes(value, options) {
     if (typeof value !== 'string' && !(value instanceof HTMLTemplateElement)) {
         return [];
     }
-    const template = value instanceof HTMLTemplateElement ? value : getTemplate(value, options.ignoreCache);
-    if (template == null) {
-        return [];
-    }
-    const cloned = template.content.cloneNode(true);
-    const scripts = cloned.querySelectorAll('script');
-    for (const script of scripts) {
-        script.remove();
-    }
-    cloned.normalize();
-    return sanitizeNodes([...cloned.childNodes], options);
+    const template = getTemplate(value, options);
+    return template == null ? [] : [...template.content.cloneNode(true).childNodes];
 }
 function getOptions(input) {
     const options = isPlainObject(input) ? input : {};
     options.ignoreCache = typeof options.ignoreCache === 'boolean' ? options.ignoreCache : false;
-    options.sanitizeBooleanAttributes =
-        typeof options.sanitizeBooleanAttributes === 'boolean'
-            ? options.sanitizeBooleanAttributes
-            : true;
     return options;
 }
-function getTemplate(value, ignore) {
+function getParser() {
+    parser ??= new DOMParser();
+    return parser;
+}
+function getTemplate(value, options) {
+    if (value instanceof HTMLTemplateElement) {
+        return createTemplate(value, options);
+    }
     if (typeof value !== 'string' || value.trim().length === 0) {
         return;
     }
@@ -1158,11 +1149,11 @@ function getTemplate(value, ignore) {
         return template;
     }
     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, options) => {
-    return getHtml(value, getOptions(options));
+    return getNodes(value, getOptions(options));
 });
 html.clear = () => {
     templates = {};
@@ -1188,11 +1179,14 @@ html.remove = (template) => {
  * @param options Sanitization options
  * @returns Sanitized nodes
  */
-function sanitize(value, options) {
-    return sanitizeNodes(Array.isArray(value) ? value : [value], getSanitizeOptions(options));
+function sanitize(value) {
+    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;
 let templates = {};
 
 /**

package/package.json

@@ -93,5 +93,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.ts",
-	"version": "0.28.0"
+	"version": "0.29.0"
 }

package/src/html.ts

@@ -1,5 +1,5 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getSanitizeOptions, type SanitizeOptions, sanitizeNodes} from './internal/sanitize';
+import {sanitizeNodes} from './internal/sanitize';
 
 //
 
@@ -37,47 +37,48 @@ 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(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.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 {
@@ -85,15 +86,23 @@ function getOptions(input?: HtmlOptions): Options {
 
 	options.ignoreCache = typeof options.ignoreCache === 'boolean' ? options.ignoreCache : false;
 
-	options.sanitizeBooleanAttributes =
-		typeof options.sanitizeBooleanAttributes === 'boolean'
-			? options.sanitizeBooleanAttributes
-			: 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]);
 }
 
 //
 
 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/sanitize.ts

@@ -1,33 +1,6 @@
-import {isPlainObject} from '@oscarpalmer/atoms/is';
 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) {
@@ -35,13 +8,13 @@ export function sanitizeAttributes(element: Element, attributes: Attr[], options
 
 		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;
 
@@ -55,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/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[];