chore(update): Update HA-FE from 20230309.1 to 20230526.0

.eslintrc.json

@@ -19,7 +19,7 @@
   "settings": {
     "import/resolver": {
       "webpack": {
-        "config": "./webpack.config.js"
+        "config": "./webpack.config.cjs"
       }
     }
   },

.github/workflows/ReleaseActions.yml

@@ -21,13 +21,11 @@ jobs:
         uses: actions/setup-python@v4.6.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version-file: ".nvmrc"
           cache: yarn
-
       - name: "Set version number from tag"
         run: |
           echo -n '${{ github.ref_name }}' > ./VERSION

.github/workflows/ci.yml

@@ -8,9 +8,6 @@ on:
     branches:
       - main
 
-env:
-  NODE_VERSION: 16
-
 jobs:
   lint:
     name: Lint
@@ -20,13 +17,11 @@ jobs:
         uses: actions/checkout@v3
         with:
           submodules: recursive
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version-file: ".nvmrc"
           cache: yarn
-
       - name: Install dependencies
         run: script/bootstrap
 

.nvmrc

@@ -1 +1 @@
-16
+18

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: homeassistant-frontend/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: homeassistant-frontend/.yarn/releases/yarn-3.4.1.cjs
+yarnPath: homeassistant-frontend/.yarn/releases/yarn-3.5.1.cjs

build-scripts/bundle.js → build-scripts/bundle.cjs

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
-const env = require("./env.js");
-const paths = require("./paths.js");
+const env = require("./env.cjs");
+const paths = require("./paths.cjs");
 
 // Files from NPM Packages that should not be imported
 module.exports.ignorePackages = ({ latestBuild }) => [
@@ -59,49 +59,50 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
-module.exports.terserOptions = (latestBuild) => ({
+module.exports.terserOptions = ({latestBuild, isTestBuild}) => ({
   safari10: !latestBuild,
-  ecma: latestBuild ? undefined : 5,
-  output: { comments: false },
+  ecma: latestBuild ? 2015 : 5,
+  format: { comments: false },
+  sourceMap: !isTestBuild,
 });
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
   compact: false,
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+    setSpreadProperties: true,
+  },
+  browserslistEnv: latestBuild ? "modern" : "legacy",
+  // Must be unambiguous because some dependencies are CommonJS only
+  sourceType: "unambiguous",
   presets: [
-    !latestBuild && [
+    [
       "@babel/preset-env",
       {
-        useBuiltIns: "entry",
-        corejs: "3.15",
+        useBuiltIns: latestBuild ? false : "entry",
+        corejs: latestBuild ? false : { version: "3.30", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ].filter(Boolean),
+  ],
   plugins: [
     [
-      path.resolve(paths.polymer_dir, "build-scripts/babel-plugins/inline-constants-plugin.js"),
+      path.resolve(paths.polymer_dir, "build-scripts/babel-plugins/inline-constants-plugin.cjs"),
       {
         modules: ["@mdi/js"],
         ignoreModuleNotFound: true,
       },
     ],
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
+    // Import helpers and regenerator from runtime package
+    [
+      "@babel/plugin-transform-runtime",
+      { version: require("../package.json").dependencies["@babel/runtime"] },
     ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
+    // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
-    ["@babel/plugin-proposal-private-methods", { loose: true }],
-    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
-    ["@babel/plugin-proposal-class-properties", { loose: true }],
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux

build-scripts/env.js → build-scripts/env.cjs

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
-const paths = require("./paths.js");
+const paths = require("./paths.cjs");
 
 module.exports = {
   useRollup() {

build-scripts/gulp/clean.js

@@ -1,8 +1,7 @@
-/* eslint @typescript-eslint/no-var-requires: "off" */
-const del = import("del");
-const gulp = require("gulp");
-const paths = require("../paths");
+import { deleteSync } from "del";
+import gulp from "gulp";
+import paths from "../paths.cjs";
 
 gulp.task("clean-knx", async () =>
-    (await del).deleteSync([paths.knx_output_root, paths.build_dir])
+    deleteSync([paths.knx_output_root, paths.build_dir])
 );

build-scripts/gulp/compress.js

@@ -1,10 +1,9 @@
 // Tasks to compress
-/* eslint @typescript-eslint/no-var-requires: "off" */
 
-const gulp = require("gulp");
-const zopfli = require("gulp-zopfli-green");
-const path = require("path");
-const paths = require("../paths");
+import gulp from "gulp";
+import zopfli from "gulp-zopfli-green";
+import path from "path";
+import paths from "../paths.cjs";
 
 const zopfliOptions = { threshold: 150 };
 

build-scripts/gulp/entry-html.js

@@ -1,9 +1,10 @@
 // Tasks to generate entry HTML
-/* eslint @typescript-eslint/no-var-requires: "off", import/extensions: "off", import/no-dynamic-require: "off" */
-const gulp = require("gulp");
-const fs = require("fs-extra");
-const path = require("path");
-const paths = require("../paths.js");
+
+import fs from "fs-extra";
+import gulp from "gulp";
+import path from "path";
+import paths from "../paths.cjs";
+
 
 gulp.task("gen-index-knx-dev", async () => {
   writeKNXEntrypoint(
@@ -14,8 +15,8 @@ gulp.task("gen-index-knx-dev", async () => {
 });
 
 gulp.task("gen-index-knx-prod", async () => {
-  const latestManifest = require(path.resolve(paths.knx_output_latest, "manifest.json"));
-  const es5Manifest = require(path.resolve(paths.knx_output_es5, "manifest.json"));
+  const latestManifest = fs.readJsonSync(path.resolve(paths.knx_output_latest, "manifest.json"));
+  const es5Manifest = fs.readJsonSync(path.resolve(paths.knx_output_es5, "manifest.json"));
   writeKNXEntrypoint(latestManifest["entrypoint.js"], es5Manifest["entrypoint.js"], "False");
 });
 

build-scripts/gulp/knx.js

@@ -1,12 +1,11 @@
 /* eslint @typescript-eslint/no-var-requires: "off", import/extensions: "off" */
-const gulp = require("gulp");
+import gulp from "gulp";
+import env from "../env.cjs";
 
-const env = require("../env");
-
-require("./clean.js");
-require("./webpack.js");
-require("./compress.js");
-require("./entry-html.js");
+import "./clean.js";
+import "./webpack.js";
+import "./compress.js";
+import "./entry-html.js";
 
 gulp.task(
   "develop-knx",

build-scripts/gulp/rollup.js

@@ -1,14 +1,14 @@
 // Tasks to run Rollup
 /* eslint @typescript-eslint/no-var-requires: "off", prefer-arrow-callback: "off" */
-const path = require("path");
-const open = require("open");
-const gulp = require("gulp");
-const rollup = require("rollup");
-const handler = require("serve-handler");
-const http = require("http");
-const log = require("fancy-log");
-const rollupConfig = require("../rollup");
-const paths = require("../paths");
+import log from "fancy-log";
+import gulp from "gulp";
+import http from "http";
+import open from "open";
+import path from "path";
+import { rollup } from "rollup";
+import handler from "serve-handler";
+import paths from "../paths.cjs";
+import rollupConfig from "../rollup.cjs";
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(
@@ -43,7 +43,7 @@ function createServer(serveOptions) {
   });
 }
 
-function watchRollup(createConfig, extraWatchSrc = [], serveOptions) {
+function watchRollup(createConfig, extraWatchSrc = [], serveOptions = null) {
   const { inputOptions, outputOptions } = createConfig({
     isProdBuild: false,
     latestBuild: true,

build-scripts/gulp/webpack.js

@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
-const fs = require("fs");
-const gulp = require("gulp");
-const webpack = require("webpack");
-const log = require("fancy-log");
-const paths = require("../paths");
-const { createKNXConfig } = require("../webpack");
+
+import log from "fancy-log";
+import fs from "fs";
+import gulp from "gulp";
+import webpack from "webpack";
+import paths from "../paths.cjs";
+import { createKNXConfig } from "../webpack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),

build-scripts/rollup-plugins/worker-plugin.js → build-scripts/rollup-plugins/worker-plugin.cjs

@@ -102,7 +102,7 @@ module.exports = function (opts = {}) {
         }
         delete optionsObject.type;
 
-        if (!new RegExp("^.*/").test(workerFile)) {
+        if (!/^.*\//.test(workerFile)) {
           this.warn(
             `Paths passed to the Worker constructor must be relative or absolute, i.e. start with /, ./ or ../ (just like dynamic import!). Ignoring "${workerFile}".`
           );

build-scripts/rollup.js → build-scripts/rollup.cjs

@@ -9,13 +9,13 @@ const replace = require("@rollup/plugin-replace");
 const visualizer = require("rollup-plugin-visualizer");
 const { string } = require("rollup-plugin-string");
 const { terser } = require("rollup-plugin-terser");
-const manifest = require("./rollup-plugins/manifest-plugin");
-const worker = require("./rollup-plugins/worker-plugin");
-const dontHashPlugin = require("./rollup-plugins/dont-hash-plugin");
-const ignore = require("./rollup-plugins/ignore-plugin");
+const manifest = require("./rollup-plugins/manifest-plugin.cjs");
+const worker = require("./rollup-plugins/worker-plugin.cjs");
+const dontHashPlugin = require("./rollup-plugins/dont-hash-plugin.cjs");
+const ignore = require("./rollup-plugins/ignore-plugin.cjs");
 
-const bundle = require("./bundle");
-const paths = require("./paths");
+const bundle = require("./bundle.cjs");
+const paths = require("./paths.cjs");
 
 const extensions = [".js", ".ts"];
 

build-scripts/webpack.js → build-scripts/webpack.cjs

@@ -6,8 +6,8 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
-const paths = require("./paths.js");
-const bundle = require("./bundle.js");
+const paths = require("./paths.cjs");
+const bundle = require("./bundle.cjs");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -58,6 +58,9 @@ const createWebpackConfig = ({
               cacheCompression: false,
             },
           },
+          resolve: {
+            fullySpecified: false,
+          },
         },
         {
           test: /\.css$/,
@@ -127,6 +130,20 @@ const createWebpackConfig = ({
           "homeassistant-frontend/src/util/empty.js"
         )
       ),
+      // See `src/resources/intl-polyfill-legacy.ts` for explanation
+      !latestBuild &&
+        new webpack.NormalModuleReplacementPlugin(
+          new RegExp(
+            path.resolve(
+              paths.polymer_dir,
+              "homeassistant-frontend/src/resources/intl-polyfill.ts"
+            )
+          ),
+          path.resolve(
+            paths.polymer_dir,
+            "homeassistant-frontend/src/resources/intl-polyfill-legacy.ts"
+          )
+        ),
       !isProdBuild && new LogStartCompilePlugin(),
     ].filter(Boolean),
     resolve: {

gulpfile.js

@@ -1,3 +1,13 @@
-var requireDir = require("require-dir");
+import { globIterate } from "glob";
 
-requireDir("./build-scripts/gulp/");
+const gulpImports = [];
+
+for await (const gulpModule of globIterate("build-scripts/gulp/*.?(c|m)js", {
+  dotRelative: true,
+})) {
+  gulpImports.push(import(gulpModule));
+}
+
+// Since all tasks are currently registered with gulp.task(), this is enough
+// If any are converted to named exports, need to loop and aggregate exports here
+await Promise.all(gulpImports);