Merge pull request #3377 from home-assistant/dev

20190717.1

.gitignore

@@ -4,7 +4,6 @@ node_modules/*
 npm-debug.log
 .DS_Store
 hass_frontend/*
-hass_frontend_es5/*
 .reify-cache
 demo/hademo-icons.html
 

.nvmrc

@@ -1 +1 @@
-8.11.1
+12.1

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"

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

@@ -1,7 +1,7 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
-const config = require("../config");
+const paths = require("../paths");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -22,6 +22,7 @@ const BUILT_IN_PANEL_ICONS = [
   "mailbox", // Mailbox
   "tooltip-account", // Map
   "cart", // Shopping List
+  "hammer", // developer-tools
 ];
 
 // Given an icon name, load the SVG file
@@ -38,13 +39,13 @@ function loadIcon(name) {
 function transformXMLtoPolymer(name, xml) {
   const start = xml.indexOf("><path") + 1;
   const end = xml.length - start - 6;
-  const path = xml.substr(start, end);
-  return `<g id="${name}">${path}</g>`;
+  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(name, iconNames) {
-  const iconDefs = iconNames
+function generateIconset(iconsetName, iconNames) {
+  const iconDefs = Array.from(iconNames)
     .map((name) => {
       const iconDef = loadIcon(name);
       if (!iconDef) {
@@ -53,7 +54,7 @@ function generateIconset(name, iconNames) {
       return transformXMLtoPolymer(name, iconDef);
     })
     .join("");
-  return `<ha-iconset-svg name="${name}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
+  return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
 // Generate the full MDI iconset
@@ -62,7 +63,9 @@ function genMDIIcons() {
     fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
   );
   const iconNames = meta.map((iconInfo) => iconInfo.name);
-  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
   fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
 }
 
@@ -81,7 +84,7 @@ function mapFiles(startPath, filter, mapFunc) {
 }
 
 // Find all icons used by the project.
-function findIcons(path, iconsetName) {
+function findIcons(searchPath, iconsetName) {
   const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
   const icons = new Set();
   function processFile(filename) {
@@ -93,20 +96,38 @@ function findIcons(path, iconsetName) {
       icons.add(match[0].substr(iconsetName.length + 1));
     }
   }
-  mapFiles(path, ".js", processFile);
-  mapFiles(path, ".ts", processFile);
-  return Array.from(icons);
+  mapFiles(searchPath, ".js", processFile);
+  mapFiles(searchPath, ".ts", processFile);
+  return icons;
 }
 
 function genHassIcons() {
-  const iconNames = findIcons("./src", "hass").concat(BUILT_IN_PANEL_ICONS);
-  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  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", () => genMDIIcons());
-gulp.task("gen-icons-hass", () => genHassIcons());
-gulp.task("gen-icons", ["gen-icons-hass", "gen-icons-mdi"], () => {});
+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,

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,
+};

config/webpack.js

@@ -1,43 +0,0 @@
-const webpack = require("webpack");
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-
-module.exports.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",
-  },
-};
-
-module.exports.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(__dirname, "../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(__dirname, "../src/util/empty.js")
-  ),
-];
-
-module.exports.optimization = (latestBuild) => ({
-  minimizer: [
-    new TerserPlugin({
-      cache: true,
-      parallel: true,
-      extractComments: true,
-      terserOptions: {
-        ecma: latestBuild ? undefined : 5,
-      },
-    }),
-  ],
-});

demo/public/service_worker.js

@@ -0,0 +1,3 @@
+self.addEventListener("fetch", function(event) {
+  event.respondWith(fetch(event.request));
+});

demo/script/build_demo

@@ -4,16 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=dist
-
-rm -rf $OUTPUT_DIR
-mkdir $OUTPUT_DIR
-node script/gen-icons.js
-
-cd ..
-DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
-cd demo
-
-NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-demo

demo/script/develop_demo

@@ -4,12 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-node script/gen-icons.js
-
-cd ..
-DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
-cd demo
-
-../node_modules/.bin/webpack-dev-server
+./node_modules/.bin/gulp develop-demo

demo/script/gen-icons.js

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs");
-const {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-} = require("../../gulp/tasks/gen-icons.js");
-
-function genHademoIcons() {
-  const iconNames = findIcons("./src", "hademo");
-  fs.writeFileSync("./hademo-icons.html", generateIconset("hademo", iconNames));
-}
-
-genMDIIcons();
-genHademoIcons();

demo/src/configs/demo-configs.ts

@@ -3,10 +3,22 @@ import { Lovelace } from "../../../src/panels/lovelace/types";
 import { DemoConfig } from "./types";
 
 export const demoConfigs: Array<() => Promise<DemoConfig>> = [
-  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
-  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
-  () => import("./kernehed").then((mod) => mod.demoKernehed),
-  () => import("./jimpower").then((mod) => mod.demoJimpower),
+  () =>
+    import(/* webpackChunkName: "arsaboo" */ "./arsaboo").then(
+      (mod) => mod.demoArsaboo
+    ),
+  () =>
+    import(/* webpackChunkName: "teachingbirds" */ "./teachingbirds").then(
+      (mod) => mod.demoTeachingbirds
+    ),
+  () =>
+    import(/* webpackChunkName: "kernehed" */ "./kernehed").then(
+      (mod) => mod.demoKernehed
+    ),
+  () =>
+    import(/* webpackChunkName: "jimpower" */ "./jimpower").then(
+      (mod) => mod.demoJimpower
+    ),
 ];
 
 export let selectedDemoConfigIndex: number = 0;
@@ -25,7 +37,7 @@ export const setDemoConfig = async (
   selectedDemoConfigIndex = index;
   selectedDemoConfig = confProm;
 
-  hass.addEntities(config.entities(), true);
-  lovelace.saveConfig(config.lovelace());
+  hass.addEntities(config.entities(hass.localize), true);
+  lovelace.saveConfig(config.lovelace(hass.localize));
   hass.mockTheme(config.theme());
 };

demo/src/configs/jimpower/lovelace.ts

@@ -1,7 +1,7 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
 import "../../custom-cards/card-modder";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceJimpower: () => LovelaceConfig = () => ({
+export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
   name: "Kingia Castle",
   resources: [
     // {

demo/src/configs/kernehed/lovelace.ts

@@ -1,6 +1,6 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceKernehed: () => LovelaceConfig = () => ({
+export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
   name: "Hem",
   resources: [
     // {

demo/src/configs/teachingbirds/lovelace.ts

@@ -1,29 +1,7 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceTeachingbirds: () => LovelaceConfig = () => ({
+export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
   title: "Home",
-  resources: [
-    // {
-    //   url: "/local/lovelace/mini-media-player.js?v=0.6",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/lovelace/slider-entity-row.js?v=d6da75",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/monster-card.js?v=0.2.3",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/tracker-card.js?v=0.1.5",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/home-setter.js?v=0.0.1",
-    //   type: "js",
-    // },
-  ],
   views: [
     {
       cards: [
@@ -1201,484 +1179,5 @@ export const demoLovelaceTeachingbirds: () => LovelaceConfig = () => ({
       title: "Info",
       icon: "mdi:lan",
     },
-    // {
-    //   cards: [
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             "switch.dafang_night_mode",
-    //             "light.isa_ceiling_light",
-    //             "switch.dafang_h264_rtsp_server",
-    //           ],
-    //           camera_image: "camera.upstairs",
-    //           type: "picture-glance",
-    //           title: "Upstairs",
-    //         },
-    //         {
-    //           entities: [
-    //             {
-    //               tap_action: {
-    //                 action: "call-service",
-    //                 service: "script.dafang_down",
-    //               },
-    //               entity: "script.dafang_down",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_up",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_left",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_right",
-    //             },
-    //             {
-    //               entity: "script.dafang_calibrate",
-    //               hold_action: {
-    //                 action: "toggle",
-    //               },
-    //               tap_action: {
-    //                 action: "none",
-    //               },
-    //               icon: "mdi:reload",
-    //             },
-    //           ],
-    //           show_name: false,
-    //           type: "glance",
-    //           show_state: false,
-    //         },
-    //         {
-    //           type: "picture-entity",
-    //           entity: "camera.motion_dafang",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             "light.living_room_ceiling_light_level",
-    //             "light.living_room_spotlights_level",
-    //           ],
-    //           camera_image: "camera.back_door",
-    //           type: "picture-glance",
-    //           title: "Back door",
-    //         },
-    //         {
-    //           entities: [
-    //             {
-    //               entity: "script.sannce_down",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-down",
-    //             },
-    //             {
-    //               entity: "script.sannce_up",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-up",
-    //             },
-    //             {
-    //               entity: "script.sannce_left",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-left",
-    //             },
-    //             {
-    //               entity: "script.sannce_right",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-right",
-    //             },
-    //             {
-    //               entity: "script.sannce_calibrate",
-    //               hold_action: {
-    //                 action: "toggle",
-    //               },
-    //               tap_action: {
-    //                 action: "none",
-    //               },
-    //               icon: "mdi:reload",
-    //             },
-    //           ],
-    //           show_name: false,
-    //           type: "glance",
-    //           show_state: false,
-    //         },
-    //         {
-    //           type: "picture-entity",
-    //           entity: "camera.motion_sannce",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //     {
-    //       cards: [
-    //         {
-    //           entities: ["sensor.ring_front_door_battery"],
-    //           camera_image: "camera.front_door",
-    //           title: "Latest Motion Front Door",
-    //           show_state: false,
-    //           type: "picture-glance",
-    //           entity: "camera.front_door",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //   ],
-    //   path: "cameras",
-    //   title: "Cameras",
-    //   icon: "mdi:cctv",
-    // },
-    // {
-    //   cards: [
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             {
-    //               name: "Road temp",
-    //               entity: "sensor.trafikverket_alta_road_temperature",
-    //             },
-    //             {
-    //               entity: "sensor.homesolna_travel_time",
-    //               name: "Solna",
-    //               icon: "mdi:car",
-    //             },
-    //             {
-    //               entity: "sensor.homec9_travel_time",
-    //               name: "C9",
-    //               icon: "mdi:car",
-    //             },
-    //           ],
-    //           type: "glance",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.tpl_skvaltan",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_nacka",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.vikdalen",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_kvarnholmen",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.marinstaden",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.svindersvik",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.sicklatunneln",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_grondal",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //   ],
-    //   path: "traffic",
-    //   title: "Traffic info",
-    //   icon: "mdi:car",
-    // },
-    // {
-    //   cards: [
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "input_boolean.ad_*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Appdaemon Apps",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.cats*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Cats",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.house*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "House",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.lights*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Lights",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.presence*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Presence",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.security*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Security",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.system*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "System",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.temperature*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Temperature",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.tts*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "TTS",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "alert.*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Alerts",
-    //       },
-    //       show_empty: false,
-    //     },
-    //   ],
-    //   path: "automations",
-    //   title: "Automations",
-    //   icon: "mdi:flash-auto",
-    // },
-    {
-      cards: [
-        {
-          cards: [
-            {
-              entities: [
-                {
-                  url: "https://www.home-assistant.io/",
-                  type: "weblink",
-                  name: "Home Assistant",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url: "https://rc--home-assistant-docs.netlify.com/",
-                  type: "weblink",
-                  name: "Home Assistant Beta",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url:
-                    "https://github.com/home-assistant/home-assistant-polymer/releases",
-                  type: "weblink",
-                  name: "Lovelace release notes",
-                  icon: "mdi:home-heart",
-                },
-                {
-                  url: "https://s3.amazonaws.com/hassio-version/stable.json",
-                  type: "weblink",
-                  name: "Hassio build",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url:
-                    "https://github.com/dresden-elektronik/deconz-rest-plugin/releases",
-                  type: "weblink",
-                  name: "Deconz release notes",
-                  icon: "mdi:home-assistant",
-                },
-              ],
-              show_header_toggle: false,
-              type: "entities",
-              title: "Links",
-            },
-          ],
-          type: "vertical-stack",
-        },
-        // {
-        //   cards: [
-        //     {
-        //       type: "custom:home-setter",
-        //       pages: [
-        //         {
-        //           path: "lovelace/home",
-        //           name: "Default",
-        //         },
-        //         {
-        //           path: "lovelace/dashboard",
-        //           name: "Dashboard",
-        //         },
-        //       ],
-        //     },
-        //     {
-        //       title: null,
-        //       type: "custom:tracker-card",
-        //       trackers: [
-        //         "sensor.custom_card_tracker",
-        //         "sensor.custom_component_tracker",
-        //       ],
-        //     },
-        //   ],
-        //   type: "vertical-stack",
-        // },
-      ],
-      path: "settings",
-      title: "Settings",
-      icon: "mdi:cogs",
-    },
   ],
 });

demo/src/configs/types.ts

@@ -1,12 +1,13 @@
 import { LovelaceConfig } from "../../../src/data/lovelace";
 import { Entity } from "../../../src/fake_data/entity";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 
 export interface DemoConfig {
   index?: number;
   name: string;
   authorName: string;
   authorUrl: string;
-  lovelace: () => LovelaceConfig;
-  entities: () => Entity[];
+  lovelace: (localize: LocalizeFunc) => LovelaceConfig;
+  entities: (localize: LocalizeFunc) => Entity[];
   theme: () => { [key: string]: string } | null;
 }

demo/src/custom-cards/ha-demo-card.ts

@@ -6,12 +6,9 @@ import {
   PropertyDeclarations,
 } from "lit-element";
 import { until } from "lit-html/directives/until";
-import "@polymer/paper-icon-button";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-paper-icon-button-next";
-import "../../../src/components/ha-paper-icon-button-prev";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -24,8 +21,9 @@ import {
 
 export class HADemoCard extends LitElement implements LovelaceCard {
   public lovelace?: Lovelace;
-  public hass?: MockHomeAssistant;
+  public hass!: MockHomeAssistant;
   private _switching?: boolean;
+  private _hidden = localStorage.hide_demo_card;
 
   static get properties(): PropertyDeclarations {
     return {
@@ -36,7 +34,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize() {
-    return 2;
+    return this._hidden ? 0 : 2;
   }
 
   public setConfig(
@@ -46,14 +44,13 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   ) {}
 
   protected render() {
+    if (this._hidden) {
+      return;
+    }
     return html`
       <ha-card>
         <div class="picker">
-          <ha-paper-icon-button-prev
-            @click=${this._prevConfig}
-            .disabled=${this._switching}
-          ></ha-paper-icon-button-prev>
-          <div>
+          <div class="label">
             ${this._switching
               ? html`
                   <paper-spinner-lite active></paper-spinner-lite>
@@ -63,9 +60,12 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        by
                         <a target="_blank" href="${conf.authorUrl}">
-                          ${conf.authorName}
+                          ${this.hass.localize(
+                            "ui.panel.page-demo.cards.demo.demo_by",
+                            "name",
+                            conf.authorName
+                          )}
                         </a>
                       </small>
                     `
@@ -73,30 +73,29 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                   ""
                 )}
           </div>
-          <ha-paper-icon-button-next
-            @click=${this._nextConfig}
-            .disabled=${this._switching}
-          ></ha-paper-icon-button-next>
+          <mwc-button @click=${this._nextConfig} .disabled=${this._switching}>
+            ${this.hass.localize("ui.panel.page-demo.cards.demo.next_demo")}
+          </mwc-button>
         </div>
-        <div class="content">
-          Welcome home! You've reached the Home Assistant demo where we showcase
-          the best UIs created by our community.
+        <div class="content small-hidden">
+          ${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
         </div>
-        <div class="actions">
+        <div class="actions small-hidden">
           <a href="https://www.home-assistant.io" target="_blank">
-            <mwc-button>Learn more about Home Assistant</mwc-button>
+            <mwc-button>
+              ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
+            </mwc-button>
           </a>
         </div>
       </ha-card>
     `;
   }
 
-  private _prevConfig() {
-    this._updateConfig(
-      selectedDemoConfigIndex > 0
-        ? selectedDemoConfigIndex - 1
-        : demoConfigs.length - 1
-    );
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    if (this._hidden) {
+      this.style.display = "none";
+    }
   }
 
   private _nextConfig() {
@@ -110,7 +109,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   private async _updateConfig(index: number) {
     this._switching = true;
     try {
-      await setDemoConfig(this.hass!, this.lovelace!, index);
+      await setDemoConfig(this.hass, this.lovelace!, index);
     } catch (err) {
       alert("Failed to switch config :-(");
     } finally {
@@ -125,6 +124,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           color: var(--primary-color);
         }
 
+        .actions a {
+          text-decoration: none;
+        }
+
         .content {
           padding: 16px;
         }
@@ -136,17 +139,27 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           height: 60px;
         }
 
-        .picker div {
-          text-align: center;
+        .picker mwc-button {
+          margin-right: 8px;
         }
 
-        .picker small {
+        .label {
+          padding-left: 16px;
+        }
+
+        .label small {
           display: block;
         }
 
         .actions {
           padding-left: 8px;
         }
+
+        @media only screen and (max-width: 500px) {
+          .small-hidden {
+            display: none;
+          }
+        }
       `,
     ];
   }

demo/src/ha-demo.ts

@@ -1,4 +1,4 @@
-import { HomeAssistantAppEl } from "../../src/layouts/app/home-assistant";
+import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import {
   provideHass,
   MockHomeAssistant,
@@ -18,7 +18,7 @@ import { HomeAssistant } from "../../src/types";
 import { mockFrontend } from "./stubs/frontend";
 
 class HaDemo extends HomeAssistantAppEl {
-  protected async _handleConnProm() {
+  protected async _initialize() {
     const initial: Partial<MockHomeAssistant> = {
       panelUrl: (this as any).panelUrl,
       // Override updateHass so that the correct hass lifecycle methods are called
@@ -26,8 +26,14 @@ class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial);
-    mockLovelace(hass);
+    const hass = (this.hass = provideHass(this, initial));
+    const localizePromise =
+      // @ts-ignore
+      this._loadFragmentTranslations(hass.language, "page-demo").then(
+        () => this.hass!.localize
+      );
+
+    mockLovelace(hass, localizePromise);
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
@@ -37,12 +43,16 @@ class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
-    selectedDemoConfig.then((conf) => {
-      hass.addEntities(conf.entities());
-      if (conf.theme) {
-        hass.mockTheme(conf.theme());
+
+    // Once config is loaded AND localize, set entities and apply theme.
+    Promise.all([selectedDemoConfig, localizePromise]).then(
+      ([conf, localize]) => {
+        hass.addEntities(conf.entities(localize));
+        if (conf.theme) {
+          hass.mockTheme(conf.theme());
+        }
       }
-    });
+    );
 
     // Taken from polymer/pwa-helpers. BSD-3 licensed
     document.body.addEventListener(

demo/src/html/index.html.template

@@ -7,13 +7,13 @@
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.ttf"
+      href="/static/fonts/roboto/Roboto-Regular.woff2"
       as="font"
       crossorigin
     />
     <link
       rel="preload"
-      href="/static/fonts/roboto/Roboto-Medium.ttf"
+      href="/static/fonts/roboto/Roboto-Medium.woff2"
       as="font"
       crossorigin
     />
@@ -74,9 +74,6 @@
       content="https://www.home-assistant.io/images/default-social.png"
     />
     <title>Home Assistant Demo</title>
-    <script src="./custom-elements-es5-adapter.js"></script>
-    <script src="./compatibility.js"></script>
-    <script src="./main.js" async></script>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;
@@ -90,7 +87,7 @@
       #ha-init-skeleton::before {
         display: block;
         content: "";
-        height: 112px;
+        height: 64px;
         background-color: #03a9f4;
       }
     </style>
@@ -98,6 +95,21 @@
   <body>
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
+    <%= renderTemplate('_js_base') %>
+
+    <script type="module" src="<%= latestDemoJS %>"></script>
+
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+          _ls("<%= es5Compatibility %>");
+          _ls("<%= es5DemoJS %>");
+        }
+      })();
+    </script>
+
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function(d, t) {

demo/src/stubs/lovelace.ts

@@ -4,12 +4,16 @@ import "../custom-cards/ha-demo-card";
 import { HADemoCard } from "../custom-cards/ha-demo-card";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { selectedDemoConfig } from "../configs/demo-configs";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 
-export const mockLovelace = (hass: MockHomeAssistant) => {
-  selectedDemoConfig.then((config) => hass.addEntities(config.entities()));
-
+export const mockLovelace = (
+  hass: MockHomeAssistant,
+  localizePromise: Promise<LocalizeFunc>
+) => {
   hass.mockWS("lovelace/config", () =>
-    selectedDemoConfig.then((config) => config.lovelace())
+    Promise.all([selectedDemoConfig, localizePromise]).then(
+      ([config, localize]) => config.lovelace(localize)
+    )
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

demo/webpack.config.js

@@ -1,90 +1,13 @@
-const path = require("path");
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const WorkboxPlugin = require("workbox-webpack-plugin");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { createDemoConfig } = require("../build-scripts/webpack.js");
 
-const isProd = process.env.NODE_ENV === "production";
+// This file exists because we haven't migrated the stats script yet
+
+const isProdBuild = process.env.NODE_ENV === "production";
 const isStatsBuild = process.env.STATS === "1";
-const chunkFilename =
-  isProd && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
-const buildPath = path.resolve(__dirname, "dist");
-const publicPath = "/";
-
 const latestBuild = false;
 
-module.exports = {
-  mode: isProd ? "production" : "development",
-  devtool: isProd ? "cheap-source-map" : "inline-source-map",
-  entry: {
-    main: "./src/entrypoint.ts",
-    compatibility: "../src/entrypoints/compatibility.js",
-  },
-  module: {
-    rules: [
-      babelLoaderConfig({ latestBuild }),
-      {
-        test: /\.css$/,
-        use: "raw-loader",
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
-        },
-      },
-    ],
-  },
-  optimization: webpackBase.optimization(latestBuild),
-  plugins: [
-    new webpack.DefinePlugin({
-      __DEV__: false,
-      __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-      __VERSION__: JSON.stringify("DEMO"),
-      __DEMO__: true,
-      __STATIC_PATH__: "/static/",
-      "process.env.NODE_ENV": JSON.stringify(
-        isProd ? "production" : "development"
-      ),
-    }),
-    new CopyWebpackPlugin([
-      "public",
-      "../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
-      { from: "../public", to: "static" },
-      { from: "../build-translations/output", to: "static/translations" },
-      {
-        from: "../node_modules/leaflet/dist/leaflet.css",
-        to: "static/images/leaflet/",
-      },
-      {
-        from: "../node_modules/@polymer/font-roboto-local/fonts",
-        to: "static/fonts",
-      },
-      {
-        from: "../node_modules/leaflet/dist/images",
-        to: "static/images/leaflet/",
-      },
-    ]),
-    ...webpackBase.plugins,
-    isProd &&
-      new WorkboxPlugin.GenerateSW({
-        swDest: "service_worker_es5.js",
-        importWorkboxFrom: "local",
-        include: [],
-      }),
-  ].filter(Boolean),
-  resolve: webpackBase.resolve,
-  output: {
-    filename: "[name].js",
-    chunkFilename: chunkFilename,
-    path: buildPath,
-    publicPath,
-  },
-  devServer: {
-    contentBase: "./public",
-  },
-};
+module.exports = createDemoConfig({
+  isProdBuild,
+  isStatsBuild,
+  latestBuild,
+});

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -14,14 +14,14 @@ const ENTITIES = [
     target_temp_high: 75,
     target_temp_low: 70,
     fan_mode: "Auto Low",
-    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    operation_mode: "auto",
-    operation_list: ["heat", "cool", "auto", "off"],
-    hold_mode: "home",
+    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    hvac_modes: ["heat", "cool", "auto", "off"],
     swing_mode: "Auto",
-    swing_list: ["Auto", "1", "2", "3", "Off"],
+    swing_modes: ["Auto", "1", "2", "3", "Off"],
     friendly_name: "Ecobee",
-    supported_features: 1014,
+    supported_features: 59,
+    preset_mode: "eco",
+    preset_modes: ["away", "eco"],
   }),
   getEntity("climate", "nest", "heat", {
     current_temperature: 17,
@@ -29,14 +29,12 @@ const ENTITIES = [
     max_temp: 25,
     temperature: 19,
     fan_mode: "Auto Low",
-    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    operation_mode: "heat",
-    operation_list: ["heat", "cool", "auto", "off"],
-    hold_mode: "home",
+    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    hvac_modes: ["heat", "cool", "auto", "off"],
     swing_mode: "Auto",
-    swing_list: ["Auto", "1", "2", "3", "Off"],
+    swing_modes: ["Auto", "1", "2", "3", "Off"],
     friendly_name: "Nest",
-    supported_features: 1014,
+    supported_features: 43,
   }),
 ];
 

gallery/src/ha-gallery.js

@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-icon-button/paper-icon-button";
@@ -10,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../src/managers/notification-manager";
+import "../../src/components/ha-card";
 
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
@@ -38,13 +38,13 @@ class HaGallery extends PolymerElement {
         align-items: start;
       }
 
-      .pickers paper-card {
+      .pickers ha-card {
         width: 400px;
         display: block;
         margin: 16px 8px;
       }
 
-      .pickers paper-card:last-child {
+      .pickers ha-card:last-child {
         margin-bottom: 16px;
       }
 
@@ -56,7 +56,7 @@ class HaGallery extends PolymerElement {
         color: var(--primary-color);
       }
 
-      a paper-item {
+      a {
         color: var(--primary-text-color);
         text-decoration: none;
       }
@@ -79,7 +79,7 @@ class HaGallery extends PolymerElement {
           <div id='demo'></div>
           <template is='dom-if' if='[[!_demo]]'>
             <div class='pickers'>
-              <paper-card heading="Lovelace card demos">
+              <ha-card header="Lovelace card demos">
                 <div class='card-content intro'>
                   <p>
                     Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
@@ -101,9 +101,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="More Info demos">
+              <ha-card header="More Info demos">
                 <div class='card-content intro'>
                   <p>
                     More info screens show up when an entity is clicked.
@@ -117,9 +117,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="Util demos">
+              <ha-card header="Util demos">
                 <div class='card-content intro'>
                   <p>
                     Test pages for our utility functions.
@@ -133,17 +133,27 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
             </div>
           </template>
         </div>
       </app-header-layout>
-      <notification-manager id='notifications'></notification-manager>
+      <notification-manager hass=[[_fakeHass]] id='notifications'></notification-manager>
     `;
   }
 
   static get properties() {
     return {
+      _fakeHass: {
+        type: Object,
+        // Just enough for computeRTL
+        value: {
+          language: "en",
+          translationMetadata: {
+            translations: {},
+          },
+        },
+      },
       _demo: {
         type: String,
         value: document.location.hash.substr(1),

gallery/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
+const webpackBase = require("../build-scripts/webpack.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -44,8 +44,8 @@ module.exports = {
         to: "static/images/leaflet/",
       },
       {
-        from: "../node_modules/@polymer/font-roboto-local/fonts",
-        to: "static/fonts",
+        from: "../node_modules/roboto-fontface/fonts/roboto/*.woff2",
+        to: "static/fonts/roboto/",
       },
       {
         from: "../node_modules/leaflet/dist/images",

gulp/config.js

@@ -1,8 +0,0 @@
-var path = require("path");
-
-module.exports = {
-  polymer_dir: path.resolve(__dirname, ".."),
-  build_dir: path.resolve(__dirname, "../build"),
-  output: path.resolve(__dirname, "../hass_frontend"),
-  output_es5: path.resolve(__dirname, "../hass_frontend_es5"),
-};

gulp/tasks/translations.js

@@ -1,315 +0,0 @@
-const del = require("del");
-const path = require("path");
-const gulp = require("gulp");
-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-onboarding",
-];
-
-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;
-}
-
-/**
- * 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);
-
-/**
- * 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, ["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, ["build-master-translation"], function() {
-  return gulp.src(inDir + "/*.json").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("-");
-        src.push(inDir + "/" + lang + ".json");
-      }
-      return gulp
-        .src(src)
-        .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, ["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, ["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, 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, ["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, ["build-translation-fingerprints"], function() {
-  return gulp
-    .src([
-      "src/translations/translationMetadata.json",
-      workDir + "/translationFingerprints.json",
-    ])
-    .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;

gulpfile.js

@@ -1,3 +1,3 @@
-var requireDir = require('require-dir');
+var requireDir = require("require-dir");
 
-requireDir('./gulp/tasks/');
+requireDir("./build-scripts/gulp/");

hassio/script/gen-icons.js

@@ -4,12 +4,15 @@ const {
   findIcons,
   generateIconset,
   genMDIIcons,
-} = require("../../gulp/tasks/gen-icons.js");
-
-const MENU_BUTTON_ICON = "menu";
+} = require("../../build-scripts/gulp/gen-icons.js");
 
 function genHassioIcons() {
-  const iconNames = findIcons("./src", "hassio").concat(MENU_BUTTON_ICON);
+  const iconNames = findIcons("./src", "hassio");
+
+  for (const item of findIcons("../src", "hassio")) {
+    iconNames.add(item);
+  }
+
   fs.writeFileSync("./hassio-icons.html", generateIconset("hassio", iconNames));
 }
 

hassio/src/addon-store/hassio-addon-repository.js

@@ -1,103 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hassio-card-content";
-import "../resources/hassio-style";
-import NavigateMixin from "../../../src/mixins/navigate-mixin";
-
-class HassioAddonRepository extends NavigateMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style hassio-style">
-        paper-card {
-          cursor: pointer;
-        }
-        .not_available {
-          opacity: 0.6;
-        }
-        a.repo {
-          display: block;
-          color: var(--primary-text-color);
-        }
-      </style>
-      <template is="dom-if" if="[[addons.length]]">
-        <div class="card-group">
-          <div class="title">
-            [[repo.name]]
-            <div class="description">
-              Maintained by [[repo.maintainer]]
-              <a class="repo" href="[[repo.url]]" target="_blank"
-                >[[repo.url]]</a
-              >
-            </div>
-          </div>
-          <template
-            is="dom-repeat"
-            items="[[addons]]"
-            as="addon"
-            sort="sortAddons"
-          >
-            <paper-card class$="[[computeClass(addon)]]" on-click="addonTapped">
-              <div class="card-content">
-                <hassio-card-content
-                  hass="[[hass]]"
-                  title="[[addon.name]]"
-                  description="[[addon.description]]"
-                  available="[[addon.available]]"
-                  icon="[[computeIcon(addon)]]"
-                  icon-title="[[computeIconTitle(addon)]]"
-                  icon-class="[[computeIconClass(addon)]]"
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          </template>
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      repo: Object,
-      addons: Array,
-    };
-  }
-
-  sortAddons(a, b) {
-    return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
-  }
-
-  computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version
-      ? "hassio:arrow-up-bold-circle"
-      : "hassio:puzzle";
-  }
-
-  computeIconTitle(addon) {
-    if (addon.installed)
-      return addon.installed !== addon.version
-        ? "New version available"
-        : "Add-on is installed";
-    return addon.available
-      ? "Add-on is not installed"
-      : "Add-on is not available on your system";
-  }
-
-  computeIconClass(addon) {
-    if (addon.installed)
-      return addon.installed !== addon.version ? "update" : "installed";
-    return !addon.available ? "not_available" : "";
-  }
-
-  computeClass(addon) {
-    return !addon.available ? "not_available" : "";
-  }
-
-  addonTapped(ev) {
-    this.navigate(`/hassio/addon/${ev.model.addon.slug}`);
-  }
-}
-
-customElements.define("hassio-addon-repository", HassioAddonRepository);

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

@@ -0,0 +1,135 @@
+import {
+  css,
+  TemplateResult,
+  html,
+  LitElement,
+  property,
+  CSSResultArray,
+} from "lit-element";
+import "@polymer/paper-card/paper-card";
+import memoizeOne from "memoize-one";
+
+import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioAddonInfo,
+  HassioAddonRepository,
+} from "../../../src/data/hassio";
+import { navigate } from "../../../src/common/navigate";
+import { filterAndSort } from "../components/hassio-filter-addons";
+
+class HassioAddonRepositoryEl extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public repo!: HassioAddonRepository;
+  @property() public addons!: HassioAddonInfo[];
+  @property() public filter!: string;
+
+  private _getAddons = memoizeOne(
+    (addons: HassioAddonInfo[], filter?: string) => {
+      if (filter) {
+        return filterAndSort(addons, filter);
+      }
+      return addons.sort((a, b) =>
+        a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+      );
+    }
+  );
+
+  protected render(): TemplateResult | void {
+    const repo = this.repo;
+    const addons = this._getAddons(this.addons, this.filter);
+
+    if (this.filter && addons.length < 1) {
+      return html`
+        <div class="card-group">
+          <div class="title">
+            <div class="description">
+              No results found in "${repo.name}"
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="card-group">
+        <div class="title">
+          ${repo.name}
+          <div class="description">
+            Maintained by ${repo.maintainer}<br />
+            <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
+          </div>
+        </div>
+
+        ${addons.map(
+          (addon) => html`
+            <paper-card
+              .addon=${addon}
+              class=${addon.available ? "" : "not_available"}
+              @click=${this.addonTapped}
+            >
+              <div class="card-content">
+                <hassio-card-content
+                  .hass=${this.hass}
+                  .title=${addon.name}
+                  .description=${addon.description}
+                  .available=${addon.available}
+                  .icon=${this.computeIcon(addon)}
+                  .iconTitle=${this.computeIconTitle(addon)}
+                  .iconClass=${this.computeIconClass(addon)}
+                ></hassio-card-content>
+              </div>
+            </paper-card>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  private computeIcon(addon) {
+    return addon.installed && addon.installed !== addon.version
+      ? "hassio:arrow-up-bold-circle"
+      : "hassio:puzzle";
+  }
+
+  private computeIconTitle(addon) {
+    if (addon.installed) {
+      return addon.installed !== addon.version
+        ? "New version available"
+        : "Add-on is installed";
+    }
+    return addon.available
+      ? "Add-on is not installed"
+      : "Add-on is not available on your system";
+  }
+
+  private computeIconClass(addon) {
+    if (addon.installed) {
+      return addon.installed !== addon.version ? "update" : "installed";
+    }
+    return !addon.available ? "not_available" : "";
+  }
+
+  private addonTapped(ev) {
+    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      hassioStyle,
+      css`
+        paper-card {
+          cursor: pointer;
+        }
+        .not_available {
+          opacity: 0.6;
+        }
+        a.repo {
+          color: var(--primary-text-color);
+        }
+      `,
+    ];
+  }
+}
+
+customElements.define("hassio-addon-repository", HassioAddonRepositoryEl);

hassio/src/addon-store/hassio-addon-store.js

@@ -1,92 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./hassio-addon-repository";
-import "./hassio-repositories-editor";
-
-class HassioAddonStore extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        hassio-addon-repository {
-          margin-top: 24px;
-        }
-      </style>
-      <hassio-repositories-editor
-        hass="[[hass]]"
-        repos="[[repos]]"
-      ></hassio-repositories-editor>
-
-      <template is="dom-repeat" items="[[repos]]" as="repo" sort="sortRepos">
-        <hassio-addon-repository
-          hass="[[hass]]"
-          repo="[[repo]]"
-          addons="[[computeAddons(repo.slug)]]"
-        ></hassio-addon-repository>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      addons: Array,
-      repos: Array,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
-    this.loadData();
-  }
-
-  apiCalled(ev) {
-    if (ev.detail.success) {
-      this.loadData();
-    }
-  }
-
-  sortRepos(a, b) {
-    if (a.slug === "local") {
-      return -1;
-    }
-    if (b.slug === "local") {
-      return 1;
-    }
-    if (a.slug === "core") {
-      return -1;
-    }
-    if (b.slug === "core") {
-      return 1;
-    }
-    return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
-  }
-
-  computeAddons(repo) {
-    return this.addons.filter(function(addon) {
-      return addon.repository === repo;
-    });
-  }
-
-  loadData() {
-    this.hass.callApi("get", "hassio/addons").then(
-      (info) => {
-        this.addons = info.data.addons;
-        this.repos = info.data.repositories;
-      },
-      () => {
-        this.addons = [];
-        this.repos = [];
-      }
-    );
-  }
-
-  refreshData() {
-    this.hass.callApi("post", "hassio/addons/reload").then(() => {
-      this.loadData();
-    });
-  }
-}
-
-customElements.define("hassio-addon-store", HassioAddonStore);

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

@@ -0,0 +1,129 @@
+import "./hassio-addon-repository";
+import "./hassio-repositories-editor";
+import { TemplateResult, html } from "lit-html";
+import {
+  LitElement,
+  CSSResult,
+  css,
+  property,
+  PropertyValues,
+} from "lit-element";
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioAddonRepository,
+  HassioAddonInfo,
+  fetchHassioAddonsInfo,
+  reloadHassioAddons,
+} from "../../../src/data/hassio";
+import "../../../src/layouts/loading-screen";
+import "../components/hassio-search-input";
+
+const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
+  if (a.slug === "local") {
+    return -1;
+  }
+  if (b.slug === "local") {
+    return 1;
+  }
+  if (a.slug === "core") {
+    return -1;
+  }
+  if (b.slug === "core") {
+    return 1;
+  }
+  return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
+};
+
+class HassioAddonStore extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() private _addons?: HassioAddonInfo[];
+  @property() private _repos?: HassioAddonRepository[];
+  @property() private _filter?: string;
+
+  public async refreshData() {
+    this._repos = undefined;
+    this._addons = undefined;
+    this._filter = undefined;
+    await reloadHassioAddons(this.hass);
+    await this._loadData();
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._addons || !this._repos) {
+      return html`
+        <loading-screen></loading-screen>
+      `;
+    }
+    const repos: TemplateResult[] = [];
+
+    for (const repo of this._repos) {
+      const addons = this._addons!.filter(
+        (addon) => addon.repository === repo.slug
+      );
+
+      if (addons.length === 0) {
+        continue;
+      }
+
+      repos.push(html`
+        <hassio-addon-repository
+          .hass=${this.hass}
+          .repo=${repo}
+          .addons=${addons}
+          .filter=${this._filter}
+        ></hassio-addon-repository>
+      `);
+    }
+
+    return html`
+      <hassio-repositories-editor
+        .hass=${this.hass}
+        .repos=${this._repos}
+      ></hassio-repositories-editor>
+
+      <hassio-search-input
+        .filter=${this._filter}
+        @value-changed=${this._filterChanged}
+      ></hassio-search-input>
+
+      ${repos}
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+    this._loadData();
+  }
+
+  private apiCalled(ev) {
+    if (ev.detail.success) {
+      this._loadData();
+    }
+  }
+
+  private async _loadData() {
+    try {
+      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      this._repos = addonsInfo.repositories;
+      this._repos.sort(sortRepos);
+      this._addons = addonsInfo.addons;
+    } catch (err) {
+      alert("Failed to fetch add-on info");
+    }
+  }
+
+  private async _filterChanged(e) {
+    this._filter = e.detail.value;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      hassio-addon-repository {
+        margin-top: 24px;
+      }
+    `;
+  }
+}
+
+customElements.define("hassio-addon-store", HassioAddonStore);

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

@@ -1,120 +0,0 @@
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/components/buttons/ha-call-api-button";
-import "../components/hassio-card-content";
-import "../resources/hassio-style";
-
-class HassioRepositoriesEditor extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-style hassio-style">
-        .add {
-          padding: 12px 16px;
-        }
-        iron-icon {
-          color: var(--secondary-text-color);
-          margin-right: 16px;
-          display: inline-block;
-        }
-        paper-input {
-          width: calc(100% - 49px);
-          display: inline-block;
-        }
-      </style>
-      <div class="card-group">
-        <div class="title">
-          Repositories
-          <div class="description">
-            Configure which add-on repositories to fetch data from:
-          </div>
-        </div>
-        <template
-          id="list"
-          is="dom-repeat"
-          items="[[repoList]]"
-          as="repo"
-          sort="sortRepos"
-        >
-          <paper-card>
-            <div class="card-content">
-              <hassio-card-content
-                hass="[[hass]]"
-                title="[[repo.name]]"
-                description="[[repo.url]]"
-                icon="hassio:github-circle"
-              ></hassio-card-content>
-            </div>
-            <div class="card-actions">
-              <ha-call-api-button
-                hass="[[hass]]"
-                path="hassio/supervisor/options"
-                data="[[computeRemoveRepoData(repoList, repo.url)]]"
-                class="warning"
-                >Remove</ha-call-api-button
-              >
-            </div>
-          </paper-card>
-        </template>
-        <paper-card>
-          <div class="card-content add">
-            <iron-icon icon="hassio:github-circle"></iron-icon>
-            <paper-input
-              label="Add new repository by URL"
-              value="{{repoUrl}}"
-            ></paper-input>
-          </div>
-          <div class="card-actions">
-            <ha-call-api-button
-              hass="[[hass]]"
-              path="hassio/supervisor/options"
-              data="[[computeAddRepoData(repoList, repoUrl)]]"
-              >Add</ha-call-api-button
-            >
-          </div>
-        </paper-card>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      repos: {
-        type: Array,
-        observer: "reposChanged",
-      },
-      repoList: Array,
-      repoUrl: String,
-    };
-  }
-
-  reposChanged(repos) {
-    this.repoList = repos.filter(
-      (repo) => repo.slug !== "core" && repo.slug !== "local"
-    );
-    this.repoUrl = "";
-  }
-
-  sortRepos(a, b) {
-    return a.name < b.name ? -1 : 1;
-  }
-
-  computeRemoveRepoData(repoList, url) {
-    const list = repoList
-      .filter((repo) => repo.url !== url)
-      .map((repo) => repo.url);
-    return { addons_repositories: list };
-  }
-
-  computeAddRepoData(repoList, url) {
-    const list = repoList ? repoList.map((repo) => repo.url) : [];
-    list.push(url);
-    return { addons_repositories: list };
-  }
-}
-
-customElements.define("hassio-repositories-editor", HassioRepositoriesEditor);

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

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

hassio/src/addon-view/hassio-addon-audio.js

@@ -9,7 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioAddonAudio extends EventsMixin(PolymerElement) {
   static get template() {

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

@@ -1,6 +1,7 @@
 import "@polymer/iron-icon/iron-icon";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
+import "@polymer/paper-tooltip/paper-tooltip";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -9,55 +10,62 @@ import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
+import { navigate } from "../../../src/common/navigate";
 
+import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import "../components/hassio-card-content";
 
 const PERMIS_DESC = {
   rating: {
-    title: "Addon Security Rating",
+    title: "Add-on Security Rating",
     description:
-      "Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an addon requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
+      "Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
   },
   host_network: {
     title: "Host Network",
     description:
-      "Add-ons usually run in their own isolated network layer, which prevents them from accessing the network of the host operating system. In some cases, this network isolation can limit add-ons in providing their services and therefore, the isolation can be lifted by the add-on author, giving the addon full access to the network capabilities of the host machine. This gives the addon more networking capabilities but lowers the security, hence, the security rating of the add-on will be lowered when this option is used by the addon.",
+      "Add-ons usually run in their own isolated network layer, which prevents them from accessing the network of the host operating system. In some cases, this network isolation can limit add-ons in providing their services and therefore, the isolation can be lifted by the add-on author, giving the add-on full access to the network capabilities of the host machine. This gives the add-on more networking capabilities but lowers the security, hence, the security rating of the add-on will be lowered when this option is used by the add-on.",
   },
   homeassistant_api: {
     title: "Home Assistant API Access",
     description:
-      "This add-on is allowed to access your running Home Assistant instance directly via the Home Assistant API. This mode handles authentication for the addon as well, which enables an addon to interact with Home Assistant without the need for additional authentication tokens.",
+      "This add-on is allowed to access your running Home Assistant instance directly via the Home Assistant API. This mode handles authentication for the add-on as well, which enables an add-on to interact with Home Assistant without the need for additional authentication tokens.",
   },
   full_access: {
     title: "Full Hardware Access",
     description:
-      "This addon is given full access to the hardware of your system, by request of the addon author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+      "This add-on is given full access to the hardware of your system, by request of the add-on author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   hassio_api: {
     title: "Hass.io API Access",
     description:
-      "The addon was given access to the Hass.io API, by request of the addon author. By default, the addon can access general version information of your system. When the addon requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Hass.io system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
+      "The add-on was given access to the Hass.io API, by request of the add-on author. By default, the add-on can access general version information of your system. When the add-on requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Hass.io system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
   },
   docker_api: {
     title: "Full Docker Access",
     description:
-      "The addon author has requested the addon to have management access to the Docker instance running on your system. This mode gives the addon full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+      "The add-on author has requested the add-on to have management access to the Docker instance running on your system. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   host_pid: {
     title: "Host Processes Namespace",
     description:
-      "Usually, the processes the addon runs, are isolated from all other system processes. The addon author has requested the addon to have access to the system processes running on the host system instance, and allow the addon to spawn processes on the host system as well. This mode gives the addon full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+      "Usually, the processes the add-on runs, are isolated from all other system processes. The add-on author has requested the add-on to have access to the system processes running on the host system instance, and allow the add-on to spawn processes on the host system as well. This mode gives the add-on full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
   },
   apparmor: {
     title: "AppArmor",
     description:
-      "AppArmor ('Application Armor') is a Linux kernel security module that restricts addons capabilities like network access, raw socket access, and permission to read, write, or execute specific files.\n\nAddon authors can provide their security profiles, optimized for the addon, or request it to be disabled. If AppArmor is disabled, it will raise security risks and therefore, has a negative impact on the security score of the addon.",
+      "AppArmor ('Application Armor') is a Linux kernel security module that restricts add-ons capabilities like network access, raw socket access, and permission to read, write, or execute specific files.\n\nAdd-on authors can provide their security profiles, optimized for the add-on, or request it to be disabled. If AppArmor is disabled, it will raise security risks and therefore, has a negative impact on the security score of the add-on.",
   },
   auth_api: {
     title: "Home Assistant Authentication",
     description:
-      "An addon can authenticate users against Home Assistant, allowing add-ons to give users the possibility to log into applications running inside add-ons, using their Home Assistant username/password. This badge indicates if the add-on author requests this capability.",
+      "An add-on can authenticate users against Home Assistant, allowing add-ons to give users the possibility to log into applications running inside add-ons, using their Home Assistant username/password. This badge indicates if the add-on author requests this capability.",
+  },
+  ingress: {
+    title: "Ingress",
+    description:
+      "This add-on is using Ingress to embed its interface securely into Home Assistant.",
   },
 };
 
@@ -102,10 +110,18 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           margin: 16px 0;
           display: block;
         }
+        .state {
+          display: flex;
+          margin: 8px 0;
+        }
         .state div {
-          width: 150px;
+          width: 180px;
           display: inline-block;
         }
+        .state iron-icon {
+          width: 16px;
+          color: var(--secondary-text-color);
+        }
         paper-toggle-button {
           display: inline;
         }
@@ -149,6 +165,12 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           margin-right: 4px;
           --iron-icon-height: 45px;
         }
+        .protection-enable mwc-button {
+          --mdc-theme-primary: white;
+        }
+        .description a, ha-markdown a {
+          color: var(--primary-color);
+        }
       </style>
 
       <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
@@ -161,12 +183,18 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               icon="hassio:arrow-up-bold-circle"
               icon-class="update"
             ></hassio-card-content>
+            <template is="dom-if" if="[[!addon.available]]">
+              <p>This update is no longer compatible with your system.</p>
+            </template>
           </div>
           <div class="card-actions">
             <ha-call-api-button
               hass="[[hass]]"
               path="hassio/addons/[[addonSlug]]/update"
-              >Update</ha-call-api-button
+              disabled="[[!addon.available]]"
+              >
+              Update
+              </ha-call-api-button
             >
             <template is="dom-if" if="[[addon.changelog]]">
               <mwc-button on-click="openChangelog">Changelog</mwc-button>
@@ -175,6 +203,18 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         </paper-card>
       </template>
 
+      <template is="dom-if" if="[[!addon.protected]]">
+        <paper-card heading="Warning: Protection mode is disabled!" class="warning">
+          <div class="card-content">
+            Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
+          </div>
+          <div class="card-actions protection-enable">
+              <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
+            </div>
+          </div>
+        </paper-card>
+      </template>
+
       <paper-card>
         <div class="card-content">
           <div class="addon-header">
@@ -213,22 +253,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               <img src="/api/hassio/addons/[[addonSlug]]/logo" />
             </a>
           </template>
-          <template is="dom-if" if="[[!addon.protected]]">
-            <paper-card heading="Warning: Protection mode is disabled!" class="warning">
-              <div class="card-content">
-                Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
-              </div>
-              <div class="card-actions">
-                  <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
-                </div>
-              </div>
-            </paper-card>
-          </template>
           <div class="security">
-              <h3>Addon Security Rating</h3>
-              <div class="description light-color">
-                Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an addon requires on your system, the lower the score, thus raising the possible security risks.
-              </div>
               <ha-label-badge
                 class$="[[computeSecurityClassName(addon.rating)]]"
                 on-click="showMoreInfo"
@@ -298,7 +323,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                   id="apparmor"
                   icon="hassio:shield"
                   label="apparmor"
-                  description="[[addon.apparmor]]"
+                  description=""
                 ></ha-label-badge>
               </template>
               <template is="dom-if" if="[[addon.auth_api]]">
@@ -310,6 +335,15 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                   description=""
                 ></ha-label-badge>
               </template>
+              <template is="dom-if" if="[[addon.ingress]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="ingress"
+                  icon="hassio:cursor-default-click-outline"
+                  label="ingress"
+                  description=""
+                ></ha-label-badge>
+              </template>
           </div>
           <template is="dom-if" if="[[addon.version]]">
             <div class="state">
@@ -326,8 +360,27 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 checked="[[addon.auto_update]]"
               ></paper-toggle-button>
             </div>
+            <template is="dom-if" if="[[addon.ingress]]">
+              <div class="state">
+                <div>Show in sidebar</div>
+                <paper-toggle-button
+                  on-change="panelToggled"
+                  checked="[[addon.ingress_panel]]"
+                  disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
+                ></paper-toggle-button>
+                <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
+                  <span>This option requires Home Assistant 0.92 or later.</span>
+                </template>
+              </div>
+            </template>
             <div class="state">
-              <div>Protection mode</div>
+              <div>
+                Protection mode
+                <span>
+                  <iron-icon icon="hassio:information"></iron-icon>
+                  <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
+                </span>
+              </div>
               <paper-toggle-button
                 on-change="protectionToggled"
                 checked="[[addon.protected]]"
@@ -371,7 +424,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
             </template>
             <template
               is="dom-if"
-              if="[[computeShowWebUI(addon.webui, isRunning)]]"
+              if="[[computeShowWebUI(addon.ingress, addon.webui, isRunning)]]"
             >
               <a
                 href="[[pathWebui(addon.webui)]]"
@@ -381,10 +434,20 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 ><mwc-button>Open web UI</mwc-button></a
               >
             </template>
+            <template
+              is="dom-if"
+              if="[[computeShowIngressUI(addon.ingress, isRunning)]]"
+            >
+              <mwc-button
+                tabindex="-1"
+                class="right"
+                on-click="openIngress"
+              >Open web UI</mwc-button>
+            </template>
           </template>
           <template is="dom-if" if="[[!addon.version]]">
             <template is="dom-if" if="[[!addon.available]]">
-              <p class="warning">This addon is not available on your system.</p>
+              <p class="warning">This add-on is not available on your system.</p>
             </template>
             <ha-call-api-button
               disabled="[[!addon.available]]"
@@ -448,8 +511,16 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     return webui && webui.replace("[HOST]", document.location.hostname);
   }
 
-  computeShowWebUI(webui, isRunning) {
-    return webui && isRunning;
+  computeShowWebUI(ingress, webui, isRunning) {
+    return !ingress && webui && isRunning;
+  }
+
+  openIngress() {
+    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+  }
+
+  computeShowIngressUI(ingress, isRunning) {
+    return ingress && isRunning;
   }
 
   computeStartOnBoot(state) {
@@ -482,9 +553,14 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     this.set("addon.protected", !this.addon.protected);
   }
 
+  panelToggled() {
+    const data = { ingress_panel: !this.addon.ingress_panel };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
   showMoreInfo(e) {
     const id = e.target.getAttribute("id");
-    this.fire("hassio-markdown-dialog", {
+    showHassioMarkdownDialog(this, {
       title: PERMIS_DESC[id].title,
       content: PERMIS_DESC[id].description,
     });
@@ -495,7 +571,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
       .callApi("get", `hassio/addons/${this.addonSlug}/changelog`)
       .then((resp) => resp, () => "Error getting changelog")
       .then((content) => {
-        this.fire("hassio-markdown-dialog", {
+        showHassioMarkdownDialog(this, {
           title: "Changelog",
           content: content,
         });
@@ -526,5 +602,14 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         this.fire("hass-api-called", eventData);
       });
   }
+
+  _computeCannotIngressSidebar(hass, addon) {
+    return !addon.ingress || !this._computeHA92plus(hass);
+  }
+
+  _computeHA92plus(hass) {
+    const [major, minor] = hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 92);
+  }
 }
 customElements.define("hassio-addon-info", HassioAddonInfo);

hassio/src/addon-view/hassio-addon-network.js

@@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioAddonNetwork extends EventsMixin(PolymerElement) {
   static get template() {
@@ -37,16 +37,19 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
               <tr>
                 <th>Container</th>
                 <th>Host</th>
+                <th>Description</th>
               </tr>
               <template is="dom-repeat" items="[[config]]">
                 <tr>
                   <td>[[item.container]]</td>
                   <td>
                     <paper-input
+                      placeholder="disabled"
                       value="{{item.host}}"
                       no-label-float=""
                     ></paper-input>
                   </td>
+                  <td>[[item.description]]</td>
                 </tr>
               </template>
             </tbody>
@@ -89,9 +92,11 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
     if (!addon) return;
 
     const network = addon.network || {};
+    const description = addon.network_description || {};
     const items = Object.keys(network).map((key) => ({
       container: key,
       host: network[key],
+      description: description[key],
     }));
     this.config = items.sort(function(el1, el2) {
       return el1.host - el2.host;

hassio/src/addon-view/hassio-addon-view.js

@@ -1,14 +1,10 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/app-route/app-route";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/ha-menu-button";
-import "../../../src/resources/ha-style";
-import "../hassio-markdown-dialog";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-info";
@@ -18,7 +14,7 @@ import "./hassio-addon-network";
 class HassioAddonView extends PolymerElement {
   static get template() {
     return html`
-      <style include="iron-flex ha-style">
+      <style>
         :host {
           color: var(--primary-text-color);
           --paper-card-header-color: var(--primary-text-color);
@@ -51,35 +47,19 @@ class HassioAddonView extends PolymerElement {
           }
         }
       </style>
-      <app-route
-        route="[[route]]"
-        pattern="/addon/:slug"
-        data="{{routeData}}"
-        active="{{routeMatches}}"
-      ></app-route>
-      <app-header-layout has-scrolling-region="">
-        <app-header fixed="" slot="header">
-          <app-toolbar>
-            <ha-menu-button hassio></ha-menu-button>
-            <paper-icon-button
-              icon="hassio:arrow-left"
-              on-click="backTapped"
-            ></paper-icon-button>
-            <div main-title="">Hass.io: add-on details</div>
-          </app-toolbar>
-        </app-header>
+      <hass-subpage header="Hass.io: add-on details" hassio>
         <div class="content">
           <hassio-addon-info
             hass="[[hass]]"
             addon="[[addon]]"
-            addon-slug="[[routeData.slug]]"
+            addon-slug="[[addonSlug]]"
           ></hassio-addon-info>
 
           <template is="dom-if" if="[[addon.version]]">
             <hassio-addon-config
               hass="[[hass]]"
               addon="[[addon]]"
-              addon-slug="[[routeData.slug]]"
+              addon-slug="[[addonSlug]]"
             ></hassio-addon-config>
 
             <template is="dom-if" if="[[addon.audio]]">
@@ -93,50 +73,38 @@ class HassioAddonView extends PolymerElement {
               <hassio-addon-network
                 hass="[[hass]]"
                 addon="[[addon]]"
-                addon-slug="[[routeData.slug]]"
+                addon-slug="[[addonSlug]]"
               ></hassio-addon-network>
             </template>
 
             <hassio-addon-logs
               hass="[[hass]]"
-              addon-slug="[[routeData.slug]]"
+              addon-slug="[[addonSlug]]"
             ></hassio-addon-logs>
           </template>
         </div>
-      </app-header-layout>
-
-      <hassio-markdown-dialog
-        title="[[markdownTitle]]"
-        content="[[markdownContent]]"
-      ></hassio-markdown-dialog>
+      </hass-subpage>
     `;
   }
 
   static get properties() {
     return {
       hass: Object,
-      route: Object,
-      routeData: {
+      route: {
         type: Object,
         observer: "routeDataChanged",
       },
-      routeMatches: Boolean,
-      addon: Object,
-
-      markdownTitle: String,
-      markdownContent: {
+      addonSlug: {
         type: String,
-        value: "",
+        computed: "_computeSlug(route)",
       },
+      addon: Object,
     };
   }
 
   ready() {
     super.ready();
     this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
-    this.addEventListener("hassio-markdown-dialog", (ev) =>
-      this.openMarkdown(ev)
-    );
   }
 
   apiCalled(ev) {
@@ -145,15 +113,15 @@ class HassioAddonView extends PolymerElement {
     if (!path) return;
 
     if (path.substr(path.lastIndexOf("/") + 1) === "uninstall") {
-      this.backTapped();
+      history.back();
     } else {
-      this.routeDataChanged(this.routeData);
+      this.routeDataChanged(this.route);
     }
   }
 
   routeDataChanged(routeData) {
-    if (!this.routeMatches || !routeData || !routeData.slug) return;
-    this.hass.callApi("get", `hassio/addons/${routeData.slug}/info`).then(
+    const addon = routeData.path.substr(1);
+    this.hass.callApi("get", `hassio/addons/${addon}/info`).then(
       (info) => {
         this.addon = info.data;
       },
@@ -163,16 +131,8 @@ class HassioAddonView extends PolymerElement {
     );
   }
 
-  backTapped() {
-    history.back();
-  }
-
-  openMarkdown(ev) {
-    this.setProperties({
-      markdownTitle: ev.detail.title,
-      markdownContent: ev.detail.content,
-    });
-    this.shadowRoot.querySelector("hassio-markdown-dialog").openDialog();
+  _computeSlug(route) {
+    return route.path.substr(1);
   }
 }
 

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

@@ -1,90 +0,0 @@
-import "@polymer/iron-icon/iron-icon";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/components/ha-relative-time";
-
-class HassioCardContent extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        iron-icon {
-          margin-right: 16px;
-          margin-top: 16px;
-          float: left;
-          color: var(--secondary-text-color);
-        }
-        iron-icon.update {
-          color: var(--paper-orange-400);
-        }
-        iron-icon.running,
-        iron-icon.installed {
-          color: var(--paper-green-400);
-        }
-        iron-icon.hassupdate,
-        iron-icon.snapshot {
-          color: var(--paper-item-icon-color);
-        }
-        iron-icon.not_available {
-          color: var(--google-red-500);
-        }
-        .title {
-          color: var(--primary-text-color);
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .addition {
-          color: var(--secondary-text-color);
-          overflow: hidden;
-          position: relative;
-          height: 2.4em;
-          line-height: 1.2em;
-        }
-        ha-relative-time {
-          display: block;
-        }
-      </style>
-      <iron-icon
-        icon="[[icon]]"
-        class\$="[[iconClass]]"
-        title="[[iconTitle]]"
-      ></iron-icon>
-      <div>
-        <div class="title">[[title]]</div>
-        <div class="addition">
-          <template is="dom-if" if="[[description]]">
-            [[description]]
-          </template>
-          <template is="dom-if" if="[[!available]]">
-            (Not available)
-          </template>
-          <template is="dom-if" if="[[datetime]]">
-            <ha-relative-time
-              hass="[[hass]]"
-              class="addition"
-              datetime="[[datetime]]"
-            ></ha-relative-time>
-          </template>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      title: String,
-      description: String,
-      available: Boolean,
-      datetime: String,
-      icon: {
-        type: String,
-        value: "hass:help-circle",
-      },
-      iconTitle: String,
-      iconClass: String,
-    };
-  }
-}
-customElements.define("hassio-card-content", HassioCardContent);

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

@@ -0,0 +1,99 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import "@polymer/iron-icon/iron-icon";
+
+import "../../../src/components/ha-relative-time";
+import { HomeAssistant } from "../../../src/types";
+
+@customElement("hassio-card-content")
+class HassioCardContent extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public title!: string;
+  @property() public description?: string;
+  @property({ type: Boolean }) public available?: boolean;
+  @property() public datetime?: string;
+  @property() public iconTitle?: string;
+  @property() public iconClass?: string;
+  @property() public icon = "hass:help-circle";
+
+  protected render(): TemplateResult | void {
+    return html`
+      <iron-icon
+        class=${this.iconClass}
+        .icon=${this.icon}
+        .title=${this.iconTitle}
+      ></iron-icon>
+      <div>
+        <div class="title">${this.title}</div>
+        <div class="addition">
+          ${this.description}
+          ${/* treat as available when undefined */
+          this.available === false ? " (Not available)" : ""}
+          ${this.datetime
+            ? html`
+                <ha-relative-time
+                  .hass=${this.hass}
+                  class="addition"
+                  .datetime=${this.datetime}
+                ></ha-relative-time>
+              `
+            : undefined}
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      iron-icon {
+        margin-right: 16px;
+        margin-top: 16px;
+        float: left;
+        color: var(--secondary-text-color);
+      }
+      iron-icon.update {
+        color: var(--paper-orange-400);
+      }
+      iron-icon.running,
+      iron-icon.installed {
+        color: var(--paper-green-400);
+      }
+      iron-icon.hassupdate,
+      iron-icon.snapshot {
+        color: var(--paper-item-icon-color);
+      }
+      iron-icon.not_available {
+        color: var(--google-red-500);
+      }
+      .title {
+        color: var(--primary-text-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addition {
+        color: var(--secondary-text-color);
+        overflow: hidden;
+        position: relative;
+        height: 2.4em;
+        line-height: 1.2em;
+      }
+      ha-relative-time {
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-card-content": HassioCardContent;
+  }
+}

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

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

hassio/src/components/hassio-search-input.ts

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

hassio/src/dashboard/hassio-dashboard.js

@@ -1,38 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./hassio-addons";
-import "./hassio-hass-update";
-import EventsMixin from "../../../src/mixins/events-mixin";
-
-class HassioDashboard extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style">
-        .content {
-          margin: 0 auto;
-        }
-      </style>
-      <div class="content">
-        <hassio-hass-update
-          hass="[[hass]]"
-          hass-info="[[hassInfo]]"
-        ></hassio-hass-update>
-        <hassio-addons
-          hass="[[hass]]"
-          addons="[[supervisorInfo.addons]]"
-        ></hassio-addons>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      supervisorInfo: Object,
-      hassInfo: Object,
-    };
-  }
-}
-
-customElements.define("hassio-dashboard", HassioDashboard);

hassio/src/dashboard/hassio-dashboard.ts

@@ -0,0 +1,52 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import "./hassio-addons";
+import "./hassio-hass-update";
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioSupervisorInfo,
+  HassioHomeAssistantInfo,
+} from "../../../src/data/hassio";
+
+@customElement("hassio-dashboard")
+class HassioDashboard extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property() public hassInfo!: HassioHomeAssistantInfo;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="content">
+        <hassio-hass-update
+          .hass=${this.hass}
+          .hassInfo=${this.hassInfo}
+        ></hassio-hass-update>
+        <hassio-addons
+          .hass=${this.hass}
+          .addons=${this.supervisorInfo.addons}
+        ></hassio-addons>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .content {
+        margin: 0 auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-dashboard": HassioDashboard;
+  }
+}

hassio/src/dashboard/hassio-hass-update.js

@@ -26,26 +26,13 @@ class HassioHassUpdate extends PolymerElement {
       <template is="dom-if" if="[[computeUpdateAvailable(hassInfo)]]">
         <div class="content">
           <div class="card-group">
-            <div class="title">Update available! 🎉</div>
-            <paper-card>
+            <paper-card heading="Update available! 🎉">
               <div class="card-content">
-                <hassio-card-content
-                  hass="[[hass]]"
-                  title="Home Assistant [[hassInfo.last_version]] is available"
-                  description="You are currently running version [[hassInfo.version]]"
-                  icon="hassio:home-assistant"
-                  icon-class="hassupdate"
-                ></hassio-card-content>
+                Home Assistant [[hassInfo.last_version]] is available and you
+                are currently running Home Assistant [[hassInfo.version]].
                 <template is="dom-if" if="[[error]]">
                   <div class="error">Error: [[error]]</div>
                 </template>
-                <p>
-                  <a
-                    href="https://www.home-assistant.io/latest-release-notes/"
-                    target="_blank"
-                    >Read the release notes</a
-                  >
-                </p>
               </div>
               <div class="card-actions">
                 <ha-call-api-button
@@ -54,10 +41,11 @@ class HassioHassUpdate extends PolymerElement {
                   >Update</ha-call-api-button
                 >
                 <a
-                  href="https://github.com/home-assistant/home-assistant/releases"
+                  href="[[computeReleaseNotesUrl(hassInfo.version)]]"
                   target="_blank"
-                  ><mwc-button>Release notes</mwc-button></a
                 >
+                  <mwc-button>Release notes</mwc-button>
+                </a>
               </div>
             </paper-card>
           </div>
@@ -97,6 +85,12 @@ class HassioHassUpdate extends PolymerElement {
   computeUpdateAvailable(hassInfo) {
     return hassInfo.version !== hassInfo.last_version;
   }
+
+  computeReleaseNotesUrl(version) {
+    return `https://${
+      version.includes("b") ? "rc" : "www"
+    }.home-assistant.io/latest-release-notes/`;
+  }
 }
 
 customElements.define("hassio-hass-update", HassioHassUpdate);

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

@@ -1,18 +1,21 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../src/components/ha-markdown";
-import "../../src/resources/ha-style";
+import "../../../../src/components/ha-markdown";
+import "../../../../src/resources/ha-style";
+import "../../../../src/components/dialog/ha-paper-dialog";
+import { customElement } from "lit-element";
+import { PaperDialogElement } from "@polymer/paper-dialog";
 
+@customElement("dialog-hassio-markdown")
 class HassioMarkdownDialog extends PolymerElement {
   static get template() {
     return html`
       <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
           border-radius: 2px;
@@ -31,10 +34,10 @@ class HassioMarkdownDialog extends PolymerElement {
           margin: 4px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
           }
-          paper-dialog::before {
+          ha-paper-dialog::before {
             content: "";
             position: fixed;
             z-index: -1;
@@ -50,7 +53,7 @@ class HassioMarkdownDialog extends PolymerElement {
           }
         }
       </style>
-      <paper-dialog id="dialog" with-backdrop="">
+      <ha-paper-dialog id="dialog" with-backdrop="">
         <app-toolbar>
           <paper-icon-button
             icon="hassio:close"
@@ -61,7 +64,7 @@ class HassioMarkdownDialog extends PolymerElement {
         <paper-dialog-scrollable>
           <ha-markdown content="[[content]]"></ha-markdown>
         </paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -72,8 +75,14 @@ class HassioMarkdownDialog extends PolymerElement {
     };
   }
 
-  openDialog() {
-    this.$.dialog.open();
+  public showDialog(params) {
+    this.setProperties(params);
+    (this.$.dialog as PaperDialogElement).open();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-markdown": HassioMarkdownDialog;
   }
 }
-customElements.define("hassio-markdown-dialog", HassioMarkdownDialog);

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

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+
+export interface HassioMarkdownDialogParams {
+  title: string;
+  content: string;
+}
+
+export const showHassioMarkdownDialog = (
+  element: HTMLElement,
+  dialogParams: HassioMarkdownDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-markdown",
+    dialogImport: () =>
+      import(/* webpackChunkName: "dialog-hassio-markdown" */ "./dialog-hassio-markdown"),
+    dialogParams,
+  });
+};

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

@@ -2,20 +2,65 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { getSignedPath } from "../../../src/auth/data";
+import { getSignedPath } from "../../../../src/data/auth";
 
-import "../../../src/resources/ha-style";
+import "../../../../src/resources/ha-style";
+import "../../../../src/components/dialog/ha-paper-dialog";
+import { customElement } from "lit-element";
+import { PaperDialogElement } from "@polymer/paper-dialog";
+import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
+import { fetchHassioSnapshotInfo } from "../../../../src/data/hassio";
+
+const _computeFolders = (folders) => {
+  const list: Array<{ slug: string; name: string; checked: boolean }> = [];
+  if (folders.includes("homeassistant")) {
+    list.push({
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: true,
+    });
+  }
+  if (folders.includes("ssl")) {
+    list.push({ slug: "ssl", name: "SSL", checked: true });
+  }
+  if (folders.includes("share")) {
+    list.push({ slug: "share", name: "Share", checked: true });
+  }
+  if (folders.includes("addons/local")) {
+    list.push({ slug: "addons/local", name: "Local add-ons", checked: true });
+  }
+  return list;
+};
+
+const _computeAddons = (addons) => {
+  return addons.map((addon) => ({
+    slug: addon.slug,
+    name: addon.name,
+    version: addon.version,
+    checked: true,
+  }));
+};
+
+@customElement("dialog-hassio-snapshot")
+class HassioSnapshotDialog extends PolymerElement {
+  // Commented out because it breaks Polymer! Kept around for when we migrate
+  // to Lit. Now just putting ts-ignore everywhere because we need this out.
+  // Sorry future developer.
+  // public hass!: HomeAssistant;
+  // protected error?: string;
+  // private snapshot?: any;
+  // private dialogParams?: HassioSnapshotDialogParams;
+  // private restoreHass!: boolean;
+  // private snapshotPassword!: string;
 
-class HassioSnapshot extends PolymerElement {
   static get template() {
     return html`
       <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
           border-radius: 2px;
@@ -29,7 +74,7 @@ class HassioSnapshot extends PolymerElement {
         app-toolbar [main-title] {
           margin-left: 16px;
         }
-        paper-dialog-scrollable {
+        ha-paper-dialog-scrollable {
           margin: 0;
         }
         paper-checkbox {
@@ -37,7 +82,7 @@ class HassioSnapshot extends PolymerElement {
           margin: 4px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
@@ -57,7 +102,7 @@ class HassioSnapshot extends PolymerElement {
           color: var(--google-red-500);
         }
       </style>
-      <paper-dialog
+      <ha-paper-dialog
         id="dialog"
         with-backdrop=""
         on-iron-overlay-closed="_dialogClosed"
@@ -77,22 +122,18 @@ class HassioSnapshot extends PolymerElement {
         <paper-checkbox checked="{{restoreHass}}">
           Home Assistant [[snapshot.homeassistant]]
         </paper-checkbox>
-        <template is="dom-if" if="[[snapshot.addons.length]]">
+        <template is="dom-if" if="[[_folders.length]]">
           <div>Folders:</div>
-          <template is="dom-repeat" items="[[snapshot.folders]]">
+          <template is="dom-repeat" items="[[_folders]]">
             <paper-checkbox checked="{{item.checked}}">
               [[item.name]]
             </paper-checkbox>
           </template>
         </template>
-        <template is="dom-if" if="[[snapshot.addons.length]]">
+        <template is="dom-if" if="[[_addons.length]]">
           <div>Add-ons:</div>
           <paper-dialog-scrollable>
-            <template
-              is="dom-repeat"
-              items="[[snapshot.addons]]"
-              sort="_sortAddons"
-            >
+            <template is="dom-repeat" items="[[_addons]]" sort="_sortAddons">
               <paper-checkbox checked="{{item.checked}}">
                 [[item.name]] <span class="details">([[item.version]])</span>
               </paper-checkbox>
@@ -132,23 +173,17 @@ class HassioSnapshot extends PolymerElement {
             >
           </template>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
   static get properties() {
     return {
       hass: Object,
-      snapshotSlug: {
-        type: String,
-        notify: true,
-        observer: "_snapshotSlugChanged",
-      },
-      snapshotDeleted: {
-        type: Boolean,
-        notify: true,
-      },
+      dialogParams: Object,
       snapshot: Object,
+      _folders: Object,
+      _addons: Object,
       restoreHass: {
         type: Boolean,
         value: true,
@@ -158,140 +193,136 @@ class HassioSnapshot extends PolymerElement {
     };
   }
 
-  _snapshotSlugChanged(snapshotSlug) {
-    if (!snapshotSlug || snapshotSlug === "update") return;
-    this.hass.callApi("get", `hassio/snapshots/${snapshotSlug}/info`).then(
-      (info) => {
-        info.data.folders = this._computeFolders(info.data.folders);
-        info.data.addons = this._computeAddons(info.data.addons);
-        this.snapshot = info.data;
-        this.$.dialog.open();
-      },
-      () => {
-        this.snapshot = null;
-      }
-    );
+  public async showDialog(params: HassioSnapshotDialogParams) {
+    // @ts-ignore
+    const snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
+    this.setProperties({
+      dialogParams: params,
+      snapshot,
+      _folders: _computeFolders(snapshot.folders),
+      _addons: _computeAddons(snapshot.addons),
+    });
+    (this.$.dialog as PaperDialogElement).open();
   }
 
-  _computeFolders(folders) {
-    const list = [];
-    if (folders.includes("homeassistant"))
-      list.push({
-        slug: "homeassistant",
-        name: "Home Assistant configuration",
-        checked: true,
-      });
-    if (folders.includes("ssl"))
-      list.push({ slug: "ssl", name: "SSL", checked: true });
-    if (folders.includes("share"))
-      list.push({ slug: "share", name: "Share", checked: true });
-    if (folders.includes("addons/local"))
-      list.push({ slug: "addons/local", name: "Local add-ons", checked: true });
-    return list;
-  }
-
-  _computeAddons(addons) {
-    return addons.map((addon) => ({
-      slug: addon.slug,
-      name: addon.name,
-      version: addon.version,
-      checked: true,
-    }));
-  }
-
-  _isFullSnapshot(type) {
+  protected _isFullSnapshot(type) {
     return type === "full";
   }
 
-  _partialRestoreClicked() {
+  protected _partialRestoreClicked() {
     if (!confirm("Are you sure you want to restore this snapshot?")) {
       return;
     }
-    const addons = this.snapshot.addons
+    // @ts-ignore
+    const addons = this._addons
       .filter((addon) => addon.checked)
       .map((addon) => addon.slug);
-    const folders = this.snapshot.folders
+    // @ts-ignore
+    const folders = this._folders
       .filter((folder) => folder.checked)
       .map((folder) => folder.slug);
 
     const data = {
+      // @ts-ignore
       homeassistant: this.restoreHass,
-      addons: addons,
-      folders: folders,
+      addons,
+      folders,
     };
-    if (this.snapshot.protected) data.password = this.snapshotPassword;
+    // @ts-ignore
+    if (this.snapshot.protected) {
+      // @ts-ignore
+      data.password = this.snapshotPassword;
+    }
 
+    // @ts-ignore
     this.hass
       .callApi(
-        "post",
-        `hassio/snapshots/${this.snapshotSlug}/restore/partial`,
+        "POST",
+        // @ts-ignore
+        `hassio/snapshots/${this.dialogParams!.slug}/restore/partial`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this.$.dialog.close();
+          (this.$.dialog as PaperDialogElement).close();
         },
         (error) => {
+          // @ts-ignore
           this.error = error.body.message;
         }
       );
   }
 
-  _fullRestoreClicked() {
+  protected _fullRestoreClicked() {
     if (!confirm("Are you sure you want to restore this snapshot?")) {
       return;
     }
+    // @ts-ignore
     const data = this.snapshot.protected
-      ? { password: this.snapshotPassword }
-      : null;
+      ? {
+          password:
+            // @ts-ignore
+            this.snapshotPassword,
+        }
+      : undefined;
+    // @ts-ignore
     this.hass
       .callApi(
-        "post",
-        `hassio/snapshots/${this.snapshotSlug}/restore/full`,
+        "POST",
+        // @ts-ignore
+        `hassio/snapshots/${this.dialogParams!.slug}/restore/full`,
         data
       )
       .then(
         () => {
           alert("Snapshot restored!");
-          this.$.dialog.close();
+          (this.$.dialog as PaperDialogElement).close();
         },
         (error) => {
+          // @ts-ignore
           this.error = error.body.message;
         }
       );
   }
 
-  _deleteClicked() {
+  protected _deleteClicked() {
     if (!confirm("Are you sure you want to delete this snapshot?")) {
       return;
     }
+    // @ts-ignore
     this.hass
-      .callApi("post", `hassio/snapshots/${this.snapshotSlug}/remove`)
+      // @ts-ignore
+      .callApi("POST", `hassio/snapshots/${this.dialogParams!.slug}/remove`)
       .then(
         () => {
-          this.$.dialog.close();
-          this.snapshotDeleted = true;
+          (this.$.dialog as PaperDialogElement).close();
+          // @ts-ignore
+          this.dialogParams!.onDelete();
         },
         (error) => {
+          // @ts-ignore
           this.error = error.body.message;
         }
       );
   }
 
-  async _downloadClicked() {
+  protected async _downloadClicked() {
     let signedPath;
     try {
       signedPath = await getSignedPath(
+        // @ts-ignore
         this.hass,
-        `/api/hassio/snapshots/${this.snapshotSlug}/download`
+        // @ts-ignore
+        `/api/hassio/snapshots/${this.dialogParams!.slug}/download`
       );
     } catch (err) {
       alert(`Error: ${err.message}`);
       return;
     }
+    // @ts-ignore
     const name = this._computeName(this.snapshot).replace(/[^a-z0-9]+/gi, "_");
-    const a = document.createElement("A");
+    const a = document.createElement("a");
     a.href = signedPath.path;
     a.download = `Hass_io_${name}.tar`;
     this.$.dialog.appendChild(a);
@@ -299,23 +330,23 @@ class HassioSnapshot extends PolymerElement {
     this.$.dialog.removeChild(a);
   }
 
-  _computeName(snapshot) {
-    return snapshot.name || snapshot.slug;
+  protected _computeName(snapshot) {
+    return snapshot ? snapshot.name || snapshot.slug : "Unnamed snapshot";
   }
 
-  _computeType(type) {
+  protected _computeType(type) {
     return type === "full" ? "Full snapshot" : "Partial snapshot";
   }
 
-  _computeSize(size) {
+  protected _computeSize(size) {
     return Math.ceil(size * 10) / 10 + " MB";
   }
 
-  _sortAddons(a, b) {
+  protected _sortAddons(a, b) {
     return a.name < b.name ? -1 : 1;
   }
 
-  _formatDatetime(datetime) {
+  protected _formatDatetime(datetime) {
     return new Date(datetime).toLocaleDateString(navigator.language, {
       weekday: "long",
       year: "numeric",
@@ -326,8 +357,18 @@ class HassioSnapshot extends PolymerElement {
     });
   }
 
-  _dialogClosed() {
-    this.snapshotSlug = null;
+  protected _dialogClosed() {
+    this.setProperties({
+      dialogParams: undefined,
+      snapshot: undefined,
+      _addons: [],
+      _folders: [],
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-snapshot": HassioSnapshotDialog;
   }
 }
-customElements.define("hassio-snapshot", HassioSnapshot);

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

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+
+export interface HassioSnapshotDialogParams {
+  slug: string;
+  onDelete: () => void;
+}
+
+export const showHassioSnapshotDialog = (
+  element: HTMLElement,
+  dialogParams: HassioSnapshotDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-snapshot",
+    dialogImport: () =>
+      import(/* webpackChunkName: "dialog-hassio-snapshot" */ "./dialog-hassio-snapshot"),
+    dialogParams,
+  });
+};

hassio/src/entrypoint.js

@@ -1,4 +1,17 @@
 window.loadES5Adapter().then(() => {
-  import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons.js");
-  import(/* webpackChunkName: "hassio-main" */ "./hassio-main.js");
+  import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
+  import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
 });
+const styleEl = document.createElement("style");
+styleEl.innerHTML = `
+body {
+  font-family: Roboto, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+`;
+document.head.appendChild(styleEl);

hassio/src/hassio-app.js

@@ -1,41 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./hassio-main";
-import "./resources/hassio-icons";
-
-class HassioApp extends PolymerElement {
-  static get template() {
-    return html`
-      <template is="dom-if" if="[[hass]]">
-        <hassio-main hass="[[hass]]" route="[[route]]"></hassio-main>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      route: Object,
-      hassioPanel: {
-        type: Object,
-        value: window.parent.hassioPanel,
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    window.setProperties = this.setProperties.bind(this);
-    this.addEventListener("location-changed", () => this._locationChanged());
-    this.addEventListener("hass-toggle-menu", (ev) =>
-      this.hassioPanel.fire("hass-toggle-menu", ev.detail)
-    );
-  }
-
-  _locationChanged() {
-    this.hassioPanel.navigate(window.location.pathname);
-  }
-}
-
-customElements.define("hassio-app", HassioApp);

hassio/src/hassio-data.js

@@ -1,59 +0,0 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassioData extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-
-      supervisor: {
-        type: Object,
-        notify: true,
-      },
-
-      host: {
-        type: Object,
-        notify: true,
-      },
-
-      homeassistant: {
-        type: Object,
-        notify: true,
-      },
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.refresh();
-  }
-
-  refresh() {
-    return Promise.all([
-      this.fetchSupervisorInfo(),
-      this.fetchHostInfo(),
-      this.fetchHassInfo(),
-    ]);
-  }
-
-  fetchSupervisorInfo() {
-    return this.hass.callApi("get", "hassio/supervisor/info").then((info) => {
-      this.supervisor = info.data;
-    });
-  }
-
-  fetchHostInfo() {
-    return this.hass.callApi("get", "hassio/host/info").then((info) => {
-      this.host = info.data;
-    });
-  }
-
-  fetchHassInfo() {
-    return this.hass
-      .callApi("get", "hassio/homeassistant/info")
-      .then((info) => {
-        this.homeassistant = info.data;
-      });
-  }
-}
-
-customElements.define("hassio-data", HassioData);

hassio/src/hassio-main.js

@@ -1,120 +0,0 @@
-import "@polymer/app-route/app-route";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../src/layouts/hass-loading-screen";
-import "./addon-view/hassio-addon-view";
-import "./hassio-data";
-import "./hassio-pages-with-tabs";
-
-import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
-import EventsMixin from "../../src/mixins/events-mixin";
-import NavigateMixin from "../../src/mixins/navigate-mixin";
-
-class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <app-route
-        route="[[route]]"
-        pattern="/:page"
-        data="{{routeData}}"
-      ></app-route>
-      <hassio-data
-        id="data"
-        hass="[[hass]]"
-        supervisor="{{supervisorInfo}}"
-        homeassistant="{{hassInfo}}"
-        host="{{hostInfo}}"
-      ></hassio-data>
-
-      <template is="dom-if" if="[[!loaded]]">
-        <hass-loading-screen></hass-loading-screen>
-      </template>
-
-      <template is="dom-if" if="[[loaded]]">
-        <template is="dom-if" if="[[!equalsAddon(routeData.page)]]">
-          <hassio-pages-with-tabs
-            hass="[[hass]]"
-            page="[[routeData.page]]"
-            supervisor-info="[[supervisorInfo]]"
-            hass-info="[[hassInfo]]"
-            host-info="[[hostInfo]]"
-          ></hassio-pages-with-tabs>
-        </template>
-        <template is="dom-if" if="[[equalsAddon(routeData.page)]]">
-          <hassio-addon-view
-            hass="[[hass]]"
-            route="[[route]]"
-          ></hassio-addon-view>
-        </template>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      route: {
-        type: Object,
-        // Fake route object
-        value: {
-          prefix: "/hassio",
-          path: "/dashboard",
-          __queryParams: {},
-        },
-        observer: "routeChanged",
-      },
-      routeData: Object,
-      supervisorInfo: Object,
-      hostInfo: Object,
-      hassInfo: Object,
-      loaded: {
-        type: Boolean,
-        computed: "computeIsLoaded(supervisorInfo, hostInfo, hassInfo)",
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
-    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.routeChanged(this.route);
-  }
-
-  apiCalled(ev) {
-    if (ev.detail.success) {
-      let tries = 1;
-
-      const tryUpdate = () => {
-        this.$.data.refresh().catch(function() {
-          tries += 1;
-          setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
-        });
-      };
-
-      tryUpdate();
-    }
-  }
-
-  computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
-    return supervisorInfo !== null && hostInfo !== null && hassInfo !== null;
-  }
-
-  routeChanged(route) {
-    if (route.path === "" && route.prefix === "/hassio") {
-      this.navigate("/hassio/dashboard", true);
-    }
-    this.fire("iron-resize");
-  }
-
-  equalsAddon(page) {
-    return page && page === "addon";
-  }
-}
-
-customElements.define("hassio-main", HassioMain);

hassio/src/hassio-main.ts

@@ -0,0 +1,188 @@
+import { customElement, PropertyValues, property } from "lit-element";
+import { PolymerElement } from "@polymer/polymer";
+import "@polymer/paper-icon-button";
+
+import "../../src/resources/ha-style";
+import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
+import { fireEvent } from "../../src/common/dom/fire_event";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../src/layouts/hass-router-page";
+import { HomeAssistant } from "../../src/types";
+import {
+  fetchHassioSupervisorInfo,
+  fetchHassioHostInfo,
+  fetchHassioHomeAssistantInfo,
+  HassioSupervisorInfo,
+  HassioHostInfo,
+  HassioHomeAssistantInfo,
+  fetchHassioAddonInfo,
+  createHassioSession,
+  HassioPanelInfo,
+} from "../../src/data/hassio";
+import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
+import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
+// Don't codesplit it, that way the dashboard always loads fast.
+import "./hassio-pages-with-tabs";
+
+// The register callback of the IronA11yKeysBehavior inside paper-icon-button
+// is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
+// causing an exception when added to DOM. When transpiled to ES5, this will
+// break the build.
+customElements.get("paper-icon-button").prototype._keyBindings = {};
+
+@customElement("hassio-main")
+class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
+  @property() public hass!: HomeAssistant;
+  @property() public panel!: HassioPanelInfo;
+  @property() public narrow!: boolean;
+
+  protected routerOptions: RouterOptions = {
+    // Hass.io has a page with tabs, so we route all non-matching routes to it.
+    defaultPage: "dashboard",
+    initialLoad: () => this._fetchData(),
+    showLoading: true,
+    routes: {
+      dashboard: {
+        tag: "hassio-pages-with-tabs",
+        cache: true,
+      },
+      snapshots: "dashboard",
+      store: "dashboard",
+      system: "dashboard",
+      addon: {
+        tag: "hassio-addon-view",
+        load: () =>
+          import(/* webpackChunkName: "hassio-addon-view" */ "./addon-view/hassio-addon-view"),
+      },
+      ingress: {
+        tag: "hassio-ingress-view",
+        load: () =>
+          import(/* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"),
+      },
+    },
+  };
+
+  @property() private _supervisorInfo: HassioSupervisorInfo;
+  @property() private _hostInfo: HassioHostInfo;
+  @property() private _hassInfo: HassioHomeAssistantInfo;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
+    // Paulus - March 17, 2019
+    // We went to a single hass-toggle-menu event in HA 0.90. However, the
+    // supervisor UI can also run under older versions of Home Assistant.
+    // So here we are going to translate toggle events into the appropriate
+    // open and close events. These events are a no-op in newer versions of
+    // Home Assistant.
+    this.addEventListener("hass-toggle-menu", () => {
+      fireEvent(
+        (window.parent as any).customPanel,
+        // @ts-ignore
+        this.hass.dockedSidebar ? "hass-close-menu" : "hass-open-menu"
+      );
+    });
+    // Paulus - March 19, 2019
+    // We changed the navigate event to fire directly on the window, as that's
+    // where we are listening for it. However, the older panel_custom will
+    // listen on this element for navigation events, so we need to forward them.
+    window.addEventListener("location-changed", (ev) =>
+      // @ts-ignore
+      fireEvent(this, ev.type, ev.detail, {
+        bubbles: false,
+      })
+    );
+
+    makeDialogManager(this, document.body);
+  }
+
+  protected updatePageEl(el) {
+    // the tabs page does its own routing so needs full route.
+    const route =
+      el.nodeName === "HASSIO-PAGES-WITH-TABS" ? this.route : this.routeTail;
+
+    if ("setProperties" in el) {
+      // As long as we have Polymer pages
+      (el as PolymerElement).setProperties({
+        hass: this.hass,
+        narrow: this.narrow,
+        supervisorInfo: this._supervisorInfo,
+        hostInfo: this._hostInfo,
+        hassInfo: this._hassInfo,
+        route,
+      });
+    } else {
+      el.hass = this.hass;
+      el.narrow = this.narrow;
+      el.supervisorInfo = this._supervisorInfo;
+      el.hostInfo = this._hostInfo;
+      el.hassInfo = this._hassInfo;
+      el.route = route;
+    }
+  }
+
+  private async _fetchData() {
+    if (this.panel.config && this.panel.config.ingress) {
+      await this._redirectIngress(this.panel.config.ingress);
+      return;
+    }
+
+    const [supervisorInfo, hostInfo, hassInfo] = await Promise.all([
+      fetchHassioSupervisorInfo(this.hass),
+      fetchHassioHostInfo(this.hass),
+      fetchHassioHomeAssistantInfo(this.hass),
+    ]);
+    this._supervisorInfo = supervisorInfo;
+    this._hostInfo = hostInfo;
+    this._hassInfo = hassInfo;
+  }
+
+  private async _redirectIngress(addonSlug: string) {
+    try {
+      const [addon] = await Promise.all([
+        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
+          throw new Error("Failed to fetch add-on info");
+        }),
+        createHassioSession(this.hass).catch(() => {
+          throw new Error("Failed to create an ingress session");
+        }),
+      ]);
+      if (!addon.ingress_url) {
+        throw new Error("Add-on does not support Ingress");
+      }
+      location.assign(addon.ingress_url);
+      // await a promise that doesn't resolve, so we show the loading screen
+      // while we load the next page.
+      await new Promise(() => undefined);
+    } catch (err) {
+      alert(`Unable to open ingress connection `);
+    }
+  }
+
+  private _apiCalled(ev) {
+    if (!ev.detail.success) {
+      return;
+    }
+
+    let tries = 1;
+
+    const tryUpdate = () => {
+      this._fetchData().catch(() => {
+        tries += 1;
+        setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
+      });
+    };
+
+    tryUpdate();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-main": HassioMain;
+  }
+}

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

@@ -1,161 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../src/components/ha-menu-button";
-import "../../src/resources/ha-style";
-import "./addon-store/hassio-addon-store";
-import "./dashboard/hassio-dashboard";
-import "./hassio-markdown-dialog";
-import "./snapshots/hassio-snapshot";
-import "./snapshots/hassio-snapshots";
-import "./system/hassio-system";
-
-import scrollToTarget from "../../src/common/dom/scroll-to-target";
-
-import NavigateMixin from "../../src/mixins/navigate-mixin";
-
-class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-positioning ha-style">
-        :host {
-          color: var(--primary-text-color);
-          --paper-card-header-color: var(--primary-text-color);
-        }
-        paper-tabs {
-          margin-left: 12px;
-          --paper-tabs-selection-bar-color: #fff;
-          text-transform: uppercase;
-        }
-      </style>
-      <app-header-layout id="layout" has-scrolling-region>
-        <app-header fixed slot="header">
-          <app-toolbar>
-            <ha-menu-button hassio></ha-menu-button>
-            <div main-title>Hass.io</div>
-            <template is="dom-if" if="[[showRefreshButton(page)]]">
-              <paper-icon-button
-                icon="hassio:refresh"
-                on-click="refreshClicked"
-              ></paper-icon-button>
-            </template>
-          </app-toolbar>
-          <paper-tabs
-            scrollable=""
-            selected="[[page]]"
-            attr-for-selected="page-name"
-            on-iron-activate="handlePageSelected"
-          >
-            <paper-tab page-name="dashboard">Dashboard</paper-tab>
-            <paper-tab page-name="snapshots">Snapshots</paper-tab>
-            <paper-tab page-name="store">Add-on store</paper-tab>
-            <paper-tab page-name="system">System</paper-tab>
-          </paper-tabs>
-        </app-header>
-        <template is="dom-if" if='[[equals(page, "dashboard")]]'>
-          <hassio-dashboard
-            hass="[[hass]]"
-            supervisor-info="[[supervisorInfo]]"
-            hass-info="[[hassInfo]]"
-          ></hassio-dashboard>
-        </template>
-        <template is="dom-if" if='[[equals(page, "snapshots")]]'>
-          <hassio-snapshots
-            hass="[[hass]]"
-            installed-addons="[[supervisorInfo.addons]]"
-            snapshot-slug="{{snapshotSlug}}"
-            snapshot-deleted="{{snapshotDeleted}}"
-          ></hassio-snapshots>
-        </template>
-        <template is="dom-if" if='[[equals(page, "store")]]'>
-          <hassio-addon-store hass="[[hass]]"></hassio-addon-store>
-        </template>
-        <template is="dom-if" if='[[equals(page, "system")]]'>
-          <hassio-system
-            hass="[[hass]]"
-            supervisor-info="[[supervisorInfo]]"
-            host-info="[[hostInfo]]"
-          ></hassio-system>
-        </template>
-      </app-header-layout>
-
-      <hassio-markdown-dialog
-        title="[[markdownTitle]]"
-        content="[[markdownContent]]"
-      ></hassio-markdown-dialog>
-
-      <template is="dom-if" if='[[equals(page, "snapshots")]]'>
-        <hassio-snapshot
-          hass="[[hass]]"
-          snapshot-slug="{{snapshotSlug}}"
-          snapshot-deleted="{{snapshotDeleted}}"
-        ></hassio-snapshot>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      page: String,
-      supervisorInfo: Object,
-      hostInfo: Object,
-      hassInfo: Object,
-      snapshotSlug: String,
-      snapshotDeleted: Boolean,
-
-      markdownTitle: String,
-      markdownContent: {
-        type: String,
-        value: "",
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("hassio-markdown-dialog", (ev) =>
-      this.openMarkdown(ev)
-    );
-  }
-
-  handlePageSelected(ev) {
-    const newPage = ev.detail.item.getAttribute("page-name");
-    if (newPage !== this.page) {
-      this.navigate(`/hassio/${newPage}`);
-    }
-    scrollToTarget(this, this.$.layout.header.scrollTarget);
-  }
-
-  equals(a, b) {
-    return a === b;
-  }
-
-  showRefreshButton(page) {
-    return page === "store" || page === "snapshots";
-  }
-
-  refreshClicked() {
-    if (this.page === "snapshots") {
-      this.shadowRoot.querySelector("hassio-snapshots").refreshData();
-    } else {
-      this.shadowRoot.querySelector("hassio-addon-store").refreshData();
-    }
-  }
-
-  openMarkdown(ev) {
-    this.setProperties({
-      markdownTitle: ev.detail.title,
-      markdownContent: ev.detail.content,
-    });
-    this.shadowRoot.querySelector("hassio-markdown-dialog").openDialog();
-  }
-}
-
-customElements.define("hassio-pages-with-tabs", HassioPagesWithTabs);

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

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

hassio/src/hassio-tabs-router.ts

@@ -0,0 +1,66 @@
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../src/layouts/hass-router-page";
+import { customElement, property } from "lit-element";
+import { PolymerElement } from "@polymer/polymer";
+import { HomeAssistant } from "../../src/types";
+// Don't codesplit it, that way the dashboard always loads fast.
+import "./dashboard/hassio-dashboard";
+// Don't codesplit the others, because it breaks the UI when pushed to a Pi
+import "./snapshots/hassio-snapshots";
+import "./addon-store/hassio-addon-store";
+import "./system/hassio-system";
+import {
+  HassioSupervisorInfo,
+  HassioHostInfo,
+  HassioHomeAssistantInfo,
+} from "../../src/data/hassio";
+
+@customElement("hassio-tabs-router")
+class HassioTabsRouter extends HassRouterPage {
+  @property() public hass!: HomeAssistant;
+  @property() public supervisorInfo: HassioSupervisorInfo;
+  @property() public hostInfo: HassioHostInfo;
+  @property() public hassInfo: HassioHomeAssistantInfo;
+
+  protected routerOptions: RouterOptions = {
+    routes: {
+      dashboard: {
+        tag: "hassio-dashboard",
+      },
+      snapshots: {
+        tag: "hassio-snapshots",
+      },
+      store: {
+        tag: "hassio-addon-store",
+      },
+      system: {
+        tag: "hassio-system",
+      },
+    },
+  };
+
+  protected updatePageEl(el) {
+    if ("setProperties" in el) {
+      // As long as we have Polymer pages
+      (el as PolymerElement).setProperties({
+        hass: this.hass,
+        supervisorInfo: this.supervisorInfo,
+        hostInfo: this.hostInfo,
+        hassInfo: this.hassInfo,
+      });
+    } else {
+      el.hass = this.hass;
+      el.supervisorInfo = this.supervisorInfo;
+      el.hostInfo = this.hostInfo;
+      el.hassInfo = this.hassInfo;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-tabs-router": HassioTabsRouter;
+  }
+}

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

@@ -0,0 +1,100 @@
+import {
+  LitElement,
+  customElement,
+  property,
+  TemplateResult,
+  html,
+  PropertyValues,
+  CSSResult,
+  css,
+} from "lit-element";
+import { HomeAssistant, Route } from "../../../src/types";
+import {
+  createHassioSession,
+  HassioAddonDetails,
+  fetchHassioAddonInfo,
+} from "../../../src/data/hassio";
+import "../../../src/layouts/hass-loading-screen";
+import "../../../src/layouts/hass-subpage";
+
+@customElement("hassio-ingress-view")
+class HassioIngressView extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public route!: Route;
+  @property() private _addon?: HassioAddonDetails;
+
+  protected render(): TemplateResult | void {
+    if (!this._addon) {
+      return html`
+        <hass-loading-screen></hass-loading-screen>
+      `;
+    }
+
+    return html`
+      <hass-subpage .header=${this._addon.name} hassio>
+        <iframe src=${this._addon.ingress_url}></iframe>
+      </hass-subpage>
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    if (!changedProps.has("route")) {
+      return;
+    }
+
+    const addon = this.route.path.substr(1);
+
+    const oldRoute = changedProps.get("route") as this["route"] | undefined;
+    const oldAddon = oldRoute ? oldRoute.path.substr(1) : undefined;
+
+    if (addon && addon !== oldAddon) {
+      this._fetchData(addon);
+    }
+  }
+
+  private async _fetchData(addonSlug: string) {
+    try {
+      const [addon] = await Promise.all([
+        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
+          throw new Error("Failed to fetch add-on info");
+        }),
+        createHassioSession(this.hass).catch(() => {
+          throw new Error("Failed to create an ingress session");
+        }),
+      ]);
+
+      if (!addon.ingress) {
+        throw new Error("This add-on does not support ingress");
+      }
+
+      this._addon = addon;
+    } catch (err) {
+      // tslint:disable-next-line
+      console.error(err);
+      alert(err.message || "Unknown error starting ingress.");
+      history.back();
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      iframe {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+      paper-icon-button {
+        color: var(--text-primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-ingress-view": HassioIngressView;
+  }
+}

hassio/src/resources/hassio-style.js

@@ -1,56 +1,64 @@
+import { css } from "lit-element";
+
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
 
+export const hassioStyle = css`
+  .card-group {
+    margin-top: 24px;
+  }
+  .card-group .title {
+    color: var(--primary-text-color);
+    font-size: 2em;
+    padding-left: 8px;
+    margin-bottom: 8px;
+  }
+  .card-group .description {
+    font-size: 0.5em;
+    font-weight: 500;
+    margin-top: 4px;
+  }
+  .card-group paper-card {
+    --card-group-columns: 4;
+    width: calc(
+      (100% - 12px * var(--card-group-columns)) / var(--card-group-columns)
+    );
+    margin: 4px;
+    vertical-align: top;
+  }
+  @media screen and (max-width: 1200px) and (min-width: 901px) {
+    .card-group paper-card {
+      --card-group-columns: 3;
+    }
+  }
+  @media screen and (max-width: 900px) and (min-width: 601px) {
+    .card-group paper-card {
+      --card-group-columns: 2;
+    }
+  }
+  @media screen and (max-width: 600px) and (min-width: 0) {
+    .card-group paper-card {
+      width: 100%;
+      margin: 4px 0;
+    }
+    .content {
+      padding: 0;
+    }
+  }
+  ha-call-api-button {
+    font-weight: 500;
+    color: var(--primary-color);
+  }
+  .error {
+    color: var(--google-red-500);
+    margin-top: 16px;
+  }
+`;
+
 documentContainer.innerHTML = `<dom-module id="hassio-style">
   <template>
     <style>
-      .card-group {
-        margin-top: 24px;
-      }
-      .card-group .title {
-        color: var(--primary-text-color);
-        font-size: 2em;
-        padding-left: 8px;
-        margin-bottom: 8px;
-      }
-      .card-group .description {
-        font-size: 0.5em;
-        font-weight: 500;
-        margin-top: 4px;
-      }
-      .card-group paper-card {
-        --card-group-columns: 4;
-        width: calc((100% - 12px * var(--card-group-columns)) / var(--card-group-columns));
-        margin: 4px;
-        vertical-align: top;
-      }
-      @media screen and (max-width: 1200px) and (min-width: 901px) {
-        .card-group paper-card {
-          --card-group-columns: 3;
-        }
-      }
-      @media screen and (max-width: 900px) and (min-width: 601px) {
-        .card-group paper-card {
-          --card-group-columns: 2;
-        }
-      }
-      @media screen and (max-width: 600px) and (min-width: 0) {
-        .card-group paper-card {
-          width: 100%;
-          margin: 4px 0;
-        }
-        .content {
-          padding: 0;
-        }
-      }
-      ha-call-api-button {
-        font-weight: 500;
-        color: var(--primary-color);
-      }
-      .error {
-        color: var(--google-red-500);
-        margin-top: 16px;
-      }
+      ${hassioStyle.toString()}
     </style>
   </template>
 </dom-module>`;

hassio/src/snapshots/hassio-snapshots.js

@@ -1,311 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hassio-card-content";
-import "../resources/hassio-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
-
-class HassioSnapshots extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style hassio-style">
-        paper-radio-group {
-          display: block;
-        }
-        paper-radio-button {
-          padding: 0 0 2px 2px;
-        }
-        paper-radio-button,
-        paper-checkbox,
-        paper-input[type="password"] {
-          display: block;
-          margin: 4px 0 4px 48px;
-        }
-        .pointer {
-          cursor: pointer;
-        }
-      </style>
-      <div class="content">
-        <div class="card-group">
-          <div class="title">
-            Create snapshot
-            <div class="description">
-              Snapshots allow you to easily backup and restore all data of your
-              Hass.io instance.
-            </div>
-          </div>
-          <paper-card>
-            <div class="card-content">
-              <paper-input
-                autofocus=""
-                label="Name"
-                value="{{snapshotName}}"
-              ></paper-input>
-              Type:
-              <paper-radio-group selected="{{snapshotType}}">
-                <paper-radio-button name="full">
-                  Full snapshot
-                </paper-radio-button>
-                <paper-radio-button name="partial">
-                  Partial snapshot
-                </paper-radio-button>
-              </paper-radio-group>
-              <template is="dom-if" if="[[!_fullSelected(snapshotType)]]">
-                Folders:
-                <template is="dom-repeat" items="[[folderList]]">
-                  <paper-checkbox checked="{{item.checked}}">
-                    [[item.name]]
-                  </paper-checkbox>
-                </template>
-                Add-ons:
-                <template
-                  is="dom-repeat"
-                  items="[[addonList]]"
-                  sort="_sortAddons"
-                >
-                  <paper-checkbox checked="{{item.checked}}">
-                    [[item.name]]
-                  </paper-checkbox>
-                </template>
-              </template>
-              Security:
-              <paper-checkbox checked="{{snapshotHasPassword}}"
-                >Password protection</paper-checkbox
-              >
-              <template is="dom-if" if="[[snapshotHasPassword]]">
-                <paper-input
-                  label="Password"
-                  type="password"
-                  value="{{snapshotPassword}}"
-                ></paper-input>
-              </template>
-              <template is="dom-if" if="[[error]]">
-                <p class="error">[[error]]</p>
-              </template>
-            </div>
-            <div class="card-actions">
-              <mwc-button
-                disabled="[[creatingSnapshot]]"
-                on-click="_createSnapshot"
-                >Create</mwc-button
-              >
-            </div>
-          </paper-card>
-        </div>
-
-        <div class="card-group">
-          <div class="title">Available snapshots</div>
-          <template is="dom-if" if="[[!snapshots.length]]">
-            <paper-card>
-              <div class="card-content">You don't have any snapshots yet.</div>
-            </paper-card>
-          </template>
-          <template
-            is="dom-repeat"
-            items="[[snapshots]]"
-            as="snapshot"
-            sort="_sortSnapshots"
-          >
-            <paper-card class="pointer" on-click="_snapshotClicked">
-              <div class="card-content">
-                <hassio-card-content
-                  hass="[[hass]]"
-                  title="[[_computeName(snapshot)]]"
-                  description="[[_computeDetails(snapshot)]]"
-                  datetime="[[snapshot.date]]"
-                  icon="[[_computeIcon(snapshot.type)]]"
-                  icon-class="snapshot"
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          </template>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      snapshotName: {
-        type: String,
-        value: "",
-      },
-      snapshotPassword: {
-        type: String,
-        value: "",
-      },
-      snapshotHasPassword: Boolean,
-      snapshotType: {
-        type: String,
-        value: "full",
-      },
-      snapshots: {
-        type: Array,
-        value: [],
-      },
-      installedAddons: {
-        type: Array,
-        observer: "_installedAddonsChanged",
-      },
-      addonList: Array,
-      folderList: {
-        type: Array,
-        value: [
-          {
-            slug: "homeassistant",
-            name: "Home Assistant configuration",
-            checked: true,
-          },
-          { slug: "ssl", name: "SSL", checked: true },
-          { slug: "share", name: "Share", checked: true },
-          { slug: "addons/local", name: "Local add-ons", checked: true },
-        ],
-      },
-      snapshotSlug: {
-        type: String,
-        notify: true,
-      },
-      snapshotDeleted: {
-        type: Boolean,
-        notify: true,
-        observer: "_snapshotDeletedChanged",
-      },
-      creatingSnapshot: Boolean,
-      dialogOpened: Boolean,
-      error: String,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-    this._updateSnapshots();
-  }
-
-  _apiCalled(ev) {
-    if (ev.detail.success) {
-      this._updateSnapshots();
-    }
-  }
-
-  _updateSnapshots() {
-    this.hass.callApi("get", "hassio/snapshots").then(
-      (result) => {
-        this.snapshots = result.data.snapshots;
-      },
-      (error) => {
-        this.error = error.message;
-      }
-    );
-  }
-
-  _createSnapshot() {
-    this.error = "";
-    if (this.snapshotHasPassword && !this.snapshotPassword.length) {
-      this.error = "Please enter a password.";
-      return;
-    }
-    this.creatingSnapshot = true;
-    let name = this.snapshotName;
-    if (!name.length) {
-      name = new Date().toLocaleDateString(navigator.language, {
-        weekday: "long",
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-    }
-    let data;
-    let path;
-    if (this.snapshotType === "full") {
-      data = { name: name };
-      path = "hassio/snapshots/new/full";
-    } else {
-      const addons = this.addonList
-        .filter((addon) => addon.checked)
-        .map((addon) => addon.slug);
-      const folders = this.folderList
-        .filter((folder) => folder.checked)
-        .map((folder) => folder.slug);
-
-      data = { name: name, folders: folders, addons: addons };
-      path = "hassio/snapshots/new/partial";
-    }
-    if (this.snapshotHasPassword) {
-      data.password = this.snapshotPassword;
-    }
-
-    this.hass.callApi("post", path, data).then(
-      () => {
-        this.creatingSnapshot = false;
-        this.fire("hass-api-called", { success: true });
-      },
-      (error) => {
-        this.creatingSnapshot = false;
-        this.error = error.message;
-      }
-    );
-  }
-
-  _installedAddonsChanged(addons) {
-    this.addonList = addons.map((addon) => ({
-      slug: addon.slug,
-      name: addon.name,
-      checked: true,
-    }));
-  }
-
-  _sortAddons(a, b) {
-    return a.name < b.name ? -1 : 1;
-  }
-
-  _sortSnapshots(a, b) {
-    return a.date < b.date ? 1 : -1;
-  }
-
-  _computeName(snapshot) {
-    return snapshot.name || snapshot.slug;
-  }
-
-  _computeDetails(snapshot) {
-    const type =
-      snapshot.type === "full" ? "Full snapshot" : "Partial snapshot";
-    return snapshot.protected ? `${type}, password protected` : type;
-  }
-
-  _computeIcon(type) {
-    return type === "full"
-      ? "hassio:package-variant-closed"
-      : "hassio:package-variant";
-  }
-
-  _snapshotClicked(ev) {
-    this.snapshotSlug = ev.model.snapshot.slug;
-  }
-
-  _fullSelected(type) {
-    return type === "full";
-  }
-
-  _snapshotDeletedChanged(snapshotDeleted) {
-    if (snapshotDeleted) {
-      this._updateSnapshots();
-      this.snapshotDeleted = false;
-    }
-  }
-
-  refreshData() {
-    this.hass.callApi("post", "hassio/snapshots/reload").then(() => {
-      this._updateSnapshots();
-    });
-  }
-}
-
-customElements.define("hassio-snapshots", HassioSnapshots);

hassio/src/snapshots/hassio-snapshots.ts

@@ -0,0 +1,363 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultArray,
+  css,
+  property,
+  PropertyValues,
+  customElement,
+} from "lit-element";
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
+
+import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
+
+import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
+import { HomeAssistant } from "../../../src/types";
+import {
+  HassioSnapshot,
+  HassioSupervisorInfo,
+  fetchHassioSnapshots,
+  reloadHassioSnapshots,
+  HassioFullSnapshotCreateParams,
+  HassioPartialSnapshotCreateParams,
+  createHassioFullSnapshot,
+  createHassioPartialSnapshot,
+} from "../../../src/data/hassio";
+import { PolymerChangedEvent } from "../../../src/polymer-types";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+
+// Not duplicate, used for typing
+// tslint:disable-next-line
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+// tslint:disable-next-line
+import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
+// tslint:disable-next-line
+import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+
+interface CheckboxItem {
+  slug: string;
+  name: string;
+  checked: boolean;
+}
+
+@customElement("hassio-snapshots")
+class HassioSnapshots extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property() private _snapshotName = "";
+  @property() private _snapshotPassword = "";
+  @property() private _snapshotHasPassword = false;
+  @property() private _snapshotType: HassioSnapshot["type"] = "full";
+  @property() private _snapshots?: HassioSnapshot[] = [];
+  @property() private _addonList: CheckboxItem[] = [];
+  @property() private _folderList: CheckboxItem[] = [
+    {
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: true,
+    },
+    { slug: "ssl", name: "SSL", checked: true },
+    { slug: "share", name: "Share", checked: true },
+    { slug: "addons/local", name: "Local add-ons", checked: true },
+  ];
+  @property() private _creatingSnapshot = false;
+  @property() private _error = "";
+
+  public async refreshData() {
+    await reloadHassioSnapshots(this.hass);
+    await this._updateSnapshots();
+  }
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="content">
+        <div class="card-group">
+          <div class="title">
+            Create snapshot
+            <div class="description">
+              Snapshots allow you to easily backup and restore all data of your
+              Hass.io instance.
+            </div>
+          </div>
+          <paper-card>
+            <div class="card-content">
+              <paper-input
+                autofocus
+                label="Name"
+                name="snapshotName"
+                .value=${this._snapshotName}
+                @value-changed=${this._handleTextValueChanged}
+              ></paper-input>
+              Type:
+              <paper-radio-group
+                name="snapshotType"
+                .selected=${this._snapshotType}
+                @selected-changed=${this._handleRadioValueChanged}
+              >
+                <paper-radio-button name="full">
+                  Full snapshot
+                </paper-radio-button>
+                <paper-radio-button name="partial">
+                  Partial snapshot
+                </paper-radio-button>
+              </paper-radio-group>
+              ${this._snapshotType === "full"
+                ? undefined
+                : html`
+                    Folders:
+                    ${this._folderList.map(
+                      (folder, idx) => html`
+                        <paper-checkbox
+                          .idx=${idx}
+                          .checked=${folder.checked}
+                          @checked-changed=${this._folderChecked}
+                        >
+                          ${folder.name}
+                        </paper-checkbox>
+                      `
+                    )}
+                    Add-ons:
+                    ${this._addonList.map(
+                      (addon, idx) => html`
+                        <paper-checkbox
+                          .idx=${idx}
+                          .checked="{{item.checked}}"
+                          @checked-changed=${this._addonChecked}
+                        >
+                          ${addon.name}
+                        </paper-checkbox>
+                      `
+                    )}
+                  `}
+              Security:
+              <paper-checkbox
+                name="snapshotHasPassword"
+                .checked=${this._snapshotHasPassword}
+                @checked-changed=${this._handleCheckboxValueChanged}
+              >
+                Password protection
+              </paper-checkbox>
+              ${this._snapshotHasPassword
+                ? html`
+                    <paper-input
+                      label="Password"
+                      type="password"
+                      name="snapshotPassword"
+                      .value=${this._snapshotPassword}
+                      @value-changed=${this._handleTextValueChanged}
+                    ></paper-input>
+                  `
+                : undefined}
+              ${this._error !== ""
+                ? html`
+                    <p class="error">${this._error}</p>
+                  `
+                : undefined}
+            </div>
+            <div class="card-actions">
+              <mwc-button
+                .disabled=${this._creatingSnapshot}
+                @click=${this._createSnapshot}
+              >
+                Create
+              </mwc-button>
+            </div>
+          </paper-card>
+        </div>
+
+        <div class="card-group">
+          <div class="title">Available snapshots</div>
+          ${this._snapshots === undefined
+            ? undefined
+            : this._snapshots.length === 0
+            ? html`
+                <paper-card>
+                  <div class="card-content">
+                    You don't have any snapshots yet.
+                  </div>
+                </paper-card>
+              `
+            : this._snapshots.map(
+                (snapshot) => html`
+                  <paper-card
+                    class="pointer"
+                    .snapshot=${snapshot}
+                    @click=${this._snapshotClicked}
+                  >
+                    <div class="card-content">
+                      <hassio-card-content
+                        .hass=${this.hass}
+                        .title=${snapshot.name || snapshot.slug}
+                        .description=${this._computeDetails(snapshot)}
+                        .datetime=${snapshot.date}
+                        .icon=${snapshot.type === "full"
+                          ? "hassio:package-variant-closed"
+                          : "hassio:package-variant"}
+                        .
+                        .icon-class="snapshot"
+                      ></hassio-card-content>
+                    </div>
+                  </paper-card>
+                `
+              )}
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._updateSnapshots();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("supervisorInfo")) {
+      this._addonList = this.supervisorInfo.addons
+        .map((addon) => ({
+          slug: addon.slug,
+          name: addon.name,
+          checked: true,
+        }))
+        .sort((a, b) => (a.name < b.name ? -1 : 1));
+    }
+  }
+
+  private _handleTextValueChanged(ev: PolymerChangedEvent<string>) {
+    const input = ev.currentTarget as PaperInputElement;
+    this[`_${input.name}`] = ev.detail.value;
+  }
+
+  private _handleCheckboxValueChanged(ev) {
+    const input = ev.currentTarget as PaperCheckboxElement;
+    this[`_${input.name}`] = input.checked;
+  }
+
+  private _handleRadioValueChanged(ev: PolymerChangedEvent<string>) {
+    const input = ev.currentTarget as PaperRadioGroupElement;
+    this[`_${input.getAttribute("name")}`] = ev.detail.value;
+  }
+
+  private _folderChecked(ev) {
+    const { idx, checked } = ev.currentTarget!;
+    this._folderList = this._folderList.map((folder, curIdx) =>
+      curIdx === idx ? { ...folder, checked } : folder
+    );
+  }
+
+  private _addonChecked(ev) {
+    const { idx, checked } = ev.currentTarget!;
+    this._addonList = this._addonList.map((addon, curIdx) =>
+      curIdx === idx ? { ...addon, checked } : addon
+    );
+  }
+
+  private async _updateSnapshots() {
+    try {
+      this._snapshots = await fetchHassioSnapshots(this.hass);
+      this._snapshots.sort((a, b) => (a.date < b.date ? 1 : -1));
+    } catch (err) {
+      this._error = err.message;
+    }
+  }
+
+  private async _createSnapshot() {
+    this._error = "";
+    if (this._snapshotHasPassword && !this._snapshotPassword.length) {
+      this._error = "Please enter a password.";
+      return;
+    }
+    this._creatingSnapshot = true;
+    await this.updateComplete;
+
+    const name =
+      this._snapshotName ||
+      new Date().toLocaleDateString(navigator.language, {
+        weekday: "long",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
+    try {
+      if (this._snapshotType === "full") {
+        const data: HassioFullSnapshotCreateParams = { name };
+        if (this._snapshotHasPassword) {
+          data.password = this._snapshotPassword;
+        }
+        await createHassioFullSnapshot(this.hass, data);
+      } else {
+        const addons = this._addonList
+          .filter((addon) => addon.checked)
+          .map((addon) => addon.slug);
+        const folders = this._folderList
+          .filter((folder) => folder.checked)
+          .map((folder) => folder.slug);
+
+        const data: HassioPartialSnapshotCreateParams = {
+          name,
+          folders,
+          addons,
+        };
+        if (this._snapshotHasPassword) {
+          data.password = this._snapshotPassword;
+        }
+        await createHassioPartialSnapshot(this.hass, data);
+      }
+      this._updateSnapshots();
+      fireEvent(this, "hass-api-called", { success: true, response: null });
+    } catch (err) {
+      this._error = err.message;
+    } finally {
+      this._creatingSnapshot = false;
+    }
+  }
+
+  private _computeDetails(snapshot: HassioSnapshot) {
+    const type =
+      snapshot.type === "full" ? "Full snapshot" : "Partial snapshot";
+    return snapshot.protected ? `${type}, password protected` : type;
+  }
+
+  private _snapshotClicked(ev) {
+    showHassioSnapshotDialog(this, {
+      slug: ev.currentTarget!.snapshot.slug,
+      onDelete: () => this._updateSnapshots(),
+    });
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      hassioStyle,
+      css`
+        paper-radio-group {
+          display: block;
+        }
+        paper-radio-button {
+          padding: 0 0 2px 2px;
+        }
+        paper-radio-button,
+        paper-checkbox,
+        paper-input[type="password"] {
+          display: block;
+          margin: 4px 0 4px 48px;
+        }
+        .pointer {
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-snapshots": HassioSnapshots;
+  }
+}

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

@@ -4,12 +4,14 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
+
+import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 
 class HassioHostInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-      <style include="iron-flex ha-style">
+      <style>
         paper-card {
           display: inline-block;
           width: 400px;
@@ -173,7 +175,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
         () => "Error getting hardware info"
       )
       .then((content) => {
-        this.fire("hassio-markdown-dialog", {
+        showHassioMarkdownDialog(this, {
           title: "Hardware",
           content: content,
         });

hassio/src/system/hassio-supervisor-info.js

@@ -4,12 +4,12 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-      <style include="iron-flex ha-style">
+      <style>
         paper-card {
           display: inline-block;
           width: 400px;

hassio/src/system/hassio-system.js

@@ -1,4 +1,3 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -9,7 +8,7 @@ import "./hassio-supervisor-log";
 class HassioSystem extends PolymerElement {
   static get template() {
     return html`
-      <style include="iron-flex ha-style">
+      <style>
         .content {
           margin: 4px;
           color: var(--primary-text-color);

hassio/webpack.config.js

@@ -1,7 +1,10 @@
+const webpack = require("webpack");
 const CompressionPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
+
 const config = require("./config.js");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
+const webpackBase = require("../build-scripts/webpack.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
 const isCI = process.env.CI === "true";
@@ -30,11 +33,22 @@ module.exports = {
   },
   optimization: webpackBase.optimization(latestBuild),
   plugins: [
+    new webpack.DefinePlugin({
+      __DEV__: JSON.stringify(!isProdBuild),
+      __DEMO__: false,
+      __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+      "process.env.NODE_ENV": JSON.stringify(
+        isProdBuild ? "production" : "development"
+      ),
+    }),
     isProdBuild &&
       !isCI &&
       new CompressionPlugin({
         cache: true,
         exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
+        algorithm(input, compressionOptions, callback) {
+          return zopfli.gzip(input, compressionOptions, callback);
+        },
       }),
   ].filter(Boolean),
   resolve: {

package.json

@@ -17,15 +17,15 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material/mwc-button": "^0.3.6",
-    "@material/mwc-ripple": "^0.3.6",
-    "@mdi/svg": "^3.0.39",
-    "@polymer/app-layout": "^3.0.1",
+    "@material/mwc-base": "^0.6.0",
+    "@material/mwc-button": "^0.6.0",
+    "@material/mwc-ripple": "^0.6.0",
+    "@mdi/svg": "3.7.95",
+    "@polymer/app-layout": "^3.0.2",
     "@polymer/app-localize-behavior": "^3.0.1",
     "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
     "@polymer/font-roboto": "^3.0.2",
-    "@polymer/font-roboto-local": "^3.0.2",
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -34,18 +34,19 @@
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-media-query": "^3.0.1",
+    "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
-    "@polymer/paper-checkbox": "^3.0.1",
+    "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",
     "@polymer/paper-drawer-panel": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.0.1",
     "@polymer/paper-fab": "^3.0.1",
-    "@polymer/paper-icon-button": "^3.0.1",
+    "@polymer/paper-icon-button": "^3.0.2",
     "@polymer/paper-input": "^3.0.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
@@ -56,118 +57,124 @@
     "@polymer/paper-ripple": "^3.0.1",
     "@polymer/paper-scroll-header-panel": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
-    "@polymer/paper-spinner": "^3.0.1",
+    "@polymer/paper-spinner": "^3.0.2",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.0.1",
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
-    "@polymer/polymer": "^3.0.5",
-    "@vaadin/vaadin-combo-box": "^4.2.0",
-    "@vaadin/vaadin-date-picker": "^3.3.1",
+    "@polymer/polymer": "3.1.0",
+    "@vaadin/vaadin-combo-box": "^4.2.8",
+    "@vaadin/vaadin-date-picker": "^3.3.3",
     "@webcomponents/shadycss": "^1.9.0",
-    "@webcomponents/webcomponentsjs": "^2.2.6",
-    "chart.js": "~2.7.2",
-    "chartjs-chart-timeline": "^0.2.1",
-    "codemirror": "^5.43.0",
+    "@webcomponents/webcomponentsjs": "^2.2.7",
+    "chart.js": "~2.8.0",
+    "chartjs-chart-timeline": "^0.3.0",
+    "codemirror": "^5.45.0",
+    "cpx": "^1.5.0",
     "deep-clone-simple": "^1.1.1",
     "es6-object-assign": "^1.1.0",
-    "fecha": "^3.0.0",
-    "hls.js": "^0.12.3",
-    "home-assistant-js-websocket": "^3.3.0",
+    "fecha": "^3.0.2",
+    "fuse.js": "^3.4.4",
+    "google-timezones-json": "^1.0.2",
+    "hls.js": "^0.12.4",
+    "home-assistant-js-websocket": "^4.2.2",
     "intl-messageformat": "^2.2.0",
     "jquery": "^3.3.1",
-    "js-yaml": "^3.12.0",
-    "leaflet": "^1.3.4",
-    "lit-element": "^2.0.0",
-    "lit-html": "^1.0.0",
-    "marked": "^0.6.0",
-    "mdn-polyfills": "^5.12.0",
-    "memoize-one": "^5.0.0",
-    "moment": "^2.22.2",
-    "preact": "^8.3.1",
+    "js-yaml": "^3.13.0",
+    "leaflet": "^1.4.0",
+    "lit-element": "^2.2.0",
+    "lit-html": "^1.1.0",
+    "marked": "^0.6.1",
+    "mdn-polyfills": "^5.16.0",
+    "memoize-one": "^5.0.2",
+    "moment": "^2.24.0",
+    "preact": "^8.4.2",
     "preact-compat": "^3.18.4",
-    "react-big-calendar": "^0.19.2",
-    "regenerator-runtime": "^0.12.1",
-    "round-slider": "^1.3.2",
-    "superstruct": "^0.6.0",
-    "unfetch": "^4.0.1",
+    "react-big-calendar": "^0.20.4",
+    "regenerator-runtime": "^0.13.2",
+    "roboto-fontface": "^0.10.0",
+    "round-slider": "^1.3.3",
+    "superstruct": "^0.6.1",
+    "unfetch": "^4.1.0",
     "web-animations-js": "^2.3.1",
-    "xss": "^1.0.3"
+    "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-proposal-decorators": "^7.3.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-typescript": "^7.1.0",
-    "@gfx/zopfli": "^1.0.9",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-typescript": "^7.3.3",
+    "@gfx/zopfli": "^1.0.11",
     "@types/chai": "^4.1.7",
-    "@types/codemirror": "^0.0.71",
-    "@types/hls.js": "^0.12.2",
+    "@types/hls.js": "^0.12.3",
     "@types/leaflet": "^1.4.3",
-    "@types/memoize-one": "^4.1.0",
-    "@types/mocha": "^5.2.5",
+    "@types/memoize-one": "4.1.0",
+    "@types/mocha": "^5.2.6",
     "babel-eslint": "^10",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
     "compression-webpack-plugin": "^2.0.0",
-    "copy-webpack-plugin": "^4.5.2",
-    "del": "^3.0.0",
-    "eslint": "^5.6.0",
+    "copy-webpack-plugin": "^5.0.2",
+    "del": "^4.0.0",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-import-resolver-webpack": "^0.10.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "gulp": "^3.9.1",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-import-resolver-webpack": "^0.11.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "fs-extra": "^7.0.1",
+    "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
     "gulp-hash": "^4.2.2",
     "gulp-hash-filename": "^2.0.1",
     "gulp-insert": "^0.5.0",
-    "gulp-json-transform": "^0.4.5",
+    "gulp-json-transform": "^0.4.6",
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^1.4.0",
+    "gulp-zopfli-green": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.0",
-    "lint-staged": "^8.0.2",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "lodash.template": "^4.4.0",
     "merge-stream": "^1.0.1",
-    "mocha": "^5.2.0",
+    "mocha": "^6.0.2",
     "parse5": "^5.1.0",
-    "polymer-cli": "^1.8.0",
-    "prettier": "^1.14.3",
-    "raw-loader": "^0.5.1",
+    "polymer-cli": "^1.9.7",
+    "prettier": "^1.16.4",
+    "raw-loader": "^2.0.0",
     "reify": "^0.18.1",
-    "require-dir": "^1.0.0",
-    "sinon": "^7.1.1",
+    "require-dir": "^1.2.0",
+    "sinon": "^7.3.1",
     "terser-webpack-plugin": "^1.2.3",
-    "ts-mocha": "^2.0.0",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.15.0",
+    "ts-mocha": "^6.0.0",
+    "tslint": "^5.14.0",
+    "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.1.4",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "wct-browser-legacy": "^1.0.1",
-    "web-component-tester": "^6.8.0",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8",
-    "workbox-webpack-plugin": "^3.5.0"
+    "typescript": "^3.4.1",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "wct-browser-legacy": "^1.0.2",
+    "web-component-tester": "^6.9.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1",
+    "webpack-manifest-plugin": "^2.0.4",
+    "workbox-webpack-plugin": "^4.1.1"
   },
+  "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "resolutions": {
-    "@polymer/polymer": "3.1.0",
-    "@webcomponents/webcomponentsjs": "^2.2.6",
-    "@webcomponents/shadycss": "^1.9.0",
-    "@vaadin/vaadin-overlay": "3.2.2",
-    "@vaadin/vaadin-lumo-styles": "1.3.0"
+    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "@vaadin/vaadin-lumo-styles": "^1.4.2",
+    "@polymer/polymer": "3.1.0"
   },
   "main": "src/home-assistant.js",
   "husky": {

public/__init__.py

@@ -1,30 +1,7 @@
 """Frontend for Home Assistant."""
-import os
-from user_agents import parse
-
-FAMILY_MIN_VERSION = {
-    'Chrome': 55,          # Async/await
-    'Chrome Mobile': 55,
-    'Firefox': 52,         # Async/await
-    'Firefox Mobile': 52,
-    'Opera': 42,           # Async/await
-    'Edge': 15,            # Async/await
-    'Safari': 10.1,        # Async/await
-}
+from pathlib import Path
 
 
 def where():
     """Return path to the frontend."""
-    return os.path.dirname(__file__)
-
-
-def version(useragent):
-    """Get the version for given user agent."""
-    useragent = parse(useragent)
-
-    # on iOS every browser uses the Safari engine
-    if useragent.os.family == 'iOS':
-        return useragent.os.version[0] >= FAMILY_MIN_VERSION['Safari']
-
-    version = FAMILY_MIN_VERSION.get(useragent.browser.family)
-    return version and useragent.browser.version[0] >= version
+    return Path(__file__).parent