20240529.0 (#20901)

.eslintrc.json

@@ -115,6 +115,7 @@
       }
     ],
     "unused-imports/no-unused-imports": "error",
+    "lit/attribute-names": "warn",
     "lit/attribute-value-entities": "off",
     "lit/no-template-map": "off",
     "lit/no-native-attributes": "warn",

.github/workflows/cast_deployment.yaml

@@ -21,7 +21,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           ref: dev
 
@@ -57,7 +57,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           ref: master
 

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
       - name: Setup Node
         uses: actions/[email protected]
         with:
@@ -58,7 +58,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
       - name: Setup Node
         uses: actions/[email protected]
         with:
@@ -76,7 +76,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
       - name: Setup Node
         uses: actions/[email protected]
         with:
@@ -100,7 +100,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
       - name: Setup Node
         uses: actions/[email protected]
         with:

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -22,7 +22,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           ref: dev
 
@@ -58,7 +58,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           ref: master
 

.github/workflows/design_deployment.yaml

@@ -16,7 +16,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
 
       - name: Setup Node
         uses: actions/[email protected]

.github/workflows/design_preview.yaml

@@ -21,7 +21,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
 
       - name: Setup Node
         uses: actions/[email protected]

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v5

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/[email protected].4
+        uses: softprops/[email protected].5
         with:
           files: |
             dist/*.whl

.github/workflows/translations.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
 
       - name: Upload Translations
         run: |

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -1,7 +1,56 @@
 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 = {
+  // Note states and shadowRoot properties should be supported.
+  "element-internals": {
+    android: 90,
+    chrome: 90,
+    edge: 90,
+    firefox: 126,
+    ios: 17.4,
+    opera: 76,
+    opera_mobile: 64,
+    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,
@@ -13,6 +62,31 @@ const PolyfillSupport = {
     safari: 10.1,
     samsung: 4.0,
   },
+  "intl-getcanonicallocales": {
+    android: 54,
+    chrome: 54,
+    edge: 16,
+    firefox: 48,
+    ios: 10.3,
+    opera: 41,
+    opera_mobile: 41,
+    safari: 10.1,
+    samsung: 6.0,
+  },
+  "intl-locale": {
+    android: 74,
+    chrome: 74,
+    edge: 79,
+    firefox: 75,
+    ios: 14.0,
+    opera: 62,
+    opera_mobile: 53,
+    safari: 14.0,
+    samsung: 11.0,
+  },
+  "intl-other": {
+    // Not specified (i.e. always try polyfill) since compatibility depends on supported locales
+  },
   proxy: {
     android: 49,
     chrome: 49,
@@ -24,32 +98,84 @@ const PolyfillSupport = {
     safari: 10.0,
     samsung: 5.0,
   },
+  "resize-observer": {
+    android: 64,
+    chrome: 64,
+    edge: 79,
+    firefox: 69,
+    ios: 13.4,
+    opera: 51,
+    opera_mobile: 47,
+    safari: 13.1,
+    samsung: 9.0,
+  },
 };
 
 // Map of global variables and/or instance and static properties to the
 // corresponding polyfill key and actual module to import
 const polyfillMap = {
   global: {
-    Proxy: { key: "proxy", module: "proxy-polyfill" },
     fetch: { key: "fetch", module: "unfetch/polyfill" },
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    ResizeObserver: {
+      key: "resize-observer",
+      module: join(POLYFILL_DIR, "resize-observer.ts"),
+    },
+  },
+  instance: {
+    attachInternals: {
+      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: {
+      getCanonicalLocales: {
+        key: "intl-getcanonicallocales",
+        module: join(POLYFILL_DIR, "intl-polyfill.ts"),
+      },
+      Locale: {
+        key: "intl-locale",
+        module: join(POLYFILL_DIR, "intl-polyfill.ts"),
+      },
+      ...Object.fromEntries(
+        [
+          "DateTimeFormat",
+          "DisplayNames",
+          "ListFormat",
+          "NumberFormat",
+          "PluralRules",
+          "RelativeTimeFormat",
+        ].map((obj) => [
+          obj,
+          { key: "intl-other", module: join(POLYFILL_DIR, "intl-polyfill.ts") },
+        ])
+      ),
+    },
   },
-  instance: {},
-  static: {},
 };
 
 // Create plugin using the same factory as for CoreJS
 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;
       },
     };
   }

build-scripts/bundle.cjs

@@ -3,6 +3,8 @@ const env = require("./env.cjs");
 const paths = require("./paths.cjs");
 const { dependencies } = require("../package.json");
 
+const BABEL_PLUGINS = path.join(__dirname, "babel-plugins");
+
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
 module.exports.sourceMapURL = () => {
@@ -100,22 +102,12 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   ],
   plugins: [
     [
-      path.resolve(
-        paths.polymer_dir,
-        "build-scripts/babel-plugins/inline-constants-plugin.cjs"
-      ),
+      path.join(BABEL_PLUGINS, "inline-constants-plugin.cjs"),
       {
         modules: ["@mdi/js"],
         ignoreModuleNotFound: true,
       },
     ],
-    [
-      path.resolve(
-        paths.polymer_dir,
-        "build-scripts/babel-plugins/custom-polyfill-plugin.js"
-      ),
-      { method: "usage-global" },
-    ],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
@@ -153,6 +145,27 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   ],
   sourceMaps: !isTestBuild,
   overrides: [
+    {
+      // Add plugin to inject various polyfills, excluding the polyfills
+      // themselves to prevent self-injection.
+      plugins: [
+        [
+          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
+          { method: "usage-global" },
+        ],
+      ],
+      exclude: [
+        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        ...[
+          "@formatjs/intl-\\w+",
+          "@lit-labs/virtualizer/polyfills",
+          "@webcomponents/scoped-custom-element-registry",
+          "element-internals-polyfill",
+          "proxy-polyfill",
+          "unfetch",
+        ].map((p) => new RegExp(`/node_modules/${p}/`)),
+      ],
+    },
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
       // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills