Merge pull request #61 from shgysk8zer0/patch/dom-and-bytes

Several new polyfills

.gitignore

@@ -4,6 +4,7 @@ logs
 *.min.js
 *.min.js.map
 .bak
+.DS_STORE
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.3.11] - 2024-07-14
+
+### Added
+- Add polyfills for `setHTMLUnsafe` & `parseHTMLUnsafe` methods
+- Add polyfills for `bytes` method in `Blob`, `Request`, and `Response`
+
 ## [v0.3.10] - 2024-04-10
 
 ### Added

Document.js

@@ -1,4 +1,6 @@
-import { polyfillGetterSetter } from './utils.js';
+import { polyfillGetterSetter, polyfillMethod } from './utils.js';
 import { adoptedStyleSheets } from './assets/adoptedStylesheets.js';
+import { parseHTMLUnsafe } from './methods/dom.js';
 
 polyfillGetterSetter(Document.prototype, 'adoptedStyleSheets', adoptedStyleSheets);
+polyfillMethod(Document, 'parseHTMLUnsafe', parseHTMLUnsafe);

ShadowRoot.js

@@ -1,6 +1,23 @@
-import { polyfillGetterSetter } from './utils.js';
+import { polyfillGetterSetter, polyfillMethod } from './utils.js';
 import { adoptedStyleSheets } from './assets/adoptedStylesheets.js';
+import { setHTMLUnsafe } from './methods/dom.js';
 
 if ('ShadowRoot' in globalThis) {
 	polyfillGetterSetter(ShadowRoot.prototype, 'adoptedStyleSheets', adoptedStyleSheets);
+	polyfillMethod(ShadowRoot.prototype,  'setHTMLUnsafe', setHTMLUnsafe);
+
+	polyfillMethod(ShadowRoot.prototype, 'getHTML', function ({ shadowRoots, serializableShadowRoots  = false } = {}) {
+		const clone = this.cloneNode(true);
+
+		if (serializableShadowRoots) {
+			//
+		}
+
+		if  (Array.isArray(shadowRoots)) {
+			//
+		}
+
+		return clone.innerHTML;
+	});
+
 }

all.js

@@ -33,6 +33,8 @@ import './weakMap.js';
 import './window.js';
 import './scheduler.js';
 import './elementInternals.js';
+import  './blob.js';
+import './request.js';
 import './response.js';
 import './Record.js';
 import './Tuple.js';

blob.js

@@ -0,0 +1,5 @@
+import { polyfillMethod } from './utils.js';
+
+polyfillMethod(Blob.prototype, 'bytes', async function () {
+	return new Uint8Array(await this.arrayBuffer());
+});

element.js

@@ -1,7 +1,10 @@
 import { aria } from './aom.js';
-import { polyfillGetterSetter } from './utils.js';
+import { polyfillGetterSetter, polyfillMethod } from './utils.js';
+import { setHTMLUnsafe } from './methods/dom.js';
 import './sanitizer.js';
 
+polyfillMethod(Element.prototype, 'setHTMLUnsafe', setHTMLUnsafe);
+
 function handlePopover({ currentTarget }) {
 	switch(currentTarget.popoverTargetAction) {
 		case 'show':

methods/dom.js

@@ -0,0 +1,39 @@
+function attachShadow(template){
+	if (template instanceof HTMLTemplateElement && template.parentElement instanceof HTMLElement) {
+		const shadow = template.parentElement.attachShadow({
+			mode: template.getAttribute('shadowrootmode'),
+			clonable: template.hasAttribute('shadowrootclonable'),
+			delegatesFocus: template.hasAttribute('shadowrootdelegatesfocus'),
+			serializable: template.hasAttribute('shadowrootserializable'),
+		});
+
+		shadow.append(template.content);
+		template.remove();
+	}
+}
+
+export function parseHTMLUnsafe(input){
+	const parser = new DOMParser();
+	// Ensures `URL` is "about:blank"
+	const doc = document.implementation.createHTMLDocument();
+	// Rely on this method's TrustedTypes implementation, if available
+	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);
+	return doc;
+}
+
+export function setHTMLUnsafe(input) {
+	const parser = new DOMParser();
+	// Rely on this method's TrustedTypes implementation, if available
+	const parsed = parser.parseFromString(input, 'text/html');
+	const frag = document.createDocumentFragment();
+	frag.append(...parsed.body.childNodes);
+	attachShadow(frag.querySelector('template[shadowroootmode]'));
+	this.replaceChildren(frag);
+}
+
+export function getHTML() {
+	return this.innerHTML;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",

request.js

@@ -0,0 +1,5 @@
+import { polyfillMethod } from './utils.js';
+
+polyfillMethod(Request.prototype, 'bytes', async function () {
+	return new Uint8Array(await this.arrayBuffer());
+});

response.js

@@ -15,3 +15,7 @@ polyfillMethod(Response, 'redirect', (url, status = 302) => {
 		headers: new Headers({ Location: url }),
 	});
 });
+
+polyfillMethod(Response.prototype, 'bytes', async function() {
+	return new Uint8Array(await this.arrayBuffer());
+});

test/js/index.js

@@ -18,11 +18,6 @@ class TestEl extends HTMLElement {
 		this.#shadow = this.attachShadow({ mode: 'open' });
 		this.#internals = this.attachInternals();
 
-		const tmp = Document.parseHTML(`<div id="container">
-			<h2 id="title">Lorem Ipsum</h2>
-			<p id="content"><slot name="content">Eum doloribus esse voluptate. Iste neque eum itaque harum non qui cumque id. Laborum officiis voluptatem at sed et repellendus molestiae et. Cum dolor doloribus reiciendis. Quisquam veniam cum officia ex reprehenderit voluptatem sequi id.</slot></p>
-		</div>`);
-
 		new CSSStyleSheet({ media: '(min-width: 800px)' }).replace(`
 			:host {
 				display: inline-block;
@@ -47,7 +42,10 @@ class TestEl extends HTMLElement {
 			}
 		`).then(sheet => {
 			this.#shadow.adoptedStyleSheets = [sheet];
-			this.#shadow.append(...tmp.body.children);
+			this.#shadow.setHTML(`<div id="container">
+				<h2 id="title">Lorem Ipsum</h2>
+				<p id="content"><slot name="content">Eum doloribus esse voluptate. Iste neque eum itaque harum non qui cumque id. Laborum officiis voluptatem at sed et repellendus molestiae et. Cum dolor doloribus reiciendis. Quisquam veniam cum officia ex reprehenderit voluptatem sequi id.</slot></p>
+			</div>`);
 		});
 	}
 }