20200505.0

.github/ISSUE_TEMPLATE/BUG_REPORT.md

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

.github/workflows/ci.yaml

@@ -35,7 +35,7 @@ jobs:
         env:
           CI: true
       - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
+        run: ./node_modules/.bin/gulp gen-icons-json
       - name: Build translations
         run: ./node_modules/.bin/gulp build-translations
       - name: Run eslint

build-scripts/gulp/app.js

@@ -5,7 +5,7 @@ const envVars = require("../env");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
 require("./webpack.js");
@@ -21,7 +21,7 @@ gulp.task(
     "clean",
     gulp.parallel(
       "gen-service-worker-dev",
-      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
+      "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
       "build-translations"
@@ -38,7 +38,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static",
     "webpack-prod-app",
     ...// Don't compress running tests

build-scripts/gulp/cast.js

@@ -2,7 +2,6 @@ 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");
@@ -17,12 +16,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-index-cast-dev",
-      "build-translations"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
     "webpack-dev-server-cast"
   )
@@ -36,7 +30,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
     "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/demo.js

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

build-scripts/gulp/entry-html.js

@@ -47,11 +47,9 @@ 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);
@@ -66,11 +64,9 @@ gulp.task("gen-pages-prod", (done) => {
   for (const page of PAGES) {
     const content = renderTemplate(page, {
       latestPageJS: latestManifest[`${page}.js`],
-      latestHassIconsJS: latestManifest["hass-icons.js"],
 
       es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
-      es5HassIconsJS: es5Manifest["hass-icons.js"],
     });
 
     fs.outputFileSync(
@@ -88,13 +84,11 @@ gulp.task("gen-index-app-dev", (done) => {
     latestAppJS: "/frontend_latest/app.js",
     latestCoreJS: "/frontend_latest/core.js",
     latestCustomPanelJS: "/frontend_latest/custom-panel.js",
-    latestHassIconsJS: "/frontend_latest/hass-icons.js",
 
     es5Compatibility: "/frontend_es5/compatibility.js",
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-    es5HassIconsJS: "/frontend_es5/hass-icons.js",
   }).replace(/#THEMEC/g, "{{ theme_color }}");
 
   fs.outputFileSync(path.resolve(config.root, "index.html"), content);
@@ -108,13 +102,11 @@ gulp.task("gen-index-app-prod", (done) => {
     latestAppJS: latestManifest["app.js"],
     latestCoreJS: latestManifest["core.js"],
     latestCustomPanelJS: latestManifest["custom-panel.js"],
-    latestHassIconsJS: latestManifest["hass-icons.js"],
 
     es5Compatibility: es5Manifest["compatibility.js"],
     es5AppJS: es5Manifest["app.js"],
     es5CoreJS: es5Manifest["core.js"],
     es5CustomPanelJS: es5Manifest["custom-panel.js"],
-    es5HassIconsJS: es5Manifest["hass-icons.js"],
   });
   const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
 

build-scripts/gulp/gallery.js

@@ -3,7 +3,7 @@ const gulp = require("gulp");
 
 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@@ -17,7 +17,7 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     "webpack-dev-server-gallery"
@@ -32,7 +32,7 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     "webpack-prod-gallery",
     "gen-index-gallery-prod"

build-scripts/gulp/gather-static.js

@@ -26,6 +26,13 @@ function copyTranslations(staticDir) {
   );
 }
 
+function copyMdiIcons(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // MDI icons output
+  fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
+}
+
 function copyPolyfills(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
@@ -80,6 +87,7 @@ gulp.task("copy-static", (done) => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
+  copyMdiIcons(staticDir);
 
   // Panel assets
   copyFileDir(
@@ -103,6 +111,7 @@ gulp.task("copy-static-demo", (done) => {
   copyMapPanel(paths.demo_static);
   copyFonts(paths.demo_static);
   copyTranslations(paths.demo_static);
+  copyMdiIcons(paths.demo_static);
   done();
 });
 
@@ -115,6 +124,7 @@ gulp.task("copy-static-cast", (done) => {
   copyMapPanel(paths.cast_static);
   copyFonts(paths.cast_static);
   copyTranslations(paths.cast_static);
+  copyMdiIcons(paths.cast_static);
   done();
 });
 
@@ -127,5 +137,6 @@ gulp.task("copy-static-gallery", (done) => {
   copyMapPanel(paths.gallery_static);
   copyFonts(paths.gallery_static);
   copyTranslations(paths.gallery_static);
+  copyMdiIcons(paths.gallery_static);
   done();
 });

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

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