From e7033fe597a805d22d4bb5512f0f5e78e22bfa8d Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Wed, 1 May 2024 15:30:41 +0000 Subject: [PATCH] WIP: b2797ab8d Update dependency gulp to v5 (#20601) --- .../babel-plugins/custom-polyfill-plugin.js | 50 ++++++++++++++- 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, 108 insertions(+), 65 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 83ce9235f780..f6f0a5259145 100644 --- a/build-scripts/babel-plugins/custom-polyfill-plugin.js +++ b/build-scripts/babel-plugins/custom-polyfill-plugin.js @@ -1,7 +1,44 @@ import defineProvider from "@babel/helper-define-polyfill-provider"; +import { join } from "node:path"; +import paths from "../paths.cjs"; + +const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills"); // List of polyfill keys with supported browser targets for the functionality const PolyfillSupport = { + "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, @@ -33,7 +70,14 @@ const polyfillMap = { Proxy: { key: "proxy", module: "proxy-polyfill" }, fetch: { key: "fetch", module: "unfetch/polyfill" }, }, - instance: {}, + instance: { + ...Object.fromEntries( + ["append", "getAttributeNames", "toggleAttribute"].map((prop) => { + const key = `element-${prop.toLowerCase()}`; + return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }]; + }) + ), + }, static: {}, }; @@ -42,14 +86,16 @@ 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); if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) { debug(polyfill.desc.key); utils.injectGlobalImport(polyfill.desc.module); + return true; } + return false; }, }; } diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts index 75ca9bace83b..95deff160269 100644 --- a/src/resources/compatibility.ts +++ b/src/resources/compatibility.ts @@ -4,66 +4,3 @@ import "lit/polyfill-support"; import ResizeObserver from "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver"; window.ResizeObserver = ResizeObserver; - -// 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; + }; +}