Remove light card for generated mode

.eslintrc-hound.json

@@ -0,0 +1,80 @@
+{
+  "extends": ["airbnb-base", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": "2020",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "settings": {
+    "react": {
+      "pragma": "h",
+      "version": "15.0"
+    },
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
+  "globals": {
+    "__DEV__": false,
+    "__DEMO__": false,
+    "__BUILD__": false,
+    "__VERSION__": false,
+    "__STATIC_PATH__": false,
+    "Polymer": true,
+    "webkitSpeechRecognition": false,
+    "ResizeObserver": false
+  },
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
+  "rules": {
+    "class-methods-use-this": 0,
+    "new-cap": 0,
+    "prefer-template": 0,
+    "object-shorthand": 0,
+    "func-names": 0,
+    "prefer-arrow-callback": 0,
+    "no-underscore-dangle": 0,
+    "no-var": 0,
+    "strict": 0,
+    "prefer-spread": 0,
+    "no-plusplus": 0,
+    "no-bitwise": 0,
+    "comma-dangle": 0,
+    "vars-on-top": 0,
+    "no-continue": 0,
+    "no-param-reassign": 0,
+    "no-multi-assign": 0,
+    "radix": 0,
+    "no-alert": 0,
+    "no-return-await": 0,
+    "prefer-destructuring": 0,
+    "no-restricted-globals": [2, "event"],
+    "prefer-promise-reject-errors": 0,
+    "import/prefer-default-export": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "object-curly-newline": 0,
+    "default-case": 0,
+    "react/jsx-no-bind": [2, { "ignoreRefs": true }],
+    "react/jsx-no-duplicate-props": 2,
+    "react/self-closing-comp": 2,
+    "react/prefer-es6-class": 2,
+    "react/no-string-refs": 2,
+    "react/require-render-return": 2,
+    "react/no-find-dom-node": 2,
+    "react/no-is-mounted": 2,
+    "react/jsx-no-comment-textnodes": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "no-restricted-syntax": [0, "ForOfStatement"],
+    "prettier/prettier": "error"
+  },
+  "plugins": ["react", "prettier"]
+}

.eslintrc.json

@@ -1,88 +1,12 @@
 {
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "airbnb-typescript/base",
-    "plugin:wc/recommended",
-    "plugin:lit/recommended",
-    "prettier",
-    "prettier/@typescript-eslint"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "modules": true
-    },
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "./webpack.config.js"
-      }
-    }
-  },
-  "globals": {
-    "__DEV__": false,
-    "__DEMO__": false,
-    "__BUILD__": false,
-    "__VERSION__": false,
-    "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
-  },
+  "extends": "./.eslintrc-hound.json",
+  "plugins": ["react"],
   "env": {
-    "browser": true,
-    "es6": true
+    "browser": true
   },
   "rules": {
-    "class-methods-use-this": 0,
-    "new-cap": 0,
-    "prefer-template": 0,
-    "object-shorthand": 0,
-    "func-names": 0,
-    "prefer-arrow-callback": 0,
-    "no-underscore-dangle": 0,
-    "no-var": 0,
-    "strict": 0,
-    "prefer-spread": 0,
-    "no-plusplus": 0,
-    "no-bitwise": 0,
-    "comma-dangle": 0,
-    "vars-on-top": 0,
-    "no-continue": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "radix": 0,
-    "no-alert": 0,
-    "no-return-await": 0,
-    "no-nested-ternary": 0,
-    "prefer-destructuring": 0,
-    "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": 0,
-    "import/order": 0,
-    "import/prefer-default-export": 0,
-    "import/no-unresolved": 0,
-    "import/no-cycle": 0,
-    "import/extensions": [
-      2,
-      "ignorePackages",
-      { "ts": "ignorePackages", "js": "ignorePackages" }
-    ],
-    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "object-curly-newline": 0,
-    "default-case": 0,
-    "wc/no-self-class": 0,
-    "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
-    "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0
-  },
-  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
-  "processor": "disable/disable"
+    "import/no-unresolved": 2,
+    "linebreak-style": 0,
+    "implicit-arrow-linebreak": 0
+  }
 }

.gitattributes

@@ -11,4 +11,3 @@
 *.mp3 binary
 
 demo/public/api/camera_proxy_stream/* binary
-demo/public/api/media_player_proxy/* binary

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -1,100 +0,0 @@
----
-name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
-labels: bug
----
-
-<!-- READ THIS FIRST:
-- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
-- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
-- Do not report issues for custom Lovelace cards.
-- Provide as many details as possible. Paste logs, configuration samples and code into the backticks.
-DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed without comment.
--->
-
-## Checklist
-
-- [ ] I have updated to the latest available Home Assistant version.
-- [ ] I have cleared the cache of my browser.
-- [ ] I have tried a different browser to see if it is related to my browser.
-
-## The problem
-
-<!--
-  Describe the issue you are experiencing here to communicate to the
-  maintainers. Tell us about the current behavior.
-  If possible provide a screenshot with a description.
--->
-
-## Expected behavior
-
-<!--
-  Describe what you expected to happen or it should look/behave.
-  If possible provide a screenshot with a description.
--->
-
-## Steps to reproduce
-
-<!--
-  Provide steps for us, that helps reproducing your issue.
-  For example:
-    1. Add a climate integration
-    2. Navigate to Lovelace
-    3. Click more info of the climate entity
-    4. Set the HVAC action to heat
-    5. Set the temperature higher than the current temperature
-    6. Set the HVAC action to cool
--->
-
-## Environment
-
-<!--
-  Provide details about the versions you are using, which helps us reproducing
-  and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Developer tools -> Info.
-
-  Browser version and operating system is important! Please try to replicate
-  your issue in a different browser and be sure to include your findings.
--->
-
-- Home Assistant release with the issue:
-- Last working Home Assistant release (if known):
-- 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
-
-<!--
-  An example configuration that caused the problem for you. Fill this out even
-  if it seems unimportant to you. Please be sure to remove personal information
-  like passwords, private URLs and other credentials.
--->
-
-```yaml
-
-```
-
-## Javascript errors shown in your browser console/inspector
-
-<!--
-  If you come across any javascript or other error logs, e.g., in your browser
-  console/inspector please provide them.
--->
-
-```txt
-
-```
-
-## Additional information

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,26 +0,0 @@
----
-name: Request a feature for the UI, Frontend or Lovelace
-about: Request an new feature for the Home Assistant frontend.
-labels: feature request
----
-
-<!--
-  DO NOT DELETE ANY TEXT from this template!
-  Otherwise, your request may be closed without comment.
--->
-
-## The request
-
-<!--
-  Describe to our maintainers, the feature you would like to be added.
-  Please be clear and concise and, if possible, provide a screenshot or mockup.
--->
-
-## The alternatives
-
-<!--
-  Are you currently using, or have you considered alternatives?
-  If so, could you please describe those?
--->
-
-## Additional information

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,78 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
+<!-- READ THIS FIRST:
+- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
+- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
+- Provide as many details as possible. Do not delete any text from this template!
+-->
+
+**Checklist:**
+
+- [ ] I updated to the latest version available
+- [ ] I cleared the cache of my browser
+
+**Home Assistant release with the issue:**
+
+<!--
+- Frontend -> Developer tools -> Info
+- Or use this command: hass --version
+-->
+
+**Last working Home Assistant release (if known):**
+
+**UI (States or Lovelace UI?):**
+
+<!--
+- Frontend -> Developer tools -> Info
+-->
+
+**Browser and Operating System:**
+
+<!--
+Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
+-->
+
+**Description of problem:**
+
+<!--
+Explain what the issue is, and what is the current behaviour. If possible provide a screenshot with a description.
+-->
+
+**Expected behaviour:**
+
+<!--
+Explain how things should look/behave. If possible provide a screenshot with a description.
+-->
+
+**Relevant config:**
+
+<!--
+Give the config of both the integration that is used, the Lovelace config, scene, automation or otherwise relevant configuration.
+-->
+
+**Steps to reproduce this problem:**
+
+<!--
+Sum up all steps that are necessary to reproduce this bug.
+For example:
+1. Add a climate integration
+2. Navigate to Lovelace
+3. Click more info of the climate entity
+4. Set the hvac action to heat
+5. Set the temperature higher than the current temperature
+6. Set the hvac action to cool
+-->
+
+**Javascript errors shown in the web inspector (if applicable):**
+
+```
+
+```
+
+**Additional information:**

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
-    url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
-  - name: Report incorrect or missing information on our website
-    url: https://github.com/home-assistant/home-assistant.io/issues
-    about: Our documentation has its own issue tracker. Please report issues with the website there.
-  - name: I have a question or need support
-    url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs, check our website for resources on getting help.
-  - name: I'm unsure where to go
-    url: https://www.home-assistant.io/join-chat
-    about: If you are unsure where to go, then joining our chat is recommended; Just ask!

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: feature request
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,83 +0,0 @@
-<!--
-  You are amazing! Thanks for contributing to our project!
-  Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
--->
-
-## Breaking change
-
-<!--
-  If your PR contains a breaking change for existing users, it is important
-  to tell them what breaks, how to make it work again and why we did this.
-  This piece of text is published with the release notes, so it helps if you
-  write it towards our users, not us.
-  Note: Remove this section if this PR is NOT a breaking change.
--->
-
-## Proposed change
-
-<!--
-  Describe the big picture of your changes here to communicate to the
-  maintainers why we should accept this pull request. If it fixes a bug
-  or resolves a feature request, be sure to link to that issue in the
-  additional information section.
--->
-
-## Type of change
-
-<!--
-  What type of change does your PR introduce to the Home Assistant frontend?
-  NOTE: Please, check only 1! box!
-  If your PR requires multiple boxes to be checked, you'll most likely need to
-  split it into multiple PRs. This makes things easier and faster to code review.
--->
-
-- [ ] Dependency upgrade
-- [ ] Bugfix (non-breaking change which fixes an issue)
-- [ ] New feature (thank you!)
-- [ ] Breaking change (fix/feature causing existing functionality to break)
-- [ ] Code quality improvements to existing code or addition of tests
-
-## Example configuration
-
-<!--
-  Supplying a configuration snippet, makes it easier for a maintainer to test
-  your PR.
--->
-
-```yaml
-
-```
-
-## Additional information
-
-<!--
-  Details are important, and help maintainers processing your PR.
-  Please be sure to fill out additional details, if applicable.
--->
-
-- This PR fixes or closes issue: fixes #
-- This PR is related to issue:
-- Link to documentation pull request:
-
-## Checklist
-
-<!--
-  Put an `x` in the boxes that apply. You can also fill these out after
-  creating the PR. If you're unsure about any of them, don't hesitate to ask.
-  We're here to help! This is simply a reminder of what we are going to look
-  for before merging your code.
--->
-
-- [ ] The code change is tested and works locally.
-- [ ] There is no commented out code in this PR.
-- [ ] Tests have been added to verify that the new code works.
-
-If user exposed functionality or configuration variables are added/changed:
-
-- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
-
-<!--
-  Thank you for contributing <3
--->
-
-[docs-repository]: https://github.com/home-assistant/home-assistant.io

.github/lock.yml

@@ -24,4 +24,4 @@ only: pulls
 
 # Optionally, specify configuration settings just for `issues` or `pulls`
 issues:
-  daysUntilLock: 30
+   daysUntilLock: 30

.github/stale.yml

@@ -1,56 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-
-# Number of days of inactivity before an Issue or Pull Request becomes stale
-daysUntilStale: 90
-
-# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
-# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
-daysUntilClose: 7
-
-# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
-onlyLabels: []
-
-# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
-exemptLabels:
-  - feature request
-  - Help wanted
-  - to do
-
-# Set to true to ignore issues in a project (defaults to false)
-exemptProjects: true
-
-# Set to true to ignore issues in a milestone (defaults to false)
-exemptMilestones: true
-
-# Set to true to ignore issues with an assignee (defaults to false)
-exemptAssignees: false
-
-# Label to use when marking as stale
-staleLabel: stale
-
-# Comment to post when marking as stale. Set to `false` to disable
-markComment: >
-  There hasn't been any activity on this issue recently. Due to the high number
-  of incoming GitHub notifications, we have to clean some of the old issues,
-  as many of them have already been resolved with the latest updates.
-
-  Please make sure to update to the latest Home Assistant version and check
-  if that solves the issue. Let us know if that works for you by adding a
-  comment 👍
-
-  This issue now has been marked as stale and will be closed if no further
-  activity occurs. Thank you for your contributions.
-
-# Comment to post when removing the stale label.
-# unmarkComment: >
-#   Your comment here.
-
-# Comment to post when closing a stale Issue or Pull Request.
-# closeComment: >
-#   Your comment here.
-
-# Limit the number of actions per hour, from 1-30. Default is 30
-limitPerRun: 30
-
-# Limit to only `issues` or `pulls`
-only: issues

.github/workflows/ci.yaml

@@ -1,125 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - dev
-      - master
-  pull_request:
-    branches:
-      - dev
-      - master
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-json
-      - name: Build translations
-        run: ./node_modules/.bin/gulp build-translations
-      - name: Run eslint
-        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
-      - name: Run tsc
-        run: ./node_modules/.bin/tsc
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Run Mocha
-        run: npm run mocha
-  build:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-app
-        env:
-          IS_TEST: "true"
-  supervisor:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-hassio
-        env:
-          IS_TEST: "true"

.github/workflows/demo.yaml

@@ -1,39 +0,0 @@
-name: Demo
-
-on:
-  push:
-    branches:
-      - dev
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-      - name: Deploy to Netlify
-        uses: netlify/actions/cli@master
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
-        with:
-          args: deploy --dir=demo/dist --prod

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log
 .DS_Store
 hass_frontend/*
 .reify-cache
+demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]
@@ -30,6 +31,3 @@ src/cast/dev_const.ts
 # Secrets
 .lokalise_token
 yarn-error.log
-
-#asdf
-.tool-versions

.prettierignore

@@ -1,10 +0,0 @@
-build
-build-translations/*
-translations/*
-node_modules/*
-hass_frontend/*
-pip-selfcheck.json
-
-# vscode
-.vscode/*
-!.vscode/extensions.json

.travis.yml

@@ -0,0 +1,18 @@
+sudo: false
+language: node_js
+cache:
+  yarn: true
+  directories:
+    - bower_components
+install: yarn install
+script:
+  - npm run build
+  - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
+  - npm run test
+  # - xvfb-run wct --module-resolution=node --npm
+  # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
+dist: trusty
+addons:
+  sauce_connect: true

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
     "runem.lit-plugin"

README.md

@@ -1,4 +1,4 @@
-# Home Assistant Frontend
+# Home Assistant Polymer [![Build Status](https://travis-ci.org/home-assistant/home-assistant-polymer.svg?branch=master)](https://travis-ci.org/home-assistant/home-assistant-polymer)
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
@@ -19,15 +19,12 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 ## Frontend development
 
 ### Classic environment
-
 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.
+* `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
 

azure-pipelines-netlify.yml

@@ -1,30 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger: none
-pr: none
-schedules:
-  - cron: "0 0 * * *"
-    displayName: "build preview"
-    branches:
-      include:
-      - dev
-    always: true
-variables:
-  - group: netlify
-
-jobs:
-
-- job: 'Netlify_preview'
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - script: |
-      # Cast
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_CAST}
-
-      # Demo
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_DEMO}
-
-      # Gallery
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_GALLERY}
-    displayName: 'Trigger netlify build preview'

azure-pipelines-release.yml

@@ -8,7 +8,7 @@ trigger:
 pr: none
 variables:
   - name: versionWheels
-    value: '1.10.1-3.7-alpine3.11'
+    value: '1.3-3.7-alpine3.10'
   - name: versionNode
     value: '12.1'
   - group: twine
@@ -47,13 +47,18 @@ stages:
 
               script/release
             displayName: "Build and release package"
-  - stage: "Wheels"
-    jobs:
       - template: templates/azp-job-wheels.yaml@azure
         parameters:
           builderVersion: '$(versionWheels)'
-          wheelsRequirement: 'requirement.txt'
+          builderApk: 'build-base'
+          wheelsLocal: true
           preBuild:
+          - task: NodeTool@0
+            displayName: "Use Node $(versionNode)"
+            inputs:
+              versionSpec: "$(versionNode)"
           - script: |
-              sleep 240
-              echo "home-assistant-frontend==$(Build.SourceBranchName)" > requirement.txt
+              set -e
+
+              yarn install
+              script/build_frontend

azure-pipelines-translation.yml

@@ -11,7 +11,7 @@ trigger:
 pr: none
 schedules:
   - cron: "30 0 * * *"
-    displayName: "frontend translation update"
+    displayName: "translation update"
     branches:
       include:
       - dev

build-scripts/babel.js

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

build-scripts/env.js

@@ -1,27 +1,6 @@
-const fs = require("fs");
-const path = require("path");
-const paths = require("./paths.js");
-
 module.exports = {
-  isProdBuild() {
-    return process.env.NODE_ENV === "production";
-  },
-  isStatsBuild() {
-    return process.env.STATS === "1";
-  },
-  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];
-  },
+  isProdBuild: process.env.NODE_ENV === "production",
+  isStatsBuild: process.env.STATS === "1",
+  isTravis: process.env.TRAVIS === "true",
+  isNetlify: process.env.NETLIFY === "true",
 };

build-scripts/gulp/app.js

@@ -5,7 +5,7 @@ const envVars = require("../env");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons-json.js");
+require("./gen-icons.js");
 require("./gather-static.js");
 require("./compress.js");
 require("./webpack.js");
@@ -21,10 +21,10 @@ gulp.task(
     "clean",
     gulp.parallel(
       "gen-service-worker-dev",
-      "gen-icons-json",
+      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations"
+      gulp.series("create-test-translation", "build-translations")
     ),
     "copy-static",
     "webpack-watch-app"
@@ -38,11 +38,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static",
     "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-app"]),
+    (envVars.isTravis ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -2,6 +2,7 @@ const gulp = require("gulp");
 
 require("./clean.js");
 require("./translations.js");
+require("./gen-icons.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@@ -14,8 +15,12 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-cast",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-index-cast-dev",
+      "build-translations"
+    ),
     "copy-static-cast",
     "webpack-dev-server-cast"
   )
@@ -28,8 +33,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-cast",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static-cast",
     "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/demo.js

@@ -3,7 +3,7 @@ const gulp = require("gulp");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons-json.js");
+require("./gen-icons.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@@ -16,8 +16,13 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-demo",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-icons-demo",
+      "gen-index-demo-dev",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-dev-server-demo"
   )
@@ -30,9 +35,12 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-demo",
-    // Cast needs to be backwards compatible and older HA has no translations
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-icons-demo",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/download_translations.js

@@ -2,7 +2,7 @@ const del = require("del");
 const gulp = require("gulp");
 const mapStream = require("map-stream");
 
-const inDir = "translations/frontend";
+const inDir = "translations";
 const downloadDir = inDir + "/downloads";
 
 const tasks = [];
@@ -12,7 +12,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 +25,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,19 +42,19 @@ 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 = "move-downloaded-translations";
-gulp.task(taskName, function () {
+gulp.task(taskName, function() {
   return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDir));
 });
 tasks.push(taskName);

build-scripts/gulp/entry-html.js

@@ -47,9 +47,11 @@ 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);
@@ -64,9 +66,11 @@ gulp.task("gen-pages-prod", (done) => {
   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(
@@ -84,11 +88,13 @@ 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);
@@ -102,11 +108,13 @@ gulp.task("gen-index-app-prod", (done) => {
     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 }}");
 
@@ -214,7 +222,7 @@ gulp.task("gen-index-gallery-dev", (done) => {
   // In dev mode we don't mangle names, so we hardcode urls. That way we can
   // run webpack as last in watch mode, which blocks output.
   const content = renderGalleryTemplate("index", {
-    latestGalleryJS: "./frontend_latest/entrypoint.js",
+    latestGalleryJS: "./entrypoint.js",
   });
 
   fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);

build-scripts/gulp/gallery.js

@@ -3,7 +3,7 @@ const gulp = require("gulp");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons-json.js");
+require("./gen-icons.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@@ -16,8 +16,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-gallery",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     "webpack-dev-server-gallery"
@@ -31,8 +30,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-gallery",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static-gallery",
     "webpack-prod-gallery",
     "gen-index-gallery-prod"

build-scripts/gulp/gather-static.js

@@ -26,13 +26,6 @@ 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);
 
@@ -72,23 +65,21 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
-  const staticDir = paths.static;
-  copyTranslations(staticDir);
-  done();
-});
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
+  const staticPath = genStaticPath(paths.static);
   // Basic static files
   fs.copySync(polyPath("public"), paths.root);
 
   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();
 });
@@ -106,7 +97,6 @@ gulp.task("copy-static-demo", (done) => {
   copyMapPanel(paths.demo_static);
   copyFonts(paths.demo_static);
   copyTranslations(paths.demo_static);
-  copyMdiIcons(paths.demo_static);
   done();
 });
 
@@ -119,7 +109,6 @@ gulp.task("copy-static-cast", (done) => {
   copyMapPanel(paths.cast_static);
   copyFonts(paths.cast_static);
   copyTranslations(paths.cast_static);
-  copyMdiIcons(paths.cast_static);
   done();
 });
 
@@ -132,6 +121,5 @@ gulp.task("copy-static-gallery", (done) => {
   copyMapPanel(paths.gallery_static);
   copyFonts(paths.gallery_static);
   copyTranslations(paths.gallery_static);
-  copyMdiIcons(paths.gallery_static);
   done();
 });

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

@@ -1,112 +0,0 @@
-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

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

@@ -3,7 +3,7 @@ const gulp = require("gulp");
 const envVars = require("../env");
 
 require("./clean.js");
-require("./gen-icons-json.js");
+require("./gen-icons.js");
 require("./webpack.js");
 require("./compress.js");
 
@@ -14,7 +14,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-icons-json",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
     "webpack-watch-hassio"
   )
 );
@@ -26,9 +26,9 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-icons-json",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
     "webpack-prod-hassio",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-hassio"])
+    (envVars.isTravis ? [] : ["compress-hassio"])
   )
 );

build-scripts/gulp/translations.js

@@ -1,33 +1,22 @@
-const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
-const source = require("vinyl-source-stream");
-const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const hashFilename = require("gulp-hash-filename");
 const merge = require("gulp-merge-json");
 const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
-const { mapFiles } = require("../util");
-const env = require("../env");
-const paths = require("../paths");
 
-const inFrontendDir = "translations/frontend";
-const inBackendDir = "translations/backend";
+const inDir = "translations";
 const workDir = "build-translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
-let mergeBackend = false;
 
-gulp.task("translations-enable-merge-backend", (done) => {
-  mergeBackend = true;
-  done();
-});
-
-String.prototype.rsplit = function (sep, maxsplit) {
+String.prototype.rsplit = function(sep, maxsplit) {
   var split = this.split(sep);
   return maxsplit
     ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
@@ -50,9 +39,11 @@ const TRANSLATION_FRAGMENTS = [
   "developer-tools",
 ];
 
+const tasks = [];
+
 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,
@@ -114,12 +105,7 @@ 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) => {
-          if (!tr) {
-            throw Error(`Invalid key placeholder ${key} in ${file.path}`);
-          }
-          return tr[k];
-        }, original);
+        const replace = key.split("::").reduce((tr, k) => tr[k], original);
         if (typeof replace !== "string") {
           throw Error(`Invalid key placeholder ${key} in ${file.path}`);
         }
@@ -130,9 +116,11 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function () {
-  return del([workDir]);
+let taskName = "clean-translations";
+gulp.task(taskName, function() {
+  return del([`${outDir}/**/*.json`]);
 });
+tasks.push(taskName);
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -141,25 +129,31 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function (cb) {
-  fs.writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
-});
-
+taskName = "create-test-metadata";
 gulp.task(
-  "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
+  taskName,
+  gulp.series("ensure-translations-build-dir", function writeTestMetaData(cb) {
+    fs.writeFile(
+      workDir + "/testMetadata.json",
+      JSON.stringify({
+        test: {
+          nativeName: "Test",
+        },
+      }),
+      cb
+    );
+  })
+);
+tasks.push(taskName);
+
+taskName = "create-test-translation";
+gulp.task(
+  taskName,
+  gulp.series("create-test-metadata", function() {
     return gulp
-      .src(path.join(paths.translations_src, "en.json"))
+      .src("src/translations/en.json")
       .pipe(
-        transform(function (data, file) {
+        transform(function(data, file) {
           return recursiveEmpty(data);
         })
       )
@@ -167,6 +161,7 @@ gulp.task(
       .pipe(gulp.dest(workDir));
   })
 );
+tasks.push(taskName);
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -177,231 +172,235 @@ 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 () {
-  const src = [path.join(paths.translations_src, "en.json")];
+taskName = "build-master-translation";
+gulp.task(
+  taskName,
+  gulp.series("clean-translations", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .pipe(rename("translationMaster.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
 
-  if (mergeBackend) {
-    src.push(path.join(inBackendDir, "en.json"));
-  }
-
-  return gulp
-    .src(src)
-    .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      merge({
-        fileName: "translationMaster.json",
-      })
-    )
-    .pipe(gulp.dest(workDir));
-});
-
-gulp.task("build-merged-translations", function () {
-  return gulp
-    .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
-      allowEmpty: true,
-    })
-    .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      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
-        //
-        // TODO: This is a naive interpretation of BCP47 that should be improved.
-        //       Will be OK for now as long as we don't have anything more complicated
-        //       than a base translation + region.
-        const tr = path.basename(file.history[0], ".json");
-        const subtags = tr.split("-");
-        const src = [workDir + "/translationMaster.json"];
-        for (let i = 1; i <= subtags.length; i++) {
-          const lang = subtags.slice(0, i).join("-");
-          if (lang === "test") {
-            src.push(workDir + "/test.json");
-          } else if (lang !== "en") {
-            src.push(inFrontendDir + "/" + lang + ".json");
-            if (mergeBackend) {
-              src.push(inBackendDir + "/" + lang + ".json");
+taskName = "build-merged-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-master-translation", function() {
+    return gulp
+      .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .pipe(
+        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
+          //
+          // TODO: This is a naive interpretation of BCP47 that should be improved.
+          //       Will be OK for now as long as we don't have anything more complicated
+          //       than a base translation + region.
+          const tr = path.basename(file.history[0], ".json");
+          const subtags = tr.split("-");
+          const src = [workDir + "/translationMaster.json"];
+          for (let i = 1; i <= subtags.length; i++) {
+            const lang = subtags.slice(0, i).join("-");
+            if (lang === "test") {
+              src.push(workDir + "/test.json");
+            } else if (lang !== "en") {
+              src.push(inDir + "/" + lang + ".json");
             }
           }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    );
-});
-
-var taskName;
+          return gulp
+            .src(src, { allowEmpty: true })
+            .pipe(transform((data) => emptyFilter(data)))
+            .pipe(
+              merge({
+                fileName: tr + ".json",
+              })
+            )
+            .pipe(gulp.dest(fullDir));
+        })
+      );
+  })
+);
+tasks.push(taskName);
 
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function () {
-    // Return only the translations for this fragment.
-    return gulp
-      .src(fullDir + "/*.json")
-      .pipe(
-        transform((data) => ({
-          ui: {
-            panel: {
-              [fragment]: data.ui.panel[fragment],
+  gulp.task(
+    taskName,
+    gulp.series("build-merged-translations", function() {
+      // Return only the translations for this fragment.
+      return gulp
+        .src(fullDir + "/*.json")
+        .pipe(
+          transform((data) => ({
+            ui: {
+              panel: {
+                [fragment]: data.ui.panel[fragment],
+              },
             },
-          },
-        }))
-      )
-      .pipe(gulp.dest(workDir + "/" + fragment));
-  });
+          }))
+        )
+        .pipe(gulp.dest(workDir + "/" + fragment));
+    })
+  );
+  tasks.push(taskName);
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function () {
-  // Remove the fragment translations from the core translation.
-  return gulp
-    .src(fullDir + "/*.json")
-    .pipe(
-      transform((data, file) => {
-        TRANSLATION_FRAGMENTS.forEach((fragment) => {
-          delete data.ui.panel[fragment];
-        });
-        return data;
-      })
-    )
-    .pipe(gulp.dest(coreDir));
-});
-
+gulp.task(
+  taskName,
+  gulp.series("build-merged-translations", function() {
+    // Remove the fragment translations from the core translation.
+    return gulp
+      .src(fullDir + "/*.json")
+      .pipe(
+        transform((data) => {
+          TRANSLATION_FRAGMENTS.forEach((fragment) => {
+            delete data.ui.panel[fragment];
+          });
+          return data;
+        })
+      )
+      .pipe(gulp.dest(coreDir));
+  })
+);
+tasks.push(taskName);
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function () {
-  // Flatten the split versions of our translations, and move them into outDir
-  return gulp
-    .src(
-      TRANSLATION_FRAGMENTS.map(
-        (fragment) => workDir + "/" + fragment + "/*.json"
-      ).concat(coreDir + "/*.json"),
-      { base: workDir }
-    )
-    .pipe(
-      transform(function (data) {
-        // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
-    )
-    .pipe(minify())
-    .pipe(
-      rename((filePath) => {
-        if (filePath.dirname === "core") {
-          filePath.dirname = "";
-        }
-      })
-    )
-    .pipe(gulp.dest(outDir));
-});
-
-const fingerprints = {};
-
+taskName = "build-flattened-translations";
 gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
-
-    for (let i = 0; i < files.length; i++) {
-      fingerprints[files[i].split(".")[0]] = {
-        // In dev we create fake hashes
-        hash: env.isProdBuild()
-          ? crypto
-              .createHash("md5")
-              .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
-              .digest("hex")
-          : "dev",
-      };
-    }
-
-    mapFiles(outDir, ".json", (filename) => {
-      const parsed = path.parse(filename);
-
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
-      }
-
-      fs.renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
-  }
+  taskName,
+  gulp.series(...splitTasks, function() {
+    // Flatten the split versions of our translations, and move them into outDir
+    return gulp
+      .src(
+        TRANSLATION_FRAGMENTS.map(
+          (fragment) => workDir + "/" + fragment + "/*.json"
+        ).concat(coreDir + "/*.json"),
+        { base: workDir }
+      )
+      .pipe(
+        transform(function(data) {
+          // Polymer.AppLocalizeBehavior requires flattened json
+          return flatten(data);
+        })
+      )
+      .pipe(minify())
+      .pipe(hashFilename())
+      .pipe(
+        rename((filePath) => {
+          if (filePath.dirname === "core") {
+            filePath.dirname = "";
+          }
+        })
+      )
+      .pipe(gulp.dest(outDir));
+  })
 );
+tasks.push(taskName);
 
+taskName = "build-translation-fingerprints";
 gulp.task(
-  "build-translations",
-  gulp.series(
-    "clean-translations",
-    "ensure-translations-build-dir",
-    env.isProdBuild() ? (done) => done() : "create-test-translation",
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations",
-    "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .pipe(
-          transform(function (data) {
-            const newData = {};
-            Object.entries(data).forEach(([key, value]) => {
-              // Filter out translations without native name.
-              if (data[key].nativeName) {
-                newData[key] = data[key];
-              } else {
-                console.warn(
-                  `Skipping language ${key}. Native name was not translated.`
-                );
-              }
-              if (data[key]) newData[key] = value;
-            });
-            return newData;
-          })
-        )
-        .pipe(
-          transform((data) => ({
-            fragments: TRANSLATION_FRAGMENTS,
-            translations: data,
-          }))
-        )
-        .pipe(rename("translationMetadata.json"))
-        .pipe(gulp.dest(workDir));
-    }
-  )
+  taskName,
+  gulp.series("build-flattened-translations", function() {
+    return gulp
+      .src(outDir + "/**/*.json")
+      .pipe(
+        rename({
+          extname: "",
+        })
+      )
+      .pipe(
+        hash({
+          algorithm: "md5",
+          hashLength: 32,
+          template: "<%= name %>.json",
+        })
+      )
+      .pipe(hash.manifest("translationFingerprints.json"))
+      .pipe(
+        transform(function(data) {
+          // After generating fingerprints of our translation files, consolidate
+          // all translation fragment fingerprints under the translation name key
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            const [path, _md5] = key.rsplit("-", 1);
+            // let translation = key;
+            let translation = path;
+            const parts = translation.split("/");
+            if (parts.length === 2) {
+              translation = parts[1];
+            }
+            if (!(translation in newData)) {
+              newData[translation] = {
+                fingerprints: {},
+              };
+            }
+            newData[translation].fingerprints[path] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(gulp.dest(workDir));
+  })
 );
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-translation-fingerprints", function() {
+    return gulp
+      .src(
+        [
+          "src/translations/translationMetadata.json",
+          workDir + "/testMetadata.json",
+          workDir + "/translationFingerprints.json",
+        ],
+        { allowEmpty: true }
+      )
+      .pipe(merge({}))
+      .pipe(
+        transform(function(data) {
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            // Filter out translations without native name.
+            if (data[key].nativeName) {
+              newData[key] = data[key];
+            } else {
+              console.warn(
+                `Skipping language ${key}. Native name was not translated.`
+              );
+            }
+            if (data[key]) newData[key] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(
+        transform((data) => ({
+          fragments: TRANSLATION_FRAGMENTS,
+          translations: data,
+        }))
+      )
+      .pipe(rename("translationMetadata.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/webpack.js

@@ -3,7 +3,6 @@ const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
-const path = require("path");
 const paths = require("../paths");
 const {
   createAppConfig,
@@ -28,7 +27,7 @@ const runDevServer = ({
     open: true,
     watchContentBase: true,
     contentBase,
-  }).listen(port, listenHost, function (err) {
+  }).listen(port, listenHost, function(err) {
     if (err) {
       throw err;
     }
@@ -58,14 +57,10 @@ const handler = (done) => (err, stats) => {
 
 gulp.task("webpack-watch-app", () => {
   // we are not calling done, so this command will run forever
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/ },
+  webpack(bothBuilds(createAppConfig, { isProdBuild: false })).watch(
+    {},
     handler()
   );
-  gulp.watch(
-    path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
-  );
 });
 
 gulp.task(
@@ -150,8 +145,9 @@ gulp.task(
 
 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 })),
+    compiler: webpack(
+      createGalleryConfig({ latestBuild: true, isProdBuild: false })
+    ),
     contentBase: paths.gallery_root,
     port: 8100,
   });

build-scripts/paths.js

@@ -29,6 +29,4 @@ module.exports = {
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_root: path.resolve(__dirname, "../hassio/build"),
   hassio_publicPath: "/api/hassio/app/",
-
-  translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/util.js

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

build-scripts/webpack.js

@@ -1,12 +1,20 @@
 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 paths = require("./paths.js");
-const env = require("./env.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 createWebpackConfig = ({
   entry,
   outputRoot,
@@ -14,11 +22,7 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
-  dontHash,
 }) => {
-  if (!dontHash) {
-    dontHash = new Set();
-  }
   return {
     mode: isProdBuild ? "production" : "development",
     devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
@@ -30,11 +34,17 @@ const createWebpackConfig = ({
           test: /\.css$/,
           use: "raw-loader",
         },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              exportAsEs6Default: true,
+            },
+          },
+        },
       ],
     },
-    externals: {
-      esprima: "esprima",
-    },
     optimization: {
       minimizer: [
         new TerserPlugin({
@@ -54,9 +64,8 @@ const createWebpackConfig = ({
       new webpack.DefinePlugin({
         __DEV__: !isProdBuild,
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(env.version()),
+        __VERSION__: JSON.stringify(version),
         __DEMO__: false,
-        __BACKWARDS_COMPAT__: false,
         __STATIC_PATH__: "/static/",
         "process.env.NODE_ENV": JSON.stringify(
           isProdBuild ? "production" : "development"
@@ -83,9 +92,19 @@ const createWebpackConfig = ({
     ].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 }) => {
+        const dontHash = new Set();
+
         if (!isProdBuild || dontHash.has(chunk.name)) {
           return `${chunk.name}.js`;
         }
@@ -115,6 +134,7 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
       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,
@@ -126,17 +146,11 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     // 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) => {
+    const englishFP = translationMetadata.translations.en.fingerprints;
+    Object.keys(englishFP).forEach((key) => {
       workBoxTranslationsTemplatedURLs[
-        `/static/translations/${fragment}/${englishFilename}`
-      ] = `build-translations/output/${fragment}/${englishFilename}`;
+        `/static/translations/${englishFP[key]}`
+      ] = `build-translations/output/${key}.json`;
     });
 
     config.plugins.push(
@@ -176,7 +190,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     },
     outputRoot: paths.demo_root,
     defineOverlay: {
-      __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
+      __VERSION__: JSON.stringify(`DEMO-${version}`),
       __DEMO__: true,
     },
     isProdBuild,
@@ -199,9 +213,6 @@ const createCastConfig = ({ isProdBuild, latestBuild }) => {
     outputRoot: paths.cast_root,
     isProdBuild,
     latestBuild,
-    defineOverlay: {
-      __BACKWARDS_COMPAT__: true,
-    },
   });
 };
 
@@ -211,12 +222,11 @@ const createHassioConfig = ({ isProdBuild, latestBuild }) => {
   }
   const config = createWebpackConfig({
     entry: {
-      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.js"),
     },
     outputRoot: "",
     isProdBuild,
     latestBuild,
-    dontHash: new Set(["entrypoint"]),
   });
 
   config.output.path = paths.hassio_root;
@@ -226,6 +236,9 @@ const createHassioConfig = ({ isProdBuild, latestBuild }) => {
 };
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
+  if (!latestBuild) {
+    throw new Error("Gallery only supports latest build!");
+  }
   const config = createWebpackConfig({
     entry: {
       entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,5 @@
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
+import "../../../src/components/ha-iconset-svg";
+import "../../../src/resources/hass-icons";
 import "./layout/hc-connect";

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

@@ -1,53 +1,49 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { Auth, Connection } from "home-assistant-js-websocket";
 import {
-  css,
-  CSSResult,
   customElement,
-  html,
   LitElement,
   property,
   TemplateResult,
+  html,
+  CSSResult,
+  css,
 } from "lit-element";
-import { CastManager } from "../../../../src/cast/cast_manager";
-import {
-  castSendShowLovelaceView,
-  ensureConnectedCastSession,
-} from "../../../../src/cast/receiver_messages";
-import {
-  askWrite,
-  enableWrite,
-  saveTokens,
-} from "../../../../src/common/auth/token_storage";
-import { atLeastVersion } from "../../../../src/common/config/version";
-import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+import { Connection, Auth } from "home-assistant-js-websocket";
+import "@polymer/iron-icon";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-icon-item";
 import "../../../../src/components/ha-icon";
 import {
-  getLegacyLovelaceCollection,
-  getLovelaceCollection,
-  LovelaceConfig,
-} from "../../../../src/data/lovelace";
+  enableWrite,
+  askWrite,
+  saveTokens,
+} from "../../../../src/common/auth/token_storage";
+import {
+  ensureConnectedCastSession,
+  castSendShowLovelaceView,
+} from "../../../../src/cast/receiver_messages";
 import "../../../../src/layouts/loading-screen";
-import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import { CastManager } from "../../../../src/cast/cast_manager";
+import {
+  LovelaceConfig,
+  getLovelaceCollection,
+} from "../../../../src/data/lovelace";
 import "./hc-layout";
-import "@material/mwc-button/mwc-button";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
   @property() public auth!: Auth;
-
   @property() public connection!: Connection;
-
   @property() public castManager!: CastManager;
-
   @property() private askWrite = false;
-
   @property() private lovelaceConfig?: LovelaceConfig | null;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this.lovelaceConfig === undefined) {
-      return html` <loading-screen></loading-screen>> `;
+      return html`
+        <loading-screen></loading-screen>>
+      `;
     }
 
     const error =
@@ -77,12 +73,14 @@ class HcCast extends LitElement {
             `
           : ""}
         ${error
-          ? html` <div class="card-content">${error}</div> `
+          ? html`
+              <div class="card-content">${error}</div>
+            `
           : !this.castManager.status
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <iron-icon icon="hass:cast"></iron-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -120,7 +118,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <iron-icon icon="hass:cast-connected"></iron-icon>
                   Manage
                 </mwc-button>
               `
@@ -135,9 +133,7 @@ class HcCast extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
-    const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
-      ? getLovelaceCollection(this.connection)
-      : getLegacyLovelaceCollection(this.connection);
+    const llColl = getLovelaceCollection(this.connection);
     // We first do a single refresh because we need to check if there is LL
     // configuration.
     llColl.refresh().then(
@@ -242,7 +238,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-icon {
+      mwc-button iron-icon {
         margin-right: 8px;
         height: 18px;
       }

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

@@ -1,35 +1,35 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import {
-  Auth,
-  Connection,
-  createConnection,
-  ERR_CANNOT_CONNECT,
-  ERR_HASS_HOST_REQUIRED,
-  ERR_INVALID_AUTH,
-  ERR_INVALID_HTTPS_TO_HTTP,
-  getAuth,
-  getAuthOptions,
-} from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
   LitElement,
+  customElement,
   property,
   TemplateResult,
+  html,
+  CSSResult,
+  css,
 } from "lit-element";
-import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
-import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
+import {
+  getAuth,
+  createConnection,
+  Auth,
+  getAuthOptions,
+  ERR_HASS_HOST_REQUIRED,
+  ERR_INVALID_HTTPS_TO_HTTP,
+  Connection,
+  ERR_CANNOT_CONNECT,
+  ERR_INVALID_AUTH,
+} from "home-assistant-js-websocket";
+import "@polymer/iron-icon";
+import "@material/mwc-button";
+import "@polymer/paper-input/paper-input";
 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 { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import "./hc-layout";
+import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
+import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -61,22 +61,16 @@ const INTRO = html`
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
   @property() private loading = false;
-
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
   @property() private cannotConnect = false;
-
   @property() private error?: string | TemplateResult;
-
   @property() private auth?: Auth;
-
   @property() private connection?: Connection;
-
   @property() private castManager?: CastManager | null;
-
   private openDemo = false;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this.cannotConnect) {
       const tokens = loadTokens();
       return html`
@@ -98,7 +92,9 @@ export class HcConnect extends LitElement {
     }
 
     if (this.castManager === undefined || this.loading) {
-      return html` <loading-screen></loading-screen> `;
+      return html`
+        <loading-screen></loading-screen>
+      `;
     }
 
     if (this.castManager === null) {
@@ -131,16 +127,20 @@ export class HcConnect extends LitElement {
                 @keydown=${this._handleInputKeyDown}
               ></paper-input>
             </p>
-            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
+            ${this.error
+              ? html`
+                  <p class="error">${this.error}</p>
+                `
+              : ""}
           </div>
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-icon
+              <iron-icon
                 .icon=${this.castManager.castState === "CONNECTED"
                   ? "hass:cast-connected"
                   : "hass:cast"}
-              ></ha-icon>
+              ></iron-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -211,8 +211,7 @@ export class HcConnect extends LitElement {
     if (value === "") {
       this.error = "Please enter a Home Assistant URL.";
       return;
-    }
-    if (value.indexOf("://") === -1) {
+    } else if (value.indexOf("://") === -1) {
       this.error =
         "Please enter your full URL, including the protocol part (https://).";
       return;
@@ -316,7 +315,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-icon {
+      mwc-button iron-icon {
         margin-left: 8px;
       }
 

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

@@ -1,31 +1,28 @@
+import {
+  customElement,
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+} from "lit-element";
 import {
   Auth,
   Connection,
-  getUser,
   HassUser,
+  getUser,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
   @property() public subtitle?: string | undefined;
-
   @property() public auth?: Auth;
-
   @property() public connection?: Connection;
-
   @property() public user?: HassUser;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <ha-card>
         <div class="layout">
@@ -40,7 +37,11 @@ class HcLayout extends LitElement {
                         this.auth.data.hassUrl.indexOf("//") + 2
                       )}</a
                     >
-                    ${this.user ? html` – ${this.user.name} ` : ""}
+                    ${this.user
+                      ? html`
+                          – ${this.user.name}
+                        `
+                      : ""}
                   </div>
                 `
               : ""}
@@ -49,12 +50,13 @@ class HcLayout extends LitElement {
         </div>
       </ha-card>
       <div class="footer">
-        <a href="./faq.html">Frequently Asked Questions</a> – Found a bug?
-        <a
+        <a href="./faq.html">Frequently Asked Questions</a> – Found a bug? Let
+        @balloob know
+        <!-- <a
           href="https://github.com/home-assistant/home-assistant-polymer/issues"
           target="_blank"
           >Let us know!</a
-        >
+        > -->
       </div>
     `;
   }

cast/src/receiver/cast_context.ts

@@ -1,2 +1 @@
-/* eslint-disable no-undef */
 export const castContext = cast.framework.CastReceiverContext.getInstance();

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

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

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

@@ -1,6 +1,6 @@
 import {
-  LovelaceCardConfig,
   LovelaceConfig,
+  LovelaceCardConfig,
 } from "../../../../src/data/lovelace";
 import { castContext } from "../cast_context";
 

cast/src/receiver/entrypoint.ts

@@ -1,10 +1,9 @@
-/* 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 { castContext } from "./cast_context";
-import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
+import { HassMessage } from "../../../src/cast/receiver_messages";
+import { HcMain } from "./layout/hc-main";
+import { CAST_NS } from "../../../src/cast/const";
 
 const controller = new HcMain();
 document.body.append(controller);

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

@@ -1,23 +1,22 @@
-import { customElement, html, property, TemplateResult } from "lit-element";
-import { mockHistory } from "../../../../demo/src/stubs/history";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { HassElement } from "../../../../src/state/hass-element";
+import "./hc-lovelace";
+import { customElement, TemplateResult, html, property } from "lit-element";
 import {
   MockHomeAssistant,
   provideHass,
 } from "../../../../src/fake_data/provide_hass";
-import { HassElement } from "../../../../src/state/hass-element";
 import { HomeAssistant } from "../../../../src/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { castDemoEntities } from "../demo/cast-demo-entities";
 import { castDemoLovelace } from "../demo/cast-demo-lovelace";
-import "./hc-lovelace";
+import { mockHistory } from "../../../../demo/src/stubs/history";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {
   @property() public lovelacePath!: string;
-
   @property() private _lovelaceConfig?: LovelaceConfig;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (!this._lovelaceConfig) {
       return html``;
     }
@@ -29,7 +28,6 @@ class HcDemo extends HassElement {
       ></hc-lovelace>
     `;
   }
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._initialize();

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

@@ -1,21 +1,20 @@
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
   LitElement,
-  property,
   TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+  property,
 } from "lit-element";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
   @property() public hass?: HomeAssistant;
-
   @property() public error?: string;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     return html`
       <div class="container">
         <img
@@ -23,7 +22,11 @@ class HcLaunchScreen extends LitElement {
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}
-          ${this.error ? html` <p>Error: ${this.error}</p> ` : ""}
+          ${this.error
+            ? html`
+                <p>Error: ${this.error}</p>
+              `
+            : ""}
         </div>
       </div>
     `;

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

@@ -1,17 +1,17 @@
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
   LitElement,
-  property,
   TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+  property,
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
-import { Lovelace } from "../../../../src/panels/lovelace/types";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import { HomeAssistant } from "../../../../src/types";
+import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "./hc-launch-screen";
 
 @customElement("hc-lovelace")
@@ -22,7 +22,7 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     const index = this._viewIndex;
     if (index === undefined) {
       return html`
@@ -46,7 +46,6 @@ class HcLovelace extends LitElement {
       ? html`
           <hui-panel-view
             .hass=${this.hass}
-            .lovelace=${lovelace}
             .config=${this.lovelaceConfig.views[index]}
           ></hui-panel-view>
         `

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

@@ -1,33 +1,27 @@
 import {
-  createConnection,
   getAuth,
+  createConnection,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { customElement, html, property, TemplateResult } from "lit-element";
-import { CAST_NS } from "../../../../src/cast/const";
-import {
-  ConnectMessage,
-  GetStatusMessage,
-  HassMessage,
-  ShowDemoMessage,
-  ShowLovelaceViewMessage,
-} from "../../../../src/cast/receiver_messages";
-import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
-import { atLeastVersion } from "../../../../src/common/config/version";
-import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
-import {
-  fetchResources,
-  getLegacyLovelaceCollection,
-  getLovelaceCollection,
-  LegacyLovelaceConfig,
-  LovelaceConfig,
-} from "../../../../src/data/lovelace";
-import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
+import { customElement, TemplateResult, html, property } from "lit-element";
 import { HassElement } from "../../../../src/state/hass-element";
-import { castContext } from "../cast_context";
+import {
+  HassMessage,
+  ConnectMessage,
+  ShowLovelaceViewMessage,
+  GetStatusMessage,
+  ShowDemoMessage,
+} from "../../../../src/cast/receiver_messages";
+import {
+  LovelaceConfig,
+  getLovelaceCollection,
+} from "../../../../src/data/lovelace";
 import "./hc-launch-screen";
-
-let resourcesLoaded = false;
+import { castContext } from "../cast_context";
+import { CAST_NS } from "../../../../src/cast/const";
+import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
+import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
+import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
@@ -41,8 +35,6 @@ export class HcMain extends HassElement {
 
   private _unsubLovelace?: UnsubscribeFunc;
 
-  private _urlPath?: string | null;
-
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
       this._handleConnectMessage(msg);
@@ -53,14 +45,16 @@ export class HcMain extends HassElement {
     } else if (msg.type === "show_demo") {
       this._handleShowDemo(msg);
     } else {
-      // eslint-disable-next-line no-console
+      // tslint:disable-next-line: no-console
       console.warn("unknown msg type", msg);
     }
   }
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | void {
     if (this._showDemo) {
-      return html` <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo> `;
+      return html`
+        <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo>
+      `;
     }
 
     if (
@@ -90,17 +84,15 @@ export class HcMain extends HassElement {
     super.firstUpdated(changedProps);
     import("../second-load");
     window.addEventListener("location-changed", () => {
-      const panelPath = `/${this._urlPath || "lovelace"}/`;
-      if (location.pathname.startsWith(panelPath)) {
-        this._lovelacePath = location.pathname.substr(panelPath.length);
+      if (location.pathname.startsWith("/lovelace/")) {
+        this._lovelacePath = location.pathname.substr(10);
         this._sendStatus();
       }
     });
     document.body.addEventListener("click", (ev) => {
-      const panelPath = `/${this._urlPath || "lovelace"}/`;
       const href = isNavigationClick(ev);
-      if (href && href.startsWith(panelPath)) {
-        this._lovelacePath = href.substr(panelPath.length);
+      if (href && href.startsWith("/lovelace/")) {
+        this._lovelacePath = href.substr(10);
         this._sendStatus();
       }
     });
@@ -116,7 +108,6 @@ export class HcMain extends HassElement {
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
       status.lovelacePath = this._lovelacePath!;
-      status.urlPath = this._urlPath;
     }
 
     if (senderId) {
@@ -172,17 +163,8 @@ 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) {
-      this._urlPath = msg.urlPath;
-      if (this._unsubLovelace) {
-        this._unsubLovelace();
-      }
-      const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+    if (!this._unsubLovelace) {
+      const llColl = getLovelaceCollection(this.hass!.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -201,15 +183,6 @@ export class HcMain extends HassElement {
         );
       }
     }
-    if (!resourcesLoaded) {
-      resourcesLoaded = true;
-      const resources = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? await fetchResources(this.hass!.connection)
-        : (this._lovelaceConfig as LegacyLovelaceConfig).resources;
-      if (resources) {
-        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
-      }
-    }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
     if (castContext.getDeviceCapabilities().touch_input_supported) {
@@ -221,6 +194,12 @@ export class HcMain extends HassElement {
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
     castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;
+    if (lovelaceConfig.resources) {
+      loadLovelaceResources(
+        lovelaceConfig.resources,
+        this.hass!.auth.data.hassUrl
+      );
+    }
   }
 
   private _handleShowDemo(_msg: ShowDemoMessage) {

cast/src/receiver/second-load.ts

@@ -1,3 +1,5 @@
 import "web-animations-js/web-animations-next-lite.min";
+import "../../../src/resources/hass-icons";
 import "../../../src/resources/roboto";
+import "../../../src/components/ha-iconset-svg";
 import "./layout/hc-lovelace";

cast/webpack.config.js

@@ -6,6 +6,6 @@ const { isProdBuild } = require("../build-scripts/env.js");
 const latestBuild = true;
 
 module.exports = createCastConfig({
-  isProdBuild: isProdBuild(),
+  isProdBuild,
   latestBuild,
 });