Adjust to new element name/API/css vars/events

.browserslistrc

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

.devcontainer/Dockerfile

@@ -1,7 +1,13 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.11
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.10
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \
   DEVCONTAINER=true \
   PATH=$PATH:./node_modules/.bin
+
+# Install nvm
+COPY .nvmrc /tmp/.nvmrc
+RUN \
+  su vscode -c \
+    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

.devcontainer/devcontainer.json

@@ -5,7 +5,7 @@
     "context": ".."
   },
   "appPort": "8124:8123",
-  "postStartCommand": "script/bootstrap",
+  "postCreateCommand": "script/bootstrap",
   "containerEnv": {
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },

.eslintrc.json

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

.github/dependabot.yml

@@ -6,6 +6,3 @@ updates:
       interval: weekly
       time: "06:00"
     open-pull-requests-limit: 10
-    labels:
-      - Dependencies
-      - GitHub Actions

.github/labeler.yml

@@ -1,31 +0,0 @@
-Build:
-  - build-scripts/**
-  - .browserslistrc
-  - gulpfile.js
-
-Cast:
-  - cast/src/**
-  - src/cast/**
-
-Demo:
-  - demo/src/**
-  - src/fake_data/**
-
-Design:
-  - gallery/src/**
-  - src/fake_data/**
-
-Dependencies:
-  - package.json
-  - renovate.json
-  - yarn.lock
-  - .yarn/**
-  - .yarnrc.yml
-  - .nvmrc
-
-GitHub Actions:
-  - .github/workflows/**
-  - .github/*.yml
-
-Supervisor:
-  - hassio/src/**

.github/release-drafter.yml

@@ -1,8 +1,3 @@
-categories:
-  - title: "Dependency updates"
-    collapse-after: 3
-    labels:
-      - "Dependencies"
 template: |
   ## What's Changed
 

.github/workflows/cast_deployment.yaml

@@ -9,6 +9,7 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -21,14 +22,14 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
         with:
           ref: dev
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -57,14 +58,14 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
         with:
           ref: master
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/ci.yaml

@@ -11,6 +11,7 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -24,11 +25,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.3.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -36,14 +37,6 @@ jobs:
         run: yarn dedupe --check
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
-      - name: Setup lint cache
-        uses: actions/cache@v3.3.1
-        with:
-          path: |
-            node_modules/.cache/prettier
-            node_modules/.cache/eslint
-          key: lint-${{ github.sha }}
-          restore-keys: lint-
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
@@ -55,11 +48,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.3.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -73,11 +66,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.3.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -91,11 +84,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.3.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/codeql-analysis.yml

@@ -17,13 +17,13 @@ jobs:
       matrix:
         # Override automatic language detection by changing the below list
         # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ["javascript"]
+        language: ['javascript']
         # Learn more...
         # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
 
     steps:
     - name: Checkout repository
-        uses: actions/checkout@v3.5.3
+      uses: actions/checkout@v3.3.0
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -10,26 +10,27 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   deploy_dev:
     runs-on: ubuntu-latest
     name: Demo Development
-    if: github.event_name != 'push' || github.ref_name != 'master'
+    if: github.event_name != 'push' || github.ref != 'master'
     environment:
       name: Demo Development
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
         with:
           ref: dev
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -52,20 +53,20 @@ jobs:
   deploy_master:
     runs-on: ubuntu-latest
     name: Demo Production
-    if: github.event_name == 'push' && github.ref_name == 'master'
+    if: github.event_name == 'push' && github.ref == 'master'
     environment:
       name: Demo Production
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
         with:
           ref: master
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/design_deployment.yaml

@@ -6,6 +6,7 @@ on:
     - cron: "0 0 * * *"
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -16,12 +17,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/design_preview.yaml

@@ -11,6 +11,7 @@ on:
       - dev
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -21,12 +22,12 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/labeler.yaml

@@ -1,15 +0,0 @@
-name: "Pull Request Labeler"
-
-on: pull_request_target
-
-jobs:
-  triage:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Apply labels
-        uses: actions/labeler@v4.3.0
-        with:
-          sync-labels: true

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4.0.1
+      - uses: dessant/lock-threads@v4.0.0
         with:
           github-token: ${{ github.token }}
           issue-lock-inactive-days: "30"

.github/workflows/nightly.yaml

@@ -6,7 +6,8 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,17 +21,17 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -42,7 +43,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
 
       - name: Bump version
-        run: script/version_bump.cjs nightly
+        run: script/version_bump.js nightly
 
       - name: Build nightly Python wheels
         run: |

.github/workflows/release-drafter.yaml

@@ -5,17 +5,8 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 jobs:
   update_release_draft:
-    permissions:
-      # write permission for contents is required to create a github release
-      contents: write
-      # write permission for pull-requests is required for autolabeler
-      # otherwise, read permission is required at least
-      pull-requests: read
     runs-on: ubuntu-latest
     steps:
       - uses: release-drafter/release-drafter@v5

.github/workflows/release.yaml

@@ -6,7 +6,8 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -23,7 +24,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -33,10 +34,10 @@ jobs:
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -74,9 +75,9 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2023.04.0
+        uses: home-assistant/wheels@2022.10.1
         with:
-          abi: cp311
+          abi: cp310
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/stale.yml

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

.github/workflows/translations.yaml

@@ -7,15 +7,19 @@ on:
     paths:
       - src/translations/en.json
 
+env:
+  NODE_VERSION: 16
+
 jobs:
   upload:
     name: Upload
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.3.0
 
       - name: Upload Translations
         run: |
           export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+
           ./script/translations_upload_base

.nvmrc

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

.prettierignore

@@ -1,3 +1,9 @@
-CLA.md
-CODE_OF_CONDUCT.md
-LICENSE.md
+build
+translations/*
+node_modules/*
+hass_frontend/*
+pip-selfcheck.json
+
+# vscode
+.vscode/*
+!.vscode/extensions.json

.vscode/launch.json

@@ -9,7 +9,9 @@
       "webRoot": "${workspaceFolder}/hass_frontend",
       "disableNetworkCache": true,
       "preLaunchTask": "Develop Frontend",
-      "outFiles": ["${workspaceFolder}/hass_frontend/frontend_latest/*.js"]
+      "outFiles": [
+        "${workspaceFolder}/hass_frontend/frontend_latest/*.js"
+      ]
     },
     {
       "name": "Debug Gallery",
@@ -37,6 +39,6 @@
       "webRoot": "${workspaceFolder}/cast/dist",
       "disableNetworkCache": true,
       "preLaunchTask": "Develop Cast"
-    }
+    },
   ]
 }

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

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

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.2.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

build-scripts/bundle.js

@@ -1,6 +1,6 @@
 const path = require("path");
-const env = require("./env.cjs");
-const paths = require("./paths.cjs");
+const env = require("./env.js");
+const paths = require("./paths.js");
 
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
@@ -8,7 +8,7 @@ module.exports.sourceMapURL = () => {
   const ref = env.version().endsWith("dev")
     ? process.env.GITHUB_SHA || "dev"
     : env.version();
-  return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}/`;
+  return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}`;
 };
 
 // Files from NPM Packages that should not be imported
@@ -62,7 +62,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
-module.exports.htmlMinifierOptions = {
+const htmlMinifierOptions = {
   caseSensitive: true,
   collapseWhitespace: true,
   conservativeCollapse: true,
@@ -70,14 +70,13 @@ module.exports.htmlMinifierOptions = {
   removeComments: true,
   removeRedundantAttributes: true,
   minifyCSS: {
-    compatibility: "*,-properties.zeroUnits",
+    level: 0,
   },
 };
 
 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   safari10: !latestBuild,
-  ecma: latestBuild ? 2015 : 5,
-  module: latestBuild,
+  ecma: latestBuild ? undefined : 5,
   format: { comments: false },
   sourceMap: !isTestBuild,
 });
@@ -85,36 +84,45 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
 module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   babelrc: false,
   compact: false,
-  assumptions: {
-    privateFieldsAsProperties: true,
-    setPublicClassFields: true,
-    setSpreadProperties: true,
-  },
-  browserslistEnv: latestBuild ? "modern" : "legacy",
-  // Must be unambiguous because some dependencies are CommonJS only
-  sourceType: "unambiguous",
   presets: [
-    [
+    !latestBuild && [
       "@babel/preset-env",
       {
-        useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.32", proposals: true },
+        useBuiltIns: "entry",
+        corejs: { version: "3.29", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ],
+  ].filter(Boolean),
   plugins: [
     [
       path.resolve(
         paths.polymer_dir,
-        "build-scripts/babel-plugins/inline-constants-plugin.cjs"
+        "build-scripts/babel-plugins/inline-constants-plugin.js"
       ),
       {
         modules: ["@mdi/js"],
         ignoreModuleNotFound: true,
       },
     ],
+    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+    !latestBuild && [
+      "@babel/plugin-proposal-object-rest-spread",
+      { loose: true, useBuiltIns: true },
+    ],
+    // Only support the syntax, Webpack will handle it.
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
+    // Support  various proposals
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    "@babel/plugin-proposal-class-static-block",
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
@@ -128,17 +136,10 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
           "@polymer/polymer/lib/utils/html-tag": ["html"],
         },
         strictCSS: true,
-        htmlMinifier: module.exports.htmlMinifierOptions,
+        htmlMinifier: htmlMinifierOptions,
         failOnError: true, // we can turn this off in case of false positives
       },
     ],
-    // Import helpers and regenerator from runtime package
-    [
-      "@babel/plugin-transform-runtime",
-      { version: require("../package.json").dependencies["@babel/runtime"] },
-    ],
-    // Support  some proposals still in TC39 process
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
@@ -260,7 +261,6 @@ module.exports.config = {
       isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
-        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
       },
     };
   },

build-scripts/env.js

@@ -1,6 +1,6 @@
 const fs = require("fs");
 const path = require("path");
-const paths = require("./paths.cjs");
+const paths = require("./paths.js");
 
 module.exports = {
   useRollup() {

build-scripts/gulp/app.js

@@ -1,16 +1,18 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-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";
+// Run HA develop mode
+
+const gulp = require("gulp");
+const env = require("../env");
+require("./clean.js");
+require("./translations.js");
+require("./locale-data.js");
+require("./gen-icons-json.js");
+require("./gather-static.js");
+require("./compress.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+require("./rollup.js");
+require("./wds.js");
 
 gulp.task(
   "develop-app",
@@ -22,7 +24,8 @@ gulp.task(
     gulp.parallel(
       "gen-service-worker-app-dev",
       "gen-icons-json",
-      "gen-pages-app-dev",
+      "gen-pages-dev",
+      "gen-index-app-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -47,6 +50,10 @@ gulp.task(
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests
     ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
+    gulp.parallel(
+      "gen-pages-prod",
+      "gen-index-app-prod",
+      "gen-service-worker-app-prod"
+    )
   )
 );

build-scripts/gulp/cast.js

@@ -1,12 +1,14 @@
-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";
+const gulp = require("gulp");
+
+const env = require("../env");
+
+require("./clean.js");
+require("./translations.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-cast",
@@ -18,7 +20,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "gen-pages-cast-dev",
+    "gen-index-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
@@ -34,6 +36,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
-    "gen-pages-cast-prod"
+    "gen-index-cast-prod"
   )
 );

build-scripts/gulp/clean.js

@@ -1,37 +1,37 @@
-import { deleteSync } from "del";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-import "./translations.js";
+const del = import("del");
+const gulp = require("gulp");
+const paths = require("../paths");
+require("./translations");
 
 gulp.task(
   "clean",
   gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.app_output_root, paths.build_dir])
+    (await del).deleteSync([paths.app_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.demo_output_root, paths.build_dir])
+    (await del).deleteSync([paths.demo_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.cast_output_root, paths.build_dir])
+    (await del).deleteSync([paths.cast_output_root, paths.build_dir])
   )
 );
 
 gulp.task("clean-hassio", async () =>
-  deleteSync([paths.hassio_output_root, paths.build_dir])
+  (await del).deleteSync([paths.hassio_output_root, paths.build_dir])
 );
 
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", async () =>
-    deleteSync([
+    (await del).deleteSync([
       paths.gallery_output_root,
       paths.gallery_build,
       paths.build_dir,

build-scripts/gulp/compress.js

@@ -1,16 +1,45 @@
 // Tasks to compress
 
-import gulp from "gulp";
-import zopfli from "gulp-zopfli-green";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const path = require("path");
+const paths = require("../paths");
 
 const zopfliOptions = { threshold: 150 };
 
-const compressDist = (rootDir) =>
-  gulp
-    .src([`${rootDir}/**/*.{js,json,css,svg}`])
+gulp.task("compress-app", function compressApp() {
+  const jsLatest = gulp
+    .src(path.resolve(paths.app_output_latest, "**/*.js"))
     .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir));
+    .pipe(gulp.dest(paths.app_output_latest));
 
-gulp.task("compress-app", () => compressDist(paths.app_output_root));
-gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));
+  const jsEs5 = gulp
+    .src(path.resolve(paths.app_output_es5, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_es5));
+
+  const polyfills = gulp
+    .src(path.resolve(paths.app_output_static, "polyfills/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "polyfills")));
+
+  const translations = gulp
+    .src(path.resolve(paths.app_output_static, "translations/**/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "translations")));
+
+  const icons = gulp
+    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations, icons);
+});
+
+gulp.task("compress-hassio", function compressApp() {
+  return gulp
+    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.hassio_output_root));
+});

build-scripts/gulp/demo.js

@@ -1,13 +1,16 @@
-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";
+// Run demo develop mode
+const gulp = require("gulp");
+
+const env = require("../env");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons-json.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-demo",
@@ -19,7 +22,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel(
       "gen-icons-json",
-      "gen-pages-demo-dev",
+      "gen-index-demo-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -40,6 +43,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
-    "gen-pages-demo-prod"
+    "gen-index-demo-prod"
   )
 );

build-scripts/gulp/download_translations.js

@@ -1,7 +1,6 @@
-import fs from "fs/promises";
-import gulp from "gulp";
-import mapStream from "map-stream";
-import transform from "gulp-json-transform";
+const gulp = require("gulp");
+const fs = require("fs/promises");
+const mapStream = require("map-stream");
 
 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";
@@ -42,33 +41,8 @@ function checkHtml() {
   });
 }
 
-function convertBackendTranslations(data, _file) {
-  const output = { component: {} };
-  if (!data.component) {
-    return output;
-  }
-  Object.keys(data.component).forEach((domain) => {
-    if (!("entity_component" in data.component[domain])) {
-      return;
-    }
-    output.component[domain] = { entity_component: {} };
-    Object.keys(data.component[domain].entity_component).forEach((key) => {
-      output.component[domain].entity_component[key] =
-        data.component[domain].entity_component[key];
-    });
-  });
-  return output;
-}
-
-gulp.task("convert-backend-translations", function () {
-  return gulp
-    .src([`${inDirBackend}/*.json`])
-    .pipe(transform((data, file) => convertBackendTranslations(data, file)))
-    .pipe(gulp.dest(inDirBackend));
-});
-
+// Backend translations do not currently pass HTML check so are excluded here for now
 gulp.task("check-translations-html", function () {
-  // We exclude backend translations because they are not compliant with the HTML rule for now
   return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
 });
 

build-scripts/gulp/entry-html.js

@@ -1,233 +1,344 @@
 // Tasks to generate entry HTML
+const gulp = require("gulp");
+const fs = require("fs-extra");
+const path = require("path");
+const template = require("lodash.template");
+const minify = require("html-minifier").minify;
+const paths = require("../paths.js");
+const env = require("../env.js");
 
-import fs from "fs-extra";
-import gulp from "gulp";
-import { minify } from "html-minifier-terser";
-import template from "lodash.template";
-import path from "path";
-import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
+const templatePath = (tpl) =>
+  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
 
-const renderTemplate = (templateFile, data = {}) => {
-  const compiled = template(
-    fs.readFileSync(templateFile, { encoding: "utf-8" })
-  );
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
   return compiled({
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
-    // Resolve any child/nested templates relative to the parent and pass the same data
-    renderTemplate: (childTemplate) =>
-      renderTemplate(
-        path.resolve(path.dirname(templateFile), childTemplate),
-        data
-      ),
+    renderTemplate,
   });
 };
 
-const WRAP_TAGS = { ".js": "script", ".css": "style" };
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
+  );
 
-const minifyHtml = (content, ext) => {
-  const wrapTag = WRAP_TAGS[ext] || "";
-  const begTag = wrapTag && `<${wrapTag}>`;
-  const endTag = wrapTag && `</${wrapTag}>`;
-  return minify(begTag + content + endTag, {
-    ...htmlMinifierOptions,
-    conservativeCollapse: false,
-    minifyJS: terserOptions({
-      latestBuild: false, // Shared scripts should be ES5
-      isTestBuild: true, // Don't need source maps
-    }),
-  }).then((wrapped) =>
-    wrapTag ? wrapped.slice(begTag.length, -endTag.length) : wrapped
+const renderCastTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
   );
-};
 
-// Function to generate a dev task for each project's configuration
-// Note Currently WDS paths are hard-coded to only work for app
-const genPagesDevTask =
-  (
-    pageEntries,
-    inputRoot,
-    outputRoot,
-    useWDS = false,
-    inputSub = "src/html",
-    publicRoot = ""
-  ) =>
-  async () => {
-    for (const [page, entries] of Object.entries(pageEntries)) {
-      const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
-        {
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${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`,
-          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
-        }
+const renderGalleryTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
   );
-      fs.outputFileSync(path.resolve(outputRoot, page), content);
-    }
-  };
 
-// Same as previous but for production builds
-// (includes minification and hashed file names from manifest)
-const genPagesProdTask =
-  (
-    pageEntries,
-    inputRoot,
-    outputRoot,
-    outputLatest,
-    outputES5,
-    inputSub = "src/html"
-  ) =>
-  async () => {
-    const latestManifest = fs.readJsonSync(
-      path.resolve(outputLatest, "manifest.json")
-    );
-    const es5Manifest = outputES5
-      ? fs.readJsonSync(path.resolve(outputES5, "manifest.json"))
-      : {};
-    const minifiedHTML = [];
-    for (const [page, entries] of Object.entries(pageEntries)) {
-      const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
-        {
-          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
-          latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: es5Manifest["custom-panel.js"],
-        }
-      );
-      minifiedHTML.push(
-        minifyHtml(content, path.extname(page)).then((minified) =>
-          fs.outputFileSync(path.resolve(outputRoot, page), minified)
-        )
+const minifyHtml = (content) =>
+  minify(content, {
+    collapseWhitespace: true,
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+
+      es5PageJS: `/frontend_es5/${page}.js`,
+    });
+
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      content
     );
   }
-    await Promise.all(minifiedHTML);
-  };
+  done();
+});
 
-// Map HTML pages to their required entrypoints
-const APP_PAGE_ENTRIES = {
-  "authorize.html": ["authorize"],
-  "onboarding.html": ["onboarding"],
-  "index.html": ["core", "app"],
-};
-
-gulp.task(
-  "gen-pages-app-dev",
-  genPagesDevTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    env.useWDS()
-  )
-);
-
-gulp.task(
-  "gen-pages-app-prod",
-  genPagesProdTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
+gulp.task("gen-pages-prod", (done) => {
+  const latestManifest = require(path.resolve(
     paths.app_output_latest,
-    paths.app_output_es5
-  )
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
+
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+
+      es5PageJS: es5Manifest[`${page}.js`],
+    });
+
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      minifyHtml(content)
+    );
+  }
+  done();
+});
+
+gulp.task("gen-index-app-dev", (done) => {
+  let latestAppJS;
+  let latestCoreJS;
+  let latestCustomPanelJS;
+
+  if (env.useWDS()) {
+    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+    latestCustomPanelJS =
+      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+  } else {
+    latestAppJS = "/frontend_latest/app.js";
+    latestCoreJS = "/frontend_latest/core.js";
+    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+  }
+
+  const content = renderTemplate("index", {
+    latestAppJS,
+    latestCoreJS,
+    latestCustomPanelJS,
+
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+  }).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-app-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(
+    path.resolve(paths.app_output_root, "index.html"),
+    minified
+  );
+  done();
+});
+
+gulp.task("gen-index-cast-dev", (done) => {
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: "/frontend_latest/receiver.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "receiver.html"),
+    contentReceiver
   );
 
-const CAST_PAGE_ENTRIES = {
-  "faq.html": ["launcher"],
-  "index.html": ["launcher"],
-  "media.html": ["media"],
-  "receiver.html": ["receiver"],
-};
-
-gulp.task(
-  "gen-pages-cast-dev",
-  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: "/frontend_latest/media.js",
+    es5MediaJS: "/frontend_es5/media.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
   );
 
-gulp.task(
-  "gen-pages-cast-prod",
-  genPagesProdTask(
-    CAST_PAGE_ENTRIES,
-    paths.cast_dir,
-    paths.cast_output_root,
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-cast-prod", (done) => {
+  const latestManifest = require(path.resolve(
     paths.cast_output_latest,
-    paths.cast_output_es5
-  )
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.cast_output_es5,
+    "manifest.json"
+  ));
+
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: latestManifest["receiver.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "receiver.html"),
+    contentReceiver
   );
 
-const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
-
-gulp.task(
-  "gen-pages-demo-dev",
-  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: latestManifest["media.js"],
+    es5MediaJS: es5Manifest["media.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
   );
 
-gulp.task(
-  "gen-pages-demo-prod",
-  genPagesProdTask(
-    DEMO_PAGE_ENTRIES,
-    paths.demo_dir,
-    paths.demo_output_root,
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    content
+  );
+  done();
+});
+
+gulp.task("gen-index-demo-prod", (done) => {
+  const latestManifest = require(path.resolve(
     paths.demo_output_latest,
-    paths.demo_output_es5
-  )
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = minifyHtml(content);
+
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    minified
   );
+  done();
+});
 
-const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
+gulp.task("gen-index-gallery-dev", (done) => {
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: "./frontend_latest/entrypoint.js",
+  });
 
-gulp.task(
-  "gen-pages-gallery-dev",
-  genPagesDevTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root
-  )
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    content
   );
+  done();
+});
 
-gulp.task(
-  "gen-pages-gallery-prod",
-  genPagesProdTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root,
-    paths.gallery_output_latest
-  )
+gulp.task("gen-index-gallery-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    paths.gallery_output_latest,
+    "manifest.json"
+  ));
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: latestManifest["entrypoint.js"],
+  });
+  const minified = minifyHtml(content);
+
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    minified
   );
+  done();
+});
 
-const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
-
-gulp.task(
-  "gen-pages-hassio-dev",
-  genPagesDevTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    undefined,
-    "src",
-    paths.hassio_publicPath
-  )
+gulp.task("gen-index-hassio-dev", async () => {
+  writeHassioEntrypoint(
+    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
+    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
   );
+});
 
-gulp.task(
-  "gen-pages-hassio-prod",
-  genPagesProdTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
+gulp.task("gen-index-hassio-prod", async () => {
+  const latestManifest = require(path.resolve(
     paths.hassio_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
     paths.hassio_output_es5,
-    "src"
-  )
+    "manifest.json"
+  ));
+  writeHassioEntrypoint(
+    latestManifest["entrypoint.js"],
+    es5Manifest["entrypoint.js"]
   );
+});
+
+function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
+  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+  fs.writeFileSync(
+    path.resolve(paths.hassio_output_root, "entrypoint.js"),
+    `
+function loadES5() {
+  var el = document.createElement('script');
+  el.src = '${es5Entrypoint}';
+  document.body.appendChild(el);
+}
+if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
+    loadES5();
+} else {
+  try {
+    new Function("import('${latestEntrypoint}')")();
+  } catch (err) {
+    loadES5();
+  }
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}

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

@@ -1,15 +1,14 @@
 // Task to download the latest Lokalise translations from the nightly workflow artifacts
 
-import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
-import { retry } from "@octokit/plugin-retry";
-import { Octokit } from "@octokit/rest";
-import { deleteAsync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
-import jszip from "jszip";
-import path from "path";
-import process from "process";
-import tar from "tar";
+const del = import("del");
+const fs = require("fs/promises");
+const path = require("path");
+const process = require("process");
+const gulp = require("gulp");
+const jszip = require("jszip");
+const tar = require("tar");
+const { Octokit } = require("@octokit/rest");
+const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
@@ -38,7 +37,7 @@ gulp.task("fetch-nightly-translations", async function () {
   // and stop if they are not old enough
   let currentArtifact;
   try {
-    currentArtifact = JSON.parse(await readFile(ARTIFACT_FILE, "utf-8"));
+    currentArtifact = JSON.parse(await fs.readFile(ARTIFACT_FILE, "utf-8"));
     const currentAge =
       (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
     if (currentAge < MAX_AGE) {
@@ -53,7 +52,7 @@ gulp.task("fetch-nightly-translations", async function () {
   }
 
   // To store file writing promises
-  const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
+  const createExtractDir = fs.mkdir(EXTRACT_DIR, { recursive: true });
   const writings = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
@@ -63,7 +62,7 @@ gulp.task("fetch-nightly-translations", async function () {
     tokenAuth = { token: process.env.GITHUB_TOKEN };
   } else {
     try {
-      tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
+      tokenAuth = JSON.parse(await fs.readFile(TOKEN_FILE, "utf-8"));
     } catch {
       if (!allowTokenSetup) {
         console.log("No token found so  build wil continue with English only");
@@ -88,7 +87,7 @@ gulp.task("fetch-nightly-translations", async function () {
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
         createExtractDir.then(
-          writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
+          fs.writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
     }
@@ -96,7 +95,7 @@ gulp.task("fetch-nightly-translations", async function () {
 
   // Authenticate with token and request workflow runs from GitHub
   console.log("Fetching new translations...");
-  const octokit = new (Octokit.plugin(retry))({
+  const octokit = new Octokit({
     userAgent: "Fetch Nightly Translations",
     auth: tokenAuth.token,
   });
@@ -132,13 +131,17 @@ gulp.task("fetch-nightly-translations", async function () {
   }
   writings.push(
     createExtractDir.then(
-      writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+      fs.writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
     )
   );
 
   // Remove the current translations
   const deleteCurrent = Promise.all(writings).then(
-    deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
+    (await del).deleteAsync([
+      `${EXTRACT_DIR}/*`,
+      `!${ARTIFACT_FILE}`,
+      `!${TOKEN_FILE}`,
+    ])
   );
 
   // Get the download URL and follow the redirect to download (stored as ArrayBuffer)

build-scripts/gulp/gallery.js

@@ -1,19 +1,22 @@
-import fs from "fs";
-import { glob } from "glob";
-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";
+// Run demo develop mode
+const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
+const { marked } = require("marked");
+const glob = require("glob");
+const yaml = require("js-yaml");
+
+const env = require("../env");
+const paths = require("../paths");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons-json.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
@@ -86,7 +89,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
   // Generate sidebar
   const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js");
-  const sidebar = (await import(sidebarPath)).default;
+  // To make watch work during development
+  delete require.cache[sidebarPath];
+  const sidebar = require(sidebarPath);
 
   const pagesToProcess = {};
   for (const key of processed) {
@@ -156,7 +161,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "gen-pages-gallery-dev",
+    "gen-index-gallery-dev",
     gulp.parallel(
       env.useRollup()
         ? "rollup-dev-server-gallery"
@@ -190,6 +195,6 @@ gulp.task(
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
-    "gen-pages-gallery-prod"
+    "gen-index-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -1,9 +1,9 @@
 // Gulp task to gather all static files.
 
-import fs from "fs-extra";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const paths = require("../paths");
 
 const npmPath = (...parts) =>
   path.resolve(paths.polymer_dir, "node_modules", ...parts);
@@ -111,10 +111,9 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-static-supervisor", async () => {
+gulp.task("copy-locale-data-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
-  copyFonts(staticDir);
 });
 
 gulp.task("copy-static-app", async () => {

build-scripts/gulp/gen-icons-json.js

@@ -1,15 +1,17 @@
-import fs from "fs";
-import gulp from "gulp";
-import hash from "object-hash";
-import path from "path";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const hash = require("object-hash");
 
-const ICON_PACKAGE_PATH = path.resolve("node_modules/@mdi/svg/");
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
 const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
-const OUTPUT_DIR = path.resolve(paths.build_dir, "mdi");
-const REMOVED_ICONS_PATH = new URL("../removedIcons.json", import.meta.url);
+const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+const REMOVED_ICONS_PATH = path.resolve(__dirname, "../removedIcons.json");
 
 const encoding = "utf8";
 
@@ -132,11 +134,11 @@ gulp.task("gen-icons-json", (done) => {
   });
 
   const file = fs.readFileSync(PACKAGE_PATH, { encoding });
-  const packageMeta = JSON.parse(file);
+  const package = JSON.parse(file);
 
   fs.writeFileSync(
     path.resolve(OUTPUT_DIR, "iconMetadata.json"),
-    JSON.stringify({ version: packageMeta.version, parts })
+    JSON.stringify({ version: package.version, parts })
   );
 
   fs.writeFileSync(

build-scripts/gulp/hassio.js

@@ -1,13 +1,13 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-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";
+const gulp = require("gulp");
+const env = require("../env");
+require("./clean.js");
+require("./gen-icons-json.js");
+require("./webpack.js");
+require("./compress.js");
+require("./rollup.js");
+require("./gather-static.js");
+require("./translations.js");
+require("./gen-icons-json.js");
 
 gulp.task(
   "develop-hassio",
@@ -17,11 +17,11 @@ gulp.task(
     },
     "clean-hassio",
     "gen-dummy-icons-json",
-    "gen-pages-hassio-dev",
+    "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-static-supervisor",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -37,9 +37,9 @@ gulp.task(
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-static-supervisor",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-pages-hassio-prod",
+    "gen-index-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])
   )

build-scripts/gulp/locale-data.js

@@ -1,40 +1,40 @@
-import { deleteSync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
+const del = import("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const paths = require("../paths");
 
-const outDir = path.join(paths.build_dir, "locale-data");
+const outDir = "build/locale-data";
 
-const INTL_PACKAGES = {
+gulp.task("clean-locale-data", async () => (await del).deleteSync([outDir]));
+
+gulp.task("ensure-locale-data-build-dir", (done) => {
+  if (!fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+  done();
+});
+
+const modules = {
   "intl-relativetimeformat": "RelativeTimeFormat",
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
-  "intl-displaynames": "DisplayNames",
-  "intl-listformat": "ListFormat",
 };
 
-const convertToJSON = async (pkg, lang) => {
-  let localeData;
-  try {
-    localeData = await readFile(
-      path.resolve(
-        paths.polymer_dir,
-        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
-      ),
-      "utf-8"
+gulp.task("create-locale-data", (done) => {
+  const translationMeta = JSON.parse(
+    fs.readFileSync(
+      path.join(paths.translations_src, "translationMetadata.json")
+    )
   );
-  } catch (e) {
-    // Ignore if language is missing (i.e. not supported by @formatjs)
-    if (e.code === "ENOENT") {
-      return;
-    } else {
-      throw e;
-    }
-  }
-  // Convert to JSON
-  const className = INTL_PACKAGES[pkg];
-  localeData = localeData
+  Object.entries(modules).forEach(([module, className]) => {
+    Object.keys(translationMeta).forEach((lang) => {
+      try {
+        const localeData = String(
+          fs.readFileSync(
+            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+          )
+        )
           .replace(
             new RegExp(
               `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
@@ -43,31 +43,30 @@ const convertToJSON = async (pkg, lang) => {
             ""
           )
           .replace(/\)\s*}/im, "");
-  // Parse to validate JSON, then stringify to minify
-  localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
-};
-
-gulp.task("clean-locale-data", async () => deleteSync([outDir]));
-
-gulp.task("create-locale-data", async () => {
-  const translationMeta = JSON.parse(
-    await readFile(
-      path.resolve(paths.translations_src, "translationMetadata.json"),
-      "utf-8"
-    )
+        // make sure we have valid JSON
+        JSON.parse(localeData);
+        if (!fs.existsSync(path.join(outDir, module))) {
+          fs.mkdirSync(path.join(outDir, module), { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outDir, `${module}/${lang}.json`),
+          localeData
         );
-  const conversions = [];
-  for (const pkg of Object.keys(INTL_PACKAGES)) {
-    await mkdir(path.join(outDir, pkg), { recursive: true });
-    for (const lang of Object.keys(translationMeta)) {
-      conversions.push(convertToJSON(pkg, lang));
+      } catch (e) {
+        if (e.code !== "MODULE_NOT_FOUND") {
+          throw e;
         }
       }
-  await Promise.all(conversions);
+    });
+    done();
+  });
 });
 
 gulp.task(
   "build-locale-data",
-  gulp.series("clean-locale-data", "create-locale-data")
+  gulp.series(
+    "clean-locale-data",
+    "ensure-locale-data-build-dir",
+    "create-locale-data"
+  )
 );

build-scripts/gulp/rollup.js

@@ -1,14 +1,13 @@
 // 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 path = require("path");
+const gulp = require("gulp");
+const rollup = require("rollup");
+const handler = require("serve-handler");
+const http = require("http");
+const log = require("fancy-log");
+const open = require("open");
+const rollupConfig = require("../rollup");
+const paths = require("../paths");
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(
@@ -47,7 +46,7 @@ function createServer(serveOptions) {
   );
 }
 
-function watchRollup(createConfig, extraWatchSrc = [], serveOptions = null) {
+function watchRollup(createConfig, extraWatchSrc = [], serveOptions) {
   const { inputOptions, outputOptions } = createConfig({
     isProdBuild: false,
     latestBuild: true,

build-scripts/gulp/service-worker.js

@@ -1,12 +1,11 @@
 // Generate service worker.
 // Based on manifest, create a file with the content as service_worker.js
-
-import fs from "fs-extra";
-import gulp from "gulp";
-import path from "path";
-import sourceMapUrl from "source-map-url";
-import workboxBuild from "workbox-build";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const workboxBuild = require("workbox-build");
+const sourceMapUrl = require("source-map-url");
+const paths = require("../paths.js");
 
 const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
@@ -29,9 +28,10 @@ self.addEventListener('install', (event) => {
 
 gulp.task("gen-service-worker-app-prod", async () => {
   // Read bundled source file
-  const bundleManifestLatest = fs.readJsonSync(
-    path.resolve(paths.app_output_latest, "manifest.json")
-  );
+  const bundleManifestLatest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
   let serviceWorkerContent = fs.readFileSync(
     paths.app_output_root + bundleManifestLatest["service_worker.js"],
     "utf-8"
@@ -46,9 +46,10 @@ gulp.task("gen-service-worker-app-prod", async () => {
   );
 
   // Remove ES5
-  const bundleManifestES5 = fs.readJsonSync(
-    path.resolve(paths.app_output_es5, "manifest.json")
-  );
+  const bundleManifestES5 = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
   fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
   fs.removeSync(
     paths.app_output_root + bundleManifestES5["service_worker.js.map"]

build-scripts/gulp/translations.js

@@ -1,24 +1,19 @@
-import { createHash } from "crypto";
-import { deleteSync } from "del";
-import {
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  renameSync,
-  writeFile,
-} from "fs";
-import gulp from "gulp";
-import flatmap from "gulp-flatmap";
-import transform from "gulp-json-transform";
-import merge from "gulp-merge-json";
-import rename from "gulp-rename";
-import path from "path";
-import vinylBuffer from "vinyl-buffer";
-import source from "vinyl-source-stream";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-import { mapFiles } from "../util.cjs";
-import "./fetch-nightly-translations.js";
+const del = import("del");
+const crypto = require("crypto");
+const path = require("path");
+const source = require("vinyl-source-stream");
+const vinylBuffer = require("vinyl-buffer");
+const gulp = require("gulp");
+const fs = require("fs");
+const flatmap = require("gulp-flatmap");
+const merge = require("gulp-merge-json");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
+const { mapFiles } = require("../util");
+const env = require("../env");
+const paths = require("../paths");
+
+require("./fetch-nightly-translations");
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
@@ -38,12 +33,7 @@ gulp.task(
 
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
-  JSON.parse(
-    readFileSync(
-      path.resolve(paths.polymer_dir, "src/translations/en.json"),
-      "utf-8"
-    )
-  ).ui.panel
+  require("../../src/translations/en.json").ui.panel
 );
 
 function recursiveFlatten(prefix, data) {
@@ -130,14 +120,17 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", async () => deleteSync([workDir]));
+gulp.task("clean-translations", async () => (await del).deleteSync([workDir]));
 
-gulp.task("ensure-translations-build-dir", async () => {
-  mkdirSync(workDir, { recursive: true });
+gulp.task("ensure-translations-build-dir", (done) => {
+  if (!fs.existsSync(workDir)) {
+    fs.mkdirSync(workDir, { recursive: true });
+  }
+  done();
 });
 
 gulp.task("create-test-metadata", (cb) => {
-  writeFile(
+  fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
       test: {
@@ -310,14 +303,15 @@ const fingerprints = {};
 
 gulp.task("build-translation-fingerprints", () => {
   // Fingerprint full file of each language
-  const files = readdirSync(fullDir);
+  const files = fs.readdirSync(fullDir);
 
   for (let i = 0; i < files.length; i++) {
     fingerprints[files[i].split(".")[0]] = {
       // In dev we create fake hashes
       hash: env.isProdBuild()
-        ? createHash("md5")
-            .update(readFileSync(path.join(fullDir, files[i]), "utf-8"))
+        ? crypto
+            .createHash("md5")
+            .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
             .digest("hex")
         : "dev",
     };
@@ -333,7 +327,7 @@ gulp.task("build-translation-fingerprints", () => {
         throw new Error(`Unable to find hash for ${filename}`);
       }
 
-      renameSync(
+      fs.renameSync(
         filename,
         `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
           parsed.ext
@@ -415,7 +409,7 @@ gulp.task("build-translation-write-metadata", () =>
 gulp.task(
   "create-translations",
   gulp.series(
-    ...(env.isProdBuild() ? [] : ["create-test-translation"]),
+    env.isProdBuild() ? (done) => done() : "create-test-translation",
     "build-master-translation",
     "build-merged-translations",
     gulp.parallel(...splitTasks),

build-scripts/gulp/wds.js

@@ -1,7 +1,8 @@
-import gulp from "gulp";
-import { startDevServer } from "@web/dev-server";
+// Tasks to run Rollup
+const gulp = require("gulp");
+const { startDevServer } = require("@web/dev-server");
 
-gulp.task("wds-watch-app", async () => {
+gulp.task("wds-watch-app", () => {
   startDevServer({
     config: {
       watch: true,

build-scripts/gulp/webpack.js

@@ -1,20 +1,19 @@
 // Tasks to run webpack.
-
-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 env from "../env.cjs";
-import paths from "../paths.cjs";
-import {
+const fs = require("fs");
+const gulp = require("gulp");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const path = require("path");
+const env = require("../env");
+const paths = require("../paths");
+const {
   createAppConfig,
-  createCastConfig,
   createDemoConfig,
-  createGalleryConfig,
+  createCastConfig,
   createHassioConfig,
-} from "../webpack.cjs";
+  createGalleryConfig,
+} = require("../webpack");
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -44,7 +43,6 @@ const runDevServer = async ({
 }) => {
   const server = new WebpackDevServer(
     {
-      hot: false,
       open: true,
       host: listenHost,
       port,

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

@@ -1,59 +0,0 @@
-#!/usr/bin/env node
-// Script to print Babel plugins and Core JS polyfills that will be used by browserslist environments
-
-import { version as babelVersion } from "@babel/core";
-import presetEnv from "@babel/preset-env";
-import compilationTargets from "@babel/helper-compilation-targets";
-import coreJSCompat from "core-js-compat";
-import { logPlugin } from "@babel/preset-env/lib/debug.js";
-import { babelOptions } from "./bundle.cjs";
-
-const detailsOpen = (heading) =>
-  `<details>\n<summary><h4>${heading}</h4></summary>\n`;
-const detailsClose = "</details>\n";
-
-const dummyAPI = {
-  version: babelVersion,
-  assertVersion: () => {},
-  caller: (callback) =>
-    callback({
-      name: "Dummy Bundler",
-      supportsStaticESM: true,
-      supportsDynamicImport: true,
-      supportsTopLevelAwait: true,
-      supportsExportNamespaceFrom: true,
-    }),
-  targets: () => ({}),
-};
-
-for (const buildType of ["Modern", "Legacy"]) {
-  const browserslistEnv = buildType.toLowerCase();
-  const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
-  const presetEnvOpts = babelOpts.presets[0][1];
-
-  // Invoking preset-env in debug mode will log the included plugins
-  console.log(detailsOpen(`${buildType} Build Babel Plugins`));
-  presetEnv.default(dummyAPI, {
-    ...presetEnvOpts,
-    browserslistEnv,
-    debug: true,
-  });
-  console.log(detailsClose);
-
-  // Manually log the Core-JS polyfills using the same technique
-  if (presetEnvOpts.useBuiltIns) {
-    console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
-    const targets = compilationTargets.default(babelOpts?.targets, {
-      browserslistEnv,
-    });
-    const polyfillList = coreJSCompat({ targets }).list;
-    console.log(
-      "The following %i polyfills may be injected by Babel:\n",
-      polyfillList.length
-    );
-    for (const polyfill of polyfillList) {
-      logPlugin(polyfill, targets, coreJSCompat.data);
-    }
-    console.log(detailsClose);
-  }
-}

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

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

build-scripts/rollup.js

@@ -3,18 +3,18 @@ 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 babel = require("@rollup/plugin-babel").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 manifest = require("./rollup-plugins/manifest-plugin");
+const worker = require("./rollup-plugins/worker-plugin");
+const dontHashPlugin = require("./rollup-plugins/dont-hash-plugin");
+const ignore = require("./rollup-plugins/ignore-plugin");
 
-const bundle = require("./bundle.cjs");
-const paths = require("./paths.cjs");
+const bundle = require("./bundle");
+const paths = require("./paths");
 
 const extensions = [".js", ".ts"];
 
@@ -142,5 +142,4 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createRollupConfig,
 };

build-scripts/webpack.js

@@ -1,12 +1,11 @@
-const { existsSync } = require("fs");
-const path = require("path");
 const webpack = require("webpack");
+const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
-const paths = require("./paths.cjs");
-const bundle = require("./bundle.cjs");
+const paths = require("./paths.js");
+const bundle = require("./bundle.js");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -42,7 +41,7 @@ const createWebpackConfig = ({
   return {
     name,
     mode: isProdBuild ? "production" : "development",
-    target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
+    target: ["web", latestBuild ? "es2017" : "es5"],
     // For tests/CI, source maps are skipped to gain build speed
     // For production, generate source maps for accurate stack traces without source code
     // For development, generate "cheap" versions that can map to original line numbers
@@ -85,13 +84,6 @@ const createWebpackConfig = ({
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
-      splitChunks: {
-        // Disable splitting for web workers with ESM output
-        // Imports of external chunks are broken
-        chunks: latestBuild
-          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
-          : undefined,
-      },
     },
     plugins: [
       !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
@@ -140,17 +132,6 @@ const createWebpackConfig = ({
         ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // See `src/resources/intl-polyfill-legacy.ts` for explanation
-      !latestBuild &&
-        new webpack.NormalModuleReplacementPlugin(
-          new RegExp(
-            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
-          ),
-          path.resolve(
-            paths.polymer_dir,
-            "src/resources/intl-polyfill-legacy.ts"
-          )
-        ),
       !isProdBuild && new LogStartCompilePlugin(),
     ].filter(Boolean),
     resolve: {
@@ -168,23 +149,17 @@ const createWebpackConfig = ({
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
-        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
-          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
       },
     },
     output: {
-      module: latestBuild,
-      filename: ({ chunk }) =>
-        !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
-          ? "[name].js"
-          : "[name]-[contenthash].js",
+      filename: ({ chunk }) => {
+        if (!isProdBuild || isStatsBuild || dontHash.has(chunk.name)) {
+          return `${chunk.name}.js`;
+        }
+        return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+      },
       chunkFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash].js" : "[name].js",
-      assetModuleFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash][ext]" : "[id][ext]",
-      hashFunction: "xxhash64",
-      hashDigest: "base64url",
-      hashDigestLength: 11, // full length of 64 bit base64url
+        isProdBuild && !isStatsBuild ? "[chunkhash:8].js" : "[id].chunk.js",
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
@@ -192,29 +167,22 @@ const createWebpackConfig = ({
       // Since production source maps don't include sources, we need to point to them elsewhere
       // For dependencies, just provide the path (no source in browser)
       // Otherwise, point to the raw code on GitHub for browser to load
-      ...Object.fromEntries(
-        ["", "Fallback"].map((v) => [
-          `devtool${v}ModuleFilenameTemplate`,
+      devtoolModuleFilenameTemplate:
         !isTestBuild && isProdBuild
           ? (info) => {
+              const sourcePath = info.resourcePath.replace(/^\.\//, "");
               if (
-                  !path.isAbsolute(info.absoluteResourcePath) ||
-                  !existsSync(info.resourcePath) ||
-                  info.resourcePath.startsWith("./node_modules")
+                sourcePath.startsWith("node_modules") ||
+                sourcePath.startsWith("webpack")
               ) {
-                  // Source URLs are unknown for dependencies, so we use a relative URL with a
-                  // non - existent top directory.  This results in a clean source tree in browser
-                  // dev tools, and they stay happy getting 404s with valid requests.
-                  return `/unknown${path.resolve("/", info.resourcePath)}`;
+                return `no-source/${sourcePath}`;
               }
-                return new URL(info.resourcePath, bundle.sourceMapURL()).href;
+              return `${bundle.sourceMapURL()}/${sourcePath}`;
             }
           : undefined,
-        ])
-      ),
     },
     experiments: {
-      outputModule: true,
+      topLevelAwait: true,
     },
   };
 };
@@ -261,5 +229,4 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createWebpackConfig,
 };

cast/public/service_worker.js

@@ -1,3 +1,3 @@
-self.addEventListener("fetch", (event) => {
+self.addEventListener("fetch", function(event) {
   event.respondWith(fetch(event.request));
 });

cast/rollup.config.js

@@ -1,5 +1,5 @@
-import rollup from "../build-scripts/rollup.cjs";
-import env from "../build-scripts/env.cjs";
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
 
 const config = rollup.createCastConfig({
   isProdBuild: env.isProdBuild(),
@@ -7,4 +7,4 @@ const config = rollup.createCastConfig({
   isStatsBuild: env.isStatsBuild(),
 });
 
-export default { ...config.inputOptions, output: config.outputOptions };
+module.exports = { ...config.inputOptions, output: config.outputOptions };

cast/src/html/_social_meta.html.template

@@ -1,24 +0,0 @@
-<meta property="fb:app_id" content="338291289691179" />
-<meta property="og:title" content="Home Assistant Cast" />
-<meta property="og:site_name" content="Home Assistant Cast" />
-<meta property="og:url" content="https://cast.home-assistant.io/" />
-<meta property="og:type" content="website" />
-<meta
-  property="og:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
-/>
-<meta
-  property="og:image"
-  content="https://cast.home-assistant.io/images/google-nest-hub.png"
-/>
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content="@home_assistant" />
-<meta name="twitter:title" content="Home Assistant Cast" />
-<meta
-  name="twitter:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
-/>
-<meta
-  name="twitter:image"
-  content="https://cast.home-assistant.io/images/google-nest-hub.png"
-/>

cast/src/html/index.html.template

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home Assistant Cast</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
-    <style>
-      body {
-        background-color: #e5e5e5;
-      }
-    </style>
-    <%= renderTemplate("_social_meta.html.template") %>
-  </head>
-  <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <hc-connect></hc-connect>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
-    <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-57927901-9', 'auto');
-    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
-    </script>
-  </body>
-</html>

cast/src/html/launcher-faq.html.template

@@ -3,7 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+    <%= renderTemplate('_style_base') %>
     <style>
       body {
         background-color: #e5e5e5;
@@ -35,14 +35,25 @@
     />
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate('_js_base') %>
+
     <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
+      import("<%= latestLauncherJS %>");
       window.latestJS = true;
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5LauncherJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5LauncherJS %>");
+        <% } %>
+      }
+    </script>
+
     <hc-layout subtitle="FAQ">
       <style>
         a {

cast/src/html/launcher.html.template

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate('_style_base') %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <meta property="fb:app_id" content="338291289691179">
+    <meta property="og:title" content="Home Assistant Cast">
+    <meta property="og:site_name" content="Home Assistant Cast">
+    <meta property="og:url" content="https://cast.home-assistant.io/">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@home_assistant">
+    <meta name="twitter:title" content="Home Assistant Cast">
+    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <hc-connect></hc-connect>
+
+    <script>
+      import("<%= latestLauncherJS %>");
+      window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5LauncherJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5LauncherJS %>");
+        <% } %>
+      }
+    </script>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>

cast/src/html/media.html.template

@@ -22,14 +22,25 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate('_js_base') %>
+
     <cast-media-player></cast-media-player>
+
     <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
+      import("<%= latestMediaJS %>");
       window.latestJS = true;
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5MediaJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5MediaJS %>");
+        <% } %>
+      }
+    </script>
   </body>
 </html>

cast/src/html/receiver.html.template

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html>
   <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-  <% for (const entry of latestEntryJS) { %>
-    <script type="module" src="<%= entry %>"></script>
-  <% } %>
-  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+  <script type="module" src="<%= latestReceiverJS %>"></script>
+  <%= renderTemplate('_style_base') %>
   <style>
     body {
       background-color: white;

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

@@ -190,7 +190,7 @@ export class HcConnect extends LitElement {
 
   private _handleInputKeyDown(ev: KeyboardEvent) {
     // Handle pressing enter.
-    if (ev.key === "Enter") {
+    if (ev.keyCode === 13) {
       this._handleConnect();
     }
   }

cast/src/media/entrypoint.ts

@@ -1,21 +1,19 @@
-import { framework } from "../receiver/cast_framework";
-
-const castContext = framework.CastReceiverContext.getInstance();
+const castContext = cast.framework.CastReceiverContext.getInstance();
 
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  cast.framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/cast_context.ts

@@ -1,3 +1,2 @@
-import { framework } from "./cast_framework";
-
-export const castContext = framework.CastReceiverContext.getInstance();
+/* eslint-disable no-undef */
+export const castContext = cast.framework.CastReceiverContext.getInstance();

cast/src/receiver/cast_framework.ts

@@ -1,3 +0,0 @@
-import type { cast as ReceiverCast } from "chromecast-caf-receiver";
-
-export const framework = (cast as unknown as typeof ReceiverCast).framework;

cast/src/receiver/entrypoint.ts

@@ -1,4 +1,4 @@
-import { framework } from "./cast_framework";
+/* eslint-disable no-undef */
 import { CAST_NS } from "../../../src/cast/const";
 import { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
@@ -34,14 +34,14 @@ const setTouchControlsVisibility = (visible: boolean) => {
 let timeOut: number | undefined;
 
 const playDummyMedia = (viewTitle?: string) => {
-  const loadRequestData = new framework.messages.LoadRequestData();
+  const loadRequestData = new cast.framework.messages.LoadRequestData();
   loadRequestData.autoplay = true;
-  loadRequestData.media = new framework.messages.MediaInformation();
+  loadRequestData.media = new cast.framework.messages.MediaInformation();
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
-  const metadata = new framework.messages.GenericMediaMetadata();
+  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
+  const metadata = new cast.framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
 
@@ -86,10 +86,10 @@ const showMediaPlayer = () => {
   }
 };
 
-const options = new framework.CastReceiverOptions();
+const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -98,7 +98,8 @@ castContext.addCustomMessageListener(
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
     if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+      playerManager.getPlayerState() !==
+      cast.framework.messages.PlayerState.IDLE
     ) {
       playerManager.stop();
     } else {
@@ -113,7 +114,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  cast.framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +128,25 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  cast.framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState ===
+        cast.framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
       event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+        cast.framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

cast/webpack.config.js

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

demo/public/service_worker.js

@@ -1,3 +1,3 @@
-self.addEventListener("fetch", (event) => {
+self.addEventListener("fetch", function(event) {
   event.respondWith(fetch(event.request));
 });

demo/rollup.config.js

@@ -1,5 +1,5 @@
-import rollup from "../build-scripts/rollup.cjs";
-import env from "../build-scripts/env.cjs";
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
 
 const config = rollup.createDemoConfig({
   isProdBuild: env.isProdBuild(),
@@ -7,4 +7,4 @@ const config = rollup.createDemoConfig({
   isStatsBuild: env.isStatsBuild(),
 });
 
-export default { ...config.inputOptions, output: config.outputOptions };
+module.exports = { ...config.inputOptions, output: config.outputOptions };

demo/src/html/_social_meta.html.template

@@ -1,26 +0,0 @@
-<meta property="fb:app_id" content="338291289691179" />
-<meta property="og:title" content="Home Assistant Demo" />
-<meta property="og:site_name" content="Home Assistant" />
-<meta property="og:url" content="https://demo.home-assistant.io/" />
-<meta property="og:type" content="website" />
-<meta
-  property="og:description"
-  content="Open source home automation that puts local control and privacy first."
-/>
-<meta
-  property="og:image"
-  content="https://www.home-assistant.io/images/default-social.png"
-/>
-
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content="@home_assistant" />
-
-<meta name="twitter:title" content="Home Assistant" />
-<meta
-  name="twitter:description"
-  content="Open source home automation that puts local control and privacy first."
-/>
-<meta
-  name="twitter:image"
-  content="https://www.home-assistant.io/images/default-social.png"
-/>

demo/src/html/index.html.template

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Home Assistant Demo</title>
-    <%= renderTemplate("../../../src/html/_header.html.template") %>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" href="/static/icons/favicon.ico" />
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -34,7 +35,33 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <%= renderTemplate("_social_meta.html.template") %>
+    <meta property="fb:app_id" content="338291289691179" />
+    <meta property="og:title" content="Home Assistant Demo" />
+    <meta property="og:site_name" content="Home Assistant" />
+    <meta property="og:url" content="https://demo.home-assistant.io/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      property="og:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@home_assistant" />
+
+    <meta name="twitter:title" content="Home Assistant" />
+    <meta
+      name="twitter:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      name="twitter:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+    <title>Home Assistant Demo</title>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -80,19 +107,29 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
+
     <ha-demo></ha-demo>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
+
+    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
+
     <script>
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
-        <% } %>
+      import("<%= latestDemoJS %>");
       window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5DemoJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5DemoJS %>");
+        <% } %>
       }
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {

demo/src/stubs/config_entries.ts

@@ -1,10 +1,11 @@
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS("config_entries/get", () => ({
+  hass.mockWS("config_entries/get", () => [
+    {
       entry_id: "co2signal",
       domain: "co2signal",
-    title: "Electricity Maps",
+      title: "CO2 Signal",
       source: "user",
       state: "loaded",
       supports_options: false,
@@ -14,5 +15,6 @@ export const mockConfigEntries = (hass: MockHomeAssistant) => {
       pref_disable_polling: false,
       disabled_by: null,
       reason: null,
-  }));
+    },
+  ]);
 };

demo/src/stubs/history.ts

@@ -1,19 +1,39 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { HistoryStates } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-const generateStateHistory = (
-  state: HassEntity,
-  deltas,
-  start_date: Date,
-  end_date: Date
-) => {
+interface HistoryQueryParams {
+  filter_entity_id: string;
+  end_time: string;
+}
+
+const parseQuery = <T>(queryString: string) => {
+  const query: any = {};
+  const items = queryString.split("&");
+  for (const item of items) {
+    const parts = item.split("=");
+    const key = decodeURIComponent(parts[0]);
+    const value = parts.length > 1 ? decodeURIComponent(parts[1]) : undefined;
+    query[key] = value;
+  }
+  return query as T;
+};
+
+const getTime = (minutesAgo) => {
+  const ts = new Date(Date.now() - minutesAgo * 60 * 1000);
+  return ts.toISOString();
+};
+
+const randomTimeAdjustment = (diff) => Math.random() * diff - diff / 2;
+
+const maxTime = 1440;
+
+const generateHistory = (state, deltas) => {
   const changes =
     typeof deltas[0] === "object"
       ? deltas
       : deltas.map((st) => ({ state: st }));
 
-  const timeDiff = (end_date.getTime() - start_date.getTime()) / changes.length;
+  const timeDiff = 900 / changes.length;
 
   return changes.map((change, index) => {
     let attributes;
@@ -27,13 +47,17 @@ const generateStateHistory = (
       attributes = { ...state.attributes, ...change.attributes };
     }
 
-    const time = start_date.getTime() + timeDiff * index;
+    const time =
+      index === 0
+        ? getTime(maxTime)
+        : getTime(maxTime - index * timeDiff + randomTimeAdjustment(timeDiff));
 
     return {
-      a: attributes,
-      s: change.state || state.state,
-      lc: time / 1000,
-      lu: time / 1000,
+      attributes,
+      entity_id: state.entity_id,
+      state: change.state || state.state,
+      last_changed: time,
+      last_updated: time,
     };
   });
 };
@@ -41,29 +65,15 @@ const generateStateHistory = (
 const incrementalUnits = ["clients", "queries", "ads"];
 
 export const mockHistory = (mockHass: MockHomeAssistant) => {
-  mockHass.mockWS(
-    "history/stream",
-    (
-      {
-        entity_ids,
-        start_time,
-        end_time,
-      }: {
-        entity_ids: string[];
-        start_time: string;
-        end_time?: string;
-      },
-      hass,
-      onChange
-    ) => {
-      const states: HistoryStates = {};
+  mockHass.mockAPI(
+    /history\/period\/.+/,
+    (hass, _method, path, _parameters) => {
+      const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
+      const entities = params.filter_entity_id.split(",");
 
-      const start = new Date(start_time);
-      const end = end_time ? new Date(end_time) : new Date();
-
-      for (const entityId of entity_ids) {
-        states[entityId] = [];
+      const results: HassEntity[][] = [];
 
+      for (const entityId of entities) {
         const state = hass.states[entityId];
 
         if (!state) {
@@ -71,12 +81,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         }
 
         if (!state.attributes.unit_of_measurement) {
-          states[entityId] = generateStateHistory(
-            state,
-            [state.state],
-            start,
-            end
-          );
+          results.push(generateHistory(state, [state.state]));
           continue;
         }
 
@@ -115,23 +120,17 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
             numberState - diff + Math.floor(Math.random() * 2 * diff);
         }
 
-        states[entityId] = generateStateHistory(
-          state,
-          Array.from({ length: statesToGenerate }, genFunc),
-          start,
-          end
+        results.push(
+          generateHistory(
+            {
+              entity_id: state.entity_id,
+              attributes: state.attributes,
+            },
+            Array.from({ length: statesToGenerate }, genFunc)
+          )
         );
       }
-
-      setTimeout(() => {
-        onChange?.({
-          states,
-          start_time: start,
-          end_time: end,
-        });
-      }, 1);
-
-      return () => {};
+      return results;
     }
   );
 };

demo/src/stubs/persistent_notification.ts

@@ -1,20 +1,16 @@
-import { PersistentNotificationMessage } from "../../../src/data/persistent_notification";
+import { PersistentNotification } from "../../../src/data/persistent_notification";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockPersistentNotification = (hass: MockHomeAssistant) => {
-  hass.mockWS("persistent_notification/subscribe", (_msg, _hass, onChange) => {
-    onChange!({
-      type: "added",
-      notifications: {
-        "demo-1": {
+  hass.mockWS("persistent_notification/get", () =>
+    Promise.resolve([
+      {
         created_at: new Date().toISOString(),
         message: "There was motion detected in the backyard.",
         notification_id: "demo-1",
         title: "Motion Detected!",
         status: "unread",
       },
-      },
-    } as PersistentNotificationMessage);
-    return () => {};
-  });
+    ] as PersistentNotification[])
+  );
 };

demo/src/stubs/recorder.ts

@@ -72,7 +72,6 @@ const generateSumStatistics = (
       min: null,
       max: null,
       last_reset: 0,
-      change: add,
       state: initValue + sum,
       sum,
     });
@@ -104,8 +103,8 @@ const generateCurvedStatistics = (
   let half = false;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const add = i * (Math.random() * maxDiff);
-    sum += add;
+    const add = Math.random() * maxDiff;
+    sum += i * add;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -113,7 +112,6 @@ const generateCurvedStatistics = (
       min: null,
       max: null,
       last_reset: 0,
-      change: add,
       state: initValue + sum,
       sum: metered ? sum : null,
     });

demo/webpack.config.js

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

gallery/rollup.config.js

@@ -1,5 +1,5 @@
-import rollup from "../build-scripts/rollup.cjs";
-import env from "../build-scripts/env.cjs";
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
 
 const config = rollup.createGalleryConfig({
   isProdBuild: env.isProdBuild(),
@@ -7,4 +7,4 @@ const config = rollup.createGalleryConfig({
   isStatsBuild: env.isStatsBuild(),
 });
 
-export default { ...config.inputOptions, output: config.outputOptions };
+module.exports = { ...config.inputOptions, output: config.outputOptions };

gallery/sidebar.js

@@ -1,4 +1,4 @@
-export default [
+module.exports = [
   {
     // This section has no header and so all page links are shown directly in the sidebar
     category: "concepts",
@@ -45,10 +45,6 @@ export default [
     header: "Users",
     pages: ["user-types", "configuration-menu"],
   },
-  {
-    category: "date-time",
-    header: "Date and Time",
-  },
   {
     category: "design.home-assistant.io",
     header: "About",

gallery/src/components/demo-cards.ts

@@ -1,3 +1,4 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html, css, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@@ -6,7 +7,6 @@ import "../../../src/components/ha-switch";
 import { HomeAssistant } from "../../../src/types";
 import "./demo-card";
 import type { DemoCardConfig } from "./demo-card";
-import "../ha-demo-options";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {
@@ -20,14 +20,20 @@ class DemoCards extends LitElement {
 
   render() {
     return html`
-      <ha-demo-options>
+      <app-toolbar>
+        <div class="filters">
           <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
+            <ha-switch
+              .checked=${this._showConfig}
+              @change=${this._showConfigToggled}
+            >
+            </ha-switch>
           </ha-formfield>
           <ha-formfield label="Dark theme">
             <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
           </ha-formfield>
-      </ha-demo-options>
+        </div>
+      </app-toolbar>
       <div id="container">
         <div class="cards">
           ${this.configs.map(
@@ -63,6 +69,12 @@ class DemoCards extends LitElement {
     demo-card {
       margin: 16px 16px 32px;
     }
+    app-toolbar {
+      background-color: var(--light-primary-color);
+    }
+    .filters {
+      margin-left: 60px;
+    }
     ha-formfield {
       margin-right: 16px;
     }

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

@@ -0,0 +1,93 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../src/components/ha-card";
+import "../../../src/dialogs/more-info/more-info-content";
+import "../../../src/state-summary/state-card-content";
+
+class DemoMoreInfo extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .root {
+          display: flex;
+        }
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
+        ha-card {
+          width: 352px;
+          padding: 20px 24px;
+        }
+        state-card-content {
+          display: block;
+          margin-bottom: 16px;
+        }
+        pre {
+          width: 400px;
+          margin: 0 16px;
+          overflow: auto;
+          color: var(--primary-text-color);
+        }
+        @media only screen and (max-width: 800px) {
+          .root {
+            flex-direction: column;
+          }
+          pre {
+            margin: 16px 0;
+          }
+        }
+      </style>
+      <div class="root">
+        <div id="card">
+          <ha-card>
+            <state-card-content
+              state-obj="[[_stateObj]]"
+              hass="[[hass]]"
+              in-dialog
+            ></state-card-content>
+
+            <more-info-content
+              hass="[[hass]]"
+              state-obj="[[_stateObj]]"
+            ></more-info-content>
+          </ha-card>
+        </div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entityId: String,
+      showConfig: Boolean,
+      _stateObj: {
+        type: Object,
+        computed: "_getState(entityId, hass.states)",
+      },
+    };
+  }
+
+  _getState(entityId, states) {
+    return states[entityId];
+  }
+
+  _jsonEntity(stateObj) {
+    // We are caching some things on stateObj
+    // (it sucks, we will remove in the future)
+    const tmp = {};
+    Object.keys(stateObj).forEach((key) => {
+      if (key[0] !== "_") {
+        tmp[key] = stateObj[key];
+      }
+    });
+    return JSON.stringify(tmp, null, 2);
+  }
+}
+
+customElements.define("demo-more-info", DemoMoreInfo);

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

@@ -1,93 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../src/components/ha-card";
-import "../../../src/dialogs/more-info/more-info-content";
-import "../../../src/state-summary/state-card-content";
-import "../ha-demo-options";
-import { HomeAssistant } from "../../../src/types";
-
-@customElement("demo-more-info")
-class DemoMoreInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public entityId!: string;
-
-  @property() public showConfig!: boolean;
-
-  render() {
-    const state = this._getState(this.entityId, this.hass.states);
-    return html`
-      <div class="root">
-        <div id="card">
-          <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
-
-            <more-info-content
-              .hass=${this.hass}
-              .stateObj=${state}
-            ></more-info-content>
-          </ha-card>
-        </div>
-        ${this.showConfig ? html`<pre>${this._jsonEntity(state)}</pre>` : ""}
-      </div>
-    `;
-  }
-
-  private _getState(entityId, states) {
-    return states[entityId];
-  }
-
-  private _jsonEntity(stateObj) {
-    // We are caching some things on stateObj
-    // (it sucks, we will remove in the future)
-    const tmp = {};
-    Object.keys(stateObj).forEach((key) => {
-      if (key[0] !== "_") {
-        tmp[key] = stateObj[key];
-      }
-    });
-    return JSON.stringify(tmp, null, 2);
-  }
-
-  static styles = css`
-    .root {
-      display: flex;
-    }
-    #card {
-      max-width: 400px;
-      width: 100vw;
-    }
-    ha-card {
-      width: 352px;
-      padding: 20px 24px;
-    }
-    state-card-content {
-      display: block;
-      margin-bottom: 16px;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .root {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info": DemoMoreInfo;
-  }
-}

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

@@ -0,0 +1,83 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import "./demo-more-info";
+
+class DemoMoreInfos extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
+        .cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        demo-more-info {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+        ha-formfield {
+          margin-right: 16px;
+        }
+      </style>
+      <app-toolbar>
+        <div class="filters">
+          <ha-formfield label="Show entities">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
+        </div>
+      </app-toolbar>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[entities]]">
+            <demo-more-info
+              entity-id="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-more-info>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      entities: Array,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
+}
+
+customElements.define("demo-more-infos", DemoMoreInfos);

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

@@ -1,87 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import "./demo-more-info";
-import "../ha-demo-options";
-import { HomeAssistant } from "../../../src/types";
-
-@customElement("demo-more-infos")
-class DemoMoreInfos extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public entities!: [];
-
-  @property({ attribute: false }) _showConfig: boolean = false;
-
-  render() {
-    return html`
-      <ha-demo-options>
-        <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Dark theme">
-          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-        </ha-formfield>
-      </ha-demo-options>
-      <div id="container">
-        <div class="cards">
-          ${this.entities.map(
-            (item) =>
-              html`<demo-more-info
-                .entityId=${item}
-                .showConfig=${this._showConfig}
-                .hass=${this.hass}
-              ></demo-more-info>`
-          )}
-        </div>
-      </div>
-    `;
-  }
-
-  static styles = css`
-    #container {
-      min-height: calc(100vh - 128px);
-      background: var(--primary-background-color);
-    }
-    .cards {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-    demo-more-info {
-      margin: 16px 16px 32px;
-    }
-    ha-formfield {
-      margin-right: 16px;
-    }
-  `;
-
-  _showConfigToggled(ev) {
-    this._showConfig = ev.target.checked;
-  }
-
-  _darkThemeToggled(ev) {
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector("#container"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: false,
-        theme: "default",
-      },
-      "default",
-      {
-        dark: ev.target.checked,
-      }
-    );
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-infos": DemoMoreInfos;
-  }
-}

gallery/src/data/date-options.ts

@@ -1,24 +0,0 @@
-import type { ControlSelectOption } from "../../../src/components/ha-control-select";
-
-export const timeOptions: ControlSelectOption[] = [
-  {
-    value: "now",
-    label: "Now",
-  },
-  {
-    value: "00:15:30",
-    label: "12:15:30 AM",
-  },
-  {
-    value: "06:15:30",
-    label: "06:15:30 AM",
-  },
-  {
-    value: "12:15:30",
-    label: "12:15:30 PM",
-  },
-  {
-    value: "18:15:30",
-    label: "06:15:30 PM",
-  },
-];

gallery/src/entrypoint.js

@@ -1,3 +1,5 @@
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "./ha-gallery";

gallery/src/ha-demo-options.ts

@@ -1,47 +0,0 @@
-import "@material/mwc-drawer";
-import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
-import { haStyle } from "../../src/resources/styles";
-import "./components/page-description";
-
-@customElement("ha-demo-options")
-class HaDemoOptions extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        display: block;
-        background-color: var(--light-primary-color);
-        margin-left: 60px
-        margin-right: 60px;
-        display: var(--layout-horizontal_-_display);
-        -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-        -webkit-flex-direction: var(
-          --layout-horizontal_-_-webkit-flex-direction
-        );
-        flex-direction: var(--layout-horizontal_-_flex-direction);
-        -ms-flex-align: var(--layout-center_-_-ms-flex-align);
-        -webkit-align-items: var(--layout-center_-_-webkit-align-items);
-        align-items: var(--layout-center_-_align-items);
-        position: relative;
-        height: 64px;
-        padding: 0 16px;
-        pointer-events: none;
-        font-size: 20px;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-demo-options": HaDemoOptions;
-  }
-}

gallery/src/html/index.html.template

@@ -8,9 +8,8 @@
     />
     <meta name="theme-color" content="#2157BC" />
     <title>Home Assistant Design</title>
-    <% for (const entry of latestEntryJS) { %>
-      <script type="module" src="<%= entry %>"></script>
-    <% } %>
+
+    <script type="module" src="<%= latestGalleryJS %>"></script>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -4,63 +4,53 @@ subtitle: The difference between remove/delete and add/create.
 ---
 
 # Remove vs Delete
-
 Remove and Delete are quite similar, but can be frustrating if used inconsistently.
 
 ## Remove
-
 Take away and set aside, but kept in existence.
 
 For example:
-
-- Removing a user's permission
-- Removing a user from a group
-- Removing links between items
-- Removing a widget
-- Removing a link
-- Removing an item from a cart
+* Removing a user's permission
+* Removing a user from a group
+* Removing links between items
+* Removing a widget
+* Removing a link
+* Removing an item from a cart
 
 ## Delete
-
 Erase, rendered nonexistent or nonrecoverable.
 
 For example:
-
-- Deleting a field
-- Deleting a value in a field
-- Deleting a task
-- Deleting a group
-- Deleting a permission
-- Deleting a calendar event
+* Deleting a field
+* Deleting a value in a field
+* Deleting a task
+* Deleting a group
+* Deleting a permission
+* Deleting a calendar event
 
 # Add vs Create
-
 In most cases, Create can be paired with Delete, and Add can be paired with Remove.
 
 ## Add
-
 An already-exisiting item.
 
 For example:
-
-- Adding a permission to a user
-- Adding a user to a group
-- Adding links between items
-- Adding a widget
-- Adding a link
-- Adding an item to a cart
+* Adding a permission to a user
+* Adding a user to a group
+* Adding links between items
+* Adding a widget
+* Adding a link
+* Adding an item to a cart
 
 ## Create
-
 Something made from scratch.
 
 For example:
-
-- Creating a new field
-- Creating a new value in a field
-- Creating a new task
-- Creating a new group
-- Creating a new permission
-- Creating a new calendar event
+* Creating a new field
+* Creating a new value in a field
+* Creating a new task
+* Creating a new group
+* Creating a new permission
+* Creating a new calendar event
 
 Based on this is [UX magazine article](https://uxmag.com/articles/ui-copy-remove-vs-delete2-banner).

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

@@ -162,7 +162,6 @@ export class DemoAutomationDescribeAction extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -63,7 +63,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
         <div class="condition">
           <span>
             ${this._condition
-              ? describeCondition(this._condition, this.hass, [])
+              ? describeCondition(this._condition, this.hass)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -76,7 +76,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any, this.hass, [])}</span>
+              <span>${describeCondition(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -89,7 +89,6 @@ export class DemoAutomationDescribeCondition extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -40,9 +40,7 @@ const triggers = [
   },
   { platform: "sun", event: "sunset" },
   { platform: "time_pattern" },
-  { platform: "time_pattern", hours: "*", minutes: "/5", seconds: "10" },
   { platform: "webhook" },
-  { platform: "persistent_notification" },
   {
     platform: "zone",
     entity_id: "person.person",
@@ -52,11 +50,6 @@ const triggers = [
   { platform: "tag" },
   { platform: "time", at: "15:32" },
   { platform: "template" },
-  { platform: "conversation", command: "Turn on the lights" },
-  {
-    platform: "conversation",
-    command: ["Turn on the lights", "Turn the lights on"],
-  },
   { platform: "event", event_type: "homeassistant_started" },
 ];
 
@@ -81,7 +74,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         <div class="trigger">
           <span>
             ${this._trigger
-              ? describeTrigger(this._trigger, this.hass, [])
+              ? describeTrigger(this._trigger, this.hass)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -93,7 +86,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any, this.hass, [])}</span>
+              <span>${describeTrigger(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -106,7 +99,6 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -85,7 +85,8 @@ class DemoHaAutomationEditorAction extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
+              (slot) =>
+                html`
                   <ha-automation-action
                     slot=${slot}
                     .hass=${this.hass}

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

@@ -121,7 +121,8 @@ class DemoHaAutomationEditorCondition extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
+              (slot) =>
+                html`
                   <ha-automation-condition
                     slot=${slot}
                     .hass=${this.hass}

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

@@ -19,13 +19,11 @@ import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trig
 import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
 import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
 import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
-import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
 import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
 import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
 import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
 
 const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
   {
@@ -74,16 +72,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
   },
 
-  {
-    name: "Persistent Notification",
-    triggers: [
-      {
-        platform: "persistent_notification",
-        ...HaPersistentNotificationTrigger.defaultConfig,
-      },
-    ],
-  },
-
   {
     name: "Zone",
     triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
@@ -113,16 +101,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     name: "Device Trigger",
     triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
   },
-  {
-    name: "Sentence",
-    triggers: [
-      { platform: "conversation", ...HaConversationTrigger.defaultConfig },
-      {
-        platform: "conversation",
-        command: ["Turn on the lights", "Turn the lights on"],
-      },
-    ],
-  },
 ];
 
 @customElement("demo-automation-editor-trigger")
@@ -167,7 +145,8 @@ class DemoHaAutomationEditorTrigger extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
+              (slot) =>
+                html`
                   <ha-automation-trigger
                     slot=${slot}
                     .hass=${this.hass}

gallery/src/pages/brand/logo.markdown

@@ -10,6 +10,7 @@ As a community, we are proud of our logo. Follow these guidelines to ensure it a
 
 ![Logo](/images/logo.png)
 
+
 ## Using the icon
 
 Our icon is a shorter and most used version of our logo. The icon can exist without the wordmark, the wordmark should never exist without the icon.

gallery/src/pages/components/ha-alert.markdown

@@ -11,7 +11,6 @@ subtitle: An alert displays a short, important message in a way that attracts th
 </style>
 
 # Alert `<ha-alert>`
-
 The alert offers four severity levels that set a distinctive icon and color.
 
 <ha-alert alert-type="error">
@@ -36,46 +35,38 @@ The alert offers four severity levels that set a distinctive icon and color.
 2. [Implementation](#implementation)
 
 ### Resources
-
 | Type           | Link                             | Status    |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+|----------------|----------------------------------|-----------|
 | Design         | <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Home Assistant DesignKit</a> (Figma) | Available |
 | Implementation | <a href="https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts" rel="noopener noreferrer" target="_blank">Web Component</a> (GitHub)            | Available |
 
 ## Guidelines
-
 ### Usage
-
 An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 
 ### Anatomy
-
-_Documentation coming soon_
+*Documentation coming soon*
 
 ### Error alert
-
 Error alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Warning alert
-
 Warning alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Info alert
-
 Info alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Success alert
-
 Success alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Placement
 
-### Accessibility
 
+### Accessibility
 (WAI-ARIA: [https://www.w3.org/TR/wai-aria-practices/#alert](https://www.w3.org/TR/wai-aria-practices/#alert))
 
 When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.
@@ -87,7 +78,6 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 ## Implementation
 
 ### Example Usage
-
 **Alert type**
 
 <ha-alert alert-type="error">
@@ -106,12 +96,17 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
   This is an success alert — check it out!
 </ha-alert>
 
+
 ```html
-<ha-alert alert-type="error"> This is an error alert — check it out! </ha-alert>
+<ha-alert alert-type="error">
+  This is an error alert — check it out!
+</ha-alert>
 <ha-alert alert-type="warning">
   This is a warning alert — check it out!
 </ha-alert>
-<ha-alert alert-type="info"> This is an info alert — check it out! </ha-alert>
+<ha-alert alert-type="info">
+  This is an info alert — check it out!
+</ha-alert>
 <ha-alert alert-type="success">
   This is a success alert — check it out!
 </ha-alert>
@@ -159,14 +154,13 @@ The `title ` option should not be used without a description.
 
 **Slotted icon**
 
-_Documentation coming soon_
+*Documentation coming soon*
 
 ### API
-
 **Properties/Attributes**
 
 | Name        | Type    | Default | Description                                           |
-| ----------- | ------- | ------- | ----------------------------------------------------- |
+|-------------|---------|---------|-------------------------------------------------------|
 | title       | string  | ``      | Title to display.                                     |
 | alertType   | string  | `info`  | Severity level that set a distinctive icon and color. |
 | dismissable | boolean | `false` | Gives the option to close the alert.                  |
@@ -176,8 +170,8 @@ _Documentation coming soon_
 
 **Events**
 
-_Documentation coming soon_
+*Documentation coming soon*
 
 **CSS Custom Properties**
 
-_Documentation coming soon_
+*Documentation coming soon*