Add createTrustedHTMLTemplate()

Author: shgysk8zer0

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.2.23] - 2025-04-08
+
+### Added
+- Add `createTrustedHTMLTemplate()` to create trusted HTML generating tagged templates
+
 ## [v0.2.22] - 2024-12-25
 
 ### Changed

core.js

@@ -15,7 +15,7 @@ export {
 export {
 	text, createStyleSheet, createCSSParser, css, lightCSS, darkCSS ,
 	styleSheetToFile, styleSheetToLink, createHTMLParser, html, doc,
-	htmlUnsafe, docUnsafe, htmlToFile, xml, svg, json, math, url,
+	htmlUnsafe, docUnsafe, htmlToFile, createTrustedHTMLTemplate, xml, svg, json, math, url,
 } from './parsers.js';
 
 export {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/core",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "A fast, secure, modern, light-weight, and simple JS library for creating web components and more!",
   "keywords": [
     "aegis",

package.json

@@ -3,7 +3,7 @@ export {
 	createStyleSheet, createCSSParser, css, lightCSS,
 	darkCSS, styleSheetToFile, styleSheetToLink,
 } from './parsers/css.js';
-export { createHTMLParser, html, doc, htmlUnsafe, docUnsafe, htmlToFile } from './parsers/html.js';
+export { createHTMLParser, html, doc, htmlUnsafe, docUnsafe, htmlToFile, createTrustedHTMLTemplate } from './parsers/html.js';
 export { xml } from './parsers/xml.js';
 export { svg } from './parsers/svg.js';
 export { json } from './parsers/json.js';

parsers.js

@@ -2,6 +2,7 @@ import { stringify } from '../stringify.js';
 import { sanitizer as sanitizerConfig } from '@aegisjsproject/sanitizer/config/base.js';
 import { getRegisteredComponentTags } from '../componentRegistry.js';
 import { createHTMLParser, doc } from '@aegisjsproject/parsers/html.js';
+import { isTrustPolicy } from '../trust.js';
 
 const sanitizer = Object.freeze({
 	...sanitizerConfig,
@@ -15,6 +16,14 @@ const sanitizer = Object.freeze({
 
 export const html = createHTMLParser(sanitizer, { mapper: stringify });
 
+export function createTrustedHTMLTemplate(policy) {
+	if (isTrustPolicy(policy)) {
+		return (...args) => policy.createHTML(String.raw.apply(null, args));
+	} else {
+		return String.raw;
+	}
+}
+
 export function htmlUnsafe(strings, ...values) {
 	const html = String.raw(strings, ...values.map(stringify));
 	const frag = document.createDocumentFragment();

parsers/html.js

@@ -1,6 +1,6 @@
 import {
 	html, css, replaceStyles, getUniqueSelector, createComponent, closeRegistration,
-	data, attr, policy,
+	data, attr, policy, createTrustedHTMLTemplate,
 } from '@aegisjsproject/core';
 
 import { FUNCS, observeEvents, on, registerEventAttribute } from '@aegisjsproject/callback-registry';
@@ -12,6 +12,8 @@ import { manageState, stateStyle, stateKey, observeDOMState } from '@aegisjsproj
 import * as bootstrap from '@aegisjsproject/styles/palette/bootstrap.js';
 import './dad-joke.js';
 
+const trustedHTML = createTrustedHTMLTemplate(policy);
+
 const controller = new AbortController();
 const imgController = new AbortController();
 const [bg, setBg] = manageState('bg', '#232323');
@@ -106,7 +108,9 @@ try {
 	}, { once: true, signal: imgController.signal })} />
 	</div>
 	<div id="help" popover="auto">Should be shown on button scroll</div>
-	<footer id="footer">
+	`);
+
+	document.body.insertAdjacentHTML('beforeend', trustedHTML`<footer id="footer">
 		<div>
 			<template shadowrootmode="closed">
 				<p part="content"><slot name="content">No Content</p>

test/index.js

@@ -176,10 +176,8 @@ export function createPolicy(name, {
 
 export function createSanitizerPolicy(name = 'aegis#html') {
 	return createPolicy(name, {
-		createHTML(input, sanitizer) {
-			const el = document.createElement('div');
-			el.setHTML(input, { sanitizer });
-			return el.innerHTML;
+		createHTML(input, config) {
+			return Document.parseHTML(input, config).body.innerHTML;
 		}
 	});
 }