Inject element polyfills where used using Babel (#20689)

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,
@@ -94,6 +127,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: {
     Intl: {
@@ -127,7 +166,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);

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;
-  };
-}

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]);

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;
+  };
+}

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;
+  };
+}