From ea69a9ae816b6e36427ec975aa646cf4d6a83e54 Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Wed, 1 May 2024 18:17:04 +0000 Subject: [PATCH] Inject element polyfills where used using Babel --- .../babel-plugins/custom-polyfill-plugin.js | 41 +++++++++++- src/resources/compatibility.ts | 63 ------------------- src/resources/polyfills/element-append.ts | 25 ++++++++ .../polyfills/element-getattributenames.ts | 12 ++++ .../polyfills/element-toggleattribute.ts | 23 +++++++ 5 files changed, 100 insertions(+), 64 deletions(-) create mode 100644 src/resources/polyfills/element-append.ts create mode 100644 src/resources/polyfills/element-getattributenames.ts create mode 100644 src/resources/polyfills/element-toggleattribute.ts diff --git a/build-scripts/babel-plugins/custom-polyfill-plugin.js b/build-scripts/babel-plugins/custom-polyfill-plugin.js index d2a02bf8c60a..9f49f1e7b90a 100644 --- a/build-scripts/babel-plugins/custom-polyfill-plugin.js +++ b/build-scripts/babel-plugins/custom-polyfill-plugin.js @@ -18,6 +18,39 @@ const PolyfillSupport = { safari: 17.4, samsung: 15.0, }, + "element-append": { + android: 54, + chrome: 54, + edge: 17, + firefox: 49, + ios: 10.0, + opera: 41, + opera_mobile: 41, + safari: 10.0, + samsung: 6.0, + }, + "element-getattributenames": { + android: 61, + chrome: 61, + edge: 18, + firefox: 45, + ios: 10.3, + opera: 48, + opera_mobile: 45, + safari: 10.1, + samsung: 8.0, + }, + "element-toggleattribute": { + android: 69, + chrome: 69, + edge: 18, + firefox: 63, + ios: 12.0, + opera: 56, + opera_mobile: 48, + safari: 12.0, + samsung: 10.0, + }, fetch: { android: 42, chrome: 42, @@ -69,6 +102,12 @@ const polyfillMap = { key: "element-internals", module: "element-internals-polyfill", }, + ...Object.fromEntries( + ["append", "getAttributeNames", "toggleAttribute"].map((prop) => { + const key = `element-${prop.toLowerCase()}`; + return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }]; + }) + ), }, static: {}, }; @@ -78,7 +117,7 @@ export default defineProvider( ({ createMetaResolver, debug, shouldInjectPolyfill }) => { const resolvePolyfill = createMetaResolver(polyfillMap); return { - name: "HA Custom", + name: "custom-polyfill", polyfills: PolyfillSupport, usageGlobal(meta, utils) { const polyfill = resolvePolyfill(meta); diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts index 51aeab4883d1..8b86a81c0e6f 100644 --- a/src/resources/compatibility.ts +++ b/src/resources/compatibility.ts @@ -1,65 +1,2 @@ // Caution before editing - For latest builds, this module is replaced with emptiness and thus not imported (see build-scripts/bundle.js) import "lit/polyfill-support"; - -// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach((item) => { - if (Object.prototype.hasOwnProperty.call(item, "append")) { - return; - } - Object.defineProperty(item, "append", { - configurable: true, - enumerable: true, - writable: true, - value: function append(...argArr) { - const docFrag = document.createDocumentFragment(); - - argArr.forEach((argItem) => { - const isNode = argItem instanceof Node; - docFrag.appendChild( - isNode ? argItem : document.createTextNode(String(argItem)) - ); - }); - - this.appendChild(docFrag); - }, - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]); - -// Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames -if (Element.prototype.getAttributeNames === undefined) { - Element.prototype.getAttributeNames = function () { - const attributes = this.attributes; - const length = attributes.length; - const result = new Array(length); - for (let i = 0; i < length; i++) { - result[i] = attributes[i].name; - } - return result; - }; -} - -// Source: https://gist.github.com/rebelchris/365f26f95d7e9f432f64f21886d9b9ef -if (!Element.prototype.toggleAttribute) { - Element.prototype.toggleAttribute = function (name, force) { - if (force !== undefined) { - force = !!force; - } - - if (this.hasAttribute(name)) { - if (force) { - return true; - } - - this.removeAttribute(name); - return false; - } - if (force === false) { - return false; - } - - this.setAttribute(name, ""); - return true; - }; -} diff --git a/src/resources/polyfills/element-append.ts b/src/resources/polyfills/element-append.ts new file mode 100644 index 000000000000..2ab4fbb8936b --- /dev/null +++ b/src/resources/polyfills/element-append.ts @@ -0,0 +1,25 @@ +// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md +(function (arr) { + arr.forEach((item) => { + if (Object.prototype.hasOwnProperty.call(item, "append")) { + return; + } + Object.defineProperty(item, "append", { + configurable: true, + enumerable: true, + writable: true, + value: function append(...argArr) { + const docFrag = document.createDocumentFragment(); + + argArr.forEach((argItem) => { + const isNode = argItem instanceof Node; + docFrag.appendChild( + isNode ? argItem : document.createTextNode(String(argItem)) + ); + }); + + this.appendChild(docFrag); + }, + }); + }); +})([Element.prototype, Document.prototype, DocumentFragment.prototype]); diff --git a/src/resources/polyfills/element-getattributenames.ts b/src/resources/polyfills/element-getattributenames.ts new file mode 100644 index 000000000000..8fd560a0d6e5 --- /dev/null +++ b/src/resources/polyfills/element-getattributenames.ts @@ -0,0 +1,12 @@ +// Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames +if (Element.prototype.getAttributeNames === undefined) { + Element.prototype.getAttributeNames = function () { + const attributes = this.attributes; + const length = attributes.length; + const result = new Array(length); + for (let i = 0; i < length; i++) { + result[i] = attributes[i].name; + } + return result; + }; +} diff --git a/src/resources/polyfills/element-toggleattribute.ts b/src/resources/polyfills/element-toggleattribute.ts new file mode 100644 index 000000000000..fdabb4001d63 --- /dev/null +++ b/src/resources/polyfills/element-toggleattribute.ts @@ -0,0 +1,23 @@ +// Source: https://gist.github.com/rebelchris/365f26f95d7e9f432f64f21886d9b9ef +if (!Element.prototype.toggleAttribute) { + Element.prototype.toggleAttribute = function (name, force) { + if (force !== undefined) { + force = !!force; + } + + if (this.hasAttribute(name)) { + if (force) { + return true; + } + + this.removeAttribute(name); + return false; + } + if (force === false) { + return false; + } + + this.setAttribute(name, ""); + return true; + }; +}