Add app alias

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

.dockerignore

@@ -1,4 +0,0 @@
-node_modules
-hass_frontend
-hass_frontend_es5
-.git

.eslintrc.json

@@ -66,11 +66,7 @@
     "import/prefer-default-export": 0,
     "import/no-unresolved": 0,
     "import/no-cycle": 0,
-    "import/extensions": [
-      2,
-      "ignorePackages",
-      { "ts": "never", "js": "never" }
-    ],
+    "import/extensions": 0,
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "object-curly-newline": 0,
     "default-case": 0,

.github/workflows/release-drafter.yaml

@@ -0,0 +1,14 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CODE_OF_CONDUCT.md

@@ -2,79 +2,139 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
 * Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [safety@home-assistant.io][email]. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
+reported to the community leaders responsible for enforcement at
+[safety@home-assistant.io][email] or by using the report/flag feature of
+the medium used. All complaints will be reviewed and investigated promptly and
+fairly.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available [here][version].
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available [here][version].
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder][mozilla].
 
 ## Adoption
 
-This Code of Conduct was first adopted January 21st, 2017 and announced in [this][coc-blog] blog post.
+This Code of Conduct was first adopted January 21st, 2017 and announced in
+[this][coc-blog] blog post and has been updated on May 25th, 2020 to version
+2.0 of the [Contributor Covenant][homepage] as announced in [this][coc2-blog]
+blog post.
 
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+For answers to common questions about this code of conduct, see the FAQ at
+<https://www.contributor-covenant.org/faq>. Translations are available at
+<https://www.contributor-covenant.org/translations>.
+
+[coc-blog]: /blog/2017/01/21/home-assistant-governance/
+[coc2-blog]: /blog/2020/05/25/code-of-conduct-updated/
 [email]: mailto:safety@home-assistant.io
-[coc-blog]: https://home-assistant.io/blog/2017/01/21/home-assistant-governance/
+[homepage]: http://contributor-covenant.org
+[mozilla]: https://github.com/mozilla/diversity
+[version]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html

Dockerfile

@@ -1,31 +0,0 @@
-FROM node:8.11.1-alpine
-
-# install yarn
-ENV PATH /root/.yarn/bin:$PATH
-
-## Install/force base tools
-RUN apk update \
-  && apk add make g++ curl bash binutils tar git python2 python3 \
-  && rm -rf /var/cache/apk/* \
-  && /bin/bash \
-  && touch ~/.bashrc
-
-## Install yarn
-RUN curl -o- -L https://yarnpkg.com/install.sh | bash
-
-## Setup the project
-RUN mkdir -p /frontend
-
-WORKDIR /frontend
-
-COPY package.json yarn.lock ./
-
-RUN yarn install --frozen-lockfile
-
-COPY . .
-
-COPY script/docker_entrypoint.sh /usr/bin/docker_entrypoint.sh
-
-RUN chmod +x /usr/bin/docker_entrypoint.sh
-
-CMD [ "docker_entrypoint.sh" ]

README.md

@@ -6,12 +6,12 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
-- [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
+- [Frontend development instructions](https://developers.home-assistant.io/docs/frontend/development/)
 
 ## Development
 
 - Initial setup: `script/setup`
-- Development: [Instructions](https://developers.home-assistant.io/docs/en/frontend_development.html)
+- Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
 - Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
@@ -22,15 +22,6 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
 
-### Docker environment
-
-It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
-
-- `sh ./script/docker_run.sh build` Build all the project with one command
-- `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the _classic environment_) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
-
-**Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
-
 ## License
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

build-scripts/babel.js

@@ -1,39 +0,0 @@
-const options = ({ latestBuild }) => ({
-  presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
-    require("@babel/preset-typescript").default,
-  ].filter(Boolean),
-  plugins: [
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      require("@babel/plugin-proposal-decorators").default,
-      { decoratorsBeforeExport: true },
-    ],
-    [
-      require("@babel/plugin-proposal-class-properties").default,
-      { loose: true },
-    ],
-  ],
-});
-
-module.exports.babelLoaderConfig = ({ latestBuild }) => {
-  if (latestBuild === undefined) {
-    throw Error("latestBuild not defined for babel loader config");
-  }
-  return {
-    test: /\.m?js$|\.tsx?$/,
-    exclude: [require.resolve("@mdi/js/mdi.js"), require.resolve("hls.js")],
-    use: {
-      loader: "babel-loader",
-      options: options({ latestBuild }),
-    },
-  };
-};

build-scripts/bundle.js

@@ -0,0 +1,196 @@
+const path = require("path");
+const env = require("./env.js");
+const paths = require("./paths.js");
+
+// Files from NPM Packages that should not be imported
+module.exports.ignorePackages = ({ latestBuild }) => [
+  // Bloats bundle and it's not used.
+  path.resolve(require.resolve("moment"), "../locale"),
+  // Part of yaml.js and only used for !!js functions that we don't use
+  require.resolve("esprima"),
+];
+
+// Files from NPM packages that we should replace with empty file
+module.exports.emptyPackages = ({ latestBuild }) =>
+  [
+    // Contains all color definitions for all material color sets.
+    // We don't use it
+    require.resolve("@polymer/paper-styles/color.js"),
+    require.resolve("@polymer/paper-styles/default-theme.js"),
+    // Loads stuff from a CDN
+    require.resolve("@polymer/font-roboto/roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    // Compatibility not needed for latest builds
+    latestBuild &&
+      // wrapped in require.resolve so it blows up if file no longer exists
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
+      ),
+    // This polyfill is loaded in workers to support ES5, filter it out.
+    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
+  ].filter(Boolean);
+
+module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
+  __DEV__: !isProdBuild,
+  __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+  __VERSION__: JSON.stringify(env.version()),
+  __DEMO__: false,
+  __BACKWARDS_COMPAT__: false,
+  __STATIC_PATH__: "/static/",
+  "process.env.NODE_ENV": JSON.stringify(
+    isProdBuild ? "production" : "development"
+  ),
+  ...defineOverlay,
+});
+
+module.exports.terserOptions = (latestBuild) => ({
+  safari10: true,
+  ecma: latestBuild ? undefined : 5,
+  output: { comments: false },
+});
+
+module.exports.babelOptions = ({ latestBuild }) => ({
+  babelrc: false,
+  presets: [
+    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
+    require("@babel/preset-typescript").default,
+  ].filter(Boolean),
+  plugins: [
+    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      { loose: true, useBuiltIns: true },
+    ],
+    // Only support the syntax, Webpack will handle it.
+    "@babel/syntax-dynamic-import",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    [
+      require("@babel/plugin-proposal-decorators").default,
+      { decoratorsBeforeExport: true },
+    ],
+    [
+      require("@babel/plugin-proposal-class-properties").default,
+      { loose: true },
+    ],
+  ],
+});
+
+// Are already ES5, cause warnings when babelified.
+module.exports.babelExclude = () => [
+  require.resolve("@mdi/js/mdi.js"),
+  require.resolve("hls.js"),
+];
+
+const outputPath = (outputRoot, latestBuild) =>
+  path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
+
+const publicPath = (latestBuild, root = "") =>
+  latestBuild ? `${root}/frontend_latest/` : `${root}/frontend_es5/`;
+
+/*
+BundleConfig {
+  // Object with entrypoints that need to be bundled
+  entry: { [name: string]: pathToFile },
+  // Folder where bundled files need to be written
+  outputPath: string,
+  // absolute url-path where bundled files can be found
+  publicPath: string,
+  // extra definitions that we need to replace in source
+  defineOverlay: {[name: string]: value },
+  // if this is a production build
+  isProdBuild: boolean,
+  // If we're targeting latest browsers
+  latestBuild: boolean,
+  // If we're doing a stats build (create nice chunk names)
+  isStatsBuild: boolean,
+  // Names of entrypoints that should not be hashed
+  dontHash: Set<string>
+}
+*/
+
+module.exports.config = {
+  app({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      entry: {
+        service_worker: "./src/entrypoints/service_worker.ts",
+        app: "./src/entrypoints/app.ts",
+        authorize: "./src/entrypoints/authorize.ts",
+        onboarding: "./src/entrypoints/onboarding.ts",
+        core: "./src/entrypoints/core.ts",
+        "custom-panel": "./src/entrypoints/custom-panel.ts",
+      },
+      outputPath: outputPath(paths.app_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
+  demo({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      entry: {
+        main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.demo_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
+  cast({ isProdBuild, latestBuild }) {
+    const entry = {
+      launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
+    };
+
+    if (latestBuild) {
+      entry.receiver = path.resolve(
+        paths.cast_dir,
+        "src/receiver/entrypoint.ts"
+      );
+    }
+
+    return {
+      entry,
+      outputPath: outputPath(paths.cast_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      defineOverlay: {
+        __BACKWARDS_COMPAT__: true,
+      },
+    };
+  },
+
+  hassio({ isProdBuild, latestBuild }) {
+    return {
+      entry: {
+        entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.hassio_output_root, latestBuild),
+      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
+      isProdBuild,
+      latestBuild,
+      dontHash: new Set(["entrypoint"]),
+    };
+  },
+
+  gallery({ isProdBuild, latestBuild }) {
+    return {
+      entry: {
+        entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
+      },
+      outputPath: outputPath(paths.gallery_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+    };
+  },
+};

build-scripts/env.js

@@ -3,8 +3,13 @@ const path = require("path");
 const paths = require("./paths.js");
 
 module.exports = {
+  useRollup() {
+    return process.env.ROLLUP === "1";
+  },
   isProdBuild() {
-    return process.env.NODE_ENV === "production";
+    return (
+      process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
+    );
   },
   isStatsBuild() {
     return process.env.STATS === "1";

build-scripts/gulp/app.js

@@ -1,7 +1,7 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
-const envVars = require("../env");
+const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
@@ -11,6 +11,7 @@ require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-app",
@@ -26,8 +27,8 @@ gulp.task(
       "gen-index-app-dev",
       "build-translations"
     ),
-    "copy-static",
-    "webpack-watch-app"
+    "copy-static-app",
+    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
   )
 );
 
@@ -39,10 +40,10 @@ gulp.task(
     },
     "clean",
     gulp.parallel("gen-icons-json", "build-translations"),
-    "copy-static",
-    "webpack-prod-app",
+    "copy-static-app",
+    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-app"]),
+    (env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -1,11 +1,14 @@
 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",
@@ -17,7 +20,8 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-dev-server-cast"
+    "gen-index-cast-dev",
+    env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
 
@@ -31,7 +35,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-prod-cast",
+    env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"
   )
 );

build-scripts/gulp/clean.js

@@ -1,39 +1,36 @@
 const del = require("del");
 const gulp = require("gulp");
-const config = require("../paths");
+const paths = require("../paths");
 require("./translations");
 
 gulp.task(
   "clean",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.root, config.build_dir]);
+    return del([paths.app_output_root, paths.build_dir]);
   })
 );
 
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.demo_root, config.build_dir]);
+    return del([paths.demo_output_root, paths.build_dir]);
   })
 );
 
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.cast_root, config.build_dir]);
+    return del([paths.cast_output_root, paths.build_dir]);
   })
 );
 
-gulp.task(
-  "clean-hassio",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.hassio_root, config.build_dir]);
-  })
-);
+gulp.task("clean-hassio", function cleanOutputAndBuildDir() {
+  return del([paths.hassio_output_root, paths.build_dir]);
+});
 
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.gallery_root, config.build_dir]);
+    return del([paths.gallery_output_root, paths.build_dir]);
   })
 );

build-scripts/gulp/compress.js

@@ -6,38 +6,40 @@ const merge = require("merge-stream");
 const path = require("path");
 const paths = require("../paths");
 
+const zopfliOptions = { threshold: 150 };
+
 gulp.task("compress-app", function compressApp() {
   const jsLatest = gulp
-    .src(path.resolve(paths.output, "**/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output));
+    .src(path.resolve(paths.app_output_latest, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_latest));
 
   const jsEs5 = gulp
-    .src(path.resolve(paths.output_es5, "**/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output_es5));
+    .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.static, "polyfills/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+    .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.static, "translations/**/*.json"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+    .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.static, "mdi/*.json"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "mdi")));
+    .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_root, "**/*.js"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(paths.hassio_root));
+    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.hassio_output_root));
 });

build-scripts/gulp/demo.js

@@ -1,6 +1,8 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons-json.js");
@@ -8,6 +10,7 @@ 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-index-demo-dev", "build-translations"),
     "copy-static-demo",
-    "webpack-dev-server-demo"
+    env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
 );
 
@@ -34,7 +37,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-demo",
-    "webpack-prod-demo",
+    env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"
   )
 );

build-scripts/gulp/entry-html.js

@@ -6,31 +6,36 @@ const fs = require("fs-extra");
 const path = require("path");
 const template = require("lodash.template");
 const minify = require("html-minifier").minify;
-const config = require("../paths.js");
+const paths = require("../paths.js");
+const env = require("../env.js");
 
 const templatePath = (tpl) =>
-  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
 
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   const compiled = template(readFile(pathFunc(pth)));
-  return compiled({ ...data, renderTemplate });
+  return compiled({
+    ...data,
+    useRollup: env.useRollup(),
+    renderTemplate,
+  });
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderCastTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderGalleryTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const minifyHtml = (content) =>
@@ -48,29 +53,36 @@ gulp.task("gen-pages-dev", (done) => {
     const content = renderTemplate(page, {
       latestPageJS: `/frontend_latest/${page}.js`,
 
-      es5Compatibility: "/frontend_es5/compatibility.js",
       es5PageJS: `/frontend_es5/${page}.js`,
     });
 
-    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      content
+    );
   }
   done();
 });
 
 gulp.task("gen-pages-prod", (done) => {
-  const latestManifest = require(path.resolve(config.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "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`],
 
-      es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
     });
 
     fs.outputFileSync(
-      path.resolve(config.root, `${page}.html`),
+      path.resolve(paths.app_output_root, `${page}.html`),
       minifyHtml(content)
     );
   }
@@ -85,32 +97,39 @@ gulp.task("gen-index-app-dev", (done) => {
     latestCoreJS: "/frontend_latest/core.js",
     latestCustomPanelJS: "/frontend_latest/custom-panel.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     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(config.root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
   done();
 });
 
 gulp.task("gen-index-app-prod", (done) => {
-  const latestManifest = require(path.resolve(config.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  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"],
 
-    es5Compatibility: es5Manifest["compatibility.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(config.root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.app_output_root, "index.html"),
+    minified
+  );
   done();
 });
 
@@ -119,7 +138,7 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestReceiverJS: "/frontend_latest/receiver.js",
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -127,14 +146,17 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  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(config.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   done();
@@ -142,11 +164,11 @@ gulp.task("gen-index-cast-dev", (done) => {
 
 gulp.task("gen-index-cast-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.cast_output,
+    paths.cast_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.cast_output_es5,
+    paths.cast_output_es5,
     "manifest.json"
   ));
 
@@ -154,7 +176,7 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestReceiverJS: latestManifest["receiver.js"],
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -162,14 +184,17 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  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(config.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   done();
@@ -181,32 +206,36 @@ gulp.task("gen-index-demo-dev", (done) => {
   const content = renderDemoTemplate("index", {
     latestDemoJS: "/frontend_latest/main.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5DemoJS: "/frontend_es5/main.js",
   });
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-demo-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.demo_output,
+    paths.demo_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.demo_output_es5,
+    paths.demo_output_es5,
     "manifest.json"
   ));
   const content = renderDemoTemplate("index", {
     latestDemoJS: latestManifest["main.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    minified
+  );
   done();
 });
 
@@ -217,13 +246,16 @@ gulp.task("gen-index-gallery-dev", (done) => {
     latestGalleryJS: "./frontend_latest/entrypoint.js",
   });
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-gallery-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.gallery_output,
+    paths.gallery_output_latest,
     "manifest.json"
   ));
   const content = renderGalleryTemplate("index", {
@@ -231,6 +263,9 @@ gulp.task("gen-index-gallery-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    minified
+  );
   done();
 });

build-scripts/gulp/gallery.js

@@ -1,6 +1,8 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons-json.js");
@@ -8,6 +10,7 @@ require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-gallery",
@@ -20,7 +23,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    "webpack-dev-server-gallery"
+    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
   )
 );
 
@@ -34,7 +37,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
-    "webpack-prod-gallery",
+    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
     "gen-index-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -36,11 +36,13 @@ function copyMdiIcons(staticDir) {
 function copyPolyfills(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
-  // Web Component polyfills and adapters
+  // For custom panels using ES5 builds that don't use Babel 7+
   copyFileDir(
     npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
     staticPath("polyfills/")
   );
+
+  // Web Component polyfills and adapters
   copyFileDir(
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
     staticPath("polyfills/")
@@ -51,6 +53,12 @@ function copyPolyfills(staticDir) {
   );
 }
 
+function copyLoaderJS(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
+  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
+}
+
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
@@ -72,17 +80,17 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
-  const staticDir = paths.static;
+gulp.task("copy-translations-app", async () => {
+  const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
-  done();
 });
 
-gulp.task("copy-static", (done) => {
-  const staticDir = paths.static;
+gulp.task("copy-static-app", async () => {
+  const staticDir = paths.app_output_static;
   // Basic static files
-  fs.copySync(polyPath("public"), paths.root);
+  fs.copySync(polyPath("public"), paths.app_output_root);
 
+  copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
@@ -90,48 +98,50 @@ gulp.task("copy-static", (done) => {
 
   // Panel assets
   copyMapPanel(staticDir);
-  done();
 });
 
-gulp.task("copy-static-demo", (done) => {
+gulp.task("copy-static-demo", async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
-    path.resolve(paths.demo_root, "static")
+    path.resolve(paths.demo_output_root, "static")
   );
   // Copy demo static files
-  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
 
-  copyPolyfills(paths.demo_static);
-  copyMapPanel(paths.demo_static);
-  copyFonts(paths.demo_static);
-  copyTranslations(paths.demo_static);
-  copyMdiIcons(paths.demo_static);
-  done();
+  copyLoaderJS(paths.demo_output_static);
+  copyPolyfills(paths.demo_output_static);
+  copyMapPanel(paths.demo_output_static);
+  copyFonts(paths.demo_output_static);
+  copyTranslations(paths.demo_output_static);
+  copyMdiIcons(paths.demo_output_static);
 });
 
-gulp.task("copy-static-cast", (done) => {
+gulp.task("copy-static-cast", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.cast_static);
+  fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
-  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_root);
+  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
 
-  copyMapPanel(paths.cast_static);
-  copyFonts(paths.cast_static);
-  copyTranslations(paths.cast_static);
-  copyMdiIcons(paths.cast_static);
-  done();
+  copyLoaderJS(paths.cast_output_static);
+  copyPolyfills(paths.cast_output_static);
+  copyMapPanel(paths.cast_output_static);
+  copyFonts(paths.cast_output_static);
+  copyTranslations(paths.cast_output_static);
+  copyMdiIcons(paths.cast_output_static);
 });
 
-gulp.task("copy-static-gallery", (done) => {
+gulp.task("copy-static-gallery", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  fs.copySync(polyPath("public/static"), paths.gallery_output_static);
   // Copy gallery static files
-  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+  fs.copySync(
+    path.resolve(paths.gallery_dir, "public"),
+    paths.gallery_output_root
+  );
 
-  copyMapPanel(paths.gallery_static);
-  copyFonts(paths.gallery_static);
-  copyTranslations(paths.gallery_static);
-  copyMdiIcons(paths.gallery_static);
-  done();
+  copyMapPanel(paths.gallery_output_static);
+  copyFonts(paths.gallery_output_static);
+  copyTranslations(paths.gallery_output_static);
+  copyMdiIcons(paths.gallery_output_static);
 });

build-scripts/gulp/hassio.js

@@ -1,11 +1,33 @@
 const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
 
-const envVars = require("../env");
+const env = require("../env");
+const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
+require("./rollup.js");
+
+async function writeEntrypointJS() {
+  // We ship two builds and we need to do feature detection on what version to load.
+  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  fs.writeFileSync(
+    path.resolve(paths.hassio_output_root, "entrypoint.js"),
+    `
+try {
+  new Function("import('${paths.hassio_publicPath}/frontend_latest/entrypoint.js')")();
+} catch (err) {
+  var el = document.createElement('script');
+  el.src = '${paths.hassio_publicPath}/frontend_es5/entrypoint.js';
+  document.body.appendChild(el);
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}
 
 gulp.task(
   "develop-hassio",
@@ -15,7 +37,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-watch-hassio"
+    writeEntrypointJS,
+    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
 
@@ -27,8 +50,9 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-prod-hassio",
+    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
+    writeEntrypointJS,
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-hassio"])
+    (env.isTest() ? [] : ["compress-hassio"])
   )
 );

build-scripts/gulp/rollup.js

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

build-scripts/gulp/service-worker.js

@@ -9,7 +9,7 @@ const workboxBuild = require("workbox-build");
 const sourceMapUrl = require("source-map-url");
 const paths = require("../paths.js");
 
-const swDest = path.resolve(paths.root, "service_worker.js");
+const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
 const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
 
@@ -19,6 +19,8 @@ gulp.task("gen-service-worker-app-dev", (done) => {
 console.debug('Service worker disabled in development');
 
 self.addEventListener('install', (event) => {
+  // This will activate the dev service worker,
+  // removing any prod service worker the dev might have running
   self.skipWaiting();
 });
   `
@@ -27,17 +29,46 @@ self.addEventListener('install', (event) => {
 });
 
 gulp.task("gen-service-worker-app-prod", async () => {
+  // Read bundled source file
+  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"
+  );
+
+  // Delete old file from frontend_latest so manifest won't pick it up
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js"]
+  );
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js.map"]
+  );
+
+  // Remove ES5
+  const bundleManifestES5 = 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"]
+  );
+
   const workboxManifest = await workboxBuild.getManifest({
     // Files that mach this pattern will be considered unique and skip revision check
     // ignore JS files + translation files
     dontCacheBustURLsMatching: /(frontend_latest\/.+|static\/translations\/.+)/,
 
-    globDirectory: paths.root,
+    globDirectory: paths.app_output_root,
     globPatterns: [
       "frontend_latest/*.js",
       // Cache all English translations because we catch them as fallback
       // Using pattern to match hash instead of * to avoid caching en-GB
-      "static/translations/**/en-+([a-f0-9]).json",
+      // 'v' added as valid hash letter because in dev we hash with 'dev'
+      "static/translations/**/en-+([a-fv0-9]).json",
       // Icon shown on splash screen
       "static/icons/favicon-192x192.png",
       "static/icons/favicon.ico",
@@ -53,20 +84,6 @@ gulp.task("gen-service-worker-app-prod", async () => {
     console.warn(warning);
   }
 
-  // Replace `null` with 0 for better compression
-  for (const entry of workboxManifest.manifestEntries) {
-    if (entry.revision === null) {
-      entry.revision = 0;
-    }
-  }
-
-  const manifest = require(path.resolve(paths.output, "manifest.json"));
-
-  // Write bundled source file
-  let serviceWorkerContent = fs.readFileSync(
-    paths.root + manifest["service_worker.js"],
-    "utf-8"
-  );
   // remove source map and add WB manifest
   serviceWorkerContent = sourceMapUrl.removeFrom(serviceWorkerContent);
   serviceWorkerContent = serviceWorkerContent.replace(
@@ -76,8 +93,4 @@ gulp.task("gen-service-worker-app-prod", async () => {
 
   // Write new file to root
   fs.writeFileSync(swDest, serviceWorkerContent);
-
-  // Delete old file from frontend_latest
-  fs.removeSync(paths.root + manifest["service_worker.js"]);
-  fs.removeSync(paths.root + manifest["service_worker.js.map"]);
 });

build-scripts/gulp/webpack.js

@@ -38,9 +38,9 @@ const runDevServer = ({
 
 const handler = (done) => (err, stats) => {
   if (err) {
-    console.log(err.stack || err);
+    log.error(err.stack || err);
     if (err.details) {
-      console.log(err.details);
+      log.error(err.details);
     }
     return;
   }
@@ -48,7 +48,7 @@ const handler = (done) => (err, stats) => {
   log(`Build done @ ${new Date().toLocaleTimeString()}`);
 
   if (stats.hasErrors() || stats.hasWarnings()) {
-    console.log(stats.toString("minimal"));
+    log.warn(stats.toString("minimal"));
   }
 
   if (done) {
@@ -64,7 +64,7 @@ gulp.task("webpack-watch-app", () => {
   );
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
+    gulp.series("build-translations", "copy-translations-app")
   );
 });
 
@@ -82,7 +82,7 @@ gulp.task(
 gulp.task("webpack-dev-server-demo", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
-    contentBase: paths.demo_root,
+    contentBase: paths.demo_output_root,
     port: 8090,
   });
 });
@@ -103,7 +103,7 @@ gulp.task(
 gulp.task("webpack-dev-server-cast", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
-    contentBase: paths.cast_root,
+    contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
@@ -129,7 +129,7 @@ gulp.task("webpack-watch-hassio", () => {
   webpack(
     createHassioConfig({
       isProdBuild: false,
-      latestBuild: false,
+      latestBuild: true,
     })
   ).watch({}, handler());
 });
@@ -139,9 +139,8 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        createHassioConfig({
+        bothBuilds(createHassioConfig, {
           isProdBuild: true,
-          latestBuild: false,
         }),
         handler(resolve)
       )
@@ -152,7 +151,7 @@ gulp.task("webpack-dev-server-gallery", () => {
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
-    contentBase: paths.gallery_root,
+    contentBase: paths.gallery_output_root,
     port: 8100,
   });
 });

build-scripts/paths.js

@@ -4,31 +4,37 @@ module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
-  root: path.resolve(__dirname, "../hass_frontend"),
-  static: path.resolve(__dirname, "../hass_frontend/static"),
-  output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
-  output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+  app_output_root: path.resolve(__dirname, "../hass_frontend"),
+  app_output_static: path.resolve(__dirname, "../hass_frontend/static"),
+  app_output_latest: path.resolve(
+    __dirname,
+    "../hass_frontend/frontend_latest"
+  ),
+  app_output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
 
   demo_dir: path.resolve(__dirname, "../demo"),
-  demo_root: path.resolve(__dirname, "../demo/dist"),
-  demo_static: path.resolve(__dirname, "../demo/dist/static"),
-  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_root: path.resolve(__dirname, "../demo/dist"),
+  demo_output_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output_latest: path.resolve(__dirname, "../demo/dist/frontend_latest"),
   demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
 
   cast_dir: path.resolve(__dirname, "../cast"),
-  cast_root: path.resolve(__dirname, "../cast/dist"),
-  cast_static: path.resolve(__dirname, "../cast/dist/static"),
-  cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_root: path.resolve(__dirname, "../cast/dist"),
+  cast_output_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output_latest: path.resolve(__dirname, "../cast/dist/frontend_latest"),
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_root: path.resolve(__dirname, "../gallery/dist"),
-  gallery_output: path.resolve(__dirname, "../gallery/dist/frontend_latest"),
-  gallery_static: path.resolve(__dirname, "../gallery/dist/static"),
+  gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output_latest: path.resolve(
+    __dirname,
+    "../gallery/dist/frontend_latest"
+  ),
+  gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
-  hassio_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_publicPath: "/api/hassio/app/",
+  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_publicPath: "/api/hassio/app",
 
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

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

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

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

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

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

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

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

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

build-scripts/rollup.js

@@ -0,0 +1,151 @@
+const path = require("path");
+
+const commonjs = require("@rollup/plugin-commonjs");
+const resolve = require("@rollup/plugin-node-resolve");
+const json = require("@rollup/plugin-json");
+const babel = require("rollup-plugin-babel");
+const replace = require("@rollup/plugin-replace");
+const visualizer = require("rollup-plugin-visualizer");
+const { string } = require("rollup-plugin-string");
+const { terser } = require("rollup-plugin-terser");
+const manifest = require("./rollup-plugins/manifest-plugin");
+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");
+const paths = require("./paths");
+
+const extensions = [".js", ".ts"];
+
+/**
+ * @param {Object} arg
+ * @param { import("rollup").InputOption } arg.input
+ */
+const createRollupConfig = ({
+  entry,
+  outputPath,
+  defineOverlay,
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  publicPath,
+  dontHash,
+}) => {
+  return {
+    /**
+     * @type { import("rollup").InputOptions }
+     */
+    inputOptions: {
+      input: entry,
+      // Some entry points contain no JavaScript. This setting silences a warning about that.
+      // https://rollupjs.org/guide/en/#preserveentrysignatures
+      preserveEntrySignatures: false,
+      plugins: [
+        ignore({
+          files: bundle.emptyPackages({ latestBuild }),
+        }),
+        resolve({
+          extensions,
+          preferBuiltins: false,
+          browser: true,
+          rootDir: paths.polymer_dir,
+        }),
+        commonjs({
+          namedExports: {
+            "js-yaml": ["safeDump", "safeLoad"],
+          },
+        }),
+        json(),
+        babel({
+          ...bundle.babelOptions({ latestBuild }),
+          extensions,
+          exclude: bundle.babelExclude(),
+        }),
+        string({
+          // Import certain extensions as strings
+          include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
+        }),
+        replace(
+          bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
+        ),
+        manifest({
+          publicPath,
+        }),
+        worker(),
+        dontHashPlugin({ dontHash }),
+        isProdBuild && terser(bundle.terserOptions(latestBuild)),
+        isStatsBuild &&
+          visualizer({
+            // https://github.com/btd/rollup-plugin-visualizer#options
+            open: true,
+            sourcemap: true,
+          }),
+      ],
+    },
+    /**
+     * @type { import("rollup").OutputOptions }
+     */
+    outputOptions: {
+      // https://rollupjs.org/guide/en/#outputdir
+      dir: outputPath,
+      // https://rollupjs.org/guide/en/#outputformat
+      format: latestBuild ? "es" : "systemjs",
+      // https://rollupjs.org/guide/en/#outputexternallivebindings
+      externalLiveBindings: false,
+      // https://rollupjs.org/guide/en/#outputentryfilenames
+      // https://rollupjs.org/guide/en/#outputchunkfilenames
+      // https://rollupjs.org/guide/en/#outputassetfilenames
+      entryFileNames:
+        isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
+      chunkFileNames:
+        isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
+      assetFileNames:
+        isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
+      // https://rollupjs.org/guide/en/#outputsourcemap
+      sourcemap: isProdBuild ? true : "inline",
+    },
+  };
+};
+
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return createRollupConfig(
+    bundle.config.app({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    })
+  );
+};
+
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return createRollupConfig(
+    bundle.config.demo({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    })
+  );
+};
+
+const createCastConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+};
+
+const createHassioConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
+};
+
+const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(
+    bundle.config.gallery({ isProdBuild, latestBuild })
+  );
+};
+
+module.exports = {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
+};

build-scripts/webpack.js

@@ -2,13 +2,14 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
-const env = require("./env.js");
-const { babelLoaderConfig } = require("./babel.js");
+const bundle = require("./bundle");
 
 const createWebpackConfig = ({
   entry,
-  outputRoot,
+  outputPath,
+  publicPath,
   defineOverlay,
   isProdBuild,
   latestBuild,
@@ -18,22 +19,30 @@ const createWebpackConfig = ({
   if (!dontHash) {
     dontHash = new Set();
   }
+  const ignorePackages = bundle.ignorePackages({ latestBuild });
   return {
     mode: isProdBuild ? "production" : "development",
-    devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
+    devtool: isProdBuild
+      ? "cheap-module-source-map"
+      : "eval-cheap-module-source-map",
     entry,
+    node: false,
     module: {
       rules: [
-        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.js$|\.ts$/,
+          exclude: bundle.babelExclude(),
+          use: {
+            loader: "babel-loader",
+            options: bundle.babelOptions({ latestBuild }),
+          },
+        },
         {
           test: /\.css$/,
           use: "raw-loader",
         },
       ],
     },
-    externals: {
-      esprima: "esprima",
-    },
     optimization: {
       minimizer: [
         new TerserPlugin({
@@ -41,45 +50,56 @@ const createWebpackConfig = ({
           parallel: true,
           extractComments: true,
           sourceMap: true,
-          terserOptions: {
-            safari10: true,
-            ecma: latestBuild ? undefined : 5,
-          },
+          terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
-      new ManifestPlugin(),
-      new webpack.DefinePlugin({
-        __DEV__: !isProdBuild,
-        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(env.version()),
-        __DEMO__: false,
-        __BACKWARDS_COMPAT__: false,
-        __STATIC_PATH__: "/static/",
-        "process.env.NODE_ENV": JSON.stringify(
-          isProdBuild ? "production" : "development"
-        ),
-        ...defineOverlay,
+      new WorkerPlugin(),
+      new ManifestPlugin({
+        // Only include the JS of entrypoints
+        filter: (file) => file.isInitial && !file.name.endsWith(".map"),
+      }),
+      new webpack.DefinePlugin(
+        bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
+      ),
+      new webpack.IgnorePlugin({
+        checkResource(resource, context) {
+          // Only use ignore to intercept imports that we don't control
+          // inside node_module dependencies.
+          if (
+            !context.includes("/node_modules/") ||
+            // calling define.amd will call require("!!webpack amd options")
+            resource.startsWith("!!webpack") ||
+            // loaded by webpack dev server but doesn't exist.
+            resource === "webpack/hot"
+          ) {
+            return false;
+          }
+          let fullPath;
+          try {
+            fullPath = resource.startsWith(".")
+              ? path.resolve(context, resource)
+              : require.resolve(resource);
+          } catch (err) {
+            console.error(
+              "Error in Home Assistant ignore plugin",
+              resource,
+              context
+            );
+            throw err;
+          }
+
+          return ignorePackages.some((toIgnorePath) =>
+            fullPath.startsWith(toIgnorePath)
+          );
+        },
       }),
-      // Ignore moment.js locales
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Color.js is bloated, it contains all color definitions for all material color sets.
       new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/paper-styles\/color\.js$/,
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // Ignore roboto pointing at CDN. We use local font-roboto-local.
-      new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/font-roboto\/roboto\.js$/,
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
-      ),
-      // Ignore mwc icons pointing at CDN.
-      new webpack.NormalModuleReplacementPlugin(
-        /@material\/mwc-icon\/mwc-icon-font\.js$/,
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
-      ),
-    ].filter(Boolean),
+    ],
     resolve: {
       extensions: [".ts", ".js", ".json"],
     },
@@ -94,106 +114,40 @@ const createWebpackConfig = ({
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"
           : "[name].chunk.js",
-      path: path.resolve(
-        outputRoot,
-        latestBuild ? "frontend_latest" : "frontend_es5"
-      ),
-      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
-      // For workerize loader
+      path: outputPath,
+      publicPath,
+      // To silence warning in worker plugin
       globalObject: "self",
     },
   };
 };
 
 const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig({
-    entry: {
-      service_worker: "./src/entrypoints/service_worker.ts",
-      app: "./src/entrypoints/app.ts",
-      authorize: "./src/entrypoints/authorize.ts",
-      onboarding: "./src/entrypoints/onboarding.ts",
-      core: "./src/entrypoints/core.ts",
-      compatibility: "./src/entrypoints/compatibility.ts",
-      "custom-panel": "./src/entrypoints/custom-panel.ts",
-    },
-    outputRoot: paths.root,
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-  });
+  return createWebpackConfig(
+    bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
+  );
 };
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig({
-    entry: {
-      main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
-      compatibility: path.resolve(
-        paths.polymer_dir,
-        "src/entrypoints/compatibility.ts"
-      ),
-    },
-    outputRoot: paths.demo_root,
-    defineOverlay: {
-      __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
-      __DEMO__: true,
-    },
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-  });
+  return createWebpackConfig(
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+  );
 };
 
 const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  const entry = {
-    launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
-  };
-
-  if (latestBuild) {
-    entry.receiver = path.resolve(paths.cast_dir, "src/receiver/entrypoint.ts");
-  }
-
-  return createWebpackConfig({
-    entry,
-    outputRoot: paths.cast_root,
-    isProdBuild,
-    latestBuild,
-    defineOverlay: {
-      __BACKWARDS_COMPAT__: true,
-    },
-  });
+  return createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 };
 
 const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  if (latestBuild) {
-    throw new Error("Hass.io does not support latest build!");
-  }
-  const config = createWebpackConfig({
-    entry: {
-      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
-    },
-    outputRoot: "",
-    isProdBuild,
-    latestBuild,
-    dontHash: new Set(["entrypoint"]),
-  });
-
-  config.output.path = paths.hassio_root;
-  config.output.publicPath = paths.hassio_publicPath;
-
-  return config;
+  return createWebpackConfig(
+    bundle.config.hassio({ isProdBuild, latestBuild })
+  );
 };
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  const config = createWebpackConfig({
-    entry: {
-      entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
-    },
-    outputRoot: paths.gallery_root,
-    isProdBuild,
-    latestBuild,
-  });
-
-  return config;
+  return createWebpackConfig(
+    bundle.config.gallery({ isProdBuild, latestBuild })
+  );
 };
 
 module.exports = {

cast/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createCastConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

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

@@ -45,8 +45,13 @@
       (function() {
         // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
         if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
-          _ls("<%= es5LauncherJS %>");
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
         }
       })();
     </script>

cast/src/html/launcher.html.template

@@ -36,8 +36,13 @@
       (function() {
         // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
         if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
-          _ls("<%= es5LauncherJS %>");
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
         }
       })();
     </script>

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,3 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
+import "~app/resources/ha-style";
+import "~app/resources/roboto";
 import "./layout/hc-connect";

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

@@ -184,7 +184,7 @@ export class HcConnect extends LitElement {
         this.castManager = null;
       }
     );
-    registerServiceWorker(false);
+    registerServiceWorker(this, false);
   }
 
   private async _handleDemo() {

cast/src/receiver/entrypoint.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import { CAST_NS } from "../../../src/cast/const";
-import { HassMessage } from "../../../src/cast/receiver_messages";
-import "../../../src/resources/custom-card-support";
+import { CAST_NS } from "~app/cast/const";
+import { HassMessage } from "~app/cast/receiver_messages";
+import "~app/resources/custom-card-support";
 import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";

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

@@ -82,6 +82,7 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
+        @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
   }
@@ -191,14 +192,11 @@ export class HcMain extends HassElement {
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
       } catch (err) {
+        // eslint-disable-next-line
+        console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        const { generateLovelaceConfigFromHass } = await import(
-          "../../../../src/panels/lovelace/common/generate-lovelace-config"
-        );
-        this._handleNewLovelaceConfig(
-          await generateLovelaceConfigFromHass(this.hass!)
-        );
+        await this._generateLovelaceConfig();
       }
     }
     if (!resourcesLoaded) {
@@ -218,6 +216,15 @@ export class HcMain extends HassElement {
     this._sendStatus();
   }
 
+  private async _generateLovelaceConfig() {
+    const { generateLovelaceConfigFromHass } = await import(
+      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    );
+    this._handleNewLovelaceConfig(
+      await generateLovelaceConfigFromHass(this.hass!)
+    );
+  }
+
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
     castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;

cast/src/receiver/second-load.ts

@@ -1,3 +1,4 @@
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../src/resources/roboto";
+import "../../../src/resources/ha-style";
 import "./layout/hc-lovelace";

cast/webpack.config.js

@@ -1,11 +1,8 @@
 const { createCastConfig } = require("../build-scripts/webpack.js");
-const { isProdBuild } = require("../build-scripts/env.js");
-
-// File just used for stats builds
-
-const latestBuild = true;
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createCastConfig({
   isProdBuild: isProdBuild(),
-  latestBuild,
+  isStatsBuild: isStatsBuild(),
+  latestBuild: true,
 });

demo/public/manifest.json

@@ -1,6 +1,6 @@
 {
   "background_color": "#FFFFFF",
-  "description": "Open-source home automation platform running on Python 3.",
+  "description": "Home automation platform that puts local control and privacy first.",
   "dir": "ltr",
   "display": "standalone",
   "icons": [
@@ -31,7 +31,7 @@
   ],
   "lang": "en-US",
   "name": "Home Assistant Demo",
-  "short_name": "Demo",
+  "short_name": "HA Demo",
   "start_url": "/?homescreen=1",
   "theme_color": "#03A9F4"
 }

demo/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createDemoConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

demo/script/size_stats

@@ -7,5 +7,5 @@ set -e
 cd "$(dirname "$0")/.."
 
 STATS=1 NODE_ENV=production ../node_modules/.bin/webpack --profile --json > compilation-stats.json
-npx webpack-bundle-analyzer compilation-stats.json dist
+npx webpack-bundle-analyzer compilation-stats.json dist/frontend_latest
 rm compilation-stats.json

demo/src/configs/teachingbirds/lovelace.ts

@@ -63,7 +63,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   elements: [
                     {
                       style: {
-                        "--mdc-icon-size": "100px",
+                        "--mdc-icon-size": "100%",
                         top: "50%",
                         left: "50%",
                       },

demo/src/entrypoint.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/ha-demo.ts

@@ -1,3 +1,4 @@
+import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {

demo/src/html/index.html.template

@@ -5,18 +5,6 @@
     <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="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Medium.woff2"
-      as="font"
-      crossorigin
-    />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -96,6 +84,7 @@
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
     <script type="module" src="<%= latestDemoJS %>"></script>
 
@@ -103,9 +92,13 @@
       (function() {
         // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
         if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
-          _ls("<%= es5Compatibility %>");
-          _ls("<%= es5DemoJS %>");
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5DemoJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5DemoJS %>");
+          <% } %>
         }
       })();
     </script>

gallery/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createGalleryConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

gallery/src/components/demo-cards.js

@@ -2,7 +2,8 @@ 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 "../../../src/components/ha-switch";
+import "~app/components/ha-switch";
+import "~app/components/ha-formfield";
 import "./demo-card";
 
 class DemoCards extends PolymerElement {
@@ -26,9 +27,10 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
-            Show config
-          </ha-switch>
+          <ha-formfield label="Show config">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/entrypoint.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

gallery/src/ha-gallery.js

@@ -10,6 +10,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
 import "../../src/managers/notification-manager";
+import "../../src/styles/polymer-ha-style";
 
 // eslint-disable-next-line no-undef
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);

gallery/webpack.config.js

@@ -1,5 +1,8 @@
 const { createGalleryConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createGalleryConfig({
+  isProdBuild: isProdBuild(),
+  isStatsBuild: isStatsBuild(),
   latestBuild: true,
 });

hassio/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createHassioConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: false,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

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

@@ -64,6 +64,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
           padding: 8px;
           max-width: 1024px;
         }
+        ha-markdown {
+          padding: 16px;
+        }
       `,
     ];
   }

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

@@ -630,14 +630,10 @@ class HassioAddonInfo extends LitElement {
         .right {
           float: right;
         }
-        ha-markdown img {
-          max-width: 100%;
-        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }
-        .description a,
-        ha-markdown a {
+        .description a {
           color: var(--primary-color);
         }
         .red {
@@ -675,6 +671,9 @@ class HassioAddonInfo extends LitElement {
           text-decoration: underline;
           cursor: pointer;
         }
+        ha-markdown {
+          padding: 16px;
+        }
       `,
     ];
   }

hassio/src/components/hassio-filter-addons.ts

@@ -1,13 +1,13 @@
-import * as Fuse from "fuse.js";
+import Fuse from "fuse.js";
 import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 
 export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
-  const options: Fuse.FuseOptions<HassioAddonInfo> = {
+  const options: Fuse.IFuseOptions<HassioAddonInfo> = {
     keys: ["name", "description", "slug"],
-    caseSensitive: false,
+    isCaseSensitive: false,
     minMatchCharLength: 2,
     threshold: 0.2,
   };
   const fuse = new Fuse(addons, options);
-  return fuse.search(filter);
+  return fuse.search(filter).map((result) => result.item);
 }

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

@@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement {
             color: var(--text-primary-color);
             background-color: var(--primary-color);
           }
+          ha-markdown {
+            padding: 16px;
+          }
         }
       `,
     ];

hassio/src/entrypoint.ts

@@ -1,9 +1,6 @@
-window.loadES5Adapter().then(() => {
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
-});
+import "~app/resources/compatibility";
+import "~app/resources/roboto";
+import "./hassio-main";
 
 const styleEl = document.createElement("style");
 styleEl.innerHTML = `

hassio/src/hassio-main.ts

@@ -14,7 +14,9 @@ import {
   createHassioSession,
   fetchHassioHomeAssistantInfo,
   fetchHassioSupervisorInfo,
+  fetchHassioInfo,
   HassioHomeAssistantInfo,
+  HassioInfo,
   HassioPanelInfo,
   HassioSupervisorInfo,
 } from "../../src/data/hassio/supervisor";
@@ -75,6 +77,8 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
 
   @property() private _hostInfo: HassioHostInfo;
 
+  @property() private _hassioInfo?: HassioInfo;
+
   @property() private _hassOsInfo?: HassioHassOSInfo;
 
   @property() private _hassInfo: HassioHomeAssistantInfo;
@@ -147,6 +151,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
         hass: this.hass,
         narrow: this.narrow,
         supervisorInfo: this._supervisorInfo,
+        hassioInfo: this._hassioInfo,
         hostInfo: this._hostInfo,
         hassInfo: this._hassInfo,
         hassOsInfo: this._hassOsInfo,
@@ -156,6 +161,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       el.hass = this.hass;
       el.narrow = this.narrow;
       el.supervisorInfo = this._supervisorInfo;
+      el.hassioInfo = this._hassioInfo;
       el.hostInfo = this._hostInfo;
       el.hassInfo = this._hassInfo;
       el.hassOsInfo = this._hassOsInfo;
@@ -169,12 +175,14 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       return;
     }
 
-    const [supervisorInfo, hostInfo, hassInfo] = await Promise.all([
+    const [supervisorInfo, hostInfo, hassInfo, hassioInfo] = await Promise.all([
       fetchHassioSupervisorInfo(this.hass),
       fetchHassioHostInfo(this.hass),
       fetchHassioHomeAssistantInfo(this.hass),
+      fetchHassioInfo(this.hass),
     ]);
     this._supervisorInfo = supervisorInfo;
+    this._hassioInfo = hassioInfo;
     this._hostInfo = hostInfo;
     this._hassInfo = hassInfo;
 

hassio/src/hassio-panel-router.ts

@@ -3,6 +3,7 @@ import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
+  HassioInfo,
 } from "../../src/data/hassio/supervisor";
 import {
   HassRouterPage,
@@ -26,6 +27,8 @@ class HassioPanelRouter extends HassRouterPage {
 
   @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property({ attribute: false }) public hostInfo: HassioHostInfo;
 
   @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
@@ -54,6 +57,7 @@ class HassioPanelRouter extends HassRouterPage {
     el.route = this.route;
     el.narrow = this.narrow;
     el.supervisorInfo = this.supervisorInfo;
+    el.hassioInfo = this.hassioInfo;
     el.hostInfo = this.hostInfo;
     el.hassInfo = this.hassInfo;
     el.hassOsInfo = this.hassOsInfo;

hassio/src/hassio-panel.ts

@@ -10,9 +10,9 @@ import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
+  HassioInfo,
 } from "../../src/data/hassio/supervisor";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/resources/ha-style";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 
@@ -49,6 +49,8 @@ class HassioPanel extends LitElement {
 
   @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property({ attribute: false }) public hostInfo!: HassioHostInfo;
 
   @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
@@ -62,6 +64,7 @@ class HassioPanel extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .supervisorInfo=${this.supervisorInfo}
+        .hassioInfo=${this.hassioInfo}
         .hostInfo=${this.hostInfo}
         .hassInfo=${this.hassInfo}
         .hassOsInfo=${this.hassOsInfo}

hassio/src/system/hassio-host-info.ts

@@ -19,6 +19,7 @@ import {
   shutdownHost,
   updateOS,
 } from "../../../src/data/hassio/host";
+import { HassioInfo } from "../../../src/data/hassio/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -35,6 +36,8 @@ class HassioHostInfo extends LitElement {
 
   @property() public hostInfo!: HassioHostInfoType;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
 
   @property() private _errors?: string;
@@ -54,6 +57,12 @@ class HassioHostInfo extends LitElement {
                 <td>System</td>
                 <td>${this.hostInfo.operating_system}</td>
               </tr>
+              ${!this.hostInfo.features.includes("hassos")
+                ? html`<tr>
+                    <td>Docker version</td>
+                    <td>${this.hassioInfo.docker}</td>
+                  </tr>`
+                : ""}
               ${this.hostInfo.deployment
                 ? html`
                     <tr>

hassio/src/system/hassio-system.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-menu-button/paper-menu-button";
 import {
   css,
   CSSResult,
@@ -12,7 +11,10 @@ import {
   HassioHassOSInfo,
   HassioHostInfo,
 } from "../../../src/data/hassio/host";
-import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import {
+  HassioSupervisorInfo,
+  HassioInfo,
+} from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -32,9 +34,11 @@ class HassioSystem extends LitElement {
 
   @property() public supervisorInfo!: HassioSupervisorInfo;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property() public hostInfo!: HassioHostInfo;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   public render(): TemplateResult | void {
     return html`
@@ -56,6 +60,7 @@ class HassioSystem extends LitElement {
             ></hassio-supervisor-info>
             <hassio-host-info
               .hass=${this.hass}
+              .hassioInfo=${this.hassioInfo}
               .hostInfo=${this.hostInfo}
               .hassOsInfo=${this.hassOsInfo}
             ></hassio-host-info>

hassio/webpack.config.js

@@ -1,11 +1,8 @@
 const { createHassioConfig } = require("../build-scripts/webpack.js");
-const { isProdBuild } = require("../build-scripts/env.js");
-
-// File just used for stats builds
-
-const latestBuild = false;
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createHassioConfig({
   isProdBuild: isProdBuild(),
-  latestBuild,
+  isStatsBuild: isStatsBuild(),
+  latestBuild: true,
 });

package.json

@@ -17,13 +17,13 @@
     "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types",
     "format": "npm run format:eslint && npm run format:prettier",
     "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
-    "test": "npm run lint && npm run mocha",
-    "docker_build": "sh ./script/docker_run.sh build $npm_package_version",
-    "bash": "sh ./script/docker_run.sh bash $npm_package_version"
+    "test": "npm run lint && npm run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "~app": "file:./src",
+    "@formatjs/intl-pluralrules": "^1.5.8",
     "@fullcalendar/core": "^5.0.0-beta.2",
     "@fullcalendar/daygrid": "^5.0.0-beta.2",
     "@material/chips": "7.0.0-canary.d92d8c93e.0",
@@ -42,7 +42,6 @@
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
-    "@polymer/font-roboto": "^3.0.2",
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -51,15 +50,12 @@
     "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-media-query": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
-    "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/neon-animation": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",
-    "@polymer/paper-drawer-panel": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.0.1",
     "@polymer/paper-input": "^3.0.1",
     "@polymer/paper-item": "^3.0.1",
@@ -69,7 +65,6 @@
     "@polymer/paper-radio-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.1",
-    "@polymer/paper-scroll-header-panel": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-spinner": "^3.0.2",
     "@polymer/paper-styles": "^3.0.1",
@@ -77,23 +72,24 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
-    "@thomasloven/round-slider": "0.4.1",
+    "@thomasloven/round-slider": "0.5.0",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
-    "@webcomponents/shadycss": "^1.9.0",
+    "@vue/web-component-wrapper": "^1.2.0",
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "~2.8.0",
     "chartjs-chart-timeline": "^0.3.0",
     "codemirror": "^5.49.0",
+    "comlink": "^4.3.0",
     "cpx": "^1.5.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "es6-object-assign": "^1.1.0",
     "fecha": "^4.2.0",
-    "fuse.js": "^3.4.4",
+    "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "^5.1.2",
+    "home-assistant-js-websocket": "^5.3.0",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",
@@ -105,14 +101,15 @@
     "marked": "^0.6.1",
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
-    "moment": "^2.24.0",
     "node-vibrant": "^3.1.5",
+    "proxy-polyfill": "^0.3.1",
     "regenerator-runtime": "^0.13.2",
-    "resize-observer": "^1.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
-    "tslib": "^1.10.0",
     "unfetch": "^4.1.0",
+    "vue": "^2.6.11",
+    "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
     "workbox-core": "^5.1.3",
     "workbox-precaching": "^5.1.3",
@@ -131,6 +128,10 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-json": "^4.0.3",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-replace": "^2.3.2",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
     "@types/codemirror": "^0.0.78",
@@ -146,7 +147,6 @@
     "@typescript-eslint/parser": "^2.28.0",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
-    "copy-webpack-plugin": "^5.0.2",
     "del": "^4.0.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.1",
@@ -157,44 +157,50 @@
     "eslint-plugin-lit": "^1.2.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-wc": "^1.2.0",
+    "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
-    "gulp-insert": "^0.5.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^2.0.0",
     "gulp-zopfli-green": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
     "lit-analyzer": "^1.1.10",
     "lodash.template": "^4.5.0",
+    "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
     "mocha": "^6.0.2",
     "object-hash": "^2.0.3",
-    "parse5": "^5.1.0",
+    "open": "^7.0.4",
     "prettier": "^2.0.4",
     "raw-loader": "^2.0.0",
-    "reify": "^0.18.1",
     "require-dir": "^1.2.0",
+    "rollup": "^2.8.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-visualizer": "^4.0.4",
+    "serve": "^11.3.0",
     "sinon": "^7.3.1",
     "source-map-url": "^0.4.0",
-    "terser-webpack-plugin": "^1.2.3",
+    "systemjs": "^6.3.2",
+    "terser-webpack-plugin": "^3.0.6",
     "ts-lit-plugin": "^1.1.10",
     "ts-mocha": "^6.0.0",
     "typescript": "^3.8.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "web-component-tester": "^6.9.2",
     "webpack": "^4.40.2",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.10.3",
     "webpack-manifest-plugin": "^2.0.4",
     "workbox-build": "^5.1.3",
-    "workerize-loader": "^1.1.0"
+    "worker-plugin": "^4.0.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",

rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("./build-scripts/rollup.js");
+const env = require("./build-scripts/env.js");
+
+const config = rollup.createAppConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

script/docker_entrypoint.sh

@@ -1,14 +0,0 @@
-#!/bin/bash
-# Docker entry point inspired by travis build and script/build_frontend
-
-# Stop on errors
-set -e
-
-# Build the frontend but not used the npm run build
-/bin/bash script/build_frontend
-
-# TEST
-npm run test
-
-#
-#xvfb-run wct

script/docker_run.sh

@@ -1,103 +0,0 @@
-#!/bin/bash
-# Basic Docker Management scripts
-# With this script you can build software, or enter an agnostic development environment and run commands interactively.
-
-
-
-check_mandatory_tools(){
-  if [ "x$(which docker)" == "x" ]; then
-    echo "UNKNOWN - Missing docker binary! Are you sure it is installed and reachable?"
-    exit 3
-  fi
-
-  docker info > /dev/null 2>&1
-  if [ $? -ne 0 ]; then
-    echo "UNKNOWN - Unable to talk to the docker daemon! Maybe the docker daemon is not running"
-    exit 3
-  fi
-}
-
-check_dev_image(){
-  if [[ "$(docker images -q ${IMAGE_NAME}:$IMAGE_TAG 2> /dev/null)" == "" ]]; then
-    echo "UNKNOWN - Can't find the development docker image ${IMAGE_NAME}:$IMAGE_TAG"
-    while true; do
-      read -p "Do you want to create it now?" yn
-      case $yn in
-          [Yy]* ) create_image; break;;
-          [Nn]* ) exit 3;;
-          * ) echo "Please answer y or n";;
-      esac
-    done
-  fi
-}
-
-# Building the basic image for compiling the production frontend
-create_image(){
-  docker build -t ${IMAGE_NAME}:${IMAGE_TAG} .
-}
-
-#
-# Execute interactive bash on basic image
-#
-run_bash_on_docker(){
-
-  check_dev_image
-
-  docker run -it \
-    -v $PWD/:/frontend/ \
-    -v /frontend/node_modules \
-    -v /frontend/bower_components \
-    ${IMAGE_NAME}:${IMAGE_TAG} /bin/bash
-}
-
-#
-# Execute the basic image for compiling the production frontend
-#
-build_all(){
-
-  check_dev_image
-
-  docker run -it \
-    -v $PWD/:/frontend/ \
-    -v /frontend/node_modules \
-    -v /frontend/bower_components \
-    ${IMAGE_NAME}:${IMAGE_TAG} /bin/bash script/build_frontend
-
-}
-
-# Init Global Variable
-IMAGE_NAME=home_assistant_fe_image
-IMAGE_TAG=${2:-latest}
-
-check_mandatory_tools
-
-case "$1" in
-    setup_env)
-            create_image
-            ;;
-    bash)
-            run_bash_on_docker
-            ;;
-    build)
-            build_all
-            ;;
-    *)
-            echo "NAME"
-            echo " Docker Management."
-            echo ""
-            echo "SYNOPSIS"
-            echo "  ${0} command [version]"
-            echo ""
-            echo "DESCRIPTION"
-            echo " With this script you can build software, or enter an agnostic development environment and run commands interactively."
-            echo ""
-            echo " The command are:"
-            echo "   setup_env    Create develop images"
-            echo "   bash         Run bash on develop enviroments"
-            echo "   build        Run silent build"
-            echo ""
-            echo " The version is optional, if not inserted it assumes \"latest\". "
-            exit 1
-            ;;
-esac
-exit 0

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200513.0",
+    version="20200620.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/auth/ha-auth-flow.ts

@@ -83,12 +83,24 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           ${this._renderStep(this._step)}
           <div class="action">
             <mwc-button raised @click=${this._handleSubmit}
-              >${this._step.type === "form" ? "Next" : "Start over"}</mwc-button
+              >${this._step.type === "form"
+                ? this.localize("ui.panel.page-authorize.form.next")
+                : this.localize(
+                    "ui.panel.page-authorize.form.start_over"
+                  )}</mwc-button
             >
           </div>
         `;
       case "error":
-        return html` <div class="error">Error: ${this._errorMessage}</div> `;
+        return html`
+          <div class="error">
+            ${this.localize(
+              "ui.panel.page-authorize.form.error",
+              "error",
+              this._errorMessage
+            )}
+          </div>
+        `;
       case "loading":
         return html` ${this.localize("ui.panel.page-authorize.form.working")} `;
       default:

src/auth/ha-authorize.ts

@@ -6,19 +6,18 @@ import {
   property,
   PropertyValues,
 } from "lit-element";
-import { AuthProvider, fetchAuthProviders } from "../data/auth";
+import {
+  AuthProvider,
+  fetchAuthProviders,
+  AuthUrlSearchParams,
+} from "../data/auth";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
+import { extractSearchParamsObject } from "../common/url/search-params";
 
 import(/* webpackChunkName: "pick-auth-provider" */ "./ha-pick-auth-provider");
 
-interface QueryParams {
-  client_id?: string;
-  redirect_uri?: string;
-  state?: string;
-}
-
 class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   @property() public clientId?: string;
 
@@ -33,14 +32,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   constructor() {
     super();
     this.translationFragment = "page-authorize";
-    const query: QueryParams = {};
-    const values = location.search.substr(1).split("&");
-    for (const item of values) {
-      const value = item.split("=");
-      if (value.length > 1) {
-        query[decodeURIComponent(value[0])] = decodeURIComponent(value[1]);
-      }
-    }
+    const query = extractSearchParamsObject() as AuthUrlSearchParams;
     if (query.client_id) {
       this.clientId = query.client_id;
     }
@@ -121,7 +113,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     const tempA = document.createElement("a");
     tempA.href = this.redirectUri!;
     if (tempA.host === location.host) {
-      registerServiceWorker(false);
+      registerServiceWorker(this, false);
     }
   }
 
@@ -145,7 +137,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         response.status === 400 &&
         authProviders.code === "onboarding_required"
       ) {
-        location.href = "/?";
+        location.href = `/onboarding.html${location.search}`;
         return;
       }
 

src/common/entity/valid_entity_id.ts

@@ -6,7 +6,7 @@ export const isValidEntityId = (entityId: string) =>
 export const createValidEntityId = (input: string) =>
   input
     .toLowerCase()
-    .replace(/\s|'/g, "_") // replace spaces and quotes with underscore
+    .replace(/\s|'|\./g, "_") // replace spaces, points and quotes with underscore
     .replace(/\W/g, "") // remove not allowed chars
     .replace(/_{2,}/g, "_") // replace multiple underscores with 1
     .replace(/_$/, ""); // remove underscores at the end

src/common/style/icon_color_css.ts

@@ -57,9 +57,12 @@ export const iconColorCSS = css`
     0% {
       opacity: 1;
     }
-    100% {
+    50% {
       opacity: 0;
     }
+    100% {
+      opacity: 1;
+    }
   }
 
   ha-icon[data-domain="plant"][data-state="problem"],

src/common/translations/localize.ts

@@ -12,6 +12,10 @@ export interface FormatsType {
   time: FormatType;
 }
 
+if (!Intl.PluralRules) {
+  import("@formatjs/intl-pluralrules/polyfill-locales");
+}
+
 /**
  * Adapted from Polymer app-localize-behavior.
  *

src/common/url/search-params.ts

@@ -0,0 +1,8 @@
+export const extractSearchParamsObject = (): { [key: string]: string } => {
+  const query = {};
+  const searchParams = new URLSearchParams(location.search);
+  for (const [key, value] of searchParams.entries()) {
+    query[key] = value;
+  }
+  return query;
+};

src/components/buttons/ha-progress-button.js

@@ -8,6 +8,9 @@ class HaProgressButton extends PolymerElement {
   static get template() {
     return html`
       <style>
+        :host {
+          outline: none;
+        }
         .container {
           position: relative;
           display: inline-block;

src/components/data-table/ha-data-table.ts

@@ -14,9 +14,6 @@ import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { scroll } from "lit-virtualizer";
-// @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import sortFilterWorker from "workerize-loader!./sort_filter_worker";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../common/search/search-input";
 import { debounce } from "../../common/util/debounce";
@@ -24,6 +21,8 @@ import { nextRender } from "../../common/util/render-status";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-icon";
+import { filterData, sortData } from "./sort-filter";
+import memoizeOne from "memoize-one";
 
 declare global {
   // for fire event
@@ -74,6 +73,10 @@ export interface DataTableRowData {
   selectable?: boolean;
 }
 
+export interface SortableColumnContainer {
+  [key: string]: DataTableSortColumnData;
+}
+
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
@@ -111,14 +114,10 @@ export class HaDataTable extends LitElement {
 
   private _checkedRows: string[] = [];
 
-  private _sortColumns: {
-    [key: string]: DataTableSortColumnData;
-  } = {};
+  private _sortColumns: SortableColumnContainer = {};
 
   private curRequest = 0;
 
-  private _worker: any | undefined;
-
   private _debounceSearch = debounce(
     (value: string) => {
       this._filter = value;
@@ -140,11 +139,6 @@ export class HaDataTable extends LitElement {
     }
   }
 
-  protected firstUpdated(properties: PropertyValues) {
-    super.firstUpdated(properties);
-    this._worker = sortFilterWorker();
-  }
-
   protected updated(properties: PropertyValues) {
     super.updated(properties);
 
@@ -188,7 +182,7 @@ export class HaDataTable extends LitElement {
       properties.has("_sortColumn") ||
       properties.has("_sortDirection")
     ) {
-      this._filterData();
+      this._sortFilterData();
     }
   }
 
@@ -378,20 +372,30 @@ export class HaDataTable extends LitElement {
     `;
   }
 
-  private async _filterData() {
+  private async _sortFilterData() {
     const startTime = new Date().getTime();
     this.curRequest++;
     const curRequest = this.curRequest;
 
-    const filterProm = this._worker.filterSortData(
-      this.data,
-      this._sortColumns,
-      this._filter,
-      this._sortDirection,
-      this._sortColumn
-    );
+    let filteredData = this.data;
+    if (this._filter) {
+      filteredData = await this._memFilterData(
+        this.data,
+        this._sortColumns,
+        this._filter
+      );
+    }
 
-    const [data] = await Promise.all([filterProm, nextRender]);
+    const prom = this._sortColumn
+      ? sortData(
+          filteredData,
+          this._sortColumns,
+          this._sortDirection,
+          this._sortColumn
+        )
+      : filteredData;
+
+    const [data] = await Promise.all([prom, nextRender]);
 
     const curTime = new Date().getTime();
     const elapsed = curTime - startTime;
@@ -405,6 +409,16 @@ export class HaDataTable extends LitElement {
     this._filteredData = data;
   }
 
+  private _memFilterData = memoizeOne(
+    async (
+      data: DataTableRowData[],
+      columns: SortableColumnContainer,
+      filter: string
+    ): Promise<DataTableRowData[]> => {
+      return filterData(data, columns, filter);
+    }
+  );
+
   private _handleHeaderClick(ev: Event) {
     const columnId = ((ev.target as HTMLElement).closest(
       ".mdc-data-table__header-cell"
@@ -605,6 +619,11 @@ export class HaDataTable extends LitElement {
         text-transform: inherit;
       }
 
+      .mdc-data-table__cell a {
+        color: inherit;
+        text-decoration: none;
+      }
+
       .mdc-data-table__cell--numeric {
         text-align: right;
       }
@@ -646,6 +665,11 @@ export class HaDataTable extends LitElement {
         padding: 8px;
       }
 
+      .mdc-data-table__cell--icon-button {
+        color: var(--secondary-text-color);
+        text-overflow: clip;
+      }
+
       .mdc-data-table__header-cell--icon-button:first-child,
       .mdc-data-table__cell--icon-button:first-child {
         width: 64px;
@@ -659,7 +683,7 @@ export class HaDataTable extends LitElement {
       }
 
       .mdc-data-table__cell--icon-button a {
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
       }
 
       .mdc-data-table__header-cell {

src/components/data-table/sort-filter.ts

@@ -0,0 +1,36 @@
+import { wrap } from "comlink";
+
+import type { api } from "./sort_filter_worker";
+
+type FilterDataType = api["filterData"];
+type FilterDataParamTypes = Parameters<FilterDataType>;
+
+type SortDataType = api["sortData"];
+type SortDataParamTypes = Parameters<SortDataType>;
+
+let worker: any | undefined;
+
+export const filterData = async (
+  data: FilterDataParamTypes[0],
+  columns: FilterDataParamTypes[1],
+  filter: FilterDataParamTypes[2]
+): Promise<ReturnType<FilterDataType>> => {
+  if (!worker) {
+    worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+  }
+
+  return await worker.filterData(data, columns, filter);
+};
+
+export const sortData = async (
+  data: SortDataParamTypes[0],
+  columns: SortDataParamTypes[1],
+  direction: SortDataParamTypes[2],
+  sortColumn: SortDataParamTypes[3]
+): Promise<ReturnType<SortDataType>> => {
+  if (!worker) {
+    worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+  }
+
+  return await worker.sortData(data, columns, direction, sortColumn);
+};

src/components/data-table/sort_filter_worker.ts

@@ -1,60 +1,20 @@
-import memoizeOne from "memoize-one";
-// eslint-disable-next-line import/no-cycle
-import {
-  DataTableColumnContainer,
-  DataTableColumnData,
+// To use comlink under ES5
+import "proxy-polyfill";
+import { expose } from "comlink";
+import type {
+  DataTableSortColumnData,
   DataTableRowData,
   SortingDirection,
+  SortableColumnContainer,
 } from "./ha-data-table";
 
-export const filterSortData = memoizeOne(
-  async (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    filter: string,
-    direction: SortingDirection,
-    sortColumn?: string
-  ) =>
-    sortColumn
-      ? _memSortData(
-          await _memFilterData(data, columns, filter),
-          columns,
-          direction,
-          sortColumn
-        )
-      : _memFilterData(data, columns, filter)
-);
-
-const _memFilterData = memoizeOne(
-  async (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    filter: string
-  ) => {
-    if (!filter) {
-      return data;
-    }
-    return filterData(data, columns, filter.toUpperCase());
-  }
-);
-
-const _memSortData = memoizeOne(
-  (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    direction: SortingDirection,
-    sortColumn: string
-  ) => {
-    return sortData(data, columns[sortColumn], direction, sortColumn);
-  }
-);
-
-export const filterData = (
+const filterData = (
   data: DataTableRowData[],
-  columns: DataTableColumnContainer,
+  columns: SortableColumnContainer,
   filter: string
-) =>
-  data.filter((row) => {
+) => {
+  filter = filter.toUpperCase();
+  return data.filter((row) => {
     return Object.entries(columns).some((columnEntry) => {
       const [key, column] = columnEntry;
       if (column.filterable) {
@@ -69,10 +29,11 @@ export const filterData = (
       return false;
     });
   });
+};
 
-export const sortData = (
+const sortData = (
   data: DataTableRowData[],
-  column: DataTableColumnData,
+  column: DataTableSortColumnData,
   direction: SortingDirection,
   sortColumn: string
 ) =>
@@ -105,3 +66,12 @@ export const sortData = (
     }
     return 0;
   });
+
+const api = {
+  filterData,
+  sortData,
+};
+
+export type api = typeof api;
+
+expose(api);

src/components/date-range-picker.ts

@@ -0,0 +1,228 @@
+import Vue from "vue";
+import wrap from "@vue/web-component-wrapper";
+import DateRangePicker from "vue2-daterange-picker";
+// @ts-ignore
+import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
+import { fireEvent } from "../common/dom/fire_event";
+import { Constructor } from "../types";
+import { customElement } from "lit-element/lib/decorators";
+
+const Component = Vue.extend({
+  props: {
+    twentyfourHours: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    ranges: {
+      type: Boolean,
+      default: true,
+    },
+    startDate: {
+      type: [String, Date],
+      default() {
+        return new Date();
+      },
+    },
+    endDate: {
+      type: [String, Date],
+      default() {
+        return new Date();
+      },
+    },
+  },
+  render(createElement) {
+    // @ts-ignore
+    return createElement(DateRangePicker, {
+      props: {
+        "time-picker": true,
+        "auto-apply": false,
+        opens: "right",
+        "show-dropdowns": false,
+        "time-picker24-hour": this.twentyfourHours,
+        disabled: this.disabled,
+        ranges: this.ranges ? {} : false,
+      },
+      model: {
+        value: {
+          startDate: this.startDate,
+          endDate: this.endDate,
+        },
+        callback: (value) => {
+          // @ts-ignore
+          fireEvent(this.$el as HTMLElement, "change", value);
+        },
+        expression: "dateRange",
+      },
+      scopedSlots: {
+        input() {
+          return createElement("slot", {
+            domProps: { name: "input" },
+          });
+        },
+        header() {
+          return createElement("slot", {
+            domProps: { name: "header" },
+          });
+        },
+        ranges() {
+          return createElement("slot", {
+            domProps: { name: "ranges" },
+          });
+        },
+        footer() {
+          return createElement("slot", {
+            domProps: { name: "footer" },
+          });
+        },
+      },
+    });
+  },
+});
+
+const WrappedElement: Constructor<HTMLElement> = wrap(Vue, Component);
+
+@customElement("date-range-picker")
+class DateRangePickerElement extends WrappedElement {
+  constructor() {
+    super();
+    const style = document.createElement("style");
+    style.innerHTML = `
+          ${dateRangePickerStyles}
+          .calendars {
+            display: flex;
+          }
+          .daterangepicker {
+            left: 0px !important;
+            top: auto;
+            background-color: var(--card-background-color);
+            border: none;
+            border-radius: var(--ha-card-border-radius, 4px);
+            box-shadow: var(
+              --ha-card-box-shadow,
+              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+            );
+            color: var(--primary-text-color);
+            min-width: initial !important;
+          }
+          .daterangepicker:after {
+            border-bottom: 6px solid var(--card-background-color);
+          }
+          .daterangepicker .calendar-table {
+            background-color: var(--card-background-color);
+            border: none;
+          }
+          .daterangepicker .calendar-table td,
+          .daterangepicker .calendar-table th {
+            background-color: transparent;
+            color: var(--secondary-text-color);
+            border-radius: 0;
+            outline: none;
+            width: 32px;
+            height: 32px;
+          }
+          .daterangepicker td.off,
+          .daterangepicker td.off.end-date,
+          .daterangepicker td.off.in-range,
+          .daterangepicker td.off.start-date {
+            background-color: var(--secondary-background-color);
+            color: var(--disabled-text-color);
+          }
+          .daterangepicker td.in-range {
+            background-color: var(--light-primary-color);
+            color: var(--primary-text-color);
+          }
+          .daterangepicker td.active,
+          .daterangepicker td.active:hover {
+            background-color: var(--primary-color);
+            color: var(--text-primary-color);
+          }
+          .daterangepicker td.start-date.end-date {
+            border-radius: 50%;
+          }
+          .daterangepicker td.start-date {
+            border-radius: 50% 0 0 50%;
+          }
+          .daterangepicker td.end-date {
+            border-radius: 0 50% 50% 0;
+          }
+          .reportrange-text {
+            background: none !important;
+            padding: 0 !important;
+            border: none !important;
+          }
+          .daterangepicker .calendar-table .next span,
+          .daterangepicker .calendar-table .prev span {
+            border: solid var(--primary-text-color);
+            border-width: 0 2px 2px 0;
+          }
+          .daterangepicker .ranges li {
+            outline: none;
+          }
+          .daterangepicker .ranges li:hover {
+            background-color: var(--secondary-background-color);
+          }
+          .daterangepicker .ranges li.active {
+            background-color: var(--primary-color);
+            color: var(--text-primary-color);
+          }
+          .daterangepicker select.ampmselect,
+          .daterangepicker select.hourselect,
+          .daterangepicker select.minuteselect,
+          .daterangepicker select.secondselect {
+            background: transparent;
+            border: 1px solid var(--divider-color);
+            color: var(--primary-color);
+          }
+          .daterangepicker .drp-buttons .btn {
+            border: 1px solid var(--primary-color);
+            background-color: transparent;
+            color: var(--primary-color);
+            border-radius: 4px;
+            padding: 8px;
+            cursor: pointer;
+          }
+          .calendars-container {
+            flex-direction: column;
+            align-items: center;
+          }
+          .drp-calendar.col.right .calendar-table {
+            display: none;
+          }
+          .daterangepicker.show-ranges .drp-calendar.left {
+            border-left: 0px;
+          }
+          .daterangepicker .drp-calendar.left {
+            padding: 8px;
+          }
+          .daterangepicker.show-calendar .ranges {
+            margin-top: 0;
+            padding-top: 8px;
+            border-right: 1px solid var(--divider-color);
+          }
+          @media only screen and (max-width: 800px) {
+            .calendars {
+              flex-direction: column;
+            }
+          }
+          .calendar-table {
+            padding: 0 !important;
+          }     
+        `;
+    const shadowRoot = this.shadowRoot!;
+    shadowRoot.appendChild(style);
+    // Stop click events from reaching the document, otherwise it will close the picker immediately.
+    shadowRoot.addEventListener("click", (ev) => ev.stopPropagation());
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "date-range-picker": DateRangePickerElement;
+  }
+}

src/components/device/ha-device-picker.ts

@@ -52,7 +52,7 @@ const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
       }
     </style>
     <paper-item>
-      <paper-item-body two-line="">    
+      <paper-item-body two-line="">
         <div class='name'>[[item.name]]</div>
         <div secondary>[[item.area]]</div>
       </paper-item-body>
@@ -188,7 +188,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
             this.hass,
             deviceEntityLookup[device.id]
           ),
-          area: device.area_id ? areaLookup[device.area_id].name : "No area",
+          area: device.area_id
+            ? areaLookup[device.area_id].name
+            : this.hass.localize("ui.components.device-picker.no_area"),
         };
       });
       if (outputDevices.length === 1) {

src/components/entity/ha-entity-picker.ts

@@ -38,15 +38,14 @@ const rowRenderer = (
         }
       </style>
       <paper-icon-item>
-        <state-badge state-obj="[[item]]" slot="item-icon"></state-badge>
+        <state-badge slot="item-icon"></state-badge>
         <paper-item-body two-line="">
-          <div class='name'>[[_computeStateName(item)]]</div>
-          <div secondary>[[item.entity_id]]</div>
+          <div class='name'></div>
+          <div secondary></div>
         </paper-item-body>
       </paper-icon-item>
     `;
   }
-
   root.querySelector("state-badge")!.stateObj = model.item;
   root.querySelector(".name")!.textContent = computeStateName(model.item);
   root.querySelector("[secondary]")!.textContent = model.item.entity_id;
@@ -148,6 +147,10 @@ class HaEntityPicker extends LitElement {
     }
   );
 
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("_opened") && this._opened) {
       const states = this._getStates(

src/components/ha-button-menu.ts

@@ -40,7 +40,7 @@ export class HaButtonMenu extends LitElement {
   static get styles(): CSSResult {
     return css`
       :host {
-        display: block;
+        display: inline-block;
         position: relative;
       }
     `;

src/components/ha-camera-stream.ts

@@ -176,7 +176,9 @@ class HaCameraStream extends LitElement {
     Hls: HLSModule,
     url: string
   ) {
-    const hls = new Hls();
+    const hls = new Hls({
+      liveBackBufferLength: 60,
+    });
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {

src/components/ha-card.ts

@@ -12,6 +12,8 @@ import {
 class HaCard extends LitElement {
   @property() public header?: string;
 
+  @property({ type: Boolean, reflect: true }) public outlined = false;
+
   static get styles(): CSSResult {
     return css`
       :host {
@@ -19,12 +21,12 @@ class HaCard extends LitElement {
           --ha-card-background,
           var(--paper-card-background-color, white)
         );
-        border-radius: var(--ha-card-border-radius, 2px);
+        border-radius: var(--ha-card-border-radius, 4px);
         box-shadow: var(
           --ha-card-box-shadow,
-          0 2px 2px 0 rgba(0, 0, 0, 0.14),
-          0 1px 5px 0 rgba(0, 0, 0, 0.12),
-          0 3px 1px -2px rgba(0, 0, 0, 0.2)
+          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
         );
         color: var(--primary-text-color);
         display: block;
@@ -32,6 +34,16 @@ class HaCard extends LitElement {
         position: relative;
       }
 
+      :host([outlined]) {
+        box-shadow: none;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
+        );
+      }
+
       .card-header,
       :host ::slotted(.card-header) {
         color: var(--ha-card-header-color, --primary-text-color);

src/components/ha-checkbox.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-checkbox";
 import type { Checkbox } from "@material/mwc-checkbox";
-import { style } from "@material/mwc-checkbox/mwc-checkbox-css";
-import { css, CSSResult, customElement } from "lit-element";
+import { customElement } from "lit-element";
 import type { Constructor } from "../types";
 
 const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
@@ -12,18 +11,6 @@ export class HaCheckbox extends MwcCheckbox {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
-
-  protected static get styles(): CSSResult[] {
-    return [
-      style,
-      css`
-        .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
-          ~ .mdc-checkbox__background {
-          border-color: rgba(var(--rgb-primary-text-color), 0.54);
-        }
-      `,
-    ];
-  }
 }
 
 declare global {

src/components/ha-combo-box.js

@@ -12,8 +12,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
     return html`
       <style>
         paper-input > ha-icon-button {
-          width: 24px;
-          height: 24px;
+          --mdc-icon-button-size: 24px;
           padding: 2px;
           color: var(--secondary-text-color);
         }

src/components/ha-cover-controls.js

@@ -30,7 +30,7 @@ class HaCoverControls extends PolymerElement {
           icon="hass:stop"
           on-click="onStopTap"
           invisible$="[[!entityObj.supportsStop]]"
-          disabled="[[computStopDisabled(stateObj)]]"
+          disabled="[[computeStopDisabled(stateObj)]]"
         ></ha-icon-button>
         <ha-icon-button
           aria-label="Close cover"

src/components/ha-cover-tilt-controls.js

@@ -31,7 +31,7 @@ class HaCoverTiltControls extends PolymerElement {
         icon="hass:stop"
         on-click="onStopTiltTap"
         invisible$="[[!entityObj.supportsStopTilt]]"
-        disabled="[[computStopDisabled(stateObj)]]"
+        disabled="[[computeStopDisabled(stateObj)]]"
         title="Stop tilt"
       ></ha-icon-button>
       <ha-icon-button

src/components/ha-date-range-picker.ts

@@ -0,0 +1,195 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+  PropertyValues,
+} from "lit-element";
+import { HomeAssistant } from "../types";
+import { mdiCalendar } from "@mdi/js";
+import { formatDateTime } from "../common/datetime/format_date_time";
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import "./ha-svg-icon";
+import "@polymer/paper-input/paper-input";
+import "@material/mwc-list/mwc-list";
+import "./date-range-picker";
+
+export interface DateRangePickerRanges {
+  [key: string]: [Date, Date];
+}
+
+@customElement("ha-date-range-picker")
+export class HaDateRangePicker extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public startDate!: Date;
+
+  @property() public endDate!: Date;
+
+  @property() public ranges?: DateRangePickerRanges;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) private _hour24format = false;
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!oldHass || oldHass.language !== this.hass.language) {
+        this._hour24format = this._compute24hourFormat();
+      }
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <date-range-picker
+        ?disabled=${this.disabled}
+        twentyfour-hours=${this._hour24format}
+        start-date=${this.startDate}
+        end-date=${this.endDate}
+        ?ranges=${this.ranges !== undefined}
+      >
+        <div slot="input" class="date-range-inputs">
+          <ha-svg-icon path=${mdiCalendar}></ha-svg-icon>
+          <paper-input
+            .value=${formatDateTime(this.startDate, this.hass.language)}
+            .label=${this.hass.localize(
+              "ui.components.date-range-picker.start_date"
+            )}
+            .disabled=${this.disabled}
+            @click=${this._handleInputClick}
+            readonly
+          ></paper-input>
+          <paper-input
+            .value=${formatDateTime(this.endDate, this.hass.language)}
+            label=${this.hass.localize(
+              "ui.components.date-range-picker.end_date"
+            )}
+            .disabled=${this.disabled}
+            @click=${this._handleInputClick}
+            readonly
+          ></paper-input>
+        </div>
+        ${this.ranges
+          ? html`<div slot="ranges" class="date-range-ranges">
+              <mwc-list @click=${this._setDateRange}>
+                ${Object.entries(this.ranges).map(
+                  ([name, dates]) => html`<mwc-list-item
+                    .activated=${this.startDate.getTime() ===
+                      dates[0].getTime() &&
+                    this.endDate.getTime() === dates[1].getTime()}
+                    .startDate=${dates[0]}
+                    .endDate=${dates[1]}
+                  >
+                    ${name}
+                  </mwc-list-item>`
+                )}
+              </mwc-list>
+            </div>`
+          : ""}
+        <div slot="footer" class="date-range-footer">
+          <mwc-button @click=${this._cancelDateRange}
+            >${this.hass.localize("ui.common.cancel")}</mwc-button
+          >
+          <mwc-button @click=${this._applyDateRange}
+            >${this.hass.localize(
+              "ui.components.date-range-picker.select"
+            )}</mwc-button
+          >
+        </div>
+      </date-range-picker>
+    `;
+  }
+
+  private _compute24hourFormat() {
+    return (
+      new Intl.DateTimeFormat(this.hass.language, {
+        hour: "numeric",
+      })
+        .formatToParts(new Date(2020, 0, 1, 13))
+        .find((part) => part.type === "hour")!.value.length === 2
+    );
+  }
+
+  private _setDateRange(ev: Event) {
+    const target = ev.target as any;
+    const startDate = target.startDate;
+    const endDate = target.endDate;
+    const dateRangePicker = this._dateRangePicker;
+    dateRangePicker.clickRange([startDate, endDate]);
+    dateRangePicker.clickedApply();
+  }
+
+  private _cancelDateRange() {
+    this._dateRangePicker.clickCancel();
+  }
+
+  private _applyDateRange() {
+    this._dateRangePicker.clickedApply();
+  }
+
+  private get _dateRangePicker() {
+    const dateRangePicker = this.shadowRoot!.querySelector(
+      "date-range-picker"
+    ) as any;
+    return dateRangePicker.vueComponent.$children[0];
+  }
+
+  private _handleInputClick() {
+    // close the date picker, so it will open again on the click event
+    if (this._dateRangePicker.open) {
+      this._dateRangePicker.open = false;
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-svg-icon {
+        margin-right: 8px;
+      }
+
+      .date-range-inputs {
+        display: flex;
+        align-items: center;
+      }
+
+      .date-range-ranges {
+        border-right: 1px solid var(--divider-color);
+      }
+
+      @media only screen and (max-width: 800px) {
+        .date-range-ranges {
+          border-right: none;
+          border-bottom: 1px solid var(--divider-color);
+        }
+      }
+
+      .date-range-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 8px;
+        border-top: 1px solid var(--divider-color);
+      }
+
+      paper-input {
+        display: inline-block;
+        max-width: 200px;
+      }
+
+      paper-input:last-child {
+        margin-left: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-date-range-picker": HaDateRangePicker;
+  }
+}

src/components/ha-dialog.ts

@@ -13,7 +13,7 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
   <mwc-icon-button
     aria-label=${hass.localize("ui.dialogs.generic.close")}
     dialogAction="close"
-    class="close_button"
+    class="header_button"
   >
     <ha-svg-icon path=${mdiClose}></ha-svg-icon>
   </mwc-icon-button>
@@ -25,6 +25,9 @@ export class HaDialog extends MwcDialog {
     return [
       style,
       css`
+        .mdc-dialog {
+          z-index: var(--dialog-z-index, 7);
+        }
         .mdc-dialog__actions {
           justify-content: var(--justify-action-buttons, flex-end);
         }
@@ -35,10 +38,15 @@ export class HaDialog extends MwcDialog {
           display: block;
           height: 20px;
         }
-        .close_button {
+        .mdc-dialog__content {
+          padding: var(--dialog-content-padding, 20px 24px);
+        }
+        .header_button {
           position: absolute;
           right: 16px;
           top: 12px;
+          text-decoration: none;
+          color: inherit;
         }
       `,
     ];

src/components/ha-form/ha-form-string.ts

@@ -49,7 +49,6 @@ export class HaFormString extends LitElement implements HaFormElement {
           >
             <ha-icon-button
               toggles
-              .active=${this._unmaskedPassword}
               slot="suffix"
               .icon=${this._unmaskedPassword ? "hass:eye-off" : "hass:eye"}
               id="iconButton"
@@ -72,8 +71,8 @@ export class HaFormString extends LitElement implements HaFormElement {
         `;
   }
 
-  private _toggleUnmaskedPassword(ev: Event): void {
-    this._unmaskedPassword = (ev.target as any).active;
+  private _toggleUnmaskedPassword(): void {
+    this._unmaskedPassword = !this._unmaskedPassword;
   }
 
   private _valueChanged(ev: Event): void {

src/components/ha-formfield.ts

@@ -0,0 +1,33 @@
+import "@material/mwc-formfield";
+import type { Formfield } from "@material/mwc-formfield";
+import { style } from "@material/mwc-formfield/mwc-formfield-css";
+import { css, CSSResult, customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const MwcFormfield = customElements.get("mwc-formfield") as Constructor<
+  Formfield
+>;
+
+@customElement("ha-formfield")
+export class HaFormfield extends MwcFormfield {
+  protected static get styles(): CSSResult[] {
+    return [
+      style,
+      css`
+        ::slotted(ha-switch) {
+          margin-right: 10px;
+        }
+        [dir="rtl"] ::slotted(ha-switch),
+        ::slotted(ha-switch)[dir="rtl"] {
+          margin-left: 10px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-formfield": HaFormfield;
+  }
+}

src/components/ha-icon-button-arrow-next.ts

@@ -1,17 +1,37 @@
-import { HaIconButton } from "./ha-icon-button";
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+} from "lit-element";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "./ha-svg-icon";
+
+@customElement("ha-icon-button-arrow-next")
+export class HaIconButtonArrowNext extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() private _icon = mdiArrowRight;
 
-export class HaIconButtonArrowNext extends HaIconButton {
   public connectedCallback() {
     super.connectedCallback();
 
     // wait to check for direction since otherwise direction is wrong even though top level is RTL
     setTimeout(() => {
-      this.icon =
+      this._icon =
         window.getComputedStyle(this).direction === "ltr"
-          ? "hass:arrow-right"
-          : "hass:arrow-left";
+          ? mdiArrowRight
+          : mdiArrowLeft;
     }, 100);
   }
+
+  protected render(): TemplateResult {
+    return html`<mwc-icon-button .disabled=${this.disabled}>
+      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+    </mwc-icon-button> `;
+  }
 }
 
 declare global {
@@ -19,5 +39,3 @@ declare global {
     "ha-icon-button-arrow-next": HaIconButtonArrowNext;
   }
 }
-
-customElements.define("ha-icon-button-arrow-next", HaIconButtonArrowNext);

src/components/ha-icon-button-arrow-prev.ts

@@ -1,8 +1,15 @@
-import { LitElement, property, TemplateResult, html } from "lit-element";
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+} from "lit-element";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import "@material/mwc-icon-button/mwc-icon-button";
 import "./ha-svg-icon";
 
+@customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
@@ -32,5 +39,3 @@ declare global {
     "ha-icon-button-arrow-prev": HaIconButtonArrowPrev;
   }
 }
-
-customElements.define("ha-icon-button-arrow-prev", HaIconButtonArrowPrev);

src/components/ha-icon-button-next.ts

@@ -1,17 +1,37 @@
-import { HaIconButton } from "./ha-icon-button";
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+} from "lit-element";
+import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
+import "@material/mwc-icon-button";
+import "./ha-svg-icon";
+
+@customElement("ha-icon-button-next")
+export class HaIconButtonNext extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() private _icon = mdiChevronRight;
 
-export class HaIconButtonNext extends HaIconButton {
   public connectedCallback() {
     super.connectedCallback();
 
     // wait to check for direction since otherwise direction is wrong even though top level is RTL
     setTimeout(() => {
-      this.icon =
+      this._icon =
         window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-right"
-          : "hass:chevron-left";
+          ? mdiChevronRight
+          : mdiChevronLeft;
     }, 100);
   }
+
+  protected render(): TemplateResult {
+    return html`<mwc-icon-button .disabled=${this.disabled}>
+      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+    </mwc-icon-button> `;
+  }
 }
 
 declare global {
@@ -19,5 +39,3 @@ declare global {
     "ha-icon-button-next": HaIconButtonNext;
   }
 }
-
-customElements.define("ha-icon-button-next", HaIconButtonNext);

src/components/ha-icon-button-prev.ts

@@ -1,17 +1,37 @@
-import { HaIconButton } from "./ha-icon-button";
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+} from "lit-element";
+import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "./ha-svg-icon";
+
+@customElement("ha-icon-button-prev")
+export class HaIconButtonPrev extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() private _icon = mdiChevronLeft;
 
-export class HaIconButtonPrev extends HaIconButton {
   public connectedCallback() {
     super.connectedCallback();
 
     // wait to check for direction since otherwise direction is wrong even though top level is RTL
     setTimeout(() => {
-      this.icon =
+      this._icon =
         window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-left"
-          : "hass:chevron-right";
+          ? mdiChevronLeft
+          : mdiChevronRight;
     }, 100);
   }
+
+  protected render(): TemplateResult {
+    return html`<mwc-icon-button .disabled=${this.disabled}>
+      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+    </mwc-icon-button> `;
+  }
 }
 
 declare global {
@@ -19,5 +39,3 @@ declare global {
     "ha-icon-button-prev": HaIconButtonPrev;
   }
 }
-
-customElements.define("ha-icon-button-prev", HaIconButtonPrev);

src/components/ha-icon-button.ts

@@ -24,30 +24,24 @@ export class HaIconButton extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button
-        .label=${this.label || this.icon}
-        ?disabled=${this.disabled}
-        @click=${this._handleClick}
-      >
+      <mwc-icon-button .label=${this.label} .disabled=${this.disabled}>
         <ha-icon .icon=${this.icon}></ha-icon>
       </mwc-icon-button>
     `;
   }
 
-  private _handleClick(ev) {
-    if (this.disabled) {
-      ev.stopPropagation();
-    }
-  }
-
   static get styles(): CSSResult {
     return css`
       :host {
         display: inline-block;
         outline: none;
       }
+      :host([disabled]) {
+        pointer-events: none;
+      }
       mwc-icon-button {
         --mdc-theme-on-primary: currentColor;
+        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
       }
       ha-icon {
         --ha-icon-display: inline;

src/components/ha-icon.ts

@@ -28,6 +28,8 @@ checkCacheVersion();
 
 const debouncedWriteCache = debounce(() => writeCache(chunks), 2000);
 
+const cachedIcons: { [key: string]: string } = {};
+
 @customElement("ha-icon")
 export class HaIcon extends LitElement {
   @property() public icon?: string;
@@ -83,9 +85,22 @@ export class HaIcon extends LitElement {
 
     this._legacy = false;
 
-    const cachedPath: string = await getIcon(iconName);
-    if (cachedPath) {
-      this._path = cachedPath;
+    if (iconName in cachedIcons) {
+      this._path = cachedIcons[iconName];
+      return;
+    }
+
+    let databaseIcon: string | undefined;
+    try {
+      databaseIcon = await getIcon(iconName);
+    } catch (_err) {
+      // Firefox in private mode doesn't support IDB
+      databaseIcon = undefined;
+    }
+
+    if (databaseIcon) {
+      this._path = databaseIcon;
+      cachedIcons[iconName] = databaseIcon;
       return;
     }
     const chunk = findIconChunk(iconName);
@@ -111,6 +126,7 @@ export class HaIcon extends LitElement {
   private async _setPath(promise: Promise<Icons>, iconName: string) {
     const iconPack = await promise;
     this._path = iconPack[iconName];
+    cachedIcons[iconName] = iconPack[iconName];
   }
 
   static get styles(): CSSResult {

src/components/ha-markdown-element.ts

@@ -0,0 +1,71 @@
+import { customElement, property, UpdatingElement } from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+import { renderMarkdown } from "../resources/render-markdown";
+
+@customElement("ha-markdown-element")
+class HaMarkdownElement extends UpdatingElement {
+  @property() public content?;
+
+  @property({ type: Boolean }) public allowSvg = false;
+
+  @property({ type: Boolean }) public breaks = false;
+
+  protected update(changedProps) {
+    super.update(changedProps);
+    if (this.content !== undefined) {
+      this._render();
+    }
+  }
+
+  private async _render() {
+    this.innerHTML = await renderMarkdown(
+      this.content,
+      {
+        breaks: this.breaks,
+        gfm: true,
+        tables: true,
+      },
+      {
+        allowSvg: this.allowSvg,
+      }
+    );
+
+    this._resize();
+
+    const walker = document.createTreeWalker(
+      this,
+      1 /* SHOW_ELEMENT */,
+      null,
+      false
+    );
+
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+
+      // Open external links in a new window
+      if (
+        node instanceof HTMLAnchorElement &&
+        node.host !== document.location.host
+      ) {
+        node.target = "_blank";
+        node.rel = "noreferrer";
+
+        // protect referrer on external links and deny window.opener access for security reasons
+        // (see https://mathiasbynens.github.io/rel-noopener/)
+        node.rel = "noreferrer noopener";
+
+        // Fire a resize event when images loaded to notify content resized
+      } else if (node instanceof HTMLImageElement) {
+        node.addEventListener("load", this._resize);
+      }
+    }
+  }
+
+  private _resize = () => fireEvent(this, "iron-resize");
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-markdown-element": HaMarkdownElement;
+  }
+}

src/components/ha-markdown.ts

@@ -1,74 +1,80 @@
-import { customElement, property, UpdatingElement } from "lit-element";
-// @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import markdownWorker from "workerize-loader!../resources/markdown_worker";
-import { fireEvent } from "../common/dom/fire_event";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
 
-let worker: any | undefined;
+import "./ha-markdown-element";
 
 @customElement("ha-markdown")
-class HaMarkdown extends UpdatingElement {
-  @property() public content = "";
+class HaMarkdown extends LitElement {
+  @property() public content?;
 
   @property({ type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 
-  protected update(changedProps) {
-    super.update(changedProps);
-
-    if (!worker) {
-      worker = markdownWorker();
+  protected render(): TemplateResult {
+    if (!this.content) {
+      return html``;
     }
 
-    this._render();
+    return html`<ha-markdown-element
+      .content=${this.content}
+      .allowSvg=${this.allowSvg}
+      .breaks=${this.breaks}
+    ></ha-markdown-element>`;
   }
 
-  private async _render() {
-    this.innerHTML = await worker.renderMarkdown(
-      this.content,
-      {
-        breaks: this.breaks,
-        gfm: true,
-        tables: true,
-      },
-      {
-        allowSvg: this.allowSvg,
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
       }
-    );
-
-    this._resize();
-
-    const walker = document.createTreeWalker(
-      this,
-      1 /* SHOW_ELEMENT */,
-      null,
-      false
-    );
-
-    while (walker.nextNode()) {
-      const node = walker.currentNode;
-
-      // Open external links in a new window
-      if (
-        node instanceof HTMLAnchorElement &&
-        node.host !== document.location.host
-      ) {
-        node.target = "_blank";
-        node.rel = "noreferrer";
-
-        // protect referrer on external links and deny window.opener access for security reasons
-        // (see https://mathiasbynens.github.io/rel-noopener/)
-        node.rel = "noreferrer noopener";
-
-        // Fire a resize event when images loaded to notify content resized
-      } else if (node) {
-        node.addEventListener("load", this._resize);
+      ha-markdown-element {
+        -ms-user-select: text;
+        -webkit-user-select: text;
+        -moz-user-select: text;
       }
-    }
+      ha-markdown-element > *:first-child {
+        margin-top: 0;
+      }
+      ha-markdown-element > *:last-child {
+        margin-bottom: 0;
+      }
+      ha-markdown-element a {
+        color: var(--primary-color);
+      }
+      ha-markdown-element img {
+        max-width: 100%;
+      }
+      ha-markdown-element code,
+      pre {
+        background-color: var(--markdown-code-background-color, none);
+        border-radius: 3px;
+      }
+      ha-markdown-element code {
+        font-size: 85%;
+        padding: 0.2em 0.4em;
+      }
+      ha-markdown-element pre code {
+        padding: 0;
+      }
+      ha-markdown-element pre {
+        padding: 16px;
+        overflow: auto;
+        line-height: 1.45;
+      }
+      ha-markdown-element h2 {
+        font-size: 1.5em !important;
+        font-weight: bold !important;
+      }
+    `;
   }
-
-  private _resize = () => fireEvent(this, "iron-resize");
 }
 
 declare global {

src/components/ha-menu-button.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-icon-button";
+import { mdiMenu } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -12,8 +14,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { HomeAssistant } from "../types";
-import "./ha-icon-button";
-import { mdiMenu } from "@mdi/js";
+import "./ha-svg-icon";
 
 @customElement("ha-menu-button")
 class HaMenuButton extends LitElement {

src/components/ha-sidebar.ts

@@ -1,6 +1,12 @@
-import { mdiBell, mdiCellphoneSettingsVariant } from "@mdi/js";
+import "@material/mwc-icon-button";
+import {
+  mdiBell,
+  mdiCellphoneSettingsVariant,
+  mdiMenuOpen,
+  mdiMenu,
+  mdiViewDashboard,
+} from "@mdi/js";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "./ha-icon-button";
 import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
@@ -29,9 +35,9 @@ import {
   getExternalConfig,
 } from "../external_app/external_config";
 import type { HomeAssistant, PanelInfo } from "../types";
-import "./ha-svg-icon";
 import "./ha-icon";
 import "./ha-menu-button";
+import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
@@ -153,13 +159,16 @@ class HaSidebar extends LitElement {
       <div class="menu">
         ${!this.narrow
           ? html`
-              <ha-icon-button
-                aria-label=${hass.localize("ui.sidebar.sidebar_toggle")}
-                .icon=${hass.dockedSidebar === "docked"
-                  ? "hass:menu-open"
-                  : "hass:menu"}
+              <mwc-icon-button
+                .label=${hass.localize("ui.sidebar.sidebar_toggle")}
                 @click=${this._toggleSidebar}
-              ></ha-icon-button>
+              >
+                <ha-svg-icon
+                  .path=${hass.dockedSidebar === "docked"
+                    ? mdiMenuOpen
+                    : mdiMenu}
+                ></ha-svg-icon>
+              </mwc-icon-button>
             `
           : ""}
         <span class="title">Home Assistant</span>
@@ -174,14 +183,16 @@ class HaSidebar extends LitElement {
       >
         ${this._renderPanel(
           defaultPanel.url_path,
-          defaultPanel.icon || "hass:view-dashboard",
-          defaultPanel.title || hass.localize("panel.states")
+          defaultPanel.title || hass.localize("panel.states"),
+          defaultPanel.icon,
+          !defaultPanel.icon ? mdiViewDashboard : undefined
         )}
         ${beforeSpacer.map((panel) =>
           this._renderPanel(
             panel.url_path,
+            hass.localize(`panel.${panel.title}`) || panel.title,
             panel.icon,
-            hass.localize(`panel.${panel.title}`) || panel.title
+            undefined
           )
         )}
         <div class="spacer" disabled></div>
@@ -189,8 +200,9 @@ class HaSidebar extends LitElement {
         ${afterSpacer.map((panel) =>
           this._renderPanel(
             panel.url_path,
+            hass.localize(`panel.${panel.title}`) || panel.title,
             panel.icon,
-            hass.localize(`panel.${panel.title}`) || panel.title
+            undefined
           )
         )}
         ${this._externalConfig && this._externalConfig.hasSettingsScreen
@@ -443,7 +455,12 @@ class HaSidebar extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  private _renderPanel(urlPath, icon, title) {
+  private _renderPanel(
+    urlPath: string,
+    title: string | null,
+    icon?: string | null,
+    iconPath?: string | null
+  ) {
     return html`
       <a
         aria-role="option"
@@ -454,7 +471,12 @@ class HaSidebar extends LitElement {
         @mouseleave=${this._itemMouseLeave}
       >
         <paper-icon-item>
-          <ha-icon slot="item-icon" .icon="${icon}"></ha-icon>
+          ${iconPath
+            ? html`<ha-svg-icon
+                slot="item-icon"
+                .path=${iconPath}
+              ></ha-svg-icon>`
+            : html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
           <span class="item-text">${title}</span>
         </paper-icon-item>
       </a>
@@ -496,13 +518,13 @@ class HaSidebar extends LitElement {
         width: 256px;
       }
 
-      .menu ha-icon-button {
+      .menu mwc-icon-button {
         color: var(--sidebar-icon-color);
       }
-      :host([expanded]) .menu ha-icon-button {
+      :host([expanded]) .menu mwc-icon-button {
         margin-right: 23px;
       }
-      :host([expanded][_rtl]) .menu ha-icon-button {
+      :host([expanded][_rtl]) .menu mwc-icon-button {
         margin-right: 0px;
         margin-left: 23px;
       }
@@ -714,7 +736,7 @@ class HaSidebar extends LitElement {
         font-weight: 500;
       }
 
-      :host([_rtl]) .menu ha-icon-button {
+      :host([_rtl]) .menu mwc-icon-button {
         -webkit-transform: scaleX(-1);
         transform: scaleX(-1);
       }