Use hydrolysis for optimal panel built size

package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-html": "^1.5.1",
     "eslint-plugin-import": "^1.11.0",
     "html-minifier": "^3.0.1",
+    "hydrolysis": "^1.24.1",
     "polymer-cli": "^0.12.0",
     "rollup": "^0.34.1",
     "rollup-plugin-babel": "^2.6.1",

script/vulcanize.js

@@ -2,6 +2,7 @@
 
 var Vulcanize = require('vulcanize');
 var minify = require('html-minifier');
+var hyd = require('hydrolysis');
 var fs = require('fs');
 
 if (!fs.existsSync('build')) {
@@ -32,14 +33,12 @@ const baseVulcanOptions = {
   stripComments: true,
 };
 
-const vulcan = new Vulcanize({
+const panelVulcan = new Vulcanize({
   inlineScripts: true,
   inlineCss: true,
   implicitStrip: true,
   stripComments: true,
-  stripExcludes: [
-    'bower_components/polymer/polymer.html',
-  ],
+  stripExcludes: undefined,
 });
 
 const toProcess = [
@@ -58,13 +57,13 @@ fs.readdirSync('./panels').forEach(panel => {
   toProcess.push({
     source: `panels/${panel}/ha-panel-${panel}.html`,
     output: `panels/ha-panel-${panel}.html`,
+    vulcan: panelVulcan,
   });
 });
 
 function process(entry) {
   console.log('Processing', entry.source);
-  const vulc = entry.vulcan || vulcan;
-  vulc.process(entry.source, (err, inlinedHtml) => {
+  entry.vulcan.process(entry.source, (err, inlinedHtml) => {
     if (err !== null) {
       console.error(entry.source, err);
       return;
@@ -80,4 +79,11 @@ function process(entry) {
   });
 }
 
-process(toProcess.pop());
+// Fetch all dependencies of main app and exclude them from panels
+hyd.Analyzer.analyze('src/home-assistant.html')
+    .then(function (analyzer) {
+      return analyzer._getDependencies('src/home-assistant.html');
+    })
+    .then(deps => { panelVulcan.stripExcludes = deps; })
+    // And then start vulcanizing!!
+    .then(() => process(toProcess.pop()));

src/home-assistant.html

@@ -12,7 +12,8 @@
 <link rel='import' href='./layouts/login-form.html'>
 <link rel='import' href='./layouts/home-assistant-main.html'>
 <link rel='import' href='./resources/home-assistant-style.html'>
-<link rel='import' href='./resources/panel-imports.html'>
+<!-- to support panels -->
+<link rel="import" href="../layouts/partial-base.html">
 
 <dom-module id='home-assistant'>
   <template>

src/layouts/partial-base.html

@@ -5,6 +5,8 @@
 <link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 
+<link rel='import' href='../components/ha-menu-button.html'>
+
 <dom-module id='partial-base'>
   <template>
     <style is="custom-style" include="iron-positioning"></style>
@@ -15,14 +17,14 @@
         -moz-user-select: none;
       }
 
-      .menu-icon {
-        margin-right: 24px;
+      .title {
+        margin-left: 24px !important;
       }
     </style>
 
     <paper-scroll-header-panel class='fit'>
       <paper-toolbar>
-        <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
         <div class="title">
           <content select='[header-title]'></content>
         </div>
@@ -49,13 +51,5 @@ Polymer({
       value: false,
     },
   },
-
-  computeMenuButtonClass: function (narrow, showMenu) {
-    return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
-  },
-
-  toggleMenu: function () {
-    this.fire('open-menu');
-  },
 });
 </script>

src/resources/panel-imports.html

@@ -1,10 +0,0 @@
-<!--
-  Components that are used by panels.
-
-  Temporary while we figure imports out.
--->
-<link rel="import" href="../layouts/partial-base.html">
-<link rel="import" href="../components/display-time.html">
-<link rel="import" href="../components/domain-icon.html">
-<link rel="import" href="../components/ha-menu-button.html">
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">