Extract partial map as standalone file

package.json

@@ -11,7 +11,7 @@
     "js_dev_demo": "BUILD_DEMO=1 webpack --color --progress -d --watch",
     "js_prod": "BUILD_DEV=0 webpack --color --progress -p",
     "js_demo": "BUILD_DEV=0 BUILD_DEMO=1 webpack --color --progress -p",
-    "frontend_html": "vulcanize --inline-css --inline-scripts --strip-comments --strip-exclude bower_components/font-roboto/roboto.html src/home-assistant.html > build/frontend.vulcan.html && node script/minify.js",
+    "frontend_html": "node script/vulcanize.js",
     "frontend_prod": "npm run js_prod && npm run frontend_html",
     "frontend_demo": "npm run js_demo && npm run frontend_html",
     "setup_js_dev": "git submodule init && git submodule update && cd home-assistant-js && npm install",

script/minify.js

@@ -1,18 +0,0 @@
-var minify = require('html-minifier');
-var fs = require('fs');
-
-var html = fs.readFileSync('build/frontend.vulcan.html').toString();
-
-var minifiedHtml = minify.minify(html, {
-  customAttrAssign: [/\$=/],
-  removeComments: true,
-  removeCommentsFromCDATA: true,
-  removeCDATASectionsFromCDATA: true,
-  collapseWhitespace: true,
-  removeScriptTypeAttributes: true,
-  removeStyleLinkTypeAttributes: true,
-  minifyJS: true,
-  minifyCSS: true,
-});
-
-fs.writeFileSync('build/frontend.html', minifiedHtml);

script/sw-precache.js

@@ -21,14 +21,17 @@ function md5(filename) {
 
 var appPaths = ['/', '/states', '/logbook', '/history', '/map',
     '/devService', '/devState', '/devEvent', '/devInfo', '/devTemplate'];
-var fingerprinted = ['frontend.html', 'mdi.html', 'core.js'];
+var fingerprinted = ['frontend.html', 'mdi.html', 'core.js', 'partial-map.html'];
 
 var dynamicUrlToDependencies = {};
 
+// Have all app paths be refreshed based on if frontend changed
 appPaths.forEach(ap => {
-  dynamicUrlToDependencies[ap] = [rootDir + '/frontend.html'];
+  dynamicUrlToDependencies[ap] = [rootDir + '/frontend.html',
+                                  rootDir + '/partial-map.html'];
 });
 
+// Create fingerprinted versions of our dependencies.
 fingerprinted.forEach(fn => {
   var parts = path.parse(fn);
 

script/vulcanize.js

@@ -0,0 +1,61 @@
+var Vulcanize = require('vulcanize');
+var minify = require('html-minifier');
+var fs = require('fs');
+
+function minifyHTML(html) {
+  return minify.minify(html, {
+    customAttrAssign: [/\$=/],
+    removeComments: true,
+    removeCommentsFromCDATA: true,
+    removeCDATASectionsFromCDATA: true,
+    collapseWhitespace: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    minifyJS: true,
+    minifyCSS: true,
+  });
+}
+
+var toProcess = [
+  {
+    source: 'src/home-assistant.html',
+    output: 'frontend.html',
+    vulcan: new Vulcanize({
+      stripExcludes: [
+        'bower_components/font-roboto/roboto.html',
+      ],
+      inlineScripts: true,
+      inlineCss: true,
+      implicitStrip: true,
+      stripComments: true,
+    }),
+  },
+  {
+    source: 'src/layouts/partial-map.html',
+    output: 'partial-map.html',
+    vulcan: new Vulcanize({
+      stripExcludes: [
+        'bower_components/polymer/polymer.html',
+        'bower_components/paper-toolbar/paper-toolbar.html',
+        'bower_components/paper-icon-button/paper-icon-button.html',
+        'bower_components/iron-icon/iron-icon.html',
+        'bower_components/iron-image/iron-image.html',
+      ],
+      inlineScripts: true,
+      inlineCss: true,
+      implicitStrip: true,
+      stripComments: true,
+    }),
+  },
+];
+
+toProcess.forEach(function (info) {
+  info.vulcan.process(info.source, function (err, inlinedHtml) {
+    if (err !== null) {
+      console.error(info.source, err);
+      return;
+    }
+
+    fs.writeFileSync('build/' + info.output, minifyHTML(inlinedHtml));
+  });
+});

src/layouts/home-assistant-main.html

@@ -4,7 +4,7 @@
 <link rel='import' href='../layouts/partial-cards.html'>
 <link rel='import' href='../layouts/partial-logbook.html'>
 <link rel='import' href='../layouts/partial-history.html'>
-<link rel='import' href='../layouts/partial-map.html'>
+<!-- <link rel='import' href='../layouts/partial-map.html'> -->
 <link rel='import' href='../layouts/partial-dev-call-service.html'>
 <link rel='import' href='../layouts/partial-dev-fire-event.html'>
 <link rel='import' href='../layouts/partial-dev-set-state.html'>

src/layouts/home-assistant-main.js

@@ -3,7 +3,7 @@ import Polymer from '../polymer';
 import '../layouts/partial-cards';
 import '../layouts/partial-logbook';
 import '../layouts/partial-history';
-import '../layouts/partial-map';
+// import '../layouts/partial-map';
 import '../layouts/partial-dev-call-service';
 import '../layouts/partial-dev-fire-event';
 import '../layouts/partial-dev-set-state';
@@ -106,10 +106,14 @@ export default new Polymer({
     }
   },
 
-  activePaneChanged() {
+  activePaneChanged(newValue) {
     if (this.narrow) {
       this.$.drawer.closeDrawer();
     }
+    if (window.deferredLoading[newValue]) {
+      this.importHref(window.deferredLoading[newValue]);
+      window.deferredLoading[newValue] = false;
+    }
   },
 
   attached() {