Fix new script/automation dialog

* yaml / visual part 2

* clean up

* ci

.browserslistrc

@@ -4,13 +4,12 @@
 # - released in the last year + current alpha/beta versions
 # - Firefox extended support release (ESR)
 # - with global utilization at or above 0.5%
-# - must support dynamic import of ES modules
-# - exclude browsers no longer being maintained
+# - 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% and supports es6-module-dynamic-import
+>= 0.5%
 not dead
 not KaiOS > 0
 not QQAndroid > 0
@@ -20,23 +19,18 @@ not UCAndroid > 0
 # 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 at or 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.
+# - 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 websockets and supports serviceworkers
+>= 0.05% and supports serviceworkers
+not dead
+not op_mini all

.eslintrc.json

@@ -1,132 +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-names": "warn",
-    "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",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-import-type-side-effects": "error"
-  },
-  "plugins": ["unused-imports"]
-}

.github/workflows/ci.yaml

@@ -26,18 +26,24 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        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@v4.1.2
+        uses: actions/cache@v4.2.0
         with:
           path: |
             node_modules/.cache/prettier
@@ -60,11 +66,19 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        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 gen-icons-json build-translations build-locale-data
@@ -78,11 +92,19 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        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
@@ -102,11 +124,19 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        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

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v2.1.13
+        uses: relative-ci/agent-action@v2.1.14
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.0.9
+        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@2024.07.1
+        uses: home-assistant/wheels@2024.11.0
         with:
           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

.gitignore

@@ -50,3 +50,6 @@ src/cast/dev_const.ts
 
 # Jetbrains
 /.idea/
+
+# test coverage
+test/coverage/

.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",

.yarnrc.yml

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

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

@@ -147,6 +147,7 @@ const polyfillMap = {
       ...Object.fromEntries(
         [
           "DateTimeFormat",
+          "DurationFormat",
           "DisplayNames",
           "ListFormat",
           "NumberFormat",

build-scripts/bundle.cjs

@@ -53,6 +53,11 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __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"
   ),
@@ -152,7 +157,6 @@ module.exports.babelOptions = ({
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
     /node_modules[\\/]core-js/,
-    /node_modules[\\/]webpack[\\/]buildin/,
   ],
   sourceMaps: !isTestBuild,
   overrides: [
@@ -226,13 +230,12 @@ module.exports.config = {
     return {
       name: "frontend" + nameSuffix(latestBuild),
       entry: {
-        "service-worker":
-          !env.useRollup() && !latestBuild
-            ? {
-                import: "./src/entrypoints/service-worker.ts",
-                layer: "sw",
-              }
-            : "./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",
@@ -328,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
@@ -33,6 +29,6 @@ module.exports = {
     return version[1];
   },
   isDevContainer() {
-    return process.env.DEV_CONTAINER === "1";
+    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"])
+    ...(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

@@ -3,7 +3,6 @@
 import { constants } from "node:zlib";
 import gulp from "gulp";
 import brotli from "gulp-brotli";
-import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
@@ -13,7 +12,6 @@ const brotliOptions = {
     [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
   },
 };
-const zopfliOptions = { threshold: 150 };
 
 const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
   gulp
@@ -29,20 +27,6 @@ const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
     .pipe(brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
-  gulp
-    .src(
-      [
-        `${rootDir}/**/${filesGlob}`,
-        compressModern ? undefined : `!${modernDir}/**/${filesGlob}`,
-        `!${rootDir}/{sw-modern,service_worker}.js`,
-        `${rootDir}/{authorize,onboarding}.html`,
-      ].filter(Boolean),
-      { base: rootDir }
-    )
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir));
-
 const compressAppBrotli = () =>
   compressDistBrotli(paths.app_output_root, paths.app_output_latest);
 const compressHassioBrotli = () =>
@@ -52,17 +36,5 @@ const compressHassioBrotli = () =>
     false
   );
 
-const compressAppZopfli = () =>
-  compressDistZopfli(paths.app_output_root, paths.app_output_latest);
-const compressHassioZopfli = () =>
-  compressDistZopfli(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    true
-  );
-
-gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
-gulp.task(
-  "compress-hassio",
-  gulp.parallel(compressHassioBrotli, compressHassioZopfli)
-);
+gulp.task("compress-app", compressAppBrotli);
+gulp.task("compress-hassio", compressHassioBrotli);

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

@@ -127,6 +127,7 @@ gulp.task("fetch-lokalise", async function () {
           replace_breaks: false,
           json_unescaped_slashes: true,
           export_empty_as: "skip",
+          filter_data: ["verified"],
         })
         .then((download) => fetch(download.bundle_url))
         .then((response) => {

build-scripts/gulp/entry-html.js

@@ -11,7 +11,6 @@ import { minify } from "html-minifier-terser";
 import template from "lodash.template";
 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,
@@ -56,8 +55,6 @@ const getCommonTemplateVars = () => {
     { ignorePatch: true, allowHigherVersions: true }
   );
   return {
-    useRollup: env.useRollup(),
-    useWDS: env.useWDS(),
     modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
   };
 };
@@ -93,13 +90,11 @@ 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 = ""
   ) =>
@@ -110,17 +105,13 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${publicRoot}/frontend_latest/${entry}.js`
+          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`,
         }
       );
@@ -177,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(
@@ -258,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(
@@ -266,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

@@ -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({

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

@@ -4,7 +4,6 @@ import fs from "fs-extra";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
-import env from "../env.cjs";
 
 const npmPath = (...parts) =>
   path.resolve(paths.polymer_dir, "node_modules", ...parts);
@@ -69,9 +68,6 @@ function copyPolyfills(staticDir) {
 }
 
 function copyLoaderJS(staticDir) {
-  if (!env.useRollup()) {
-    return;
-  }
   const staticPath = genStaticPath(staticDir);
   copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
   copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
@@ -129,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);
@@ -203,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/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
@@ -41,12 +42,13 @@ const runDevServer = async ({
   contentBase,
   port,
   listenHost = undefined,
+  proxy = undefined,
 }) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
     listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
   }
-  const server = new WebpackDevServer(
+  const server = new RspackDevServer(
     {
       hot: false,
       open: true,
@@ -56,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) => {
@@ -87,16 +90,16 @@ 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 })
@@ -107,7 +110,7 @@ gulp.task("webpack-watch-app", () => {
   );
 });
 
-gulp.task("webpack-prod-app", () =>
+gulp.task("rspack-prod-app", () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
@@ -117,9 +120,9 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () =>
+gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createDemoConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.demo_output_root,
@@ -127,17 +130,18 @@ gulp.task("webpack-dev-server-demo", () =>
   })
 );
 
-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(
+    compiler: rspack(
       createCastConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.cast_output_root,
@@ -147,7 +151,7 @@ gulp.task("webpack-dev-server-cast", () =>
   })
 );
 
-gulp.task("webpack-prod-cast", () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
@@ -155,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,
@@ -170,7 +174,7 @@ gulp.task("webpack-watch-hassio", () => {
   );
 });
 
-gulp.task("webpack-prod-hassio", () =>
+gulp.task("rspack-prod-hassio", () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
@@ -180,9 +184,9 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () =>
+gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createGalleryConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.gallery_output_root,
@@ -191,7 +195,7 @@ gulp.task("webpack-dev-server-gallery", () =>
   })
 );
 
-gulp.task("webpack-prod-gallery", () =>
+gulp.task("rspack-prod-gallery", () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
@@ -199,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/translations.js

@@ -172,12 +172,14 @@ const createMasterTranslation = () =>
 
 const FRAGMENTS = ["base"];
 
-const toggleSupervisorFragment = async () => {
-  FRAGMENTS[0] = "supervisor";
+const setFragment = (fragment) => async () => {
+  FRAGMENTS[0] = fragment;
 };
 
 const panelFragment = (fragment) =>
-  fragment !== "base" && fragment !== "supervisor";
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";
 
 const HASHES = new Map();
 
@@ -224,6 +226,9 @@ const createTranslations = async () => {
             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 [
@@ -322,5 +327,10 @@ gulp.task(
 
 gulp.task(
   "build-supervisor-translations",
-  gulp.series(toggleSupervisorFragment, "build-translations")
+  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/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,16 +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 {
-  TransformAsyncModulesPlugin,
-} = require("transform-async-modules-webpack-plugin");
-const { dependencies } = require("../package.json");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -28,7 +25,7 @@ class LogStartCompilePlugin {
   }
 }
 
-const createWebpackConfig = ({
+const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -102,13 +99,18 @@ const createWebpackConfig = ({
       splitChunks: {
         // Disable splitting for web workers and worklets because imports of
         // external chunks are broken for:
-        // - ESM output: https://github.com/webpack/webpack/issues/17014
-        // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
-        chunks: (chunk) =>
-          !chunk.canBeInitial() &&
-          !new RegExp(`^.+-work${latestBuild ? "(?:let|er)" : "let"}$`).test(
-            chunk.name
-          ),
+        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: [
@@ -117,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.
@@ -152,7 +154,7 @@ const createWebpackConfig = ({
           );
         },
       }),
-      new webpack.NormalModuleReplacementPlugin(
+      new rspack.NormalModuleReplacementPlugin(
         new RegExp(
           bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
         ),
@@ -168,10 +170,14 @@ const createWebpackConfig = ({
           stats: { assets: true, chunks: true, modules: true },
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
-      !latestBuild &&
-        new TransformAsyncModulesPlugin({
-          browserslistEnv: "legacy",
-          runtime: { version: dependencies["@babel/runtime"] },
+      isProdBuild &&
+        isStatsBuild &&
+        new RsdoctorRspackPlugin({
+          reportDir: path.join(paths.build_dir, "rsdoctor"),
+          features: ["plugins", "bundle"],
+          supports: {
+            generateTileGraph: true,
+          },
         }),
     ].filter(Boolean),
     resolve: {
@@ -188,6 +194,7 @@ const createWebpackConfig = ({
         "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",
@@ -209,8 +216,6 @@ const createWebpackConfig = ({
         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
@@ -252,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,
@@ -270,7 +275,7 @@ const createHassioConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.hassio({
       isProdBuild,
       latestBuild,
@@ -280,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,
@@ -288,5 +296,6 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createWebpackConfig,
+  createRspackConfig,
+  createLandingPageConfig,
 };

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/receiver/layout/hc-lovelace.ts

@@ -25,9 +25,9 @@ class HcLovelace extends LitElement {
   @property({ attribute: false })
   public lovelaceConfig!: LovelaceConfig;
 
-  @property() public viewPath?: string | number | null;
+  @property({ attribute: false }) public viewPath?: string | number | null;
 
-  @property() public urlPath: string | null = null;
+  @property({ attribute: false }) public urlPath: string | null = null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;

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

@@ -144,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);
       }
     }
   }
@@ -164,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);
       }
     }
   }
@@ -394,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/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/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/custom-cards/cast-demo-row.ts

@@ -46,7 +46,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
           this.requestUpdate();
         });
         mgr.castContext.addEventListener(
-          // eslint-disable-next-line no-undef
           cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
           (ev) => {
             // On Android, opening a new session always results in SESSION_RESUMED.

demo/src/custom-cards/ha-demo-card.ts

@@ -26,7 +26,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @state() private _switching = false;
 
-  private _hidden = localStorage.hide_demo_card;
+  private _hidden = window.localStorage.getItem("hide_demo_card");
 
   public getCardSize() {
     return this._hidden ? 0 : 2;

demo/webpack.config.js

@@ -1,11 +0,0 @@
-import webpack from "../build-scripts/webpack.cjs";
-import env from "../build-scripts/env.cjs";
-
-// File just used for stats builds
-const latestBuild = true;
-
-export default webpack.createDemoConfig({
-  isProdBuild: env.isProdBuild(),
-  isStatsBuild: env.isStatsBuild(),
-  latestBuild,
-});

eslint.config.mjs

@@ -0,0 +1,179 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
+const compat = new FlatCompat({
+  baseDirectory: _dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends(
+    "airbnb-base",
+    "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:wc/recommended",
+    "plugin:lit/all",
+    "plugin:lit-a11y/recommended",
+    "prettier"
+  ),
+  {
+    plugins: {
+      "unused-imports": unusedImports,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __DEV__: false,
+        __DEMO__: false,
+        __BUILD__: false,
+        __VERSION__: false,
+        __STATIC_PATH__: false,
+        __SUPERVISOR__: false,
+        Polymer: true,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          modules: true,
+        },
+
+        project: "./tsconfig.json",
+      },
+    },
+
+    settings: {
+      "import/resolver": {
+        webpack: {
+          config: "./rspack.config.cjs",
+        },
+      },
+    },
+
+    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": [
+        "error",
+        {
+          selector: ["objectLiteralProperty", "objectLiteralMethod"],
+          format: null,
+        },
+        {
+          selector: ["variable"],
+          format: ["camelCase", "snake_case", "UPPER_CASE"],
+          leadingUnderscore: "allow",
+          trailingUnderscore: "allow",
+        },
+        {
+          selector: ["variable"],
+          modifiers: ["exported"],
+          format: ["camelCase", "PascalCase", "UPPER_CASE"],
+        },
+        {
+          selector: "typeLike",
+          format: ["PascalCase"],
+        },
+        {
+          selector: "method",
+          modifiers: ["public"],
+          format: ["camelCase"],
+          leadingUnderscore: "forbid",
+        },
+        {
+          selector: "method",
+          modifiers: ["private"],
+          format: ["camelCase"],
+          leadingUnderscore: "require",
+        },
+      ],
+
+      "@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-names": "error",
+      "lit/attribute-value-entities": "off",
+      "lit/no-template-map": "off",
+      "lit/no-native-attributes": "error",
+      "lit/no-this-assign-in-render": "error",
+      "lit-a11y/click-events-have-key-events": ["off"],
+      "lit-a11y/no-autofocus": "off",
+      "lit-a11y/alt-text": "error",
+      "lit-a11y/anchor-is-valid": "error",
+      "lit-a11y/role-has-required-aria-attrs": "error",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-import-type-side-effects": "error",
+    },
+  },
+];

gallery/.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-console": 0
-  }
-}

gallery/eslint.config.mjs

@@ -0,0 +1,10 @@
+import rootConfig from "../eslint.config.mjs";
+
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+    },
+  },
+];

gallery/rollup.config.js

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

gallery/src/components/demo-black-white-row.ts

@@ -9,6 +9,7 @@ import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
+  // eslint-disable-next-line lit/no-native-attributes
   @property() title!: string;
 
   @property() value?: any;

gallery/src/components/demo-card.ts

@@ -18,7 +18,8 @@ class DemoCard extends LitElement {
 
   @property({ attribute: false }) public config!: DemoCardConfig;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;
 
   @state() private _size?: number;
 

gallery/src/components/demo-cards.ts

@@ -44,11 +44,11 @@ class DemoCards extends LitElement {
     `;
   }
 
-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
 
-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
     applyThemesOnElement(this._container, { themes: {} } as any, "default", {
       dark: ev.target.checked,
     });

gallery/src/components/demo-more-info.ts

@@ -10,9 +10,10 @@ import type { HomeAssistant } from "../../../src/types";
 class DemoMoreInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public entityId!: string;
+  @property({ attribute: false }) public entityId!: string;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;
 
   render() {
     const state = this._getState(this.entityId, this.hass.states);
@@ -23,7 +24,7 @@ class DemoMoreInfo extends LitElement {
             <state-card-content
               .stateObj=${state}
               .hass=${this.hass}
-              inDialog
+              in-dialog
             ></state-card-content>
 
             <more-info-content

gallery/src/components/demo-more-infos.ts

@@ -58,11 +58,11 @@ class DemoMoreInfos extends LitElement {
     }
   `;
 
-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
 
-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
     applyThemesOnElement(
       this.shadowRoot!.querySelector("#container"),
       {

gallery/src/ha-gallery.ts

@@ -182,7 +182,7 @@ class HaGallery extends LitElement {
     }
   }
 
-  _menuTapped() {
+  private _menuTapped() {
     this._drawer.open = !this._drawer.open;
   }
 

gallery/src/pages/automation/editor-action.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -15,7 +14,6 @@ import { HaDelayAction } from "../../../../src/panels/config/automation/action/t
 import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
-import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-activate_scene";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
 import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
@@ -33,7 +31,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Service", actions: [HaServiceAction.defaultConfig] },
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
   { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
@@ -66,11 +63,6 @@ class DemoHaAutomationEditorAction extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
     return html`
       <div class="options">
         <ha-formfield label="Disabled">
@@ -95,7 +87,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                   .actions=${this.data[sampleIdx]}
                   .sampleIdx=${sampleIdx}
                   .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                 ></ha-automation-action>
               `
             )}
@@ -105,6 +97,12 @@ class DemoHaAutomationEditorAction extends LitElement {
     `;
   }
 
+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

gallery/src/pages/automation/editor-condition.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -104,11 +103,6 @@ export class DemoAutomationEditorCondition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
     return html`
       <div class="options">
         <ha-formfield label="Disabled">
@@ -133,7 +127,7 @@ export class DemoAutomationEditorCondition extends LitElement {
                   .conditions=${this.data[sampleIdx]}
                   .sampleIdx=${sampleIdx}
                   .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                 ></ha-automation-condition>
               `
             )}
@@ -143,6 +137,12 @@ export class DemoAutomationEditorCondition extends LitElement {
     `;
   }
 
+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

gallery/src/pages/automation/editor-trigger.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -150,11 +149,6 @@ export class DemoAutomationEditorTrigger extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
     return html`
       <div class="options">
         <ha-formfield label="Disabled">
@@ -179,7 +173,7 @@ export class DemoAutomationEditorTrigger extends LitElement {
                   .triggers=${this.data[sampleIdx]}
                   .sampleIdx=${sampleIdx}
                   .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                 ></ha-automation-trigger>
               `
             )}
@@ -189,6 +183,12 @@ export class DemoAutomationEditorTrigger extends LitElement {
     `;
   }
 
+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

gallery/src/pages/automation/trace.ts

@@ -31,22 +31,17 @@ export class DemoAutomationTrace extends LitElement {
               <hat-script-graph
                 .trace=${trace.trace}
                 .selected=${this._selected[idx]}
-                @graph-node-selected=${(ev) => {
-                  this._selected = { ...this._selected, [idx]: ev.detail.path };
-                }}
+                @graph-node-selected=${this._handleGraphNodeSelected}
+                .sampleIdx=${idx}
               ></hat-script-graph>
               <hat-trace-timeline
-                allowPick
+                allow-pick
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}
                 .selectedPath=${this._selected[idx]}
-                @value-changed=${(ev) => {
-                  this._selected = {
-                    ...this._selected,
-                    [idx]: ev.detail.value,
-                  };
-                }}
+                @value-changed=${this._handleTimelineValueChanged}
+                .sampleIdx=${idx}
               ></hat-trace-timeline>
               <button @click=${() => console.log(trace)}>Log trace</button>
             </div>
@@ -63,6 +58,16 @@ export class DemoAutomationTrace extends LitElement {
     hass.updateTranslations("config", "en");
   }
 
+  private _handleTimelineValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.value };
+  }
+
+  private _handleGraphNodeSelected(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
+  }
+
   static get styles() {
     return css`
       ha-card {

gallery/src/pages/components/ha-form.ts

@@ -489,14 +489,8 @@ class DemoHaForm extends LitElement {
             .title=${info.title}
             .value=${this.data[idx]}
             .disabled=${this.disabled[idx]}
-            @submitted=${() => {
-              this.disabled[idx] = true;
-              this.requestUpdate();
-              setTimeout(() => {
-                this.disabled[idx] = false;
-                this.requestUpdate();
-              }, 2000);
-            }}
+            @submitted=${this._handleSubmit}
+            .sampleIdx=${idx}
           >
             ${["light", "dark"].map(
               (slot) => html`
@@ -510,10 +504,9 @@ class DemoHaForm extends LitElement {
                   .computeError=${(error) => translations[error] || error}
                   .computeLabel=${(schema) =>
                     translations[schema.name] || schema.name}
-                  @value-changed=${(e) => {
-                    this.data[idx] = e.detail.value;
-                    this.requestUpdate();
-                  }}
+                  .computeHelper=${() => "Helper text"}
+                  @value-changed=${this._handleValueChanged}
+                  .sampleIdx=${idx}
                 ></ha-form>
               `
             )}
@@ -522,6 +515,22 @@ class DemoHaForm extends LitElement {
       })}
     `;
   }
+
+  private _handleValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
+  private _handleSubmit(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.disabled[sampleIdx] = true;
+    this.requestUpdate();
+    setTimeout(() => {
+      this.disabled[sampleIdx] = false;
+      this.requestUpdate();
+    }, 2000);
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-selector.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -591,13 +590,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
       </div>
       ${SCHEMAS.map((info, idx) => {
         const data = this.data[idx];
-        const valueChanged = (ev) => {
-          this.data[idx] = {
-            ...data,
-            [ev.target.key]: ev.detail.value,
-          };
-          this.requestUpdate();
-        };
         return html`
           <demo-black-white-row .title=${info.name}>
             ${["light", "dark"].map((slot) =>
@@ -614,7 +606,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                       .value=${data[key] ?? value!.default}
                       .disabled=${this._disabled}
                       .required=${this._required}
-                      @value-changed=${valueChanged}
+                      @value-changed=${this._handleValueChanged}
+                      .sampleIdx=${idx}
                       .helper=${this._helper ? "Helper text" : undefined}
                     ></ha-selector>
                   </ha-settings-row>
@@ -627,6 +620,15 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     `;
   }
 
+  private _handleValueChanged(ev) {
+    const idx = ev.target.sampleIdx;
+    this.data[idx] = {
+      ...this.data[idx],
+      [ev.target.key]: ev.detail.value,
+    };
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

gallery/src/pages/lovelace/thermostat-card.ts

@@ -86,9 +86,11 @@ const ENTITIES = [
     friendly_name: "Sensibo purifier",
     fan_modes: ["low", "high"],
     fan_mode: "low",
-    swing_modes: ["on", "off", "both", "vertical", "horizontal"],
-    swing_mode: "vertical",
-    supported_features: 41,
+    swing_modes: ["both", "rangefull", "off"],
+    swing_mode: "rangefull",
+    swing_horizontal_modes: ["both", "rangefull", "off"],
+    swing_horizontal_mode: "both",
+    supported_features: 553,
   }),
   getEntity("climate", "unavailable", "unavailable", {
     supported_features: 43,
@@ -188,11 +190,13 @@ const CONFIGS = [
     - type: climate-swing-modes
       style: icons
       swing_modes:
-        - 'on'
-        - 'off'
         - 'both'
-        - 'vertical'
-        - 'horizontal'
+        - 'rangefull'
+        - 'off'
+      swing_horizontal_modes:
+        - 'both'
+        - 'rangefull'
+        - 'off'
     `,
   },
   {

gallery/src/pages/lovelace/tile-card.ts

@@ -4,6 +4,7 @@ import { customElement, query } from "lit/decorators";
 import { CoverEntityFeature } from "../../../../src/data/cover";
 import { LightColorMode } from "../../../../src/data/light";
 import { LockEntityFeature } from "../../../../src/data/lock";
+import { MediaPlayerEntityFeature } from "../../../../src/data/media-player";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -28,6 +29,10 @@ const ENTITIES = [
     device_class: "lock",
     supported_features: LockEntityFeature.OPEN,
   }),
+  getEntity("media_player", "living_room", "playing", {
+    friendly_name: "Living room speaker",
+    supported_features: MediaPlayerEntityFeature.VOLUME_SET,
+  }),
   getEntity("climate", "thermostat", "heat", {
     current_temperature: 73,
     min_temp: 45,
@@ -78,16 +83,19 @@ const ENTITIES = [
     fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
     preset_modes: ["home", "eco", "away"],
     swing_modes: ["auto", "1", "2", "3", "off"],
+    switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
     current_temperature: 23,
     target_temp_high: 24,
     target_temp_low: 21,
     fan_mode: "auto_low",
     preset_mode: "home",
     swing_mode: "auto",
+    swing_horizontal_mode: "off",
     supported_features:
       ClimateEntityFeature.TURN_ON +
       ClimateEntityFeature.TURN_OFF +
       ClimateEntityFeature.SWING_MODE +
+      ClimateEntityFeature.SWING_HORIZONTAL_MODE +
       ClimateEntityFeature.PRESET_MODE +
       ClimateEntityFeature.FAN_MODE +
       ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
@@ -194,6 +202,15 @@ const CONFIGS = [
     - type: "lock-open-door"
     `,
   },
+  {
+    heading: "Media player volume slider feature",
+    config: `
+- type: tile
+  entity: media_player.living_room
+  features:
+    - type: "media-player-volume-slider"
+    `,
+  },
   {
     heading: "Vacuum commands feature",
     config: `

gallery/webpack.config.js

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

hassio/rollup.config.js

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

hassio/src/addon-store/hassio-addon-store.ts

@@ -136,7 +136,7 @@ export class HassioAddonStore extends LitElement {
       this._manageRepositories(repositoryUrl);
     }
 
-    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     this._loadData();
   }
 
@@ -179,7 +179,7 @@ export class HassioAddonStore extends LitElement {
     }
   }
 
-  private apiCalled(ev) {
+  private _apiCalled(ev) {
     if (ev.detail.success) {
       this._loadData();
     }

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -315,6 +315,7 @@ class HassioAddonConfig extends LitElement {
       text: this.supervisor.localize("confirm.reset_options.text"),
       confirmText: this.supervisor.localize("common.reset_options"),
       dismissText: this.supervisor.localize("common.cancel"),
+      destructive: true,
     });
 
     if (!confirmed) {

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -47,7 +47,6 @@ class HassioAddonLogDashboard extends LitElement {
           .localizeFunc=${this.supervisor.localize}
           .header=${this.addon.name}
           .provider=${this.addon.slug}
-          show
           .filter=${this._filter}
         >
         </error-log-card>

hassio/src/backups/hassio-backups.ts

@@ -58,7 +58,7 @@ export class HassioBackups extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @state() private _selectedBackups: string[] = [];
 
@@ -74,7 +74,7 @@ export class HassioBackups extends LitElement {
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass && this._firstUpdatedCalled) {
-      this.fetchBackups();
+      this._fetchBackups();
     }
   }
 
@@ -107,7 +107,7 @@ export class HassioBackups extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     if (this.hass && this.isConnected) {
-      this.fetchBackups();
+      this._fetchBackups();
     }
     this._firstUpdatedCalled = true;
   }
@@ -198,7 +198,7 @@ export class HassioBackups extends LitElement {
         @selection-changed=${this._handleSelectionChanged}
         clickable
         selectable
-        hasFab
+        has-fab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
         back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
           ? "/config/system"
@@ -280,7 +280,7 @@ export class HassioBackups extends LitElement {
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this.fetchBackups();
+        this._fetchBackups();
         break;
       case 1:
         showHassioBackupLocationDialog(this, { supervisor: this.supervisor });
@@ -303,13 +303,13 @@ export class HassioBackups extends LitElement {
         showHassioBackupDialog(this, {
           slug,
           supervisor: this.supervisor,
-          onDelete: () => this.fetchBackups(),
+          onDelete: () => this._fetchBackups(),
         }),
-      reloadBackup: () => this.fetchBackups(),
+      reloadBackup: () => this._fetchBackups(),
     });
   }
 
-  private async fetchBackups() {
+  private async _fetchBackups() {
     this._isLoading = true;
     await reloadHassioBackups(this.hass);
     this._backups = await fetchHassioBackups(this.hass);
@@ -323,6 +323,7 @@ export class HassioBackups extends LitElement {
         number: this._selectedBackups.length,
       }),
       confirmText: this.supervisor.localize("backup.delete_backup_confirm"),
+      destructive: true,
     });
 
     if (!confirm) {
@@ -340,7 +341,7 @@ export class HassioBackups extends LitElement {
       });
       return;
     }
-    await this.fetchBackups();
+    await this._fetchBackups();
     this._dataTable.clearSelection();
   }
 
@@ -349,7 +350,7 @@ export class HassioBackups extends LitElement {
     showHassioBackupDialog(this, {
       slug,
       supervisor: this.supervisor,
-      onDelete: () => this.fetchBackups(),
+      onDelete: () => this._fetchBackups(),
     });
   }
 
@@ -365,7 +366,7 @@ export class HassioBackups extends LitElement {
     }
     showHassioCreateBackupDialog(this, {
       supervisor: this.supervisor!,
-      onCreate: () => this.fetchBackups(),
+      onCreate: () => this._fetchBackups(),
     });
   }
 

hassio/src/components/hassio-card-content.ts

@@ -9,23 +9,24 @@ import type { HomeAssistant } from "../../../src/types";
 class HassioCardContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  // eslint-disable-next-line lit/no-native-attributes
   @property() public title!: string;
 
   @property() public description?: string;
 
   @property({ type: Boolean }) public available = true;
 
-  @property({ type: Boolean }) public showTopbar = false;
+  @property({ attribute: false }) public showTopbar = false;
 
-  @property() public topbarClass?: string;
+  @property({ attribute: false }) public topbarClass?: string;
 
-  @property() public iconTitle?: string;
+  @property({ attribute: false }) public iconTitle?: string;
 
-  @property() public iconClass?: string;
+  @property({ attribute: false }) public iconClass?: string;
 
   @property() public icon = mdiHelpCircle;
 
-  @property() public iconImage?: string;
+  @property({ attribute: false }) public iconImage?: string;
 
   protected render(): TemplateResult {
     return html`
@@ -35,7 +36,11 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src=${this.iconImage} .title=${this.iconTitle} />
+              <img
+                src=${this.iconImage}
+                .title=${this.iconTitle}
+                alt=${this.iconTitle ?? ""}
+              />
               <div></div>
             </div>
           `

hassio/src/components/supervisor-backup-content.ts

@@ -73,23 +73,24 @@ export class SupervisorBackupContent extends LitElement {
 
   @property({ attribute: false }) public backup?: HassioBackupDetail;
 
-  @property() public backupType: HassioBackupDetail["type"] = "full";
+  @property({ attribute: false })
+  public backupType: HassioBackupDetail["type"] = "full";
 
   @property({ attribute: false }) public folders?: CheckboxItem[];
 
   @property({ attribute: false }) public addons?: AddonCheckboxItem[];
 
-  @property({ type: Boolean }) public homeAssistant = false;
+  @property({ attribute: false }) public homeAssistant = false;
 
-  @property({ type: Boolean }) public backupHasPassword = false;
+  @property({ attribute: false }) public backupHasPassword = false;
 
   @property({ type: Boolean }) public onboarding = false;
 
-  @property() public backupName = "";
+  @property({ attribute: false }) public backupName = "";
 
-  @property() public backupPassword = "";
+  @property({ attribute: false }) public backupPassword = "";
 
-  @property() public confirmBackupPassword = "";
+  @property({ attribute: false }) public confirmBackupPassword = "";
 
   @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
 
@@ -191,7 +192,7 @@ export class SupervisorBackupContent extends LitElement {
                 >
                   <ha-checkbox
                     .checked=${this.homeAssistant}
-                    @change=${this.toggleHomeAssistant}
+                    @change=${this._toggleHomeAssistant}
                   >
                   </ha-checkbox>
                 </ha-formfield>`
@@ -277,7 +278,7 @@ export class SupervisorBackupContent extends LitElement {
     `;
   }
 
-  private toggleHomeAssistant() {
+  private _toggleHomeAssistant() {
     this.homeAssistant = !this.homeAssistant;
   }
 

hassio/src/components/supervisor-formfield-label.ts

@@ -7,9 +7,9 @@ import "../../../src/components/ha-svg-icon";
 class SupervisorFormfieldLabel extends LitElement {
   @property({ type: String }) public label!: string;
 
-  @property({ type: String }) public imageUrl?: string;
+  @property({ attribute: false }) public imageUrl?: string;
 
-  @property({ type: String }) public iconPath?: string;
+  @property({ attribute: false }) public iconPath?: string;
 
   @property({ type: String }) public version?: string;
 

hassio/src/dashboard/hassio-dashboard.ts

@@ -76,7 +76,7 @@ class HassioDashboard extends LitElement {
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
         back-path="/config"
         supervisor
-        hasFab
+        has-fab
       >
         <span slot="header">
           ${this.supervisor.localize(

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -302,6 +302,7 @@ class HassioBackupDialog
         text: supervisor!.localize("backup.confirm_delete_text"),
         confirmText: supervisor!.localize("backup.delete"),
         dismissText: supervisor!.localize("backup.cancel"),
+        destructive: true,
       }))
     ) {
       return;

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -95,7 +95,7 @@ class HassioDatadiskDialog extends LitElement {
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
-                      @selected=${this._select_device}
+                      @selected=${this._selectDevice}
                       dialogInitialFocus
                     >
                       ${this.devices.map(
@@ -137,7 +137,7 @@ class HassioDatadiskDialog extends LitElement {
     `;
   }
 
-  private _select_device(ev) {
+  private _selectDevice(ev) {
     this.selectedDevice = ev.target.value;
   }
 

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -12,6 +12,7 @@ import type { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
 class HassioMarkdownDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  // eslint-disable-next-line lit/no-native-attributes
   @property() public title!: string;
 
   @property() public content!: string;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -394,7 +394,7 @@ export class DialogHassioNetwork
     `;
   }
 
-  _toArray(data: string | string[]): string[] {
+  private _toArray(data: string | string[]): string[] {
     if (Array.isArray(data)) {
       if (data && typeof data[0] === "string") {
         data = data[0];
@@ -409,7 +409,7 @@ export class DialogHassioNetwork
     return data;
   }
 
-  _toString(data: string | string[]): string {
+  private _toString(data: string | string[]): string {
     if (!data) {
       return "";
     }

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -34,7 +34,7 @@ class HassioIngressView extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ type: Boolean }) public ingressPanel = false;
+  @property({ attribute: false }) public ingressPanel = false;
 
   @property({ type: Boolean }) public narrow = false;
 

hassio/src/update-available/update-available-card.ts

@@ -58,10 +58,10 @@ const SUPERVISOR_UPDATE_NAMES = {
   supervisor: "Home Assistant Supervisor",
 };
 
-type updateType = "os" | "supervisor" | "core" | "addon";
+type UpdateType = "os" | "supervisor" | "core" | "addon";
 
 const changelogUrl = (
-  entry: updateType,
+  entry: UpdateType,
   version: string
 ): string | undefined => {
   if (entry === "addon") {
@@ -99,7 +99,7 @@ class UpdateAvailableCard extends LitElement {
 
   @property({ attribute: false }) public addonSlug?: string;
 
-  @state() private _updateType?: updateType;
+  @state() private _updateType?: UpdateType;
 
   @state() private _changelogContent?: string;
 
@@ -222,7 +222,7 @@ class UpdateAvailableCard extends LitElement {
     const updateType = ["core", "os", "supervisor"].includes(pathPart)
       ? pathPart
       : "addon";
-    this._updateType = updateType as updateType;
+    this._updateType = updateType as UpdateType;
 
     switch (updateType) {
       case "addon":

hassio/webpack.config.js

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

landing-page/README.md

@@ -0,0 +1,44 @@
+# Home Assistant OS Landingpage
+
+On initial startup of Home Assistant, HAOS needs to download Home Assistant core before the setup can start.
+In this time the [home-assistant/landingpage](https://github.com/home-assistant/landingpage) is serving a "Preparing Home Assistant" page.
+
+## Functionality
+
+- Progress bar to show download
+- Show / hide supervisor logs
+- Links
+  - Read our Vision
+  - Join our community
+  - Download our app
+- DNS issue handler
+  - if the supervisor is not able to connect to the internet
+  - Show actions to set dns to google or cloudflare to resolve the issue
+- Error handler
+  - if something with the installation goes wrong, we show the logs
+
+## Develop
+
+It is similar to the core frontend dev.
+
+- frontend repo is building stuff
+- landingpage repo can set the frontend repo path and serve the dev frontend
+
+### landingpage dev server
+
+- clone [home-assistant/landingpage](https://github.com/home-assistant/landingpage)
+- Add frontend repo as mount to your devcontainer config
+  - please do not commit this changes, you can remove it after initial dev container build, because the build will keep the options as long as you don't rebuild it.
+  - `"mounts": ["source=/path/to/hass/frontend,target=/workspaces/frontend,type=bind,consistency=cached"]`
+- use the dev container
+- start the dev server with following optional env vars:
+  - `SUPERVISOR_HOST` to have real supervisor data, you can [setup a supervisor remote API access](https://developers.home-assistant.io/docs/supervisor/development/#supervisor-api-access) and set the host of your supervisor. e.g.: `SUPERVISOR_HOST=192.168.0.20:8888`
+  - `SUPERVISOR_TOKEN` the supervisor api token you get from the Remote API proxy Addon Logs
+  - `FRONTEND_PATH` the path inside your container should be `/workspaces/frontend`
+  - example: `SUPERVISOR_TOKEN=abc123 SUPERVISOR_HOST=192.168.0.20:8888 FRONTEND_PATH=/workspaces/frontend go run main.go http.go mdns.go`
+  - You can also add this into your devcontainer settings, but then it's not so flexible to change if you want to test something else.
+
+### frontend dev server
+
+- install all dependencies
+- run `landing-page/script/develop`

landing-page/eslintrc.config.mjs

@@ -0,0 +1,8 @@
+import rootConfig from "../eslint.config.mjs";
+
+export default [
+  ...rootConfig,
+  {
+    rules: {},
+  },
+];

landing-page/public/static/icons/logo_ohf.svg

@@ -0,0 +1,3 @@
+<svg width="92" height="136" viewBox="0 0 92 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76.38 104.9H3.03C2.24231 104.9 1.48688 105.213 0.929897 105.77C0.372914 106.327 0.0600052 107.082 0.0600052 107.87V132.47C0.0600052 133.258 0.372914 134.013 0.929897 134.57C1.48688 135.127 2.24231 135.44 3.03 135.44H12.36C13.1477 135.44 13.9031 135.127 14.4601 134.57C15.0171 134.013 15.33 133.258 15.33 132.47V120.17H76.39V132.47C76.39 133.258 76.7029 134.013 77.2599 134.57C77.8169 135.127 78.5723 135.44 79.36 135.44H88.69C89.4777 135.44 90.2331 135.127 90.7901 134.57C91.3471 134.013 91.66 133.258 91.66 132.47V107.87C91.66 107.082 91.3471 106.327 90.7901 105.77C90.2331 105.213 89.4777 104.9 88.69 104.9H76.39H76.38ZM50.04 2.24996C47.73 -0.0600439 43.95 -0.0600439 41.65 2.24996L4.25 39.65C1.94 41.96 0.0500031 46.52 0.0500031 49.78V83.7C0.0500031 86.96 2.72 89.64 5.99 89.64H85.7C88.96 89.64 91.64 86.97 91.64 83.7V49.78C91.64 46.52 89.75 41.96 87.44 39.65L50.04 2.24996Z" fill="#18BCF2"/>
+</svg>

landing-page/public/static/images/logo_mastodon.svg

@@ -0,0 +1,10 @@
+<svg width="75" height="79" viewBox="0 0 75 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z" fill="url(#paint0_linear_549_34)"/>
+<path d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_549_34" x1="37.0692" y1="0" x2="37.0692" y2="79" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6364FF"/>
+<stop offset="1" stop-color="#563ACC"/>
+</linearGradient>
+</defs>
+</svg>

landing-page/public/static/images/logo_x.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

landing-page/script/build_landing_page

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Run the landing-page
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/../.."
+
+./node_modules/.bin/gulp build-landing-page

landing-page/script/develop

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Run the landing-page
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/../.."
+
+./node_modules/.bin/gulp develop-landing-page

landing-page/src/components/landing-page-logs.ts

@@ -0,0 +1,334 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
+// eslint-disable-next-line import/extensions
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import { LitElement, type PropertyValues, css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map";
+import { customElement, property, query, state } from "lit/decorators";
+import type {
+  LandingPageKeys,
+  LocalizeFunc,
+} from "../../../src/common/translations/localize";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-ansi-to-html";
+import "../../../src/components/ha-alert";
+import type { HaAnsiToHtml } from "../../../src/components/ha-ansi-to-html";
+import {
+  getObserverLogs,
+  downloadUrl as observerLogsDownloadUrl,
+} from "../data/observer";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { fileDownload } from "../../../src/util/file_download";
+import { getSupervisorLogs, getSupervisorLogsFollow } from "../data/supervisor";
+
+const ERROR_CHECK = /^[\d\s-:]+(ERROR|CRITICAL)(.*)/gm;
+declare global {
+  interface HASSDomEvents {
+    "landing-page-error": undefined;
+  }
+}
+
+const SCHEDULE_FETCH_OBSERVER_LOGS = 5;
+
+@customElement("landing-page-logs")
+class LandingPageLogs extends LitElement {
+  @property({ attribute: false })
+  public localize!: LocalizeFunc<LandingPageKeys>;
+
+  @query("ha-ansi-to-html") private _ansiToHtmlElement?: HaAnsiToHtml;
+
+  @query(".logs") private _logElement?: HTMLElement;
+
+  @query("#scroll-bottom-marker")
+  private _scrollBottomMarkerElement?: HTMLElement;
+
+  @state() private _show = false;
+
+  @state() private _scrolledToBottomController =
+    new IntersectionController<boolean>(this, {
+      callback(this: IntersectionController<boolean>, entries) {
+        return entries[0].isIntersecting;
+      },
+    });
+
+  @state() private _error = false;
+
+  @state() private _newLogsIndicator?: boolean;
+
+  @state() private _logLinesCount = 0;
+
+  protected render() {
+    return html`
+      <div class="actions">
+        <ha-button @click=${this._toggleLogDetails}>
+          ${this.localize(this._show ? "hide_details" : "show_details")}
+        </ha-button>
+        ${this._show
+          ? html`<ha-icon-button
+              .label=${this.localize("logs.download_logs")}
+              .path=${mdiDownload}
+              @click=${this._downloadLogs}
+            ></ha-icon-button>`
+          : nothing}
+      </div>
+      ${this._error
+        ? html`
+            <ha-alert
+              alert-type="error"
+              .title=${this.localize("logs.fetch_error")}
+            >
+              <ha-button @click=${this._startLogStream}>
+                ${this.localize("logs.retry")}
+              </ha-button>
+            </ha-alert>
+          `
+        : nothing}
+      <div
+        class=${classMap({
+          logs: true,
+          hidden: !this._show,
+        })}
+      >
+        <ha-ansi-to-html></ha-ansi-to-html>
+        <div id="scroll-bottom-marker"></div>
+      </div>
+      <ha-button
+        class="new-logs-indicator ${classMap({
+          visible:
+            (this._show &&
+              this._newLogsIndicator &&
+              !this._scrolledToBottomController.value) ||
+            false,
+        })}"
+        @click=${this._scrollToBottom}
+      >
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
+        ${this.localize("logs.scroll_down_button")}
+        <ha-svg-icon
+          .path=${mdiArrowCollapseDown}
+          slot="trailingIcon"
+        ></ha-svg-icon>
+      </ha-button>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+
+    this._scrolledToBottomController.observe(this._scrollBottomMarkerElement!);
+
+    this._startLogStream();
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+
+    if (this._newLogsIndicator && this._scrolledToBottomController.value) {
+      this._newLogsIndicator = false;
+    }
+
+    if (changedProps.has("_show") && this._show) {
+      this._scrollToBottom();
+    }
+  }
+
+  private _toggleLogDetails() {
+    this._show = !this._show;
+  }
+
+  private _scrollToBottom(): void {
+    if (this._logElement) {
+      this._newLogsIndicator = false;
+      this._logElement!.scrollTo(0, this._logElement!.scrollHeight);
+    }
+  }
+
+  private _displayLogs(logs: string, tempLogLine = "", clear = false): string {
+    if (clear) {
+      this._ansiToHtmlElement?.clear();
+      this._logLinesCount = 0;
+    }
+
+    const showError = ERROR_CHECK.test(logs);
+
+    const scrolledToBottom = this._scrolledToBottomController.value;
+    const lines = `${tempLogLine}${logs}`
+      .split("\n")
+      .filter((line) => line.trim() !== "");
+
+    // handle edge case where the last line is not complete
+    if (logs.endsWith("\n")) {
+      tempLogLine = "";
+    } else {
+      tempLogLine = lines.splice(-1, 1)[0];
+    }
+
+    if (lines.length) {
+      this._ansiToHtmlElement?.parseLinesToColoredPre(lines);
+      this._logLinesCount += lines.length;
+    }
+
+    if (showError) {
+      fireEvent(this, "landing-page-error");
+      this._show = true;
+    }
+
+    if (showError || (scrolledToBottom && this._logElement)) {
+      this._scrollToBottom();
+    } else {
+      this._newLogsIndicator = true;
+    }
+
+    return tempLogLine;
+  }
+
+  private async _startLogStream() {
+    this._error = false;
+    this._newLogsIndicator = false;
+    this._ansiToHtmlElement?.clear();
+
+    try {
+      const response = await getSupervisorLogsFollow();
+
+      if (!response.ok || !response.body) {
+        throw new Error("No stream body found");
+      }
+
+      let tempLogLine = "";
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let done = false;
+
+      while (!done) {
+        // eslint-disable-next-line no-await-in-loop
+        const { value, done: readerDone } = await reader.read();
+        done = readerDone;
+
+        if (value) {
+          const chunk = decoder.decode(value, { stream: !done });
+          tempLogLine = this._displayLogs(chunk, tempLogLine);
+        }
+      }
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+
+      // fallback to observerlogs if there is a problem with supervisor
+      this._loadObserverLogs();
+    }
+  }
+
+  private _scheduleObserverLogs() {
+    setTimeout(async () => {
+      try {
+        // check if supervisor logs are available
+        const superVisorLogsResponse = await getSupervisorLogs(1);
+        if (superVisorLogsResponse.ok) {
+          this._startLogStream();
+          return;
+        }
+      } catch (err) {
+        // ignore and continue with observer logs
+      }
+      this._loadObserverLogs();
+    }, SCHEDULE_FETCH_OBSERVER_LOGS * 1000);
+  }
+
+  private async _loadObserverLogs() {
+    try {
+      const response = await getObserverLogs();
+
+      if (!response.ok) {
+        throw new Error("Error fetching observer logs");
+      }
+
+      const logs = await response.text();
+
+      this._displayLogs(logs, "", true);
+
+      this._scheduleObserverLogs();
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this._error = true;
+    }
+  }
+
+  private _downloadLogs() {
+    const timeString = new Date().toISOString().replace(/:/g, "-");
+
+    fileDownload(observerLogsDownloadUrl, `observer_${timeString}.log`);
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+      }
+
+      ha-alert {
+        width: 100%;
+      }
+
+      .actions {
+        position: relative;
+        width: 100%;
+        text-align: center;
+      }
+
+      .actions ha-icon-button {
+        position: absolute;
+        right: 0;
+        top: -4px;
+        --icon-primary-color: var(--primary-color);
+      }
+
+      .logs {
+        width: 100%;
+        max-height: 300px;
+        overflow: auto;
+        border: 1px solid var(--divider-color);
+        border-radius: 4px;
+        padding: 4px;
+      }
+
+      .logs.hidden {
+        display: none;
+      }
+
+      .new-logs-indicator {
+        --mdc-theme-primary: var(--text-primary-color);
+
+        overflow: hidden;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 0;
+        background-color: var(--primary-color);
+        border-radius: 8px;
+
+        transition: height 0.4s ease-out;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .new-logs-indicator.visible {
+        height: 24px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "landing-page-logs": LandingPageLogs;
+  }
+}

landing-page/src/components/landing-page-network.ts

@@ -0,0 +1,186 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import {
+  type CSSResultGroup,
+  LitElement,
+  type PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type {
+  LandingPageKeys,
+  LocalizeFunc,
+} from "../../../src/common/translations/localize";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-alert";
+import {
+  ALTERNATIVE_DNS_SERVERS,
+  getSupervisorNetworkInfo,
+  setSupervisorNetworkDns,
+} from "../data/supervisor";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+
+const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
+
+@customElement("landing-page-network")
+class LandingPageNetwork extends LitElement {
+  @property({ attribute: false })
+  public localize!: LocalizeFunc<LandingPageKeys>;
+
+  @state() private _networkIssue = false;
+
+  @state() private _getNetworkInfoError = false;
+
+  @state() private _dnsPrimaryInterfaceNameservers?: string;
+
+  @state() private _dnsPrimaryInterface?: string;
+
+  protected render() {
+    if (!this._networkIssue && !this._getNetworkInfoError) {
+      return nothing;
+    }
+
+    if (this._getNetworkInfoError) {
+      return html`
+        <ha-alert alert-type="error">
+          <p>${this.localize("network_issue.error_get_network_info")}</p>
+        </ha-alert>
+      `;
+    }
+
+    return html`
+      <ha-alert
+        alert-type="warning"
+        .title=${this.localize("network_issue.title")}
+      >
+        <p>
+          ${this.localize("network_issue.description", {
+            dns: this._dnsPrimaryInterfaceNameservers || "?",
+          })}
+        </p>
+        <p>${this.localize("network_issue.resolve_different")}</p>
+        ${!this._dnsPrimaryInterfaceNameservers
+          ? html`
+              <p>
+                <b>${this.localize("network_issue.no_primary_interface")} </b>
+              </p>
+            `
+          : nothing}
+        <div class="actions">
+          ${ALTERNATIVE_DNS_SERVERS.map(
+            ({ translationKey }, key) =>
+              html`<ha-button
+                .index=${key}
+                .disabled=${!this._dnsPrimaryInterfaceNameservers}
+                @click=${this._setDns}
+                >${this.localize(translationKey)}</ha-button
+              >`
+          )}
+        </div>
+      </ha-alert>
+    `;
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this._fetchSupervisorInfo();
+  }
+
+  private _scheduleFetchSupervisorInfo() {
+    setTimeout(
+      () => this._fetchSupervisorInfo(),
+      SCHEDULE_FETCH_NETWORK_INFO_SECONDS * 1000
+    );
+  }
+
+  private async _fetchSupervisorInfo() {
+    let data;
+    try {
+      const response = await getSupervisorNetworkInfo();
+      if (!response.ok) {
+        throw new Error("Failed to fetch network info");
+      }
+
+      ({ data } = await response.json());
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this._getNetworkInfoError = true;
+      this._dnsPrimaryInterfaceNameservers = undefined;
+      this._dnsPrimaryInterface = undefined;
+      return;
+    }
+
+    this._getNetworkInfoError = false;
+
+    const primaryInterface = data.interfaces.find(
+      (intf) => intf.primary && intf.enabled
+    );
+    if (primaryInterface) {
+      this._dnsPrimaryInterfaceNameservers = [
+        ...(primaryInterface.ipv4?.nameservers || []),
+        ...(primaryInterface.ipv6?.nameservers || []),
+      ].join(", ");
+
+      this._dnsPrimaryInterface = primaryInterface.interface;
+    } else {
+      this._dnsPrimaryInterfaceNameservers = undefined;
+      this._dnsPrimaryInterface = undefined;
+    }
+
+    if (!data.host_internet) {
+      this._networkIssue = true;
+    } else {
+      this._networkIssue = false;
+    }
+
+    fireEvent(this, "value-changed", {
+      value: this._networkIssue,
+    });
+    this._scheduleFetchSupervisorInfo();
+  }
+
+  private async _setDns(ev) {
+    const index = ev.target?.index;
+    try {
+      const response = await setSupervisorNetworkDns(
+        index,
+        this._dnsPrimaryInterface!
+      );
+      if (!response.ok) {
+        throw new Error("Failed to set DNS");
+      }
+      this._networkIssue = false;
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      showAlertDialog(this, {
+        title: this.localize("network_issue.failed"),
+        warning: true,
+        text: `${this.localize(
+          "network_issue.set_dns_failed"
+        )}${err?.message ? ` ${this.localize("network_issue.error")}: ${err.message}` : ""}`,
+        confirmText: this.localize("network_issue.close"),
+      });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "landing-page-network": LandingPageNetwork;
+  }
+}