Merge pull request #3377 from home-assistant/dev

20190717.1

.dockerignore

@@ -1,6 +1,4 @@
 node_modules
-bower_components
 hass_frontend
-build
-build-temp
+hass_frontend_es5
 .git

.eslintrc-hound.json

@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "prettier"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true,
@@ -8,17 +8,28 @@
   },
   "settings": {
     "react": {
-      "pragma": "h"
+      "pragma": "h",
+      "version": "15.0"
+    },
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
     }
   },
   "globals": {
     "__DEV__": false,
     "__DEMO__": false,
+    "__BUILD__": false,
+    "__VERSION__": false,
+    "__STATIC_PATH__": false,
     "Polymer": true,
     "webkitSpeechRecognition": false,
+    "ResizeObserver": false
   },
   "env": {
-    "browser": true
+    "browser": true,
+    "mocha": true
   },
   "rules": {
     "class-methods-use-this": 0,
@@ -40,10 +51,15 @@
     "no-multi-assign": 0,
     "radix": 0,
     "no-alert": 0,
+    "no-return-await": 0,
     "prefer-destructuring": 0,
-    "no-restricted-globals": 0,
+    "no-restricted-globals": [2, "event"],
     "prefer-promise-reject-errors": 0,
     "import/prefer-default-export": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "object-curly-newline": 0,
+    "default-case": 0,
     "react/jsx-no-bind": [2, { "ignoreRefs": true }],
     "react/jsx-no-duplicate-props": 2,
     "react/self-closing-comp": 2,
@@ -53,13 +69,11 @@
     "react/no-find-dom-node": 2,
     "react/no-is-mounted": 2,
     "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-curly-spacing": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2
+    "react/jsx-uses-vars": 2,
+    "no-restricted-syntax": [0, "ForOfStatement"],
+    "prettier/prettier": "error"
   },
-  "plugins": [
-    "html",
-    "react"
-  ]
+  "plugins": ["react", "prettier"]
 }

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./.eslintrc-hound.json",
+  "plugins": [
+    "react"
+  ],
+  "env": {
+    "browser": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "import/no-unresolved": 2,
+    "linebreak-style": 0,
+    "implicit-arrow-linebreak": 0
+  }
+}

.gitattributes

@@ -0,0 +1,13 @@
+# Ensure Docker script files uses LF to support Docker for Windows.
+# Ensure "git config --global core.autocrlf input" before you clone
+*     text eol=lf
+*.ts  whitespace=error
+*.js  whitespace=error
+
+*.ico binary
+*.jpg binary
+*.png binary
+*.zip binary
+*.mp3 binary
+
+demo/public/api/camera_proxy_stream/* binary

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,37 @@
+<!-- READ THIS FIRST:
+- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
+- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
+- This is for bugs only. Feature and enhancement requests should go in our community forum: https://community.home-assistant.io/c/feature-requests
+- Provide as many details as possible. Do not delete any text from this template!
+-->
+
+**Home Assistant release with the issue:**
+<!--
+- Frontend -> Developer tools -> Info
+- Or use this command: hass --version
+-->
+
+**Last working Home Assistant release (if known):**
+
+**UI (States or Lovelace UI?):**
+<!--
+- Frontend -> Developer tools -> Info
+-->
+
+**Browser and Operating System:**
+<!--
+Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
+-->
+
+**Description of problem:**
+<!--
+Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
+-->
+
+
+**Javascript errors shown in the web inspector (if applicable):**
+```
+
+```
+
+**Additional information:**

.github/move.yml

@@ -0,0 +1,13 @@
+# Configuration for move-issues - https://github.com/dessant/move-issues
+
+# Delete the command comment. Ignored when the comment also contains other content
+deleteCommand: true
+# Close the source issue after moving
+closeSourceIssue: true
+# Lock the source issue after moving
+lockSourceIssue: false
+# Set custom aliases for targets
+# aliases:
+#   r: repo
+#   or: owner/repo
+

.github/release-drafter.yml

@@ -0,0 +1,4 @@
+template: |
+  ## What's Changed
+
+  $CHANGES

.gitignore

@@ -1,10 +1,11 @@
-build/*
-build-temp/*
+build
+build-translations/*
 node_modules/*
-bower_components/*
 npm-debug.log
 .DS_Store
 hass_frontend/*
+.reify-cache
+demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]
@@ -19,3 +20,11 @@ venv
 lib
 bin
 dist
+
+# vscode
+.vscode/*
+!.vscode/extensions.json
+
+# Secrets
+.lokalise_token
+yarn-error.log

.hound.yml

@@ -3,4 +3,4 @@ jshint:
 
 eslint:
   enabled: true
-  config_file: .eslintrc
+  config_file: .eslintrc-hound.json

.nvmrc

@@ -1 +1 @@
-8.8.1
+12.1

.travis.yml

@@ -3,22 +3,24 @@ language: node_js
 cache:
   yarn: true
   directories:
-  - bower_components
-install:
-  - yarn install
-  - ./node_modules/.bin/bower install
-addons:
-  firefox: latest
-  apt:
-    sources:
-    - google-chrome
-    packages:
-    - google-chrome-stable
+    - bower_components
+install: yarn install
 script:
   - npm run build
+  - hassio/script/build_hassio
   - npm run test
-  - xvfb-run wct
-  - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce; fi
+  # - xvfb-run wct --module-resolution=node --npm
+  # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
+services:
+  - docker
+before_deploy:
+  - 'docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21'
+deploy:
+  provider: script
+  script: script/travis_deploy
+  'on':
+    branch: master
 dist: trusty
 addons:
   sauce_connect: true
+

.vscode/extensions.json

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

Dockerfile

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

MANIFEST.in

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

README.md

@@ -1,17 +1,33 @@
 # Home Assistant Polymer [![Build Status](https://travis-ci.org/home-assistant/home-assistant-polymer.svg?branch=master)](https://travis-ci.org/home-assistant/home-assistant-polymer)
 
-This is the repository for the official [Home Assistant](https://home-assistant.io) frontend. The frontend is built on top of the following technologies:
-
- * [Websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
- * [Polymer](https://www.polymer-project.org/)
- * [Rollup](http://rollupjs.org/) to package Home Assistant JS
- * [Bower](https://bower.io) for Polymer package management
+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://home-assistant.io/demo/)
 
-[View demo of the Polymer frontend](https://home-assistant.io/demo/)  
-[More information about Home Assistant](https://home-assistant.io)  
-[Frontend development instructions](https://home-assistant.io/developers/frontend/)
+- [View demo of the Polymer frontend](https://home-assistant.io/demo/)
+- [More information about Home Assistant](https://home-assistant.io)
+- [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
+
+## Development
+
+- Initial setup: `script/setup`
+- Development: [Instructions](https://developers.home-assistant.io/docs/en/frontend_development.html)
+- Production build: `script/build_frontend`
+- Gallery: `cd gallery && script/develop_gallery`
+- Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
+
+## Frontend development
+
+### Classic environment
+A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
+
+### Docker environment
+It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
+* `sh ./script/docker_run.sh build` Build all the project with one command
+* `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the *classic environment*) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
+
+**Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
 
 ## License
+
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

azure-pipelines-release.yml

@@ -0,0 +1,57 @@
+# https://dev.azure.com/home-assistant
+
+trigger:
+  batch: true
+  tags:
+    include:
+      - "*"
+pr: none
+variables:
+  - name: versionBuilder
+    value: "5.2"
+  - group: github
+  - group: twine
+
+stages:
+  - stage: "Validate"
+    jobs:
+      - job: "VersionValidate"
+        pool:
+          vmImage: "ubuntu-latest"
+        steps:
+          - task: UsePythonVersion@0
+            displayName: "Use Python 3.7"
+            inputs:
+              versionSpec: "3.7"
+          - script: |
+              setup_version="$(python setup.py -V)"
+              branch_version="$(Build.SourceBranchName)"
+
+              if [ "${setup_version}" != "${branch_version}" ]; then
+                echo "Version of tag ${branch_version} don't match with ${setup_version}!"
+                exit 1
+              fi
+            displayName: "Check version of branch/tag"
+
+  - 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 12.1"
+            inputs:
+              versionSpec: "12.1"
+          - script: pip install twine wheel
+            displayName: "Install tools"
+          - script: |
+              export TWINE_USERNAME="$(twineUser)"
+              export TWINE_PASSWORD="$(twinePassword)"
+
+              script/release
+            displayName: "Build and release package"

bower.json

@@ -1,62 +0,0 @@
-{
-  "name": "home-assistant",
-  "version": "0.1.0",
-  "authors": [
-    "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>"
-  ],
-  "main": "src/home-assistant.html",
-  "license": "MIT",
-  "private": true,
-  "dependencies": {
-    "app-layout": "^2.0.0",
-    "app-localize-behavior": "PolymerElements/app-localize-behavior#~2.0.0",
-    "app-route": "PolymerElements/app-route#^2.0.0",
-    "app-storage": "^2.0.2",
-    "fecha": "~2.3.0",
-    "font-roboto-local": "~1.0.1",
-    "font-roboto": "PolymerElements/font-roboto-local#~1.0.1",
-    "google-apis": "GoogleWebComponents/google-apis#~2.0.0",
-    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
-    "iron-image": "PolymerElements/iron-image#^2.1.1",
-    "iron-input": "PolymerElements/iron-input#^2.0.0",
-    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^2.0.0",
-    "leaflet": "^1.0.2",
-    "neon-animation": "PolymerElements/neon-animation#^2.0.1",
-    "paper-button": "PolymerElements/paper-button#^2.0.0",
-    "paper-card": "PolymerElements/paper-card#^2.0.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
-    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
-    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
-    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
-    "paper-fab": "PolymerElements/paper-fab#^2.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
-    "paper-input": "PolymerElements/paper-input#^2.0.1",
-    "paper-item": "PolymerElements/paper-item#^2.0.0",
-    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
-    "paper-material": "PolymerElements/paper-material#^2.0.0",
-    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
-    "paper-progress": "PolymerElements/paper-progress#^2.0.1",
-    "paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
-    "paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
-    "paper-scroll-header-panel": "~2.0.0",
-    "paper-slider": "PolymerElements/paper-slider#^2.0.1",
-    "paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
-    "paper-time-input": "ryanburns23/paper-time-input#^2.0.4",
-    "paper-toast": "PolymerElements/paper-toast#^2.0.0",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
-    "polymer": "^2.1.1",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^2.0.0",
-    "vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.0",
-    "web-animations-js": "^2.2.5",
-    "webcomponentsjs": "^1.0.10"
-  },
-  "devDependencies": {
-    "web-component-tester": "^6.3.0"
-  }
-}

build-scripts/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "no-restricted-syntax": 0,
+    "no-console": 0
+  }
+}

build-scripts/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../.eslintrc.json",
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "global-require": 0
+  }
+}

build-scripts/babel.js

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

build-scripts/gulp/app.js

@@ -0,0 +1,51 @@
+// Run HA develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-service-worker-dev",
+      "gen-icons",
+      "gen-pages-dev",
+      "gen-index-app-dev",
+      gulp.series("create-test-translation", "build-translations")
+    ),
+    "copy-static",
+    "webpack-watch-app"
+  )
+);
+
+gulp.task(
+  "build-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean",
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static",
+    gulp.parallel(
+      "webpack-prod-app",
+      // Do not compress static files in CI, it's SLOW.
+      ...(process.env.CI === "true" ? [] : ["compress-static"])
+    ),
+    gulp.parallel(
+      "gen-pages-prod",
+      "gen-index-app-prod",
+      "gen-service-worker-prod"
+    )
+  )
+);

build-scripts/gulp/clean.js

@@ -0,0 +1,17 @@
+const del = require("del");
+const gulp = require("gulp");
+const config = require("../paths");
+require("./translations");
+
+gulp.task(
+  "clean",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.root, config.build_dir]);
+  })
+);
+gulp.task(
+  "clean-demo",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.demo_root, config.build_dir]);
+  })
+);

build-scripts/gulp/demo.js

@@ -0,0 +1,42 @@
+// Run HA develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-demo",
+    gulp.parallel(
+      "gen-icons",
+      "gen-icons-demo",
+      "gen-index-demo-dev",
+      "build-translations"
+    ),
+    "copy-static-demo",
+    "webpack-dev-server-demo"
+  )
+);
+
+gulp.task(
+  "build-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-prod-demo",
+    "gen-index-demo-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -0,0 +1,163 @@
+// Tasks to generate entry HTML
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const fs = require("fs-extra");
+const path = require("path");
+const template = require("lodash.template");
+const minify = require("html-minifier").minify;
+const config = require("../paths.js");
+
+const templatePath = (tpl) =>
+  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+
+const demoTemplatePath = (tpl) =>
+  path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
+
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
+  return compiled({ ...data, renderTemplate });
+};
+
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, demoTemplatePath);
+
+const minifyHtml = (content) =>
+  minify(content, {
+    collapseWhitespace: true,
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+      latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+      es5Compatibility: "/frontend_es5/compatibility.js",
+      es5PageJS: `/frontend_es5/${page}.js`,
+      es5HassIconsJS: "/frontend_es5/hass-icons.js",
+    });
+
+    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+  }
+  done();
+});
+
+gulp.task("gen-pages-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+      latestHassIconsJS: latestManifest["hass-icons.js"],
+
+      es5Compatibility: es5Manifest["compatibility.js"],
+      es5PageJS: es5Manifest[`${page}.js`],
+      es5HassIconsJS: es5Manifest["hass-icons.js"],
+    });
+
+    fs.outputFileSync(
+      path.resolve(config.root, `${page}.html`),
+      minifyHtml(content)
+    );
+  }
+  done();
+});
+
+gulp.task("gen-index-app-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderTemplate("index", {
+    latestAppJS: "/frontend_latest/app.js",
+    latestCoreJS: "/frontend_latest/core.js",
+    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+    es5HassIconsJS: "/frontend_es5/hass-icons.js",
+  }).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-app-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    latestHassIconsJS: latestManifest["hass-icons.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+    es5HassIconsJS: es5Manifest["hass-icons.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.demo_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  done();
+});

build-scripts/gulp/gather-static.js

@@ -0,0 +1,116 @@
+// Gulp task to gather all static files.
+
+const gulp = require("gulp");
+const path = require("path");
+const cpx = require("cpx");
+const fs = require("fs-extra");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const paths = require("../paths");
+
+const npmPath = (...parts) =>
+  path.resolve(paths.polymer_dir, "node_modules", ...parts);
+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);
+
+function copyTranslations(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Translation output
+  fs.copySync(
+    polyPath("build-translations/output"),
+    staticPath("translations")
+  );
+}
+
+function copyPolyfills(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Web Component polyfills and adapters
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
+    staticPath("polyfills/")
+  );
+}
+
+function copyFonts(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  // Local fonts
+  cpx.copySync(
+    npmPath("roboto-fontface/fonts/roboto/*.woff2"),
+    staticPath("fonts/roboto")
+  );
+}
+
+function copyMapPanel(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(
+    npmPath("leaflet/dist/leaflet.css"),
+    staticPath("images/leaflet/")
+  );
+  fs.copySync(
+    npmPath("leaflet/dist/images"),
+    staticPath("images/leaflet/images/")
+  );
+}
+
+function compressStatic(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  const polyfills = gulp
+    .src(staticPath("polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("polyfills")));
+  const translations = gulp
+    .src(staticPath("translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("translations")));
+
+  return merge(polyfills, translations);
+}
+
+gulp.task("copy-static", (done) => {
+  const staticDir = paths.static;
+  const staticPath = genStaticPath(paths.static);
+  // Basic static files
+  fs.copySync(polyPath("public"), paths.root);
+
+  copyPolyfills(staticDir);
+  copyFonts(staticDir);
+  copyTranslations(staticDir);
+
+  // Panel assets
+  copyFileDir(
+    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
+    staticPath("panels/calendar/")
+  );
+  copyMapPanel(staticDir);
+  done();
+});
+
+gulp.task("compress-static", () => compressStatic(paths.static));
+
+gulp.task("copy-static-demo", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public"), paths.demo_root);
+  // Copy demo static files
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+
+  copyPolyfills(paths.demo_static);
+  copyMapPanel(paths.demo_static);
+  copyFonts(paths.demo_static);
+  copyTranslations(paths.demo_static);
+  done();
+});

build-scripts/gulp/gen-icons.js

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

build-scripts/gulp/service-worker.js

@@ -0,0 +1,33 @@
+// Generate service worker.
+// Based on manifest, create a file with the content as service_worker.js
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const config = require("../paths.js");
+
+const swPath = path.resolve(config.root, "service_worker.js");
+
+const writeSW = (content) => fs.outputFileSync(swPath, content.trim() + "\n");
+
+gulp.task("gen-service-worker-dev", (done) => {
+  writeSW(
+    `
+console.debug('Service worker disabled in development');
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+  `
+  );
+  done();
+});
+
+gulp.task("gen-service-worker-prod", (done) => {
+  fs.copySync(
+    path.resolve(config.output, "service_worker.js"),
+    path.resolve(config.root, "service_worker.js")
+  );
+  done();
+});

build-scripts/gulp/translations.js

@@ -0,0 +1,404 @@
+const del = require("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const hashFilename = require("gulp-hash-filename");
+const merge = require("gulp-merge-json");
+const minify = require("gulp-jsonminify");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
+
+const inDir = "translations";
+const workDir = "build-translations";
+const fullDir = workDir + "/full";
+const coreDir = workDir + "/core";
+const outDir = workDir + "/output";
+
+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",
+];
+
+const tasks = [];
+
+function recursiveFlatten(prefix, data) {
+  let output = {};
+  Object.keys(data).forEach(function(key) {
+    if (typeof data[key] === "object") {
+      output = Object.assign(
+        {},
+        output,
+        recursiveFlatten(prefix + key + ".", data[key])
+      );
+    } else {
+      output[prefix + key] = data[key];
+    }
+  });
+  return output;
+}
+
+function flatten(data) {
+  return recursiveFlatten("", data);
+}
+
+function emptyFilter(data) {
+  const newData = {};
+  Object.keys(data).forEach((key) => {
+    if (data[key]) {
+      if (typeof data[key] === "object") {
+        newData[key] = emptyFilter(data[key]);
+      } else {
+        newData[key] = data[key];
+      }
+    }
+  });
+  return newData;
+}
+
+function recursiveEmpty(data) {
+  const newData = {};
+  Object.keys(data).forEach((key) => {
+    if (data[key]) {
+      if (typeof data[key] === "object") {
+        newData[key] = recursiveEmpty(data[key]);
+      } else {
+        newData[key] = "TRANSLATED";
+      }
+    }
+  });
+  return newData;
+}
+
+/**
+ * Replace Lokalise key placeholders with their actual values.
+ *
+ * We duplicate the behavior of Lokalise here so that placeholders can
+ * be included in src/translations/en.json, but still be usable while
+ * developing locally.
+ *
+ * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
+ */
+const re_key_reference = /\[%key:([^%]+)%\]/;
+function lokalise_transform(data, original) {
+  const output = {};
+  Object.entries(data).forEach(([key, value]) => {
+    if (value instanceof Object) {
+      output[key] = lokalise_transform(value, original);
+    } else {
+      output[key] = value.replace(re_key_reference, (match, key) => {
+        const replace = key.split("::").reduce((tr, k) => tr[k], original);
+        if (typeof replace !== "string") {
+          throw Error(
+            `Invalid key placeholder ${key} in src/translations/en.json`
+          );
+        }
+        return replace;
+      });
+    }
+  });
+  return output;
+}
+
+let taskName = "clean-translations";
+gulp.task(taskName, function() {
+  return del([`${outDir}/**/*.json`]);
+});
+tasks.push(taskName);
+
+gulp.task("ensure-translations-build-dir", (done) => {
+  if (!fs.existsSync(workDir)) {
+    fs.mkdirSync(workDir);
+  }
+  done();
+});
+
+taskName = "create-test-metadata";
+gulp.task(
+  taskName,
+  gulp.series("ensure-translations-build-dir", function writeTestMetaData(cb) {
+    fs.writeFile(
+      workDir + "/testMetadata.json",
+      JSON.stringify({
+        test: {
+          nativeName: "Test",
+        },
+      }),
+      cb
+    );
+  })
+);
+tasks.push(taskName);
+
+taskName = "create-test-translation";
+gulp.task(
+  taskName,
+  gulp.series("create-test-metadata", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return recursiveEmpty(data);
+        })
+      )
+      .pipe(rename("test.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+/**
+ * This task will build a master translation file, to be used as the base for
+ * all languages. This starts with src/translations/en.json, and replaces all
+ * Lokalise key placeholders with their target values. Under normal circumstances,
+ * this will be the same as translations/en.json However, we build it here to
+ * facilitate both making changes in development mode, and to ensure that the
+ * project is buildable immediately after merging new translation keys, since
+ * the Lokalise update to translations/en.json will not happen immediately.
+ */
+taskName = "build-master-translation";
+gulp.task(
+  taskName,
+  gulp.series("clean-translations", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return lokalise_transform(data, data);
+        })
+      )
+      .pipe(rename("translationMaster.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-merged-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-master-translation", function() {
+    return gulp
+      .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        foreach(function(stream, file) {
+          // For each language generate a merged json file. It begins with the master
+          // translation as a failsafe for untranslated strings, and merges all parent
+          // tags into one file for each specific subtag
+          //
+          // TODO: This is a naive interpretation of BCP47 that should be improved.
+          //       Will be OK for now as long as we don't have anything more complicated
+          //       than a base translation + region.
+          const tr = path.basename(file.history[0], ".json");
+          const subtags = tr.split("-");
+          const src = [workDir + "/translationMaster.json"];
+          for (let i = 1; i <= subtags.length; i++) {
+            const lang = subtags.slice(0, i).join("-");
+            if (lang === "test") {
+              src.push(workDir + "/test.json");
+            } else {
+              src.push(inDir + "/" + lang + ".json");
+            }
+          }
+          return gulp
+            .src(src, { allowEmpty: true })
+            .pipe(transform((data) => emptyFilter(data)))
+            .pipe(
+              merge({
+                fileName: tr + ".json",
+              })
+            )
+            .pipe(gulp.dest(fullDir));
+        })
+      );
+  })
+);
+tasks.push(taskName);
+
+const splitTasks = [];
+TRANSLATION_FRAGMENTS.forEach((fragment) => {
+  taskName = "build-translation-fragment-" + fragment;
+  gulp.task(
+    taskName,
+    gulp.series("build-merged-translations", function() {
+      // Return only the translations for this fragment.
+      return gulp
+        .src(fullDir + "/*.json")
+        .pipe(
+          transform((data) => ({
+            ui: {
+              panel: {
+                [fragment]: data.ui.panel[fragment],
+              },
+            },
+          }))
+        )
+        .pipe(gulp.dest(workDir + "/" + fragment));
+    })
+  );
+  tasks.push(taskName);
+  splitTasks.push(taskName);
+});
+
+taskName = "build-translation-core";
+gulp.task(
+  taskName,
+  gulp.series("build-merged-translations", function() {
+    // Remove the fragment translations from the core translation.
+    return gulp
+      .src(fullDir + "/*.json")
+      .pipe(
+        transform((data) => {
+          TRANSLATION_FRAGMENTS.forEach((fragment) => {
+            delete data.ui.panel[fragment];
+          });
+          return data;
+        })
+      )
+      .pipe(gulp.dest(coreDir));
+  })
+);
+tasks.push(taskName);
+splitTasks.push(taskName);
+
+taskName = "build-flattened-translations";
+gulp.task(
+  taskName,
+  gulp.series(...splitTasks, function() {
+    // Flatten the split versions of our translations, and move them into outDir
+    return gulp
+      .src(
+        TRANSLATION_FRAGMENTS.map(
+          (fragment) => workDir + "/" + fragment + "/*.json"
+        ).concat(coreDir + "/*.json"),
+        { base: workDir }
+      )
+      .pipe(
+        transform(function(data) {
+          // Polymer.AppLocalizeBehavior requires flattened json
+          return flatten(data);
+        })
+      )
+      .pipe(minify())
+      .pipe(hashFilename())
+      .pipe(
+        rename((filePath) => {
+          if (filePath.dirname === "core") {
+            filePath.dirname = "";
+          }
+        })
+      )
+      .pipe(gulp.dest(outDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-translation-fingerprints";
+gulp.task(
+  taskName,
+  gulp.series("build-flattened-translations", function() {
+    return gulp
+      .src(outDir + "/**/*.json")
+      .pipe(
+        rename({
+          extname: "",
+        })
+      )
+      .pipe(
+        hash({
+          algorithm: "md5",
+          hashLength: 32,
+          template: "<%= name %>.json",
+        })
+      )
+      .pipe(hash.manifest("translationFingerprints.json"))
+      .pipe(
+        transform(function(data) {
+          // After generating fingerprints of our translation files, consolidate
+          // all translation fragment fingerprints under the translation name key
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            const [path, _md5] = key.rsplit("-", 1);
+            // let translation = key;
+            let translation = path;
+            const parts = translation.split("/");
+            if (parts.length === 2) {
+              translation = parts[1];
+            }
+            if (!(translation in newData)) {
+              newData[translation] = {
+                fingerprints: {},
+              };
+            }
+            newData[translation].fingerprints[path] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-translation-fingerprints", function() {
+    return gulp
+      .src(
+        [
+          "src/translations/translationMetadata.json",
+          workDir + "/testMetadata.json",
+          workDir + "/translationFingerprints.json",
+        ],
+        { allowEmpty: true }
+      )
+      .pipe(merge({}))
+      .pipe(
+        transform(function(data) {
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            // Filter out translations without native name.
+            if (data[key].nativeName) {
+              newData[key] = data[key];
+            } else {
+              console.warn(
+                `Skipping language ${key}. Native name was not translated.`
+              );
+            }
+            if (data[key]) newData[key] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(
+        transform((data) => ({
+          fragments: TRANSLATION_FRAGMENTS,
+          translations: data,
+        }))
+      )
+      .pipe(rename("translationMetadata.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/webpack.js

@@ -0,0 +1,116 @@
+// Tasks to run webpack.
+const gulp = require("gulp");
+const path = require("path");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const paths = require("../paths");
+const { createAppConfig, createDemoConfig } = require("../webpack");
+
+const handler = (done) => (err, stats) => {
+  if (err) {
+    console.log(err.stack || err);
+    if (err.details) {
+      console.log(err.details);
+    }
+    return;
+  }
+
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
+  if (stats.hasErrors() || stats.hasWarnings()) {
+    console.log(stats.toString("minimal"));
+  }
+
+  if (done) {
+    done();
+  }
+};
+
+gulp.task("webpack-watch-app", () => {
+  const compiler = webpack([
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+  ]);
+  compiler.watch({}, handler());
+  // we are not calling done, so this command will run forever
+});
+
+gulp.task(
+  "webpack-prod-app",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-demo", () => {
+  const compiler = webpack([
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.demo_dir, "dist"),
+  }).listen(8080, "localhost", function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", "http://localhost:8080");
+  });
+});
+
+gulp.task(
+  "webpack-prod-demo",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);

build-scripts/paths.js

@@ -0,0 +1,17 @@
+var path = require("path");
+
+module.exports = {
+  polymer_dir: path.resolve(__dirname, ".."),
+
+  build_dir: path.resolve(__dirname, "../build"),
+  root: path.resolve(__dirname, "../hass_frontend"),
+  static: path.resolve(__dirname, "../hass_frontend/static"),
+  output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
+  output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+
+  demo_dir: path.resolve(__dirname, "../demo"),
+  demo_root: path.resolve(__dirname, "../demo/dist"),
+  demo_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
+};

build-scripts/webpack.js

@@ -0,0 +1,223 @@
+const webpack = require("webpack");
+const fs = require("fs");
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const paths = require("./paths.js");
+const { babelLoaderConfig } = require("./babel.js");
+
+let version = fs
+  .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+  .match(/\d{8}\.\d+/);
+if (!version) {
+  throw Error("Version not found");
+}
+version = version[0];
+
+const genMode = (isProdBuild) => (isProdBuild ? "production" : "development");
+const genDevTool = (isProdBuild) =>
+  isProdBuild ? "source-map" : "inline-cheap-module-source-map";
+const genFilename = (isProdBuild, dontHash = new Set()) => ({ chunk }) => {
+  if (!isProdBuild || dontHash.has(chunk.name)) {
+    return `${chunk.name}.js`;
+  }
+  return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+};
+const genChunkFilename = (isProdBuild, isStatsBuild) =>
+  isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
+
+const resolve = {
+  extensions: [".ts", ".js", ".json", ".tsx"],
+  alias: {
+    react: "preact-compat",
+    "react-dom": "preact-compat",
+    // Not necessary unless you consume a module using `createClass`
+    "create-react-class": "preact-compat/lib/create-react-class",
+    // Not necessary unless you consume a module requiring `react-dom-factories`
+    "react-dom-factories": "preact-compat/lib/react-dom-factories",
+  },
+};
+
+const cssLoader = {
+  test: /\.css$/,
+  use: "raw-loader",
+};
+const htmlLoader = {
+  test: /\.(html)$/,
+  use: {
+    loader: "html-loader",
+    options: {
+      exportAsEs6Default: true,
+    },
+  },
+};
+
+const plugins = [
+  // Ignore moment.js locales
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  // Color.js is bloated, it contains all color definitions for all material color sets.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/paper-styles\/color\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore roboto pointing at CDN. We use local font-roboto-local.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/font-roboto\/roboto\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore mwc icons pointing at CDN.
+  new webpack.NormalModuleReplacementPlugin(
+    /@material\/mwc-icon\/mwc-icon-font\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+];
+
+const optimization = (latestBuild) => ({
+  minimizer: [
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      extractComments: true,
+      sourceMap: true,
+      terserOptions: {
+        safari10: true,
+        ecma: latestBuild ? undefined : 5,
+      },
+    }),
+  ],
+});
+
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const isCI = process.env.CI === "true";
+
+  // Create an object mapping browser urls to their paths during build
+  const translationMetadata = require("../build-translations/translationMetadata.json");
+  const workBoxTranslationsTemplatedURLs = {};
+  const englishFP = translationMetadata["translations"]["en"]["fingerprints"];
+  Object.keys(englishFP).forEach((key) => {
+    workBoxTranslationsTemplatedURLs[
+      `/static/translations/${englishFP[key]}`
+    ] = `build-translations/output/${key}.json`;
+  });
+
+  const entry = {
+    app: "./src/entrypoints/app.ts",
+    authorize: "./src/entrypoints/authorize.ts",
+    onboarding: "./src/entrypoints/onboarding.ts",
+    core: "./src/entrypoints/core.ts",
+    compatibility: "./src/entrypoints/compatibility.ts",
+    "custom-panel": "./src/entrypoints/custom-panel.ts",
+    "hass-icons": "./src/entrypoints/hass-icons.ts",
+  };
+
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry,
+    module: {
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(!isProdBuild),
+        __DEMO__: false,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(version),
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+      isProdBuild &&
+        !isCI &&
+        !isStatsBuild &&
+        new CompressionPlugin({
+          cache: true,
+          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
+          algorithm(input, compressionOptions, callback) {
+            return zopfli.gzip(input, compressionOptions, callback);
+          },
+        }),
+      latestBuild &&
+        new WorkboxPlugin.InjectManifest({
+          swSrc: "./src/entrypoints/service-worker-hass.js",
+          swDest: "service_worker.js",
+          importWorkboxFrom: "local",
+          include: [/\.js$/],
+          templatedURLs: {
+            ...workBoxTranslationsTemplatedURLs,
+            "/static/icons/favicon-192x192.png":
+              "public/icons/favicon-192x192.png",
+            "/static/fonts/roboto/Roboto-Light.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
+            "/static/fonts/roboto/Roboto-Medium.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
+            "/static/fonts/roboto/Roboto-Regular.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
+            "/static/fonts/roboto/Roboto-Bold.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
+          },
+        }),
+    ].filter(Boolean),
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: latestBuild ? paths.output : paths.output_es5,
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+    },
+    resolve,
+  };
+};
+
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry: {
+      main: "./demo/src/entrypoint.ts",
+      compatibility: "./src/entrypoints/compatibility.ts",
+    },
+    module: {
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: !isProdBuild,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify("DEMO"),
+        __DEMO__: true,
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+    ].filter(Boolean),
+    resolve,
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: path.resolve(
+        paths.demo_root,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+    },
+  };
+};
+
+module.exports = {
+  resolve,
+  plugins,
+  optimization,
+  createAppConfig,
+  createDemoConfig,
+};