Bump core frontend to bf18deb (#669)

.browserslistrc

@@ -0,0 +1,39 @@
+[modern]
+# Support for dynamic import is the main litmus test for serving modern builds.
+# Although officially a ES2020 feature, browsers implemented it early, so this
+# enables all of ES2017 and some features in ES2018.
+supports es6-module-dynamic-import
+
+# Exclude Safari 11-12 because of a bug in tagged template literals
+# https://bugs.webkit.org/show_bug.cgi?id=190756
+# Note: Dropping version 11 also enables several more ES2018 features
+not Safari < 13
+not iOS < 13
+
+# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
+not KaiOS > 0
+not QQAndroid > 0
+not UCAndroid > 0
+
+# Exclude unsupported browsers
+not dead
+
+[legacy]
+# Legacy builds are served when modern requirements are not met and support browsers:
+# - released in the last 7 years + current alpha/beta versionss
+# - with global utilization above 0.05%
+# The lattermost query ensures that support for popular old browsers is not dropped too early
+# (e.g. IE 11, Android 4.4, or Samsung 4).
+#
+# In addition, legacy browsers must support some minimum features that cannot be polyfilled:
+# - ES5 (strict mode)
+# - web sockets to communicate with backend
+# - inline SVG used widely in buttons, widgets, etc.
+# - custom events used for most user interactions
+# - CSS flexbox used in the majority of the layout
+# Nearly all of these are redundant with the above rules.
+# As of May 2023, only web sockets must be added to the query.
+unreleased versions
+last 7 years
+> 0.05% and supports websockets

package.json

@@ -16,18 +16,18 @@
   "type": "module",
   "version": "1.0.0",
   "devDependencies": {
-    "@babel/core": "7.22.1",
-    "@babel/plugin-proposal-decorators": "7.22.3",
-    "@babel/plugin-transform-runtime": "7.22.4",
-    "@babel/preset-env": "7.22.4",
-    "@babel/preset-typescript": "7.21.5",
+    "@babel/core": "7.22.5",
+    "@babel/plugin-proposal-decorators": "7.22.5",
+    "@babel/plugin-transform-runtime": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
     "@koa/cors": "4.0.0",
-    "@octokit/auth-oauth-device": "4.0.4",
-    "@octokit/plugin-retry": "5.0.1",
-    "@octokit/rest": "19.0.11",
+    "@octokit/auth-oauth-device": "5.0.2",
+    "@octokit/plugin-retry": "5.0.4",
+    "@octokit/rest": "19.0.13",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "25.0.0",
+    "@rollup/plugin-commonjs": "25.0.2",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
@@ -39,31 +39,31 @@
     "@types/html-minifier-terser": "7.0.0",
     "@types/js-yaml": "4.0.5",
     "@types/leaflet": "1.9.3",
-    "@types/leaflet-draw": "1.0.6",
+    "@types/leaflet-draw": "1.0.7",
     "@types/marked": "4.3.1",
     "@types/mocha": "10.0.1",
     "@types/qrcode": "1.5.0",
     "@types/serve-handler": "6.1.1",
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.5",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.59.9",
-    "@typescript-eslint/parser": "5.59.9",
+    "@typescript-eslint/eslint-plugin": "5.59.11",
+    "@typescript-eslint/parser": "5.59.11",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",
     "babel-plugin-template-html-minifier": "4.1.0",
     "chai": "4.3.7",
     "del": "7.0.0",
-    "eslint": "8.42.0",
+    "eslint": "8.43.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-import-resolver-webpack": "0.13.2",
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-lit": "1.8.3",
-    "eslint-plugin-lit-a11y": "2.4.1",
+    "eslint-plugin-lit-a11y": "3.0.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "eslint-plugin-wc": "1.5.0",
     "esprima": "4.0.1",
@@ -81,7 +81,7 @@
     "instant-mocha": "1.5.1",
     "jszip": "3.10.1",
     "lint-staged": "13.2.2",
-    "lit-analyzer": "1.2.1",
+    "lit-analyzer": "2.0.0-pre.3",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.0",
     "map-stream": "0.0.7",
@@ -94,51 +94,52 @@
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.9.0",
+    "rollup-plugin-visualizer": "5.9.2",
     "serve-handler": "6.1.5",
-    "sinon": "15.1.0",
+    "sinon": "15.1.2",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.1",
     "tar": "6.1.15",
     "terser-webpack-plugin": "5.3.9",
-    "ts-lit-plugin": "1.2.1",
-    "typescript": "4.9.5",
+    "ts-lit-plugin": "2.0.0-pre.1",
+    "typescript": "5.1.3",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.84.1",
-    "webpack-cli": "5.1.3",
-    "webpack-dev-server": "4.15.0",
+    "webpack": "5.87.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
     "webpackbar": "5.0.2",
     "workbox-build": "7.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.22.3",
+    "@babel/runtime": "7.22.5",
     "@braintree/sanitize-url": "6.0.2",
-    "@codemirror/autocomplete": "6.7.1",
+    "@codemirror/autocomplete": "6.8.0",
     "@codemirror/commands": "6.2.4",
-    "@codemirror/language": "6.7.0",
+    "@codemirror/language": "6.8.0",
     "@codemirror/legacy-modes": "6.3.2",
     "@codemirror/search": "6.5.0",
     "@codemirror/state": "6.2.1",
-    "@codemirror/view": "6.13.0",
+    "@codemirror/view": "6.13.2",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.9.0",
-    "@formatjs/intl-displaynames": "6.4.0",
+    "@formatjs/intl-datetimeformat": "6.10.0",
+    "@formatjs/intl-displaynames": "6.5.0",
     "@formatjs/intl-getcanonicallocales": "2.2.1",
-    "@formatjs/intl-locale": "3.3.1",
-    "@formatjs/intl-numberformat": "8.6.0",
-    "@formatjs/intl-pluralrules": "5.2.3",
-    "@formatjs/intl-relativetimeformat": "11.2.3",
+    "@formatjs/intl-listformat": "7.4.0",
+    "@formatjs/intl-locale": "3.3.2",
+    "@formatjs/intl-numberformat": "8.7.0",
+    "@formatjs/intl-pluralrules": "5.2.4",
+    "@formatjs/intl-relativetimeformat": "11.2.4",
     "@fullcalendar/core": "6.1.8",
     "@fullcalendar/daygrid": "6.1.8",
     "@fullcalendar/interaction": "6.1.8",
     "@fullcalendar/list": "6.1.8",
     "@fullcalendar/timegrid": "6.1.8",
     "@lezer/highlight": "1.1.6",
-    "@lit-labs/context": "0.3.2",
+    "@lit-labs/context": "0.3.3",
     "@lit-labs/motion": "1.0.3",
-    "@lit-labs/virtualizer": "2.0.2",
+    "@lit-labs/virtualizer": "2.0.3",
     "@lrnwebcomponents/simple-tooltip": "7.0.2",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -165,7 +166,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.0.0-pre.9",
+    "@material/web": "=1.0.0-pre.10",
     "@mdi/js": "7.2.96",
     "@mdi/svg": "7.2.96",
     "@polymer/app-layout": "3.1.0",
@@ -180,8 +181,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.0.8",
-    "@vaadin/vaadin-themable-mixin": "24.0.8",
+    "@vaadin/combo-box": "24.1.1",
+    "@vaadin/vaadin-themable-mixin": "24.1.1",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -191,18 +192,18 @@
     "app-datepicker": "5.0.1",
     "chart.js": "3.3.2",
     "comlink": "4.4.1",
-    "core-js": "3.30.2",
+    "core-js": "3.31.0",
     "cropperjs": "1.5.13",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "fuse.js": "6.6.2",
     "google-timezones-json": "1.1.0",
-    "hls.js": "1.4.5",
+    "hls.js": "1.4.6",
     "home-assistant-js-websocket": "8.0.1",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.4.0",
+    "intl-messageformat": "10.5.0",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
@@ -219,9 +220,9 @@
     "rrule": "2.7.2",
     "sortablejs": "1.15.0",
     "superstruct": "1.0.3",
-    "tinykeys": "1.4.0",
-    "tsparticles-engine": "2.9.3",
-    "tsparticles-preset-links": "2.9.3",
+    "tinykeys": "2.1.0",
+    "tsparticles-engine": "2.10.1",
+    "tsparticles-preset-links": "2.10.1",
     "unfetch": "5.0.0",
     "vis-data": "7.1.6",
     "vis-network": "9.1.6",

script/gulp/locale-data.js

@@ -17,6 +17,7 @@ const modules = {
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
   "intl-displaynames": "DisplayNames",
+  "intl-listformat": "ListFormat",
 };
 
 gulp.task("create-locale-data", (done) => {

script/gulp/webpack.cjs

@@ -43,7 +43,7 @@ const createWebpackConfig = ({
   return {
     name,
     mode: isProdBuild ? "production" : "development",
-    target: ["web", latestBuild ? "es2017" : "es5"],
+    target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
     // For tests/CI, source maps are skipped to gain build speed
     // For production, generate source maps for accurate stack traces without source code
     // For development, generate "cheap" versions that can map to original line numbers
@@ -86,6 +86,13 @@ const createWebpackConfig = ({
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
+      splitChunks: {
+        // Disable splitting for web workers with ESM output
+        // Imports of external chunks are broken
+        chunks: latestBuild
+          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
+          : undefined,
+      },
     },
     plugins: [
       !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
@@ -140,9 +147,12 @@ const createWebpackConfig = ({
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid": "@lit-labs/virtualizer/layouts/grid.js",
+        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
+        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
       },
     },
     output: {
+      module: latestBuild,
       filename: ({ chunk }) =>
         !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
@@ -179,7 +189,7 @@ const createWebpackConfig = ({
           : undefined,
     },
     experiments: {
-      topLevelAwait: true,
+      outputModule: true,
     },
   };
 };

script/merge_requirements.js

@@ -22,6 +22,11 @@ yarnPath: .yarn/releases/yarn-${core.packageManager.split("@")[1]}.cjs
 `
 );
 
+fs.copyFileSync(
+  `./homeassistant-frontend/.browserslistrc`,
+  `.browserslistrc`
+);
+
 fs.copyFileSync(
   `./homeassistant-frontend/src/translations/translationMetadata.json`,
   `./src/localize/languages/translationMetadata.json`

src/dashboards/hacs-dashboard.ts

@@ -18,7 +18,7 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoize from "memoize-one";
 import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
-import { LocalStorage } from "../../homeassistant-frontend/src/common/decorators/local-storage";
+import { storage } from "../../homeassistant-frontend/src/common/decorators/storage";
 import { mainWindow } from "../../homeassistant-frontend/src/common/dom/get_main_window";
 import { stopPropagation } from "../../homeassistant-frontend/src/common/dom/stop_propagation";
 import { navigate } from "../../homeassistant-frontend/src/common/navigate";
@@ -86,16 +86,16 @@ export class HacsDashboard extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  @LocalStorage("hacs-table-filters", true, false)
+  @storage({key: "hacs-table-filters", state: true, subscribe: false})
   private activeFilters?: string[] = [];
 
-  @LocalStorage("hacs-table-sort", true, false)
+  @storage({key: "hacs-table-sort", state: true, subscribe: false})
   private activeSort?: { column: string; direction: SortingDirection };
 
-  @LocalStorage("hacs-active-search", true, false)
+  @storage({key: "hacs-active-search", state: true, subscribe: false})
   private _activeSearch?: string;
 
-  @LocalStorage("hacs-table-active-columns", true, false)
+  @storage({key: "hacs-table-active-columns", state: true, subscribe: false})
   private _tableColumns: Record<tableColumnDefaultsType, boolean> = tableColumnDefaults;
 
   protected async firstUpdated(changedProperties: PropertyValues): Promise<void> {

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     // Language Options
-    "target": "ES2017",
+    "target": "ES2021",
     "lib": [
-      "ES2017",
+      "ES2021",
       "DOM",
       "DOM.Iterable",
       "WebWorker"