@shgysk8zer0/polyfills 0.3.2 → 0.3.3

package/element.js

@@ -1,7 +1,6 @@
 import { aria } from './aom.js';
-import { overwriteMethod, polyfillGetterSetter } from './utils.js';
-import { SanitizerConfig as defaultConfig } from './assets/SanitizerConfigW3C.js';
-import { setHTML as safeSetHTML, convertToSanitizerConfig } from './assets/sanitizerUtils.js';
+import { polyfillGetterSetter } from './utils.js';
+import './sanitizer.js';
 
 function handlePopover({ currentTarget }) {
 	switch(currentTarget.popoverTargetAction) {
@@ -243,23 +242,6 @@ if (! (HTMLImageElement.prototype.decode instanceof Function)) {
 	};
 }
 
-if (! (Element.prototype.setHTML instanceof Function)) {
-	Element.prototype.setHTML = function setHTML(input, opts = defaultConfig) {
-		safeSetHTML(this, input, opts);
-	};
-} else {
-	overwriteMethod(Element.prototype, 'setHTML', function(orig) {
-		return function setHTML(input, opts = {}) {
-			if (! (opts.sanitizer instanceof Sanitizer)) {
-				const sanitizer = new Sanitizer(convertToSanitizerConfig(opts));
-				orig.call(this, input, { sanitizer });
-			} else {
-				orig.call(this, input, opts);
-			}
-		};
-	});
-}
-
 if (! HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
 	Object.defineProperty(HTMLTemplateElement.prototype, 'shadowRootMode', {
 		get: function() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",
@@ -38,6 +38,7 @@
     "fix:js": "eslint . --fix",
     "lint:js": "eslint .",
     "lint:html": "htmlhint \"**/*.html\"",
+    "build": "npm run build:js",
     "build:js": "rollup -c rollup.config.js",
     "create:lock": "npm i --package-lock-only --ignore-scripts --no-audit --no-fund",
     "version:bump": "npm run version:bump:patch",
@@ -70,8 +71,12 @@
   },
   "homepage": "https://github.com/shgysk8zer0/polyfills#readme",
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@shgysk8zer0/js-utils": "^1.0.1",
     "htmlhint": "^1.1.4",
     "http-server": "^14.1.1"
+  },
+  "dependencies": {
+    "@aegisjsproject/sanitizer": "^0.0.2"
   }
 }

package/rollup.config.js

@@ -1,8 +1,11 @@
 /* eslint-env node */
 import { getConfig } from '@shgysk8zer0/js-utils/rollup';
+import nodeResolve from '@rollup/plugin-node-resolve';
+
 
 export default getConfig('./all.js', {
 	sourcemap: true,
 	minify: true,
 	format: 'iife',
+	plugins: [nodeResolve()],
 });

package/sanitizer.js

@@ -0,0 +1 @@
+import '@aegisjsproject/sanitizer/sanitizer.js';

package/assets/Sanitizer.js

@@ -1,61 +0,0 @@
-/**
- * @copyright 2022-2023 Chris Zuber <admin@kernvalley.us>
- */
-import { nativeSupport, getSantizerUtils, sanitize, trustPolicies } from './sanitizerUtils.js';
-import { SanitizerConfig as defaultConfig } from './SanitizerConfigW3C.js';
-
-const protectedData = new WeakMap();
-
-/**
- * Need to create a policy for the Sanitizer API since
- * `trustedTypes.defaultPolicy.createHTML` will most likely use `new Sanitizer().sanitize()`
- * which would create infinite recursion.
- * @type {TrustedTypePolicy}
- */
-
-
-/**
- * @SEE https://wicg.github.io/sanitizer-api/
- * @SEE https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/Sanitizer
- * @TODO: Figure out how to handle `allowElements`, `allowAttributes`, and how each
- *        works with their `block*` and/or `drop*` counterparts.
- * @TODO: Handle `svg:*` and `mathml:*`
- *
- * @NOTE: The spec is still under development and is likely to change.
- * @NOTE: This is a very imperfect implementation and may not perform very well,
- *        as it may involve a lot of querying & modifying.
- */
-export class Sanitizer {
-	constructor({
-		allowElements, allowAttributes, blockElements, dropAttributes,
-		dropElements, allowComments = defaultConfig.allowComments,
-		allowCustomElements = defaultConfig.allowCustomElements,
-		allowUnknownMarkup = defaultConfig.allowUnknownMarkup,
-	} = Sanitizer.getDefaultConfiguration()) {
-		protectedData.set(this, {
-			allowElements, allowComments, allowAttributes, allowCustomElements,
-			blockElements, dropAttributes, dropElements, allowUnknownMarkup,
-		});
-	}
-
-	getConfiguration() {
-		return protectedData.get(this);
-	}
-
-	sanitize(input) {
-		return sanitize(input, this.getConfiguration());
-	}
-
-	sanitizeFor(tag, content) {
-		const el = document.createElement(tag);
-		el.setHTML(content, this.getConfiguration());
-		return el;
-	}
-
-	static getDefaultConfiguration() {
-		return defaultConfig;
-	}
-}
-
-const { setHTML, polyfill } = getSantizerUtils(Sanitizer, defaultConfig);
-export { nativeSupport, setHTML, polyfill, trustPolicies };

package/assets/SanitizerConfig.js

@@ -1,348 +0,0 @@
-/**
- * @copyright 2023 Chris Zuber <admin@kernvalley.us>
- */
-import { allowComments, blockElements, dropElements, allowUnknownMarkup } from './SanitizerConfigBase.js';
-import { events } from './attributes.js';
-export const allowAttributes = {
-	'abbr': ['*'],
-	// 'accept': ['*'],
-	// 'accept-charset': ['*'],
-	'accesskey': ['*'],
-	'action': ['form'],
-	// 'align': ['*'],
-	// 'alink': ['*'],
-	'allow': ['iframe'],
-	'allowfullscreen': ['iframe'],
-	'alt': ['img'],
-	// 'anchor': ['*'],
-	// 'archive': ['*'],
-	'as': ['link'],
-	'async': ['script'],
-	'autocapitalize': ['form', 'input', 'textarea'],
-	'autocomplete': ['input', 'select', 'textarea'],
-	'autocorrect': ['form', 'input', 'textarea'],
-	'autofocus': ['*'],
-	'autopictureinpicture': ['video'],
-	'autoplay': ['audio', 'video'],
-	// 'axis': ['*'],
-	// 'background': ['*'],
-	// 'behavior': ['*'],
-	// 'bgcolor': ['*'],
-	'border': ['*'],
-	// 'bordercolor': ['*'],
-	// 'capture': ['*'],
-	'cellpadding': ['*'],
-	'cellspacing': ['*'],
-	// 'challenge': ['*'],
-	// 'char': ['*'],
-	// 'charoff': ['*'],
-	// 'charset': ['*'],
-	'checked': ['input'],
-	'cite': ['blockquote'],
-	'class': ['*'],
-	// 'classid': ['*'],
-	// 'clear': ['*'],
-	// 'code': ['*'],
-	// 'codebase': ['*'],
-	// 'codetype': ['*'],
-	// 'color': ['*'],
-	'cols': ['*'],
-	'colspan': ['*'],
-	// 'compact': ['*'],
-	'content': ['meta'],
-	'contenteditable': ['*'],
-	'controls': ['audio', 'video'],
-	// 'controlslist': ['*'],
-	// 'conversiondestination': ['*'],
-	// 'coords': ['*'],
-	'crossorigin': ['script', 'link', 'img', 'audio', 'video'],
-	'csp': ['iframe'],
-	'data': ['*'],
-	'datetime': ['time'],
-	// 'declare': ['*'],
-	'decoding': ['img'],
-	'default': ['input'],
-	'defer': ['script'],
-	'dir': ['*'],
-	// 'direction': ['*'],
-	'dirname': ['*'],
-	'disabled': ['button', 'input', 'fieldset'],
-	'disablepictureinpicture': ['*'],
-	'disableremoteplayback': ['*'],
-	'download': ['a'],
-	'draggable': ['*'],
-	// 'elementtiming': ['*'],
-	'enctype': ['form'],
-	// 'end': ['*'],
-	'enterkeyhint': ['input', 'button'],
-	// 'event': ['*'],
-	// 'exportparts': ['*'],
-	// 'face': ['*'],
-	'for': ['label', 'output'],
-	// 'form': ['*'],
-	// 'formaction': ['*'],
-	// 'formenctype': ['*'],
-	// 'formmethod': ['*'],
-	// 'formnovalidate': ['*'],
-	// 'formtarget': ['*'],
-	// 'frame': ['*'],
-	'frameborder': ['iframe'],
-	// 'headers': ['*'],
-	'height': ['img', 'iframe', 'video'],
-	'hidden': ['*'],
-	// 'high': ['*'],
-	'href': ['a', 'link'],
-	'hreflang': ['*'],
-	// 'hreftranslate': ['*'],
-	// 'hspace': ['*'],
-	// 'http-equiv': ['*'],
-	'id': ['*'],
-	// 'imagesizes': ['*'],
-	// 'imagesrcset': ['*'],
-	'importance': ['*'],
-	// 'impressiondata': ['*'],
-	// 'impressionexpiry': ['*'],
-	'incremental': ['*'],
-	'inert': ['*'],
-	'inputmode': ['*'],
-	'integrity': ['link', 'script'],
-	'invisible': ['*'],
-	'is': ['*'],
-	// 'ismap': ['*'],
-	// 'keytype': ['*'],
-	// 'kind': ['*'],
-	'label': ['*'],
-	'lang': ['*'],
-	'language': ['*'],
-	// 'latencyhint': ['*'],
-	// 'leftmargin': ['*'],
-	'link': ['*'],
-	'list': ['input', 'textarea'],
-	'loading': ['img', 'iframe'],
-	// 'longdesc': ['*'],
-	// 'loop': ['*'],
-	// 'low': ['*'],
-	// 'lowsrc': ['*'],
-	// 'manifest': ['*'],
-	// 'marginheight': ['*'],
-	// 'marginwidth': ['*'],
-	'max': ['input'],
-	'maxlength': ['input', 'textarea'],
-	// 'mayscript': ['*'],
-	'media': ['link'],
-	'method': ['form'],
-	'min': ['input'],
-	'minlength': ['input', 'textarea'],
-	'multiple': ['input', 'select'],
-	'muted': ['audio', 'video'],
-	'name': ['*'],
-	// 'nohref': ['*'],
-	'nomodule': ['script'],
-	'nonce': ['script', 'link'],
-	'noresize': ['*'],
-	// 'noshade': ['*'],
-	'novalidate': ['*'],
-	'nowrap': ['*'],
-	'object': ['*'],
-	'open': ['details', 'dialog'],
-	// 'optimum': ['*'],
-	'part': ['*'],
-	'pattern': ['input', 'teaxarea'],
-	// 'ping': ['*'],
-	'placeholder': ['input', 'textarea'],
-	'playsinline': ['*'],
-	// 'policy': ['*'],
-	'poster': ['video'],
-	'preload': ['*'],
-	// 'pseudo': ['*'],
-	'readonly': ['input', 'textarea', 'select'],
-	'referrerpolicy': ['script', 'link', 'img', 'video', 'source', 'iframe'],
-	'rel': ['a', 'link'],
-	// 'reportingorigin': ['*'],
-	'required': ['input', 'textarea', 'select'],
-	// 'resources': ['*'],
-	'rev': ['*'],
-	'reversed': ['*'],
-	'role': ['*'],
-	'rows': ['*'],
-	'rowspan': ['*'],
-	'rules': ['*'],
-	'sandbox': ['iframe'],
-	// 'scheme': ['*'],
-	// 'scope': ['*'],
-	// 'scopes': ['*'],
-	// 'scrollamount': ['*'],
-	// 'scrolldelay': ['*'],
-	'scrolling': ['iframe'],
-	// 'select': ['*'],
-	'selected': ['option'],
-	'shadowroot': ['template'],
-	// 'shadowrootdelegatesfocus': ['*'],
-	// 'shape': ['*'],
-	'size': ['*'],
-	'sizes': ['img'],
-	'slot': ['*'],
-	'span': ['*'],
-	'spellcheck': ['*'],
-	'src': ['img', 'script', 'source', 'audio', 'video'],
-	// 'srcdoc': ['iframe'],
-	'srclang': ['*'],
-	'srcset': ['img'],
-	// 'standby': ['*'],
-	// 'start': ['*'],
-	'step': ['input'],
-	// 'style': ['*'],
-	// 'summary': ['*'],
-	'tabindex': ['*'],
-	'target': ['a', 'form'],
-	'text': ['*'],
-	'title': ['*'],
-	// 'topmargin': ['*'],
-	// 'translate': ['*'],
-	// 'truespeed': ['*'],
-	// 'trusttoken': ['*'],
-	'type': ['script', 'input'],
-	// 'usemap': ['*'],
-	// 'valign': ['*'],
-	'value': ['input'],
-	// 'valuetype': ['*'],
-	// 'version': ['*'],
-	// 'virtualkeyboardpolicy': ['*'],
-	// 'vlink': ['*'],
-	// 'vspace': ['*'],
-	'webkitdirectory': ['*'],
-	'width': ['img', 'iframe', 'video'],
-	'wrap': ['*'],
-};
-
-export const allowCustomElements = true;
-
-export const allowElements = [
-	'a',
-	'abbr',
-	'acronym',
-	'address',
-	'area',
-	'article',
-	'aside',
-	'audio',
-	'b',
-	'bdi',
-	'bdo',
-	'big',
-	'blockquote',
-	'body',
-	'br',
-	'button',
-	'canvas',
-	'caption',
-	'center',
-	'cite',
-	'code',
-	'col',
-	'colgroup',
-	'datalist',
-	'dd',
-	'del',
-	'details',
-	'dialog',
-	'dfn',
-	'dir',
-	'div',
-	'dl',
-	'dt',
-	'em',
-	'fieldset',
-	'figcaption',
-	'figure',
-	'font',
-	'footer',
-	'form',
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6',
-	'head',
-	'header',
-	'hgroup',
-	'hr',
-	'html',
-	'i',
-	'img',
-	'input',
-	'ins',
-	'kbd',
-	'keygen',
-	'label',
-	'legend',
-	'li',
-	'link',
-	'listing',
-	'map',
-	'mark',
-	'menu',
-	'meta',
-	'meter',
-	'nav',
-	'nobr',
-	'ol',
-	'optgroup',
-	'option',
-	'output',
-	'p',
-	'picture',
-	'pre',
-	'progress',
-	'q',
-	'rb',
-	'rp',
-	'rt',
-	'rtc',
-	'ruby',
-	's',
-	'samp',
-	'section',
-	'select',
-	'slot',
-	'small',
-	'source',
-	'span',
-	'strike',
-	'strong',
-	'sub',
-	'summary',
-	'sup',
-	'svg',
-	'style',
-	'table',
-	'template',
-	'tbody',
-	'td',
-	'textarea',
-	'tfoot',
-	'th',
-	'thead',
-	'time',
-	'tr',
-	'track',
-	'tt',
-	'u',
-	'ul',
-	'var',
-	'video',
-	'wbr'
-];
-
-export const dropAttributes = {
-	'style': ['*'],
-	...Object.fromEntries(events.map(ev => [ev, ['*']])),
-};
-
-export const SanitizerConfig = {
-	allowAttributes, allowComments, allowElements, allowCustomElements,
-	blockElements, dropAttributes, dropElements,
-};
-
-export { allowComments, blockElements, dropElements, allowUnknownMarkup };

package/assets/SanitizerConfigBase.js

@@ -1,18 +0,0 @@
-/**
- * @copyright 2023 Chris Zuber <admin@kernvalley.us>
- */
-import { events } from './attributes.js';
-
-export const allowAttributes = undefined;
-export const allowComments = false;
-export const allowCustomElements = false;
-export const allowElements = undefined;
-export const blockElements = ['frame'];
-export const dropAttributes = Object.fromEntries(events.map(event => [event, ['*']]));
-export const dropElements = ['script', 'link', 'title', 'noscript', 'head', 'body', 'object', 'embed', 'param', 'iframe','base'];
-export const allowUnknownMarkup = false;
-
-export const SanitizerConfig = {
-	allowAttributes, allowComments, allowElements, allowCustomElements,
-	blockElements, dropAttributes, dropElements, allowUnknownMarkup,
-};