Reorg into panels (#75)

script/sw-precache.js

@@ -11,53 +11,55 @@ var crypto = require('crypto');
 var fs = require('fs');
 var path = require('path');
 var swPrecache = require('sw-precache');
+var uglifyJS = require('uglify-js');
 
 var rootDir = '..';
+var panelDir = rootDir + '/panels';
+// var panels = fs.readdirSync(panelDir);
+
+var dynamicUrlToDependencies = {
+  '/': [rootDir + '/frontend.html', rootDir + '/core.js'],
+};
+
+var staticFingerprinted = [
+  'frontend.html',
+  'mdi.html',
+  'core.js',
+];
+
+// The panels that will always be loaded
+var panelsFingerprinted = [
+  'map', 'dev-event', 'dev-info', 'dev-service', 'dev-state', 'dev-template',
+];
 
 function md5(filename) {
   return crypto.createHash('md5')
     .update(fs.readFileSync(filename)).digest('hex');
 }
 
-var appPaths = {
-  '/': [],
-  '/states': [],
-  '/logbook': [],
-  '/history': [],
-  '/map': ['/partial-map.html'],
-  '/devService': ['/dev-tools.html'],
-  '/devState': ['/dev-tools.html'],
-  '/devEvent': ['/dev-tools.html'],
-  '/devInfo': ['/dev-tools.html'],
-  '/devTemplate': ['/dev-tools.html'],
-};
-
-var fingerprinted = ['frontend.html', 'mdi.html', 'core.js', 'partial-map.html',
-                     'dev-tools.html'];
-
-var dynamicUrlToDependencies = {};
-
-// Have all app paths be refreshed based on if their dependencies changed
-Object.keys(appPaths).forEach(ap => {
-  dynamicUrlToDependencies[ap] = [
-    rootDir + '/frontend.html', rootDir + '/core.js',
-  ].concat(appPaths[ap].map(val => rootDir + val));
-});
-
 // Create fingerprinted versions of our dependencies.
-fingerprinted.forEach(fn => {
+staticFingerprinted.forEach(fn => {
   var parts = path.parse(fn);
-
   var hash = md5(rootDir + '/' + parts.name + parts.ext);
   var url = '/static/' + parts.name + '-' + hash + parts.ext;
   var fpath = rootDir + '/' + parts.name + parts.ext;
   dynamicUrlToDependencies[url] = [fpath];
 });
 
-swPrecache.write(path.join('build', 'service_worker.js'), {
+panelsFingerprinted.forEach(panel => {
+  var fpath = panelDir + '/ha-panel-' + panel + '.html';
+  var hash = md5(fpath);
+  var url = '/frontend/panels/' + panel + '-' + hash + '.html';
+  dynamicUrlToDependencies[url] = [fpath];
+});
+
+var options = {
+  navigateFallback: '/',
+  navigateFallbackWhitelist: [/^((?!(static|api)).)*$/],
   dynamicUrlToDependencies: dynamicUrlToDependencies,
   staticFileGlobs: [
-    rootDir + '/favicon-192x192.png',
+    rootDir + '/icons/favicon.ico',
+    rootDir + '/icons/favicon-192x192.png',
     rootDir + '/webcomponents-lite.min.js',
     rootDir + '/fonts/roboto/Roboto-Light.ttf',
     rootDir + '/fonts/roboto/Roboto-Medium.ttf',
@@ -67,4 +69,17 @@ swPrecache.write(path.join('build', 'service_worker.js'), {
   ],
   stripPrefix: '..',
   replacePrefix: 'static',
-}).catch(err => console.error(err));
+  verbose: true,
+};
+
+var genPromise = swPrecache.generate(options);
+
+if (true) {
+  genPromise = genPromise.then(
+    swString => uglifyJS.minify(swString, { fromString: true }).code);
+}
+
+genPromise.then(
+  swString =>
+    fs.writeFileSync(path.join('build', 'service_worker.js'), swString)
+).catch(err => console.error(err));

script/vulcanize.js

@@ -4,6 +4,13 @@ var Vulcanize = require('vulcanize');
 var minify = require('html-minifier');
 var fs = require('fs');
 
+if (!fs.existsSync('build')) {
+  fs.mkdirSync('build');
+}
+if (!fs.existsSync('build/panels')) {
+  fs.mkdirSync('build/panels');
+}
+
 function minifyHTML(html) {
   return minify.minify(html, {
     customAttrAssign: [/\$=/],
@@ -25,6 +32,16 @@ const baseVulcanOptions = {
   stripComments: true,
 };
 
+const vulcan = new Vulcanize({
+  inlineScripts: true,
+  inlineCss: true,
+  implicitStrip: true,
+  stripComments: true,
+  stripExcludes: [
+    'bower_components/polymer/polymer.html',
+  ],
+});
+
 const toProcess = [
   {
     source: 'src/home-assistant.html',
@@ -35,41 +52,32 @@ const toProcess = [
       ],
     })),
   },
-  {
-    source: 'src/layouts/partial-map.html',
-    output: 'partial-map.html',
-    vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
-      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',
-      ],
-    })),
-  },
-  {
-    source: 'src/entry-points/dev-tools.html',
-    output: 'dev-tools.html',
-    vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
-      stripExcludes: [
-        'bower_components/polymer/polymer.html',
-        'bower_components/paper-button/paper-button.html',
-        'bower_components/paper-input/paper-input.html',
-        'bower_components/paper-spinner/paper-spinner.html',
-        'src/layouts/partial-base.html',
-      ],
-    })),
-  },
 ];
 
-toProcess.forEach(info => {
-  info.vulcan.process(info.source, (err, inlinedHtml) => {
+fs.readdirSync('./panels').forEach(panel => {
+  toProcess.push({
+    source: `panels/${panel}/ha-panel-${panel}.html`,
+    output: `panels/ha-panel-${panel}.html`,
+  });
+});
+
+function process(entry) {
+  console.log('Processing', entry.source);
+  const vulc = entry.vulcan || vulcan;
+  vulc.process(entry.source, (err, inlinedHtml) => {
     if (err !== null) {
-      console.error(info.source, err);
+      console.error(entry.source, err);
       return;
     }
 
-    fs.writeFileSync('build/' + info.output, minifyHTML(inlinedHtml));
+    const out = 'build/' + entry.output;
+    console.log('Writing', out);
+    fs.writeFileSync(out, minifyHTML(inlinedHtml));
+
+    if (toProcess.length) {
+      process(toProcess.pop());
+    }
   });
-});
+}
+
+process(toProcess.pop());