Remove entity_matches_only

Replace host-context with css properties - after session with Bram

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

@@ -0,0 +1,37 @@
+{
+  "name": "Home Assistant Frontend",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "appPort": "8124:8123",
+  "context": "..",
+  "postCreateCommand": "script/bootstrap",
+  "extensions": [
+    "github.vscode-pull-request-github",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin",
+    "ms-python.vscode-pylance"
+  ],
+  "containerEnv": {
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
+  },
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "files.eol": "\n",
+    "editor.tabSize": 2,
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "files.trimTrailingWhitespace": true
+  }
+}

.eslintrc.json

@@ -1,11 +1,11 @@
 {
   "extends": [
+    "airbnb-base",
     "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
-    "plugin:lit/recommended",
-    "prettier",
-    "prettier/@typescript-eslint"
+    "plugin:lit/all",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -29,60 +29,91 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "__SUPERVISOR__": false,
+    "Polymer": true
   },
   "env": {
     "browser": true,
     "es6": 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,
-    "strict": 0,
-    "prefer-spread": 0,
-    "no-plusplus": 0,
-    "no-bitwise": 2,
-    "comma-dangle": 0,
-    "vars-on-top": 0,
-    "no-continue": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "no-console": 2,
-    "radix": 0,
-    "no-alert": 0,
-    "no-return-await": 0,
-    "no-nested-ternary": 0,
-    "prefer-destructuring": 0,
+    "class-methods-use-this": "off",
+    "new-cap": "off",
+    "prefer-template": "off",
+    "object-shorthand": "off",
+    "func-names": "off",
+    "no-underscore-dangle": "off",
+    "strict": "off",
+    "no-plusplus": "off",
+    "no-bitwise": "error",
+    "comma-dangle": "off",
+    "vars-on-top": "off",
+    "no-continue": "off",
+    "no-param-reassign": "off",
+    "no-multi-assign": "off",
+    "no-console": "error",
+    "radix": "off",
+    "no-alert": "off",
+    "no-nested-ternary": "off",
+    "prefer-destructuring": "off",
     "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": 0,
-    "import/order": 0,
-    "import/prefer-default-export": 0,
-    "import/no-unresolved": 0,
-    "import/no-cycle": 0,
+    "prefer-promise-reject-errors": "off",
+    "import/prefer-default-export": "off",
+    "import/no-default-export": "off",
+    "import/no-unresolved": "off",
+    "import/no-cycle": "off",
     "import/extensions": [
-      2,
+      "error",
       "ignorePackages",
       { "ts": "never", "js": "never" }
     ],
     "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
+    "object-curly-newline": "off",
+    "default-case": "off",
+    "wc/no-self-class": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/naming-convention": [
+      "off",
+      {
+        "selector": "default",
+        "format": ["camelCase", "snake_case"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": ["variable"],
+        "format": ["camelCase", "snake_case", "UPPER_CASE"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "lit/attribute-value-entities": "off",
+    "lit/no-template-map": "off"
   },
-  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
+  "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"
 }

.github/ISSUE_TEMPLATE.md

@@ -74,12 +74,12 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 
 ```
 
-## Problem-relevant configuration
+## Problem-relevant frontend 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.
+  An example configuration that caused the problem for you, e.g. the YAML configuration
+  of the used cards. 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
@@ -89,7 +89,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ## Javascript errors shown in your browser console/inspector
 
 <!--
-  If you come across any javascript or other error logs, e.g., in your browser
+  If you come across any Javascript or other error logs, e.g. in your browser
   console/inspector please provide them.
 -->
 

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

@@ -0,0 +1,121 @@
+name: Report a bug with the UI / Dashboards
+description: Report an issue related to the Home Assistant frontend.
+labels: bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
+
+        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
+
+        **Please not not report issues for custom cards.**
+
+        [fr]: https://github.com/home-assistant/frontend/discussions
+        [releases]: https://github.com/home-assistant/home-assistant/releases
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Please verify that you've followed these steps
+      options:
+        - label: I have updated to the latest available Home Assistant version.
+          required: true
+        - label: I have cleared the cache of my browser.
+          required: true
+        - label: I have tried a different browser to see if it is related to my browser.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## The problem
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the issue you are experiencing
+      description: Provide a clear and concise description of what the bug is.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the behavior you expected
+      description: Describe what you expected to happen or it should look/behave.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Steps to reproduce the issue
+      description: |
+        Please tell us exactly how to reproduce your issue.
+        Provide clear and concise step by step instructions and add code snippets if needed.
+      value: |
+        1.
+        2.
+        3.
+        ...
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment
+  - type: input
+    validations:
+      required: true
+    attributes:
+      label: What version of Home Assistant Core has the issue?
+      placeholder: core-
+      description: >
+        Can be found in the Configuration panel -> Info.
+  - type: input
+    attributes:
+      label: What was the last working version of Home Assistant Core?
+      placeholder: core-
+      description: >
+        If known, otherwise leave blank.
+  - type: input
+    attributes:
+      label: In which browser are you experiencing the issue with?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
+  - type: input
+    attributes:
+      label: Which operating system are you using to run this browser?
+      placeholder: macOS Big Sur (1.11)
+      description: >
+        Don't forget to add the version!
+  - type: markdown
+    attributes:
+      value: |
+        # Details
+
+  - type: textarea
+    attributes:
+      label: State of relevant entities
+      description: >
+        If your issue is about how an entity is shown in the UI, please add the
+        state and attributes for all situations. You can find this information
+        at Developer Tools -> States.
+      render: txt
+  - type: textarea
+    attributes:
+      label: Problem-relevant frontend configuration
+      description: >
+        An example configuration that caused the problem for you, e.g., the YAML
+        configuration of the used cards. Fill this out even if it seems
+        unimportant to you. Please be sure to remove personal information like
+        passwords, private URLs and other credentials.
+      render: yaml
+  - type: textarea
+    attributes:
+      label: Javascript errors shown in your browser console/inspector
+      description: >
+        If you come across any Javascript or other error logs, e.g., in your
+        browser console/inspector please provide them.
+      render: txt
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: >
+        If you have any additional information for us, use the field below.
+        Please note, you can attach screenshots or screen recordings here, by
+        dragging and dropping files in the field below.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
+  - name: Request a feature for the UI / Dashboards
+    url: https://github.com/home-assistant/frontend/discussions/category_choices
+    about: Request an new feature for the Home Assistant frontend.
+  - name: Report a bug that is NOT related to the UI / Dashboards
     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.
+    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") 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.
+    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/PULL_REQUEST_TEMPLATE.md

@@ -18,8 +18,8 @@
 <!--
   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.
+  or resolves a feature request, be sure to link to that issue or discussion
+  in the additional information section.
 -->
 
 ## Type of change
@@ -56,7 +56,7 @@
 -->
 
 - This PR fixes or closes issue: fixes #
-- This PR is related to issue:
+- This PR is related to issue or discussion:
 - Link to documentation pull request:
 
 ## Checklist

.github/lock.yml

@@ -1,27 +0,0 @@
-# Configuration for Lock Threads - https://github.com/dessant/lock-threads
-
-# Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 1
-
-# Skip issues and pull requests created before a given timestamp. Timestamp must
-# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
-skipCreatedBefore: 2020-01-01
-
-# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
-exemptLabels: []
-
-# Label to add before locking, such as `outdated`. Set to `false` to disable
-lockLabel: false
-
-# Comment to post before locking. Set to `false` to disable
-lockComment: false
-
-# Assign `resolved` as the reason for locking. Set to `false` to disable
-setLockReason: false
-
-# Limit to only `issues` or `pulls`
-only: pulls
-
-# Optionally, specify configuration settings just for `issues` or `pulls`
-issues:
-  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

@@ -10,81 +10,64 @@ on:
       - dev
       - master
 
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=6144
+
 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
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         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-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
           CI: true
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Run eslint
-        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
+        run: yarn run lint:eslint
       - name: Run tsc
-        run: ./node_modules/.bin/tsc
+        run: yarn run lint:types
+      - name: Run prettier
+        run: yarn run lint:prettier
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
   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
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         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-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
           CI: true
-      - name: Run Mocha
-        run: npm run mocha
+      - name: Build resources
+        run: ./node_modules/.bin/gulp build-translations build-locale-data
+      - name: Run Tests
+        run: yarn run test
   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
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         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-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
@@ -99,20 +82,11 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         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-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,60 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [dev, master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/demo.yaml

@@ -4,26 +4,22 @@ on:
   push:
     branches:
       - dev
+
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=6144
+
 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
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         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-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/lock.yml

@@ -0,0 +1,20 @@
+name: Lock
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v2.0.1
+        with:
+          github-token: ${{ github.token }}
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-lock-reason: ""
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-lock-reason: ""

.github/workflows/netflify.yml

@@ -0,0 +1,19 @@
+name: Netlify
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  trigger_builds:
+    name: Trigger netlify build preview
+    runs-on: "ubuntu-latest"
+    steps:
+      - name: Trigger Cast build
+        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_CAST_DEV_BUILD_HOOK }}
+
+      - name: Trigger Demo build
+        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_DEMO_DEV_BUILD_HOOK }}
+
+      - name: Trigger Design build
+        run: curl -X POST -d "NIGHTLY" https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_GALLERY_DEV_BUILD_HOOK }}

.github/workflows/release.yaml

@@ -0,0 +1,106 @@
+name: Release
+
+on:
+  release:
+    types:
+      - published
+
+env:
+  PYTHON_VERSION: 3.8
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=6144
+
+# Set default workflow permissions
+# All scopes not mentioned here are set to no access
+# https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token
+permissions:
+  actions: none
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write  # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Verify version
+        uses: home-assistant/actions/helpers/verify-version@master
+
+      - name: Set up Python ${{ env.PYTHON_VERSION }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build and release package
+        run: |
+          python3 -m pip install twine build
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+
+          script/release
+
+      - name: Upload release assets
+        uses: softprops/action-gh-release@v0.1.14
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
+
+  wheels-init:
+    name: Init wheels build
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate requirements.txt
+        run: |
+          # Sleep to give pypi time to populate the new version across mirrors
+          sleep 240
+          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
+          echo "home-assistant-frontend==$version" > ./requirements.txt
+
+      - name: Upload requirements.txt
+        uses: actions/upload-artifact@v2
+        with:
+          name: requirements
+          path: ./requirements.txt
+
+  build-wheels:
+    name: Build wheels for ${{ matrix.arch }}
+    needs: wheels-init
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.9-alpine3.14"
+    steps:
+      - name: Download requirements.txt
+        uses: actions/download-artifact@v2
+        with:
+          name: requirements
+
+      - name: Build wheels
+        uses: home-assistant/wheels@master
+        with:
+          tag: ${{ matrix.tag }}
+          arch: ${{ matrix.arch }}
+          wheels-host: ${{ secrets.WHEELS_HOST }}
+          wheels-key: ${{ secrets.WHEELS_KEY }}
+          wheels-user: wheels
+          requirements: "requirements.txt"

.github/workflows/stale.yml

@@ -0,0 +1,42 @@
+name: Stale
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 90 days stale policy
+        uses: actions/stale@v3.0.13
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 90
+          days-before-close: 7
+          operations-per-run: 25
+          remove-stale-when-updated: true
+          stale-issue-label: "stale"
+          exempt-issue-labels: "no-stale,Help%20wanted,help-wanted,feature-request,feature%20request"
+          stale-issue-message: >
+            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 has now been marked as stale and will be closed if no
+            further activity occurs. Thank you for your contributions.
+
+          stale-pr-label: "stale"
+          exempt-pr-labels: "no-stale"
+          stale-pr-message: >
+            There hasn't been any activity on this pull request recently. This
+            pull request has been automatically marked as stale because of that
+            and will be closed if no further activity occurs within 7 days.
+
+            Thank you for your contributions.

.github/workflows/translations.yaml

@@ -0,0 +1,25 @@
+name: Translations
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - src/translations/en.json
+
+env:
+  NODE_VERSION: 14
+
+jobs:
+  upload:
+    name: Upload
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Upload Translations
+        run: |
+          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+
+          ./script/translations_upload_base

.gitignore

@@ -1,11 +1,23 @@
-build
-build-translations/*
-node_modules/*
-npm-debug.log
 .DS_Store
-hass_frontend/*
 .reify-cache
 
+# build
+build
+hass_frontend/*
+dist
+
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+node_modules/*
+yarn-error.log
+npm-debug.log
+
 # Python stuff
 *.py[cod]
 *.egg
@@ -14,22 +26,23 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
 !.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/tasks.json
 
 # Cast dev settings
 src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
+
+# Home Assistant config
+/config

.hound.yml

@@ -1,6 +0,0 @@
-jshint:
-  enabled: false
-
-eslint:
-  enabled: true
-  config_file: .eslintrc-hound.json

.nvmrc

@@ -1 +1 @@
-12.1
+14

.prettierignore

@@ -1,5 +1,4 @@
 build
-build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  // https://github.com/microsoft/vscode-js-debug/blob/master/OPTIONS.md
+  "configurations": [
+    {
+      "name": "Debug Frontend",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8123/",
+      "webRoot": "${workspaceFolder}/hass_frontend",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Frontend",
+      "outFiles": [
+        "${workspaceFolder}/hass_frontend/frontend_latest/*.js"
+      ]
+    },
+    {
+      "name": "Debug Gallery",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8100/",
+      "webRoot": "${workspaceFolder}/gallery/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Gallery"
+    },
+    {
+      "name": "Debug Demo",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8090/",
+      "webRoot": "${workspaceFolder}/demo/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Demo"
+    },
+    {
+      "name": "Debug Cast",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8080/",
+      "webRoot": "${workspaceFolder}/cast/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Cast"
+    },
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,208 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Develop Frontend",
+      "type": "gulp",
+      "task": "develop-app",
+      // Sync changes here to other tasks until issue resolved
+      // https://github.com/Microsoft/vscode/issues/61497
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Supervisor panel",
+      "type": "gulp",
+      "task": "develop-hassio",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Gallery",
+      "type": "gulp",
+      "task": "develop-gallery",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Demo",
+      "type": "gulp",
+      "task": "develop-demo",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Cast",
+      "type": "gulp",
+      "task": "develop-cast",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Run HA Core in devcontainer",
+      "type": "shell",
+      "command": "script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Run HA Core for Supervisor in devcontainer",
+      "type": "shell",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    }
+  ],
+  "inputs": [
+    {
+      "id": "supervisorHost",
+      "type": "promptString",
+      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
+    },
+    {
+      "id": "supervisorToken",
+      "type": "promptString",
+      "description": "The token for the Remote API proxy add-on"
+    }
+  ]
+}

.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch

@@ -0,0 +1,29 @@
+diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
+index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
+--- a/polyfillLoaders/EventTarget.js
++++ b/polyfillLoaders/EventTarget.js
+@@ -6,16 +6,15 @@
+ let _ET;
+ let ET;
+ export default async function EventTarget() {
+-    return ET || init();
++  return ET || init();
+ }
+ async function init() {
+-    _ET = window.EventTarget;
+-    try {
+-        new _ET();
+-    }
+-    catch (_a) {
+-        _ET = (await import('event-target-shim')).EventTarget;
+-    }
+-    return (ET = _ET);
++  _ET = window.EventTarget;
++  try {
++    new _ET();
++  } catch (_a) {
++    _ET = (await import("event-target-shim")).default.EventTarget;
++  }
++  return (ET = _ET);
+ }
+ //# sourceMappingURL=EventTarget.js.map

.yarn/patches/@material/mwc-icon-button/remove-icon.patch

@@ -0,0 +1,12 @@
+diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
+index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
+--- a/mwc-icon-button-base.js
++++ b/mwc-icon-button-base.js
+@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
+         @touchend="${this.handleRippleDeactivate}"
+         @touchcancel="${this.handleRippleDeactivate}"
+     >${this.renderRipple()}
+-    <i class="material-icons">${this.icon}</i>
+     <span
+       ><slot></slot
+     ></span>

.yarn/patches/@polymer/polymer/pr-5569.patch

@@ -0,0 +1,34 @@
+diff --git a/lib/legacy/class.js b/lib/legacy/class.js
+index aee2511be1cd9bf900ee552bc98190c1631c57c0..f2f499d68bf52034cac9c28307c99e8ce6b8417d 100644
+--- a/lib/legacy/class.js
++++ b/lib/legacy/class.js
+@@ -304,17 +304,23 @@ function GenerateClassFromInfo(info, Base, behaviors) {
+       // only proceed if the generated class' prototype has not been registered.
+       const generatedProto = PolymerGenerated.prototype;
+       if (!generatedProto.hasOwnProperty(JSCompiler_renameProperty('__hasRegisterFinished', generatedProto))) {
+-        generatedProto.__hasRegisterFinished = true;
++        // make sure legacy lifecycle is called on the *element*'s prototype
++        // and not the generated class prototype; if the element has been
++        // extended, these are *not* the same.
++        const proto = Object.getPrototypeOf(this);
++        // Only set flag when generated prototype itself is registered,
++        // as this element may be extended from, and needs to run `registered`
++        // on all behaviors on the subclass as well.
++        if (proto === generatedProto) {
++          generatedProto.__hasRegisterFinished = true;
++        }
+         // ensure superclass is registered first.
+         super._registered();
+         // copy properties onto the generated class lazily if we're optimizing,
+-        if (legacyOptimizations) {
++        if (legacyOptimizations && !Object.hasOwnProperty(generatedProto, '__hasCopiedProperties')) {
++          generatedProto.__hasCopiedProperties = true;
+           copyPropertiesToProto(generatedProto);
+         }
+-        // make sure legacy lifecycle is called on the *element*'s prototype
+-        // and not the generated class prototype; if the element has been
+-        // extended, these are *not* the same.
+-        const proto = Object.getPrototypeOf(this);
+         let list = lifecycle.beforeRegister;
+         if (list) {
+           for (let i=0; i < list.length; i++) {

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

MANIFEST.in

@@ -1,5 +1,4 @@
 include README.md
-include LICENSE.md
 graft hass_frontend
 graft hass_frontend_es5
 recursive-exclude * *.py[co]

README.md

@@ -2,7 +2,7 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
@@ -14,7 +14,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
-- Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
+- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)
 
 ## Frontend development
 
@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
-We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.

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

@@ -1,59 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger:
-  batch: true
-  tags:
-    include:
-      - "*"
-pr: none
-variables:
-  - name: versionWheels
-    value: '1.10.1-3.7-alpine3.11'
-  - name: versionNode
-    value: '12.1'
-  - group: twine
-resources:
-  repositories:
-    - repository: azure
-      type: github
-      name: 'home-assistant/ci-azure'
-      endpoint: 'home-assistant'
-
-
-stages:
-  - stage: "Validate"
-    jobs:
-    - template: templates/azp-job-version.yaml@azure
-
-  - stage: "Build"
-    jobs:
-      - job: "ReleasePython"
-        pool:
-          vmImage: "ubuntu-latest"
-        steps:
-          - task: UsePythonVersion@0
-            displayName: "Use Python 3.7"
-            inputs:
-              versionSpec: "3.7"
-          - task: NodeTool@0
-            displayName: "Use Node $(versionNode)"
-            inputs:
-              versionSpec: "$(versionNode)"
-          - script: pip install twine wheel
-            displayName: "Install tools"
-          - script: |
-              export TWINE_USERNAME="$(twineUser)"
-              export TWINE_PASSWORD="$(twinePassword)"
-
-              script/release
-            displayName: "Build and release package"
-  - stage: "Wheels"
-    jobs:
-      - template: templates/azp-job-wheels.yaml@azure
-        parameters:
-          builderVersion: '$(versionWheels)'
-          wheelsRequirement: 'requirement.txt'
-          preBuild:
-          - script: |
-              sleep 240
-              echo "home-assistant-frontend==$(Build.SourceBranchName)" > requirement.txt

azure-pipelines-translation.yml

@@ -1,70 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger:
-  batch: true
-  branches:
-    include:
-    - dev
-  paths:
-    include:
-    - translations/en.json
-pr: none
-schedules:
-  - cron: "30 0 * * *"
-    displayName: "frontend translation update"
-    branches:
-      include:
-      - dev
-    always: true
-variables:
-- group: translation
-resources:
-  repositories:
-  - repository: azure
-    type: github
-    name: 'home-assistant/ci-azure'
-    endpoint: 'home-assistant'
-
-
-jobs:
-
-- job: 'Upload'
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - task: NodeTool@0
-    displayName: 'Use Node 12.x'
-    inputs:
-      versionSpec: '12.x'
-  - script: |
-      export LOKALISE_TOKEN="$(lokaliseToken)"
-      export AZURE_BRANCH="$(Build.SourceBranchName)"
-
-      ./script/translations_upload_base
-    displayName: 'Upload Translation'
-
-- job: 'Download'
-  dependsOn:
-  - 'Upload'
-  condition: or(eq(variables['Build.Reason'], 'Schedule'), eq(variables['Build.Reason'], 'Manual'))
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - task: NodeTool@0
-    displayName: 'Use Node 12.x'
-    inputs:
-      versionSpec: '12.x'
-  - template: templates/azp-step-git-init.yaml@azure
-  - script: |
-      export LOKALISE_TOKEN="$(lokaliseToken)"
-      export AZURE_BRANCH="$(Build.SourceBranchName)"
-
-      npm install
-      ./script/translations_download
-    displayName: 'Download Translation'
-  - script: |
-      git checkout dev
-      git add translation
-      git commit -am "[ci skip] Translation update"
-      git push
-    displayName: 'Update translation'

build-scripts/README.md

@@ -0,0 +1,39 @@
+# Bundling Home Assistant Frontend
+
+The Home Assistant build pipeline contains various steps to prepare a build.
+
+- Generating icon files to be included
+- Generating translation files to be included
+- Converting TypeScript, CSS and JSON files to JavaScript
+- Bundling
+- Minifying the files
+- Generating the HTML entrypoint files
+- Generating the service worker
+- Compressing the files
+
+## Converting files
+
+Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands.
+
+We currently rely on Webpack but also have experimental Rollup support. Both of these programs bundle the converted files in both production and development.
+
+For development, bundling is optional. We just want to get the right files in the browser.
+
+Responsibilities of the converter during development:
+
+- Convert TypeScript to JavaScript
+- Convert CSS to JavaScript that sets the content as the default export
+- Convert JSON to JavaScript that sets the content as the default export
+- Make sure import, dynamic import and web worker references work
+  - Add extensions where missing
+  - Resolve absolute package imports
+- Filter out specific imports/packages
+- Replace constants with values
+
+In production, the following responsibilities are added:
+
+- Minify HTML
+- Bundle multiple imports so that the browser can fetch less files
+- Generate a second version that is ES5 compatible
+
+Configuration for all these steps are specified in [bundle.js](bundle.js).

build-scripts/babel-plugins/inline-constants-plugin.js

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+
+// Currently only supports CommonJS modules, as require is synchronous. `import` would need babel running asynchronous.
+module.exports = function inlineConstants(babel, options, cwd) {
+  const t = babel.types;
+
+  if (!Array.isArray(options.modules)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected a `modules` array to be passed"
+    );
+  }
+
+  if (options.resolveExtensions && !Array.isArray(options.resolveExtensions)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected `resolveExtensions` to be an array"
+    );
+  }
+
+  const ignoreModuleNotFound = options.ignoreModuleNotFound;
+  const resolveExtensions = options.resolveExtensions;
+
+  const hasRelativeModules = options.modules.some(
+    (module) => module.startsWith(".") || module.startsWith("/")
+  );
+
+  const modules = Object.fromEntries(
+    options.modules.map((module) => {
+      const absolute = module.startsWith(".")
+        ? require.resolve(module, { paths: [cwd] })
+        : module;
+      // eslint-disable-next-line import/no-dynamic-require
+      return [absolute, require(absolute)];
+    })
+  );
+
+  const toLiteral = (value) => {
+    if (typeof value === "string") {
+      return t.stringLiteral(value);
+    }
+
+    if (typeof value === "number") {
+      return t.numericLiteral(value);
+    }
+
+    if (typeof value === "boolean") {
+      return t.booleanLiteral(value);
+    }
+
+    if (value === null) {
+      return t.nullLiteral();
+    }
+
+    throw new Error(
+      "babel-plugin-inline-constants: cannot handle non-literal `" + value + "`"
+    );
+  };
+
+  const resolveAbsolute = (value, state, resolveExtensionIndex) => {
+    if (!state.filename) {
+      throw new TypeError(
+        "babel-plugin-inline-constants: expected a `filename` to be set for files"
+      );
+    }
+
+    if (resolveExtensions && resolveExtensionIndex !== undefined) {
+      value += resolveExtensions[resolveExtensionIndex];
+    }
+
+    try {
+      return require.resolve(value, { paths: [path.dirname(state.filename)] });
+    } catch (error) {
+      if (
+        error.code === "MODULE_NOT_FOUND" &&
+        resolveExtensions &&
+        (resolveExtensionIndex === undefined ||
+          resolveExtensionIndex < resolveExtensions.length - 1)
+      ) {
+        const resolveExtensionIdx = (resolveExtensionIndex || -1) + 1;
+        return resolveAbsolute(value, state, resolveExtensionIdx);
+      }
+
+      if (error.code === "MODULE_NOT_FOUND" && ignoreModuleNotFound) {
+        return undefined;
+      }
+      throw error;
+    }
+  };
+
+  const importDeclaration = (p, state) => {
+    if (p.node.type !== "ImportDeclaration") {
+      return;
+    }
+    const absolute =
+      hasRelativeModules && p.node.source.value.startsWith(".")
+        ? resolveAbsolute(p.node.source.value, state)
+        : p.node.source.value;
+
+    if (!absolute || !(absolute in modules)) {
+      return;
+    }
+
+    const module = modules[absolute];
+
+    for (const specifier of p.node.specifiers) {
+      if (
+        specifier.type === "ImportDefaultSpecifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!("default" in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access default export from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module.default);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else if (
+        specifier.type === "ImportSpecifier" &&
+        specifier.imported &&
+        specifier.imported.type === "Identifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!(specifier.imported.name in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access `" +
+              specifier.imported.name +
+              "` from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module[specifier.imported.name]);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else {
+        throw new Error("Cannot handle specifier `" + specifier.type + "`");
+      }
+    }
+    p.remove();
+  };
+
+  return {
+    visitor: {
+      ImportDeclaration: importDeclaration,
+    },
+  };
+};

build-scripts/bundle.js

@@ -1,17 +1,16 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
 module.exports.ignorePackages = ({ latestBuild }) => [
-  // Bloats bundle and it's not used.
-  path.resolve(require.resolve("moment"), "../locale"),
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild }) =>
+module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -19,7 +18,8 @@ module.exports.emptyPackages = ({ latestBuild }) =>
     require.resolve("@polymer/paper-styles/default-theme.js"),
     // Loads stuff from a CDN
     require.resolve("@polymer/font-roboto/roboto.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Compatibility not needed for latest builds
     latestBuild &&
       // wrapped in require.resolve so it blows up if file no longer exists
@@ -28,6 +28,15 @@ module.exports.emptyPackages = ({ latestBuild }) =>
       ),
     // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
+    // Icons in supervisor conflict with icons in HA so we don't load.
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+      ),
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -35,6 +44,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
+  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   "process.env.NODE_ENV": JSON.stringify(
@@ -44,44 +54,59 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
 });
 
 module.exports.terserOptions = (latestBuild) => ({
-  safari10: true,
+  safari10: !latestBuild,
   ecma: latestBuild ? undefined : 5,
   output: { comments: false },
 });
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
-    require("@babel/preset-typescript").default,
+    !latestBuild && [
+      "@babel/preset-env",
+      {
+        useBuiltIns: "entry",
+        corejs: "3.15",
+        bugfixes: true,
+      },
+    ],
+    "@babel/preset-typescript",
   ].filter(Boolean),
   plugins: [
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/inline-constants-plugin.js"
+      ),
+      {
+        modules: ["@mdi/js"],
+        ignoreModuleNotFound: true,
+      },
+    ],
     // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
     !latestBuild && [
       "@babel/plugin-proposal-object-rest-spread",
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
     "@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 },
-    ],
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
   ].filter(Boolean),
+  exclude: [
+    // \\ for Windows, / for Mac OS and Linux
+    /node_modules[\\/]core-js/,
+    /node_modules[\\/]webpack[\\/]buildin/,
+  ],
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 
@@ -110,7 +135,7 @@ BundleConfig {
 */
 
 module.exports.config = {
-  app({ isProdBuild, latestBuild, isStatsBuild }) {
+  app({ isProdBuild, latestBuild, isStatsBuild, isWDS }) {
     return {
       entry: {
         service_worker: "./src/entrypoints/service_worker.ts",
@@ -125,6 +150,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isWDS,
     };
   },
 
@@ -148,6 +174,7 @@ module.exports.config = {
   cast({ isProdBuild, latestBuild }) {
     const entry = {
       launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
+      media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
     };
 
     if (latestBuild) {
@@ -178,6 +205,10 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
+      isHassioBuild: true,
+      defineOverlay: {
+        __SUPERVISOR__: true,
+      },
     };
   },
 
@@ -190,6 +221,9 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      defineOverlay: {
+        __DEMO__: true,
+      },
     };
   },
 };

build-scripts/env.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.js");
@@ -6,6 +7,9 @@ module.exports = {
   useRollup() {
     return process.env.ROLLUP === "1";
   },
+  useWDS() {
+    return process.env.WDS === "1";
+  },
   isProdBuild() {
     return (
       process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
@@ -22,11 +26,11 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
-      .match(/\d{8}\.\d+/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
+      .match(/version\W+=\W(\d{8}\.\d)/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[0];
+    return version[1];
   },
 };

build-scripts/gulp/app.js

@@ -5,6 +5,7 @@ const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
+require("./locale-data.js");
 require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
@@ -12,6 +13,7 @@ require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
+require("./wds.js");
 
 gulp.task(
   "develop-app",
@@ -25,10 +27,15 @@ gulp.task(
       "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations"
+      "build-translations",
+      "build-locale-data"
     ),
     "copy-static-app",
-    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
+    env.useWDS()
+      ? "wds-watch-app"
+      : env.useRollup()
+      ? "rollup-watch-app"
+      : "webpack-watch-app"
   )
 );
 
@@ -39,11 +46,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
-    ...// Don't compress running tests
-    (env.isTest() ? [] : ["compress-app"]),
+    // Don't compress running tests
+    ...(env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -18,7 +18,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     "gen-index-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
@@ -33,7 +33,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/clean.js

@@ -5,32 +5,32 @@ require("./translations");
 
 gulp.task(
   "clean",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.app_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.app_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-demo",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.demo_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.demo_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-cast",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.cast_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.cast_output_root, paths.build_dir])
+  )
 );
 
-gulp.task("clean-hassio", function cleanOutputAndBuildDir() {
-  return del([paths.hassio_output_root, paths.build_dir]);
-});
+gulp.task("clean-hassio", () =>
+  del([paths.hassio_output_root, paths.build_dir])
+);
 
 gulp.task(
   "clean-gallery",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.gallery_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
+  )
 );

build-scripts/gulp/demo.js

@@ -20,7 +20,12 @@ gulp.task(
     },
     "clean-demo",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-index-demo-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
     "copy-static-demo",
     env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
@@ -35,7 +40,7 @@ gulp.task(
     "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-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/entry-html.js

@@ -19,6 +19,7 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   return compiled({
     ...data,
     useRollup: env.useRollup(),
+    useWDS: env.useWDS(),
     renderTemplate,
   });
 };
@@ -90,10 +91,23 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
+  let latestAppJS, latestCoreJS, latestCustomPanelJS;
+
+  if (env.useWDS()) {
+    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+    latestCustomPanelJS =
+      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+  } else {
+    latestAppJS = "/frontend_latest/app.js";
+    latestCoreJS = "/frontend_latest/core.js";
+    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+  }
+
   const content = renderTemplate("index", {
-    latestAppJS: "/frontend_latest/app.js",
-    latestCoreJS: "/frontend_latest/core.js",
-    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestAppJS,
+    latestCoreJS,
+    latestCustomPanelJS,
 
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",
@@ -140,6 +154,15 @@ gulp.task("gen-index-cast-dev", (done) => {
     contentReceiver
   );
 
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: "/frontend_latest/media.js",
+    es5MediaJS: "/frontend_es5/media.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
@@ -178,6 +201,15 @@ gulp.task("gen-index-cast-prod", (done) => {
     contentReceiver
   );
 
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: latestManifest["media.js"],
+    es5MediaJS: es5Manifest["media.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
@@ -288,15 +320,23 @@ gulp.task("gen-index-hassio-prod", async () => {
 
 function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
   fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
   fs.writeFileSync(
     path.resolve(paths.hassio_output_root, "entrypoint.js"),
     `
-try {
-  new Function("import('${latestEntrypoint}')")();
-} catch (err) {
+function loadES5() {
   var el = document.createElement('script');
   el.src = '${es5Entrypoint}';
   document.body.appendChild(el);
+}
+if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
+    loadES5();
+} else {
+  try {
+    new Function("import('${latestEntrypoint}')")();
+  } catch (err) {
+    loadES5();
+  }
 }
   `,
     { encoding: "utf-8" }

build-scripts/gulp/gallery.js

@@ -1,7 +1,11 @@
+/* eslint-disable */
 // Run demo develop mode
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
+const { marked } = require("marked");
+const glob = require("glob");
+const yaml = require("js-yaml");
 
 const env = require("../env");
 const paths = require("../paths");
@@ -15,26 +19,129 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
 
-gulp.task("gather-gallery-demos", async function gatherDemos() {
-  const files = await fs.promises.readdir(
-    path.resolve(paths.gallery_dir, "src/demos")
-  );
-
-  let content = "export const DEMOS = {\n";
-
-  for (const file of files) {
-    const demoId = path.basename(file, ".ts");
-    const demoPath = "../src/demos/" + demoId;
-    content += `  "${demoId}": () => import("${demoPath}"),\n`;
-  }
-
-  content += "};";
+gulp.task("gather-gallery-pages", async function gatherPages() {
+  const pageDir = path.resolve(paths.gallery_dir, "src/pages");
+  const files = glob.sync(path.resolve(pageDir, "**/*"));
 
   const galleryBuild = path.resolve(paths.gallery_dir, "build");
-
   fs.mkdirSync(galleryBuild, { recursive: true });
+
+  let content = "export const PAGES = {\n";
+
+  const processed = new Set();
+
+  for (const file of files) {
+    if (fs.lstatSync(file).isDirectory()) {
+      continue;
+    }
+    const pageId = file.substring(pageDir.length + 1, file.lastIndexOf("."));
+
+    if (processed.has(pageId)) {
+      continue;
+    }
+    processed.add(pageId);
+
+    const [category, name] = pageId.split("/", 2);
+
+    const demoFile = path.resolve(pageDir, `${pageId}.ts`);
+    const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);
+    const hasDemo = fs.existsSync(demoFile);
+    let hasDescription = fs.existsSync(descriptionFile);
+    let metadata = {};
+    if (hasDescription) {
+      let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
+
+      if (descriptionContent.startsWith("---")) {
+        const metadataEnd = descriptionContent.indexOf("---", 3);
+        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
+        descriptionContent = descriptionContent
+          .substring(metadataEnd + 3)
+          .trim();
+      }
+
+      // If description is just metadata
+      if (descriptionContent === "") {
+        hasDescription = false;
+      } else {
+        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
+        fs.writeFileSync(
+          path.resolve(galleryBuild, `${pageId}-description.ts`),
+          `
+          import {html} from "lit";
+          export default html\`${descriptionContent}\`
+          `
+        );
+      }
+    }
+    content += `  "${pageId}": {
+      metadata: ${JSON.stringify(metadata)},
+      ${
+        hasDescription
+          ? `description: () => import("./${pageId}-description").then(m => m.default),`
+          : ""
+      }
+      ${hasDemo ? `demo: () => import("../src/pages/${pageId}")` : ""}
+
+    },\n`;
+  }
+
+  content += "};\n";
+
+  // Generate sidebar
+  const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js");
+  // To make watch work during development
+  delete require.cache[sidebarPath];
+  const sidebar = require(sidebarPath);
+
+  const pagesToProcess = {};
+  for (const key of processed) {
+    const [category, page] = key.split("/", 2);
+    if (!(category in pagesToProcess)) {
+      pagesToProcess[category] = new Set();
+    }
+    pagesToProcess[category].add(page);
+  }
+
+  for (const group of Object.values(sidebar)) {
+    const toProcess = pagesToProcess[group.category];
+    delete pagesToProcess[group.category];
+
+    if (!toProcess) {
+      console.error("Unknown category", group.category);
+      if (!group.pages) {
+        group.pages = [];
+      }
+      continue;
+    }
+
+    // Any pre-defined groups will not be sorted.
+    if (group.pages) {
+      for (const page of group.pages) {
+        if (!toProcess.delete(page)) {
+          console.error("Found unreferenced demo", page);
+        }
+      }
+    } else {
+      group.pages = [];
+    }
+    for (const page of Array.from(toProcess).sort()) {
+      group.pages.push(page);
+    }
+  }
+
+  for (const [category, pages] of Object.entries(pagesToProcess)) {
+    sidebar.push({
+      category,
+      header: category,
+      pages: Array.from(pages).sort(),
+    });
+  }
+
+  content += `export const SIDEBAR = ${JSON.stringify(sidebar, null, 2)};\n`;
+
   fs.writeFileSync(
-    path.resolve(galleryBuild, "import-demos.ts"),
+    path.resolve(galleryBuild, "import-pages.ts"),
     content,
     "utf-8"
   );
@@ -51,11 +158,25 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "gather-gallery-demos"
+      "build-locale-data",
+      "gather-gallery-pages"
     ),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
+    gulp.parallel(
+      env.useRollup()
+        ? "rollup-dev-server-gallery"
+        : "webpack-dev-server-gallery",
+      async function watchMarkdownFiles() {
+        gulp.watch(
+          [
+            path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
+            path.resolve(paths.gallery_dir, "sidebar.js"),
+          ],
+          gulp.series("gather-gallery-pages")
+        );
+      }
+    )
   )
 );
 
@@ -70,7 +191,8 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "gather-gallery-demos"
+      "build-locale-data",
+      "gather-gallery-pages"
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",

build-scripts/gulp/gather-static.js

@@ -2,7 +2,6 @@
 
 const gulp = require("gulp");
 const path = require("path");
-const cpx = require("cpx");
 const fs = require("fs-extra");
 const paths = require("../paths");
 
@@ -13,19 +12,28 @@ const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
 
-const genStaticPath = (staticDir) => (...parts) =>
-  path.resolve(staticDir, ...parts);
+const genStaticPath =
+  (staticDir) =>
+  (...parts) =>
+    path.resolve(staticDir, ...parts);
 
 function copyTranslations(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
   // Translation output
   fs.copySync(
-    polyPath("build-translations/output"),
+    polyPath("build/translations/output"),
     staticPath("translations")
   );
 }
 
+function copyLocaleData(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Locale data output
+  fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
+}
+
 function copyMdiIcons(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
@@ -62,12 +70,20 @@ function copyLoaderJS(staticDir) {
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
-  cpx.copySync(
-    npmPath("roboto-fontface/fonts/roboto/*.woff2"),
-    staticPath("fonts/roboto")
+  fs.copySync(
+    npmPath("roboto-fontface/fonts/roboto/"),
+    staticPath("fonts/roboto/"),
+    {
+      filter: (src) => !src.includes(".") || src.endsWith(".woff2"),
+    }
   );
 }
 
+function copyQrScannerWorker(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
+}
+
 function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
@@ -80,11 +96,26 @@ function copyMapPanel(staticDir) {
   );
 }
 
+gulp.task("copy-locale-data", async () => {
+  const staticDir = paths.app_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-translations-app", async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
+gulp.task("copy-locale-data-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
@@ -94,10 +125,14 @@ gulp.task("copy-static-app", async () => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
+  copyLocaleData(staticDir);
   copyMdiIcons(staticDir);
 
   // Panel assets
   copyMapPanel(staticDir);
+
+  // Qr Scanner assets
+  copyQrScannerWorker(staticDir);
 });
 
 gulp.task("copy-static-demo", async () => {
@@ -114,6 +149,7 @@ gulp.task("copy-static-demo", async () => {
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
+  copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
 });
 
@@ -128,6 +164,7 @@ gulp.task("copy-static-cast", async () => {
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
+  copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
 });
 
@@ -143,5 +180,6 @@ gulp.task("copy-static-gallery", async () => {
   copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
+  copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });

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

@@ -22,17 +22,40 @@ const getMeta = () => {
     const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
       encoding,
     });
-    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+    return {
+      path: svg.match(/ d="([^"]+)"/)[1],
+      name: icon.name,
+      tags: icon.tags,
+      aliases: icon.aliases,
+    };
   });
 };
 
 const addRemovedMeta = (meta) => {
   const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
   const removed = JSON.parse(file);
-  const combinedMeta = [...meta, ...removed];
+  const removedMeta = removed.map((removeIcon) => ({
+    path: removeIcon.path,
+    name: removeIcon.name,
+    tags: [],
+    aliases: [],
+  }));
+  const combinedMeta = [...meta, ...removedMeta];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
 };
 
+const homeAutomationTag = "Home Automation";
+
+const orderMeta = (meta) => {
+  const homeAutomationMeta = meta.filter((icon) =>
+    icon.tags.includes(homeAutomationTag)
+  );
+  const otherMeta = meta.filter(
+    (icon) => !icon.tags.includes(homeAutomationTag)
+  );
+  return [...homeAutomationMeta, ...otherMeta];
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -77,8 +100,10 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = addRemovedMeta(getMeta());
-  const split = splitBySize(meta);
+  const meta = getMeta();
+
+  const metaAndRemoved = addRemovedMeta(meta);
+  const split = splitBySize(metaAndRemoved);
 
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@@ -116,5 +141,18 @@ gulp.task("gen-icons-json", (done) => {
     JSON.stringify({ version: package.version, parts })
   );
 
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconList.json"),
+    JSON.stringify(
+      orderMeta(meta).map((icon) => ({
+        name: icon.name,
+        keywords: [
+          ...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
+          ...icon.aliases,
+        ],
+      }))
+    )
+  );
+
   done();
 });

build-scripts/gulp/hassio.js

@@ -1,15 +1,14 @@
 const gulp = require("gulp");
-const fs = require("fs");
-const path = require("path");
 
 const env = require("../env");
-const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
+require("./gather-static.js");
+require("./translations.js");
 
 gulp.task(
   "develop-hassio",
@@ -18,8 +17,11 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-icons-json",
     "gen-index-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -31,7 +33,10 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/locale-data.js

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const del = require("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const paths = require("../paths");
+
+const outDir = "build/locale-data";
+
+gulp.task("clean-locale-data", () => del([outDir]));
+
+gulp.task("ensure-locale-data-build-dir", (done) => {
+  if (!fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+  done();
+});
+
+const modules = {
+  "intl-relativetimeformat": "RelativeTimeFormat",
+  "intl-datetimeformat": "DateTimeFormat",
+  "intl-numberformat": "NumberFormat",
+};
+
+gulp.task("create-locale-data", (done) => {
+  const translationMeta = JSON.parse(
+    fs.readFileSync(
+      path.join(paths.translations_src, "translationMetadata.json")
+    )
+  );
+  Object.entries(modules).forEach(([module, className]) => {
+    Object.keys(translationMeta).forEach((lang) => {
+      try {
+        const localeData = String(
+          fs.readFileSync(
+            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+          )
+        )
+          .replace(
+            new RegExp(
+              `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
+              "im"
+            ),
+            ""
+          )
+          .replace(/\)\s*}/im, "");
+        // make sure we have valid JSON
+        JSON.parse(localeData);
+        if (!fs.existsSync(path.join(outDir, module))) {
+          fs.mkdirSync(path.join(outDir, module), { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outDir, `${module}/${lang}.json`),
+          localeData
+        );
+      } catch (e) {
+        if (e.code !== "MODULE_NOT_FOUND") {
+          throw e;
+        }
+      }
+    });
+    done();
+  });
+});
+
+gulp.task(
+  "build-locale-data",
+  gulp.series(
+    "clean-locale-data",
+    "ensure-locale-data-build-dir",
+    "create-locale-data"
+  )
+);

build-scripts/gulp/translations.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
@@ -5,9 +7,8 @@ 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 flatmap = require("gulp-flatmap");
 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");
@@ -16,7 +17,7 @@ const paths = require("../paths");
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
-const workDir = "build-translations";
+const workDir = "build/translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
@@ -27,32 +28,14 @@ gulp.task("translations-enable-merge-backend", (done) => {
   done();
 });
 
-String.prototype.rsplit = function (sep, maxsplit) {
-  var split = this.split(sep);
-  return maxsplit
-    ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
-    : split;
-};
-
-// Panel translations which should be split from the core translations. These
-// should mirror the fragment definitions in polymer.json, so that we load
-// additional resources at equivalent points.
-const TRANSLATION_FRAGMENTS = [
-  "config",
-  "history",
-  "logbook",
-  "mailbox",
-  "profile",
-  "shopping-list",
-  "page-authorize",
-  "page-demo",
-  "page-onboarding",
-  "developer-tools",
-];
+// Panel translations which should be split from the core translations.
+const TRANSLATION_FRAGMENTS = Object.keys(
+  require("../../src/translations/en.json").ui.panel
+);
 
 function recursiveFlatten(prefix, data) {
   let output = {};
-  Object.keys(data).forEach(function (key) {
+  Object.keys(data).forEach((key) => {
     if (typeof data[key] === "object") {
       output = {
         ...output,
@@ -113,15 +96,19 @@ function lokaliseTransform(data, original, file) {
     if (value instanceof Object) {
       output[key] = lokaliseTransform(value, original, file);
     } else {
-      output[key] = value.replace(re_key_reference, (match, key) => {
-        const replace = key.split("::").reduce((tr, k) => {
+      output[key] = value.replace(re_key_reference, (_match, lokalise_key) => {
+        const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
-            throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+            throw Error(
+              `Invalid key placeholder ${lokalise_key} in ${file.path}`
+            );
           }
           return tr[k];
         }, original);
         if (typeof replace !== "string") {
-          throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+          throw Error(
+            `Invalid key placeholder ${lokalise_key} in ${file.path}`
+          );
         }
         return replace;
       });
@@ -130,18 +117,16 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function () {
-  return del([workDir]);
-});
+gulp.task("clean-translations", () => del([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
-    fs.mkdirSync(workDir);
+    fs.mkdirSync(workDir, { recursive: true });
   }
   done();
 });
 
-gulp.task("create-test-metadata", function (cb) {
+gulp.task("create-test-metadata", (cb) => {
   fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
@@ -155,17 +140,13 @@ gulp.task("create-test-metadata", function (cb) {
 
 gulp.task(
   "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
-    return gulp
+  gulp.series("create-test-metadata", () =>
+    gulp
       .src(path.join(paths.translations_src, "en.json"))
-      .pipe(
-        transform(function (data, file) {
-          return recursiveEmpty(data);
-        })
-      )
+      .pipe(transform((data, _file) => recursiveEmpty(data)))
       .pipe(rename("test.json"))
-      .pipe(gulp.dest(workDir));
-  })
+      .pipe(gulp.dest(workDir))
+  )
 );
 
 /**
@@ -177,7 +158,7 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function () {
+gulp.task("build-master-translation", () => {
   const src = [path.join(paths.translations_src, "en.json")];
 
   if (mergeBackend) {
@@ -186,11 +167,7 @@ gulp.task("build-master-translation", function () {
 
   return gulp
     .src(src)
-    .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       merge({
         fileName: "translationMaster.json",
@@ -199,18 +176,14 @@ gulp.task("build-master-translation", function () {
     .pipe(gulp.dest(workDir));
 });
 
-gulp.task("build-merged-translations", function () {
-  return gulp
+gulp.task("build-merged-translations", () =>
+  gulp
     .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
       allowEmpty: true,
     })
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      foreach(function (stream, file) {
+      flatmap((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
@@ -242,17 +215,17 @@ gulp.task("build-merged-translations", function () {
           )
           .pipe(gulp.dest(fullDir));
       })
-    );
-});
+    )
+);
 
-var taskName;
+let taskName;
 
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function () {
+  gulp.task(taskName, () =>
     // Return only the translations for this fragment.
-    return gulp
+    gulp
       .src(fullDir + "/*.json")
       .pipe(
         transform((data) => ({
@@ -263,32 +236,33 @@ TRANSLATION_FRAGMENTS.forEach((fragment) => {
           },
         }))
       )
-      .pipe(gulp.dest(workDir + "/" + fragment));
-  });
+      .pipe(gulp.dest(workDir + "/" + fragment))
+  );
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function () {
+gulp.task(taskName, () =>
   // Remove the fragment translations from the core translation.
-  return gulp
+  gulp
     .src(fullDir + "/*.json")
     .pipe(
-      transform((data, file) => {
+      transform((data, _file) => {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
+        delete data.supervisor;
         return data;
       })
     )
-    .pipe(gulp.dest(coreDir));
-});
+    .pipe(gulp.dest(coreDir))
+);
 
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function () {
+gulp.task("build-flattened-translations", () =>
   // Flatten the split versions of our translations, and move them into outDir
-  return gulp
+  gulp
     .src(
       TRANSLATION_FRAGMENTS.map(
         (fragment) => workDir + "/" + fragment + "/*.json"
@@ -296,42 +270,45 @@ gulp.task("build-flattened-translations", function () {
       { base: workDir }
     )
     .pipe(
-      transform(function (data) {
+      transform((data) =>
         // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
+        flatten(data)
+      )
     )
-    .pipe(minify())
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {
           filePath.dirname = "";
         }
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
       })
     )
-    .pipe(gulp.dest(outDir));
-});
+    .pipe(gulp.dest(outDir))
+);
 
 const fingerprints = {};
 
-gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
+gulp.task("build-translation-fingerprints", () => {
+  // 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",
-      };
-    }
+  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",
+    };
+  }
 
+  // In dev we create the file with the fake hash in the filename
+  if (env.isProdBuild()) {
     mapFiles(outDir, ".json", (filename) => {
       const parsed = path.parse(filename);
 
@@ -347,12 +324,88 @@ gulp.task(
         }`
       );
     });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
   }
+
+  const stream = source("translationFingerprints.json");
+  stream.write(JSON.stringify(fingerprints));
+  process.nextTick(() => stream.end());
+  return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
+});
+
+gulp.task("build-translation-fragment-supervisor", () =>
+  gulp
+    .src(fullDir + "/*.json")
+    .pipe(transform((data) => data.supervisor))
+    .pipe(
+      rename((filePath) => {
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
+      })
+    )
+    .pipe(gulp.dest(workDir + "/supervisor"))
+);
+
+gulp.task("build-translation-flatten-supervisor", () =>
+  gulp
+    .src(workDir + "/supervisor/*.json")
+    .pipe(
+      transform((data) =>
+        // Polymer.AppLocalizeBehavior requires flattened json
+        flatten(data)
+      )
+    )
+    .pipe(gulp.dest(outDir))
+);
+
+gulp.task("build-translation-write-metadata", () =>
+  gulp
+    .src(
+      [
+        path.join(paths.translations_src, "translationMetadata.json"),
+        workDir + "/testMetadata.json",
+        workDir + "/translationFingerprints.json",
+      ],
+      { allowEmpty: true }
+    )
+    .pipe(merge({}))
+    .pipe(
+      transform((data) => {
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          // Filter out translations without native name.
+          if (value.nativeName) {
+            newData[key] = value;
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Skipping language ${key}. Native name was not translated.`
+            );
+          }
+        });
+        return newData;
+      })
+    )
+    .pipe(
+      transform((data) => ({
+        fragments: TRANSLATION_FRAGMENTS,
+        translations: data,
+      }))
+    )
+    .pipe(rename("translationMetadata.json"))
+    .pipe(gulp.dest(workDir))
+);
+
+gulp.task(
+  "create-translations",
+  gulp.series(
+    env.isProdBuild() ? (done) => done() : "create-test-translation",
+    "build-master-translation",
+    "build-merged-translations",
+    gulp.parallel(...splitTasks),
+    "build-flattened-translations"
+  )
 );
 
 gulp.task(
@@ -360,48 +413,22 @@ gulp.task(
   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",
+    "create-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));
-    }
+    "build-translation-write-metadata"
+  )
+);
+
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(
+    "clean-translations",
+    "ensure-translations-build-dir",
+    "build-master-translation",
+    "build-merged-translations",
+    "build-translation-fragment-supervisor",
+    "build-translation-flatten-supervisor",
+    "build-translation-fingerprints",
+    "build-translation-write-metadata"
   )
 );

build-scripts/gulp/wds.js

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

build-scripts/gulp/webpack.js

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
+const fs = require("fs");
 const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
@@ -18,25 +20,46 @@ const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: false }),
 ];
 
-const runDevServer = ({
+const isWsl =
+  fs.existsSync("/proc/version") &&
+  fs
+    .readFileSync("/proc/version", "utf-8")
+    .toLocaleLowerCase()
+    .includes("microsoft");
+
+/**
+ * @param {{
+ *   compiler: import("webpack").Compiler,
+ *   contentBase: string,
+ *   port: number,
+ *   listenHost?: string
+ * }}
+ */
+const runDevServer = async ({
   compiler,
   contentBase,
   port,
   listenHost = "localhost",
-}) =>
-  new WebpackDevServer(compiler, {
-    open: true,
-    watchContentBase: true,
-    contentBase,
-  }).listen(port, listenHost, function (err) {
-    if (err) {
-      throw err;
-    }
-    // Server listening
-    log("[webpack-dev-server]", `http://localhost:${port}`);
-  });
+}) => {
+  const server = new WebpackDevServer(
+    {
+      open: true,
+      host: listenHost,
+      port,
+      static: {
+        directory: contentBase,
+        watch: true,
+      },
+    },
+    compiler
+  );
 
-const handler = (done) => (err, stats) => {
+  await server.start();
+  // Server listening
+  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+};
+
+const doneHandler = (done) => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -45,128 +68,120 @@ const handler = (done) => (err, stats) => {
     return;
   }
 
-  log(`Build done @ ${new Date().toLocaleTimeString()}`);
-
   if (stats.hasErrors() || stats.hasWarnings()) {
-    log.warn(stats.toString("minimal"));
+    // eslint-disable-next-line no-console
+    console.log(stats.toString("minimal"));
   }
 
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
   if (done) {
     done();
   }
 };
 
+const prodBuild = (conf) =>
+  new Promise((resolve) => {
+    webpack(
+      conf,
+      // Resolve promise when done. Because we pass a callback, webpack closes itself
+      doneHandler(resolve)
+    );
+  });
+
 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/ },
-    handler()
-  );
+  // This command will run forever because we don't close compiler
+  webpack(
+    process.env.ES5
+      ? bothBuilds(createAppConfig, { isProdBuild: false })
+      : createAppConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations-app")
+    gulp.series("create-translations", "copy-translations-app")
   );
 });
 
-gulp.task(
-  "webpack-prod-app",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createAppConfig, { isProdBuild: true }),
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-app", () =>
+  prodBuild(
+    bothBuilds(createAppConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
-gulp.task("webpack-dev-server-demo", () => {
+gulp.task("webpack-dev-server-demo", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
     contentBase: paths.demo_output_root,
     port: 8090,
-  });
-});
-
-gulp.task(
-  "webpack-prod-demo",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createDemoConfig, {
-          isProdBuild: true,
-        }),
-        handler(resolve)
-      )
-    )
+  })
 );
 
-gulp.task("webpack-dev-server-cast", () => {
+gulp.task("webpack-prod-demo", () =>
+  prodBuild(
+    bothBuilds(createDemoConfig, {
+      isProdBuild: true,
+    })
+  )
+);
+
+gulp.task("webpack-dev-server-cast", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  });
-});
+  })
+);
 
-gulp.task(
-  "webpack-prod-cast",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createCastConfig, {
-          isProdBuild: true,
-        }),
-
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-cast", () =>
+  prodBuild(
+    bothBuilds(createCastConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
 gulp.task("webpack-watch-hassio", () => {
-  // we are not calling done, so this command will run forever
+  // This command will run forever because we don't close compiler
   webpack(
     createHassioConfig({
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({}, handler());
+  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
 });
 
-gulp.task(
-  "webpack-prod-hassio",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createHassioConfig, {
-          isProdBuild: true,
-        }),
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-hassio", () =>
+  prodBuild(
+    bothBuilds(createHassioConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
-gulp.task("webpack-dev-server-gallery", () => {
+gulp.task("webpack-dev-server-gallery", () =>
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
     contentBase: paths.gallery_output_root,
     port: 8100,
-  });
-});
-
-gulp.task(
-  "webpack-prod-gallery",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        createGalleryConfig({
-          isProdBuild: true,
-          latestBuild: true,
-        }),
-
-        handler(resolve)
-      )
-    )
+    listenHost: "0.0.0.0",
+  })
+);
+
+gulp.task("webpack-prod-gallery", () =>
+  prodBuild(
+    createGalleryConfig({
+      isProdBuild: true,
+      latestBuild: true,
+    })
+  )
 );

build-scripts/paths.js

@@ -1,4 +1,5 @@
-var path = require("path");
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
 
 module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),
@@ -25,6 +26,7 @@ module.exports = {
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
+  gallery_build: path.resolve(__dirname, "../gallery/build"),
   gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
   gallery_output_latest: path.resolve(
     __dirname,
@@ -34,6 +36,7 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
   hassio_output_latest: path.resolve(
     __dirname,
     "../hassio/build/frontend_latest"

build-scripts/removedIcons.json

@@ -1,267 +1 @@
-[
-  {
-    "path": "M17.5,15.61C17.33,15.37 9.53,5.4 9.27,5.08C9,4.75 9.08,4.65 9.13,4.59C9.22,4.5 9.36,4.5 9.93,4.5C10.26,4.5 13.59,4.5 13.94,4.47C14.66,4.47 14.78,4.53 14.85,4.56C14.93,4.58 15.13,4.75 15.26,4.92C15.33,5 22.32,13.36 22.39,13.45C22.46,13.54 22.59,13.69 22.67,13.84C22.76,14 22.77,14.18 22.64,14.25C22.56,14.3 18.7,15.89 18.59,15.93C18.5,16 18.27,16.06 18.11,16.04C18,16 17.77,15.92 17.5,15.61M21.47,15.42L21.75,15.47C21.75,15.47 22.68,15.65 22.77,15.67C22.87,15.69 22.96,15.76 22.95,15.79C22.94,15.87 22.9,15.91 22.83,15.95C22.77,16 18.58,18.58 18.5,18.62C18.43,18.66 18.33,18.72 18.11,18.75C17.7,18.83 16.91,18.61 16.66,18.56C16.41,18.5 6.15,16.23 6.06,16.2C5.97,16.17 5.91,16.16 5.9,16.08C5.89,15.94 6.11,15.88 6.28,15.81C6.46,15.75 11.28,14 11.45,13.93C11.62,13.86 11.84,13.84 11.95,13.83C12.06,13.82 12.73,13.93 13.03,13.97C13.34,14 14.2,14.15 14.2,14.15L16.16,16.7C16.5,17.09 16.72,17.25 17,17.28C17.15,17.29 17.31,17.25 17.42,17.2C17.5,17.16 21.47,15.42 21.47,15.42M10.25,9.18L11.96,11.37L12,11.45V11.5C11.96,11.54 8.93,14.32 8.91,14.35L5.72,15.5C5.72,15.5 5.63,15.55 5.58,15.58C5.53,15.61 5.47,15.67 5.5,15.82C5.5,15.87 5.5,16.59 5.5,16.79L1.56,18.04C1.37,18.1 1,18.23 0.95,18.19C0.88,18.14 0.97,18.03 1,17.97C1.06,17.91 9.08,10 9.39,9.7C9.84,9.24 10.25,9.18 10.25,9.18",
-    "name": "accusoft"
-  },
-  {
-    "path": "M4.94,11.12C5.23,11.12 5.5,11.16 5.76,11.23C5.77,9.09 7.5,7.35 9.65,7.35C11.27,7.35 12.67,8.35 13.24,9.77C13.83,9 14.74,8.53 15.76,8.53C17.5,8.53 18.94,9.95 18.94,11.71C18.94,11.95 18.91,12.2 18.86,12.43C19.1,12.34 19.37,12.29 19.65,12.29C20.95,12.29 22,13.35 22,14.65C22,15.95 20.95,17 19.65,17C18.35,17 6.36,17 4.94,17C3.32,17 2,15.68 2,14.06C2,12.43 3.32,11.12 4.94,11.12Z",
-    "name": "amazon-drive"
-  },
-  {
-    "path": "M8,11.5A1.25,1.25 0 0,0 6.75,12.75A1.25,1.25 0 0,0 8,14A1.25,1.25 0 0,0 9.25,12.75A1.25,1.25 0 0,0 8,11.5M16,11.5A1.25,1.25 0 0,0 14.75,12.75A1.25,1.25 0 0,0 16,14A1.25,1.25 0 0,0 17.25,12.75A1.25,1.25 0 0,0 16,11.5M12,7C13.5,7 14.9,7.33 16.18,7.91L18.34,5.75C18.73,5.36 19.36,5.36 19.75,5.75C20.14,6.14 20.14,6.77 19.75,7.16L17.95,8.96C20.41,10.79 22,13.71 22,17H2C2,13.71 3.59,10.79 6.05,8.96L4.25,7.16C3.86,6.77 3.86,6.14 4.25,5.75C4.64,5.36 5.27,5.36 5.66,5.75L7.82,7.91C9.1,7.33 10.5,7 12,7Z",
-    "name": "android-head"
-  },
-  {
-    "path": "M2,16.25C2,16.25 4,3.75 12,3.75C20,3.75 22,16.25 22,16.25C22,16.25 20,20.25 12,20.25C4,20.25 2,16.25 2,16.25M3.35,15.65C3.35,15.65 4.3,19 12,19C17,19 20,17.8 20.65,15.85C21.3,13.9 15.65,7.6 14.65,7.6C13.65,7.6 11.2,12 10.45,12C8.45,12 8.9,10 7.15,10C5.4,10 3.35,15.65 3.35,15.65Z",
-    "name": "basecamp"
-  },
-  {
-    "path": "M7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7C10.87,7 9.84,7.37 9,8V2.46C9.95,2.16 10.95,2 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,8.3 4,5.07 7,3.34V12M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z",
-    "name": "beats"
-  },
-  {
-    "path": "M19.58,12.27C19.54,11.65 19.33,11.18 18.96,10.86C18.59,10.54 18.13,10.38 17.58,10.38C17,10.38 16.5,10.55 16.19,10.89C15.86,11.23 15.65,11.69 15.57,12.27M21.92,12.04C22,12.45 22,13.04 22,13.81H15.5C15.55,14.71 15.85,15.33 16.44,15.69C16.79,15.92 17.22,16.03 17.73,16.03C18.26,16.03 18.69,15.89 19,15.62C19.2,15.47 19.36,15.27 19.5,15H21.88C21.82,15.54 21.53,16.07 21,16.62C20.22,17.5 19.1,17.92 17.66,17.92C16.47,17.92 15.43,17.55 14.5,16.82C13.62,16.09 13.16,14.9 13.16,13.25C13.16,11.7 13.57,10.5 14.39,9.7C15.21,8.87 16.27,8.46 17.58,8.46C18.35,8.46 19.05,8.6 19.67,8.88C20.29,9.16 20.81,9.59 21.21,10.2C21.58,10.73 21.81,11.34 21.92,12.04M9.58,14.07C9.58,13.42 9.31,12.97 8.79,12.73C8.5,12.6 8.08,12.53 7.54,12.5H4.87V15.84H7.5C8.04,15.84 8.46,15.77 8.76,15.62C9.31,15.35 9.58,14.83 9.58,14.07M4.87,10.46H7.5C8.04,10.46 8.5,10.36 8.82,10.15C9.16,9.95 9.32,9.58 9.32,9.06C9.32,8.5 9.1,8.1 8.66,7.91C8.27,7.78 7.78,7.72 7.19,7.72H4.87M11.72,12.42C12.04,12.92 12.2,13.53 12.2,14.24C12.2,15 12,15.64 11.65,16.23C11.41,16.62 11.12,16.94 10.77,17.21C10.37,17.5 9.9,17.72 9.36,17.83C8.82,17.94 8.24,18 7.61,18H2V5.55H8C9.53,5.58 10.6,6 11.23,6.88C11.61,7.41 11.8,8.04 11.8,8.78C11.8,9.54 11.61,10.15 11.23,10.61C11,10.87 10.7,11.11 10.28,11.32C10.91,11.55 11.39,11.92 11.72,12.42M20.06,7.32H15.05V6.07H20.06V7.32Z",
-    "name": "behance"
-  },
-  {
-    "path": "M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z",
-    "name": "blackberry"
-  },
-  {
-    "path": "M12,3A9,9 0 0,1 21,12A9,9 0 0,1 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M5.94,8.5C4,11.85 5.15,16.13 8.5,18.06C11.85,20 18.85,7.87 15.5,5.94C12.15,4 7.87,5.15 5.94,8.5Z",
-    "name": "cisco-webex"
-  },
-  {
-    "path": "M11.9,14.5H10.8V9.5H11.9C13.5,9.5 14.6,10.4 14.6,12C14.6,13.6 13.5,14.5 11.9,14.5M11.9,7H8.1V17H11.8C15.3,17 17.4,14.9 17.4,12V12C17.4,9.1 15.4,7 11.9,7M12,20C10.1,20 8.3,19.3 6.9,18.1L6.2,17.5L4.5,17.7L5.2,16.1L4.9,15.3C4.4,14.2 4.2,13.1 4.2,11.9C4.2,7.5 7.8,3.9 12.1,3.9C16.4,3.9 19.9,7.6 19.9,12C19.9,16.4 16.3,20 12,20M12,2C6.5,2 2.1,6.5 2.1,12C2.1,13.5 2.4,14.9 3,16.2L1.4,20.3L5.7,19.7C7.4,21.2 9.7,22.1 12.1,22.1C17.6,22.1 22,17.6 22,12.1C22,6.6 17.5,2 12,2Z",
-    "name": "disqus-outline"
-  },
-  {
-    "path": "M16.42,18.42C16,16.5 15.5,14.73 15,13.17C15.5,13.1 16,13.06 16.58,13.06H16.6V13.06H16.6C17.53,13.06 18.55,13.18 19.66,13.43C19.28,15.5 18.08,17.27 16.42,18.42M12,19.8C10.26,19.8 8.66,19.23 7.36,18.26C7.64,17.81 8.23,16.94 9.18,16.04C10.14,15.11 11.5,14.15 13.23,13.58C13.82,15.25 14.36,17.15 14.77,19.29C13.91,19.62 13,19.8 12,19.8M4.2,12C4.2,11.96 4.2,11.93 4.2,11.89C4.42,11.9 4.71,11.9 5.05,11.9H5.06C6.62,11.89 9.36,11.76 12.14,10.89C12.29,11.22 12.44,11.56 12.59,11.92C10.73,12.54 9.27,13.53 8.19,14.5C7.16,15.46 6.45,16.39 6.04,17C4.9,15.66 4.2,13.91 4.2,12M8.55,5C9.1,5.65 10.18,7.06 11.34,9.25C9,9.96 6.61,10.12 5.18,10.12C5.14,10.12 5.1,10.12 5.06,10.12H5.05C4.81,10.12 4.6,10.12 4.43,10.11C5,7.87 6.5,6 8.55,5M12,4.2C13.84,4.2 15.53,4.84 16.86,5.91C15.84,7.14 14.5,8 13.03,8.65C12,6.67 11,5.25 10.34,4.38C10.88,4.27 11.43,4.2 12,4.2M18.13,7.18C19.1,8.42 19.71,9.96 19.79,11.63C18.66,11.39 17.6,11.28 16.6,11.28V11.28H16.59C15.79,11.28 15.04,11.35 14.33,11.47C14.16,11.05 14,10.65 13.81,10.26C15.39,9.57 16.9,8.58 18.13,7.18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
-    "name": "dribbble"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15.09,16.5C14.81,15.14 14.47,13.91 14.08,12.82L15.2,12.74H15.22V12.74C15.87,12.74 16.59,12.82 17.36,13C17.09,14.44 16.26,15.69 15.09,16.5M12,17.46C10.79,17.46 9.66,17.06 8.76,16.39C8.95,16.07 9.36,15.46 10,14.83C10.7,14.18 11.64,13.5 12.86,13.11C13.28,14.27 13.65,15.6 13.94,17.1C13.33,17.33 12.68,17.46 12,17.46M6.54,12V11.92L7.14,11.93V11.93C8.24,11.93 10.15,11.83 12.1,11.22L12.41,11.94C11.11,12.38 10.09,13.07 9.34,13.76C8.61,14.42 8.12,15.08 7.83,15.5C7.03,14.56 6.54,13.34 6.54,12M9.59,7.11C9.97,7.56 10.73,8.54 11.54,10.08C9.89,10.57 8.23,10.68 7.22,10.68H7.14V10.68H6.7C7.09,9.11 8.17,7.81 9.59,7.11M12,6.54C13.29,6.54 14.47,7 15.41,7.74C14.69,8.6 13.74,9.22 12.72,9.66C12,8.27 11.31,7.28 10.84,6.67C11.21,6.59 11.6,6.54 12,6.54M16.29,8.63C16.97,9.5 17.4,10.57 17.45,11.74C16.66,11.58 15.92,11.5 15.22,11.5V11.5C14.66,11.5 14.13,11.54 13.63,11.63L13.27,10.78C14.37,10.3 15.43,9.61 16.29,8.63M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z",
-    "name": "dribbble-box"
-  },
-  {
-    "path": "M6.72,20.78C8.23,20.71 10.07,20.78 11.87,20.78C13.72,20.78 15.62,20.66 17.12,20.78C17.72,20.83 18.28,21.19 18.77,20.87C19.16,20.38 18.87,19.71 18.96,19.05C19.12,17.78 20.28,16.27 18.59,15.95C17.87,16.61 18.35,17.23 17.95,18.05C17.45,19.03 15.68,19.37 14,19.5C12.54,19.62 10,19.76 9.5,18.77C9.04,17.94 9.29,16.65 9.29,15.58C9.29,14.38 9.16,13.22 9.5,12.3C11.32,12.43 13.7,11.69 15,12.5C15.87,13 15.37,14.06 16.38,14.4C17.07,14.21 16.7,13.32 16.66,12.5C16.63,11.94 16.63,11.19 16.66,10.57C16.69,9.73 17,8.76 16.1,8.74C15.39,9.3 15.93,10.23 15.18,10.75C14.95,10.92 14.43,11 14.08,11C12.7,11.17 10.54,11.05 9.38,10.84C9.23,9.16 9.24,6.87 9.38,5.19C10,4.57 11.45,4.54 12.42,4.55C14.13,4.55 16.79,4.7 17.3,5.55C17.58,6 17.36,7 17.85,7.1C18.85,7.33 18.36,5.55 18.41,4.73C18.44,4.11 18.71,3.72 18.59,3.27C18.27,2.83 17.79,3.05 17.5,3.09C14.35,3.5 9.6,3.27 6.26,3.27C5.86,3.27 5.16,3.07 4.88,3.54C4.68,4.6 6.12,4.16 6.62,4.73C6.79,4.91 7.03,5.73 7.08,6.28C7.23,7.74 7.08,9.97 7.08,12.12C7.08,14.38 7.26,16.67 7.08,18.05C7,18.53 6.73,19.3 6.62,19.41C6,20.04 4.34,19.35 4.5,20.69C5.09,21.08 5.93,20.82 6.72,20.78Z",
-    "name": "etsy"
-  },
-  {
-    "path": "M12,17.5C10.15,17.5 8.42,16.56 7.41,15L17.41,12.75L22.08,11.75C22.05,10.32 21.71,8.92 21.08,7.64C18.66,2.61 12.62,0.5 7.58,2.92C2.55,5.34 0.44,11.38 2.86,16.41C5.29,21.44 11.33,23.56 16.36,21.14C18.5,20.09 20.25,18.31 21.22,16.11L16.61,15C15.6,16.57 13.86,17.5 12,17.5M12,6.5C13.76,6.5 15.41,7.34 16.44,8.77L6.57,11.19C6.96,8.5 9.28,6.5 12,6.5Z",
-    "name": "eventbrite"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z",
-    "name": "facebook-box"
-  },
-  {
-    "path": "M21,12A9,9 0 0,1 12,21H4.5L9.74,15.76L11.16,17.17L9.33,19H12A7,7 0 0,0 19,12V7L21,5V12M3,12A9,9 0 0,1 12,3H19.5L14.26,8.24L12.84,6.83L14.67,5H12A7,7 0 0,0 5,12V17L3,19V12Z",
-    "name": "flattr"
-  },
-  {
-    "path": "M11,12C11,14.5 9,16.5 6.5,16.5C4,16.5 2,14.5 2,12C2,9.5 4,7.5 6.5,7.5C9,7.5 11,9.5 11,12M17.5,7.5C15,7.5 13,9.5 13,12C13,14.5 15,16.5 17.5,16.5C20,16.5 22,14.5 22,12C22,9.5 20,7.5 17.5,7.5Z",
-    "name": "flickr"
-  },
-  {
-    "path": "M17,5L16.57,7.5C16.5,7.73 16.2,8 15.91,8C15.61,8 12,8 12,8C11.53,8 10.95,8.32 10.95,8.79V9.2C10.95,9.67 11.53,10 12,10C12,10 14.95,10 15.28,10C15.61,10 15.93,10.36 15.86,10.71C15.79,11.07 14.94,13.28 14.9,13.5C14.86,13.67 14.64,14 14.25,14C13.92,14 11.37,14 11.37,14C10.85,14 10.69,14.07 10.34,14.5C10,14.94 7.27,18.1 7.27,18.1C7.24,18.13 7,18.04 7,18V5C7,4.7 7.61,4 8,4C8,4 16.17,4 16.5,4C16.82,4 17.08,4.61 17,5M17,14.45C17.11,13.97 18.78,6.72 19.22,4.55M17.58,2C17.58,2 8.38,2 6.91,2C5.43,2 5,3.11 5,3.8C5,4.5 5,20.76 5,20.76C5,21.54 5.42,21.84 5.66,21.93C5.9,22.03 6.55,22.11 6.94,21.66C6.94,21.66 11.65,16.22 11.74,16.13C11.87,16 11.87,16 12,16C12.26,16 14.2,16 15.26,16C16.63,16 16.85,15 17,14.45C17.11,13.97 18.78,6.72 19.22,4.55C19.56,2.89 19.14,2 17.58,2Z",
-    "name": "foursquare"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H14.56C14.24,20.93 14.23,20.32 14.23,20.11L14.24,17.64C14.24,16.8 13.95,16.25 13.63,15.97C15.64,15.75 17.74,15 17.74,11.53C17.74,10.55 17.39,9.74 16.82,9.11C16.91,8.89 17.22,7.97 16.73,6.73C16.73,6.73 15.97,6.5 14.25,7.66C13.53,7.46 12.77,7.36 12,7.35C11.24,7.36 10.46,7.46 9.75,7.66C8.03,6.5 7.27,6.73 7.27,6.73C6.78,7.97 7.09,8.89 7.18,9.11C6.61,9.74 6.26,10.55 6.26,11.53C6.26,15 8.36,15.75 10.36,16C10.1,16.2 9.87,16.6 9.79,17.18C9.27,17.41 7.97,17.81 7.17,16.43C7.17,16.43 6.69,15.57 5.79,15.5C5.79,15.5 4.91,15.5 5.73,16.05C5.73,16.05 6.32,16.33 6.73,17.37C6.73,17.37 7.25,19.12 9.76,18.58L9.77,20.11C9.77,20.32 9.75,20.93 9.43,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
-    "name": "github-box"
-  },
-  {
-    "path": "M20.38,8.53C20.54,8.13 21.06,6.54 20.21,4.39C20.21,4.39 18.9,4 15.91,6C14.66,5.67 13.33,5.62 12,5.62C10.68,5.62 9.34,5.67 8.09,6C5.1,3.97 3.79,4.39 3.79,4.39C2.94,6.54 3.46,8.13 3.63,8.53C2.61,9.62 2,11 2,12.72C2,19.16 6.16,20.61 12,20.61C17.79,20.61 22,19.16 22,12.72C22,11 21.39,9.62 20.38,8.53M12,19.38C7.88,19.38 4.53,19.19 4.53,15.19C4.53,14.24 5,13.34 5.8,12.61C7.14,11.38 9.43,12.03 12,12.03C14.59,12.03 16.85,11.38 18.2,12.61C19,13.34 19.5,14.23 19.5,15.19C19.5,19.18 16.13,19.38 12,19.38M8.86,13.12C8.04,13.12 7.36,14.12 7.36,15.34C7.36,16.57 8.04,17.58 8.86,17.58C9.69,17.58 10.36,16.58 10.36,15.34C10.36,14.11 9.69,13.12 8.86,13.12M15.14,13.12C14.31,13.12 13.64,14.11 13.64,15.34C13.64,16.58 14.31,17.58 15.14,17.58C15.96,17.58 16.64,16.58 16.64,15.34C16.64,14.11 16,13.12 15.14,13.12Z",
-    "name": "github-face"
-  },
-  {
-    "path": "M8,2A3,3 0 0,0 5,5V16.5H8V5H19A3,3 0 0,0 16,2H8M16,7.5V19H5A3,3 0 0,0 8,22H16A3,3 0 0,0 19,19V7.5H16Z",
-    "name": "glassdoor"
-  },
-  {
-    "path": "M2,22L8.5,2H15.4L9.2,20C9.2,20 8.6,22 7,22C5.9,22 2,22 2,22M16.4,5L13,15L15,20.7C15,20.7 15.4,22 17,22C18.3,22 22,22 22,22L16.4,5Z",
-    "name": "google-adwords"
-  },
-  {
-    "path": "M19,3H13V8L17,7L16,11H21V5C21,3.89 20.1,3 19,3M17,17L13,16V21H19A2,2 0 0,0 21,19V13H16M8,13H3V19A2,2 0 0,0 5,21H11V16L7,17M3,5V11H8L7,7L11,8V3H5C3.89,3 3,3.89 3,5Z",
-    "name": "google-pages"
-  },
-  {
-    "path": "M12,1.5A9,9 0 0,1 21,10.5C21,13.11 19.89,15.47 18.11,17.11L17.05,16.05C18.55,14.68 19.5,12.7 19.5,10.5A7.5,7.5 0 0,0 12,3A7.5,7.5 0 0,0 4.5,10.5C4.5,12.7 5.45,14.68 6.95,16.05L5.89,17.11C4.11,15.47 3,13.11 3,10.5A9,9 0 0,1 12,1.5M12,4.5A6,6 0 0,1 18,10.5C18,12.28 17.22,13.89 16,15L14.92,13.92C15.89,13.1 16.5,11.87 16.5,10.5C16.5,8 14.5,6 12,6C9.5,6 7.5,8 7.5,10.5C7.5,11.87 8.11,13.1 9.08,13.92L8,15C6.78,13.89 6,12.28 6,10.5A6,6 0 0,1 12,4.5M8.11,17.65L11.29,14.46C11.68,14.07 12.32,14.07 12.71,14.46L15.89,17.65C16.28,18.04 16.28,18.67 15.89,19.06L12.71,22.24C12.32,22.63 11.68,22.63 11.29,22.24L8.11,19.06C7.72,18.67 7.72,18.04 8.11,17.65Z",
-    "name": "google-physical-web"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z",
-    "name": "google-plus-box"
-  },
-  {
-    "path": "M14,20.95H20V10.78L8,7.34V3.05H4V20.95H10V15.31H14V20.95Z",
-    "name": "houzz"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M13.5,18.71H18V11.09L9,8.5V5.29H6V18.71H10.5V14.5H13.5V18.71Z",
-    "name": "houzz-box"
-  },
-  {
-    "path": "M10,5A1,1 0 0,0 9,4H8V2H16V4H15A1,1 0 0,0 14,5V19A1,1 0 0,0 15,20H16V22H8V20H9A1,1 0 0,0 10,19V5Z",
-    "name": "instapaper"
-  },
-  {
-    "path": "M7.85,17.07C7.03,17.17 3.5,17.67 4.06,20.26C4.69,23.3 9.87,22.59 9.83,19C9.81,16.57 9.83,9.2 9.83,9.2C9.83,9.2 9.76,8.53 10.43,8.39L18.19,6.79C18.19,6.79 18.83,6.65 18.83,7.29C18.83,7.89 18.83,14.2 18.83,14.2C18.83,14.2 18.9,14.83 18.12,15C17.34,15.12 13.91,15.4 14.19,18C14.5,21.07 20,20.65 20,17.07V2.61C20,2.61 20.04,1.62 18.9,1.87L9.5,3.78C9.5,3.78 8.66,3.96 8.66,4.77C8.66,5.5 8.66,16.11 8.66,16.11C8.66,16.11 8.66,16.96 7.85,17.07Z",
-    "name": "itunes"
-  },
-  {
-    "path": "M2,5.69C8.92,1.07 11.1,7 11.28,10.27C11.46,13.53 8.29,17.64 4.31,14.92V20.3L2,18.77V5.69M4.22,7.4V12.78C7.84,14.95 9.08,13.17 9.08,10.09C9.08,5.74 6.57,5.59 4.22,7.4M15.08,4.15C15.08,4.15 14.9,7.64 15.08,11.07C15.44,14.5 19.69,11.84 19.69,11.84V4.92L22,5.2V14.44C22,20.6 15.85,20.3 15.85,20.3L15.08,18C20.46,18 19.78,14.43 19.78,14.43C13.27,16.97 12.77,12.61 12.77,12.61V5.69L15.08,4.15Z",
-    "name": "language-python-text"
-  },
-  {
-    "path": "M18,17.93C15.92,17.92 14.81,16.9 14.04,15.09L13.82,14.6L11.92,10.23C11.29,8.69 9.72,7.64 7.96,7.64C5.57,7.64 3.63,9.59 3.63,12C3.63,14.41 5.57,16.36 7.96,16.36C9.62,16.36 11.08,15.41 11.8,14L12.57,15.81C11.5,17.15 9.82,18 7.96,18C4.67,18 2,15.32 2,12C2,8.69 4.67,6 7.96,6C10.44,6 12.45,7.34 13.47,9.7C13.54,9.89 14.54,12.24 15.42,14.24C15.96,15.5 16.42,16.31 17.91,16.36C19.38,16.41 20.39,15.5 20.39,14.37C20.39,13.26 19.62,13 18.32,12.56C16,11.79 14.79,11 14.79,9.15C14.79,7.33 16,6.12 18,6.12C19.31,6.12 20.24,6.7 20.89,7.86L19.62,8.5C19.14,7.84 18.61,7.57 17.94,7.57C17,7.57 16.33,8.23 16.33,9.1C16.33,10.34 17.43,10.53 18.97,11.03C21.04,11.71 22,12.5 22,14.42C22,16.45 20.27,17.93 18,17.93Z",
-    "name": "lastfm"
-  },
-  {
-    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z",
-    "name": "linkedin-box"
-  },
-  {
-    "path": "M9.56,12.5C9.56,12.6 9.5,12.72 9.4,12.79C9.2,12.97 8.89,12.94 8.71,12.74C8.63,12.65 8.59,12.53 8.59,12.41V8.5H5.66V13.39A2.44,2.44 0 0,0 8.1,15.83C8.68,15.83 9.24,15.62 9.68,15.24C9.64,15.6 9.43,15.93 9.11,16.11C8.75,16.31 8.35,16.42 7.94,16.41C7.46,16.41 7,16.3 6.56,16.09L6.39,16V18.6C7.04,18.86 7.74,19 8.44,19C9.47,19 10.46,18.66 11.25,18C12.08,17.25 12.54,16.18 12.5,15.06V8.5H9.56V12.5M4.93,13.39V5.59H2V12.9C1.84,14.35 2.88,15.65 4.33,15.81C4.41,15.82 4.5,15.83 4.56,15.83V15.83C4.93,15.83 5.29,15.74 5.63,15.59L5.75,15.5L5.65,15.41C5.17,14.85 4.91,14.13 4.93,13.39M22,11.39V8.5H21C20.59,6.38 18.53,5 16.41,5.41C16.17,5.45 15.94,5.5 15.71,5.61C14.28,6.24 13.33,7.62 13.26,9.18V15.83H13.39C14.95,15.76 16.19,14.47 16.19,12.9H17.41V10H16.15V9.17C16.15,8.86 16.32,8.57 16.59,8.41C17.06,8.13 17.68,8.28 17.96,8.76C18.05,8.91 18.09,9.07 18.1,9.24V11.93C18.07,14.05 19.75,15.79 21.87,15.83H22V12.9H22A1,1 0 0,1 21,11.9V11.41L22,11.39Z",
-    "name": "lyft"
-  },
-  {
-    "path": "M15.45,11.91C15.34,9.7 13.7,8.37 11.72,8.37H11.64C9.35,8.37 8.09,10.17 8.09,12.21C8.09,14.5 9.62,15.95 11.63,15.95C13.88,15.95 15.35,14.3 15.46,12.36M11.65,6.39C13.18,6.39 14.62,7.07 15.67,8.13V8.13C15.67,7.62 16,7.24 16.5,7.24H16.61C17.35,7.24 17.5,7.94 17.5,8.16V16.06C17.46,16.58 18.04,16.84 18.37,16.5C19.64,15.21 21.15,9.81 17.58,6.69C14.25,3.77 9.78,4.25 7.4,5.89C4.88,7.63 3.26,11.5 4.83,15.11C6.54,19.06 11.44,20.24 14.35,19.06C15.83,18.47 16.5,20.46 15,21.11C12.66,22.1 6.23,22 3.22,16.79C1.19,13.27 1.29,7.08 6.68,3.87C10.81,1.42 16.24,2.1 19.5,5.5C22.95,9.1 22.75,15.8 19.4,18.41C17.89,19.59 15.64,18.44 15.66,16.71L15.64,16.15C14.59,17.2 13.18,17.81 11.65,17.81C8.63,17.81 6,15.15 6,12.13C6,9.08 8.63,6.39 11.65,6.39Z",
-    "name": "mail-ru"
-  },
-  {
-    "path": "M20.93,14C20.66,15.4 18.5,16.95 15.97,17.25C14.66,17.4 13.38,17.55 12,17.5C9.76,17.38 8,16.95 8,16.95L8.03,17.57C8.32,19.78 10.22,19.92 12.03,20C13.85,20.04 15.47,19.53 15.47,19.53L15.55,21.17C15.55,21.17 14.27,21.86 12,22C10.75,22.05 9.2,21.95 7.39,21.47C3.47,20.43 2.79,16.25 2.69,12L2.68,8.57C2.68,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.36,11.77 20.93,14M8.33,10.32C8.33,9.54 7.7,8.91 6.93,8.91C6.15,8.91 5.5,9.54 5.5,10.32C5.5,11.09 6.15,11.72 6.93,11.72A1.4,1.4 0 0,0 8.33,10.32M13.41,10.32A1.41,1.41 0 0,0 12,8.91A1.41,1.41 0 0,0 10.59,10.32C10.59,11.09 11.22,11.72 12,11.72C12.78,11.72 13.41,11.09 13.41,10.32M18.5,10.32C18.5,9.54 17.85,8.91 17.07,8.91C16.3,8.91 15.67,9.54 15.67,10.32A1.4,1.4 0 0,0 17.07,11.72C17.85,11.72 18.5,11.09 18.5,10.32Z",
-    "name": "mastodon-variant"
-  },
-  {
-    "path": "M4.37,7.3C4.4,7.05 4.3,6.81 4.12,6.65L2.25,4.4V4.06H8.05L12.53,13.89L16.47,4.06H22V4.4L20.4,5.93C20.27,6.03 20.2,6.21 20.23,6.38V17.62C20.2,17.79 20.27,17.97 20.4,18.07L21.96,19.6V19.94H14.12V19.6L15.73,18.03C15.89,17.88 15.89,17.83 15.89,17.59V8.5L11.4,19.9H10.8L5.57,8.5V16.14C5.5,16.46 5.63,16.78 5.86,17L7.96,19.57V19.9H2V19.57L4.1,17C4.33,16.78 4.43,16.46 4.37,16.14V7.3Z",
-    "name": "medium"
-  },
-  {
-    "path": "M19.61,14.86C19.61,16.68 18.3,18.25 16.5,18.55C16.29,18.59 16.07,18.62 15.84,18.61C15.76,18.61 15.73,18.64 15.71,18.71C15.35,19.74 14.64,20.35 13.57,20.5C12.86,20.6 12.22,20.41 11.65,19.97C11.57,19.9 11.5,19.9 11.44,19.96C10.78,20.43 10.04,20.64 9.23,20.59C7.66,20.5 6.33,19.29 6.08,17.74C6.06,17.63 6.04,17.5 6.04,17.41C6.04,17.32 6,17.29 5.92,17.27C5.44,17.18 5,17 4.63,16.68C3.92,16.13 3.5,15.41 3.4,14.5C3.29,13.5 3.61,12.62 4.32,11.89C4.38,11.83 4.38,11.79 4.34,11.72C4.07,11.24 3.94,10.72 3.96,10.17C4,8.79 4.97,7.65 6.31,7.37C6.46,7.33 6.54,7.27 6.61,7.13C7.27,5.71 8.37,4.85 9.91,4.56C11,4.36 12,4.58 12.94,5.13C13,5.18 13.08,5.18 13.17,5.16C14.67,4.72 16,5.04 17.12,6.11C17.78,6.74 18.15,7.54 18.26,8.46C18.28,8.66 18.29,8.86 18.28,9.06C18.27,9.14 18.29,9.17 18.37,9.19C19.04,9.44 19.5,9.91 19.71,10.6C19.96,11.45 19.75,12.21 19.11,12.83C19.05,12.89 19.07,12.92 19.1,12.97C19.44,13.56 19.61,14.18 19.61,14.86M12.93,14.57C12.93,15.34 13.43,16 14.14,16.26C14.5,16.37 14.85,16.43 15.22,16.45C15.5,16.46 15.75,16.44 16,16.32C16.19,16.22 16.28,16.06 16.27,15.85C16.26,15.64 16.16,15.5 15.96,15.4C15.89,15.37 15.82,15.34 15.74,15.33C15.5,15.29 15.3,15.26 15.07,15.21C14.71,15.14 14.55,14.95 14.55,14.57C14.54,14.24 14.63,13.93 14.73,13.63C14.92,13.07 15.17,12.53 15.41,12C15.64,11.47 15.88,10.95 16.04,10.4C16.13,10.1 16.18,9.8 16.09,9.5C15.97,9 15.69,8.7 15.2,8.61C14.75,8.5 14.3,8.5 13.9,8.78C13.76,8.87 13.63,8.85 13.5,8.74C13.43,8.67 13.34,8.58 13.26,8.5C12.84,8.12 12.3,8.1 11.85,8.45C11.67,8.59 11.5,8.76 11.33,8.89C11.16,9 11,9.03 10.79,8.92C10.6,8.83 10.42,8.74 10.23,8.65C10.03,8.57 9.85,8.46 9.63,8.44C8.95,8.38 8.24,8.79 7.94,9.41C7.8,9.68 7.69,9.96 7.59,10.25C7.11,11.57 6.72,12.91 6.32,14.26C6.14,14.86 6.35,15.45 6.86,15.77C7.26,16 7.69,16.09 8.14,15.95C8.5,15.84 8.71,15.55 8.85,15.22C9.31,14.13 9.73,13 10.17,11.91C10.29,11.61 10.41,11.3 10.54,11C10.67,10.7 11.04,10.6 11.26,10.8C11.4,10.92 11.44,11.09 11.42,11.26C11.41,11.45 11.34,11.62 11.27,11.79C11,12.5 10.69,13.24 10.4,13.97C10.34,14.11 10.28,14.26 10.25,14.42C10.21,14.69 10.31,14.93 10.54,15C10.76,15.12 11,15.14 11.23,15.05C11.5,14.95 11.67,14.74 11.79,14.5C12.22,13.65 12.65,12.8 13.08,11.95C13.28,11.56 13.5,11.17 13.68,10.78C13.76,10.64 13.85,10.5 14,10.41C14.12,10.33 14.25,10.33 14.38,10.4C14.5,10.47 14.5,10.6 14.5,10.73C14.5,10.8 14.5,10.87 14.47,10.93C14.41,11.07 14.36,11.2 14.3,11.33C13.94,12.09 13.57,12.84 13.22,13.59C13.07,13.91 12.91,14.23 12.93,14.57M17.96,20.12C17.96,19.62 17.54,19.2 17.04,19.2C16.5,19.2 16.1,19.61 16.1,20.12A0.93,0.93 0 0,0 17.03,21.05A0.93,0.93 0 0,0 17.96,20.12M2.38,12.46C2.86,12.46 3.27,12.05 3.27,11.57C3.27,11.09 2.87,10.69 2.39,10.69C1.89,10.69 1.5,11.08 1.5,11.57C1.5,12.06 1.89,12.46 2.38,12.46M13.26,2.55C12.77,2.55 12.37,2.94 12.37,3.42C12.37,3.91 12.77,4.3 13.25,4.3C13.74,4.3 14.13,3.92 14.13,3.43C14.13,2.95 13.74,2.55 13.26,2.55M20.45,8.03C20.45,7.63 20.11,7.29 19.71,7.29C19.3,7.28 18.95,7.63 18.95,8.04C18.95,8.45 19.28,8.78 19.7,8.78C20.12,8.78 20.46,8.45 20.45,8.03M5.04,5.89C5.04,6.27 5.34,6.56 5.71,6.56C6.09,6.56 6.39,6.26 6.38,5.88C6.38,5.5 6.09,5.22 5.72,5.22C5.33,5.22 5.04,5.5 5.04,5.89M12.06,21.44C12.06,21.12 11.81,20.86 11.5,20.86C11.16,20.86 10.91,21.11 10.91,21.44C10.91,21.75 11.16,22 11.5,22C11.8,22 12.06,21.75 12.06,21.44M21,12.5C20.71,12.5 20.45,12.78 20.45,13.08A0.55,0.55 0 0,0 21,13.63C21.33,13.63 21.57,13.4 21.57,13.08C21.57,12.77 21.33,12.5 21,12.5M7.62,2C7.35,2 7.14,2.2 7.14,2.47C7.14,2.73 7.35,2.94 7.62,2.94A0.47,0.47 0 0,0 8.09,2.47C8.09,2.2 7.89,2 7.62,2M22.08,10C21.86,10 21.67,10.17 21.66,10.4C21.66,10.63 21.85,10.82 22.08,10.82C22.32,10.82 22.5,10.64 22.5,10.41C22.5,10.17 22.32,10 22.08,10M5.5,18.26C5.5,18.04 5.29,17.85 5.06,17.84C4.84,17.84 4.65,18.03 4.65,18.27C4.65,18.5 4.84,18.68 5.07,18.68C5.3,18.68 5.5,18.5 5.5,18.26Z",
-    "name": "meetup"
-  },
-  {
-    "path": "M21.11,18.5C20.97,18.5 20.83,18.44 20.71,18.36C20.37,18.13 20.28,17.68 20.5,17.34C21.18,16.34 21.54,15.16 21.54,13.93C21.54,12.71 21.18,11.53 20.5,10.5C20.28,10.18 20.37,9.73 20.71,9.5C21.04,9.28 21.5,9.37 21.72,9.7C22.56,10.95 23,12.41 23,13.93C23,15.45 22.56,16.91 21.72,18.16C21.58,18.37 21.35,18.5 21.11,18.5M19,17.29C18.88,17.29 18.74,17.25 18.61,17.17C18.28,16.94 18.19,16.5 18.42,16.15C18.86,15.5 19.1,14.73 19.1,13.93C19.1,13.14 18.86,12.37 18.42,11.71C18.19,11.37 18.28,10.92 18.61,10.69C18.95,10.47 19.4,10.55 19.63,10.89C20.24,11.79 20.56,12.84 20.56,13.93C20.56,15 20.24,16.07 19.63,16.97C19.5,17.18 19.25,17.29 19,17.29M14.9,15.73C15.89,15.73 16.7,14.92 16.7,13.93C16.7,13.17 16.22,12.5 15.55,12.25C15.5,12.55 15.43,12.85 15.34,13.14C15.23,13.44 14.95,13.64 14.64,13.64C14.57,13.64 14.5,13.62 14.41,13.6C14.03,13.47 13.82,13.06 13.95,12.67C14.09,12.24 14.17,11.78 14.17,11.32C14.17,8.93 12.22,7 9.82,7C8.1,7 6.56,8 5.87,9.5C6.54,9.7 7.16,10.04 7.66,10.54C7.95,10.83 7.95,11.29 7.66,11.58C7.38,11.86 6.91,11.86 6.63,11.58C6.17,11.12 5.56,10.86 4.9,10.86C3.56,10.86 2.46,11.96 2.46,13.3C2.46,14.64 3.56,15.73 4.9,15.73H14.9M15.6,10.75C17.06,11.07 18.17,12.37 18.17,13.93C18.17,15.73 16.7,17.19 14.9,17.19H4.9C2.75,17.19 1,15.45 1,13.3C1,11.34 2.45,9.73 4.33,9.45C5.12,7.12 7.33,5.5 9.82,5.5C12.83,5.5 15.31,7.82 15.6,10.75Z",
-    "name": "mixcloud"
-  },
-  {
-    "path": "M5.68,3.96L11.41,11.65C11.55,11.84 11.55,12.1 11.41,12.29L5.65,20L5.5,20.18C4.76,21 3.47,21.07 2.64,20.31C1.85,19.59 1.79,18.37 2.43,17.5L6.56,11.97L2.46,6.47C1.83,5.62 1.88,4.39 2.67,3.67L2.82,3.54C3.73,2.87 5,3.05 5.68,3.96M18.32,3.96C19,3.05 20.27,2.87 21.18,3.54L21.33,3.67C22.12,4.39 22.17,5.61 21.54,6.47L17.44,11.97L21.57,17.5C22.21,18.36 22.15,19.59 21.36,20.31C20.53,21.07 19.24,21 18.5,20.18L18.35,20L12.59,12.29C12.45,12.1 12.45,11.84 12.59,11.65L18.32,3.96Z",
-    "name": "mixer"
-  },
-  {
-    "path": "M3.25,4.03L19.95,20.73L18.7,22L14.86,18.13C14.77,18.12 14.68,18.09 14.59,18.05C14.26,17.89 14.14,17.62 14.11,17.38L12.18,15.45C12.14,15.53 12.09,15.6 12.05,15.66C11.62,16.26 11.19,16.26 10.86,16.04C10.54,15.83 5.5,12 5.23,11.87C4.95,11.76 4.85,12.03 5.12,13.5C5.39,15 4.95,15.39 4.57,15.45C4.2,15.5 3.06,15.18 3,12.14C2.95,9.11 3.76,8.62 4.14,8.62C4.6,8.62 7.08,10.69 8.84,12.12L2,5.28L3.25,4.03M18.38,16.56C18.75,15.4 19.12,13.8 19.1,12.03V12C19.14,8.5 17.66,5.58 17.66,5.58C17.66,5.58 17.42,4.72 18.12,4.39C18.83,4.06 19.3,4.61 19.3,4.61C21.12,8.22 21,11.64 21,12C21,12.27 21.09,14.96 19.88,18.05L18.38,16.56M15.14,13.31C15.19,12.92 15.22,12.5 15.24,12.03V12C15.14,8.5 14.13,7.21 14.13,7.21C14.13,7.21 13.89,6.34 14.59,6C15.3,5.69 15.77,6.23 15.77,6.23C17.26,8.94 17.16,11.64 17.14,12C17.15,12.2 17.2,13.38 16.82,15L15.14,13.31M10.2,8.38C10.23,7.77 10.59,7.64 10.59,7.64C10.59,7.64 11.19,7.37 11.57,7.8C11.91,8.19 12.72,9.57 12.89,11.07L10.2,8.38Z",
-    "name": "nfc-off"
-  },
-  { "path": "M20,4H4V20H12V8H16V20H20V4", "name": "npm-variant" },
-  {
-    "path": "M3,3V21H21V3H3M6,6H18V18H15V9H12V18H6V6Z",
-    "name": "npm-variant-outline"
-  },
-  {
-    "path": "M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z",
-    "name": "paypal"
-  },
-  {
-    "path": "M12,7A2,2 0 0,1 10,9A2,2 0 0,1 8,7C7.37,7.84 7,8.87 7,10A5,5 0 0,0 12,15A5,5 0 0,0 17,10A5,5 0 0,0 12,5C11.57,5 11.16,5.05 10.77,5.15C11.5,5.45 12,6.17 12,7M12,2A8,8 0 0,1 20,10C20,11.05 19.8,12.04 19.43,12.96C17.89,17.38 13.63,22 12,22C10.37,22 6.11,17.38 4.57,12.96C4.2,12.04 4,11.05 4,10A8,8 0 0,1 12,2Z",
-    "name": "periscope"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
-    "name": "pinterest-box"
-  },
-  {
-    "path": "M21.9,4.26C21.64,3.55 20.96,3.07 20.2,3.07H20.19L18.46,3.07H3.81C3.07,3.07 2.39,3.54 2.12,4.24C2.04,4.45 2,4.66 2,4.88V10.92L2.07,12.12C2.36,14.85 3.78,17.23 5.97,18.9C6,18.93 6.05,18.96 6.09,19H6.11C7.29,19.86 8.6,20.44 10,20.73C10.68,20.86 11.35,20.93 12,20.93C12.63,20.93 13.25,20.87 13.85,20.76C13.93,20.75 14,20.73 14.07,20.72C14.09,20.71 14.11,20.7 14.14,20.69C15.5,20.4 16.76,19.83 17.89,19H17.91C17.95,18.96 18,18.93 18.03,18.9C20.22,17.23 21.64,14.85 21.93,12.12L22,10.92V4.88C22,4.68 21.97,4.47 21.9,4.26M17.67,10.55L12.96,15.06C12.7,15.32 12.35,15.44 12,15.44C11.67,15.44 11.33,15.32 11.06,15.06L6.36,10.55C5.81,10.03 5.79,9.16 6.32,8.61C6.84,8.06 7.71,8.05 8.26,8.57L12,12.17L15.77,8.57C16.31,8.05 17.18,8.07 17.71,8.61C18.23,9.16 18.21,10.03 17.67,10.55Z",
-    "name": "pocket"
-  },
-  {
-    "path": "M12,3A9,9 0 0,1 21,12C21,13.76 20.5,15.4 19.62,16.79L21,18.17V20A1,1 0 0,1 20,21H18.18L16.79,19.62C15.41,20.5 13.76,21 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17C12.65,17 13.26,16.88 13.83,16.65L10.95,13.77C10.17,13 10.17,11.72 10.95,10.94C11.73,10.16 13,10.16 13.78,10.94L16.66,13.82C16.88,13.26 17,12.64 17,12A5,5 0 0,0 12,7Z",
-    "name": "quicktime"
-  },
-  {
-    "path": "M18.61,5.89C18.6,5.79 18.5,5.73 18.44,5.73C18.37,5.72 16.83,5.61 16.83,5.61C16.83,5.61 15.76,4.55 15.65,4.43C15.53,4.31 15.3,4.35 15.21,4.37C15.2,4.37 15,4.44 14.61,4.55C14.25,3.5 13.62,2.58 12.43,2.58C12.11,2.18 11.72,2 11.38,2C8.8,2 7.57,5.22 7.18,6.86C6.18,7.17 5.47,7.39 5.37,7.42C4.82,7.6 4.8,7.62 4.73,8.14C4.67,8.54 3.21,19.86 3.21,19.86L14.61,22L20.79,20.66C20.79,20.66 18.62,6 18.61,5.89M14,4.76C13.69,4.85 13.37,4.95 13,5.06C13,5 13,4.93 13,4.85C13,4.21 12.93,3.7 12.79,3.29C13.35,3.36 13.73,4 14,4.76M12.08,3.42C12.24,3.82 12.34,4.39 12.34,5.16C12.34,5.2 12.34,5.24 12.34,5.27C11.71,5.46 11.03,5.68 10.35,5.89C10.73,4.4 11.45,3.69 12.08,3.42M11.31,2.69C11.42,2.69 11.53,2.73 11.64,2.8C10.81,3.19 9.93,4.17 9.55,6.12C9,6.3 8.47,6.46 8,6.62C8.42,5.12 9.46,2.69 11.31,2.69M12.5,9.15L11.76,11.42C11.76,11.42 11.09,11.06 10.27,11.06C9.07,11.06 9,11.81 9,12C9,13.04 11.71,13.43 11.71,15.86C11.71,17.77 10.5,19 8.87,19C6.91,19 5.91,17.78 5.91,17.78L6.43,16.05C6.43,16.05 7.46,16.93 8.33,16.93C8.9,16.93 9.13,16.5 9.13,16.16C9.13,14.81 6.92,14.75 6.92,12.53C6.92,10.66 8.26,8.85 10.97,8.85C12,8.85 12.5,9.15 12.5,9.15M15.43,5.29L16.75,6.6L17.71,6.68C18.05,9 19.19,16.73 19.66,19.88L14.66,20.97L15.43,5.29Z",
-    "name": "shopify"
-  },
-  {
-    "path": "M7.47,17.19C7.37,17.95 7.08,18.21 6.19,18.21C5.27,18.21 4.87,17.79 4.81,16.87L4.61,13.65C4.61,12.91 4.87,12.55 5.86,12.55C7.21,12.55 7.04,13.54 7.64,14.5C8.33,15.62 10,16.35 12.31,16.35C15.17,16.35 17,15.14 17,13.57C17,12.23 15.89,11.39 13.85,11.16L11.5,10.89C7.21,10.42 5.1,9.19 5.1,6.62C5.1,4.07 8.06,2 12.21,2C13.5,2 14.81,2.29 16.29,2.76C16.29,2.26 16.58,2.1 17.3,2.1C18.46,2.1 18.55,2.39 18.62,3.08L18.85,5.88C18.85,6.5 18.39,6.83 17.63,6.83C16.35,6.83 16.55,5.88 15.86,5.07C15.17,4.26 13.79,3.73 12.08,3.73C9.44,3.73 7.7,4.89 7.7,6.5C7.7,7.8 8.92,8.56 11.38,8.82L13.95,9.08C17.7,9.5 19.61,10.92 19.61,13.33C19.61,16.17 16.71,18.08 12.21,18.08C10.56,18.08 9.08,17.77 7.47,17.19M1,16H2V21H23V22H1V16Z",
-    "name": "slackware"
-  },
-  {
-    "path": "M6,3H18A3,3 0 0,1 21,6V18A3,3 0 0,1 18,21H6A3,3 0 0,1 3,18V6A3,3 0 0,1 6,3M7,6A1,1 0 0,0 6,7V17A1,1 0 0,0 7,18H17A1,1 0 0,0 18,17V7A1,1 0 0,0 17,6H7M9.5,9H14.5A0.5,0.5 0 0,1 15,9.5V14.5A0.5,0.5 0 0,1 14.5,15H9.5A0.5,0.5 0 0,1 9,14.5V9.5A0.5,0.5 0 0,1 9.5,9Z",
-    "name": "square-inc"
-  },
-  {
-    "path": "M5.5,0H18.5A5.5,5.5 0 0,1 24,5.5V18.5A5.5,5.5 0 0,1 18.5,24H5.5A5.5,5.5 0 0,1 0,18.5V5.5A5.5,5.5 0 0,1 5.5,0M15.39,15.18C15.39,16.76 14.5,17.81 12.85,17.95V12.61C14.55,13.13 15.39,13.66 15.39,15.18M11.65,6V10.88C10.34,10.5 9.03,9.93 9.03,8.43C9.03,6.94 10.18,6.12 11.65,6M15.5,7.6L16.5,6.8C15.62,5.66 14.4,4.92 12.85,4.77V3.8H11.65V3.8L11.65,4.75C9.5,4.89 7.68,6.17 7.68,8.5C7.68,11 9.74,11.78 11.65,12.29V17.96C10.54,17.84 9.29,17.31 8.43,16.03L7.3,16.78C8.2,18.12 9.76,19 11.65,19.14V20.2H12.07L12.85,20.2V19.16C15.35,19 16.7,17.34 16.7,15.14C16.7,12.58 14.81,11.76 12.85,11.19V6.05C14,6.22 14.85,6.76 15.5,7.6Z",
-    "name": "square-inc-cash"
-  },
-  {
-    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V15L6.19,16.31C6.45,17.6 7.6,18.58 8.97,18.58C10.53,18.58 11.8,17.31 11.8,15.75V15.62L15.2,13.19H15.28C17.36,13.19 19.05,11.5 19.05,9.42C19.05,7.34 17.36,5.65 15.28,5.65C13.2,5.65 11.5,7.34 11.5,9.42V9.47L9.13,12.93L8.97,12.92C8.38,12.92 7.83,13.1 7.38,13.41L3,11.6V5A2,2 0 0,1 5,3H19M8.28,17.17C9.08,17.5 10,17.13 10.33,16.33C10.66,15.53 10.28,14.62 9.5,14.29L8.22,13.76C8.71,13.58 9.26,13.57 9.78,13.79C10.31,14 10.72,14.41 10.93,14.94C11.15,15.46 11.15,16.04 10.93,16.56C10.5,17.64 9.23,18.16 8.15,17.71C7.65,17.5 7.27,17.12 7.06,16.67L8.28,17.17M17.8,9.42C17.8,10.81 16.67,11.94 15.28,11.94C13.9,11.94 12.77,10.81 12.77,9.42A2.51,2.51 0 0,1 15.28,6.91C16.67,6.91 17.8,8.04 17.8,9.42M13.4,9.42C13.4,10.46 14.24,11.31 15.29,11.31C16.33,11.31 17.17,10.46 17.17,9.42C17.17,8.38 16.33,7.53 15.29,7.53C14.24,7.53 13.4,8.38 13.4,9.42Z",
-    "name": "steam-box"
-  },
-  {
-    "path": "M14.92,17.16L16.75,13.53H19.45L14.94,22.5L10.37,13.53H13.07L14.92,17.16M10.63,8.66L8.18,13.55H4.55L10.61,1.5L16.74,13.55H13.11L10.63,8.66Z",
-    "name": "strava"
-  },
-  {
-    "path": "M12,14C11,14 9,15 9,16C9,18 12,18 12,18V17A1,1 0 0,1 11,16A1,1 0 0,1 12,15V14M12,19C12,19 8,18.5 8,16.5C8,13.5 11,12.75 12,12.75V11.5C11,11.5 7,13 7,16C7,20 12,20 12,20V19M10.07,7.03L11.26,7.56C11.69,5.12 12.84,3.5 12.84,3.5C12.41,4.53 12.13,5.38 11.95,6.05C13.16,3.55 15.61,2 15.61,2C14.43,3.18 13.56,4.46 12.97,5.53C14.55,3.85 16.74,2.75 16.74,2.75C14.05,4.47 12.84,7.2 12.54,7.96L13.09,8.04C13.09,8.56 13.09,9.04 13.34,9.42C14.1,11.31 18,11.47 18,16C18,20.53 13.97,22 11.83,22C9.69,22 5,21.03 5,16C5,10.97 9.95,10.93 10.83,8.92C10.95,8.54 10.07,7.03 10.07,7.03Z",
-    "name": "tor"
-  },
-  {
-    "path": "M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17",
-    "name": "tumblr"
-  },
-  {
-    "path": "M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z",
-    "name": "tumblr-box"
-  },
-  {
-    "path": "M3.75,17L8,12.75V16H18V11.5L20,9.5V16A2,2 0 0,1 18,18H8V21.25L3.75,17M20.25,7L16,11.25V8H6V12.5L4,14.5V8A2,2 0 0,1 6,6H16V2.75L20.25,7Z",
-    "name": "tumblr-reblog"
-  },
-  {
-    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z",
-    "name": "twitter-box"
-  },
-  {
-    "path": "M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
-    "name": "twitter-circle"
-  },
-  {
-    "path": "M6.38,13.24V13.24C6.38,11.84 6.38,10.44 6.38,9.04H7.4V15.84H6.39C6.39,15.63 6.39,15.42 6.39,15.21C5.93,15.68 5.29,15.96 4.58,15.96C3.12,15.96 2,14.9 2,13.3V9.04H3V13.24C3,14.33 3.74,15.04 4.7,15.04C5.64,15.04 6.38,14.31 6.38,13.24M9.14,9.04V11.5C9.37,11.29 9.65,11.1 9.95,10.97C10.25,10.85 10.58,10.78 10.91,10.78C12.37,10.78 13.5,11.94 13.5,13.37C13.5,14.8 12.37,15.96 10.91,15.96C10.58,15.96 10.25,15.89 9.95,15.77C9.64,15.64 9.37,15.45 9.13,15.22C9.13,15.43 9.13,15.63 9.13,15.84C8.81,15.84 8.5,15.84 8.16,15.84V9.04H9.14M12.55,13.37V13.37C12.55,12.41 11.77,11.65 10.84,11.65C9.89,11.65 9.13,12.41 9.13,13.37C9.13,14.32 9.88,15.09 10.84,15.09C11.77,15.09 12.55,14.32 12.55,13.37M16.46,10.79C17.9,10.79 18.95,11.89 18.95,13.36V13.69H14.91C15.04,14.5 15.71,15.09 16.55,15.09C17.13,15.09 17.61,14.86 18,14.36L18.7,14.89C18.2,15.55 17.46,15.95 16.55,15.95C15.06,15.95 13.91,14.84 13.91,13.36C13.91,11.97 15,10.79 16.46,10.79M14.92,12.91H17.95C17.79,12.15 17.18,11.65 16.44,11.65C15.71,11.65 15.1,12.15 14.92,12.91M20.5,13V15.84H19.5V10.89C19.82,10.89 20.14,10.89 20.47,10.89V11.5C20.71,11.1 21.11,10.85 21.66,10.85H22V11.76H21.59C20.95,11.76 20.5,12.26 20.5,13",
-    "name": "uber"
-  },
-  {
-    "path": "M19.5,3C20.14,4.08 20.44,5.19 20.44,6.6C20.44,11.08 16.61,16.91 13.5,21H6.41L3.56,4L9.77,3.39L11.28,15.5C12.69,13.21 14.42,9.61 14.42,7.16C14.42,5.81 14.19,4.9 13.83,4.15L19.5,3Z",
-    "name": "venmo"
-  },
-  {
-    "path": "M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
-    "name": "vk-box"
-  },
-  {
-    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
-    "name": "vk-circle"
-  },
-  {
-    "path": "M17,17.5L12,15L7,17.5V5H5V19H19V5H17V17.5M12,12.42L14.25,13.77L13.65,11.22L15.64,9.5L13,9.27L12,6.86L11,9.27L8.36,9.5L10.35,11.22L9.75,13.77L12,12.42M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
-    "name": "wunderlist"
-  },
-  {
-    "path": "M0 16.7L3.2 12.9L0 9.1L1.5 7.8L4.5 11.3L7.5 7.8L9 9.1L5.8 12.9L9 16.7L7.5 18L4.5 14.4L1.5 18L0 16.7M24 16.9C24 17.4 23.6 17.9 23 17.9H20C18.9 17.9 18 17 18 15.9V13.9C18 12.8 18.9 11.9 20 11.9H22V9.9H18V8H23C23.5 8 24 8.4 24 9M22 14H20V16H22V14M16 16.9C16 17.4 15.6 17.9 15 17.9H12C10.9 17.9 10 17 10 15.9V9.9C10 8.8 10.9 7.9 12 7.9H14V5H16V16.9M14 15.9V9.9H12V15.9H14Z",
-    "name": "xda"
-  },
-  {
-    "path": "M4.8,3C3.8,3 3,3.8 3,4.8V19.2C3,20.2 3.8,21 4.8,21H19.2C20.2,21 21,20.2 21,19.2V4.8C21,3.8 20.2,3 19.2,3M16.07,5H18.11C18.23,5 18.33,5.04 18.37,5.13C18.43,5.22 18.43,5.33 18.37,5.44L13.9,13.36L16.75,18.56C16.81,18.67 16.81,18.78 16.75,18.87C16.7,18.95 16.61,19 16.5,19H14.47C14.16,19 14,18.79 13.91,18.61L11.04,13.35C11.18,13.1 15.53,5.39 15.53,5.39C15.64,5.19 15.77,5 16.07,5M7.09,7.76H9.1C9.41,7.76 9.57,7.96 9.67,8.15L11.06,10.57C10.97,10.71 8.88,14.42 8.88,14.42C8.77,14.61 8.63,14.81 8.32,14.81H6.3C6.18,14.81 6.09,14.76 6.04,14.67C6,14.59 6,14.47 6.04,14.36L8.18,10.57L6.82,8.2C6.77,8.09 6.75,8 6.81,7.89C6.86,7.81 6.96,7.76 7.09,7.76Z",
-    "name": "xing-box"
-  },
-  {
-    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.85,6H17.74C17.86,6 17.94,6.04 18,6.12C18.04,6.2 18.04,6.3 18,6.41L13.84,13.76L16.5,18.59C16.53,18.69 16.53,18.8 16.5,18.88C16.43,18.96 16.35,19 16.24,19H14.36C14.07,19 13.93,18.81 13.84,18.64L11.17,13.76C11.31,13.5 15.35,6.36 15.35,6.36C15.45,6.18 15.57,6 15.85,6M7.5,8.57H9.39C9.67,8.57 9.81,8.75 9.9,8.92L11.19,11.17C11.12,11.3 9.17,14.75 9.17,14.75C9.07,14.92 8.94,15.11 8.66,15.11H6.78C6.67,15.11 6.59,15.06 6.54,15C6.5,14.9 6.5,14.8 6.54,14.69L8.53,11.17L7.27,9C7.21,8.87 7.2,8.77 7.25,8.69C7.3,8.61 7.39,8.57 7.5,8.57Z",
-    "name": "xing-circle"
-  },
-  {
-    "path": "M10.59,2C11.23,2 11.5,2.27 11.58,2.97L11.79,6.14L12.03,10.29C12.05,10.64 12,11 11.86,11.32C11.64,11.77 11.14,11.89 10.73,11.58C10.5,11.39 10.31,11.14 10.15,10.87L6.42,4.55C6.06,3.94 6.17,3.54 6.77,3.16C7.5,2.68 9.73,2 10.59,2M14.83,14.85L15.09,14.91L18.95,16.31C19.61,16.55 19.79,16.92 19.5,17.57C19.06,18.7 18.34,19.66 17.42,20.45C16.96,20.85 16.5,20.78 16.21,20.28L13.94,16.32C13.55,15.61 14.03,14.8 14.83,14.85M4.5,14C4.5,13.26 4.5,12.55 4.75,11.87C4.97,11.2 5.33,11 6,11.27L9.63,12.81C10.09,13 10.35,13.32 10.33,13.84C10.3,14.36 9.97,14.58 9.53,14.73L5.85,15.94C5.15,16.17 4.79,15.96 4.64,15.25C4.55,14.83 4.47,14.4 4.5,14M11.97,21C11.95,21.81 11.6,22.12 10.81,22C9.77,21.8 8.81,21.4 7.96,20.76C7.54,20.44 7.45,19.95 7.76,19.53L10.47,15.97C10.7,15.67 11.03,15.6 11.39,15.74C11.77,15.88 11.97,16.18 11.97,16.59V21M14.45,13.32C13.73,13.33 13.23,12.5 13.64,11.91C14.47,10.67 15.35,9.46 16.23,8.26C16.5,7.85 16.94,7.82 17.31,8.16C18.24,9 18.91,10 19.29,11.22C19.43,11.67 19.25,12.08 18.83,12.2L15.09,13.17L14.45,13.32Z",
-    "name": "yelp"
-  }
-]
+[]

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

@@ -1,5 +1,3 @@
-const path = require("path");
-
 module.exports = function (userOptions = {}) {
   // Files need to be absolute paths.
   // This only works if the file has no exports

build-scripts/rollup.js

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

build-scripts/util.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const fs = require("fs");
 

build-scripts/webpack.js

@@ -1,10 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const ManifestPlugin = require("webpack-manifest-plugin");
-const WorkerPlugin = require("worker-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
-const bundle = require("./bundle");
+const bundle = require("./bundle.js");
+
+class LogStartCompilePlugin {
+  ignoredFirst = false;
+
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tap("LogStartCompilePlugin", () => {
+      if (!this.ignoredFirst) {
+        this.ignoredFirst = true;
+        return;
+      }
+      log("Changes detected. Starting compilation");
+    });
+  }
+}
 
 const createWebpackConfig = ({
   entry,
@@ -14,6 +30,7 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
+  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -22,6 +39,7 @@ const createWebpackConfig = ({
   const ignorePackages = bundle.ignorePackages({ latestBuild });
   return {
     mode: isProdBuild ? "production" : "development",
+    target: ["web", latestBuild ? "es2017" : "es5"],
     devtool: isProdBuild
       ? "cheap-module-source-map"
       : "eval-cheap-module-source-map",
@@ -30,33 +48,36 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
-          exclude: bundle.babelExclude(),
+          test: /\.m?js$|\.ts$/,
           use: {
             loader: "babel-loader",
-            options: bundle.babelOptions({ latestBuild }),
+            options: {
+              ...bundle.babelOptions({ latestBuild }),
+              cacheDirectory: !isProdBuild,
+              cacheCompression: false,
+            },
           },
         },
         {
           test: /\.css$/,
-          use: "raw-loader",
+          type: "asset/source",
         },
       ],
     },
     optimization: {
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
           extractComments: true,
-          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
+      moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
+      chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new WorkerPlugin(),
-      new ManifestPlugin({
+      new WebpackBar({ fancy: !isProdBuild }),
+      new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
@@ -82,6 +103,7 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,
@@ -96,59 +118,68 @@ const createWebpackConfig = ({
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
+        ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-    ],
+      !isProdBuild && new LogStartCompilePlugin(),
+    ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
+      alias: {
+        "lit/decorators$": "lit/decorators.js",
+        "lit/directive$": "lit/directive.js",
+        "lit/directives/until$": "lit/directives/until.js",
+        "lit/directives/class-map$": "lit/directives/class-map.js",
+        "lit/directives/style-map$": "lit/directives/style-map.js",
+        "lit/directives/if-defined$": "lit/directives/if-defined.js",
+        "lit/directives/guard$": "lit/directives/guard.js",
+        "lit/directives/cache$": "lit/directives/cache.js",
+        "lit/directives/repeat$": "lit/directives/repeat.js",
+        "lit/polyfill-support$": "lit/polyfill-support.js",
+        "@lit-labs/virtualizer/layouts/grid":
+          "@lit-labs/virtualizer/layouts/grid.js",
+      },
     },
     output: {
       filename: ({ chunk }) => {
-        if (!isProdBuild || dontHash.has(chunk.name)) {
+        if (!isProdBuild || isStatsBuild || dontHash.has(chunk.name)) {
           return `${chunk.name}.js`;
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
       chunkFilename:
-        isProdBuild && !isStatsBuild
-          ? "chunk.[chunkhash].js"
-          : "[name].chunk.js",
+        isProdBuild && !isStatsBuild ? "[chunkhash:8].js" : "[id].chunk.js",
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
       globalObject: "self",
     },
+    experiments: {
+      topLevelAwait: true,
+    },
   };
 };
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-};
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.hassio({ isProdBuild, latestBuild })
-  );
-};
+const createHassioConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild })
-  );
-};
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,

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

@@ -139,7 +139,7 @@
           Your authentication credentials or Home Assistant url are never sent
           to the Cloud. You can validate this behavior in
           <a
-            href="https://github.com/home-assistant/home-assistant-polymer/tree/dev/cast"
+            href="https://github.com/home-assistant/frontend/tree/dev/cast"
             target="_blank"
             >the source code</a
           >.
@@ -212,13 +212,8 @@
           Chromecast is a technology developed by Google, and is available on:
         </p>
         <ul>
-          <li>Google Chrome (all platforms except on iOS)</li>
-          <li>
-            Microsoft Edge (all platforms,
-            <a href="https://www.microsoftedgeinsider.com" target="_blank"
-              >dev and canary builds only</a
-            >)
-          </li>
+          <li>Google Chrome (all platforms except iOS)</li>
+          <li>Microsoft Edge (all platforms)</li>
         </ul>
       </div>
 

cast/src/html/media.html.template

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+    <style>
+      body {
+        --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+        --logo-repeat: no-repeat;
+        --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+        --theme-hue: 200;
+        --progress-color: #03a9f4;
+        --splash-image: url('https://home-assistant.io/images/cast/splash.png');
+        --splash-size: cover;
+        --background-color: #41bdf5;
+      }
+    </style>
+    <script>
+      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
+      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+      s.parentNode.insertBefore(g,s)}(document,'script'));
+    </script>
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <cast-media-player></cast-media-player>
+
+    <script>
+      import("<%= latestMediaJS %>");
+      window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5MediaJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5MediaJS %>");
+        <% } %>
+      }
+    </script>
+  </body>
+</html>

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,4 @@
+import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

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

@@ -1,16 +1,10 @@
+import "@material/mwc-button/mwc-button";
+import { mdiCast, mdiCastConnected } from "@mdi/js";
 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,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
@@ -24,6 +18,7 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
@@ -32,7 +27,6 @@ import {
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
-import "@material/mwc-button/mwc-button";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -42,21 +36,19 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @internalProperty() private askWrite = false;
+  @state() private askWrite = false;
 
-  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
+      return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
     const error =
       this.castManager.castState === "NO_DEVICES_AVAILABLE"
         ? html`
-            <p>
-              There were no suitable Chromecast devices to cast to found.
-            </p>
+            <p>There were no suitable Chromecast devices to cast to found.</p>
           `
         : undefined;
 
@@ -83,7 +75,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -121,7 +113,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
                   Manage
                 </mwc-button>
               `
@@ -201,12 +193,12 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .center-item {
         display: flex;
@@ -243,7 +235,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-right: 8px;
         height: 18px;
       }

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

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -11,22 +12,15 @@ import {
   getAuth,
   getAuthOptions,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -60,19 +54,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @internalProperty() private loading = false;
+  @state() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @internalProperty() private cannotConnect = false;
+  @state() private cannotConnect = false;
 
-  @internalProperty() private error?: string | TemplateResult;
+  @state() private error?: string | TemplateResult;
 
-  @internalProperty() private auth?: Auth;
+  @state() private auth?: Auth;
 
-  @internalProperty() private connection?: Connection;
+  @state() private connection?: Connection;
 
-  @internalProperty() private castManager?: CastManager | null;
+  @state() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -86,9 +80,7 @@ export class HcConnect extends LitElement {
           </div>
           <div class="card-actions">
             <a href="/">
-              <mwc-button>
-                Retry
-              </mwc-button>
+              <mwc-button> Retry </mwc-button>
             </a>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
@@ -136,11 +128,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-icon
-                .icon=${this.castManager.castState === "CONNECTED"
-                  ? "hass:cast-connected"
-                  : "hass:cast"}
-              ></ha-icon>
+              <ha-svg-icon
+                .path=${this.castManager.castState === "CONNECTED"
+                  ? mdiCastConnected
+                  : mdiCast}
+              ></ha-svg-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -221,7 +213,7 @@ export class HcConnect extends LitElement {
     let url: URL;
     try {
       url = new URL(value);
-    } catch (err) {
+    } catch (err: any) {
       this.error = "Invalid URL";
       return;
     }
@@ -249,7 +241,7 @@ export class HcConnect extends LitElement {
     try {
       this.loading = true;
       auth = await getAuth(options);
-    } catch (err) {
+    } catch (err: any) {
       if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
         this.cannotConnect = true;
         return;
@@ -268,7 +260,7 @@ export class HcConnect extends LitElement {
 
     try {
       conn = await createConnection({ auth });
-    } catch (err) {
+    } catch (err: any) {
       // In case of saved tokens, silently solve problems.
       if (init === "saved-tokens") {
         if (err === ERR_CANNOT_CONNECT) {
@@ -294,12 +286,12 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .card-content a {
         color: var(--primary-color);
@@ -316,7 +308,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-left: 8px;
       }
 

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

@@ -4,15 +4,8 @@ import {
   getUser,
   HassUser,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
@@ -30,7 +23,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +37,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>
@@ -69,7 +62,7 @@ class HcLayout extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
@@ -98,8 +91,12 @@ class HcLayout extends LitElement {
         line-height: 32px;
         padding: 24px 16px 16px;
         display: block;
+        margin: 0;
       }
 
+      .hero {
+        border-radius: 4px 4px 0 0;
+      }
       .subtitle {
         font-size: 14px;
         color: var(--secondary-text-color);

cast/src/media/entrypoint.ts

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

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

@@ -5,8 +5,8 @@ import {
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {
-  const touchSupported = castContext.getDeviceCapabilities()
-    .touch_input_supported;
+  const touchSupported =
+    castContext.getDeviceCapabilities().touch_input_supported;
   return {
     views: [
       {

cast/src/receiver/entrypoint.ts

@@ -6,37 +6,151 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const controller = new HcMain();
-document.body.append(controller);
+const lovelaceController = new HcMain();
+document.body.append(lovelaceController);
+lovelaceController.addEventListener("cast-view-changed", (ev) => {
+  playDummyMedia(ev.detail.title);
+});
+
+const mediaPlayer = document.createElement("cast-media-player");
+mediaPlayer.style.display = "none";
+document.body.append(mediaPlayer);
+const playerStylesAdded = false;
+
+let controls: HTMLElement | null;
+
+const setTouchControlsVisibility = (visible: boolean) => {
+  if (!castContext.getDeviceCapabilities().touch_input_supported) {
+    return;
+  }
+  controls =
+    controls ||
+    (document.body.querySelector("touch-controls") as HTMLElement | null);
+  if (controls) {
+    controls.style.display = visible ? "initial" : "none";
+  }
+};
+
+let timeOut: number | undefined;
+
+const playDummyMedia = (viewTitle?: string) => {
+  const loadRequestData = new cast.framework.messages.LoadRequestData();
+  loadRequestData.autoplay = true;
+  loadRequestData.media = new cast.framework.messages.MediaInformation();
+  loadRequestData.media.contentId =
+    "https://cast.home-assistant.io/images/google-nest-hub.png";
+  loadRequestData.media.contentType = "image/jpeg";
+  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
+  const metadata = new cast.framework.messages.GenericMediaMetadata();
+  metadata.title = viewTitle;
+  loadRequestData.media.metadata = metadata;
+
+  loadRequestData.requestId = 0;
+  playerManager.load(loadRequestData);
+  if (timeOut) {
+    clearTimeout(timeOut);
+    timeOut = undefined;
+  }
+  if (castContext.getDeviceCapabilities().touch_input_supported) {
+    timeOut = window.setTimeout(() => playDummyMedia(viewTitle), 540000); // repeat every 9 minutes to keep it active (gets deactivated after 10 minutes)
+  }
+};
+
+const showLovelaceController = () => {
+  mediaPlayer.style.display = "none";
+  lovelaceController.style.display = "initial";
+  document.body.setAttribute("style", "overflow-y: auto !important");
+  setTouchControlsVisibility(false);
+};
+
+const showMediaPlayer = () => {
+  lovelaceController.style.display = "none";
+  mediaPlayer.style.display = "initial";
+  document.body.removeAttribute("style");
+  setTouchControlsVisibility(true);
+  if (!playerStylesAdded) {
+    const style = document.createElement("style");
+    style.innerHTML = `
+    body {
+      --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+      --logo-repeat: no-repeat;
+      --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+      --theme-hue: 200;
+      --progress-color: #03a9f4;
+      --splash-image: url('https://home-assistant.io/images/cast/splash.png');
+      --splash-size: cover;
+      --background-color: #41bdf5;
+    }
+    `;
+    document.head.appendChild(style);
+  }
+};
 
 const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
-// The docs say we need to set options.touchScreenOptimizeApp = true
-// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
-// This doesn't work.
-// @ts-ignore
-options.touchScreenOptimizedApp = true;
-
-// The class reference say we can set a uiConfig in options to set it
-// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
-// This doesn't work either.
-// @ts-ignore
-options.uiConfig = new cast.framework.ui.UiConfig();
-// @ts-ignore
-options.uiConfig.touchScreenOptimizedApp = true;
-
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
+    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+    if (
+      playerManager.getPlayerState() !==
+      cast.framework.messages.PlayerState.IDLE
+    ) {
+      playerManager.stop();
+    } else {
+      showLovelaceController();
+    }
     const msg = ev.data;
     msg.senderId = ev.senderId;
-    controller.processIncomingMessage(msg);
+    lovelaceController.processIncomingMessage(msg);
+  }
+);
+
+const playerManager = castContext.getPlayerManager();
+
+playerManager.setMessageInterceptor(
+  cast.framework.messages.MessageType.LOAD,
+  (loadRequestData) => {
+    if (
+      loadRequestData.media.contentId ===
+      "https://cast.home-assistant.io/images/google-nest-hub.png"
+    ) {
+      return loadRequestData;
+    }
+    // We received a play media command, hide Lovelace and show media player
+    showMediaPlayer();
+    const media = loadRequestData.media;
+    // Special handling if it came from Google Assistant
+    if (media.entity) {
+      media.contentId = media.entity;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
+      media.contentType = "application/vnd.apple.mpegurl";
+      // @ts-ignore
+      media.hlsVideoSegmentFormat =
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
+    }
+    return loadRequestData;
+  }
+);
+
+playerManager.addEventListener(
+  cast.framework.events.EventType.MEDIA_STATUS,
+  (event) => {
+    if (
+      event.mediaStatus?.playerState ===
+        cast.framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.idleReason &&
+      event.mediaStatus?.idleReason !==
+        cast.framework.messages.IdleReason.INTERRUPTED
+    ) {
+      // media finished or stopped, return to default Lovelace
+      showLovelaceController();
+    }
   }
 );
 

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

@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  property,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -21,7 +16,7 @@ import "./hc-lovelace";
 class HcDemo extends HassElement {
   @property({ attribute: false }) public lovelacePath!: string;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {
@@ -38,10 +33,10 @@ class HcDemo extends HassElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._initialize();
+    this._initializeHass();
   }
 
-  private async _initialize() {
+  private async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
       // Override updateHass so that the correct hass lifecycle methods are called
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
@@ -29,7 +22,7 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

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

@@ -1,19 +1,15 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
 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 { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
+(window as any).loadCardHelpers = () =>
+  import("../../../../src/panels/lovelace/custom-card-helpers");
+
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -22,7 +18,9 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  public urlPath?: string | null;
+  @property() public urlPath: string | null = null;
+
+  @query("hui-view") private _huiView?: HTMLElement;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -36,31 +34,23 @@ class HcLovelace extends LitElement {
     }
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
+      rawConfig: this.lovelaceConfig,
       editMode: false,
-      urlPath: this.urlPath!,
+      urlPath: this.urlPath,
       enableFullEditMode: () => undefined,
       mode: "storage",
-      language: "en",
+      locale: this.hass.locale,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return this.lovelaceConfig.views[index].panel
-      ? html`
-          <hui-panel-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .config=${this.lovelaceConfig.views[index]}
-          ></hui-panel-view>
-        `
-      : html`
-          <hui-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .index=${index}
-            columns="2"
-          ></hui-view>
-        `;
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+      ></hui-view>
+    `;
   }
 
   protected updated(changedProps) {
@@ -70,17 +60,32 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
+        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
+
+        const viewTitle =
+          this.lovelaceConfig.views[index].title ||
+          this.lovelaceConfig.views[index].path;
+
+        fireEvent(this, "cast-view-changed", {
+          title:
+            dashboardTitle || viewTitle
+              ? `${dashboardTitle || ""}${
+                  dashboardTitle && viewTitle ? ": " : ""
+                }${viewTitle || ""}`
+              : undefined,
+        });
+
         const configBackground =
           this.lovelaceConfig.views[index].background ||
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          (this.shadowRoot!.querySelector(
-            "hui-view, hui-panel-view"
-          ) as HTMLElement)!.style.setProperty(
+          this._huiView!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
+        } else {
+          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -100,10 +105,11 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-height: 100vh;
+        height: 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
@@ -112,12 +118,22 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
+      hui-view {
+        background: var(--lovelace-background, var(--primary-background-color));
+      }
     `;
   }
 }
 
+export interface CastViewChanged {
+  title: string | undefined;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     "hc-lovelace": HcLovelace;
   }
+  interface HASSDomEvents {
+    "cast-view-changed": CastViewChanged;
+  }
 }

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

@@ -3,12 +3,8 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -17,7 +13,11 @@ import {
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
+import {
+  ReceiverErrorCode,
+  ReceiverErrorMessage,
+  ReceiverStatusMessage,
+} from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
@@ -36,18 +36,18 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @internalProperty() private _showDemo = false;
+  @state() private _showDemo = false;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
-  @internalProperty() private _lovelacePath: string | number | null = null;
+  @state() private _lovelacePath: string | number | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
+
+  @state() private _urlPath?: string | null;
 
   private _unsubLovelace?: UnsubscribeFunc;
 
-  private _urlPath?: string | null;
-
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
       this._handleConnectMessage(msg);
@@ -72,8 +72,10 @@ export class HcMain extends HassElement {
       !this._lovelaceConfig ||
       this._lovelacePath === null ||
       // Guard against part of HA not being loaded yet.
-      (this.hass &&
-        (!this.hass.states || !this.hass.config || !this.hass.services))
+      !this.hass ||
+      !this.hass.states ||
+      !this.hass.config ||
+      !this.hass.services
     ) {
       return html`
         <hc-launch-screen
@@ -111,6 +113,7 @@ export class HcMain extends HassElement {
         this._sendStatus();
       }
     });
+    this.addEventListener("dialog-closed", this._dialogClosed);
   }
 
   private _sendStatus(senderId?: string) {
@@ -122,7 +125,7 @@ export class HcMain extends HassElement {
 
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
-      status.lovelacePath = this._lovelacePath!;
+      status.lovelacePath = this._lovelacePath;
       status.urlPath = this._urlPath;
     }
 
@@ -135,6 +138,30 @@ export class HcMain extends HassElement {
     }
   }
 
+  private _sendError(
+    error_code: number,
+    error_message: string,
+    senderId?: string
+  ) {
+    const error: ReceiverErrorMessage = {
+      type: "receiver_error",
+      error_code,
+      error_message,
+    };
+
+    if (senderId) {
+      this.sendMessage(senderId, error);
+    } else {
+      for (const sender of castContext.getSenders()) {
+        this.sendMessage(sender.id, error);
+      }
+    }
+  }
+
+  private _dialogClosed = () => {
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  };
+
   private async _handleGetStatusMessage(msg: GetStatusMessage) {
     this._sendStatus(msg.senderId!);
   }
@@ -152,15 +179,19 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-    } catch (err) {
-      this._error = this._getErrorMessage(err);
+    } catch (err: any) {
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
-    } catch (err) {
-      this._error = this._getErrorMessage(err);
+    } catch (err: any) {
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
       return;
     }
     if (this.hass) {
@@ -172,24 +203,29 @@ export class HcMain extends HassElement {
   }
 
   private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
+    this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
     if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
+      this._sendError(ReceiverErrorCode.NOT_CONNECTED, this._error);
       return;
     }
+    this._error = undefined;
     if (msg.urlPath === "lovelace") {
       msg.urlPath = null;
     }
+    this._lovelacePath = msg.viewPath;
     if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
       this._urlPath = msg.urlPath;
+      this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
+        : getLegacyLovelaceCollection(this.hass.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -197,9 +233,17 @@ export class HcMain extends HassElement {
         this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
-      } catch (err) {
-        // eslint-disable-next-line
-        console.log("Error fetching Lovelace configuration", err, msg);
+      } catch (err: any) {
+        if (
+          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
+          err.code !== "config_not_found"
+        ) {
+          // eslint-disable-next-line
+          console.log("Error fetching Lovelace configuration", err, msg);
+          this._error = `Error fetching Lovelace configuration: ${err.message}`;
+          this._sendError(ReceiverErrorCode.FETCH_CONFIG_FAILED, this._error);
+          return;
+        }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
         await this._generateLovelaceConfig();
@@ -214,25 +258,27 @@ export class HcMain extends HassElement {
         loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
       }
     }
-    this._showDemo = false;
-    this._lovelacePath = msg.viewPath;
-    if (castContext.getDeviceCapabilities().touch_input_supported) {
-      this._breakFree();
-    }
+
     this._sendStatus();
   }
 
   private async _generateLovelaceConfig() {
-    const { generateLovelaceConfigFromHass } = await import(
-      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceConfigFromHass(this.hass!)
+      await generateLovelaceDashboardStrategy(
+        {
+          hass: this.hass!,
+          narrow: false,
+        },
+        "original-states"
+      )
     );
   }
 
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title!);
+    castContext.setApplicationState(lovelaceConfig.title || "");
     this._lovelaceConfig = lovelaceConfig;
   }
 
@@ -241,9 +287,6 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
-      if (castContext.getDeviceCapabilities().touch_input_supported) {
-        this._breakFree();
-      }
     });
   }
 
@@ -264,14 +307,6 @@ export class HcMain extends HassElement {
     }
   }
 
-  private _breakFree() {
-    const controls = document.body.querySelector("touch-controls");
-    if (controls) {
-      controls.remove();
-    }
-    document.body.setAttribute("style", "overflow-y: auto !important");
-  }
-
   private sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }

cast/src/receiver/second-load.ts

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