Write old mdi.html exactly as hass.io expects (#1213)

* Write old mdi.html exactly as hass.io expects

* Create build dir if it doesn't exist

gulp/tasks/gen-icons.js

@@ -6,7 +6,8 @@ const config = require('../config');
 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_PATH = path.resolve(__dirname, '../../build/mdi.html');
+const OUTPUT_DIR = path.resolve(__dirname, '../../build');
+const OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'mdi.html');
 
 function iconPath(name) {
   return path.resolve(ICON_PATH, `${name}.svg`);
@@ -34,7 +35,8 @@ ${iconDefs}
 async function genIcons(es6) {
   const meta = JSON.parse(fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), 'UTF-8'));
   const iconDefs = meta.map(iconInfo => transformXMLtoPolymer(iconInfo.name, loadIcon(iconInfo.name))).join('');
+  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
   fs.writeFileSync(OUTPUT_PATH, generateIconset('mdi', iconDefs));
 }
 
-gulp.task('gen-icons', () => genIcons(/* es6= */ true));
+gulp.task('gen-icons', () => genIcons());

public/mdi.html

@@ -1,2 +0,0 @@
-<!-- For backwards compat for Hass.io -->
-<script src='./mdi.js'></script>

script/build_frontend

@@ -6,10 +6,12 @@ set -e
 
 cd "$(dirname "$0")/.."
 
+BUILD_DIR=build
+BUILD_TRANSLATIONS_DIR=build-translations
 OUTPUT_DIR=hass_frontend
 OUTPUT_DIR_ES5=hass_frontend_es5
 
-rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5 build-translations
+rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5 $BUILD_DIR $BUILD_TRANSLATIONS_DIR
 cp -r public $OUTPUT_DIR
 mkdir $OUTPUT_DIR_ES5
 cp -r public/__init__.py $OUTPUT_DIR_ES5/
@@ -18,6 +20,9 @@ cp -r public/__init__.py $OUTPUT_DIR_ES5/
 ./node_modules/.bin/gulp build-translations gen-icons
 NODE_ENV=production ./node_modules/.bin/webpack
 
+# Temp for Hass.io
+script/update_mdi.py
+
 ./node_modules/.bin/gulp compress
 
 # Generate the __init__ file

script/develop

@@ -4,10 +4,11 @@
 # Stop on errors
 set -e
 
+BUILD_DIR=build
 OUTPUT_DIR=hass_frontend
 OUTPUT_DIR_ES5=hass_frontend_es5
 
-rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5
+rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5 $BUILD_DIR
 cp -r public $OUTPUT_DIR
 mkdir $OUTPUT_DIR_ES5
 # Needed in case frontend repo installed with pip3 install -e

script/update_mdi.py

@@ -0,0 +1,63 @@
+#!/usr/bin/env python3
+"""Download the latest Polymer v1 iconset for materialdesignicons.com."""
+import os
+import re
+import sys
+import urllib.request
+
+GETTING_STARTED_URL = ('https://raw.githubusercontent.com/Templarian/'
+                       'MaterialDesign/master/site/getting-started.savvy')
+DOWNLOAD_LINK = re.compile(r'(/api/download/polymer/v1/([A-Z0-9-]{36}))')
+START_ICONSET = '<iron-iconset-svg'
+
+OUTPUT_BASE = 'hass_frontend'
+ICONSET_OUTPUT = os.path.join(OUTPUT_BASE, 'mdi.html')
+
+
+def get_text(url):
+    with urllib.request.urlopen(url) as f:
+        return f.read().decode('utf-8')
+
+
+def get_remote_version():
+    """Get current version and download link."""
+    gs_page = get_text(GETTING_STARTED_URL)
+
+    mdi_download = re.search(DOWNLOAD_LINK, gs_page)
+
+    if not mdi_download:
+        print("Unable to find download link")
+        sys.exit()
+
+    return 'https://materialdesignicons.com' + mdi_download.group(1)
+
+
+def clean_component(source):
+    """Clean component."""
+    return source[source.index(START_ICONSET):]
+
+
+def write_component(source):
+    """Write component."""
+    with open(ICONSET_OUTPUT, 'w') as outp:
+        print('Writing icons to', ICONSET_OUTPUT)
+        outp.write(source)
+
+
+def main():
+    """Main section of the script."""
+    # All scripts should have their current work dir set to project root
+    if os.path.basename(os.getcwd()) == 'script':
+        os.chdir('..')
+
+    print("materialdesignicons.com icon updater")
+
+    remote_url = get_remote_version()
+    source = clean_component(get_text(remote_url))
+    write_component(source)
+
+    print('Updated to latest version')
+
+
+if __name__ == '__main__':
+    main()

src/entrypoints/app.js

@@ -26,6 +26,9 @@ import hassCallApi from '../util/hass-call-api.js';
 
 import computeStateName from '../common/entity/compute_state_name.js';
 import applyThemesOnElement from '../common/dom/apply_themes_on_element.js';
+// For MDI icons. Needs to be part of main bundle or else it won't hook
+// properly into iron-meta, which is used to transfer iconsets to iron-icon.
+import '../components/ha-iconset-svg.js';
 
 /* polyfill for paper-dropdown */
 import(/* webpackChunkName: "polyfill-web-animations-next" */ 'web-animations-js/web-animations-next-lite.min.js');

src/entrypoints/mdi.js

@@ -1,4 +1,3 @@
-import '../components/ha-iconset-svg.js';
 import iconSetContent from '../../build/mdi.html';
 
 const documentContainer = document.createElement('template');