@shgysk8zer0/polyfills 0.0.7 → 0.1.0

package/CHANGELOG.md

@@ -6,6 +6,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.1.0] - 2023-06-19
+
+### Added
+- Add shim for `Document.parseHTML`
+- Add shim for constructable stylesheets (#21)
+- Add `@shgysk8zer0/js-utils`
+
+### Changed
+- `el.setHTML()` now conforms to the updated draft Sanitizer API spec
+
+### Removed
+- Remove `eslint` and `rollup` and plugins
+
+### Deprecated
+- Sanitizer is now considered deprecated, pending changes to the spec
+
+## [v0.0.8] - 2023-06-02
+
+### Added
+- `URL.canParse()` [#15]
+- `utils.js` module with helper functions (`polyfillMethod()`, currently)
+
+### Fixed
+- Update GitHub Release Action with correct permissions
+
 ## [v0.0.7] - 2023-05-15
 
 ### Fixed

package/CSSStyleSheet.js

@@ -0,0 +1,83 @@
+export function createSheet(rules = '', { disabled = false, media } = {}) {
+	const style = Document.parseHTML(
+		`<style>${rules}</style>`,
+		{ sanitizer: new Sanitizer({ allowElements: ['style'] }) }
+	);
+
+
+	const sheet = style.styleSheets.item(0);
+	if (typeof media === 'string') {
+		sheet.media.appendMedium(media);
+	}
+	sheet.disabled = disabled;
+	return sheet;
+}
+
+export function clearCSSRules(sheet) {
+	while (sheet.cssRules.length > 0) {
+		sheet.deleteRule(0);
+	}
+}
+
+try {
+	new CSSStyleSheet();
+} catch {
+	const NativeStyleSheet = globalThis.CSSStyleSheet;
+
+	globalThis.CSSStyleSheet = function CSSStyleSheet({ disabled = false, media } = {}) {
+		// Need at least one rule to create the `.sheet`
+		const sheet = createSheet('#dfgbkjdfg{color:red;}', { disabled, media });
+		sheet.deleteRule(0);
+		return sheet;
+	};
+
+	globalThis.CSSStyleSheet.prototype = NativeStyleSheet.prototype;
+	NativeStyleSheet.prototype.constructor = globalThis.CSSStyleSheet;
+}
+
+if (! (CSSStyleSheet.prototype.replace instanceof Function)) {
+	CSSStyleSheet.prototype.replace = function replace(rules) {
+		const link = document.createElement('link');
+		const controller = new AbortController();
+		const { resolve, reject, promise } = Promise.withResolvers();
+
+		link.addEventListener('load', ({ target }) => {
+			clearCSSRules(this);
+			[...target.sheet.cssRules].forEach((rule, i) => this.insertRule(rule.cssText, i));
+			resolve(this);
+			controller.abort();
+			URL.revokeObjectURL(target.href);
+			target.remove();
+		}, { once: true, signal: controller.signal });
+
+		link.addEventListener('error', ({ target }) => {
+			const error = new DOMException('Error loading stylesheet.');
+			reject(error);
+			controller.abort(error);
+			URL.revokeObjectURL(target.href);
+			target.remove();
+		}, { once: true, signal: controller.signal });
+
+		link.rel = 'stylesheet';
+		link.crossOrigin = 'anonymous';
+		link.referrerPolicy = 'no-referrer';
+		link.media = 'no-op';
+		link.href = URL.createObjectURL(new File([rules], 'tmp.css', { type: 'text/css' }));
+		document.head.append(link);
+
+		return promise;
+	};
+}
+
+if (! (CSSStyleSheet.prototype.replaceSync instanceof Function)) {
+	CSSStyleSheet.prototype.replaceSync = function replaceSync(rules) {
+		const sheet = Document.parseHTML(
+			`<style>${rules}</style>`,
+			{ sanitizer: new Sanitizer({ allowElements: ['style'] }) }
+		).styleSheets.item(0);
+
+		clearCSSRules(this);
+
+		[...sheet.cssRules].forEach((rule, i) => this.insertRule(rule.cssText, i));
+	};
+}

package/Document.js

@@ -0,0 +1,6 @@
+import { polyfillMethod, polyfillGetterSetter } from './utils.js';
+import { safeParseHTML } from './assets/sanitizerUtils.js';
+import { adoptedStyleSheets } from './assets/adoptedStylesheets.js';
+
+polyfillMethod(Document, 'parseHTML', (...args) => safeParseHTML(...args));
+polyfillGetterSetter(Document.prototype, 'adoptedStyleSheets', adoptedStyleSheets);

package/ShadowRoot.js

@@ -0,0 +1,6 @@
+import { polyfillGetterSetter } from './utils.js';
+import { adoptedStyleSheets } from './assets/adoptedStylesheets.js';
+
+if ('ShadowRoot' in globalThis) {
+	polyfillGetterSetter(ShadowRoot.prototype, 'adoptedStyleSheets', adoptedStyleSheets);
+}

package/all.js

@@ -1,12 +1,12 @@
 /**
  * @copyright 2023 Chris Zuber <admin@kernvalley.us>
  */
-
+import './globalThis.js';
 import './deprefixer.js';
-import './symbols.js';
 import './array.js';
-import './globalThis.js';
+import './symbols.js';
 import './function.js';
+import './url.js';
 import './number.js';
 import './iterator.js';
 import './math.js';
@@ -22,7 +22,10 @@ import './crypto.js';
 import './cookieStore.js';
 import './animation.js';
 import './trustedTypes.js';
-import './sanitizer.js';
+import './deprecated/sanitizer.js';
+import './Document.js';
+import './ShadowRoot.js';
+import './CSSStyleSheet.js';
 import './element.js';
 import './set.js';
 import './map.js';