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

@@ -11,17 +11,12 @@
   "parserOptions": {
     "ecmaVersion": 2020,
     "ecmaFeatures": {
-      "jsx": true,
       "modules": true
     },
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
   "settings": {
-    "react": {
-      "pragma": "h",
-      "version": "15.0"
-    },
     "import/resolver": {
       "webpack": {
         "config": "./webpack.config.js"
@@ -71,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,
@@ -88,13 +79,6 @@
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0
   },
-  "plugins": [
-    "disable",
-    "import",
-    "react",
-    "lit",
-    "prettier",
-    "@typescript-eslint"
-  ],
+  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"
 }

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -62,6 +62,18 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 - Browser and browser version:
 - Operating system:
 
+## State of relevant entities
+
+<!--
+  If your issue is about how an entity is shown in the UI, please add the state
+  and attributes for all situations with a screenshot of the UI.
+  You can find this information at `/developer-tools/state`
+-->
+
+```yaml
+
+```
+
 ## Problem-relevant configuration
 
 <!--

.github/workflows/ci.yaml

@@ -35,7 +35,7 @@ jobs:
         env:
           CI: true
       - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
+        run: ./node_modules/.bin/gulp gen-icons-json
       - name: Build translations
         run: ./node_modules/.bin/gulp build-translations
       - name: Run eslint
@@ -94,7 +94,7 @@ jobs:
       - name: Build Application
         run: ./node_modules/.bin/gulp build-app
         env:
-          TRAVIS: "true"
+          IS_TEST: "true"
   supervisor:
     runs-on: ubuntu-latest
     needs: [lint, test]
@@ -122,4 +122,4 @@ jobs:
       - name: Build Application
         run: ./node_modules/.bin/gulp build-hassio
         env:
-          TRAVIS: "true"
+          IS_TEST: "true"

.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 }}

.gitignore

@@ -5,7 +5,6 @@ npm-debug.log
 .DS_Store
 hass_frontend/*
 .reify-cache
-demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]

.prettierignore

@@ -2,36 +2,9 @@ build
 build-translations/*
 translations/*
 node_modules/*
-npm-debug.log
-.DS_Store
 hass_frontend/*
-.reify-cache
-demo/hademo-icons.html
-
-# Python stuff
-*.py[cod]
-*.egg
-*.egg-info
-
-# venv stuff
-pyvenv.cfg
 pip-selfcheck.json
-venv
-.venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
 !.vscode/extensions.json
-
-# Cast dev settings 
-src/cast/dev_const.ts
-
-# Secrets
-.lokalise_token
-yarn-error.log
-
-#asdf
-.tool-versions

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,50 +0,0 @@
-module.exports.babelLoaderConfig = ({ latestBuild }) => {
-  if (latestBuild === undefined) {
-    throw Error("latestBuild not defined for babel loader config");
-  }
-  return {
-    test: /\.m?js$|\.tsx?$/,
-    use: {
-      loader: "babel-loader",
-      options: {
-        presets: [
-          !latestBuild && [
-            require("@babel/preset-env").default,
-            { modules: false },
-          ],
-          [
-            require("@babel/preset-typescript").default,
-            {
-              jsxPragma: "h",
-            },
-          ],
-        ].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/transform-react-jsx",
-            {
-              pragma: "h",
-            },
-          ],
-          "@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 },
-          ],
-        ],
-      },
-    },
-  };
-};

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

@@ -1,14 +1,32 @@
+const fs = require("fs");
+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";
   },
-  isTravis() {
-    return process.env.TRAVIS === "true";
+  isTest() {
+    return process.env.IS_TEST === "true";
   },
   isNetlify() {
     return process.env.NETLIFY === "true";
   },
+  version() {
+    const version = fs
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+      .match(/\d{8}\.\d+/);
+    if (!version) {
+      throw Error("Version not found");
+    }
+    return version[0];
+  },
 };

build-scripts/gulp/app.js

@@ -1,16 +1,17 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
-const envVars = require("../env");
+const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-app",
@@ -20,14 +21,14 @@ gulp.task(
     },
     "clean",
     gulp.parallel(
-      "gen-service-worker-dev",
-      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
+      "gen-service-worker-app-dev",
+      "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
       "build-translations"
     ),
-    "copy-static",
-    "webpack-watch-app"
+    "copy-static-app",
+    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
   )
 );
 
@@ -38,15 +39,15 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
-    "copy-static",
-    "webpack-prod-app",
+    gulp.parallel("gen-icons-json", "build-translations"),
+    "copy-static-app",
+    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTravis() ? [] : ["compress-app"]),
+    (env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",
-      "gen-service-worker-prod"
+      "gen-service-worker-app-prod"
     )
   )
 );

build-scripts/gulp/cast.js

@@ -1,12 +1,14 @@
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-cast",
@@ -15,14 +17,11 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-cast",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-index-cast-dev",
-      "build-translations"
-    ),
+    "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"
   )
 );
 
@@ -33,9 +32,10 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-cast",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "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,33 +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())
-    .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())
-    .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())
-    .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())
-    .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")));
 
-  return merge(jsLatest, jsEs5, polyfills, translations);
+  const icons = gulp
+    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations, icons);
 });
 
 gulp.task("compress-hassio", function compressApp() {
   return gulp
-    .src(path.resolve(paths.hassio_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,13 +1,16 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-demo",
@@ -16,15 +19,10 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-demo",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-icons-demo",
-      "gen-index-demo-dev",
-      "build-translations"
-    ),
+    "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"
   )
 );
 
@@ -35,14 +33,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-demo",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-icons-demo",
-      "build-translations"
-    ),
+    // Cast needs to be backwards compatible and older HA has no translations
+    "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/download_translations.js

@@ -1,9 +1,14 @@
 const del = require("del");
 const gulp = require("gulp");
+const fs = require("fs");
 const mapStream = require("map-stream");
 
-const inDir = "translations";
-const downloadDir = inDir + "/downloads";
+const inDirFrontend = "translations/frontend";
+const inDirBackend = "translations/backend";
+const downloadDir = "translations/downloads";
+const srcMeta = "src/translations/translationMetadata.json";
+
+const encoding = "utf8";
 
 const tasks = [];
 
@@ -12,7 +17,7 @@ function hasHtml(data) {
 }
 
 function recursiveCheckHasHtml(file, data, errors, recKey) {
-  Object.keys(data).forEach(function(key) {
+  Object.keys(data).forEach(function (key) {
     if (typeof data[key] === "object") {
       const nextRecKey = recKey ? `${recKey}.${key}` : key;
       recursiveCheckHasHtml(file, data[key], errors, nextRecKey);
@@ -25,7 +30,7 @@ function recursiveCheckHasHtml(file, data, errors, recKey) {
 function checkHtml() {
   const errors = [];
 
-  return mapStream(function(file, cb) {
+  return mapStream(function (file, cb) {
     const content = file.contents;
     let error;
     if (content) {
@@ -42,20 +47,36 @@ function checkHtml() {
 }
 
 let taskName = "clean-downloaded-translations";
-gulp.task(taskName, function() {
+gulp.task(taskName, function () {
   return del([`${downloadDir}/**`]);
 });
 tasks.push(taskName);
 
 taskName = "check-translations-html";
-gulp.task(taskName, function() {
+gulp.task(taskName, function () {
   return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
 });
 tasks.push(taskName);
 
+taskName = "check-all-files-exist";
+gulp.task(taskName, function () {
+  const file = fs.readFileSync(srcMeta, { encoding });
+  const meta = JSON.parse(file);
+  Object.keys(meta).forEach((lang) => {
+    if (!fs.existsSync(`${inDirFrontend}/${lang}.json`)) {
+      fs.writeFileSync(`${inDirFrontend}/${lang}.json`, JSON.stringify({}));
+    }
+    if (!fs.existsSync(`${inDirBackend}/${lang}.json`)) {
+      fs.writeFileSync(`${inDirBackend}/${lang}.json`, JSON.stringify({}));
+    }
+  });
+  return Promise.resolve();
+});
+tasks.push(taskName);
+
 taskName = "move-downloaded-translations";
-gulp.task(taskName, function() {
-  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDir));
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDirFrontend));
 });
 tasks.push(taskName);
 
@@ -65,6 +86,7 @@ gulp.task(
   gulp.series(
     "check-translations-html",
     "move-downloaded-translations",
+    "check-all-files-exist",
     "clean-downloaded-translations"
   )
 );

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) =>
@@ -47,34 +52,37 @@ gulp.task("gen-pages-dev", (done) => {
   for (const page of PAGES) {
     const content = renderTemplate(page, {
       latestPageJS: `/frontend_latest/${page}.js`,
-      latestHassIconsJS: "/frontend_latest/hass-icons.js",
 
-      es5Compatibility: "/frontend_es5/compatibility.js",
       es5PageJS: `/frontend_es5/${page}.js`,
-      es5HassIconsJS: "/frontend_es5/hass-icons.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`],
-      latestHassIconsJS: latestManifest["hass-icons.js"],
 
-      es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
-      es5HassIconsJS: es5Manifest["hass-icons.js"],
     });
 
     fs.outputFileSync(
-      path.resolve(config.root, `${page}.html`),
+      path.resolve(paths.app_output_root, `${page}.html`),
       minifyHtml(content)
     );
   }
@@ -88,37 +96,40 @@ gulp.task("gen-index-app-dev", (done) => {
     latestAppJS: "/frontend_latest/app.js",
     latestCoreJS: "/frontend_latest/core.js",
     latestCustomPanelJS: "/frontend_latest/custom-panel.js",
-    latestHassIconsJS: "/frontend_latest/hass-icons.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-    es5HassIconsJS: "/frontend_es5/hass-icons.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"],
-    latestHassIconsJS: latestManifest["hass-icons.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5AppJS: es5Manifest["app.js"],
     es5CoreJS: es5Manifest["core.js"],
     es5CustomPanelJS: es5Manifest["custom-panel.js"],
-    es5HassIconsJS: es5Manifest["hass-icons.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();
 });
 
@@ -127,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
   );
 
@@ -135,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();
@@ -150,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"
   ));
 
@@ -162,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
   );
 
@@ -170,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();
@@ -189,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();
 });
 
@@ -225,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", {
@@ -239,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,13 +1,16 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-gallery",
@@ -16,10 +19,11 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-gallery",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "translations-enable-merge-backend",
+    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"
   )
 );
 
@@ -30,9 +34,10 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-gallery",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "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

@@ -26,14 +26,23 @@ function copyTranslations(staticDir) {
   );
 }
 
+function copyMdiIcons(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // MDI icons output
+  fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
+}
+
 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/")
@@ -44,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
@@ -65,67 +80,68 @@ 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;
-  const staticPath = genStaticPath(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);
+  copyMdiIcons(staticDir);
 
   // Panel assets
-  copyFileDir(
-    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
-    staticPath("panels/calendar/")
-  );
   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);
-  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);
-  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);
-  done();
+  copyMapPanel(paths.gallery_output_static);
+  copyFonts(paths.gallery_output_static);
+  copyTranslations(paths.gallery_output_static);
+  copyMdiIcons(paths.gallery_output_static);
 });

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

@@ -0,0 +1,112 @@
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const hash = require("object-hash");
+
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
+const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
+const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
+const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
+const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+
+const encoding = "utf8";
+
+const getMeta = () => {
+  const file = fs.readFileSync(META_PATH, { encoding });
+  const meta = JSON.parse(file);
+  return meta.map((icon) => {
+    const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
+      encoding,
+    });
+    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+  });
+};
+
+const splitBySize = (meta) => {
+  const chunks = [];
+  const CHUNK_SIZE = 50000;
+
+  let curSize = 0;
+  let startKey;
+  let icons = [];
+
+  Object.values(meta).forEach((icon) => {
+    if (startKey === undefined) {
+      startKey = icon.name;
+    }
+    curSize += icon.path.length;
+    icons.push(icon);
+    if (curSize > CHUNK_SIZE) {
+      chunks.push({
+        startKey,
+        endKey: icon.name,
+        icons,
+      });
+      curSize = 0;
+      startKey = undefined;
+      icons = [];
+    }
+  });
+
+  chunks.push({
+    startKey,
+    icons,
+  });
+
+  return chunks;
+};
+
+const findDifferentiator = (curString, prevString) => {
+  for (let i = 0; i < curString.length; i++) {
+    if (curString[i] !== prevString[i]) {
+      return curString.substring(0, i + 1);
+    }
+  }
+  throw new Error("Cannot find differentiator", curString, prevString);
+};
+
+gulp.task("gen-icons-json", (done) => {
+  const meta = getMeta();
+  const split = splitBySize(meta);
+
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+  const parts = [];
+
+  let lastEnd;
+  split.forEach((chunk) => {
+    let startKey;
+    if (lastEnd === undefined) {
+      chunk.startKey = undefined;
+      startKey = undefined;
+    } else {
+      startKey = findDifferentiator(chunk.startKey, lastEnd);
+    }
+    lastEnd = chunk.endKey;
+
+    const output = {};
+    chunk.icons.forEach((icon) => {
+      output[icon.name] = icon.path;
+    });
+    const filename = hash(output);
+    parts.push({ start: startKey, file: filename });
+    fs.writeFileSync(
+      path.resolve(OUTPUT_DIR, `${filename}.json`),
+      JSON.stringify(output)
+    );
+  });
+
+  const file = fs.readFileSync(PACKAGE_PATH, { encoding });
+  const package = JSON.parse(file);
+
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconMetadata.json"),
+    JSON.stringify({ version: package.version, parts })
+  );
+
+  done();
+});

build-scripts/gulp/gen-icons.js

@@ -1,127 +0,0 @@
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs");
-const paths = require("../paths");
-const { mapFiles } = require("../util");
-
-const ICON_PACKAGE_PATH = path.resolve(
-  __dirname,
-  "../../node_modules/@mdi/svg/"
-);
-const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
-const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
-const OUTPUT_DIR = path.resolve(__dirname, "../../build");
-const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "mdi.html");
-const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "hass-icons.html");
-
-const BUILT_IN_PANEL_ICONS = [
-  "calendar", // Calendar
-  "settings", // Config
-  "home-assistant", // Hass.io
-  "poll-box", // History panel
-  "format-list-bulleted-type", // Logbook
-  "mailbox", // Mailbox
-  "tooltip-account", // Map
-  "cart", // Shopping List
-  "hammer", // developer-tools
-];
-
-// Given an icon name, load the SVG file
-function loadIcon(name) {
-  const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
-  try {
-    return fs.readFileSync(iconPath, "utf-8");
-  } catch (err) {
-    return null;
-  }
-}
-
-// Given an SVG file, convert it to an iron-iconset-svg definition
-function transformXMLtoPolymer(name, xml) {
-  const start = xml.indexOf("><path") + 1;
-  const end = xml.length - start - 6;
-  const pth = xml.substr(start, end);
-  return `<g id="${name}">${pth}</g>`;
-}
-
-// Given an iconset name and icon names, generate a polymer iconset
-function generateIconset(iconsetName, iconNames) {
-  const iconDefs = Array.from(iconNames)
-    .map((name) => {
-      const iconDef = loadIcon(name);
-      if (!iconDef) {
-        throw new Error(`Unknown icon referenced: ${name}`);
-      }
-      return transformXMLtoPolymer(name, iconDef);
-    })
-    .join("");
-  return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
-}
-
-// Find all icons used by the project.
-function findIcons(searchPath, iconsetName) {
-  const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
-  const icons = new Set();
-  function processFile(filename) {
-    const content = fs.readFileSync(filename);
-    let match;
-    // eslint-disable-next-line
-    while ((match = iconRegex.exec(content))) {
-      // strip off "hass:" and add to set
-      icons.add(match[0].substr(iconsetName.length + 1));
-    }
-  }
-  mapFiles(searchPath, ".js", processFile);
-  mapFiles(searchPath, ".ts", processFile);
-  return icons;
-}
-
-gulp.task("gen-icons-mdi", (done) => {
-  const meta = JSON.parse(
-    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
-  );
-  const iconNames = meta.map((iconInfo) => iconInfo.name);
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
-  done();
-});
-
-gulp.task("gen-icons-app", (done) => {
-  const iconNames = findIcons("./src", "hass");
-  BUILT_IN_PANEL_ICONS.forEach((name) => iconNames.add(name));
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
-  done();
-});
-
-gulp.task("gen-icons-demo", (done) => {
-  const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
-  fs.writeFileSync(
-    path.resolve(paths.demo_dir, "hademo-icons.html"),
-    generateIconset("hademo", iconNames)
-  );
-  done();
-});
-
-gulp.task("gen-icons-hassio", (done) => {
-  const iconNames = findIcons(
-    path.resolve(paths.hassio_dir, "./src"),
-    "hassio"
-  );
-  // Find hassio icons inside HA main repo.
-  for (const item of findIcons(
-    path.resolve(paths.polymer_dir, "./src"),
-    "hassio"
-  )) {
-    iconNames.add(item);
-  }
-  fs.writeFileSync(
-    path.resolve(paths.hassio_dir, "hassio-icons.html"),
-    generateIconset("hassio", iconNames)
-  );
-  done();
-});

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.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",
@@ -14,8 +36,9 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
-    "webpack-watch-hassio"
+    "gen-icons-json",
+    writeEntrypointJS,
+    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
 
@@ -26,9 +49,10 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
-    "webpack-prod-hassio",
+    "gen-icons-json",
+    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
+    writeEntrypointJS,
     ...// Don't compress running tests
-    (envVars.isTravis() ? [] : ["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

@@ -5,18 +5,22 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs-extra");
-const config = require("../paths.js");
+const workboxBuild = require("workbox-build");
+const sourceMapUrl = require("source-map-url");
+const paths = require("../paths.js");
 
-const swPath = path.resolve(config.root, "service_worker.js");
+const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
-const writeSW = (content) => fs.outputFileSync(swPath, content.trim() + "\n");
+const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
 
-gulp.task("gen-service-worker-dev", (done) => {
+gulp.task("gen-service-worker-app-dev", (done) => {
   writeSW(
     `
 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();
 });
   `
@@ -24,10 +28,69 @@ self.addEventListener('install', (event) => {
   done();
 });
 
-gulp.task("gen-service-worker-prod", (done) => {
-  fs.copySync(
-    path.resolve(config.output, "service_worker.js"),
-    path.resolve(config.root, "service_worker.js")
+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"
   );
-  done();
+
+  // 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.app_output_root,
+    globPatterns: [
+      "frontend_latest/*.js",
+      // Cache all English translations because we catch them as fallback
+      // Using pattern to match hash instead of * to avoid caching en-GB
+      // 'v' added as valid hash letter because in dev we hash with 'dev'
+      "static/translations/**/en-+([a-fv0-9]).json",
+      // Icon shown on splash screen
+      "static/icons/favicon-192x192.png",
+      "static/icons/favicon.ico",
+      // Common fonts
+      "static/fonts/roboto/Roboto-Light.woff2",
+      "static/fonts/roboto/Roboto-Medium.woff2",
+      "static/fonts/roboto/Roboto-Regular.woff2",
+      "static/fonts/roboto/Roboto-Bold.woff2",
+    ],
+  });
+
+  for (const warning of workboxManifest.warnings) {
+    console.warn(warning);
+  }
+
+  // remove source map and add WB manifest
+  serviceWorkerContent = sourceMapUrl.removeFrom(serviceWorkerContent);
+  serviceWorkerContent = serviceWorkerContent.replace(
+    "WB_MANIFEST",
+    JSON.stringify(workboxManifest.manifestEntries)
+  );
+
+  // Write new file to root
+  fs.writeFileSync(swDest, serviceWorkerContent);
 });

build-scripts/gulp/translations.js

@@ -14,13 +14,20 @@ const { mapFiles } = require("../util");
 const env = require("../env");
 const paths = require("../paths");
 
-const inDir = "translations";
+const inFrontendDir = "translations/frontend";
+const inBackendDir = "translations/backend";
 const workDir = "build-translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
+let mergeBackend = false;
 
-String.prototype.rsplit = function(sep, maxsplit) {
+gulp.task("translations-enable-merge-backend", (done) => {
+  mergeBackend = true;
+  done();
+});
+
+String.prototype.rsplit = function (sep, maxsplit) {
   var split = this.split(sep);
   return maxsplit
     ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
@@ -45,7 +52,7 @@ const TRANSLATION_FRAGMENTS = [
 
 function recursiveFlatten(prefix, data) {
   let output = {};
-  Object.keys(data).forEach(function(key) {
+  Object.keys(data).forEach(function (key) {
     if (typeof data[key] === "object") {
       output = {
         ...output,
@@ -107,7 +114,12 @@ function lokaliseTransform(data, original, file) {
       output[key] = lokaliseTransform(value, original, file);
     } else {
       output[key] = value.replace(re_key_reference, (match, key) => {
-        const replace = key.split("::").reduce((tr, k) => tr[k], original);
+        const replace = key.split("::").reduce((tr, k) => {
+          if (!tr) {
+            throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+          }
+          return tr[k];
+        }, original);
         if (typeof replace !== "string") {
           throw Error(`Invalid key placeholder ${key} in ${file.path}`);
         }
@@ -118,7 +130,7 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function() {
+gulp.task("clean-translations", function () {
   return del([workDir]);
 });
 
@@ -129,7 +141,7 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function(cb) {
+gulp.task("create-test-metadata", function (cb) {
   fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
@@ -147,7 +159,7 @@ gulp.task(
     return gulp
       .src(path.join(paths.translations_src, "en.json"))
       .pipe(
-        transform(function(data, file) {
+        transform(function (data, file) {
           return recursiveEmpty(data);
         })
       )
@@ -165,28 +177,40 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function() {
+gulp.task("build-master-translation", function () {
+  const src = [path.join(paths.translations_src, "en.json")];
+
+  if (mergeBackend) {
+    src.push(path.join(inBackendDir, "en.json"));
+  }
+
   return gulp
-    .src(path.join(paths.translations_src, "en.json"))
+    .src(src)
     .pipe(
-      transform(function(data, file) {
+      transform(function (data, file) {
         return lokaliseTransform(data, data, file);
       })
     )
-    .pipe(rename("translationMaster.json"))
+    .pipe(
+      merge({
+        fileName: "translationMaster.json",
+      })
+    )
     .pipe(gulp.dest(workDir));
 });
 
-gulp.task("build-merged-translations", function() {
+gulp.task("build-merged-translations", function () {
   return gulp
-    .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+    .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
+      allowEmpty: true,
+    })
     .pipe(
-      transform(function(data, file) {
+      transform(function (data, file) {
         return lokaliseTransform(data, data, file);
       })
     )
     .pipe(
-      foreach(function(stream, file) {
+      foreach(function (stream, file) {
         // For each language generate a merged json file. It begins with the master
         // translation as a failsafe for untranslated strings, and merges all parent
         // tags into one file for each specific subtag
@@ -202,7 +226,10 @@ gulp.task("build-merged-translations", function() {
           if (lang === "test") {
             src.push(workDir + "/test.json");
           } else if (lang !== "en") {
-            src.push(inDir + "/" + lang + ".json");
+            src.push(inFrontendDir + "/" + lang + ".json");
+            if (mergeBackend) {
+              src.push(inBackendDir + "/" + lang + ".json");
+            }
           }
         }
         return gulp
@@ -223,7 +250,7 @@ var taskName;
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function() {
+  gulp.task(taskName, function () {
     // Return only the translations for this fragment.
     return gulp
       .src(fullDir + "/*.json")
@@ -242,12 +269,12 @@ TRANSLATION_FRAGMENTS.forEach((fragment) => {
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function() {
+gulp.task(taskName, function () {
   // Remove the fragment translations from the core translation.
   return gulp
     .src(fullDir + "/*.json")
     .pipe(
-      transform((data) => {
+      transform((data, file) => {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
@@ -259,7 +286,7 @@ gulp.task(taskName, function() {
 
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function() {
+gulp.task("build-flattened-translations", function () {
   // Flatten the split versions of our translations, and move them into outDir
   return gulp
     .src(
@@ -269,7 +296,7 @@ gulp.task("build-flattened-translations", function() {
       { base: workDir }
     )
     .pipe(
-      transform(function(data) {
+      transform(function (data) {
         // Polymer.AppLocalizeBehavior requires flattened json
         return flatten(data);
       })
@@ -351,7 +378,7 @@ gulp.task(
         )
         .pipe(merge({}))
         .pipe(
-          transform(function(data) {
+          transform(function (data) {
             const newData = {};
             Object.entries(data).forEach(([key, value]) => {
               // Filter out translations without native name.

build-scripts/gulp/webpack.js

@@ -28,7 +28,7 @@ const runDevServer = ({
     open: true,
     watchContentBase: true,
     contentBase,
-  }).listen(port, listenHost, function(err) {
+  }).listen(port, listenHost, function (err) {
     if (err) {
       throw err;
     }
@@ -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

@@ -1,23 +1,15 @@
 const webpack = require("webpack");
-const fs = require("fs");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const WorkboxPlugin = require("workbox-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
-const { babelLoaderConfig } = require("./babel.js");
-
-let version = fs
-  .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
-  .match(/\d{8}\.\d+/);
-if (!version) {
-  throw Error("Version not found");
-}
-version = version[0];
+const bundle = require("./bundle");
 
 const createWebpackConfig = ({
   entry,
-  outputRoot,
+  outputPath,
+  publicPath,
   defineOverlay,
   isProdBuild,
   latestBuild,
@@ -27,26 +19,28 @@ 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",
         },
-        {
-          test: /\.(html)$/,
-          use: {
-            loader: "html-loader",
-            options: {
-              exportAsEs6Default: true,
-            },
-          },
-        },
       ],
     },
     optimization: {
@@ -56,55 +50,58 @@ 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(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"],
-      alias: {
-        react: "preact-compat",
-        "react-dom": "preact-compat",
-        // Not necessary unless you consume a module using `createClass`
-        "create-react-class": "preact-compat/lib/create-react-class",
-        // Not necessary unless you consume a module requiring `react-dom-factories`
-        "react-dom-factories": "preact-compat/lib/react-dom-factories",
-      },
     },
     output: {
       filename: ({ chunk }) => {
@@ -117,148 +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 }) => {
-  const config = createWebpackConfig({
-    entry: {
-      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",
-      "hass-icons": "./src/entrypoints/hass-icons.ts",
-    },
-    outputRoot: paths.root,
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-  });
-
-  if (latestBuild) {
-    // Create an object mapping browser urls to their paths during build
-    const translationMetadata = require("../build-translations/translationMetadata.json");
-    const workBoxTranslationsTemplatedURLs = {};
-    const englishFilename = `en-${translationMetadata.translations.en.hash}.json`;
-
-    // core
-    workBoxTranslationsTemplatedURLs[
-      `/static/translations/${englishFilename}`
-    ] = `build-translations/output/${englishFilename}`;
-
-    translationMetadata.fragments.forEach((fragment) => {
-      workBoxTranslationsTemplatedURLs[
-        `/static/translations/${fragment}/${englishFilename}`
-      ] = `build-translations/output/${fragment}/${englishFilename}`;
-    });
-
-    config.plugins.push(
-      new WorkboxPlugin.InjectManifest({
-        swSrc: "./src/entrypoints/service-worker-hass.js",
-        swDest: "service_worker.js",
-        importWorkboxFrom: "local",
-        include: [/\.js$/],
-        templatedURLs: {
-          ...workBoxTranslationsTemplatedURLs,
-          "/static/icons/favicon-192x192.png":
-            "public/icons/favicon-192x192.png",
-          "/static/fonts/roboto/Roboto-Light.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
-          "/static/fonts/roboto/Roboto-Medium.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
-          "/static/fonts/roboto/Roboto-Regular.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
-          "/static/fonts/roboto/Roboto-Bold.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
-        },
-      })
-    );
-  }
-
-  return config;
+  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-${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,5 +1,3 @@
-import "../../../src/components/ha-iconset-svg";
-import "../../../src/resources/ha-style";
-import "../../../src/resources/hass-icons";
-import "../../../src/resources/roboto";
+import "~app/resources/ha-style";
+import "~app/resources/roboto";
 import "./layout/hc-connect";

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

@@ -1,4 +1,3 @@
-import "@polymer/iron-icon";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@@ -32,6 +31,7 @@ import {
 import "../../../../src/layouts/loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
+import "@material/mwc-button/mwc-button";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -82,7 +82,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <iron-icon icon="hass:cast"></iron-icon>
+                  <ha-icon icon="hass:cast"></ha-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -120,7 +120,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <iron-icon icon="hass:cast-connected"></iron-icon>
+                  <ha-icon icon="hass:cast-connected"></ha-icon>
                   Manage
                 </mwc-button>
               `
@@ -242,7 +242,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button iron-icon {
+      mwc-button ha-icon {
         margin-right: 8px;
         height: 18px;
       }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -27,6 +26,7 @@ import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
+import "../../../../src/components/ha-icon";
 import "../../../../src/layouts/loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -136,11 +136,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <iron-icon
+              <ha-icon
                 .icon=${this.castManager.castState === "CONNECTED"
                   ? "hass:cast-connected"
                   : "hass:cast"}
-              ></iron-icon>
+              ></ha-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -184,7 +184,7 @@ export class HcConnect extends LitElement {
         this.castManager = null;
       }
     );
-    registerServiceWorker(false);
+    registerServiceWorker(this, false);
   }
 
   private async _handleDemo() {
@@ -316,7 +316,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button iron-icon {
+      mwc-button ha-icon {
         margin-left: 8px;
       }
 

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>
     `;
   }
@@ -90,15 +91,17 @@ export class HcMain extends HassElement {
     super.firstUpdated(changedProps);
     import("../second-load");
     window.addEventListener("location-changed", () => {
-      if (location.pathname.startsWith("/lovelace/")) {
-        this._lovelacePath = location.pathname.substr(10);
+      const panelPath = `/${this._urlPath || "lovelace"}/`;
+      if (location.pathname.startsWith(panelPath)) {
+        this._lovelacePath = location.pathname.substr(panelPath.length);
         this._sendStatus();
       }
     });
     document.body.addEventListener("click", (ev) => {
+      const panelPath = `/${this._urlPath || "lovelace"}/`;
       const href = isNavigationClick(ev);
-      if (href && href.startsWith("/lovelace/")) {
-        this._lovelacePath = href.substr(10);
+      if (href && href.startsWith(panelPath)) {
+        this._lovelacePath = href.substr(panelPath.length);
         this._sendStatus();
       }
     });
@@ -170,10 +173,10 @@ export class HcMain extends HassElement {
       this._error = "Cannot show Lovelace because we're not connected.";
       return;
     }
+    if (msg.urlPath === "lovelace") {
+      msg.urlPath = null;
+    }
     if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
-      if (msg.urlPath === "lovelace") {
-        msg.urlPath = null;
-      }
       this._urlPath = msg.urlPath;
       if (this._unsubLovelace) {
         this._unsubLovelace();
@@ -189,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) {
@@ -216,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,5 +1,4 @@
 import "web-animations-js/web-animations-next-lite.min";
-import "../../../src/components/ha-iconset-svg";
-import "../../../src/resources/hass-icons";
 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/jimpower/theme.ts

@@ -33,7 +33,7 @@ export const demoThemeJimpower = () => ({
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-card-background-color": "#434954",
+  "card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",

demo/src/configs/kernehed/theme.ts

@@ -34,7 +34,7 @@ export const demoThemeKernehed = () => ({
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-card-background-color": "#292929",
+  "card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",

demo/src/configs/teachingbirds/lovelace.ts

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

demo/src/configs/teachingbirds/theme.ts

@@ -13,7 +13,7 @@ export const demoThemeTeachingbirds = () => ({
   "paper-listbox-color": "#FFFFFF",
   "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
   "switch-unchecked-track-color": "var(--primary-text-color)",
-  "paper-card-background-color": "#4e4e4e",
+  "card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
   "sidebar-icon-color": "var(--paper-item-icon-color)",

demo/src/entrypoint.ts

@@ -1,12 +1,8 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-import "../../src/components/ha-iconset-svg";
 import "../../src/resources/ha-style";
-import "../../src/resources/hass-icons";
 import "../../src/resources/roboto";
 import "./ha-demo";
-import "./resources/hademo-icons";
 
 /* polyfill for paper-dropdown */
 setTimeout(() => {

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>

demo/src/resources/hademo-icons.js

@@ -1,7 +0,0 @@
-import "../../../src/components/ha-iconset-svg";
-import iconSetContent from "../../hademo-icons.html";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-documentContainer.innerHTML = iconSetContent;
-document.head.appendChild(documentContainer.content);

demo/src/stubs/translations.ts

@@ -1,7 +1,10 @@
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTranslations = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_translations", () => ({
-    resources: {},
-  }));
+  hass.mockWS(
+    "frontend/get_translations",
+    (/* msg: {language: string, category: string} */) => {
+      return { resources: {} };
+    }
+  );
 };

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/demos/demo-hui-picture-elements-card.ts

@@ -50,10 +50,9 @@ const CONFIGS = [
         top: 12%
         left: 6%
         transform: rotate(-60deg) scaleX(-1)
-        --iron-icon-height: 30px
-        --iron-icon-width: 30px
-        --iron-icon-stroke-color: black
-        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+        --mdc-icon-size: 30px
+        --mdc-icon-stroke-color: black
+        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
     - type: image
       entity: light.bed_light
       tap_action:
@@ -99,10 +98,9 @@ const CONFIGS = [
         top: 12%
         left: 6%
         transform: rotate(-60deg) scaleX(-1)
-        --iron-icon-height: 30px
-        --iron-icon-width: 30px
-        --iron-icon-stroke-color: black
-        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+        --mdc-icon-size: 30px
+        --mdc-icon-stroke-color: black
+        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
     - type: image
       entity: light.bed_light
       tap_action:

gallery/src/entrypoint.js

@@ -1,9 +1,6 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-import "../../src/components/ha-iconset-svg";
 import "../../src/resources/ha-style";
-import "../../src/resources/hass-icons";
 import "../../src/resources/roboto";
 import "./ha-gallery";
 

gallery/src/ha-gallery.js

@@ -1,8 +1,8 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../src/components/ha-icon-button";
+import "../../src/components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -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);
@@ -28,7 +29,7 @@ class HaGallery extends PolymerElement {
       app-header-layout {
         min-height: 100vh;
       }
-      paper-icon-button.invisible {
+      ha-icon-button.invisible {
         visibility: hidden;
       }
 
@@ -67,11 +68,11 @@ class HaGallery extends PolymerElement {
       <app-header-layout>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <paper-icon-button
+            <ha-icon-button
               icon="hass:arrow-left"
               on-click="_backTapped"
               class$='[[_computeHeaderButtonClass(_demo)]]'
-            ></paper-icon-button>
+            ></ha-icon-button>
             <div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div>
           </app-toolbar>
         </app-header>
@@ -98,7 +99,7 @@ class HaGallery extends PolymerElement {
                   <a href='#[[item]]'>
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                     </paper-item>
                   </a>
                 </template>
@@ -114,7 +115,7 @@ class HaGallery extends PolymerElement {
                   <a href='#[[item]]'>
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                     </paper-item>
                   </a>
                 </template>
@@ -130,7 +131,7 @@ class HaGallery extends PolymerElement {
                   <a href='#[[item]]'>
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                     </paper-item>
                   </a>
                 </template>

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/.gitignore

@@ -1 +0,0 @@
-hassio-icons.html

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-store/hassio-addon-repository.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-card/paper-card";
+import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import {
   css,
   CSSResultArray,
@@ -10,6 +10,7 @@ import {
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/ha-card";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -41,13 +42,19 @@ class HassioAddonRepositoryEl extends LitElement {
 
   protected render(): TemplateResult {
     const repo = this.repo;
-    const addons = this._getAddons(this.addons, this.filter);
+    let _addons = this.addons;
+    if (!this.hass.userData?.showAdvanced) {
+      _addons = _addons.filter((addon) => {
+        return !addon.advanced;
+      });
+    }
+    const addons = this._getAddons(_addons, this.filter);
 
     if (this.filter && addons.length < 1) {
       return html`
         <div class="content">
           <p class="description">
-            No results found in "${repo.name}"
+            No results found in "${repo.name}."
           </p>
         </div>
       `;
@@ -57,66 +64,55 @@ class HassioAddonRepositoryEl extends LitElement {
         <h1>
           ${repo.name}
         </h1>
-        <p class="description">
-          Maintained by ${repo.maintainer}<br />
-          <a class="repo" href=${repo.url} target="_blank" rel="noreferrer">
-            ${repo.url}
-          </a>
-        </p>
         <div class="card-group">
           ${addons.map(
             (addon) => html`
-              ${addon.advanced && !this.hass.userData?.showAdvanced
-                ? ""
-                : html`
-                    <paper-card
-                      .addon=${addon}
-                      class=${addon.available ? "" : "not_available"}
-                      @click=${this._addonTapped}
-                    >
-                      <div class="card-content">
-                        <hassio-card-content
-                          .hass=${this.hass}
-                          .title=${addon.name}
-                          .description=${addon.description}
-                          .available=${addon.available}
-                          .icon=${addon.installed &&
-                          addon.installed !== addon.version
-                            ? "hassio:arrow-up-bold-circle"
-                            : "hassio:puzzle"}
-                          .iconTitle=${addon.installed
-                            ? addon.installed !== addon.version
-                              ? "New version available"
-                              : "Add-on is installed"
-                            : addon.available
-                            ? "Add-on is not installed"
-                            : "Add-on is not available on your system"}
-                          .iconClass=${addon.installed
-                            ? addon.installed !== addon.version
-                              ? "update"
-                              : "installed"
-                            : !addon.available
-                            ? "not_available"
-                            : ""}
-                          .iconImage=${atLeastVersion(
-                            this.hass.config.version,
-                            0,
-                            105
-                          ) && addon.icon
-                            ? `/api/hassio/addons/${addon.slug}/icon`
-                            : undefined}
-                          .showTopbar=${addon.installed || !addon.available}
-                          .topbarClass=${addon.installed
-                            ? addon.installed !== addon.version
-                              ? "update"
-                              : "installed"
-                            : !addon.available
-                            ? "unavailable"
-                            : ""}
-                        ></hassio-card-content>
-                      </div>
-                    </paper-card>
-                  `}
+              <ha-card
+                .addon=${addon}
+                class=${addon.available ? "" : "not_available"}
+                @click=${this._addonTapped}
+              >
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${addon.name}
+                    .description=${addon.description}
+                    .available=${addon.available}
+                    .icon=${addon.installed && addon.installed !== addon.version
+                      ? mdiArrowUpBoldCircle
+                      : mdiPuzzle}
+                    .iconTitle=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "New version available"
+                        : "Add-on is installed"
+                      : addon.available
+                      ? "Add-on is not installed"
+                      : "Add-on is not available on your system"}
+                    .iconClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "not_available"
+                      : ""}
+                    .iconImage=${atLeastVersion(
+                      this.hass.config.version,
+                      0,
+                      105
+                    ) && addon.icon
+                      ? `/api/hassio/addons/${addon.slug}/icon`
+                      : undefined}
+                    .showTopbar=${addon.installed || !addon.available}
+                    .topbarClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "unavailable"
+                      : ""}
+                  ></hassio-card-content>
+                </div>
+              </ha-card>
             `
           )}
         </div>
@@ -132,7 +128,7 @@ class HassioAddonRepositoryEl extends LitElement {
     return [
       hassioStyle,
       css`
-        paper-card {
+        ha-card {
           cursor: pointer;
         }
         .not_available {

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

@@ -1,3 +1,6 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -6,17 +9,21 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import "../../../src/common/search/search-input";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
+import "../../../src/layouts/hass-tabs-subpage";
 import "../../../src/layouts/loading-screen";
-import { HomeAssistant } from "../../../src/types";
-import "../components/hassio-search-input";
+import { HomeAssistant, Route } from "../../../src/types";
+import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addon-repository";
-import "./hassio-repositories-editor";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -35,11 +42,15 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 };
 
 class HassioAddonStore extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _addons?: HassioAddonInfo[];
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() private _repos?: HassioAddonRepository[];
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
+
+  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
 
   @property() private _filter?: string;
 
@@ -52,42 +63,76 @@ class HassioAddonStore extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._addons || !this._repos) {
-      return html` <loading-screen></loading-screen> `;
-    }
     const repos: TemplateResult[] = [];
 
-    for (const repo of this._repos) {
-      const addons = this._addons!.filter(
-        (addon) => addon.repository === repo.slug
-      );
+    if (this._repos) {
+      for (const repo of this._repos) {
+        const addons = this._addons!.filter(
+          (addon) => addon.repository === repo.slug
+        );
 
-      if (addons.length === 0) {
-        continue;
+        if (addons.length === 0) {
+          continue;
+        }
+
+        repos.push(html`
+          <hassio-addon-repository
+            .hass=${this.hass}
+            .repo=${repo}
+            .addons=${addons}
+            .filter=${this._filter!}
+          ></hassio-addon-repository>
+        `);
       }
-
-      repos.push(html`
-        <hassio-addon-repository
-          .hass=${this.hass}
-          .repo=${repo}
-          .addons=${addons}
-          .filter=${this._filter}
-        ></hassio-addon-repository>
-      `);
     }
 
     return html`
-      <hassio-repositories-editor
+      <hass-tabs-subpage
         .hass=${this.hass}
-        .repos=${this._repos}
-      ></hassio-repositories-editor>
+        .narrow=${this.narrow}
+        .route=${this.route}
+        hassio
+        main-page
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Add-on store</span>
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
+          <mwc-icon-button slot="trigger" alt="menu">
+            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-list-item @tap=${this._manageRepositories}>
+            Repositories
+          </mwc-list-item>
+          <mwc-list-item @tap=${this.refreshData}>
+            Reload
+          </mwc-list-item>
+        </ha-button-menu>
+        ${repos.length === 0
+          ? html`<loading-screen></loading-screen>`
+          : html`
+              <div class="search">
+                <search-input
+                  no-label-float
+                  no-underline
+                  .filter=${this._filter}
+                  @value-changed=${this._filterChanged}
+                ></search-input>
+              </div>
 
-      <hassio-search-input
-        .filter=${this._filter}
-        @value-changed=${this._filterChanged}
-      ></hassio-search-input>
-
-      ${repos}
+              ${repos}
+            `}
+        ${!this.hass.userData?.showAdvanced
+          ? html`
+              <div class="advanced">
+                Missing add-ons? Enable advanced mode on
+                <a href="/profile" target="_top">
+                  your profile page
+                </a>
+                .
+              </div>
+            `
+          : ""}
+      </hass-tabs-subpage>
     `;
   }
 
@@ -103,6 +148,13 @@ class HassioAddonStore extends LitElement {
     }
   }
 
+  private async _manageRepositories() {
+    showRepositoriesDialog(this, {
+      repos: this._repos!,
+      loadData: () => this._loadData(),
+    });
+  }
+
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);
@@ -123,6 +175,25 @@ class HassioAddonStore extends LitElement {
       hassio-addon-repository {
         margin-top: 24px;
       }
+      .search {
+        padding: 0 16px;
+        background: var(--sidebar-background-color);
+        border-bottom: 1px solid var(--divider-color);
+      }
+      .search search-input {
+        position: relative;
+        top: 2px;
+      }
+      .advanced {
+        padding: 12px;
+        display: flex;
+        flex-wrap: wrap;
+        color: var(--primary-text-color);
+      }
+      .advanced a {
+        margin-left: 0.5em;
+        color: var(--primary-color);
+      }
     `;
   }
 }

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

@@ -1,152 +0,0 @@
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { repeat } from "lit-html/directives/repeat";
-import memoizeOne from "memoize-one";
-import "../../../src/components/buttons/ha-call-api-button";
-import { HassioAddonRepository } from "../../../src/data/hassio/addon";
-import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { HomeAssistant } from "../../../src/types";
-import "../components/hassio-card-content";
-import { hassioStyle } from "../resources/hassio-style";
-
-@customElement("hassio-repositories-editor")
-class HassioRepositoriesEditor extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public repos!: HassioAddonRepository[];
-
-  @property() private _repoUrl = "";
-
-  private _sortedRepos = memoizeOne((repos: HassioAddonRepository[]) =>
-    repos
-      .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
-      .sort((a, b) => (a.name < b.name ? -1 : 1))
-  );
-
-  protected render(): TemplateResult {
-    const repos = this._sortedRepos(this.repos);
-    return html`
-      <div class="content">
-        <h1>
-          Repositories
-        </h1>
-        <p class="description">
-          Configure which add-on repositories to fetch data from:
-        </p>
-        <div class="card-group">
-          ${// Use repeat so that the fade-out from call-service-api-button
-          // stays with the correct repo after we add/delete one.
-          repeat(
-            repos,
-            (repo) => repo.slug,
-            (repo) => html`
-              <paper-card>
-                <div class="card-content">
-                  <hassio-card-content
-                    .hass=${this.hass}
-                    .title=${repo.name}
-                    .description=${repo.url}
-                    icon="hassio:github-circle"
-                  ></hassio-card-content>
-                </div>
-                <div class="card-actions">
-                  <ha-call-api-button
-                    path="hassio/supervisor/options"
-                    .hass=${this.hass}
-                    .data=${this.computeRemoveRepoData(repos, repo.url)}
-                    class="warning"
-                  >
-                    Remove
-                  </ha-call-api-button>
-                </div>
-              </paper-card>
-            `
-          )}
-
-          <paper-card>
-            <div class="card-content add">
-              <iron-icon icon="hassio:github-circle"></iron-icon>
-              <paper-input
-                label="Add new repository by URL"
-                .value=${this._repoUrl}
-                @value-changed=${this._urlChanged}
-              ></paper-input>
-            </div>
-            <div class="card-actions">
-              <ha-call-api-button
-                path="hassio/supervisor/options"
-                .hass=${this.hass}
-                .data=${this.computeAddRepoData(repos, this._repoUrl)}
-              >
-                Add
-              </ha-call-api-button>
-            </div>
-          </paper-card>
-        </div>
-      </div>
-    `;
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("repos")) {
-      this._repoUrl = "";
-    }
-  }
-
-  private _urlChanged(ev: PolymerChangedEvent<string>) {
-    this._repoUrl = ev.detail.value;
-  }
-
-  private computeRemoveRepoData(repoList, url) {
-    const list = repoList
-      .filter((repo) => repo.url !== url)
-      .map((repo) => repo.source);
-    return { addons_repositories: list };
-  }
-
-  private computeAddRepoData(repoList, url) {
-    const list = repoList ? repoList.map((repo) => repo.source) : [];
-    list.push(url);
-    return { addons_repositories: list };
-  }
-
-  static get styles(): CSSResultArray {
-    return [
-      hassioStyle,
-      css`
-        .add {
-          padding: 12px 16px;
-        }
-        iron-icon {
-          color: var(--secondary-text-color);
-          margin-right: 16px;
-          display: inline-block;
-        }
-        paper-input {
-          width: calc(100% - 49px);
-          display: inline-block;
-          margin-top: -4px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-repositories-editor": HassioRepositoriesEditor;
-  }
-}

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -14,24 +13,26 @@ import {
   TemplateResult,
 } from "lit-element";
 import "web-animations-js/web-animations-next-lite.min";
+import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
-} from "../../../src/data/hassio/addon";
+} from "../../../../src/data/hassio/addon";
 import {
   fetchHassioHardwareAudio,
   HassioHardwareAudioDevice,
-} from "../../../src/data/hassio/hardware";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
+} from "../../../../src/data/hassio/hardware";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public addon!: HassioAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property() private _error?: string;
 
@@ -45,7 +46,7 @@ class HassioAddonAudio extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Audio">
+      <ha-card header="Audio">
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
@@ -56,7 +57,7 @@ class HassioAddonAudio extends LitElement {
             <paper-listbox
               slot="dropdown-content"
               attr-for-selected="device"
-              .selected=${this._selectedInput}
+              .selected=${this._selectedInput!}
             >
               ${this._inputDevices &&
               this._inputDevices.map((item) => {
@@ -75,7 +76,7 @@ class HassioAddonAudio extends LitElement {
             <paper-listbox
               slot="dropdown-content"
               attr-for-selected="device"
-              .selected=${this._selectedOutput}
+              .selected=${this._selectedOutput!}
             >
               ${this._outputDevices &&
               this._outputDevices.map((item) => {
@@ -91,7 +92,7 @@ class HassioAddonAudio extends LitElement {
         <div class="card-actions">
           <mwc-button @click=${this._saveSettings}>Save</mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -101,7 +102,7 @@ class HassioAddonAudio extends LitElement {
       hassioStyle,
       css`
         :host,
-        paper-card,
+        ha-card,
         paper-dropdown-menu {
           display: block;
         }
@@ -183,6 +184,9 @@ class HassioAddonAudio extends LitElement {
     } catch {
       this._error = "Failed to set addon audio device";
     }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
   }
 }
 

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

@@ -0,0 +1,79 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+import "./hassio-addon-audio";
+import "./hassio-addon-config";
+import "./hassio-addon-network";
+
+@customElement("hassio-addon-config-tab")
+class HassioAddonConfigDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+    return html`
+      <div class="content">
+        <hassio-addon-config
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-config>
+        ${this.addon.network
+          ? html`
+              <hassio-addon-network
+                .hass=${this.hass}
+                .addon=${this.addon}
+              ></hassio-addon-network>
+            `
+          : ""}
+        ${this.addon.audio
+          ? html`
+              <hassio-addon-audio
+                .hass=${this.hass}
+                .addon=${this.addon}
+              ></hassio-addon-audio>
+            `
+          : ""}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
+        }
+        hassio-addon-network,
+        hassio-addon-audio,
+        hassio-addon-config {
+          margin-bottom: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-config-tab": HassioAddonConfigDashboard;
+  }
+}

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-card/paper-card";
 import {
   css,
   CSSResult,
@@ -12,24 +11,26 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
-} from "../../../src/data/hassio/addon";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import { haStyle } from "../../../src/resources/styles";
-import type { HomeAssistant } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
+} from "../../../../src/data/hassio/addon";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public addon!: HassioAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property() private _error?: string;
 
@@ -43,7 +44,8 @@ class HassioAddonConfig extends LitElement {
     const valid = editor ? editor.isValid : true;
 
     return html`
-      <paper-card heading="Config">
+      <h1>${this.addon.name}</h1>
+      <ha-card header="Configuration">
         <div class="card-content">
           <ha-yaml-editor
             @value-changed=${this._configChanged}
@@ -62,7 +64,7 @@ class HassioAddonConfig extends LitElement {
             Save
           </mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -74,7 +76,7 @@ class HassioAddonConfig extends LitElement {
         :host {
           display: block;
         }
-        paper-card {
+        ha-card {
           display: block;
         }
         .card-actions {
@@ -113,6 +115,7 @@ class HassioAddonConfig extends LitElement {
       title: this.addon.name,
       text: "Are you sure you want to reset all your options?",
       confirmText: "reset options",
+      dismissText: "no",
     });
 
     if (!confirmed) {
@@ -164,6 +167,9 @@ class HassioAddonConfig extends LitElement {
         err.body?.message || err
       }`;
     }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
   }
 }
 

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
@@ -10,15 +9,17 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
-} from "../../../src/data/hassio/addon";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
+} from "../../../../src/data/hassio/addon";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
 interface NetworkItem {
   description: string;
@@ -32,9 +33,9 @@ interface NetworkItemInput extends PaperInputElement {
 
 @customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public addon!: HassioAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property() private _error?: string;
 
@@ -51,7 +52,7 @@ class HassioAddonNetwork extends LitElement {
     }
 
     return html`
-      <paper-card heading="Network">
+      <ha-card header="Network">
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
@@ -70,7 +71,7 @@ class HassioAddonNetwork extends LitElement {
                       <paper-input
                         @value-changed=${this._configChanged}
                         placeholder="disabled"
-                        .value=${item.host}
+                        .value=${String(item.host)}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>
@@ -88,7 +89,7 @@ class HassioAddonNetwork extends LitElement {
           </mwc-button>
           <mwc-button @click=${this._saveTapped}>Save</mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -100,7 +101,7 @@ class HassioAddonNetwork extends LitElement {
         :host {
           display: block;
         }
-        paper-card {
+        ha-card {
           display: block;
         }
         .errors {
@@ -165,6 +166,9 @@ class HassioAddonNetwork extends LitElement {
         err.body?.message || err
       }`;
     }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
   }
 
   private async _saveTapped(): Promise<void> {
@@ -191,6 +195,9 @@ class HassioAddonNetwork extends LitElement {
         err.body?.message || err
       }`;
     }
+    if (!this._error && this.addon?.state === "started") {
+      await suggestAddonRestart(this, this.hass, this.addon);
+    }
   }
 }
 

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

@@ -0,0 +1,93 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../../src/components/ha-markdown";
+import {
+  fetchHassioAddonDocumentation,
+  HassioAddonDetails,
+} from "../../../../src/data/hassio/addon";
+import "../../../../src/layouts/loading-screen";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+
+@customElement("hassio-addon-documentation-tab")
+class HassioAddonDocumentationDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  @property() private _error?: string;
+
+  @property() private _content?: string;
+
+  public async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    await this._loadData();
+  }
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+    return html`
+      <div class="content">
+        <ha-card>
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          <div class="card-content">
+            ${this._content
+              ? html`<ha-markdown .content=${this._content}></ha-markdown>`
+              : html`<loading-screen></loading-screen>`}
+          </div>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        ha-card {
+          display: block;
+        }
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
+        }
+        ha-markdown {
+          padding: 16px;
+        }
+      `,
+    ];
+  }
+
+  private async _loadData(): Promise<void> {
+    this._error = undefined;
+    try {
+      this._content = await fetchHassioAddonDocumentation(
+        this.hass,
+        this.addon!.slug
+      );
+    } catch (err) {
+      this._error = `Failed to get addon documentation, ${
+        err.body?.message || err
+      }`;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-documentation-tab": HassioAddonDocumentationDashboard;
+  }
+}

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

@@ -0,0 +1,188 @@
+import {
+  mdiCogs,
+  mdiFileDocument,
+  mdiInformationVariant,
+  mdiMathLog,
+} from "@mdi/js";
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import memoizeOne from "memoize-one";
+import {
+  fetchHassioAddonInfo,
+  HassioAddonDetails,
+} from "../../../src/data/hassio/addon";
+import "../../../src/layouts/hass-tabs-subpage";
+import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant, Route } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
+import "./config/hassio-addon-audio";
+import "./config/hassio-addon-config";
+import "./config/hassio-addon-network";
+import "./hassio-addon-router";
+import "./info/hassio-addon-info";
+import "./log/hassio-addon-logs";
+
+@customElement("hassio-addon-dashboard")
+class HassioAddonDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  private _computeTail = memoizeOne((route: Route) => {
+    const dividerPos = route.path.indexOf("/", 1);
+    return dividerPos === -1
+      ? {
+          prefix: route.prefix + route.path,
+          path: "",
+        }
+      : {
+          prefix: route.prefix + route.path.substr(0, dividerPos),
+          path: route.path.substr(dividerPos),
+        };
+  });
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+
+    const addonTabs: PageNavigation[] = [
+      {
+        name: "Info",
+        path: `/hassio/addon/${this.addon.slug}/info`,
+        iconPath: mdiInformationVariant,
+      },
+    ];
+
+    if (this.addon.documentation) {
+      addonTabs.push({
+        name: "Documentation",
+        path: `/hassio/addon/${this.addon.slug}/documentation`,
+        iconPath: mdiFileDocument,
+      });
+    }
+
+    if (this.addon.version) {
+      addonTabs.push(
+        {
+          name: "Configuration",
+          path: `/hassio/addon/${this.addon.slug}/config`,
+          iconPath: mdiCogs,
+        },
+        {
+          name: "Log",
+          path: `/hassio/addon/${this.addon.slug}/logs`,
+          iconPath: mdiMathLog,
+        }
+      );
+    }
+
+    const route = this._computeTail(this.route);
+
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
+        .route=${route}
+        hassio
+        .tabs=${addonTabs}
+      >
+        <span slot="header">${this.addon.name}</span>
+        <hassio-addon-router
+          .route=${route}
+          .narrow=${this.narrow}
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-router>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          color: var(--primary-text-color);
+        }
+        .content {
+          padding: 24px 0 32px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        hassio-addon-info,
+        hassio-addon-network,
+        hassio-addon-audio,
+        hassio-addon-config {
+          margin-bottom: 24px;
+          width: 600px;
+        }
+        hassio-addon-logs {
+          max-width: calc(100% - 8px);
+          min-width: 600px;
+        }
+        @media only screen and (max-width: 600px) {
+          hassio-addon-info,
+          hassio-addon-network,
+          hassio-addon-audio,
+          hassio-addon-config,
+          hassio-addon-logs {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
+      `,
+    ];
+  }
+
+  protected async firstUpdated(): Promise<void> {
+    await this._routeDataChanged(this.route);
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
+  }
+
+  private async _apiCalled(ev): Promise<void> {
+    const path: string = ev.detail.path;
+
+    if (!path) {
+      return;
+    }
+
+    if (path === "uninstall") {
+      history.back();
+    } else {
+      await this._routeDataChanged(this.route);
+    }
+  }
+
+  private async _routeDataChanged(routeData: Route): Promise<void> {
+    const addon = routeData.path.split("/")[1];
+    try {
+      const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
+      this.addon = addoninfo;
+    } catch {
+      this.addon = undefined;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-dashboard": HassioAddonDashboard;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { customElement, property } from "lit-element";
+import { HassioAddonDetails } from "../../../src/data/hassio/addon";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../../src/layouts/hass-router-page";
+import { HomeAssistant } from "../../../src/types";
+import "./config/hassio-addon-config-tab";
+import "./documentation/hassio-addon-documentation-tab";
+// Don't codesplit the others, because it breaks the UI when pushed to a Pi
+import "./info/hassio-addon-info-tab";
+import "./log/hassio-addon-log-tab";
+
+@customElement("hassio-addon-router")
+class HassioAddonRouter extends HassRouterPage {
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
+
+  protected routerOptions: RouterOptions = {
+    defaultPage: "info",
+    showLoading: true,
+    routes: {
+      info: {
+        tag: "hassio-addon-info-tab",
+      },
+      documentation: {
+        tag: "hassio-addon-documentation-tab",
+      },
+      config: {
+        tag: "hassio-addon-config-tab",
+      },
+      logs: {
+        tag: "hassio-addon-log-tab",
+      },
+    },
+  };
+
+  protected updatePageEl(el) {
+    el.route = this.routeTail;
+    el.hass = this.hass;
+    el.addon = this.addon;
+    el.narrow = this.narrow;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-router": HassioAddonRouter;
+  }
+}

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

@@ -1,157 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import {
-  fetchHassioAddonInfo,
-  HassioAddonDetails,
-} from "../../../src/data/hassio/addon";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant, Route } from "../../../src/types";
-import { hassioStyle } from "../resources/hassio-style";
-import "./hassio-addon-audio";
-import "./hassio-addon-config";
-import "./hassio-addon-info";
-import "./hassio-addon-logs";
-import "./hassio-addon-network";
-
-@customElement("hassio-addon-view")
-class HassioAddonView extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public route!: Route;
-
-  @property() public addon?: HassioAddonDetails;
-
-  protected render(): TemplateResult {
-    if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
-    }
-    return html`
-      <hass-subpage header="Hass.io: add-on details" hassio>
-        <div class="content">
-          <hassio-addon-info
-            .hass=${this.hass}
-            .addon=${this.addon}
-          ></hassio-addon-info>
-
-          ${this.addon && this.addon.version
-            ? html`
-                <hassio-addon-config
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-config>
-
-                ${this.addon.audio
-                  ? html`
-                      <hassio-addon-audio
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-audio>
-                    `
-                  : ""}
-                ${this.addon.network
-                  ? html`
-                      <hassio-addon-network
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-network>
-                    `
-                  : ""}
-
-                <hassio-addon-logs
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-logs>
-              `
-            : ""}
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-          --paper-card-header-color: var(--primary-text-color);
-        }
-        .content {
-          padding: 24px 0 32px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        hassio-addon-info,
-        hassio-addon-network,
-        hassio-addon-audio,
-        hassio-addon-config {
-          margin-bottom: 24px;
-          width: 600px;
-        }
-        hassio-addon-logs {
-          max-width: calc(100% - 8px);
-          min-width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          hassio-addon-info,
-          hassio-addon-network,
-          hassio-addon-audio,
-          hassio-addon-config,
-          hassio-addon-logs {
-            max-width: 100%;
-            min-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
-
-  protected async firstUpdated(): Promise<void> {
-    await this._routeDataChanged(this.route);
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  private async _apiCalled(ev): Promise<void> {
-    const path: string = ev.detail.path;
-
-    if (!path) {
-      return;
-    }
-
-    if (path === "uninstall") {
-      history.back();
-    } else {
-      await this._routeDataChanged(this.route);
-    }
-  }
-
-  private async _routeDataChanged(routeData: Route): Promise<void> {
-    const addon = routeData.path.substr(1);
-    try {
-      const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
-      this.addon = addoninfo;
-    } catch {
-      this.addon = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-view": HassioAddonView;
-  }
-}

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

@@ -0,0 +1,60 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+import "./hassio-addon-info";
+
+@customElement("hassio-addon-info-tab")
+class HassioAddonInfoDashboard extends LitElement {
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+
+    return html`
+      <div class="content">
+        <hassio-addon-info
+          .narrow=${this.narrow}
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-info>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-info-tab": HassioAddonInfoDashboard;
+  }
+}

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

@@ -1,6 +1,20 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
+import {
+  mdiArrowUpBoldCircle,
+  mdiCheckCircle,
+  mdiChip,
+  mdiCircle,
+  mdiCursorDefaultClickOutline,
+  mdiDocker,
+  mdiExclamationThick,
+  mdiFlask,
+  mdiHomeAssistant,
+  mdiInformation,
+  mdiKey,
+  mdiNetwork,
+  mdiPound,
+  mdiShield,
+} from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -12,14 +26,16 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
-import "../../../src/components/buttons/ha-call-api-button";
-import "../../../src/components/buttons/ha-progress-button";
-import "../../../src/components/ha-label-badge";
-import "../../../src/components/ha-markdown";
-import "../../../src/components/ha-switch";
+import { atLeastVersion } from "../../../../src/common/config/version";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { navigate } from "../../../../src/common/navigate";
+import "../../../../src/components/buttons/ha-call-api-button";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-label-badge";
+import "../../../../src/components/ha-markdown";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-switch";
 import {
   fetchHassioAddonChangelog,
   HassioAddonDetails,
@@ -29,18 +45,29 @@ import {
   setHassioAddonOption,
   setHassioAddonSecurity,
   uninstallHassioAddon,
-} from "../../../src/data/hassio/addon";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import "../components/hassio-card-content";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import { hassioStyle } from "../resources/hassio-style";
+} from "../../../../src/data/hassio/addon";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-card-content";
+import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
+import { hassioStyle } from "../../resources/hassio-style";
+
+const STAGE_ICON = {
+  stable: mdiCheckCircle,
+  experimental: mdiFlask,
+  deprecated: mdiExclamationThick,
+};
 
 const PERMIS_DESC = {
+  stage: {
+    title: "Add-on Stage",
+    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
+  },
   rating: {
     title: "Add-on Security Rating",
     description:
-      "Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
+      "Home Assistant provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
   },
   host_network: {
     title: "Host Network",
@@ -58,19 +85,19 @@ const PERMIS_DESC = {
       "This add-on is given full access to the hardware of your system, by request of the add-on author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   hassio_api: {
-    title: "Hass.io API Access",
+    title: "Supervisor API Access",
     description:
-      "The add-on was given access to the Hass.io API, by request of the add-on author. By default, the add-on can access general version information of your system. When the add-on requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Hass.io system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
+      "The add-on was given access to the Supervisor API, by request of the add-on author. By default, the add-on can access general version information of your system. When the add-on requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Home Assistant system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
   },
   docker_api: {
     title: "Full Docker Access",
     description:
-      "The add-on author has requested the add-on to have management access to the Docker instance running on your system. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
+      "The add-on author has requested the add-on to have management access to the Docker instance running on your system. This mode gives the add-on full access and control to your entire Home Assistant system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   host_pid: {
     title: "Host Processes Namespace",
     description:
-      "Usually, the processes the add-on runs, are isolated from all other system processes. The add-on author has requested the add-on to have access to the system processes running on the host system instance, and allow the add-on to spawn processes on the host system as well. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
+      "Usually, the processes the add-on runs, are isolated from all other system processes. The add-on author has requested the add-on to have access to the system processes running on the host system instance, and allow the add-on to spawn processes on the host system as well. This mode gives the add-on full access and control to your entire Home Assistant system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   apparmor: {
     title: "AppArmor",
@@ -91,9 +118,11 @@ const PERMIS_DESC = {
 
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public addon!: HassioAddonDetails;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property() private _error?: string;
 
@@ -103,7 +132,7 @@ class HassioAddonInfo extends LitElement {
     return html`
       ${this._computeUpdateAvailable
         ? html`
-            <paper-card heading="Update available! 🎉">
+            <ha-card header="Update available! 🎉">
               <div class="card-content">
                 <hassio-card-content
                   .hass=${this.hass}
@@ -111,7 +140,7 @@ class HassioAddonInfo extends LitElement {
                     .version_latest} is available"
                   .description="You are currently running version ${this.addon
                     .version}"
-                  icon="hassio:arrow-up-bold-circle"
+                  icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
                 ${!this.addon.available
@@ -138,12 +167,13 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
               </div>
-            </paper-card>
+            </ha-card>
           `
         : ""}
       ${!this.addon.protected
         ? html`
-        <paper-card heading="Warning: Protection mode is disabled!" class="warning">
+        <ha-card class="warning">
+          <div class="card-header">Warning: Protection mode is disabled!</div>
           <div class="card-content">
             Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
           </div>
@@ -151,58 +181,79 @@ class HassioAddonInfo extends LitElement {
               <mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
             </div>
           </div>
-        </paper-card>
+        </ha-card>
       `
         : ""}
 
-      <paper-card>
+      <ha-card>
         <div class="card-content">
           <div class="addon-header">
-            ${this.addon.name}
+            ${!this.narrow ? this.addon.name : ""}
             <div class="addon-version light-color">
               ${this.addon.version
                 ? html`
-                    ${this.addon.version}
                     ${this._computeIsRunning
                       ? html`
-                          <iron-icon
+                          <ha-svg-icon
                             title="Add-on is running"
                             class="running"
-                            icon="hassio:circle"
-                          ></iron-icon>
+                            path=${mdiCircle}
+                          ></ha-svg-icon>
                         `
                       : html`
-                          <iron-icon
+                          <ha-svg-icon
                             title="Add-on is stopped"
                             class="stopped"
-                            icon="hassio:circle"
-                          ></iron-icon>
+                            path=${mdiCircle}
+                          ></ha-svg-icon>
                         `}
                   `
                 : html` ${this.addon.version_latest} `}
             </div>
           </div>
+          <div class="description light-color">
+            ${this.addon.version
+              ? html`
+                  Current version: ${this.addon.version}
+                  <div class="changelog" @click=${this._openChangelog}>
+                    (<span class="changelog-link">changelog</span>)
+                  </div>
+                `
+              : html`<span class="changelog-link" @click=${this._openChangelog}
+                  >Changelog</span
+                >`}
+          </div>
+
           <div class="description light-color">
             ${this.addon.description}.<br />
             Visit
-            <a href="${this.addon.url}" target="_blank" rel="noreferrer">
+            <a href="${this.addon.url!}" target="_blank" rel="noreferrer">
               ${this.addon.name} page</a
             >
             for details.
           </div>
           ${this.addon.logo
             ? html`
-                <a
-                  href="${this.addon.url}"
-                  target="_blank"
+                <img
                   class="logo"
-                  rel="noreferrer"
-                >
-                  <img src="/api/hassio/addons/${this.addon.slug}/logo" />
-                </a>
+                  src="/api/hassio/addons/${this.addon.slug}/logo"
+                />
               `
             : ""}
           <div class="security">
+            <ha-label-badge
+              class=${classMap({
+                green: this.addon.stage === "stable",
+                yellow: this.addon.stage === "experimental",
+                red: this.addon.stage === "deprecated",
+              })}
+              @click=${this._showMoreInfo}
+              id="stage"
+              label="stage"
+              description=""
+            >
+              <ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
+            </ha-label-badge>
             <ha-label-badge
               class=${classMap({
                 green: [5, 6].includes(Number(this.addon.rating)),
@@ -220,10 +271,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="host_network"
-                    icon="hassio:network"
                     label="host"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.full_access
@@ -231,10 +283,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="full_access"
-                    icon="hassio:chip"
                     label="hardware"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiChip}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.homeassistant_api
@@ -242,10 +295,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="homeassistant_api"
-                    icon="hassio:home-assistant"
                     label="hass"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this._computeHassioApi
@@ -253,10 +307,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="hassio_api"
-                    icon="hassio:home-assistant"
                     label="hassio"
                     .description=${this.addon.hassio_role}
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.docker_api
@@ -264,10 +319,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="docker_api"
-                    icon="hassio:docker"
                     label="docker"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiDocker}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.host_pid
@@ -275,10 +331,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="host_pid"
-                    icon="hassio:pound"
                     label="host pid"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiPound}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.apparmor
@@ -287,10 +344,11 @@ class HassioAddonInfo extends LitElement {
                     @click=${this._showMoreInfo}
                     class=${this._computeApparmorClassName}
                     id="apparmor"
-                    icon="hassio:shield"
                     label="apparmor"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiShield}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.auth_api
@@ -298,10 +356,11 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="auth_api"
-                    icon="hassio:key"
                     label="auth"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon path=${mdiKey}></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
             ${this.addon.ingress
@@ -309,10 +368,13 @@ class HassioAddonInfo extends LitElement {
                   <ha-label-badge
                     @click=${this._showMoreInfo}
                     id="ingress"
-                    icon="hassio:cursor-default-click-outline"
                     label="ingress"
                     description=""
-                  ></ha-label-badge>
+                  >
+                    <ha-svg-icon
+                      path=${mdiCursorDefaultClickOutline}
+                    ></ha-svg-icon>
+                  </ha-label-badge>
                 `
               : ""}
           </div>
@@ -327,14 +389,18 @@ class HassioAddonInfo extends LitElement {
                     haptic
                   ></ha-switch>
                 </div>
-                <div class="state">
-                  <div>Auto update</div>
-                  <ha-switch
-                    @change=${this._autoUpdateToggled}
-                    .checked=${this.addon.auto_update}
-                    haptic
-                  ></ha-switch>
-                </div>
+                ${this.addon.auto_update || this.hass.userData?.showAdvanced
+                  ? html`
+                      <div class="state">
+                        <div>Auto update</div>
+                        <ha-switch
+                          @change=${this._autoUpdateToggled}
+                          .checked=${this.addon.auto_update}
+                          haptic
+                        ></ha-switch>
+                      </div>
+                    `
+                  : ""}
                 ${this.addon.ingress
                   ? html`
                       <div class="state">
@@ -362,7 +428,7 @@ class HassioAddonInfo extends LitElement {
                         <div>
                           Protection mode
                           <span>
-                            <iron-icon icon="hassio:information"></iron-icon>
+                            <ha-svg-icon path=${mdiInformation}></ha-svg-icon>
                             <paper-tooltip>
                               Grant the add-on elevated system access.
                             </paper-tooltip>
@@ -383,29 +449,8 @@ class HassioAddonInfo extends LitElement {
         <div class="card-actions">
           ${this.addon.version
             ? html`
-                <mwc-button class="warning" @click=${this._uninstallClicked}>
-                  Uninstall
-                </mwc-button>
-                ${this.addon.build
-                  ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/rebuild"
-                      >
-                        Rebuild
-                      </ha-call-api-button>
-                    `
-                  : ""}
                 ${this._computeIsRunning
                   ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/restart"
-                      >
-                        Restart
-                      </ha-call-api-button>
                       <ha-call-api-button
                         class="warning"
                         .hass=${this.hass}
@@ -413,6 +458,13 @@ class HassioAddonInfo extends LitElement {
                       >
                         Stop
                       </ha-call-api-button>
+                      <ha-call-api-button
+                        class="warning"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/restart"
+                      >
+                        Restart
+                      </ha-call-api-button>
                     `
                   : html`
                       <ha-call-api-button
@@ -425,7 +477,7 @@ class HassioAddonInfo extends LitElement {
                 ${this._computeShowWebUI
                   ? html`
                       <a
-                        .href=${this._pathWebui}
+                        href=${this._pathWebui!}
                         tabindex="-1"
                         target="_blank"
                         class="right"
@@ -444,6 +496,23 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
+                <mwc-button
+                  class=" right warning"
+                  @click=${this._uninstallClicked}
+                >
+                  Uninstall
+                </mwc-button>
+                ${this.addon.build
+                  ? html`
+                      <ha-call-api-button
+                        class="warning right"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/rebuild"
+                      >
+                        Rebuild
+                      </ha-call-api-button>
+                    `
+                  : ""}
               `
             : html`
                 ${!this.addon.available
@@ -462,17 +531,17 @@ class HassioAddonInfo extends LitElement {
                 </ha-progress-button>
               `}
         </div>
-      </paper-card>
+      </ha-card>
 
       ${this.addon.long_description
         ? html`
-            <paper-card>
+            <ha-card>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
                 ></ha-markdown>
               </div>
-            </paper-card>
+            </ha-card>
           `
         : ""}
     `;
@@ -486,16 +555,21 @@ class HassioAddonInfo extends LitElement {
         :host {
           display: block;
         }
-        paper-card {
+        ha-card {
           display: block;
           margin-bottom: 16px;
         }
-        paper-card.warning {
+        ha-card.warning {
           background-color: var(--google-red-500);
           color: white;
-          --paper-card-header-color: white;
         }
-        paper-card.warning mwc-button {
+        ha-card.warning .card-header {
+          color: white;
+        }
+        ha-card.warning .card-content {
+          color: white;
+        }
+        ha-card.warning mwc-button {
           --mdc-theme-primary: white !important;
         }
         .warning {
@@ -506,8 +580,9 @@ class HassioAddonInfo extends LitElement {
           color: var(--secondary-text-color);
         }
         .addon-header {
+          padding-left: 8px;
           font-size: 24px;
-          color: var(--paper-card-header-color, --primary-text-color);
+          color: var(--ha-card-header-color, --primary-text-color);
         }
         .addon-version {
           float: right;
@@ -521,7 +596,7 @@ class HassioAddonInfo extends LitElement {
         .description {
           margin-bottom: 16px;
         }
-        .logo img {
+        img.logo {
           max-height: 60px;
           margin: 16px 0;
           display: block;
@@ -534,7 +609,7 @@ class HassioAddonInfo extends LitElement {
           width: 180px;
           display: inline-block;
         }
-        .state iron-icon {
+        .state ha-svg-icon {
           width: 16px;
           height: 16px;
           color: var(--secondary-text-color);
@@ -542,10 +617,10 @@ class HassioAddonInfo extends LitElement {
         ha-switch {
           display: flex;
         }
-        iron-icon.running {
+        ha-svg-icon.running {
           color: var(--paper-green-400);
         }
-        iron-icon.stopped {
+        ha-svg-icon.stopped {
           color: var(--google-red-300);
         }
         ha-call-api-button {
@@ -555,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 {
@@ -590,7 +661,18 @@ class HassioAddonInfo extends LitElement {
         .security ha-label-badge {
           cursor: pointer;
           margin-right: 4px;
-          --iron-icon-height: 45px;
+          --ha-label-badge-padding: 8px 0 0 0;
+        }
+        .changelog {
+          display: contents;
+        }
+        .changelog-link {
+          color: var(--primary-color);
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        ha-markdown {
+          padding: 16px;
         }
       `,
     ];
@@ -615,7 +697,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _showMoreInfo(ev): void {
-    const id = ev.target.getAttribute("id");
+    const id = ev.currentTarget.id;
     showHassioMarkdownDialog(this, {
       title: PERMIS_DESC[id].title,
       content: PERMIS_DESC[id].description,
@@ -776,9 +858,17 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _uninstallClicked(): Promise<void> {
-    if (!confirm("Are you sure you want to uninstall this add-on?")) {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
+      confirmText: "uninstall add-on",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
       return;
     }
+
     this._error = undefined;
     try {
       await uninstallHassioAddon(this.hass, this.addon.slug);

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

@@ -0,0 +1,56 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
+import "./hassio-addon-logs";
+
+@customElement("hassio-addon-log-tab")
+class HassioAddonLogDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+    return html`
+      <div class="content">
+        <hassio-addon-logs
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-logs>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-log-tab": HassioAddonLogDashboard;
+  }
+}

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import {
   css,
   CSSResult,
@@ -7,27 +6,27 @@ import {
   html,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
+import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
-} from "../../../src/data/hassio/addon";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
-import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
-import { hassioStyle } from "../resources/hassio-style";
+} from "../../../../src/data/hassio/addon";
+import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-ansi-to-html";
+import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-logs")
 class HassioAddonLogs extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public addon!: HassioAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property() private _error?: string;
 
-  @query("#content") private _logContent!: any;
+  @property() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -36,13 +35,20 @@ class HassioAddonLogs extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Log">
+      <h1>${this.addon.name}</h1>
+      <ha-card>
         ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-        <div class="card-content" id="content"></div>
+        <div class="card-content">
+          ${this._content
+            ? html`<hassio-ansi-to-html
+                .content=${this._content}
+              ></hassio-ansi-to-html>`
+            : ""}
+        </div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -50,17 +56,11 @@ class HassioAddonLogs extends LitElement {
     return [
       haStyle,
       hassioStyle,
-      ANSI_HTML_STYLE,
       css`
         :host,
-        paper-card {
+        ha-card {
           display: block;
         }
-        pre {
-          overflow-x: auto;
-          white-space: pre-wrap;
-          overflow-wrap: break-word;
-        }
         .errors {
           color: var(--google-red-500);
           margin-bottom: 16px;
@@ -72,11 +72,7 @@ class HassioAddonLogs extends LitElement {
   private async _loadData(): Promise<void> {
     this._error = undefined;
     try {
-      const content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
-      while (this._logContent.lastChild) {
-        this._logContent.removeChild(this._logContent.lastChild as Node);
-      }
-      this._logContent.appendChild(parseTextToColoredPre(content));
+      this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
       this._error = `Failed to get addon logs, ${err.body?.message || err}`;
     }

hassio/src/ansi-to-html.ts

@@ -1,223 +0,0 @@
-import { css } from "lit-element";
-
-interface State {
-  bold: boolean;
-  italic: boolean;
-  underline: boolean;
-  strikethrough: boolean;
-  foregroundColor: null | string;
-  backgroundColor: null | string;
-}
-
-export const ANSI_HTML_STYLE = css`
-  .bold {
-    font-weight: bold;
-  }
-  .italic {
-    font-style: italic;
-  }
-  .underline {
-    text-decoration: underline;
-  }
-  .strikethrough {
-    text-decoration: line-through;
-  }
-  .underline.strikethrough {
-    text-decoration: underline line-through;
-  }
-  .fg-red {
-    color: rgb(222, 56, 43);
-  }
-  .fg-green {
-    color: rgb(57, 181, 74);
-  }
-  .fg-yellow {
-    color: rgb(255, 199, 6);
-  }
-  .fg-blue {
-    color: rgb(0, 111, 184);
-  }
-  .fg-magenta {
-    color: rgb(118, 38, 113);
-  }
-  .fg-cyan {
-    color: rgb(44, 181, 233);
-  }
-  .fg-white {
-    color: rgb(204, 204, 204);
-  }
-  .bg-black {
-    background-color: rgb(0, 0, 0);
-  }
-  .bg-red {
-    background-color: rgb(222, 56, 43);
-  }
-  .bg-green {
-    background-color: rgb(57, 181, 74);
-  }
-  .bg-yellow {
-    background-color: rgb(255, 199, 6);
-  }
-  .bg-blue {
-    background-color: rgb(0, 111, 184);
-  }
-  .bg-magenta {
-    background-color: rgb(118, 38, 113);
-  }
-  .bg-cyan {
-    background-color: rgb(44, 181, 233);
-  }
-  .bg-white {
-    background-color: rgb(204, 204, 204);
-  }
-`;
-
-export function parseTextToColoredPre(text) {
-  const pre = document.createElement("pre");
-  const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
-  let i = 0;
-
-  const state: State = {
-    bold: false,
-    italic: false,
-    underline: false,
-    strikethrough: false,
-    foregroundColor: null,
-    backgroundColor: null,
-  };
-
-  const addSpan = (content) => {
-    const span = document.createElement("span");
-    if (state.bold) {
-      span.classList.add("bold");
-    }
-    if (state.italic) {
-      span.classList.add("italic");
-    }
-    if (state.underline) {
-      span.classList.add("underline");
-    }
-    if (state.strikethrough) {
-      span.classList.add("strikethrough");
-    }
-    if (state.foregroundColor !== null) {
-      span.classList.add(`fg-${state.foregroundColor}`);
-    }
-    if (state.backgroundColor !== null) {
-      span.classList.add(`bg-${state.backgroundColor}`);
-    }
-    span.appendChild(document.createTextNode(content));
-    pre.appendChild(span);
-  };
-
-  /* eslint-disable no-cond-assign */
-  let match;
-  // eslint-disable-next-line
-  while ((match = re.exec(text)) !== null) {
-    const j = match!.index;
-    addSpan(text.substring(i, j));
-    i = j + match[0].length;
-
-    if (match[1] === undefined) {
-      continue;
-    }
-
-    match[1].split(";").forEach((colorCode: string) => {
-      switch (parseInt(colorCode, 10)) {
-        case 0:
-          // reset
-          state.bold = false;
-          state.italic = false;
-          state.underline = false;
-          state.strikethrough = false;
-          state.foregroundColor = null;
-          state.backgroundColor = null;
-          break;
-        case 1:
-          state.bold = true;
-          break;
-        case 3:
-          state.italic = true;
-          break;
-        case 4:
-          state.underline = true;
-          break;
-        case 9:
-          state.strikethrough = true;
-          break;
-        case 22:
-          state.bold = false;
-          break;
-        case 23:
-          state.italic = false;
-          break;
-        case 24:
-          state.underline = false;
-          break;
-        case 29:
-          state.strikethrough = false;
-          break;
-        case 30:
-          // foreground black
-          state.foregroundColor = null;
-          break;
-        case 31:
-          state.foregroundColor = "red";
-          break;
-        case 32:
-          state.foregroundColor = "green";
-          break;
-        case 33:
-          state.foregroundColor = "yellow";
-          break;
-        case 34:
-          state.foregroundColor = "blue";
-          break;
-        case 35:
-          state.foregroundColor = "magenta";
-          break;
-        case 36:
-          state.foregroundColor = "cyan";
-          break;
-        case 37:
-          state.foregroundColor = "white";
-          break;
-        case 39:
-          // foreground reset
-          state.foregroundColor = null;
-          break;
-        case 40:
-          state.backgroundColor = "black";
-          break;
-        case 41:
-          state.backgroundColor = "red";
-          break;
-        case 42:
-          state.backgroundColor = "green";
-          break;
-        case 43:
-          state.backgroundColor = "yellow";
-          break;
-        case 44:
-          state.backgroundColor = "blue";
-          break;
-        case 45:
-          state.backgroundColor = "magenta";
-          break;
-        case 46:
-          state.backgroundColor = "cyan";
-          break;
-        case 47:
-          state.backgroundColor = "white";
-          break;
-        case 49:
-          // background reset
-          state.backgroundColor = null;
-          break;
-      }
-    });
-  }
-  addSpan(text.substring(i));
-
-  return pre;
-}

hassio/src/components/hassio-ansi-to-html.ts

@@ -0,0 +1,253 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+interface State {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  foregroundColor: null | string;
+  backgroundColor: null | string;
+}
+
+@customElement("hassio-ansi-to-html")
+class HassioAnsiToHtml extends LitElement {
+  @property() public content!: string;
+
+  public render(): TemplateResult | void {
+    return html`${this._parseTextToColoredPre(this.content)}`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      pre {
+        overflow-x: auto;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+      }
+      .bold {
+        font-weight: bold;
+      }
+      .italic {
+        font-style: italic;
+      }
+      .underline {
+        text-decoration: underline;
+      }
+      .strikethrough {
+        text-decoration: line-through;
+      }
+      .underline.strikethrough {
+        text-decoration: underline line-through;
+      }
+      .fg-red {
+        color: rgb(222, 56, 43);
+      }
+      .fg-green {
+        color: rgb(57, 181, 74);
+      }
+      .fg-yellow {
+        color: rgb(255, 199, 6);
+      }
+      .fg-blue {
+        color: rgb(0, 111, 184);
+      }
+      .fg-magenta {
+        color: rgb(118, 38, 113);
+      }
+      .fg-cyan {
+        color: rgb(44, 181, 233);
+      }
+      .fg-white {
+        color: rgb(204, 204, 204);
+      }
+      .bg-black {
+        background-color: rgb(0, 0, 0);
+      }
+      .bg-red {
+        background-color: rgb(222, 56, 43);
+      }
+      .bg-green {
+        background-color: rgb(57, 181, 74);
+      }
+      .bg-yellow {
+        background-color: rgb(255, 199, 6);
+      }
+      .bg-blue {
+        background-color: rgb(0, 111, 184);
+      }
+      .bg-magenta {
+        background-color: rgb(118, 38, 113);
+      }
+      .bg-cyan {
+        background-color: rgb(44, 181, 233);
+      }
+      .bg-white {
+        background-color: rgb(204, 204, 204);
+      }
+    `;
+  }
+
+  private _parseTextToColoredPre(text) {
+    const pre = document.createElement("pre");
+    const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
+    let i = 0;
+
+    const state: State = {
+      bold: false,
+      italic: false,
+      underline: false,
+      strikethrough: false,
+      foregroundColor: null,
+      backgroundColor: null,
+    };
+
+    const addSpan = (content) => {
+      const span = document.createElement("span");
+      if (state.bold) {
+        span.classList.add("bold");
+      }
+      if (state.italic) {
+        span.classList.add("italic");
+      }
+      if (state.underline) {
+        span.classList.add("underline");
+      }
+      if (state.strikethrough) {
+        span.classList.add("strikethrough");
+      }
+      if (state.foregroundColor !== null) {
+        span.classList.add(`fg-${state.foregroundColor}`);
+      }
+      if (state.backgroundColor !== null) {
+        span.classList.add(`bg-${state.backgroundColor}`);
+      }
+      span.appendChild(document.createTextNode(content));
+      pre.appendChild(span);
+    };
+
+    /* eslint-disable no-cond-assign */
+    let match;
+    // eslint-disable-next-line
+    while ((match = re.exec(text)) !== null) {
+      const j = match!.index;
+      addSpan(text.substring(i, j));
+      i = j + match[0].length;
+
+      if (match[1] === undefined) {
+        continue;
+      }
+
+      match[1].split(";").forEach((colorCode: string) => {
+        switch (parseInt(colorCode, 10)) {
+          case 0:
+            // reset
+            state.bold = false;
+            state.italic = false;
+            state.underline = false;
+            state.strikethrough = false;
+            state.foregroundColor = null;
+            state.backgroundColor = null;
+            break;
+          case 1:
+            state.bold = true;
+            break;
+          case 3:
+            state.italic = true;
+            break;
+          case 4:
+            state.underline = true;
+            break;
+          case 9:
+            state.strikethrough = true;
+            break;
+          case 22:
+            state.bold = false;
+            break;
+          case 23:
+            state.italic = false;
+            break;
+          case 24:
+            state.underline = false;
+            break;
+          case 29:
+            state.strikethrough = false;
+            break;
+          case 30:
+            // foreground black
+            state.foregroundColor = null;
+            break;
+          case 31:
+            state.foregroundColor = "red";
+            break;
+          case 32:
+            state.foregroundColor = "green";
+            break;
+          case 33:
+            state.foregroundColor = "yellow";
+            break;
+          case 34:
+            state.foregroundColor = "blue";
+            break;
+          case 35:
+            state.foregroundColor = "magenta";
+            break;
+          case 36:
+            state.foregroundColor = "cyan";
+            break;
+          case 37:
+            state.foregroundColor = "white";
+            break;
+          case 39:
+            // foreground reset
+            state.foregroundColor = null;
+            break;
+          case 40:
+            state.backgroundColor = "black";
+            break;
+          case 41:
+            state.backgroundColor = "red";
+            break;
+          case 42:
+            state.backgroundColor = "green";
+            break;
+          case 43:
+            state.backgroundColor = "yellow";
+            break;
+          case 44:
+            state.backgroundColor = "blue";
+            break;
+          case 45:
+            state.backgroundColor = "magenta";
+            break;
+          case 46:
+            state.backgroundColor = "cyan";
+            break;
+          case 47:
+            state.backgroundColor = "white";
+            break;
+          case 49:
+            // background reset
+            state.backgroundColor = null;
+            break;
+        }
+      });
+    }
+    addSpan(text.substring(i));
+
+    return pre;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-ansi-to-html": HassioAnsiToHtml;
+  }
+}

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

@@ -1,4 +1,4 @@
-import "@polymer/iron-icon/iron-icon";
+import { mdiHelpCircle } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -9,6 +9,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/ha-relative-time";
+import "../../../src/components/ha-svg-icon";
 import { HomeAssistant } from "../../../src/types";
 
 @customElement("hassio-card-content")
@@ -31,7 +32,7 @@ class HassioCardContent extends LitElement {
 
   @property() public iconClass?: string;
 
-  @property() public icon = "hass:help-circle";
+  @property() public icon = mdiHelpCircle;
 
   @property() public iconImage?: string;
 
@@ -48,11 +49,11 @@ class HassioCardContent extends LitElement {
             </div>
           `
         : html`
-            <iron-icon
+            <ha-svg-icon
               class=${this.iconClass}
-              .icon=${this.icon}
+              .path=${this.icon}
               .title=${this.iconTitle}
-            ></iron-icon>
+            ></ha-svg-icon>
           `}
       <div>
         <div class="title">
@@ -78,25 +79,25 @@ class HassioCardContent extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      iron-icon {
+      ha-svg-icon {
         margin-right: 24px;
         margin-left: 8px;
         margin-top: 12px;
         float: left;
         color: var(--secondary-text-color);
       }
-      iron-icon.update {
+      ha-svg-icon.update {
         color: var(--paper-orange-400);
       }
-      iron-icon.running,
-      iron-icon.installed {
+      ha-svg-icon.running,
+      ha-svg-icon.installed {
         color: var(--paper-green-400);
       }
-      iron-icon.hassupdate,
-      iron-icon.snapshot {
+      ha-svg-icon.hassupdate,
+      ha-svg-icon.snapshot {
         color: var(--paper-item-icon-color);
       }
-      iron-icon.not_available {
+      ha-svg-icon.not_available {
         color: var(--google-red-500);
       }
       .title {

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/components/hassio-search-input.ts

@@ -1,82 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-
-@customElement("hassio-search-input")
-class HassioSearchInput extends LitElement {
-  @property() private filter?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="search-container">
-        <paper-input
-          label="Search"
-          .value=${this.filter}
-          @value-changed=${this._filterInputChanged}
-        >
-          <iron-icon
-            icon="hassio:magnify"
-            slot="prefix"
-            class="prefix"
-          ></iron-icon>
-          ${this.filter &&
-          html`
-            <paper-icon-button
-              slot="suffix"
-              class="suffix"
-              @click=${this._clearSearch}
-              icon="hassio:close"
-              alt="Clear"
-              title="Clear"
-            ></paper-icon-button>
-          `}
-        </paper-input>
-      </div>
-    `;
-  }
-
-  private async _filterChanged(value: string) {
-    fireEvent(this, "value-changed", { value: String(value) });
-  }
-
-  private async _filterInputChanged(e) {
-    this._filterChanged(e.target.value);
-  }
-
-  private async _clearSearch() {
-    this._filterChanged("");
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-input {
-        flex: 1 1 auto;
-        margin: 0 16px;
-      }
-      .search-container {
-        display: inline-flex;
-        width: 100%;
-        align-items: center;
-      }
-      .prefix {
-        margin: 8px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-search-input": HassioSearchInput;
-  }
-}

hassio/src/dashboard/hassio-addons.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-card/paper-card";
+import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -10,6 +10,7 @@ import {
 } from "lit-element";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/ha-card";
 import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
@@ -29,19 +30,19 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.addons
             ? html`
-                <paper-card>
+                <ha-card>
                   <div class="card-content">
                     You don't have any add-ons installed yet. Head over to
                     <a href="#" @click=${this._openStore}>the add-on store</a>
                     to get started!
                   </div>
-                </paper-card>
+                </ha-card>
               `
             : this.addons
                 .sort((a, b) => (a.name > b.name ? 1 : -1))
                 .map(
                   (addon) => html`
-                    <paper-card .addon=${addon} @click=${this._addonTapped}>
+                    <ha-card .addon=${addon} @click=${this._addonTapped}>
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}
@@ -51,8 +52,8 @@ class HassioAddons extends LitElement {
                           .showTopbar=${addon.installed !== addon.version}
                           topbarClass="update"
                           .icon=${addon.installed !== addon.version
-                            ? "hassio:arrow-up-bold-circle"
-                            : "hassio:puzzle"}
+                            ? mdiArrowUpBoldCircle
+                            : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
                             ? "Add-on is stopped"
                             : addon.installed !== addon.version
@@ -75,7 +76,7 @@ class HassioAddons extends LitElement {
                             : undefined}
                         ></hassio-card-content>
                       </div>
-                    </paper-card>
+                    </ha-card>
                   `
                 )}
         </div>
@@ -88,7 +89,7 @@ class HassioAddons extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        paper-card {
+        ha-card {
           cursor: pointer;
         }
       `,
@@ -96,7 +97,7 @@ class HassioAddons extends LitElement {
   }
 
   private _addonTapped(ev: any): void {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}/info`);
   }
 
   private _openStore(): void {

hassio/src/dashboard/hassio-dashboard.ts

@@ -12,35 +12,51 @@ import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addons";
 import "./hassio-update";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
     return html`
-      <div class="content">
-        <hassio-update
-          .hass=${this.hass}
-          .hassInfo=${this.hassInfo}
-          .supervisorInfo=${this.supervisorInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-update>
-        <hassio-addons
-          .hass=${this.hass}
-          .addons=${this.supervisorInfo.addons}
-        ></hassio-addons>
-      </div>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        main-page
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Dashboard</span>
+        <div class="content">
+          <hassio-update
+            .hass=${this.hass}
+            .hassInfo=${this.hassInfo}
+            .supervisorInfo=${this.supervisorInfo}
+            .hassOsInfo=${this.hassOsInfo}
+          ></hassio-update>
+          <hassio-addons
+            .hass=${this.hass}
+            .addons=${this.supervisorInfo.addons}
+          ></hassio-addons>
+        </div>
+      </hass-tabs-subpage>
     `;
   }
 

hassio/src/dashboard/hassio-update.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
+import { mdiHomeAssistant } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -11,6 +10,8 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-svg-icon";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
@@ -18,7 +19,6 @@ import {
 } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-update")
@@ -72,7 +72,7 @@ export class HassioUpdate extends LitElement {
             `https://${
               this.hassInfo.version_latest.includes("b") ? "rc" : "www"
             }.home-assistant.io/latest-release-notes/`,
-            "hassio:home-assistant"
+            mdiHomeAssistant
           )}
           ${this._renderUpdateCard(
             "Supervisor",
@@ -107,12 +107,12 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <paper-card>
+      <ha-card>
         <div class="card-content">
           ${icon
             ? html`
                 <div class="icon">
-                  <iron-icon .icon=${icon}></iron-icon>
+                  <ha-svg-icon .path=${icon}></ha-svg-icon>
                 </div>
               `
             : ""}
@@ -133,7 +133,7 @@ export class HassioUpdate extends LitElement {
             Update
           </ha-call-api-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -158,15 +158,16 @@ export class HassioUpdate extends LitElement {
       hassioStyle,
       css`
         .icon {
-          --iron-icon-height: 48px;
-          --iron-icon-width: 48px;
+          --mdc-icon-size: 48px;
           float: right;
           margin: 0 0 2px 10px;
+          color: var(--primary-text-color);
         }
         .update-heading {
           font-size: var(--paper-font-subhead_-_font-size);
           font-weight: 500;
           margin-bottom: 0.5em;
+          color: var(--primary-text-color);
         }
         .warning {
           color: var(--secondary-text-color);

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

@@ -1,7 +1,3 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { PaperDialogElement } from "@polymer/paper-dialog";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
 import {
   css,
   CSSResult,
@@ -9,46 +5,50 @@ import {
   html,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
-import "../../../../src/components/dialog/ha-paper-dialog";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-markdown";
 import { haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
 
 @customElement("dialog-hassio-markdown")
 class HassioMarkdownDialog extends LitElement {
+  @property() public hass!: HomeAssistant;
+
   @property() public title!: string;
 
   @property() public content!: string;
 
-  @query("#dialog") private _dialog!: PaperDialogElement;
+  @property() private _opened = false;
 
   public showDialog(params: HassioMarkdownDialogParams) {
     this.title = params.title;
     this.content = params.content;
-    this._dialog.open();
+    this._opened = true;
   }
 
   protected render(): TemplateResult {
+    if (!this._opened) {
+      return html``;
+    }
     return html`
-      <ha-paper-dialog id="dialog" with-backdrop="">
-        <app-toolbar>
-          <paper-icon-button
-            icon="hassio:close"
-            dialog-dismiss=""
-          ></paper-icon-button>
-          <div main-title="">${this.title}</div>
-        </app-toolbar>
-        <paper-dialog-scrollable>
-          <ha-markdown .content=${this.content || ""}></ha-markdown>
-        </paper-dialog-scrollable>
-      </ha-paper-dialog>
+      <ha-dialog
+        open
+        @closing=${this._closeDialog}
+        .heading=${createCloseHeading(this.hass, this.title)}
+      >
+        <ha-markdown .content=${this.content || ""}></ha-markdown>
+      </ha-dialog>
     `;
   }
 
+  private _closeDialog(): void {
+    this._opened = false;
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,
@@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement {
             color: var(--text-primary-color);
             background-color: var(--primary-color);
           }
+          ha-markdown {
+            padding: 16px;
+          }
         }
       `,
     ];

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

@@ -0,0 +1,233 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiDelete } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-spinner/paper-spinner";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  query,
+  TemplateResult,
+} from "lit-element";
+import memoizeOne from "memoize-one";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
+import {
+  fetchHassioAddonsInfo,
+  HassioAddonRepository,
+} from "../../../../src/data/hassio/addon";
+import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
+
+@customElement("dialog-hassio-repositories")
+class HassioRepositoriesDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) private _repos: HassioAddonRepository[] = [];
+
+  @property({ attribute: false })
+  private _dialogParams?: HassioRepositoryDialogParams;
+
+  @query("#repository_input") private _optionInput?: PaperInputElement;
+
+  @property() private _opened = false;
+
+  @property() private _prosessing = false;
+
+  @property() private _error?: string;
+
+  public async showDialog(_dialogParams: any): Promise<void> {
+    this._dialogParams = _dialogParams;
+    this._repos = _dialogParams.repos;
+    this._opened = true;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._opened = false;
+    this._error = "";
+  }
+
+  private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) =>
+    repos
+      .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
+      .sort((a, b) => (a.name < b.name ? -1 : 1))
+  );
+
+  protected render(): TemplateResult {
+    const repositories = this._filteredRepositories(this._repos);
+    return html`
+      <ha-dialog
+        .open=${this._opened}
+        @closing=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        heading="Manage add-on repositories"
+      >
+        ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+        <div class="form">
+          ${repositories.length
+            ? repositories.map((repo) => {
+                return html`
+                  <paper-item class="option">
+                    <paper-item-body three-line>
+                      <div>${repo.name}</div>
+                      <div secondary>${repo.maintainer}</div>
+                      <div secondary>${repo.url}</div>
+                    </paper-item-body>
+                    <mwc-icon-button
+                      .slug=${repo.slug}
+                      title="Remove"
+                      @click=${this._removeRepository}
+                    >
+                      <ha-svg-icon path=${mdiDelete}></ha-svg-icon>
+                    </mwc-icon-button>
+                  </paper-item>
+                `;
+              })
+            : html`
+                <paper-item>
+                  No repositories
+                </paper-item>
+              `}
+          <div class="layout horizontal bottom">
+            <paper-input
+              class="flex-auto"
+              id="repository_input"
+              label="Add repository"
+              @keydown=${this._handleKeyAdd}
+            ></paper-input>
+            <mwc-button @click=${this._addRepository}>
+              ${this._prosessing
+                ? html`<paper-spinner active></paper-spinner>`
+                : "Add"}
+            </mwc-button>
+          </div>
+        </div>
+        <mwc-button slot="primaryAction" @click="${this.closeDialog}">
+          Close
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-dialog.button-left {
+          --justify-action-buttons: flex-start;
+        }
+        paper-icon-item {
+          cursor: pointer;
+        }
+        .form {
+          color: var(--primary-text-color);
+        }
+        .option {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          margin-top: 4px;
+        }
+        mwc-button {
+          margin-left: 8px;
+        }
+        ha-paper-dropdown-menu {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  public focus() {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  private _handleKeyAdd(ev: KeyboardEvent) {
+    ev.stopPropagation();
+    if (ev.keyCode !== 13) {
+      return;
+    }
+    this._addRepository();
+  }
+
+  private async _addRepository() {
+    const input = this._optionInput;
+    if (!input || !input.value) {
+      return;
+    }
+    this._prosessing = true;
+    const repositories = this._filteredRepositories(this._repos);
+    const newRepositories = repositories.map((repo) => {
+      return repo.source;
+    });
+    newRepositories.push(input.value);
+
+    try {
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
+
+      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      this._repos = addonsInfo.repositories;
+
+      await this._dialogParams!.loadData();
+
+      input.value = "";
+    } catch (err) {
+      this._error = err.message;
+    }
+    this._prosessing = false;
+  }
+
+  private async _removeRepository(ev: Event) {
+    const slug = (ev.currentTarget as any).slug;
+    const repositories = this._filteredRepositories(this._repos);
+    const repository = repositories.find((repo) => {
+      return repo.slug === slug;
+    });
+    if (!repository) {
+      return;
+    }
+    const newRepositories = repositories
+      .map((repo) => {
+        return repo.source;
+      })
+      .filter((repo) => {
+        return repo !== repository.source;
+      });
+
+    try {
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
+
+      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      this._repos = addonsInfo.repositories;
+
+      await this._dialogParams!.loadData();
+    } catch (err) {
+      this._error = err.message;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-repositories": HassioRepositoriesDialog;
+  }
+}

hassio/src/dialogs/repositories/show-dialog-repositories.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
+import "./dialog-hassio-repositories";
+
+export interface HassioRepositoryDialogParams {
+  repos: HassioAddonRepository[];
+  loadData: () => Promise<void>;
+}
+
+export const showRepositoriesDialog = (
+  element: HTMLElement,
+  dialogParams: HassioRepositoryDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-repositories",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-repositories" */ "./dialog-hassio-repositories"
+      ),
+    dialogParams,
+  });
+};

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

@@ -1,10 +1,6 @@
 import "@material/mwc-button";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-icon/iron-icon";
+import { mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
 import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import { PaperDialogElement } from "@polymer/paper-dialog";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import {
   css,
@@ -13,10 +9,10 @@ import {
   html,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
-import "../../../../src/components/dialog/ha-paper-dialog";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import {
   fetchHassioSnapshotInfo,
@@ -76,7 +72,7 @@ class HassioSnapshotDialog extends LitElement {
 
   @property() private _error?: string;
 
-  @property() private snapshot?: HassioSnapshotDetail;
+  @property() private _snapshot?: HassioSnapshotDetail;
 
   @property() private _folders!: FolderItem[];
 
@@ -88,49 +84,35 @@ class HassioSnapshotDialog extends LitElement {
 
   @property() private _restoreHass: boolean | null | undefined = true;
 
-  @query("#dialog") private _dialog!: PaperDialogElement;
-
   public async showDialog(params: HassioSnapshotDialogParams) {
-    this.snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
+    this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
     this._folders = _computeFolders(
-      this.snapshot.folders
+      this._snapshot.folders
     ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
     this._addons = _computeAddons(
-      this.snapshot.addons
+      this._snapshot.addons
     ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
 
     this._dialogParams = params;
-
-    try {
-      this._dialog.open();
-    } catch {
-      await this.showDialog(params);
-    }
   }
 
   protected render(): TemplateResult {
-    if (!this.snapshot) {
+    if (!this._dialogParams || !this._snapshot) {
       return html``;
     }
     return html`
-      <ha-paper-dialog
-        id="dialog"
-        with-backdrop=""
-        .on-iron-overlay-closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        stacked
+        @closing=${this._closeDialog}
+        .heading=${createCloseHeading(this.hass, this._computeName)}
       >
-        <app-toolbar>
-          <paper-icon-button
-            icon="hassio:close"
-            dialog-dismiss=""
-          ></paper-icon-button>
-          <div main-title="">${this._computeName}</div>
-        </app-toolbar>
         <div class="details">
-          ${this.snapshot.type === "full"
+          ${this._snapshot.type === "full"
             ? "Full snapshot"
             : "Partial snapshot"}
           (${this._computeSize})<br />
-          ${this._formatDatetime(this.snapshot.date)}
+          ${this._formatDatetime(this._snapshot.date)}
         </div>
         <div>Home Assistant:</div>
         <paper-checkbox
@@ -139,7 +121,7 @@ class HassioSnapshotDialog extends LitElement {
             this._restoreHass = (ev.target as PaperCheckboxElement).checked;
           }}"
         >
-          Home Assistant ${this.snapshot.homeassistant}
+          Home Assistant ${this._snapshot.homeassistant}
         </paper-checkbox>
         ${this._folders.length
           ? html`
@@ -183,7 +165,7 @@ class HassioSnapshotDialog extends LitElement {
               </paper-dialog-scrollable>
             `
           : ""}
-        ${this.snapshot.protected
+        ${this._snapshot.protected
           ? html`
               <paper-input
                 autofocus=""
@@ -197,37 +179,35 @@ class HassioSnapshotDialog extends LitElement {
         ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
 
         <div>Actions:</div>
-        <ul class="buttons">
-          <li>
-            <mwc-button @click=${this._downloadClicked}>
-              <iron-icon icon="hassio:download" class="icon"></iron-icon>
-              Download Snapshot
-            </mwc-button>
-          </li>
-          <li>
-            <mwc-button @click=${this._partialRestoreClicked}>
-              <iron-icon icon="hassio:history" class="icon"> </iron-icon>
-              Restore Selected
-            </mwc-button>
-          </li>
-          ${this.snapshot.type === "full"
-            ? html`
-                <li>
-                  <mwc-button @click=${this._fullRestoreClicked}>
-                    <iron-icon icon="hassio:history" class="icon"> </iron-icon>
-                    Wipe &amp; restore
-                  </mwc-button>
-                </li>
-              `
-            : ""}
-          <li>
-            <mwc-button @click=${this._deleteClicked}>
-              <iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
-              <span class="warning">Delete Snapshot</span>
-            </mwc-button>
-          </li>
-        </ul>
-      </ha-paper-dialog>
+
+        <mwc-button @click=${this._downloadClicked} slot="primaryAction">
+          <ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
+          Download Snapshot
+        </mwc-button>
+
+        <mwc-button
+          @click=${this._partialRestoreClicked}
+          slot="secondaryAction"
+        >
+          <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+          Restore Selected
+        </mwc-button>
+        ${this._snapshot.type === "full"
+          ? html`
+              <mwc-button
+                @click=${this._fullRestoreClicked}
+                slot="secondaryAction"
+              >
+                <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+                Wipe &amp; restore
+              </mwc-button>
+            `
+          : ""}
+        <mwc-button @click=${this._deleteClicked} slot="secondaryAction">
+          <ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
+          <span class="warning">Delete Snapshot</span>
+        </mwc-button>
+      </ha-dialog>
     `;
   }
 
@@ -235,37 +215,10 @@ class HassioSnapshotDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-paper-dialog {
-          min-width: 350px;
-          font-size: 14px;
-          border-radius: 2px;
-        }
-        app-toolbar {
-          margin: 0;
-          padding: 0 16px;
-          color: var(--primary-text-color);
-          background-color: var(--secondary-background-color);
-        }
-        app-toolbar [main-title] {
-          margin-left: 16px;
-        }
-        ha-paper-dialog-scrollable {
-          margin: 0;
-        }
         paper-checkbox {
           display: block;
           margin: 4px;
         }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-paper-dialog {
-            max-height: 100%;
-            height: 100%;
-          }
-          app-toolbar {
-            color: var(--text-primary-color);
-            background-color: var(--primary-color);
-          }
-        }
         .details {
           color: var(--secondary-text-color);
         }
@@ -336,7 +289,7 @@ class HassioSnapshotDialog extends LitElement {
       folders,
     };
 
-    if (this.snapshot!.protected) {
+    if (this._snapshot!.protected) {
       data.password = this._snapshotPassword;
     }
 
@@ -344,13 +297,13 @@ class HassioSnapshotDialog extends LitElement {
       .callApi(
         "POST",
 
-        `hassio/snapshots/${this.snapshot!.slug}/restore/partial`,
+        `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this._dialog.close();
+          this._closeDialog();
         },
         (error) => {
           this._error = error.body.message;
@@ -363,20 +316,20 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    const data = this.snapshot!.protected
+    const data = this._snapshot!.protected
       ? { password: this._snapshotPassword }
       : undefined;
 
     this.hass
       .callApi(
         "POST",
-        `hassio/snapshots/${this.snapshot!.slug}/restore/full`,
+        `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this._dialog.close();
+          this._closeDialog();
         },
         (error) => {
           this._error = error.body.message;
@@ -391,11 +344,11 @@ class HassioSnapshotDialog extends LitElement {
 
     this.hass
 
-      .callApi("POST", `hassio/snapshots/${this.snapshot!.slug}/remove`)
+      .callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
       .then(
         () => {
-          this._dialog.close();
           this._dialogParams!.onDelete();
+          this._closeDialog();
         },
         (error) => {
           this._error = error.body.message;
@@ -408,7 +361,7 @@ class HassioSnapshotDialog extends LitElement {
     try {
       signedPath = await getSignedPath(
         this.hass,
-        `/api/hassio/snapshots/${this.snapshot!.slug}/download`
+        `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
       alert(`Error: ${err.message}`);
@@ -419,19 +372,19 @@ class HassioSnapshotDialog extends LitElement {
     const a = document.createElement("a");
     a.href = signedPath.path;
     a.download = `Hass_io_${name}.tar`;
-    this._dialog.appendChild(a);
+    this.shadowRoot!.appendChild(a);
     a.click();
-    this._dialog.removeChild(a);
+    this.shadowRoot!.removeChild(a);
   }
 
   private get _computeName() {
-    return this.snapshot
-      ? this.snapshot.name || this.snapshot.slug
+    return this._snapshot
+      ? this._snapshot.name || this._snapshot.slug
       : "Unnamed snapshot";
   }
 
   private get _computeSize() {
-    return Math.ceil(this.snapshot!.size * 10) / 10 + " MB";
+    return Math.ceil(this._snapshot!.size * 10) / 10 + " MB";
   }
 
   private _formatDatetime(datetime) {
@@ -445,9 +398,9 @@ class HassioSnapshotDialog extends LitElement {
     });
   }
 
-  private _dialogClosed() {
+  private _closeDialog() {
     this._dialogParams = undefined;
-    this.snapshot = undefined;
+    this._snapshot = undefined;
     this._snapshotPassword = "";
     this._folders = [];
     this._addons = [];

hassio/src/dialogs/suggestAddonRestart.ts

@@ -0,0 +1,33 @@
+import type { LitElement } from "lit-element";
+import {
+  HassioAddonDetails,
+  restartHassioAddon,
+} from "../../../src/data/hassio/addon";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../../src/types";
+
+export const suggestAddonRestart = async (
+  element: LitElement,
+  hass: HomeAssistant,
+  addon: HassioAddonDetails
+): Promise<void> => {
+  const confirmed = await showConfirmationDialog(element, {
+    title: addon.name,
+    text: "Do you want to restart the add-on with your changes?",
+    confirmText: "restart add-on",
+    dismissText: "no",
+  });
+  if (confirmed) {
+    try {
+      await restartHassioAddon(hass, addon.slug);
+    } catch (err) {
+      showAlertDialog(element, {
+        title: "Failed to restart",
+        text: err.body.message,
+      });
+    }
+  }
+};

hassio/src/entrypoint.ts

@@ -1,11 +1,6 @@
-window.loadES5Adapter().then(() => {
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
-  // 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

@@ -1,4 +1,3 @@
-import "@polymer/paper-icon-button";
 import { PolymerElement } from "@polymer/polymer";
 import { customElement, property, PropertyValues } from "lit-element";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
@@ -15,7 +14,9 @@ import {
   createHassioSession,
   fetchHassioHomeAssistantInfo,
   fetchHassioSupervisorInfo,
+  fetchHassioInfo,
   HassioHomeAssistantInfo,
+  HassioInfo,
   HassioPanelInfo,
   HassioSupervisorInfo,
 } from "../../src/data/hassio/supervisor";
@@ -32,13 +33,7 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import "../../src/resources/ha-style";
 import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
-import "./hassio-pages-with-tabs";
-
-// The register callback of the IronA11yKeysBehavior inside paper-icon-button
-// is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
-// causing an exception when added to DOM. When transpiled to ES5, this will
-// break the build.
-customElements.get("paper-icon-button").prototype._keyBindings = {};
+import "./hassio-panel";
 
 @customElement("hassio-main")
 class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
@@ -55,17 +50,17 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     showLoading: true,
     routes: {
       dashboard: {
-        tag: "hassio-pages-with-tabs",
+        tag: "hassio-panel",
         cache: true,
       },
       snapshots: "dashboard",
       store: "dashboard",
       system: "dashboard",
       addon: {
-        tag: "hassio-addon-view",
+        tag: "hassio-addon-dashboard",
         load: () =>
           import(
-            /* webpackChunkName: "hassio-addon-view" */ "./addon-view/hassio-addon-view"
+            /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard"
           ),
       },
       ingress: {
@@ -82,6 +77,8 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
 
   @property() private _hostInfo: HassioHostInfo;
 
+  @property() private _hassioInfo?: HassioInfo;
+
   @property() private _hassOsInfo?: HassioHassOSInfo;
 
   @property() private _hassInfo: HassioHomeAssistantInfo;
@@ -94,6 +91,20 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       this.hass.themes,
       this.hass.selectedTheme || this.hass.themes.default_theme
     );
+
+    this.style.setProperty(
+      "--app-header-background-color",
+      "var(--sidebar-background-color)"
+    );
+    this.style.setProperty(
+      "--app-header-text-color",
+      "var(--sidebar-text-color)"
+    );
+    this.style.setProperty(
+      "--app-header-border-bottom",
+      "1px solid var(--divider-color)"
+    );
+
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019
     // We went to a single hass-toggle-menu event in HA 0.90. However, the
@@ -132,8 +143,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
 
   protected updatePageEl(el) {
     // the tabs page does its own routing so needs full route.
-    const route =
-      el.nodeName === "HASSIO-PAGES-WITH-TABS" ? this.route : this.routeTail;
+    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
 
     if ("setProperties" in el) {
       // As long as we have Polymer pages
@@ -141,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,
@@ -150,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;
@@ -163,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;
 
@@ -205,7 +219,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       await awaitAlert(
         {
           text: "Unable to fetch add-on info to start Ingress",
-          title: "Hass.io",
+          title: "Supervisor",
         },
         () => history.back()
       );
@@ -231,7 +245,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
           text: "Add-on is not running. Please start it first",
           title: addon.name,
         },
-        () => navigate(this, `/hassio/addon/${addon.slug}`, true)
+        () => navigate(this, `/hassio/addon/${addon.slug}/info`, true)
       );
 
       return;

hassio/src/hassio-pages-with-tabs.ts

@@ -1,141 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import scrollToTarget from "../../src/common/dom/scroll-to-target";
-import { navigate } from "../../src/common/navigate";
-import "../../src/components/ha-menu-button";
-import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
-import {
-  HassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-} from "../../src/data/hassio/supervisor";
-import "../../src/resources/ha-style";
-import { haStyle } from "../../src/resources/styles";
-import { HomeAssistant, Route } from "../../src/types";
-import "./hassio-tabs-router";
-
-const HAS_REFRESH_BUTTON = ["store", "snapshots"];
-
-@customElement("hassio-pages-with-tabs")
-class HassioPagesWithTabs extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public narrow!: boolean;
-
-  @property() public route!: Route;
-
-  @property() public supervisorInfo!: HassioSupervisorInfo;
-
-  @property() public hostInfo!: HassioHostInfo;
-
-  @property() public hassInfo!: HassioHomeAssistantInfo;
-
-  @property() public hassOsInfo!: HassioHassOSInfo;
-
-  protected render(): TemplateResult {
-    const page = this._page;
-    return html`
-      <app-header-layout has-scrolling-region>
-        <app-header fixed slot="header">
-          <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-              hassio
-            ></ha-menu-button>
-            <div main-title>Supervisor</div>
-            ${HAS_REFRESH_BUTTON.includes(page)
-              ? html`
-                  <paper-icon-button
-                    icon="hassio:refresh"
-                    @click=${this.refreshClicked}
-                  ></paper-icon-button>
-                `
-              : undefined}
-          </app-toolbar>
-          <paper-tabs
-            scrollable
-            attr-for-selected="page-name"
-            .selected=${page}
-            @iron-activate=${this.handlePageSelected}
-          >
-            <paper-tab page-name="dashboard">Dashboard</paper-tab>
-            <paper-tab page-name="snapshots">Snapshots</paper-tab>
-            <paper-tab page-name="store">Add-on store</paper-tab>
-            <paper-tab page-name="system">System</paper-tab>
-          </paper-tabs>
-        </app-header>
-        <hassio-tabs-router
-          .route=${this.route}
-          .hass=${this.hass}
-          .supervisorInfo=${this.supervisorInfo}
-          .hostInfo=${this.hostInfo}
-          .hassInfo=${this.hassInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-tabs-router>
-      </app-header-layout>
-    `;
-  }
-
-  private handlePageSelected(ev) {
-    const newPage = ev.detail.item.getAttribute("page-name");
-    if (newPage !== this._page) {
-      navigate(this, `/hassio/${newPage}`);
-    }
-
-    scrollToTarget(
-      this,
-      // @ts-ignore
-      this.shadowRoot!.querySelector("app-header-layout").header.scrollTarget
-    );
-  }
-
-  private refreshClicked() {
-    if (this._page === "snapshots") {
-      // @ts-ignore
-      this.shadowRoot.querySelector("hassio-snapshots").refreshData();
-    } else {
-      // @ts-ignore
-      this.shadowRoot.querySelector("hassio-addon-store").refreshData();
-    }
-  }
-
-  private get _page() {
-    return this.route.path.substr(1);
-  }
-
-  static get styles(): CSSResultArray {
-    return [
-      haStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-          --paper-card-header-color: var(--primary-text-color);
-        }
-        paper-tabs {
-          margin-left: 12px;
-          --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
-          text-transform: uppercase;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-pages-with-tabs": HassioPagesWithTabs;
-  }
-}

hassio/src/hassio-panel-router.ts

@@ -1,15 +1,15 @@
-import { PolymerElement } from "@polymer/polymer";
 import { customElement, property } from "lit-element";
 import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
+  HassioInfo,
 } from "../../src/data/hassio/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
@@ -17,29 +17,35 @@ import "./dashboard/hassio-dashboard";
 import "./snapshots/hassio-snapshots";
 import "./system/hassio-system";
 
-@customElement("hassio-tabs-router")
-class HassioTabsRouter extends HassRouterPage {
-  @property() public hass!: HomeAssistant;
+@customElement("hassio-panel-router")
+class HassioPanelRouter extends HassRouterPage {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public hostInfo: HassioHostInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
+  @property({ attribute: false }) public hostInfo: HassioHostInfo;
+
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected routerOptions: RouterOptions = {
     routes: {
       dashboard: {
         tag: "hassio-dashboard",
       },
-      snapshots: {
-        tag: "hassio-snapshots",
-      },
       store: {
         tag: "hassio-addon-store",
       },
+      snapshots: {
+        tag: "hassio-snapshots",
+      },
       system: {
         tag: "hassio-system",
       },
@@ -47,27 +53,19 @@ class HassioTabsRouter extends HassRouterPage {
   };
 
   protected updatePageEl(el) {
-    if ("setProperties" in el) {
-      // As long as we have Polymer pages
-      (el as PolymerElement).setProperties({
-        hass: this.hass,
-        supervisorInfo: this.supervisorInfo,
-        hostInfo: this.hostInfo,
-        hassInfo: this.hassInfo,
-        hassOsInfo: this.hassOsInfo,
-      });
-    } else {
-      el.hass = this.hass;
-      el.supervisorInfo = this.supervisorInfo;
-      el.hostInfo = this.hostInfo;
-      el.hassInfo = this.hassInfo;
-      el.hassOsInfo = this.hassOsInfo;
-    }
+    el.hass = this.hass;
+    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;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hassio-tabs-router": HassioTabsRouter;
+    "hassio-panel-router": HassioPanelRouter;
   }
 }

hassio/src/hassio-panel.ts

@@ -0,0 +1,80 @@
+import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+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 { HomeAssistant, Route } from "../../src/types";
+import "./hassio-panel-router";
+
+export const supervisorTabs: PageNavigation[] = [
+  {
+    name: "Dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: mdiViewDashboard,
+  },
+  {
+    name: "Add-on store",
+    path: `/hassio/store`,
+    iconPath: mdiStore,
+  },
+  {
+    name: "Snapshots",
+    path: `/hassio/snapshots`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    name: "System",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];
+
+@customElement("hassio-panel")
+class HassioPanel extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
+  @property({ attribute: false }) public hostInfo!: HassioHostInfo;
+
+  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
+
+  protected render(): TemplateResult {
+    return html`
+      <hassio-panel-router
+        .route=${this.route}
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .supervisorInfo=${this.supervisorInfo}
+        .hassioInfo=${this.hassioInfo}
+        .hostInfo=${this.hostInfo}
+        .hassInfo=${this.hassInfo}
+        .hassOsInfo=${this.hassOsInfo}
+      ></hassio-panel-router>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-panel": HassioPanel;
+  }
+}

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

@@ -86,9 +86,6 @@ class HassioIngressView extends LitElement {
         height: 100%;
         border: 0;
       }
-      paper-icon-button {
-        color: var(--text-primary-color);
-      }
     `;
   }
 }