@shgysk8zer0/polyfills 0.4.5 → 0.4.7

package/close-watcher.js

@@ -0,0 +1,41 @@
+if (! (globalThis.CloseWatcher instanceof Function)) {
+	globalThis.CloseWatcher = class CloseWatcher extends EventTarget {
+		#controller = new AbortController();
+		#cancelable = true;
+
+		constructor() {
+			super();
+
+			document.addEventListener('keydown', event => {
+				if (event.key === 'Escape') {
+					this.requestClose();
+				}
+			}, { signal: this.#controller.signal });
+		}
+
+		requestClose() {
+			if (! this.#controller.signal.aborted) {
+				const event = new Event('cancel', { cancelable: this.#cancelable });
+				this.dispatchEvent(event);
+				this.#cancelable = false;
+
+				if (! event.defaultPrevented) {
+					this.close();
+				}
+			}
+		}
+
+		close() {
+			if (! this.#controller.signal.aborted) {
+				this.dispatchEvent(new Event('close'));
+				this.destroy();
+			}
+		}
+
+		destroy() {
+			if (! this.#controller.signal.aborted) {
+				this.#controller.abort();
+			}
+		}
+	};
+}

package/element.js

@@ -1,9 +1,10 @@
 import { aria } from './aom.js';
 import { polyfillGetterSetter, polyfillMethod, overwriteMethod } from './utils.js';
-import { setHTMLUnsafe } from './methods/dom.js';
+import { getHTML, setHTMLUnsafe } from './methods/dom.js';
 import './sanitizer.js';
 
 polyfillMethod(Element.prototype, 'setHTMLUnsafe', setHTMLUnsafe);
+polyfillMethod(Element.prototype, 'getHTML', getHTML);
 
 if ('CustomElementRegistry' in globalThis && ! (CustomElementRegistry.prototype.getName instanceof Function)) {
 	const registry = new Map();
@@ -47,7 +48,7 @@ export function initPopover(target = document.body) {
 		.forEach(el => el.addEventListener('click', handlePopover));
 }
 
-if ((globalThis.ToggleEvent instanceof Function)) {
+if (! (globalThis.ToggleEvent instanceof Function)) {
 	class ToggleEvent extends Event {
 		#newState;
 		#oldState;
@@ -268,26 +269,77 @@ if (! (HTMLImageElement.prototype.decode instanceof Function)) {
 }
 
 if (! HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
-	Object.defineProperty(HTMLTemplateElement.prototype, 'shadowRootMode', {
-		get: function() {
+	const attachedShadows = new WeakMap();
+
+	polyfillGetterSetter(HTMLTemplateElement.prototype, 'shadowRootMode', {
+		get() {
 			return this.getAttribute('shadowrootmode');
 		},
-		set: function(val) {
+		set(val) {
 			this.setAttribute('shadowrootmode', val);
+		}
+	});
+
+	polyfillGetterSetter(HTMLTemplateElement.prototype, 'shadowRootDelegatesFocus', {
+		get() {
+			return this.hasAttribute('shadowrootdelegatesfocus');
+		},
+		set(val) {
+			this.toggleAttribute('shadowrootdelegatesfocus', val);
+		}
+	});
+
+	polyfillGetterSetter(HTMLTemplateElement.prototype, 'shadowRootClonable', {
+		get() {
+			return this.hasAttribute('shadowrootclonable');
+		},
+		set(val) {
+			this.toggleAttribute('shadowrootclonable', val);
+		}
+	});
+
+	polyfillGetterSetter(HTMLTemplateElement.prototype, 'shadowRootSerializable', {
+		get() {
+			return this.hasAttribute('shadowrootserializable');
 		},
-		enumerable: true,
-		configurable: true,
+		set(val) {
+			this.toggleAttribute('shadowrootserializable', val);
+		}
 	});
 
 	const attachShadows = (base = document) => {
 		base.querySelectorAll('template[shadowrootmode]').forEach(tmp => {
-			const shadow = tmp.parentElement.attachShadow({ mode: tmp.shadowRootMode });
+			const shadow = tmp.parentElement.attachShadow({
+				mode: tmp.shadowRootMode,
+				clonable: tmp.shadowRootClonable,
+				delegatesFocus: tmp.shadowRootDelegatesFocus,
+				serializable: tmp.shadowRootSerializable,
+			});
+
 			shadow.append(tmp.content);
 			tmp.remove();
 			attachShadows(shadow);
+			attachedShadows.set(shadow.host, shadow);
 		});
 	};
 
+	overwriteMethod(HTMLElement.prototype, 'attachShadow', function(attach) {
+		return ({ mode, clonable = false, delegatesFocus = false, serializable = false, slotAssignment = 'auto' }) => {
+			if (! attachedShadows.has(this)) {
+				return attach.call(this, { mode, clonable, delegatesFocus, serializable, slotAssignment });
+			} else {
+				const shadow = attachedShadows.get(this);
+
+				if (mode === shadow.shadowRootMode) {
+					attachShadows.remove(this);
+					return shadow;
+				} else {
+					throw new DOMException('Element.attachShadow: Unable to re-attach to existing ShadowDOM');
+				}
+			}
+		};
+	});
+
 	if (document.readyState === 'loading') {
 		document.addEventListener('readystatechange', () => attachShadows(document), { once: true });
 	} else {

package/methods/dom.js

@@ -1,3 +1,11 @@
+const HOSTS_SYMBOL = Symbol('shadow:hosts');
+
+function getTagHTML(el) {
+	const outerHTML = el.cloneNode().outerHTML;
+	const closeStart = outerHTML.indexOf('/') - 1;
+	return closeStart > 0 ? [outerHTML.substring(0, closeStart), outerHTML.substring(closeStart)] : [outerHTML, ''];
+}
+
 function attachShadow(template){
 	if (template instanceof HTMLTemplateElement && template.parentElement instanceof HTMLElement) {
 		const shadow = template.parentElement.attachShadow({
@@ -12,6 +20,45 @@ function attachShadow(template){
 	}
 }
 
+function serializeChildNodes(node, { serializableShadowRoots = false, shadowRoots = [], [HOSTS_SYMBOL]: hosts = [] } = {}) {
+	return Array.from(
+		node.childNodes,
+		child => {
+			if (child.nodeType === Node.ELEMENT_NODE) {
+				const [open, close] = getTagHTML(child);
+				return open + child.getHTML({ serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts }) + close;
+			} else {
+				return child.textContent;
+			}
+		}
+	).join('');
+}
+
+function serializeShadowRoot(shadow, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts = [] } = {}) {
+	if (shadow.serializable) {
+		const openTag = `<template shadowrootmode="${shadow.mode}"`;
+		const attrs = [];
+
+		if (shadow.clonable) {
+			attrs.push(' shadowrootclonable=""');
+		}
+
+		if (shadow.serializable) {
+			attrs.push(' shadowrootserializable=""');
+		}
+
+		if (shadow.delegatesFocus) {
+			attrs.push(' shadowrootdelegatesfocus=""');
+		}
+
+		const tag = attrs.length === 0 ? openTag + '>' : openTag + ' ' + attrs.join('') + '>';
+
+		return tag + serializeChildNodes(shadow, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts }) + '</template>';
+	} else {
+		return serializeChildNodes(shadow, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts });
+	}
+}
+
 export function parseHTMLUnsafe(input){
 	const parser = new DOMParser();
 	// Ensures `URL` is "about:blank"
@@ -20,7 +67,7 @@ export function parseHTMLUnsafe(input){
 	const parsed = parser.parseFromString(input, 'text/html');
 	doc.head.append(...parsed.head.childNodes);
 	doc.body.append(...parsed.body.childNodes);
-	doc.querySelectorAll('template[shadowrootmode]').forEach(attachShadow);
+	doc.querySelectorAll('* > template[shadowrootmode]').forEach(attachShadow);
 	return doc;
 }
 
@@ -30,10 +77,43 @@ export function setHTMLUnsafe(input) {
 	const parsed = parser.parseFromString(input, 'text/html');
 	const frag = document.createDocumentFragment();
 	frag.append(...parsed.body.childNodes);
-	attachShadow(frag.querySelector('template[shadowroootmode]'));
+	frag.querySelectorAll('* > template[shadowrootmode]').forEach(attachShadow);
 	this.replaceChildren(frag);
 }
 
-export function getHTML() {
-	return this.innerHTML;
+export function getHTML({ serializableShadowRoots = false, shadowRoots = [], [HOSTS_SYMBOL]: hosts = [] } = {}) {
+	if (serializableShadowRoots && hosts.length === 0 && shadowRoots.length !== 0) {
+		hosts.push(...shadowRoots.map(shadow => shadow.host));
+	}
+
+	switch(this.nodeType) {
+		case Node.ELEMENT_NODE:
+			if (
+				serializableShadowRoots
+				&& this.shadowRoot instanceof ShadowRoot
+				&& (this.shadowRoot.serializable || shadowRoots.includes(this.shadowRoot))
+			) {
+				return this.shadowRoot.getHTML({ serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts })
+					+ serializeChildNodes(this,{ serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts } );
+			} else if (serializableShadowRoots && hosts.includes(this)) {
+				const shadow = shadowRoots.find(shadow => shadow.host.isSameNode(this));
+
+				return serializeShadowRoot(shadow, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts })
+					+ serializeChildNodes(this, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts } );
+			} else {
+				return this.innerHTML;
+			}
+
+		case Node.DOCUMENT_FRAGMENT_NODE:
+			if (! (this instanceof ShadowRoot)) {
+				return '';
+			} else if (serializableShadowRoots && (this.serializable || shadowRoots.includes(this))) {
+				return serializeShadowRoot(this, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts });
+			} else {
+				return serializeChildNodes(this, { serializableShadowRoots, shadowRoots, [HOSTS_SYMBOL]: hosts });
+			}
+
+		default:
+			throw new TypeError('\'getHTML\' called on an object that does not implement interface Element.');
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",
@@ -92,7 +92,7 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "dependencies": {
-    "@aegisjsproject/sanitizer": "^0.1.0",
+    "@aegisjsproject/sanitizer": "^0.1.3",
     "@aegisjsproject/trusted-types": "^1.0.1"
   }
 }