Remove unneeded close dialog calls

* Add dialog to upload a backup file (#22405)

* Add dialog to upload a backup file

* Prosess feedback

* Remoe unused definition

* Early pushout of changes to the backup panel (#22321)

* Eary pushout of changes to the backup panel

* Add location icons

* Path is optional

* Set backupSlug from route

* No need for subscription mixin

* update

* Reorder

* init details

* Fix import

* Improve backup screen and navigation (#22827)

* Add location page

* Start dashboard

* Move list to dashboard

* Add mocked config page

* Fix hardcoded boolean

* Add summary card

* Use new format for BackupAgent

* Use new API

* Rename to ha-backup-summary-card

* Use new api

* Fix backup agents

* Rename backup slug to backup id (#22876)

* Add delete backup action to datatable (#22867)

* Create generate backup dialog (#22866)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Add backup details page (#22884)

* Add new backup dialog to choose between automatic and manual (#22895)

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

* Improve download backup (#22905)

* Rename remove to delete in backup websocket type (#22902)

* Use bytes for backup size (#22909)

* Use default backup instead of automatic backup (#22915)

* Update generate backup api (#22943)

Use new backup api for generate backup

* Improve details page for new backup (#22946)

* Add content of backup in detail page

* Add restore button

* Add note

* Use disabled

* Fix backup generate

* Use options to WS command backup/restore (#22950)

* Add addons picker in generate backup dialog (#22951)

* Add addons picker in generate backup dialog

* Change condition

* Fix label

* Fix local addons

* Review

* Add local addon in addon mode is all

* Fix local addon folder

* Use addon picker inside data picker

* Fetch addons info in detail page

* Fetch addon inside component

* Rename agents picker

* Restrict generate backup content for core backup (#22958)

* Fix addon mode all

* Use event to check if a backup is in progress (#22960)

* Use event to check if a backup is in progress

* Update src/panels/config/backup/ha-config-backup-dashboard.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Force enable home assistant settings when history is selected in backup (#22961)

* Backup default config (#22954)

* WIP default config

* Add addons

* save data

* add icon

* basics of change encryption key

* Update dialog-change-backup-password.ts

* use default config when manually triggering default backup

* limit to hassio

* enforce encryption key, manual use manual one

* Update ha-config-backup-dashboard.ts

* Add suggested password and copy buttons

* Add download emergency kit button

* review

* fix

* Update ha-config-backup-default-config.ts

* Update ha-config-backup-default-config.ts

* Update default backup settings (#23109)

* Only display addons and folder for hassio (#23118)

* Use new backup dashboard page for hassio backup (#23161)

* Add support for copies and days for backup retention (#23128)

* Add upload dialog for backup (#23139)

* Improve generate backup dialog (#23167)

* Propose to use encryption key if available when restoring a backup (#23164)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Add encryption key onboarding (#23180)

* Fix attributes broken by the warning fixes (#23182)

* Don't allow any more eslint warnings (#23181)

* Use dedicated endpoint to generate backup with default settings (#23224)

* Add onboarding dialog for backups (#23225)

* Add onboarding flow for backups

* Add welcome screen

* Add progress and status for backup dashboard (#23222)

* Handle backup state

* Add summary card

* Use difference in days

* Rename local backups and show icon (#23238)

* Improve backup onboarding (#23241)

* Do not navigate to config page after onboarding

* Use casita image and center text

* fix lint

* Rename stored and default to strategy backup

* Update

* Fix icon and add type in datatable

* Use strategy in more places

* Fix list item overflow

---------

Co-authored-by: Joakim Sørensen <ludeeus@ludeeus.dev>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

.browserslistrc

@@ -1,39 +1,36 @@
 [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
+# Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills, etc.
+# It is served to browsers meeting the following requirements:
+# - released in the last year + current alpha/beta versions
+# - Firefox extended support release (ESR)
+# - with global utilization at or above 0.5%
+# - exclude dead browsers (no security maintenance for 2+ years)
+# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+unreleased versions
+last 1 year
+Firefox ESR
+>= 0.5%
+not dead
 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.
+# - with global utilization at or above 0.05%
+# - exclude dead browsers (no security maintenance for 2+ years)
+# - exclude Opera Mini which does not support web sockets
 unreleased versions
 last 7 years
-> 0.05% and supports websockets
+>= 0.05%
+not dead
+not op_mini all
+
+[legacy-sw]
+# Same as legacy plus supports service workers
+unreleased versions
+last 7 years
+>= 0.05% and supports serviceworkers
+not dead
+not op_mini all

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.11
+FROM mcr.microsoft.com/devcontainers/python:3.12
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.devcontainer/devcontainer.json

@@ -5,8 +5,10 @@
     "context": ".."
   },
   "appPort": "8124:8123",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
+    "DEV_CONTAINER": "1",
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
   "customizations": {

.eslintrc.json

@@ -1,130 +0,0 @@
-{
-  "extends": [
-    "airbnb-base",
-    "airbnb-typescript/base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:wc/recommended",
-    "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "modules": true
-    },
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "./webpack.config.cjs"
-      }
-    }
-  },
-  "globals": {
-    "__DEV__": false,
-    "__DEMO__": false,
-    "__BUILD__": false,
-    "__VERSION__": false,
-    "__STATIC_PATH__": false,
-    "__SUPERVISOR__": false,
-    "Polymer": true
-  },
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "rules": {
-    "class-methods-use-this": "off",
-    "new-cap": "off",
-    "prefer-template": "off",
-    "object-shorthand": "off",
-    "func-names": "off",
-    "no-underscore-dangle": "off",
-    "strict": "off",
-    "no-plusplus": "off",
-    "no-bitwise": "error",
-    "comma-dangle": "off",
-    "vars-on-top": "off",
-    "no-continue": "off",
-    "no-param-reassign": "off",
-    "no-multi-assign": "off",
-    "no-console": "error",
-    "radix": "off",
-    "no-alert": "off",
-    "no-nested-ternary": "off",
-    "prefer-destructuring": "off",
-    "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": "off",
-    "import/prefer-default-export": "off",
-    "import/no-default-export": "off",
-    "import/no-unresolved": "off",
-    "import/no-cycle": "off",
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "ts": "never",
-        "js": "never"
-      }
-    ],
-    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "object-curly-newline": "off",
-    "default-case": "off",
-    "wc/no-self-class": "off",
-    "no-shadow": "off",
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-shadow": ["error"],
-    "@typescript-eslint/naming-convention": [
-      "off",
-      {
-        "selector": "default",
-        "format": ["camelCase", "snake_case"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": ["variable"],
-        "format": ["camelCase", "snake_case", "UPPER_CASE"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": "typeLike",
-        "format": ["PascalCase"]
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": "off",
-    "unused-imports/no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "varsIgnorePattern": "^_",
-        "args": "after-used",
-        "argsIgnorePattern": "^_",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "unused-imports/no-unused-imports": "error",
-    "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off",
-    "lit/no-native-attributes": "warn",
-    "lit/no-this-assign-in-render": "warn",
-    "lit-a11y/click-events-have-key-events": ["off"],
-    "lit-a11y/no-autofocus": "off",
-    "lit-a11y/alt-text": "warn",
-    "lit-a11y/anchor-is-valid": "warn",
-    "lit-a11y/role-has-required-aria-attrs": "warn"
-  },
-  "plugins": ["disable", "unused-imports"],
-  "processor": "disable/disable"
-}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please do not report issues for custom cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
@@ -24,6 +24,7 @@ body:
           required: true
         - label: I have tried a different browser to see if it is related to my browser.
           required: true
+        - label: I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.
   - type: markdown
     attributes:
       value: |

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,9 +2,7 @@
   You are amazing! Thanks for contributing to our project!
   Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
 -->
-
 ## Breaking change
-
 <!--
   If your PR contains a breaking change for existing users, it is important
   to tell them what breaks, how to make it work again and why we did this.
@@ -13,8 +11,8 @@
   Note: Remove this section if this PR is NOT a breaking change.
 -->
 
-## Proposed change
 
+## Proposed change
 <!--
   Describe the big picture of your changes here to communicate to the
   maintainers why we should accept this pull request. If it fixes a bug
@@ -22,8 +20,8 @@
   in the additional information section.
 -->
 
-## Type of change
 
+## Type of change
 <!--
   What type of change does your PR introduce to the Home Assistant frontend?
   NOTE: Please, check only 1! box!
@@ -38,7 +36,6 @@
 - [ ] Code quality improvements to existing code or addition of tests
 
 ## Example configuration
-
 <!--
   Supplying a configuration snippet, makes it easier for a maintainer to test
   your PR.
@@ -49,7 +46,6 @@
 ```
 
 ## Additional information
-
 <!--
   Details are important, and help maintainers processing your PR.
   Please be sure to fill out additional details, if applicable.
@@ -60,7 +56,6 @@
 - Link to documentation pull request:
 
 ## Checklist
-
 <!--
   Put an `x` in the boxes that apply. You can also fill these out after
   creating the PR. If you're unsure about any of them, don't hesitate to ask.

.github/labeler.yml

@@ -1,31 +1,51 @@
 Build:
-  - build-scripts/**
-  - .browserslistrc
-  - gulpfile.js
+  - changed-files:
+      - any-glob-to-any-file:
+          - build-scripts/**
+          - .browserslistrc
+          - gulpfile.js
 
 Cast:
-  - cast/src/**
-  - src/cast/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - cast/src/**
+          - src/cast/**
 
 Demo:
-  - demo/src/**
-  - src/fake_data/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - demo/src/**
+          - src/fake_data/**
 
 Design:
-  - gallery/src/**
-  - src/fake_data/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - gallery/src/**
+          - src/fake_data/**
 
 Dependencies:
-  - package.json
-  - renovate.json
-  - yarn.lock
-  - .yarn/**
-  - .yarnrc.yml
-  - .nvmrc
+  - any:
+      - changed-files:
+          # Match when only these files are changed (i.e. don't match PRs that happen to add or remove packages)
+          - any-glob-to-all-files:
+              - package.json
+              - renovate.json
+              - yarn.lock
+              - .yarn/**
+              - .yarnrc.yml
+              - .nvmrc
+      # Dependabot and Renovate branches always match (i.e. compatibility tweaks by members considered minor)
+      - head-branch:
+          - "^renovate/"
+          - "^dependabot/"
 
 GitHub Actions:
-  - .github/workflows/**
-  - .github/*.yml
+  - changed-files:
+      - any-glob-to-any-file:
+          - .github/workflows/**
+          - .github/*.yml
 
 Supervisor:
-  - hassio/src/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - hassio/src/**

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -24,30 +24,39 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        id: setup-node
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: "node_modules"
+          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
       - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
-      - name: Check for duplicate dependencies
-        run: yarn dedupe --check
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v3.3.1
+        uses: actions/cache@v4.2.0
         with:
           path: |
             node_modules/.cache/prettier
             node_modules/.cache/eslint
+            node_modules/.cache/typescript
           key: lint-${{ github.sha }}
           restore-keys: lint-
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
         run: yarn run lint:types
+      - name: Run lit-analyzer
+        run: yarn run lint:lit --quiet
       - name: Run prettier
         run: yarn run lint:prettier
   test:
@@ -55,16 +64,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        id: setup-node
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: "node_modules"
+          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
       - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
       - name: Build resources
-        run: ./node_modules/.bin/gulp build-translations build-locale-data
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
@@ -73,33 +90,61 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        id: setup-node
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: "node_modules"
+          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
       - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
       - name: Build Application
         run: ./node_modules/.bin/gulp build-app
         env:
           IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/upload-artifact@v4.4.3
+        with:
+          name: frontend-bundle-stats
+          path: build/stats/*.json
+          if-no-files-found: error
   supervisor:
     name: Build supervisor
     needs: [lint, test]
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        id: setup-node
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: "node_modules"
+          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
       - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
       - name: Build Application
         run: ./node_modules/.bin/gulp build-hassio
         env:
           IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/upload-artifact@v4.4.3
+        with:
+          name: supervisor-bundle-stats
+          path: build/stats/*.json
+          if-no-files-found: error

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -58,12 +58,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -21,10 +21,10 @@ 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/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@v4.3.0
+        uses: actions/labeler@v5.0.0
         with:
           sync-labels: true

.github/workflows/lock.yml

@@ -9,9 +9,10 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4.0.1
+      - uses: dessant/lock-threads@v5.0.1
         with:
           github-token: ${{ github.token }}
+          process-only: "issues, prs"
           issue-lock-inactive-days: "30"
           issue-exclude-created-before: "2020-10-01T00:00:00Z"
           issue-lock-reason: ""

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,7 +42,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
 
       - name: Bump version
-        run: script/version_bump.cjs nightly
+        run: script/version_bump.js nightly
 
       - name: Build nightly Python wheels
         run: |
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -0,0 +1,25 @@
+name: RelativeCI
+
+on:
+  workflow_run:
+    workflows: [CI]
+    types:
+      - completed
+
+jobs:
+  upload:
+    name: Upload stats
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    strategy:
+      matrix:
+        bundle: [frontend, supervisor]
+        build: [modern, legacy]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/agent-action@v2.1.14
+        with:
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
+          token: ${{ github.token }}
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -23,18 +23,18 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v0.1.15
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: |
             dist/*.whl
@@ -74,10 +74,68 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2023.04.0
+        uses: home-assistant/wheels@2024.11.0
         with:
-          abi: cp311
+          abi: cp312
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}
           requirements: "requirements.txt"
+
+  release-landing-page:
+    name: Release landing-page frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4.2.2
+      - name: Setup Node
+        uses: actions/setup-node@v4.1.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build landing-page
+        run: landing-page/script/build_landing_page
+      - name: Tar folder
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.1.0
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+
+  release-supervisor:
+    name: Release supervisor frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4.2.2
+      - name: Setup Node
+        uses: actions/setup-node@v4.1.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build supervisor
+        run: hassio/script/build_hassio
+      - name: Tar folder
+        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.1.0
+        with:
+          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v8.0.0
+        uses: actions/stale@v9.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.2
 
       - name: Upload Translations
         run: |

.gitignore

@@ -47,3 +47,9 @@ src/cast/dev_const.ts
 
 # Home Assistant config
 /config/
+
+# Jetbrains
+/.idea/
+
+# test coverage
+test/coverage/

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 yarn run lint-staged --relative --shell "/bin/bash"

.nvmrc

@@ -1 +1 @@
-18
+lts/iron

.prettierignore

@@ -1,3 +1,4 @@
 CLA.md
 CODE_OF_CONDUCT.md
 LICENSE.md
+PULL_REQUEST_TEMPLATE.md

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "runem.lit-plugin",
     "github.vscode-pull-request-github",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "vitest.explorer"
   ]
 }

.vscode/tasks.json

@@ -100,6 +100,38 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Develop Landing Page",
+      "type": "gulp",
+      "task": "develop-landing-page",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
     {
       "label": "Develop Demo",
       "type": "gulp",

.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch

@@ -0,0 +1,18 @@
+diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
+index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
+--- a/dist/hls.light.mjs
++++ b/dist/hls.light.mjs
+@@ -20523,9 +20523,9 @@ class Hls {
+ }
+ Hls.defaultConfig = void 0;
+ 
+-var KeySystemFormats = empty.KeySystemFormats;
+-var KeySystems = empty.KeySystems;
+-var SubtitleStreamController = empty.SubtitleStreamController;
+-var TimelineController = empty.TimelineController;
++var KeySystemFormats = empty;
++var KeySystems = empty;
++var SubtitleStreamController = empty;
++var TimelineController = empty;
+ export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
+ //# sourceMappingURL=hls.light.mjs.map

.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch

@@ -1,39 +0,0 @@
-diff --git a/modular/sortable.complete.esm.js b/modular/sortable.complete.esm.js
-index 02e9f2d6bebeb430fe6e7c1cc3f9c3c9df051f14..bb8268b0844a1faa4108cc92c0be2a3dbaf23f83 100644
---- a/modular/sortable.complete.esm.js
-+++ b/modular/sortable.complete.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index b04c8b4634f7c6b4ef1aadbb48afe6564306dea9..39a107163c8c336ebd669b5ea8a936af87e1c1e7 100644
---- a/modular/sortable.core.esm.js
-+++ b/modular/sortable.core.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js
-index 6ec7ed1bb557e21c2578200161e989c65d23150b..0a05475a22904472fac6c13f524c674da76584b0 100644
---- a/modular/sortable.esm.js
-+++ b/modular/sortable.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();

.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch

@@ -0,0 +1,60 @@
+diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
+index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa526090a00 100644
+--- a/modular/sortable.core.esm.js
++++ b/modular/sortable.core.esm.js
+@@ -1781,11 +1781,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         }
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
+           capture();
+-          if (elLastChild && elLastChild.nextSibling) {
+-            // the last draggable element is not the last node
+-            el.insertBefore(dragEl, elLastChild.nextSibling);
+-          } else {
+-            el.appendChild(dragEl);
++          try {
++            if (elLastChild && elLastChild.nextSibling) {
++              // the last draggable element is not the last node
++              el.insertBefore(dragEl, elLastChild.nextSibling);
++            } else {
++              el.appendChild(dragEl);
++            }
++          }
++          catch(err) {
++            return completed(false);
+           }
+           parentEl = el; // actualization
+ 
+@@ -1802,7 +1807,12 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         targetRect = getRect(target);
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
+           capture();
+-          el.insertBefore(dragEl, firstChild);
++          try {
++            el.insertBefore(dragEl, firstChild);
++          }
++          catch(err) {
++            return completed(false);
++          }
+           parentEl = el; // actualization
+ 
+           changed();
+@@ -1849,10 +1859,15 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           _silent = true;
+           setTimeout(_unsilent, 30);
+           capture();
+-          if (after && !nextSibling) {
+-            el.appendChild(dragEl);
+-          } else {
+-            target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
++          try {
++            if (after && !nextSibling) {
++              el.appendChild(dragEl);
++            } else {
++              target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
++            }
++          }
++          catch(err) {
++            return completed(false);
+           }
+ 
+           // Undo chrome's scroll adjustment (has no effect on other browsers)

.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch

@@ -0,0 +1,55 @@
+diff --git a/build/inject-manifest.js b/build/inject-manifest.js
+index 60e3d2bb51c11a19fbbedbad65e101082ec41c36..fed6026630f43f86e25446383982cf6fb694313b 100644
+--- a/build/inject-manifest.js
++++ b/build/inject-manifest.js
+@@ -104,7 +104,7 @@ async function injectManifest(config) {
+             replaceString: manifestString,
+             searchString: options.injectionPoint,
+         });
+-        filesToWrite[options.swDest] = source;
++        filesToWrite[options.swDest] = source.replace(url, encodeURI(upath_1.default.basename(destPath)));
+         filesToWrite[destPath] = map;
+     }
+     else {
+diff --git a/build/lib/translate-url-to-sourcemap-paths.js b/build/lib/translate-url-to-sourcemap-paths.js
+index 3220c5474eeac6e8a56ca9b2ac2bd9be48529e43..5f003879a904d4840529a42dd056d288fd213771 100644
+--- a/build/lib/translate-url-to-sourcemap-paths.js
++++ b/build/lib/translate-url-to-sourcemap-paths.js
+@@ -22,7 +22,7 @@ function translateURLToSourcemapPaths(url, swSrc, swDest) {
+         const possibleSrcPath = upath_1.default.resolve(upath_1.default.dirname(swSrc), url);
+         if (fs_extra_1.default.existsSync(possibleSrcPath)) {
+             srcPath = possibleSrcPath;
+-            destPath = upath_1.default.resolve(upath_1.default.dirname(swDest), url);
++            destPath = `${swDest}.map`;
+         }
+         else {
+             warning = `${errors_1.errors['cant-find-sourcemap']} ${possibleSrcPath}`;
+diff --git a/src/inject-manifest.ts b/src/inject-manifest.ts
+index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f5070cad3 100644
+--- a/src/inject-manifest.ts
++++ b/src/inject-manifest.ts
+@@ -129,7 +129,10 @@ export async function injectManifest(
+       searchString: options.injectionPoint!,
+     });
+ 
+-    filesToWrite[options.swDest] = source;
++    filesToWrite[options.swDest] = source.replace(
++      url!,
++      encodeURI(upath.basename(destPath)),
++    );
+     filesToWrite[destPath] = map;
+   } else {
+     // If there's no sourcemap associated with swSrc, a simple string
+diff --git a/src/lib/translate-url-to-sourcemap-paths.ts b/src/lib/translate-url-to-sourcemap-paths.ts
+index 072eac40d4ef5d095a01cb7f7e392a9e034853bd..f0bbe69e88ef3a415de18a7e9cb264daea273d71 100644
+--- a/src/lib/translate-url-to-sourcemap-paths.ts
++++ b/src/lib/translate-url-to-sourcemap-paths.ts
+@@ -28,7 +28,7 @@ export function translateURLToSourcemapPaths(
+     const possibleSrcPath = upath.resolve(upath.dirname(swSrc), url);
+     if (fse.existsSync(possibleSrcPath)) {
+       srcPath = possibleSrcPath;
+-      destPath = upath.resolve(upath.dirname(swDest), url);
++      destPath = `${swDest}.map`;
+     } else {
+       warning = `${errors['cant-find-sourcemap']} ${possibleSrcPath}`;
+     }

.yarnrc.yml

@@ -1,11 +1,9 @@
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""
 
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

README.md

@@ -27,3 +27,5 @@ A complete guide can be found at the following [link](https://www.home-assistant
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
 We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
+
+[![Home Assistant - A project from the Open Home Foundation](https://www.openhomefoundation.org/badges/home-assistant.png)](https://www.openhomefoundation.org/)

build-scripts/.eslintrc.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-console": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "import/no-dynamic-require": "off",
-    "global-require": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "prefer-arrow-callback": "off"
-  }
-}

build-scripts/README.md

@@ -15,7 +15,7 @@ The Home Assistant build pipeline contains various steps to prepare a build.
 
 Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands.
 
-We currently rely on Webpack but also have experimental Rollup support. Both of these programs bundle the converted files in both production and development.
+We currently rely on Webpack. Both of these programs bundle the converted files in both production and development.
 
 For development, bundling is optional. We just want to get the right files in the browser.
 

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

@@ -0,0 +1,183 @@
+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,
+    edge: 14,
+    firefox: 39,
+    ios: 10.3,
+    opera: 29,
+    opera_mobile: 29,
+    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,
+    edge: 12,
+    firefox: 18,
+    ios: 10.0,
+    opera: 36,
+    opera_mobile: 36,
+    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: {
+    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",
+          "DurationFormat",
+          "DisplayNames",
+          "ListFormat",
+          "NumberFormat",
+          "PluralRules",
+          "RelativeTimeFormat",
+        ].map((obj) => [
+          obj,
+          { key: "intl-other", module: join(POLYFILL_DIR, "intl-polyfill.ts") },
+        ])
+      ),
+    },
+  },
+};
+
+// Create plugin using the same factory as for CoreJS
+export default defineProvider(
+  ({ createMetaResolver, debug, shouldInjectPolyfill }) => {
+    const resolvePolyfill = createMetaResolver(polyfillMap);
+    return {
+      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

@@ -1,6 +1,9 @@
 const path = require("path");
 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
@@ -12,11 +15,7 @@ module.exports.sourceMapURL = () => {
 };
 
 // Files from NPM Packages that should not be imported
-// eslint-disable-next-line unused-imports/no-unused-vars
-module.exports.ignorePackages = ({ latestBuild }) => [
-  // Part of yaml.js and only used for !!js functions that we don't use
-  require.resolve("esprima"),
-];
+module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
@@ -35,8 +34,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       require.resolve(
         path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
       ),
-    // This polyfill is loaded in workers to support ES5, filter it out.
-    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
@@ -50,12 +47,17 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __DEV__: !isProdBuild,
-  __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+  __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
+  __HASS_URL__: `\`${
+    "HASS_URL" in process.env
+      ? process.env["HASS_URL"]
+      : "${location.protocol}//${location.host}"
+  }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
   ),
@@ -82,7 +84,12 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   sourceMap: !isTestBuild,
 });
 
-module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
+module.exports.babelOptions = ({
+  latestBuild,
+  isProdBuild,
+  isTestBuild,
+  sw,
+}) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -90,26 +97,22 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     setPublicClassFields: true,
     setSpreadProperties: true,
   },
-  browserslistEnv: latestBuild ? "modern" : "legacy",
-  // Must be unambiguous because some dependencies are CommonJS only
-  sourceType: "unambiguous",
+  browserslistEnv: latestBuild ? "modern" : `legacy${sw ? "-sw" : ""}`,
   presets: [
     [
       "@babel/preset-env",
       {
-        useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.32", proposals: true },
+        useBuiltIns: "usage",
+        corejs: dependencies["core-js"],
         bugfixes: true,
+        shippedProposals: true,
       },
     ],
     "@babel/preset-typescript",
   ],
   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,
@@ -120,35 +123,78 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "template-html-minifier",
       {
         modules: {
-          lit: [
-            "html",
-            { name: "svg", encapsulation: "svg" },
-            { name: "css", encapsulation: "style" },
-          ],
-          "@polymer/polymer/lib/utils/html-tag": ["html"],
+          ...Object.fromEntries(
+            ["lit", "lit-element", "lit-html"].map((m) => [
+              m,
+              [
+                "html",
+                { name: "svg", encapsulation: "svg" },
+                { name: "css", encapsulation: "style" },
+              ],
+            ])
+          ),
+          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
         },
         strictCSS: true,
         htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: true, // we can turn this off in case of false positives
+        failOnError: false, // we can turn this off in case of false positives
       },
     ],
     // Import helpers and regenerator from runtime package
     [
       "@babel/plugin-transform-runtime",
-      { version: require("../package.json").dependencies["@babel/runtime"] },
+      { version: dependencies["@babel/runtime"] },
     ],
-    // Support  some proposals still in TC39 process
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    // Transpile decorators (still in TC39 process)
+    // Modern browsers support class fields and private methods, but transform is required with the older decorator version dictated by Lit
+    [
+      "@babel/plugin-proposal-decorators",
+      { version: "2018-09", decoratorsBeforeExport: true },
+    ],
+    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-transform-private-methods",
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
     /node_modules[\\/]core-js/,
-    /node_modules[\\/]webpack[\\/]buildin/,
   ],
   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/(?:ecma402-abstract|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
+      sourceType: "unambiguous",
+      include: /\/node_modules\//,
+      exclude: [
+        "element-internals-polyfill",
+        "@?lit(?:-labs|-element|-html)?",
+      ].map((p) => new RegExp(`/node_modules/${p}/`)),
+    },
+  ],
 });
 
-const nameSuffix = (latestBuild) => (latestBuild ? "-latest" : "-es5");
+const nameSuffix = (latestBuild) => (latestBuild ? "-modern" : "-legacy");
 
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
@@ -182,9 +228,14 @@ const publicPath = (latestBuild, root = "") =>
 module.exports.config = {
   app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
     return {
-      name: "app" + nameSuffix(latestBuild),
+      name: "frontend" + nameSuffix(latestBuild),
       entry: {
-        service_worker: "./src/entrypoints/service_worker.ts",
+        "service-worker": !latestBuild
+          ? {
+              import: "./src/entrypoints/service-worker.ts",
+              layer: "sw",
+            }
+          : "./src/entrypoints/service-worker.ts",
         app: "./src/entrypoints/app.ts",
         authorize: "./src/entrypoints/authorize.ts",
         onboarding: "./src/entrypoints/onboarding.ts",
@@ -280,4 +331,17 @@ module.exports.config = {
       },
     };
   },
+
+  landingPage({ isProdBuild, latestBuild }) {
+    return {
+      name: "landing-page" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.landingPage_dir, "src/entrypoint.js"),
+      },
+      outputPath: outputPath(paths.landingPage_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+    };
+  },
 };

build-scripts/env.cjs

@@ -2,26 +2,22 @@ const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.cjs");
 
+const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
+
 module.exports = {
-  useRollup() {
-    return process.env.ROLLUP === "1";
-  },
-  useWDS() {
-    return process.env.WDS === "1";
-  },
   isProdBuild() {
     return (
       process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
     );
   },
   isStatsBuild() {
-    return process.env.STATS === "1";
+    return isTrue(process.env.STATS);
   },
   isTestBuild() {
-    return process.env.IS_TEST === "true";
+    return isTrue(process.env.IS_TEST);
   },
   isNetlify() {
-    return process.env.NETLIFY === "true";
+    return isTrue(process.env.NETLIFY);
   },
   version() {
     const version = fs
@@ -32,4 +28,7 @@ module.exports = {
     }
     return version[1];
   },
+  isDevContainer() {
+    return isTrue(process.env.DEV_CONTAINER);
+  },
 };

build-scripts/eslint.config.mjs

@@ -0,0 +1,16 @@
+import rootConfig from "../eslint.config.mjs";
+
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+      "import/no-extraneous-dependencies": "off",
+      "import/extensions": "off",
+      "import/no-dynamic-require": "off",
+      "global-require": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "prefer-arrow-callback": "off",
+    },
+  },
+];

build-scripts/gulp/app.js

@@ -6,11 +6,9 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./locale-data.js";
-import "./rollup.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./wds.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-app",
@@ -27,11 +25,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-app",
-    env.useWDS()
-      ? "wds-watch-app"
-      : env.useRollup()
-      ? "rollup-watch-app"
-      : "webpack-watch-app"
+    "rspack-watch-app"
   )
 );
 
@@ -44,9 +38,20 @@ gulp.task(
     "clean",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
-    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
+    "rspack-prod-app",
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
     // Don't compress running tests
-    ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
+gulp.task(
+  "analyze-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-app"
   )
 );

build-scripts/gulp/cast.js

@@ -1,12 +1,10 @@
 import gulp from "gulp";
-import env from "../env.cjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
-import "./rollup.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-cast",
@@ -19,7 +17,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     "gen-pages-cast-dev",
-    env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
+    "rspack-dev-server-cast"
   )
 );
 
@@ -33,7 +31,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
+    "rspack-prod-cast",
     "gen-pages-cast-prod"
   )
 );

build-scripts/gulp/clean.js

@@ -38,3 +38,14 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-landing-page",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([
+      paths.landingPage_output_root,
+      paths.landingPage_build,
+      paths.build_dir,
+    ])
+  )
+);

build-scripts/gulp/compress.js

@@ -1,16 +1,53 @@
 // Tasks to compress
 
+import { constants } from "node:zlib";
 import gulp from "gulp";
-import zopfli from "gulp-zopfli-green";
+import brotli from "gulp-brotli";
 import paths from "../paths.cjs";
 
-const zopfliOptions = { threshold: 150 };
+const filesGlob = "*.{js,json,css,svg,xml}";
+const brotliOptions = {
+  skipLarger: true,
+  params: {
+    [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
+  },
+};
 
-const compressDist = (rootDir) =>
+const compressModern = (rootDir, modernDir) =>
   gulp
-    .src([`${rootDir}/**/*.{js,json,css,svg}`])
-    .pipe(zopfli(zopfliOptions))
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+      base: rootDir,
+      allowEmpty: true,
+    })
+    .pipe(brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-gulp.task("compress-app", () => compressDist(paths.app_output_root));
-gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));
+const compressOther = (rootDir, modernDir) =>
+  gulp
+    .src(
+      [
+        `${rootDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
+        `!${rootDir}/{sw-modern,service_worker}.js`,
+        `${rootDir}/{authorize,onboarding}.html`,
+      ],
+      { base: rootDir, allowEmpty: true }
+    )
+    .pipe(brotli(brotliOptions))
+    .pipe(gulp.dest(rootDir));
+
+const compressAppModern = () =>
+  compressModern(paths.app_output_root, paths.app_output_latest);
+const compressHassioModern = () =>
+  compressModern(paths.hassio_output_root, paths.hassio_output_latest);
+
+const compressAppOther = () =>
+  compressOther(paths.app_output_root, paths.app_output_latest);
+const compressHassioOther = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest);
+
+gulp.task("compress-app", gulp.parallel(compressAppModern, compressAppOther));
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(compressHassioModern, compressHassioOther)
+);

build-scripts/gulp/demo.js

@@ -1,13 +1,11 @@
 import gulp from "gulp";
-import env from "../env.cjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./rollup.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-demo",
@@ -24,7 +22,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-demo",
-    env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
+    "rspack-dev-server-demo"
   )
 );
 
@@ -39,7 +37,18 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
-    env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
+    "rspack-prod-demo",
     "gen-pages-demo-prod"
   )
 );
+
+gulp.task(
+  "analyze-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-demo"
+  )
+);

build-scripts/gulp/download-translations.js

@@ -1,15 +1,19 @@
 import fs from "fs/promises";
 import gulp from "gulp";
+import path from "path";
 import mapStream from "map-stream";
 import transform from "gulp-json-transform";
+import { LokaliseApi } from "@lokalise/node-api";
+import JSZip from "jszip";
 
-const inDirFrontend = "translations/frontend";
-const inDirBackend = "translations/backend";
+const inDir = "translations";
+const inDirFrontend = `${inDir}/frontend`;
+const inDirBackend = `${inDir}/backend`;
 const srcMeta = "src/translations/translationMetadata.json";
 const encoding = "utf8";
 
 function hasHtml(data) {
-  return /<[a-z][\s\S]*>/i.test(data);
+  return /<\S*>/i.test(data);
 }
 
 function recursiveCheckHasHtml(file, data, errors, recKey) {
@@ -68,8 +72,9 @@ gulp.task("convert-backend-translations", function () {
 });
 
 gulp.task("check-translations-html", function () {
-  // We exclude backend translations because they are not compliant with the HTML rule for now
-  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
+  return gulp
+    .src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`])
+    .pipe(checkHtml());
 });
 
 gulp.task("check-all-files-exist", async function () {
@@ -89,7 +94,88 @@ gulp.task("check-all-files-exist", async function () {
   await Promise.allSettled(writings);
 });
 
+const lokaliseProjects = {
+  backend: "130246255a974bd3b5e8a1.51616605",
+  frontend: "3420425759f6d6d241f598.13594006",
+};
+
+gulp.task("fetch-lokalise", async function () {
+  let apiKey;
+  try {
+    apiKey =
+      process.env.LOKALISE_TOKEN ||
+      (await fs.readFile(".lokalise_token", { encoding }));
+  } catch {
+    throw new Error(
+      "An Administrator Lokalise API token is required to download the latest set of translations. Place your token in a new file `.lokalise_token` in the repo root directory."
+    );
+  }
+  const lokaliseApi = new LokaliseApi({ apiKey });
+
+  const mkdirPromise = Promise.all([
+    fs.mkdir(inDirFrontend, { recursive: true }),
+    fs.mkdir(inDirBackend, { recursive: true }),
+  ]);
+
+  await Promise.all(
+    Object.entries(lokaliseProjects).map(([project, projectId]) =>
+      lokaliseApi
+        .files()
+        .download(projectId, {
+          format: "json",
+          original_filenames: false,
+          replace_breaks: false,
+          json_unescaped_slashes: true,
+          export_empty_as: "skip",
+          filter_data: ["verified"],
+        })
+        .then((download) => fetch(download.bundle_url))
+        .then((response) => {
+          if (response.status === 200 || response.status === 0) {
+            return response.arrayBuffer();
+          }
+          throw new Error(response.statusText);
+        })
+        .then(JSZip.loadAsync)
+        .then(async (contents) => {
+          await mkdirPromise;
+          return Promise.all(
+            Object.keys(contents.files).map(async (filename) => {
+              const file = contents.file(filename);
+              if (!file) {
+                // no file, probably a directory
+                return Promise.resolve();
+              }
+              return file
+                .async("nodebuffer")
+                .then((content) =>
+                  fs.writeFile(
+                    path.join(
+                      inDir,
+                      project,
+                      filename.split("/").splice(-1)[0]
+                    ),
+                    content,
+                    { flag: "w", encoding }
+                  )
+                );
+            })
+          );
+        })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
+    )
+  );
+});
+
 gulp.task(
-  "check-downloaded-translations",
-  gulp.series("check-translations-html", "check-all-files-exist")
+  "download-translations",
+  gulp.series(
+    "fetch-lokalise",
+    "convert-backend-translations",
+    "check-translations-html",
+    "check-all-files-exist"
+  )
 );

build-scripts/gulp/entry-html.js

@@ -1,28 +1,73 @@
 // Tasks to generate entry HTML
 
+import {
+  applyVersionsToRegexes,
+  compileRegex,
+  getPreUserAgentRegexes,
+} from "browserslist-useragent-regexp";
 import fs from "fs-extra";
 import gulp from "gulp";
 import { minify } from "html-minifier-terser";
 import template from "lodash.template";
-import path from "path";
+import { dirname, extname, resolve } from "node:path";
 import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import env from "../env.cjs";
 import paths from "../paths.cjs";
 
+// macOS companion app has no way to obtain the Safari version used by WKWebView,
+// and it is not in the default user agent string. So we add an additional regex
+// to serve modern based on a minimum macOS version. We take the minimum Safari
+// major version from browserslist and manually map that to a supported macOS
+// version. Note this assumes the user has kept Safari updated.
+const HA_MACOS_REGEX =
+  /Home Assistant\/[\d.]+ \(.+; macOS (\d+)\.(\d+)(?:\.(\d+))?\)/;
+const SAFARI_TO_MACOS = {
+  15: [10, 15, 0],
+  16: [11, 0, 0],
+  17: [12, 0, 0],
+  18: [13, 0, 0],
+};
+
+const getCommonTemplateVars = () => {
+  const browserRegexes = getPreUserAgentRegexes({
+    env: "modern",
+    allowHigherVersions: true,
+    mobileToDesktop: true,
+    throwOnMissing: true,
+  });
+  const minSafariVersion = browserRegexes.find(
+    (regex) => regex.family === "safari"
+  )?.matchedVersions[0][0];
+  const minMacOSVersion = SAFARI_TO_MACOS[minSafariVersion];
+  if (!minMacOSVersion) {
+    throw Error(
+      `Could not find minimum MacOS version for Safari ${minSafariVersion}.`
+    );
+  }
+  const haMacOSRegex = applyVersionsToRegexes(
+    [
+      {
+        family: "ha_macos",
+        regex: HA_MACOS_REGEX,
+        matchedVersions: [minMacOSVersion],
+        requestVersions: [minMacOSVersion],
+      },
+    ],
+    { ignorePatch: true, allowHigherVersions: true }
+  );
+  return {
+    modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
+  };
+};
+
 const renderTemplate = (templateFile, data = {}) => {
   const compiled = template(
     fs.readFileSync(templateFile, { encoding: "utf-8" })
   );
   return compiled({
     ...data,
-    useRollup: env.useRollup(),
-    useWDS: env.useWDS(),
     // Resolve any child/nested templates relative to the parent and pass the same data
     renderTemplate: (childTemplate) =>
-      renderTemplate(
-        path.resolve(path.dirname(templateFile), childTemplate),
-        data
-      ),
+      renderTemplate(resolve(dirname(templateFile), childTemplate), data),
   });
 };
 
@@ -45,36 +90,32 @@ const minifyHtml = (content, ext) => {
 };
 
 // Function to generate a dev task for each project's configuration
-// Note Currently WDS paths are hard-coded to only work for app
 const genPagesDevTask =
   (
     pageEntries,
     inputRoot,
     outputRoot,
-    useWDS = false,
     inputSub = "src/html",
     publicRoot = ""
   ) =>
   async () => {
+    const commonVars = getCommonTemplateVars();
     for (const [page, entries] of Object.entries(pageEntries)) {
       const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
+        resolve(inputRoot, inputSub, `${page}.template`),
         {
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${publicRoot}/frontend_latest/${entry}.js`
+          ...commonVars,
+          latestEntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
           es5EntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_es5/${entry}.js`
           ),
-          latestCustomPanelJS: useWDS
-            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
-            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          latestCustomPanelJS: `${publicRoot}/frontend_latest/custom-panel.js`,
           es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
         }
       );
-      fs.outputFileSync(path.resolve(outputRoot, page), content);
+      fs.outputFileSync(resolve(outputRoot, page), content);
     }
   };
 
@@ -91,16 +132,18 @@ const genPagesProdTask =
   ) =>
   async () => {
     const latestManifest = fs.readJsonSync(
-      path.resolve(outputLatest, "manifest.json")
+      resolve(outputLatest, "manifest.json")
     );
     const es5Manifest = outputES5
-      ? fs.readJsonSync(path.resolve(outputES5, "manifest.json"))
+      ? fs.readJsonSync(resolve(outputES5, "manifest.json"))
       : {};
+    const commonVars = getCommonTemplateVars();
     const minifiedHTML = [];
     for (const [page, entries] of Object.entries(pageEntries)) {
       const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
+        resolve(inputRoot, inputSub, `${page}.template`),
         {
+          ...commonVars,
           latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
           es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
           latestCustomPanelJS: latestManifest["custom-panel.js"],
@@ -108,8 +151,8 @@ const genPagesProdTask =
         }
       );
       minifiedHTML.push(
-        minifyHtml(content, path.extname(page)).then((minified) =>
-          fs.outputFileSync(path.resolve(outputRoot, page), minified)
+        minifyHtml(content, extname(page)).then((minified) =>
+          fs.outputFileSync(resolve(outputRoot, page), minified)
         )
       );
     }
@@ -125,12 +168,7 @@ const APP_PAGE_ENTRIES = {
 
 gulp.task(
   "gen-pages-app-dev",
-  genPagesDevTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    env.useWDS()
-  )
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
 );
 
 gulp.task(
@@ -206,6 +244,28 @@ gulp.task(
   )
 );
 
+const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-landing-page-dev",
+  genPagesDevTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-landing-page-prod",
+  genPagesProdTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root,
+    paths.landingPage_output_latest,
+    paths.landingPage_output_es5
+  )
+);
+
 const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
 gulp.task(
@@ -214,7 +274,6 @@ gulp.task(
     HASSIO_PAGE_ENTRIES,
     paths.hassio_dir,
     paths.hassio_output_root,
-    undefined,
     "src",
     paths.hassio_publicPath
   )

build-scripts/gulp/fetch-nightly-translations.js

@@ -9,7 +9,7 @@ import gulp from "gulp";
 import jszip from "jszip";
 import path from "path";
 import process from "process";
-import tar from "tar";
+import { extract } from "tar";
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
@@ -66,7 +66,7 @@ gulp.task("fetch-nightly-translations", async function () {
       tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
     } catch {
       if (!allowTokenSetup) {
-        console.log("No token found so  build wil continue with English only");
+        console.log("No token found so build will continue with English only");
         return;
       }
       const auth = createOAuthDeviceAuth({
@@ -156,7 +156,7 @@ gulp.task("fetch-nightly-translations", async function () {
   console.log("Unpacking downloaded translations...");
   const zip = await jszip.loadAsync(downloadResponse.data);
   await deleteCurrent;
-  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(tar.extract());
+  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(extract());
   await new Promise((resolve, reject) => {
     extractStream.on("close", resolve).on("error", reject);
   });

build-scripts/gulp/gallery.js

@@ -4,16 +4,14 @@ import gulp from "gulp";
 import yaml from "js-yaml";
 import { marked } from "marked";
 import path from "path";
-import env from "../env.cjs";
 import paths from "../paths.cjs";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./rollup.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
@@ -158,9 +156,7 @@ gulp.task(
     "copy-static-gallery",
     "gen-pages-gallery-dev",
     gulp.parallel(
-      env.useRollup()
-        ? "rollup-dev-server-gallery"
-        : "webpack-dev-server-gallery",
+      "rspack-dev-server-gallery",
       async function watchMarkdownFiles() {
         gulp.watch(
           [
@@ -189,7 +185,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
+    "rspack-prod-gallery",
     "gen-pages-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -59,6 +59,12 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
+
+  // dialog-polyfill css
+  copyFileDir(
+    npmPath("dialog-polyfill/dialog-polyfill.css"),
+    staticPath("polyfills/")
+  );
 }
 
 function copyLoaderJS(staticDir) {
@@ -96,6 +102,14 @@ function copyMapPanel(staticDir) {
   );
 }
 
+function copyZXingWasm(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(
+    npmPath("zxing-wasm/dist/reader/zxing_reader.wasm"),
+    staticPath("js")
+  );
+}
+
 gulp.task("copy-locale-data", async () => {
   const staticDir = paths.app_output_static;
   copyLocaleData(staticDir);
@@ -111,6 +125,11 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-landing-page", async () => {
+  const staticDir = paths.landingPage_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-static-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
@@ -133,6 +152,7 @@ gulp.task("copy-static-app", async () => {
   copyMapPanel(staticDir);
 
   // Qr Scanner assets
+  copyZXingWasm(staticDir);
   copyQrScannerWorker(staticDir);
 });
 
@@ -184,3 +204,14 @@ gulp.task("copy-static-gallery", async () => {
   copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });
+
+gulp.task("copy-static-landing-page", async () => {
+  // Copy landing-page static files
+  fs.copySync(
+    path.resolve(paths.landingPage_dir, "public"),
+    paths.landingPage_output_root
+  );
+
+  copyFonts(paths.landingPage_output_static);
+  copyTranslations(paths.landingPage_output_static);
+});

build-scripts/gulp/hassio.js

@@ -5,9 +5,8 @@ import "./compress.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./rollup.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-hassio",
@@ -22,7 +21,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
+    "rspack-watch-hassio"
   )
 );
 
@@ -38,7 +37,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
+    "rspack-prod-hassio",
     "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])

build-scripts/gulp/landing-page.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-landing-page",
+    "translations-enable-merge-backend",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "gen-pages-landing-page-dev",
+    "rspack-watch-landing-page"
+  )
+);
+
+gulp.task(
+  "build-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-landing-page",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "rspack-prod-landing-page",
+    "gen-pages-landing-page-prod"
+  )
+);

build-scripts/gulp/locale-data.js

@@ -1,51 +1,57 @@
 import { deleteSync } from "del";
 import { mkdir, readFile, writeFile } from "fs/promises";
 import gulp from "gulp";
-import path from "path";
+import { join, resolve } from "node:path";
 import paths from "../paths.cjs";
 
-const outDir = path.join(paths.build_dir, "locale-data");
+const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
+const outDir = join(paths.build_dir, "locale-data");
 
-const INTL_PACKAGES = {
-  "intl-relativetimeformat": "RelativeTimeFormat",
+const INTL_POLYFILLS = {
   "intl-datetimeformat": "DateTimeFormat",
-  "intl-numberformat": "NumberFormat",
   "intl-displaynames": "DisplayNames",
   "intl-listformat": "ListFormat",
+  "intl-numberformat": "NumberFormat",
+  "intl-relativetimeformat": "RelativeTimeFormat",
 };
 
-const convertToJSON = async (pkg, lang) => {
+const convertToJSON = async (
+  pkg,
+  lang,
+  subDir = "locale-data",
+  addFunc = "__addLocaleData",
+  skipMissing = true
+) => {
   let localeData;
   try {
+    // use "pt" for "pt-BR", because "pt-BR" is unsupported by @formatjs
+    const language = lang === "pt-BR" ? "pt" : lang;
+
     localeData = await readFile(
-      path.resolve(
-        paths.polymer_dir,
-        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
-      ),
+      join(formatjsDir, pkg, subDir, `${language}.js`),
       "utf-8"
     );
   } catch (e) {
     // Ignore if language is missing (i.e. not supported by @formatjs)
-    if (e.code === "ENOENT") {
+    if (e.code === "ENOENT" && skipMissing) {
+      console.warn(`Skipped missing data for language ${lang} from ${pkg}`);
       return;
-    } else {
-      throw e;
     }
+    throw e;
   }
   // Convert to JSON
-  const className = INTL_PACKAGES[pkg];
-  localeData = localeData
-    .replace(
-      new RegExp(
-        `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
-        "im"
-      ),
-      ""
-    )
-    .replace(/\)\s*}/im, "");
+  const obj = INTL_POLYFILLS[pkg];
+  const dataRegex = new RegExp(
+    `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
+    "s"
+  );
+  localeData = localeData.match(dataRegex)?.groups?.data;
+  if (!localeData) {
+    throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
+  }
   // Parse to validate JSON, then stringify to minify
   localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
+  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
 gulp.task("clean-locale-data", async () => deleteSync([outDir]));
@@ -53,17 +59,27 @@ gulp.task("clean-locale-data", async () => deleteSync([outDir]));
 gulp.task("create-locale-data", async () => {
   const translationMeta = JSON.parse(
     await readFile(
-      path.resolve(paths.translations_src, "translationMetadata.json"),
+      resolve(paths.translations_src, "translationMetadata.json"),
       "utf-8"
     )
   );
   const conversions = [];
-  for (const pkg of Object.keys(INTL_PACKAGES)) {
-    await mkdir(path.join(outDir, pkg), { recursive: true });
+  for (const pkg of Object.keys(INTL_POLYFILLS)) {
+    // eslint-disable-next-line no-await-in-loop
+    await mkdir(join(outDir, pkg), { recursive: true });
     for (const lang of Object.keys(translationMeta)) {
       conversions.push(convertToJSON(pkg, lang));
     }
   }
+  conversions.push(
+    convertToJSON(
+      "intl-datetimeformat",
+      "add-all-tz",
+      ".",
+      "__addTZData",
+      false
+    )
+  );
   await Promise.all(conversions);
 });
 

build-scripts/gulp/rollup.js

@@ -1,147 +0,0 @@
-// Tasks to run Rollup
-
-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(
-    async function buildLatest() {
-      await buildRollup(
-        createConfigFunc({
-          ...params,
-          latestBuild: true,
-        })
-      );
-    },
-    async function buildES5() {
-      await buildRollup(
-        createConfigFunc({
-          ...params,
-          latestBuild: false,
-        })
-      );
-    }
-  );
-
-function createServer(serveOptions) {
-  const server = http.createServer((request, response) =>
-    handler(request, response, {
-      public: serveOptions.root,
-    })
-  );
-
-  server.listen(
-    serveOptions.port,
-    serveOptions.networkAccess ? "0.0.0.0" : undefined,
-    () => {
-      log.info(`Available at http://localhost:${serveOptions.port}`);
-      open(`http://localhost:${serveOptions.port}`);
-    }
-  );
-}
-
-function watchRollup(createConfig, extraWatchSrc = [], serveOptions = null) {
-  const { inputOptions, outputOptions } = createConfig({
-    isProdBuild: false,
-    latestBuild: true,
-  });
-
-  const watcher = rollup.watch({
-    ...inputOptions,
-    output: [outputOptions],
-    watch: {
-      include: ["src/**"] + extraWatchSrc,
-    },
-  });
-
-  let startedHttp = false;
-
-  watcher.on("event", (event) => {
-    if (event.code === "BUNDLE_END") {
-      log(`Build done @ ${new Date().toLocaleTimeString()}`);
-    } else if (event.code === "ERROR") {
-      log.error(event.error);
-    } else if (event.code === "END") {
-      if (startedHttp || !serveOptions) {
-        return;
-      }
-      startedHttp = true;
-      createServer(serveOptions);
-    }
-  });
-
-  gulp.watch(
-    path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations-app")
-  );
-}
-
-async function buildRollup(config) {
-  const bundle = await rollup.rollup(config.inputOptions);
-  await bundle.write(config.outputOptions);
-}
-
-gulp.task("rollup-watch-app", () => {
-  watchRollup(rollupConfig.createAppConfig);
-});
-
-gulp.task("rollup-watch-hassio", () => {
-  watchRollup(rollupConfig.createHassioConfig, ["hassio/src/**"]);
-});
-
-gulp.task("rollup-dev-server-demo", () => {
-  watchRollup(rollupConfig.createDemoConfig, ["demo/src/**"], {
-    root: paths.demo_output_root,
-    port: 8090,
-  });
-});
-
-gulp.task("rollup-dev-server-cast", () => {
-  watchRollup(rollupConfig.createCastConfig, ["cast/src/**"], {
-    root: paths.cast_output_root,
-    port: 8080,
-    networkAccess: true,
-  });
-});
-
-gulp.task("rollup-dev-server-gallery", () => {
-  watchRollup(rollupConfig.createGalleryConfig, ["gallery/src/**"], {
-    root: paths.gallery_output_root,
-    port: 8100,
-  });
-});
-
-gulp.task(
-  "rollup-prod-app",
-  bothBuilds(rollupConfig.createAppConfig, { isProdBuild: true })
-);
-
-gulp.task(
-  "rollup-prod-demo",
-  bothBuilds(rollupConfig.createDemoConfig, { isProdBuild: true })
-);
-
-gulp.task(
-  "rollup-prod-cast",
-  bothBuilds(rollupConfig.createCastConfig, { isProdBuild: true })
-);
-
-gulp.task("rollup-prod-hassio", () =>
-  bothBuilds(rollupConfig.createHassioConfig, { isProdBuild: true })
-);
-
-gulp.task("rollup-prod-gallery", () =>
-  buildRollup(
-    rollupConfig.createGalleryConfig({
-      isProdBuild: true,
-      latestBuild: true,
-    })
-  )
-);

build-scripts/gulp/rspack.js

@@ -1,11 +1,11 @@
-// Tasks to run webpack.
+// Tasks to run rspack.
 
 import fs from "fs";
 import path from "path";
 import log from "fancy-log";
 import gulp from "gulp";
-import webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
+import rspack from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
 import {
@@ -14,7 +14,8 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createHassioConfig,
-} from "../webpack.cjs";
+  createLandingPageConfig,
+} from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -30,7 +31,7 @@ const isWsl =
 
 /**
  * @param {{
- *   compiler: import("webpack").Compiler,
+ *   compiler: import("@rspack/core").Compiler,
  *   contentBase: string,
  *   port: number,
  *   listenHost?: string
@@ -40,9 +41,14 @@ const runDevServer = async ({
   compiler,
   contentBase,
   port,
-  listenHost = "localhost",
+  listenHost = undefined,
+  proxy = undefined,
 }) => {
-  const server = new WebpackDevServer(
+  if (listenHost === undefined) {
+    // For dev container, we need to listen on all hosts
+    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
+  }
+  const server = new RspackDevServer(
     {
       hot: false,
       open: true,
@@ -52,13 +58,14 @@ const runDevServer = async ({
         directory: contentBase,
         watch: true,
       },
+      proxy,
     },
     compiler
   );
 
   await server.start();
   // Server listening
-  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };
 
 const doneHandler = (done) => (err, stats) => {
@@ -83,27 +90,27 @@ const doneHandler = (done) => (err, stats) => {
 
 const prodBuild = (conf) =>
   new Promise((resolve) => {
-    webpack(
+    rspack(
       conf,
-      // Resolve promise when done. Because we pass a callback, webpack closes itself
+      // Resolve promise when done. Because we pass a callback, rspack closes itself
       doneHandler(resolve)
     );
   });
 
-gulp.task("webpack-watch-app", () => {
+gulp.task("rspack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
   ).watch({ poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("create-translations", "copy-translations-app")
+    gulp.series("build-translations", "copy-translations-app")
   );
 });
 
-gulp.task("webpack-prod-app", () =>
+gulp.task("rspack-prod-app", () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
@@ -113,25 +120,30 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () =>
+gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    compiler: rspack(
+      createDemoConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.demo_output_root,
     port: 8090,
   })
 );
 
-gulp.task("webpack-prod-demo", () =>
+gulp.task("rspack-prod-demo", () =>
   prodBuild(
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
     })
   )
 );
 
-gulp.task("webpack-dev-server-cast", () =>
+gulp.task("rspack-dev-server-cast", () =>
   runDevServer({
-    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    compiler: rspack(
+      createCastConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
@@ -139,7 +151,7 @@ gulp.task("webpack-dev-server-cast", () =>
   })
 );
 
-gulp.task("webpack-prod-cast", () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
@@ -147,9 +159,9 @@ gulp.task("webpack-prod-cast", () =>
   )
 );
 
-gulp.task("webpack-watch-hassio", () => {
+gulp.task("rspack-watch-hassio", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     createHassioConfig({
       isProdBuild: false,
       latestBuild: true,
@@ -162,7 +174,7 @@ gulp.task("webpack-watch-hassio", () => {
   );
 });
 
-gulp.task("webpack-prod-hassio", () =>
+gulp.task("rspack-prod-hassio", () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
@@ -172,17 +184,18 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () =>
+gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
-    // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
-    compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
+    compiler: rspack(
+      createGalleryConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",
   })
 );
 
-gulp.task("webpack-prod-gallery", () =>
+gulp.task("rspack-prod-gallery", () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
@@ -190,3 +203,30 @@ gulp.task("webpack-prod-gallery", () =>
     })
   )
 );
+
+gulp.task("rspack-watch-landing-page", () => {
+  // This command will run forever because we don't close compiler
+  rspack(
+    process.env.ES5
+      ? bothBuilds(createLandingPageConfig, { isProdBuild: false })
+      : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ poll: isWsl }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series(
+      "build-landing-page-translations",
+      "copy-translations-landing-page"
+    )
+  );
+});
+
+gulp.task("rspack-prod-landing-page", () =>
+  prodBuild(
+    bothBuilds(createLandingPageConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);

build-scripts/gulp/service-worker.js

@@ -1,20 +1,19 @@
-// Generate service worker.
-// Based on manifest, create a file with the content as service_worker.js
+// Generate service workers
 
-import fs from "fs-extra";
+import { deleteAsync } from "del";
 import gulp from "gulp";
-import path from "path";
-import sourceMapUrl from "source-map-url";
-import workboxBuild from "workbox-build";
+import { mkdir, readFile, symlink, writeFile } from "node:fs/promises";
+import { basename, join, relative } from "node:path";
+import { injectManifest } from "workbox-build";
 import paths from "../paths.cjs";
 
-const swDest = path.resolve(paths.app_output_root, "service_worker.js");
+const SW_MAP = {
+  [paths.app_output_latest]: "modern",
+  [paths.app_output_es5]: "legacy",
+};
 
-const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
-
-gulp.task("gen-service-worker-app-dev", (done) => {
-  writeSW(
-    `
+const SW_DEV =
+  `
 console.debug('Service worker disabled in development');
 
 self.addEventListener('install', (event) => {
@@ -22,72 +21,67 @@ self.addEventListener('install', (event) => {
   // removing any prod service worker the dev might have running
   self.skipWaiting();
 });
-  `
+  `.trim() + "\n";
+
+gulp.task("gen-service-worker-app-dev", async () => {
+  await mkdir(paths.app_output_root, { recursive: true });
+  await Promise.all(
+    Object.values(SW_MAP).map((build) =>
+      writeFile(join(paths.app_output_root, `sw-${build}.js`), SW_DEV, {
+        encoding: "utf-8",
+      })
+    )
   );
-  done();
 });
 
-gulp.task("gen-service-worker-app-prod", async () => {
-  // Read bundled source file
-  const bundleManifestLatest = fs.readJsonSync(
-    path.resolve(paths.app_output_latest, "manifest.json")
-  );
-  let serviceWorkerContent = fs.readFileSync(
-    paths.app_output_root + bundleManifestLatest["service_worker.js"],
-    "utf-8"
-  );
-
-  // Delete old file from frontend_latest so manifest won't pick it up
-  fs.removeSync(
-    paths.app_output_root + bundleManifestLatest["service_worker.js"]
-  );
-  fs.removeSync(
-    paths.app_output_root + bundleManifestLatest["service_worker.js.map"]
-  );
-
-  // Remove ES5
-  const bundleManifestES5 = fs.readJsonSync(
-    path.resolve(paths.app_output_es5, "manifest.json")
-  );
-  fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
-  fs.removeSync(
-    paths.app_output_root + bundleManifestES5["service_worker.js.map"]
-  );
-
-  const workboxManifest = await workboxBuild.getManifest({
-    // Files that mach this pattern will be considered unique and skip revision check
-    // ignore JS files + translation files
-    dontCacheBustURLsMatching: /(frontend_latest\/.+|static\/translations\/.+)/,
-
-    globDirectory: paths.app_output_root,
-    globPatterns: [
-      "frontend_latest/*.js",
-      // Cache all English translations because we catch them as fallback
-      // Using pattern to match hash instead of * to avoid caching en-GB
-      // 'v' added as valid hash letter because in dev we hash with 'dev'
-      "static/translations/**/en-+([a-fv0-9]).json",
-      // Icon shown on splash screen
-      "static/icons/favicon-192x192.png",
-      "static/icons/favicon.ico",
-      // Common fonts
-      "static/fonts/roboto/Roboto-Light.woff2",
-      "static/fonts/roboto/Roboto-Medium.woff2",
-      "static/fonts/roboto/Roboto-Regular.woff2",
-      "static/fonts/roboto/Roboto-Bold.woff2",
-    ],
-  });
-
-  for (const warning of workboxManifest.warnings) {
-    console.warn(warning);
-  }
-
-  // remove source map and add WB manifest
-  serviceWorkerContent = sourceMapUrl.removeFrom(serviceWorkerContent);
-  serviceWorkerContent = serviceWorkerContent.replace(
-    "WB_MANIFEST",
-    JSON.stringify(workboxManifest.manifestEntries)
-  );
-
-  // Write new file to root
-  fs.writeFileSync(swDest, serviceWorkerContent);
-});
+gulp.task("gen-service-worker-app-prod", () =>
+  Promise.all(
+    Object.entries(SW_MAP).map(async ([outPath, build]) => {
+      const manifest = JSON.parse(
+        await readFile(join(outPath, "manifest.json"), "utf-8")
+      );
+      const swSrc = join(paths.app_output_root, manifest["service-worker.js"]);
+      const swDest = join(paths.app_output_root, `sw-${build}.js`);
+      const buildDir = relative(paths.app_output_root, outPath);
+      const { warnings } = await injectManifest({
+        swSrc,
+        swDest,
+        injectionPoint: "__WB_MANIFEST__",
+        // Files that mach this pattern will be considered unique and skip revision check
+        // ignore JS files + translation files
+        dontCacheBustURLsMatching: new RegExp(
+          `(?:${buildDir}/.+|static/translations/.+)`
+        ),
+        globDirectory: paths.app_output_root,
+        globPatterns: [
+          `${buildDir}/*.js`,
+          // Cache all English translations because we catch them as fallback
+          // Using pattern to match hash instead of * to avoid caching en-GB
+          // 'v' added as valid hash letter because in dev we hash with 'dev'
+          "static/translations/**/en-+([a-fv0-9]).json",
+          // Icon shown on splash screen
+          "static/icons/favicon-192x192.png",
+          "static/icons/favicon.ico",
+          // Common fonts
+          "static/fonts/roboto/Roboto-Light.woff2",
+          "static/fonts/roboto/Roboto-Medium.woff2",
+          "static/fonts/roboto/Roboto-Regular.woff2",
+          "static/fonts/roboto/Roboto-Bold.woff2",
+        ],
+        globIgnores: [`${buildDir}/service-worker*`],
+      });
+      if (warnings.length > 0) {
+        console.warn(
+          `Problems while injecting ${build} service worker:\n`,
+          warnings.join("\n")
+        );
+      }
+      await deleteAsync(`${swSrc}?(.map)`);
+      // Needed to install new SW from a cached HTML
+      if (build === "modern") {
+        const swOld = join(paths.app_output_root, "service_worker.js");
+        await symlink(basename(swDest), swOld);
+      }
+    })
+  )
+);

build-scripts/gulp/translations.js

@@ -1,97 +1,112 @@
-import { createHash } from "crypto";
-import { deleteSync } from "del";
-import {
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  renameSync,
-  writeFile,
-} from "fs";
+/* eslint-disable max-classes-per-file */
+
+import { deleteAsync } from "del";
+import { glob } from "glob";
 import gulp from "gulp";
-import flatmap from "gulp-flatmap";
-import transform from "gulp-json-transform";
-import merge from "gulp-merge-json";
 import rename from "gulp-rename";
-import path from "path";
-import vinylBuffer from "vinyl-buffer";
-import source from "vinyl-source-stream";
+import merge from "lodash.merge";
+import { createHash } from "node:crypto";
+import { mkdir, readFile } from "node:fs/promises";
+import { basename, join } from "node:path";
+import { PassThrough, Transform } from "node:stream";
+import { finished } from "node:stream/promises";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
-import { mapFiles } from "../util.cjs";
 import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
 const workDir = "build/translations";
-const fullDir = workDir + "/full";
-const coreDir = workDir + "/core";
-const outDir = workDir + "/output";
+const outDir = join(workDir, "output");
+const EN_SRC = join(paths.translations_src, "en.json");
+const TEST_LOCALE = "en-x-test";
+
 let mergeBackend = false;
 
 gulp.task(
   "translations-enable-merge-backend",
-  gulp.parallel((done) => {
+  gulp.parallel(async () => {
     mergeBackend = true;
-    done();
   }, "allow-setup-fetch-nightly-translations")
 );
 
-// Panel translations which should be split from the core translations.
-const TRANSLATION_FRAGMENTS = Object.keys(
-  JSON.parse(
-    readFileSync(
-      path.resolve(paths.polymer_dir, "src/translations/en.json"),
-      "utf-8"
-    )
-  ).ui.panel
-);
+// Transform stream to apply a function on Vinyl JSON files (buffer mode only).
+// The provided function can either return a new object, or an array of
+// [object, subdirectory] pairs for fragmentizing the JSON.
+class CustomJSON extends Transform {
+  constructor(func, reviver = null) {
+    super({ objectMode: true });
+    this._func = func;
+    this._reviver = reviver;
+  }
 
-function recursiveFlatten(prefix, data) {
-  let output = {};
-  Object.keys(data).forEach((key) => {
-    if (typeof data[key] === "object") {
-      output = {
-        ...output,
-        ...recursiveFlatten(prefix + key + ".", data[key]),
-      };
+  async _transform(file, _, callback) {
+    try {
+      let obj = JSON.parse(file.contents.toString(), this._reviver);
+      if (this._func) obj = this._func(obj, file.path);
+      for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
+        const outFile = file.clone({ contents: false });
+        outFile.contents = Buffer.from(JSON.stringify(outObj));
+        outFile.dirname += `/${dir}`;
+        this.push(outFile);
+      }
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
+  }
+}
+
+// Transform stream to merge Vinyl JSON files (buffer mode only).
+class MergeJSON extends Transform {
+  _objects = [];
+
+  constructor(stem, startObj = {}, reviver = null) {
+    super({ objectMode: true, allowHalfOpen: false });
+    this._stem = stem;
+    this._startObj = structuredClone(startObj);
+    this._reviver = reviver;
+  }
+
+  async _transform(file, _, callback) {
+    try {
+      this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
+      if (!this._outFile) this._outFile = file.clone({ contents: false });
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
+  }
+
+  async _flush(callback) {
+    try {
+      const mergedObj = merge(this._startObj, ...this._objects);
+      this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
+      this._outFile.stem = this._stem;
+      callback(null, this._outFile);
+    } catch (err) {
+      callback(err);
+    }
+  }
+}
+
+// Utility to flatten object keys to single level using separator
+const flatten = (data, prefix = "", sep = ".") => {
+  const output = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (typeof value === "object") {
+      Object.assign(output, flatten(value, prefix + key + sep, sep));
     } else {
-      output[prefix + key] = data[key];
+      output[prefix + key] = value;
     }
-  });
+  }
   return output;
-}
+};
 
-function flatten(data) {
-  return recursiveFlatten("", data);
-}
-
-function emptyFilter(data) {
-  const newData = {};
-  Object.keys(data).forEach((key) => {
-    if (data[key]) {
-      if (typeof data[key] === "object") {
-        newData[key] = emptyFilter(data[key]);
-      } else {
-        newData[key] = data[key];
-      }
-    }
-  });
-  return newData;
-}
-
-function recursiveEmpty(data) {
-  const newData = {};
-  Object.keys(data).forEach((key) => {
-    if (data[key]) {
-      if (typeof data[key] === "object") {
-        newData[key] = recursiveEmpty(data[key]);
-      } else {
-        newData[key] = "TRANSLATED";
-      }
-    }
-  });
-  return newData;
-}
+// Filter functions that can be passed directly to JSON.parse()
+const emptyReviver = (_key, value) => value || undefined;
+const testReviver = (_key, value) =>
+  value && typeof value === "string" ? "TRANSLATED" : value;
 
 /**
  * Replace Lokalise key placeholders with their actual values.
@@ -100,64 +115,44 @@ function recursiveEmpty(data) {
  * be included in src/translations/en.json, but still be usable while
  * developing locally.
  *
- * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
+ * @link https://docs.lokalise.com/en/articles/1400528-key-referencing
  */
-const re_key_reference = /\[%key:([^%]+)%\]/;
-function lokaliseTransform(data, original, file) {
+const KEY_REFERENCE = /\[%key:([^%]+)%\]/;
+const lokaliseTransform = (data, path, original = data) => {
   const output = {};
-  Object.entries(data).forEach(([key, value]) => {
-    if (value instanceof Object) {
-      output[key] = lokaliseTransform(value, original, file);
+  for (const [key, value] of Object.entries(data)) {
+    if (typeof value === "object") {
+      output[key] = lokaliseTransform(value, path, original);
     } else {
-      output[key] = value.replace(re_key_reference, (_match, lokalise_key) => {
+      output[key] = value.replace(KEY_REFERENCE, (_match, lokalise_key) => {
         const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
-            throw Error(
-              `Invalid key placeholder ${lokalise_key} in ${file.path}`
-            );
+            throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
           }
           return tr[k];
         }, original);
         if (typeof replace !== "string") {
-          throw Error(
-            `Invalid key placeholder ${lokalise_key} in ${file.path}`
-          );
+          throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
         }
         return replace;
       });
     }
-  });
+  }
   return output;
-}
+};
 
-gulp.task("clean-translations", async () => deleteSync([workDir]));
+gulp.task("clean-translations", () => deleteAsync([workDir]));
 
-gulp.task("ensure-translations-build-dir", async () => {
-  mkdirSync(workDir, { recursive: true });
-});
+const makeWorkDir = () => mkdir(workDir, { recursive: true });
 
-gulp.task("create-test-metadata", (cb) => {
-  writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
-});
-
-gulp.task(
-  "create-test-translation",
-  gulp.series("create-test-metadata", () =>
-    gulp
-      .src(path.join(paths.translations_src, "en.json"))
-      .pipe(transform((data, _file) => recursiveEmpty(data)))
-      .pipe(rename("test.json"))
-      .pipe(gulp.dest(workDir))
-  )
-);
+const createTestTranslation = () =>
+  env.isProdBuild()
+    ? Promise.resolve()
+    : gulp
+        .src(EN_SRC)
+        .pipe(new CustomJSON(null, testReviver))
+        .pipe(rename(`${TEST_LOCALE}.json`))
+        .pipe(gulp.dest(workDir));
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -168,286 +163,174 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", () => {
-  const src = [path.join(paths.translations_src, "en.json")];
+const createMasterTranslation = () =>
+  gulp
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+    .pipe(new CustomJSON(lokaliseTransform))
+    .pipe(new MergeJSON("en"))
+    .pipe(gulp.dest(workDir));
 
-  if (mergeBackend) {
-    src.push(path.join(inBackendDir, "en.json"));
+const FRAGMENTS = ["base"];
+
+const setFragment = (fragment) => async () => {
+  FRAGMENTS[0] = fragment;
+};
+
+const panelFragment = (fragment) =>
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";
+
+const HASHES = new Map();
+
+const createTranslations = async () => {
+  // Parse and store the master to avoid repeating this for each locale, then
+  // add the panel fragments when processing the app.
+  const enMaster = JSON.parse(await readFile(`${workDir}/en.json`, "utf-8"));
+  if (FRAGMENTS[0] === "base") {
+    FRAGMENTS.push(...Object.keys(enMaster.ui.panel));
   }
 
-  return gulp
-    .src(src)
-    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
+  // The downstream pipeline is setup first.  It hashes the merged data for
+  // each locale, then fragmentizes and flattens the data for final output.
+  const translationFiles = await glob([
+    `${inFrontendDir}/!(en).json`,
+    ...(env.isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
+  ]);
+  const hashStream = new Transform({
+    objectMode: true,
+    transform: async (file, _, callback) => {
+      const hash = env.isProdBuild()
+        ? createHash("md5").update(file.contents).digest("hex")
+        : "dev";
+      HASHES.set(file.stem, hash);
+      file.stem += `-${hash}`;
+      callback(null, file);
+    },
+  }).setMaxListeners(translationFiles.length + 1);
+  const fragmentsStream = hashStream
     .pipe(
-      merge({
-        fileName: "en.json",
-      })
-    )
-    .pipe(gulp.dest(fullDir));
-});
-
-gulp.task("build-merged-translations", () =>
-  gulp
-    .src(
-      [
-        inFrontendDir + "/*.json",
-        "!" + inFrontendDir + "/en.json",
-        workDir + "/test.json",
-      ],
-      {
-        allowEmpty: true,
-      }
-    )
-    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
-    .pipe(
-      flatmap((stream, file) => {
-        // For each language generate a merged json file. It begins with the master
-        // translation as a failsafe for untranslated strings, and merges all parent
-        // tags into one file for each specific subtag
-        //
-        // TODO: This is a naive interpretation of BCP47 that should be improved.
-        //       Will be OK for now as long as we don't have anything more complicated
-        //       than a base translation + region.
-        const tr = path.basename(file.history[0], ".json");
-        const subtags = tr.split("-");
-        const src = [fullDir + "/en.json"];
-        for (let i = 1; i <= subtags.length; i++) {
-          const lang = subtags.slice(0, i).join("-");
-          if (lang === "test") {
-            src.push(workDir + "/test.json");
-          } else if (lang !== "en") {
-            src.push(inFrontendDir + "/" + lang + ".json");
-            if (mergeBackend) {
-              src.push(inBackendDir + "/" + lang + ".json");
-            }
+      new CustomJSON((data) =>
+        FRAGMENTS.map((fragment) => {
+          switch (fragment) {
+            case "base":
+              // Remove the panels and supervisor to create the base translations
+              return [
+                flatten({
+                  ...data,
+                  ui: { ...data.ui, panel: undefined },
+                  supervisor: undefined,
+                }),
+                "",
+              ];
+            case "supervisor":
+              // Supervisor key is at the top level
+              return [flatten(data.supervisor), ""];
+            case "landing-page":
+              // landing-page key is at the top level
+              return [flatten(data["landing-page"]), ""];
+            default:
+              // Create a fragment with only the given panel
+              return [
+                flatten(data.ui.panel[fragment], `ui.panel.${fragment}.`),
+                fragment,
+              ];
           }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    )
-);
-
-let taskName;
-
-const splitTasks = [];
-TRANSLATION_FRAGMENTS.forEach((fragment) => {
-  taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, () =>
-    // Return only the translations for this fragment.
-    gulp
-      .src(fullDir + "/*.json")
-      .pipe(
-        transform((data) => ({
-          ui: {
-            panel: {
-              [fragment]: data.ui.panel[fragment],
-            },
-          },
-        }))
-      )
-      .pipe(gulp.dest(workDir + "/" + fragment))
-  );
-  splitTasks.push(taskName);
-});
-
-taskName = "build-translation-core";
-gulp.task(taskName, () =>
-  // Remove the fragment translations from the core translation.
-  gulp
-    .src(fullDir + "/*.json")
-    .pipe(
-      transform((data, _file) => {
-        TRANSLATION_FRAGMENTS.forEach((fragment) => {
-          delete data.ui.panel[fragment];
-        });
-        delete data.supervisor;
-        return data;
-      })
-    )
-    .pipe(gulp.dest(coreDir))
-);
-
-splitTasks.push(taskName);
-
-gulp.task("build-flattened-translations", () =>
-  // Flatten the split versions of our translations, and move them into outDir
-  gulp
-    .src(
-      TRANSLATION_FRAGMENTS.map(
-        (fragment) => workDir + "/" + fragment + "/*.json"
-      ).concat(coreDir + "/*.json"),
-      { base: workDir }
-    )
-    .pipe(
-      transform((data) =>
-        // Polymer.AppLocalizeBehavior requires flattened json
-        flatten(data)
+        })
       )
     )
-    .pipe(
-      rename((filePath) => {
-        if (filePath.dirname === "core") {
-          filePath.dirname = "";
+    .pipe(gulp.dest(outDir));
+
+  // Send the English master downstream first, then for each other locale
+  // generate merged JSON data to continue piping. It begins with the master
+  // translation as a failsafe for untranslated strings, and merges all parent
+  // tags into one file for each specific subtag
+  //
+  // TODO: This is a naive interpretation of BCP47 that should be improved.
+  //       Will be OK for now as long as we don't have anything more complicated
+  // than a base translation + region.
+  const masterStream = gulp
+    .src(`${workDir}/en.json`)
+    .pipe(new PassThrough({ objectMode: true }));
+  masterStream.pipe(hashStream, { end: false });
+  const mergesFinished = [finished(masterStream)];
+  for (const translationFile of translationFiles) {
+    const locale = basename(translationFile, ".json");
+    const subtags = locale.split("-");
+    const mergeFiles = [];
+    for (let i = 1; i <= subtags.length; i++) {
+      const lang = subtags.slice(0, i).join("-");
+      if (lang === TEST_LOCALE) {
+        mergeFiles.push(`${workDir}/${TEST_LOCALE}.json`);
+      } else if (lang !== "en") {
+        mergeFiles.push(`${inFrontendDir}/${lang}.json`);
+        if (mergeBackend) {
+          mergeFiles.push(`${inBackendDir}/${lang}.json`);
         }
-        // In dev we create the file with the fake hash in the filename
-        if (!env.isProdBuild()) {
-          filePath.basename += "-dev";
-        }
-      })
-    )
-    .pipe(gulp.dest(outDir))
-);
-
-const fingerprints = {};
-
-gulp.task("build-translation-fingerprints", () => {
-  // Fingerprint full file of each language
-  const files = readdirSync(fullDir);
-
-  for (let i = 0; i < files.length; i++) {
-    fingerprints[files[i].split(".")[0]] = {
-      // In dev we create fake hashes
-      hash: env.isProdBuild()
-        ? createHash("md5")
-            .update(readFileSync(path.join(fullDir, files[i]), "utf-8"))
-            .digest("hex")
-        : "dev",
-    };
-  }
-
-  // In dev we create the file with the fake hash in the filename
-  if (env.isProdBuild()) {
-    mapFiles(outDir, ".json", (filename) => {
-      const parsed = path.parse(filename);
-
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
       }
-
-      renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
+    }
+    const mergeStream = gulp
+      .src(mergeFiles, { allowEmpty: true })
+      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
+    mergesFinished.push(finished(mergeStream));
+    mergeStream.pipe(hashStream, { end: false });
   }
 
-  const stream = source("translationFingerprints.json");
-  stream.write(JSON.stringify(fingerprints));
-  process.nextTick(() => stream.end());
-  return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
-});
+  // Wait for all merges to finish, then it's safe to end writing to the
+  // downstream pipeline and wait for all fragments to finish writing.
+  await Promise.all(mergesFinished);
+  hashStream.end();
+  await finished(fragmentsStream);
+};
 
-gulp.task("build-translation-fragment-supervisor", () =>
+const writeTranslationMetaData = () =>
   gulp
-    .src(fullDir + "/*.json")
-    .pipe(transform((data) => data.supervisor))
+    .src([`${paths.translations_src}/translationMetadata.json`])
     .pipe(
-      rename((filePath) => {
-        // In dev we create the file with the fake hash in the filename
+      new CustomJSON((meta) => {
+        // Add the test translation in development.
         if (!env.isProdBuild()) {
-          filePath.basename += "-dev";
+          meta[TEST_LOCALE] = { nativeName: "Translation Test" };
         }
-      })
-    )
-    .pipe(gulp.dest(workDir + "/supervisor"))
-);
-
-gulp.task("build-translation-flatten-supervisor", () =>
-  gulp
-    .src(workDir + "/supervisor/*.json")
-    .pipe(
-      transform((data) =>
-        // Polymer.AppLocalizeBehavior requires flattened json
-        flatten(data)
-      )
-    )
-    .pipe(gulp.dest(outDir))
-);
-
-gulp.task("build-translation-write-metadata", () =>
-  gulp
-    .src(
-      [
-        path.join(paths.translations_src, "translationMetadata.json"),
-        workDir + "/testMetadata.json",
-        workDir + "/translationFingerprints.json",
-      ],
-      { allowEmpty: true }
-    )
-    .pipe(merge({}))
-    .pipe(
-      transform((data) => {
-        const newData = {};
-        Object.entries(data).forEach(([key, value]) => {
-          // Filter out translations without native name.
-          if (value.nativeName) {
-            newData[key] = value;
-          } else {
+        // Filter out locales without a native name, and add the hashes.
+        for (const locale of Object.keys(meta)) {
+          if (!meta[locale].nativeName) {
+            meta[locale] = undefined;
             console.warn(
-              `Skipping language ${key}. Native name was not translated.`
+              `Skipping locale ${locale} because native name is not translated.`
             );
+          } else {
+            meta[locale].hash = HASHES.get(locale);
           }
-        });
-        return newData;
+        }
+        return {
+          fragments: FRAGMENTS.filter(panelFragment),
+          translations: meta,
+        };
       })
     )
-    .pipe(
-      transform((data) => ({
-        fragments: TRANSLATION_FRAGMENTS,
-        translations: data,
-      }))
-    )
-    .pipe(rename("translationMetadata.json"))
-    .pipe(gulp.dest(workDir))
-);
-
-gulp.task(
-  "create-translations",
-  gulp.series(
-    ...(env.isProdBuild() ? [] : ["create-test-translation"]),
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations"
-  )
-);
+    .pipe(gulp.dest(workDir));
 
 gulp.task(
   "build-translations",
   gulp.series(
     gulp.parallel(
       "fetch-nightly-translations",
-      gulp.series("clean-translations", "ensure-translations-build-dir")
+      gulp.series("clean-translations", makeWorkDir)
     ),
-    "create-translations",
-    "build-translation-fingerprints",
-    "build-translation-write-metadata"
+    createTestTranslation,
+    createMasterTranslation,
+    createTranslations,
+    writeTranslationMetaData
   )
 );
 
 gulp.task(
   "build-supervisor-translations",
-  gulp.series(
-    gulp.parallel(
-      "fetch-nightly-translations",
-      gulp.series("clean-translations", "ensure-translations-build-dir")
-    ),
-    "build-master-translation",
-    "build-merged-translations",
-    "build-translation-fragment-supervisor",
-    "build-translation-flatten-supervisor",
-    "build-translation-fingerprints",
-    "build-translation-write-metadata"
-  )
+  gulp.series(setFragment("supervisor"), "build-translations")
+);
+
+gulp.task(
+  "build-landing-page-translations",
+  gulp.series(setFragment("landing-page"), "build-translations")
 );

build-scripts/gulp/wds.js

@@ -1,10 +0,0 @@
-import gulp from "gulp";
-import { startDevServer } from "@web/dev-server";
-
-gulp.task("wds-watch-app", async () => {
-  startDevServer({
-    config: {
-      watch: true,
-    },
-  });
-});

build-scripts/list-plugins-and-polyfills.js

@@ -6,6 +6,8 @@ import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
+// eslint-disable-next-line import/no-relative-packages
+import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
 import { babelOptions } from "./bundle.cjs";
 
 const detailsOpen = (heading) =>
@@ -26,6 +28,22 @@ const dummyAPI = {
   targets: () => ({}),
 };
 
+// Generate filter function based on proposal/method inputs
+// Copied and adapted from babel-plugin-polyfill-corejs3/esm/index.mjs
+const polyfillFilter = (method, proposals, shippedProposals) => (name) => {
+  if (proposals || method === "entry-global") return true;
+  if (shippedProposals && shippedPolyfills.default.has(name)) {
+    return true;
+  }
+  if (name.startsWith("esnext.")) {
+    const esName = `es.${name.slice(7)}`;
+    // If its imaginative esName is not in latest compat data, it means the proposal is not stage 4
+    return esName in coreJSCompat.data;
+  }
+  return true;
+};
+
+// Log the plugins and polyfills for each build environment
 for (const buildType of ["Modern", "Legacy"]) {
   const browserslistEnv = buildType.toLowerCase();
   const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
@@ -46,7 +64,13 @@ for (const buildType of ["Modern", "Legacy"]) {
     const targets = compilationTargets.default(babelOpts?.targets, {
       browserslistEnv,
     });
-    const polyfillList = coreJSCompat({ targets }).list;
+    const polyfillList = coreJSCompat({ targets }).list.filter(
+      polyfillFilter(
+        `${presetEnvOpts.useBuiltIns}-global`,
+        presetEnvOpts?.corejs?.proposals,
+        presetEnvOpts?.shippedProposals
+      )
+    );
     console.log(
       "The following %i polyfills may be injected by Babel:\n",
       polyfillList.length

build-scripts/paths.cjs

@@ -33,6 +33,22 @@ module.exports = {
   ),
   gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
 
+  landingPage_dir: path.resolve(__dirname, "../landing-page"),
+  landingPage_build: path.resolve(__dirname, "../landing-page/build"),
+  landingPage_output_root: path.resolve(__dirname, "../landing-page/dist"),
+  landingPage_output_latest: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_latest"
+  ),
+  landingPage_output_es5: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_es5"
+  ),
+  landingPage_output_static: path.resolve(
+    __dirname,
+    "../landing-page/dist/static"
+  ),
+
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
   hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),

build-scripts/rollup-plugins/dont-hash-plugin.cjs

@@ -1,14 +0,0 @@
-module.exports = function (opts = {}) {
-  const dontHash = opts.dontHash || new Set();
-
-  return {
-    name: "dont-hash",
-    renderChunk(_code, chunk, _options) {
-      if (!chunk.isEntry || !dontHash.has(chunk.name)) {
-        return null;
-      }
-      chunk.fileName = `${chunk.name}.js`;
-      return null;
-    },
-  };
-};

build-scripts/rollup-plugins/ignore-plugin.cjs

@@ -1,24 +0,0 @@
-module.exports = function (userOptions = {}) {
-  // Files need to be absolute paths.
-  // This only works if the file has no exports
-  // and only is imported for its side effects
-  const files = userOptions.files || [];
-
-  if (files.length === 0) {
-    return {
-      name: "ignore",
-    };
-  }
-
-  return {
-    name: "ignore",
-
-    load(id) {
-      return files.some((toIgnorePath) => id.startsWith(toIgnorePath))
-        ? {
-            code: "",
-          }
-        : null;
-    },
-  };
-};

build-scripts/rollup-plugins/manifest-plugin.cjs

@@ -1,34 +0,0 @@
-const url = require("url");
-
-const defaultOptions = {
-  publicPath: "",
-};
-
-module.exports = function (userOptions = {}) {
-  const options = { ...defaultOptions, ...userOptions };
-
-  return {
-    name: "manifest",
-    generateBundle(outputOptions, bundle) {
-      const manifest = {};
-
-      for (const chunk of Object.values(bundle)) {
-        if (!chunk.isEntry) {
-          continue;
-        }
-        // Add js extension to mimic Webpack manifest.
-        manifest[`${chunk.name}.js`] = url.resolve(
-          options.publicPath,
-          chunk.fileName
-        );
-      }
-
-      this.emitFile({
-        type: "asset",
-        source: JSON.stringify(manifest, undefined, 2),
-        name: "manifest.json",
-        fileName: "manifest.json",
-      });
-    },
-  };
-};

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

@@ -1,152 +0,0 @@
-// Worker plugin
-// Each worker will include all of its dependencies
-// instead of relying on an importer.
-
-// Forked from v.1.4.1
-// https://github.com/surma/rollup-plugin-off-main-thread
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const rollup = require("rollup");
-const path = require("path");
-const MagicString = require("magic-string");
-
-const defaultOpts = {
-  // A RegExp to find `new Workers()` calls. The second capture group _must_
-  // capture the provided file name without the quotes.
-  workerRegexp: /new Worker\((["'])(.+?)\1(,[^)]+)?\)/g,
-  plugins: ["node-resolve", "commonjs", "babel", "terser", "ignore"],
-};
-
-async function getBundledWorker(workerPath, rollupOptions) {
-  const bundle = await rollup.rollup({
-    ...rollupOptions,
-    input: {
-      worker: workerPath,
-    },
-  });
-  const { output } = await bundle.generate({
-    // Generates cleanest output, we shouldn't have any imports/exports
-    // that would be incompatible with ES5.
-    format: "es",
-    // We should not export anything. This will fail build if we are.
-    exports: "none",
-  });
-
-  let code;
-
-  for (const chunkOrAsset of output) {
-    if (chunkOrAsset.name === "worker") {
-      code = chunkOrAsset.code;
-    } else if (chunkOrAsset.type !== "asset") {
-      throw new Error("Unexpected extra output");
-    }
-  }
-
-  return code;
-}
-
-module.exports = function (opts = {}) {
-  opts = { ...defaultOpts, ...opts };
-
-  let rollupOptions;
-  let refIds;
-
-  return {
-    name: "hass-worker",
-
-    async buildStart(options) {
-      refIds = {};
-      rollupOptions = {
-        plugins: options.plugins.filter((plugin) =>
-          opts.plugins.includes(plugin.name)
-        ),
-      };
-    },
-
-    async transform(code, id) {
-      // Copy the regexp as they are stateful and this hook is async.
-      const workerRegexp = new RegExp(
-        opts.workerRegexp.source,
-        opts.workerRegexp.flags
-      );
-      if (!workerRegexp.test(code)) {
-        return undefined;
-      }
-
-      const ms = new MagicString(code);
-      // Reset the regexp
-      workerRegexp.lastIndex = 0;
-      for (;;) {
-        const match = workerRegexp.exec(code);
-        if (!match) {
-          break;
-        }
-
-        const workerFile = match[2];
-        let optionsObject = {};
-        // Parse the optional options object
-        if (match[3] && match[3].length > 0) {
-          // FIXME: ooooof!
-          // eslint-disable-next-line @typescript-eslint/no-implied-eval
-          optionsObject = new Function(`return ${match[3].slice(1)};`)();
-        }
-        delete optionsObject.type;
-
-        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}".`
-          );
-          continue;
-        }
-
-        // Find worker file and store it as a chunk with ID prefixed for our loader
-        // eslint-disable-next-line no-await-in-loop
-        const resolvedWorkerFile = (await this.resolve(workerFile, id)).id;
-        let chunkRefId;
-        if (resolvedWorkerFile in refIds) {
-          chunkRefId = refIds[resolvedWorkerFile];
-        } else {
-          this.addWatchFile(resolvedWorkerFile);
-          // eslint-disable-next-line no-await-in-loop
-          const source = await getBundledWorker(
-            resolvedWorkerFile,
-            rollupOptions
-          );
-          chunkRefId = refIds[resolvedWorkerFile] = this.emitFile({
-            name: path.basename(resolvedWorkerFile),
-            source,
-            type: "asset",
-          });
-        }
-
-        const workerParametersStartIndex = match.index + "new Worker(".length;
-        const workerParametersEndIndex =
-          match.index + match[0].length - ")".length;
-
-        ms.overwrite(
-          workerParametersStartIndex,
-          workerParametersEndIndex,
-          `import.meta.ROLLUP_FILE_URL_${chunkRefId}, ${JSON.stringify(
-            optionsObject
-          )}`
-        );
-      }
-
-      return {
-        code: ms.toString(),
-        map: ms.generateMap({ hires: true }),
-      };
-    },
-  };
-};

build-scripts/rollup.cjs

@@ -1,146 +0,0 @@
-const path = require("path");
-
-const commonjs = require("@rollup/plugin-commonjs");
-const resolve = require("@rollup/plugin-node-resolve");
-const json = require("@rollup/plugin-json");
-const { babel } = require("@rollup/plugin-babel");
-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.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.cjs");
-const paths = require("./paths.cjs");
-
-const extensions = [".js", ".ts"];
-
-/**
- * @param {Object} arg
- * @param { import("rollup").InputOption } arg.input
- */
-const createRollupConfig = ({
-  entry,
-  outputPath,
-  defineOverlay,
-  isProdBuild,
-  latestBuild,
-  isStatsBuild,
-  publicPath,
-  dontHash,
-  isWDS,
-}) => ({
-  /**
-   * @type { import("rollup").InputOptions }
-   */
-  inputOptions: {
-    input: entry,
-    // Some entry points contain no JavaScript. This setting silences a warning about that.
-    // https://rollupjs.org/configuration-options/#preserveentrysignatures
-    preserveEntrySignatures: false,
-    plugins: [
-      ignore({
-        files: bundle
-          .emptyPackages({ latestBuild })
-          // TEMP HACK: Makes Rollup build work again
-          .concat(
-            require.resolve(
-              "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min"
-            )
-          ),
-      }),
-      resolve({
-        extensions,
-        preferBuiltins: false,
-        browser: true,
-        rootDir: paths.polymer_dir,
-      }),
-      commonjs(),
-      json(),
-      babel({
-        ...bundle.babelOptions({ latestBuild, isProdBuild }),
-        extensions,
-        babelHelpers: isWDS ? "inline" : "bundled",
-      }),
-      string({
-        // Import certain extensions as strings
-        include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
-      }),
-      replace(bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })),
-      !isWDS &&
-        manifest({
-          publicPath,
-        }),
-      !isWDS && worker(),
-      !isWDS && dontHashPlugin({ dontHash }),
-      !isWDS && isProdBuild && terser(bundle.terserOptions({ latestBuild })),
-      !isWDS &&
-        isStatsBuild &&
-        visualizer({
-          // https://github.com/btd/rollup-plugin-visualizer#options
-          open: true,
-          sourcemap: true,
-        }),
-    ].filter(Boolean),
-  },
-  /**
-   * @type { import("rollup").OutputOptions }
-   */
-  outputOptions: {
-    // https://rollupjs.org/configuration-options/#output-dir
-    dir: outputPath,
-    // https://rollupjs.org/configuration-options/#output-format
-    format: latestBuild ? "es" : "systemjs",
-    // https://rollupjs.org/configuration-options/#output-externallivebindings
-    externalLiveBindings: false,
-    // https://rollupjs.org/configuration-options/#output-entryfilenames
-    // https://rollupjs.org/configuration-options/#output-chunkfilenames
-    // https://rollupjs.org/configuration-options/#output-assetfilenames
-    entryFileNames:
-      isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
-    chunkFileNames: isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
-    assetFileNames: isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
-    // https://rollupjs.org/configuration-options/#output-sourcemap
-    sourcemap: isProdBuild ? true : "inline",
-  },
-});
-
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) =>
-  createRollupConfig(
-    bundle.config.app({
-      isProdBuild,
-      latestBuild,
-      isStatsBuild,
-      isWDS,
-    })
-  );
-
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createRollupConfig(
-    bundle.config.demo({
-      isProdBuild,
-      latestBuild,
-      isStatsBuild,
-    })
-  );
-
-const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-
-const createHassioConfig = ({ isProdBuild, latestBuild }) =>
-  createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
-
-const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createRollupConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
-
-module.exports = {
-  createAppConfig,
-  createDemoConfig,
-  createCastConfig,
-  createHassioConfig,
-  createGalleryConfig,
-  createRollupConfig,
-};

build-scripts/rspack.cjs

@@ -1,10 +1,13 @@
 const { existsSync } = require("fs");
 const path = require("path");
-const webpack = require("webpack");
+const rspack = require("@rspack/core");
+const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -22,7 +25,7 @@ class LogStartCompilePlugin {
   }
 }
 
-const createWebpackConfig = ({
+const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -49,25 +52,33 @@ const createWebpackConfig = ({
     devtool: isTestBuild
       ? false
       : isProdBuild
-      ? "nosources-source-map"
-      : "eval-cheap-module-source-map",
+        ? "nosources-source-map"
+        : "eval-cheap-module-source-map",
     entry,
     node: false,
     module: {
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          use: {
+          use: (info) => ({
             loader: "babel-loader",
             options: {
-              ...bundle.babelOptions({ latestBuild, isProdBuild, isTestBuild }),
+              ...bundle.babelOptions({
+                latestBuild,
+                isProdBuild,
+                isTestBuild,
+                sw: info.issuerLayer === "sw",
+              }),
               cacheDirectory: !isProdBuild,
               cacheCompression: false,
             },
-          },
+          }),
           resolve: {
             fullySpecified: false,
           },
+          parser: {
+            worker: ["*context.audioWorklet.addModule()", "..."],
+          },
         },
         {
           test: /\.css$/,
@@ -86,11 +97,20 @@ 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,
+        // Disable splitting for web workers and worklets because imports of
+        // external chunks are broken for:
+        chunks: !isProdBuild
+          ? // improve incremental build speed, but blows up bundle size
+            new RegExp(
+              `^(?!(${Object.keys(entry).join("|")}|.*work(?:er|let))$)`
+            )
+          : // - ESM output: https://github.com/webpack/webpack/issues/17014
+            // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
+            (chunk) =>
+              !chunk.canBeInitial() &&
+              !new RegExp(
+                `^.+-work${latestBuild ? "(?:let|er)" : "let"}$`
+              ).test(chunk.name),
       },
     },
     plugins: [
@@ -99,10 +119,10 @@ const createWebpackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      new webpack.DefinePlugin(
+      new rspack.DefinePlugin(
         bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
-      new webpack.IgnorePlugin({
+      new rspack.IgnorePlugin({
         checkResource(resource, context) {
           // Only use ignore to intercept imports that we don't control
           // inside node_module dependencies.
@@ -134,28 +154,36 @@ const createWebpackConfig = ({
           );
         },
       }),
-      new webpack.NormalModuleReplacementPlugin(
+      new rspack.NormalModuleReplacementPlugin(
         new RegExp(
           bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
         ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // See `src/resources/intl-polyfill-legacy.ts` for explanation
-      !latestBuild &&
-        new webpack.NormalModuleReplacementPlugin(
-          new RegExp(
-            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
-          ),
-          path.resolve(
-            paths.polymer_dir,
-            "src/resources/intl-polyfill-legacy.ts"
-          )
-        ),
       !isProdBuild && new LogStartCompilePlugin(),
+      isProdBuild &&
+        new StatsWriterPlugin({
+          filename: path.relative(
+            outputPath,
+            path.join(paths.build_dir, "stats", `${name}.json`)
+          ),
+          stats: { assets: true, chunks: true, modules: true },
+          transform: (stats) => JSON.stringify(filterStats(stats)),
+        }),
+      isProdBuild &&
+        isStatsBuild &&
+        new RsdoctorRspackPlugin({
+          reportDir: path.join(paths.build_dir, "rsdoctor"),
+          features: ["plugins", "bundle"],
+          supports: {
+            generateTileGraph: true,
+          },
+        }),
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
       alias: {
+        "lit/static-html$": "lit/static-html.js",
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
         "lit/directives/until$": "lit/directives/until.js",
@@ -165,11 +193,15 @@ const createWebpackConfig = ({
         "lit/directives/guard$": "lit/directives/guard.js",
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
+        "lit/directives/live$": "lit/directives/live.js",
+        "lit/directives/keyed$": "lit/directives/keyed.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",
+        "@lit-labs/observers/resize-controller":
+          "@lit-labs/observers/resize-controller.js",
       },
     },
     output: {
@@ -177,14 +209,13 @@ const createWebpackConfig = ({
       filename: ({ chunk }) =>
         !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
-          : "[name]-[contenthash].js",
+          : "[name].[contenthash].js",
       chunkFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash].js" : "[name].js",
+        isProdBuild && !isStatsBuild ? "[name].[contenthash].js" : "[name].js",
       assetModuleFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash][ext]" : "[id][ext]",
+        isProdBuild && !isStatsBuild ? "[id].[contenthash][ext]" : "[id][ext]",
+      crossOriginLoading: "use-credentials",
       hashFunction: "xxhash64",
-      hashDigest: "base64url",
-      hashDigestLength: 11, // full length of 64 bit base64url
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
@@ -214,6 +245,7 @@ const createWebpackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };
@@ -225,17 +257,17 @@ const createAppConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
 
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
 const createHassioConfig = ({
   isProdBuild,
@@ -243,7 +275,7 @@ const createHassioConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.hassio({
       isProdBuild,
       latestBuild,
@@ -253,7 +285,10 @@ const createHassioConfig = ({
   );
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+
+const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,
@@ -261,5 +296,6 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createWebpackConfig,
+  createRspackConfig,
+  createLandingPageConfig,
 };

build-scripts/util.cjs

@@ -1,16 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-
-// Helper function to map recursively over files in a folder and it's subfolders
-module.exports.mapFiles = function mapFiles(startPath, filter, mapFunc) {
-  const files = fs.readdirSync(startPath);
-  for (let i = 0; i < files.length; i++) {
-    const filename = path.join(startPath, files[i]);
-    const stat = fs.lstatSync(filename);
-    if (stat.isDirectory()) {
-      mapFiles(filename, filter, mapFunc);
-    } else if (filename.indexOf(filter) >= 0) {
-      mapFunc(filename);
-    }
-  }
-};

cast/public/sw-legacy.js

@@ -0,0 +1,5 @@
+"use strict";
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(fetch(event.request));
+});

cast/rollup.config.js

@@ -1,10 +0,0 @@
-import rollup from "../build-scripts/rollup.cjs";
-import env from "../build-scripts/env.cjs";
-
-const config = rollup.createCastConfig({
-  isProdBuild: env.isProdBuild(),
-  latestBuild: true,
-  isStatsBuild: env.isStatsBuild(),
-});
-
-export default { ...config.inputOptions, output: config.outputOptions };

cast/src/html/faq.html.template

@@ -36,13 +36,7 @@
   </head>
   <body>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
     <hc-layout subtitle="FAQ">
       <style>
         a {
@@ -145,7 +139,7 @@
         </p>
       </div>
 
-      <div class="section-header">Wat does Home Assistant Cast do?</div>
+      <div class="section-header">What does Home Assistant Cast do?</div>
       <div class="card-content">
         <p>
           Home Assistant Cast is a receiver application for the Chromecast. When
@@ -232,17 +226,5 @@ http:
         </p>
       </div>
     </hc-layout>
-
-    <script>
-      var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
-      (function (d, t) {
-        var g = d.createElement(t),
-          s = d.getElementsByTagName(t)[0];
-        g.src =
-          ("https:" == location.protocol ? "//ssl" : "//www") +
-          ".google-analytics.com/ga.js";
-        s.parentNode.insertBefore(g, s);
-      })(document, "script");
-    </script>
   </body>
 </html>

cast/src/html/index.html.template

@@ -13,15 +13,9 @@
     <%= renderTemplate("_social_meta.html.template") %>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <hc-connect></hc-connect>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

cast/src/html/media.html.template

@@ -14,22 +14,10 @@
         --background-color: #41bdf5;
       }
     </style>
-    <script>
-      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-      s.parentNode.insertBefore(g,s)}(document,'script'));
-    </script>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <cast-media-player></cast-media-player>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
   </body>
 </html>

cast/src/html/receiver.html.template

@@ -11,10 +11,4 @@
       font-size: initial;
     }
   </style>
-  <script>
-  var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-  s.parentNode.insertBefore(g,s)}(document,'script'));
-  </script>
 </html>

cast/src/launcher/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../../src/resources/safari-14-attachshadow-patch";
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
 import "./layout/hc-connect";
+
+import("../../../src/resources/ha-style");

cast/src/launcher/layout/hc-cast.ts

@@ -1,11 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import { mdiCast, mdiCastConnected } from "@mdi/js";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { Auth, Connection } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "@material/mwc-list/mwc-list";
+import type { ActionDetail } from "@material/mwc-list/mwc-list";
+import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
+import type { Auth, Connection } from "home-assistant-js-websocket";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { CastManager } from "../../../../src/cast/cast_manager";
+import type { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
   ensureConnectedCastSession,
@@ -22,26 +23,28 @@ import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
-  LovelaceConfig,
 } from "../../../../src/data/lovelace";
+import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
+import "../../../../src/components/ha-list-item";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
-  @property() public auth!: Auth;
+  @property({ attribute: false }) public auth!: Auth;
 
-  @property() public connection!: Connection;
+  @property({ attribute: false }) public connection!: Connection;
 
-  @property() public castManager!: CastManager;
+  @property({ attribute: false }) public castManager!: CastManager;
 
   @state() private askWrite = false;
 
-  @state() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceViews?: LovelaceViewConfig[] | null;
 
   protected render(): TemplateResult {
-    if (this.lovelaceConfig === undefined) {
+    if (this.lovelaceViews === undefined) {
       return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
@@ -72,43 +75,48 @@ class HcCast extends LitElement {
         ${error
           ? html` <div class="card-content">${error}</div> `
           : !this.castManager.status
-          ? html`
-              <p class="center-item">
-                <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
-                  Start Casting
-                </mwc-button>
-              </p>
-            `
-          : html`
-              <div class="section-header">PICK A VIEW</div>
-              <paper-listbox
-                attr-for-selected="data-path"
-                .selected=${this.castManager.status.lovelacePath || ""}
-              >
-                ${(this.lovelaceConfig
-                  ? this.lovelaceConfig.views
-                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
-                ).map(
-                  (view, idx) => html`
-                    <paper-icon-item
-                      @click=${this._handlePickView}
-                      data-path=${view.path || idx}
-                    >
-                      ${view.icon
-                        ? html`
-                            <ha-icon
-                              .icon=${view.icon}
+            ? html`
+                <p class="center-item">
+                  <mwc-button raised @click=${this._handleLaunch}>
+                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                    Start Casting
+                  </mwc-button>
+                </p>
+              `
+            : html`
+                <div class="section-header">PICK A VIEW</div>
+                <mwc-list @action=${this._handlePickView} activatable>
+                  ${(
+                    this.lovelaceViews ?? [
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
+                    ]
+                  ).map(
+                    (view, idx) => html`
+                      <ha-list-item
+                        graphic="avatar"
+                        .activated=${this.castManager.status?.lovelacePath ===
+                        (view.path ?? idx)}
+                        .selected=${this.castManager.status?.lovelacePath ===
+                        (view.path ?? idx)}
+                      >
+                        ${view.title || view.path || "Unnamed view"}
+                        ${view.icon
+                          ? html`
+                              <ha-icon
+                                .icon=${view.icon}
+                                slot="graphic"
+                              ></ha-icon>
+                            `
+                          : html`<ha-svg-icon
                               slot="item-icon"
-                            ></ha-icon>
-                          `
-                        : ""}
-                      ${view.title || view.path}
-                    </paper-icon-item>
-                  `
-                )}
-              </paper-listbox>
-            `}
+                              .path=${mdiViewDashboard}
+                            ></ha-svg-icon>`}
+                      </ha-list-item>
+                    `
+                  )}</mwc-list
+                >
+              `}
+
         <div class="card-actions">
           ${this.castManager.status
             ? html`
@@ -136,11 +144,15 @@ class HcCast extends LitElement {
     llColl.refresh().then(
       () => {
         llColl.subscribe((config) => {
-          this.lovelaceConfig = config;
+          if (isStrategyDashboard(config)) {
+            this.lovelaceViews = null;
+          } else {
+            this.lovelaceViews = config.views;
+          }
         });
       },
       async () => {
-        this.lovelaceConfig = null;
+        this.lovelaceViews = null;
       }
     );
 
@@ -159,9 +171,7 @@ class HcCast extends LitElement {
     toggleAttribute(
       this,
       "hide-icons",
-      this.lovelaceConfig
-        ? !this.lovelaceConfig.views.some((view) => view.icon)
-        : true
+      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
     );
   }
 
@@ -178,8 +188,8 @@ class HcCast extends LitElement {
     this.castManager.requestSession();
   }
 
-  private async _handlePickView(ev: Event) {
-    const path = (ev.currentTarget as any).getAttribute("data-path");
+  private async _handlePickView(ev: CustomEvent<ActionDetail>) {
+    const path = this.lovelaceViews![ev.detail.index].path ?? ev.detail.index;
     await ensureConnectedCastSession(this.castManager!, this.auth!);
     castSendShowLovelaceView(this.castManager, this.auth.data.hassUrl, path);
   }
@@ -237,28 +247,19 @@ class HcCast extends LitElement {
 
       mwc-button ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         height: 18px;
       }
 
-      paper-listbox {
-        padding-top: 0;
-      }
-
-      paper-listbox ha-icon {
+      ha-list-item ha-icon,
+      ha-list-item ha-svg-icon {
         padding: 12px;
         color: var(--secondary-text-color);
       }
 
-      paper-icon-item {
-        cursor: pointer;
-      }
-
-      paper-icon-item[disabled] {
-        cursor: initial;
-      }
-
-      :host([hide-icons]) paper-icon-item {
-        --paper-item-icon-width: 0px;
+      :host([hide-icons]) ha-icon {
+        display: none;
       }
 
       .spacer {

cast/src/launcher/layout/hc-connect.ts

@@ -1,20 +1,23 @@
 import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import {
+import type {
   Auth,
   Connection,
+  getAuthOptions,
+} from "home-assistant-js-websocket";
+import {
   createConnection,
   ERR_CANNOT_CONNECT,
   ERR_HASS_HOST_REQUIRED,
   ERR_INVALID_AUTH,
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
-  getAuthOptions,
 } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
+import type { CastManager } from "../../../../src/cast/cast_manager";
+import { getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
   loadTokens,
@@ -24,6 +27,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
+import "../../../../src/components/ha-textfield";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -33,13 +37,13 @@ const translateErr = (err) =>
   err === ERR_CANNOT_CONNECT
     ? "Unable to connect"
     : err === ERR_HASS_HOST_REQUIRED
-    ? "Please enter a Home Assistant URL."
-    : err === ERR_INVALID_HTTPS_TO_HTTP
-    ? html`
-        Cannot connect to Home Assistant instances over "http://".
-        ${seeFAQ("https")}
-      `
-    : `Unknown error (${err}).`;
+      ? "Please enter a Home Assistant URL."
+      : err === ERR_INVALID_HTTPS_TO_HTTP
+        ? html`
+            Cannot connect to Home Assistant instances over "http://".
+            ${seeFAQ("https")}
+          `
+        : `Unknown error (${err}).`;
 
 const INTRO = html`
   <p>
@@ -116,13 +120,11 @@ export class HcConnect extends LitElement {
               To get started, enter your Home Assistant URL and click authorize.
               If you want a preview instead, click the show demo button.
             </p>
-            <p>
-              <paper-input
-                label="Home Assistant URL"
-                placeholder="https://abcdefghijklmnop.ui.nabu.casa"
-                @keydown=${this._handleInputKeyDown}
-              ></paper-input>
-            </p>
+            <ha-textfield
+              label="Home Assistant URL"
+              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
+              @keydown=${this._handleInputKeyDown}
+            ></ha-textfield>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -196,7 +198,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("paper-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -315,6 +317,10 @@ export class HcConnect extends LitElement {
       .spacer {
         flex: 1;
       }
+
+      ha-textfield {
+        width: 100%;
+      }
     `;
   }
 }

cast/src/launcher/layout/hc-layout.ts

@@ -1,22 +1,19 @@
-import {
-  Auth,
-  Connection,
-  getUser,
-  HassUser,
-} from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
+import { getUser } from "home-assistant-js-websocket";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
-  @property() public subtitle?: string | undefined;
+  @property() public subtitle?: string;
 
-  @property() public auth?: Auth;
+  @property({ attribute: false }) public auth?: Auth;
 
-  @property() public connection?: Connection;
+  @property({ attribute: false }) public connection?: Connection;
 
-  @property() public user?: HassUser;
+  @property({ attribute: false }) public user?: HassUser;
 
   protected render(): TemplateResult {
     return html`
@@ -88,7 +85,7 @@ class HcLayout extends LitElement {
       }
 
       .card-header {
-        color: var(--ha-card-header-color, --primary-text-color);
+        color: var(--ha-card-header-color, var(--primary-text-color));
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;

cast/src/receiver/demo/cast-demo-entities.ts

@@ -1,4 +1,5 @@
-import { convertEntities, Entity } from "../../../../src/fake_data/entity";
+import type { Entity } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";
 
 export const castDemoEntities: () => Entity[] = () =>
   convertEntities({

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -1,7 +1,5 @@
-import {
-  LovelaceCardConfig,
-  LovelaceConfig,
-} from "../../../../src/data/lovelace";
+import type { LovelaceCardConfig } from "../../../../src/data/lovelace/config/card";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {

cast/src/receiver/entrypoint.ts

@@ -1,10 +1,10 @@
 import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
-import { HassMessage } from "../../../src/cast/receiver_messages";
+import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
-import { ReceivedMessage } from "./types";
+import type { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);

cast/src/receiver/layout/hc-demo.ts

@@ -1,13 +1,11 @@
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
-import {
-  MockHomeAssistant,
-  provideHass,
-} from "../../../../src/fake_data/provide_hass";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HassElement } from "../../../../src/state/hass-element";
-import { HomeAssistant } from "../../../../src/types";
+import type { HomeAssistant } from "../../../../src/types";
 import { castDemoEntities } from "../demo/cast-demo-entities";
 import { castDemoLovelace } from "../demo/cast-demo-lovelace";
 import "./hc-lovelace";

cast/src/receiver/layout/hc-launch-screen.ts

@@ -1,6 +1,7 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { HomeAssistant } from "../../../../src/types";
+import type { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
@@ -12,8 +13,8 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
-          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
-          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
+          alt="Nabu Casa logo on left, Home Assistant logo on right, and red heart in center"
+          src="https://cast.home-assistant.io/images/nabu-loves-hass.png"
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}
@@ -28,23 +29,23 @@ class HcLaunchScreen extends LitElement {
       :host {
         display: block;
         height: 100vh;
-        padding-top: 64px;
-        background-color: white;
+        background-color: #f2f4f9;
         font-size: 24px;
       }
       .container {
         display: flex;
         flex-direction: column;
         text-align: center;
+        align-items: center;
+        height: 100%;
+        justify-content: space-evenly;
       }
       img {
-        width: 717px;
-        height: 376px;
-        display: block;
-        margin: 0 auto;
+        max-width: 80%;
+        object-fit: cover;
       }
       .status {
-        padding-right: 54px;
+        color: #1d2126;
       }
     `;
   }

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,10 +1,18 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import {
+  css,
+  type CSSResultGroup,
+  html,
+  LitElement,
+  type TemplateResult,
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
-import { Lovelace } from "../../../../src/panels/lovelace/types";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
+import type { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
-import { HomeAssistant } from "../../../../src/types";
+import "../../../../src/panels/lovelace/views/hui-view-container";
+import type { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
 (window as any).loadCardHelpers = () =>
@@ -14,13 +22,12 @@ import "./hc-launch-screen";
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false })
+  public lovelaceConfig!: LovelaceConfig;
 
-  @property() public viewPath?: string | number;
+  @property({ attribute: false }) public viewPath?: string | number | null;
 
-  @property() public urlPath: string | null = null;
-
-  @query("hui-view") private _huiView?: HTMLElement;
+  @property({ attribute: false }) public urlPath: string | null = null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -43,13 +50,24 @@ class HcLovelace extends LitElement {
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
+      showToast: () => undefined,
     };
+
+    const viewConfig = this.lovelaceConfig.views[index];
+    const background = viewConfig.background || this.lovelaceConfig.background;
+
     return html`
-      <hui-view
+      <hui-view-container
         .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-      ></hui-view>
+        .background=${background}
+        .theme=${viewConfig.theme}
+      >
+        <hui-view
+          .hass=${this.hass}
+          .lovelace=${lovelace}
+          .index=${index}
+        ></hui-view>
+      </hui-view-container>
     `;
   }
 
@@ -60,7 +78,12 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
+        const title = getPanelTitleFromUrlPath(
+          this.hass,
+          this.urlPath || "lovelace"
+        );
+
+        const dashboardTitle = title || this.urlPath;
 
         const viewTitle =
           this.lovelaceConfig.views[index].title ||
@@ -74,24 +97,14 @@ class HcLovelace extends LitElement {
                 }${viewTitle || ""}`
               : undefined,
         });
-
-        const configBackground =
-          this.lovelaceConfig.views[index].background ||
-          this.lovelaceConfig.background;
-
-        if (configBackground) {
-          this._huiView!.style.setProperty(
-            "--lovelace-background",
-            configBackground
-          );
-        } else {
-          this._huiView!.style.removeProperty("--lovelace-background");
-        }
       }
     }
   }
 
   private get _viewIndex() {
+    if (this.viewPath === null) {
+      return 0;
+    }
     const selectedView = this.viewPath;
     const selectedViewInt = parseInt(selectedView as string, 10);
     for (let i = 0; i < this.lovelaceConfig.views.length; i++) {
@@ -107,19 +120,15 @@ class HcLovelace extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        min-height: 100vh;
-        height: 0;
+      hui-view-container {
         display: flex;
-        flex-direction: column;
+        position: relative;
+        min-height: 100vh;
         box-sizing: border-box;
-        background: var(--primary-background-color);
-      }
-      :host > * {
-        flex: 1;
       }
       hui-view {
-        background: var(--lovelace-background, var(--primary-background-color));
+        flex: 1 1 100%;
+        max-width: 100%;
       }
     `;
   }

cast/src/receiver/layout/hc-main.ts

@@ -1,36 +1,46 @@
-import {
-  createConnection,
-  getAuth,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
-import { html, TemplateResult } from "lit";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { createConnection, getAuth } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
-import {
+import type {
   ConnectMessage,
   GetStatusMessage,
   HassMessage,
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import {
-  ReceiverErrorCode,
+import type {
   ReceiverErrorMessage,
   ReceiverStatusMessage,
 } from "../../../../src/cast/sender_messages";
+import { ReceiverErrorCode } from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
-  fetchResources,
   getLegacyLovelaceCollection,
   getLovelaceCollection,
+} from "../../../../src/data/lovelace";
+import type {
   LegacyLovelaceConfig,
   LovelaceConfig,
-} from "../../../../src/data/lovelace";
+  LovelaceDashboardStrategyConfig,
+} from "../../../../src/data/lovelace/config/types";
+import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+import { fetchResources } from "../../../../src/data/lovelace/resource";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
 import { HassElement } from "../../../../src/state/hass-element";
 import { castContext } from "../cast_context";
 import "./hc-launch-screen";
+import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
+import { checkLovelaceConfig } from "../../../../src/panels/lovelace/common/check-lovelace-config";
+
+const DEFAULT_CONFIG: LovelaceDashboardStrategyConfig = {
+  strategy: {
+    type: "original-states",
+  },
+};
 
 let resourcesLoaded = false;
 @customElement("hc-main")
@@ -41,10 +51,10 @@ export class HcMain extends HassElement {
 
   @state() private _lovelacePath: string | number | null = null;
 
-  @state() private _error?: string;
-
   @state() private _urlPath?: string | null;
 
+  @state() private _error?: string;
+
   private _hassUUID?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
@@ -71,7 +81,7 @@ export class HcMain extends HassElement {
 
     if (
       !this._lovelaceConfig ||
-      this._lovelacePath === null ||
+      this._urlPath === undefined ||
       // Guard against part of HA not being loaded yet.
       !this.hass ||
       !this.hass.states ||
@@ -89,16 +99,18 @@ export class HcMain extends HassElement {
       <hc-lovelace
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
-        .viewPath=${this._lovelacePath}
         .urlPath=${this._urlPath}
-        @config-refresh=${this._generateLovelaceConfig}
+        .viewPath=${this._lovelacePath}
+        @config-refresh=${this._generateDefaultLovelaceConfig}
       ></hc-lovelace>
     `;
   }
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    import("../second-load");
+    import("./hc-lovelace");
+    import("../../../../src/resources/ha-style");
+
     window.addEventListener("location-changed", () => {
       const panelPath = `/${this._urlPath || "lovelace"}/`;
       if (location.pathname.startsWith(panelPath)) {
@@ -132,10 +144,10 @@ export class HcMain extends HassElement {
     }
 
     if (senderId) {
-      this.sendMessage(senderId, status);
+      this._sendMessage(senderId, status);
     } else {
       for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, status);
+        this._sendMessage(sender.id, status);
       }
     }
   }
@@ -152,10 +164,10 @@ export class HcMain extends HassElement {
     };
 
     if (senderId) {
-      this.sendMessage(senderId, error);
+      this._sendMessage(senderId, error);
     } else {
       for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, error);
+        this._sendMessage(sender.id, error);
       }
     }
   }
@@ -193,7 +205,6 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
       const errorMessage = this._getErrorMessage(err);
       this._error = errorMessage;
@@ -213,6 +224,17 @@ export class HcMain extends HassElement {
       this.hass.connection.close();
     }
     this.initializeHass(auth, connection);
+    if (this._hassUUID !== msg.hassUUID) {
+      this._hassUUID = msg.hassUUID;
+      this._lovelaceConfig = undefined;
+      this._urlPath = undefined;
+      this._lovelacePath = null;
+      if (this._unsubLovelace) {
+        this._unsubLovelace();
+        this._unsubLovelace = undefined;
+      }
+      resourcesLoaded = false;
+    }
     this._error = undefined;
     this._sendStatus();
   }
@@ -221,7 +243,7 @@ export class HcMain extends HassElement {
     this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
-    if (!this.hass) {
+    if (!this.hass?.connected) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
       this._sendError(
@@ -248,7 +270,7 @@ export class HcMain extends HassElement {
     }
 
     this._error = undefined;
-    if (msg.urlPath === "lovelace") {
+    if (msg.urlPath === "lovelace" || msg.urlPath === undefined) {
       msg.urlPath = null;
     }
     this._lovelacePath = msg.viewPath;
@@ -258,13 +280,12 @@ export class HcMain extends HassElement {
           {
             strategy: {
               type: "energy",
-              options: { show_date_selection: true },
             },
           },
         ],
       };
       this._urlPath = "energy";
-      this._lovelacePath = 0;
+      this._lovelacePath = null;
       this._sendStatus();
       return;
     }
@@ -273,6 +294,7 @@ export class HcMain extends HassElement {
       this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
+        this._unsubLovelace = undefined;
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
         ? getLovelaceCollection(this.hass.connection, msg.urlPath)
@@ -281,9 +303,20 @@ export class HcMain extends HassElement {
       // configuration.
       try {
         await llColl.refresh();
-        this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
-          this._handleNewLovelaceConfig(lovelaceConfig)
-        );
+        this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
+          if (isStrategyDashboard(rawConfig)) {
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
+            const config = await generateLovelaceDashboardStrategy(
+              rawConfig.strategy,
+              this.hass!
+            );
+            this._handleNewLovelaceConfig(config);
+          } else {
+            this._handleNewLovelaceConfig(rawConfig);
+          }
+        });
       } catch (err: any) {
         if (
           atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
@@ -297,7 +330,7 @@ export class HcMain extends HassElement {
         }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        await this._generateLovelaceConfig();
+        await this._generateDefaultLovelaceConfig();
       }
     }
     if (!resourcesLoaded) {
@@ -306,31 +339,34 @@ export class HcMain extends HassElement {
         ? await fetchResources(this.hass!.connection)
         : (this._lovelaceConfig as LegacyLovelaceConfig).resources;
       if (resources) {
-        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
+        loadLovelaceResources(resources, this.hass!);
       }
     }
 
     this._sendStatus();
   }
 
-  private async _generateLovelaceConfig() {
+  private async _generateDefaultLovelaceConfig() {
     const { generateLovelaceDashboardStrategy } = await import(
       "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(
-        {
-          hass: this.hass!,
-          narrow: false,
-        },
-        "original-states"
+        DEFAULT_CONFIG.strategy,
+        this.hass!
       )
     );
   }
 
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title || "");
-    this._lovelaceConfig = lovelaceConfig;
+    const title = getPanelTitleFromUrlPath(
+      this.hass!,
+      this._urlPath || "lovelace"
+    );
+    castContext.setApplicationState(title || "");
+    this._lovelaceConfig = checkLovelaceConfig(
+      lovelaceConfig
+    ) as LovelaceConfig;
   }
 
   private _handleShowDemo(_msg: ShowDemoMessage) {
@@ -358,7 +394,7 @@ export class HcMain extends HassElement {
     }
   }
 
-  private sendMessage(senderId: string, response: any) {
+  private _sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }
 }

cast/src/receiver/second-load.ts

@@ -1,3 +0,0 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
-import "./layout/hc-lovelace";

cast/webpack.config.js

@@ -1,8 +0,0 @@
-import webpack from "../build-scripts/webpack.cjs";
-import env from "../build-scripts/env.cjs";
-
-export default webpack.createCastConfig({
-  isProdBuild: env.isProdBuild(),
-  isStatsBuild: env.isStatsBuild(),
-  latestBuild: true,
-});

demo/public/manifest.json

@@ -8,25 +8,67 @@
       "src": "/static/icons/favicon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
     },
     {
       "src": "/static/icons/favicon-384x384.png",
       "sizes": "384x384",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
     },
     {
       "src": "/static/icons/favicon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
     },
     {
       "src": "/static/icons/favicon-1024x1024.png",
       "sizes": "1024x1024",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
+    },
+    {
+      "src": "/static/icons/maskable_icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "lang": "en-US",

demo/public/sw-legacy.js

@@ -0,0 +1,5 @@
+"use strict";
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(fetch(event.request));
+});

demo/rollup.config.js

@@ -1,10 +0,0 @@
-import rollup from "../build-scripts/rollup.cjs";
-import env from "../build-scripts/env.cjs";
-
-const config = rollup.createDemoConfig({
-  isProdBuild: env.isProdBuild(),
-  latestBuild: true,
-  isStatsBuild: env.isStatsBuild(),
-});
-
-export default { ...config.inputOptions, output: config.outputOptions };

demo/script/size_stats

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-export STATS=1
-statsfile="compilation-stats-demo.json"
-
-./node_modules/.bin/webpack-cli --profile --node-env=production --json=$statsfile
-npx webpack-bundle-analyzer $statsfile dist/frontend_latest
-rm -f $statsfile
+./node_modules/.bin/gulp analyze-demo

demo/src/configs/arsaboo/entities.ts

@@ -1,8 +1,17 @@
 import { convertEntities } from "../../../../src/fake_data/entity";
-import { DemoConfig } from "../types";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
   convertEntities({
+    "todo.shopping_list": {
+      entity_id: "todo.shopping_list",
+      state: "2",
+      attributes: {
+        supported_features: 15,
+        friendly_name: "Shopping List",
+        icon: "mdi:cart",
+      },
+    },
     "zone.home": {
       entity_id: "zone.home",
       state: "zoning",

demo/src/configs/arsaboo/index.ts

@@ -1,4 +1,4 @@
-import { DemoConfig } from "../types";
+import type { DemoConfig } from "../types";
 import { demoEntitiesArsaboo } from "./entities";
 import { demoLovelaceArsaboo } from "./lovelace";
 import { demoThemeArsaboo } from "./theme";