Consolidate frontend (#468)

* Consolidate frontend

* Remove no longer needed cd

* Get Roboto from bower_components

* Remove external dependency from update_mdi.py

* Copy leaflet assets on build time

* Tweak Dockerfile

* Create Python package

* Set zip_safe to False

* Update build scripts

* Version bump to 20171021.0

* Fix service worker

* Version bump to 20171021.2

* Update docker ignore

* Tweak Dockerfile thanks to Adam

script/bootstrap

@@ -0,0 +1,16 @@
+#!/bin/sh
+# Resolve all frontend dependencies that the application requires to develop.
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+# Install node modules
+yarn install
+
+# Install bower web components. Allow to download the components as root since the user in docker is root.
+./node_modules/.bin/bower install --allow-root
+
+# Build files that need to be generated to run development mode
+yarn dev

script/build_frontend

@@ -0,0 +1,54 @@
+#!/bin/sh
+# Builds the frontend for production
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+OUTPUT_DIR=hass_frontend
+
+rm -rf $OUTPUT_DIR
+cp -r public $OUTPUT_DIR
+
+# Build frontend
+BUILD_DEV=0 ./node_modules/.bin/gulp
+
+# Entry points
+cp build/*.js build/*.html $OUTPUT_DIR
+
+# Panels
+mkdir $OUTPUT_DIR/panels
+cp build/panels/*.html $OUTPUT_DIR/panels
+
+# Local Roboto
+cp -r bower_components/font-roboto-local/fonts $OUTPUT_DIR
+
+# Polyfill web components
+cp bower_components/webcomponentsjs/webcomponents-lite.js $OUTPUT_DIR
+cp bower_components/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR
+
+# Icons
+script/update_mdi.py
+
+# Leaflet
+mkdir $OUTPUT_DIR/images/leaflet
+cp bower_components/leaflet/dist/leaflet.css $OUTPUT_DIR/images/leaflet
+cp -r bower_components/leaflet/dist/images $OUTPUT_DIR/images/leaflet/
+
+# Generate service worker
+BUILD_DEV=0 ./node_modules/.bin/gulp gen-service-worker
+cp build/service_worker.js $OUTPUT_DIR
+
+
+# GZIP frontend
+cd $OUTPUT_DIR
+gzip -f -n -k -9 *.html *.js ./panels/*.html ./fonts/roboto/*.ttf ./fonts/robotomono/*.ttf
+cd ..
+
+# Generate the __init__ file
+echo "VERSION = '`git rev-parse HEAD`'" >> $OUTPUT_DIR/__init__.py
+echo "CREATED_AT = `date +%s`" >> $OUTPUT_DIR/__init__.py
+
+# Generate the MD5 hash of the new frontend
+script/fingerprint_frontend.py

script/fingerprint_frontend.py

@@ -0,0 +1,36 @@
+#!/usr/bin/env python3
+"""Generate a file with all md5 hashes of the assets."""
+
+from collections import OrderedDict
+import glob
+import hashlib
+import json
+
+fingerprint_file = './hass_frontend/__init__.py'
+base_dir = 'hass_frontend/'
+
+
+def fingerprint():
+    """Fingerprint the frontend files."""
+    files = (glob.glob(base_dir + '**/*.html') +
+             glob.glob(base_dir + '*.html') +
+             glob.glob(base_dir + 'core.js') +
+             glob.glob(base_dir + 'compatibility.js'))
+
+    md5s = OrderedDict()
+
+    for fil in sorted(files):
+        name = fil[len(base_dir):]
+        with open(fil) as fp:
+            md5 = hashlib.md5(fp.read().encode('utf-8')).hexdigest()
+        md5s[name] = md5
+
+    template = "FINGERPRINTS = {}\n"
+    result = template.format(json.dumps(md5s, indent=4))
+
+    with open(fingerprint_file, 'at') as fp:
+        fp.write(result)
+
+
+if __name__ == '__main__':
+    fingerprint()

script/release

@@ -0,0 +1,6 @@
+#!/bin/sh
+# Pushes a new version to PyPi.
+
+cd "$(dirname "$0")/.."
+
+python3 setup.py sdist upload

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()