Create rollup config for lighthouse-chart

lighthouse-chart.js uses a different entrypoint that is not
gulliver.js. It uses loader.js, and a hack was being used that
added Loader as variable on Window. By create a rollup config for
lighthouse-chart, we can remove this hack.

.eslintignore

@@ -1,3 +1,4 @@
 /coverage
 /third_party
 /public/js/gulliver.js
+/public/js/lighthouse-chart.js

.gitignore

@@ -7,5 +7,7 @@ npm-debug.log
 key.json
 public/js/gulliver.js
 public/js/gulliver.js.map
+public/js/lighthouse-chart.js
+public/js/lighthouse-chart.js.map
 public/firebase-messaging-sw.js
 

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "start": "node app.js",
-    "prestart": "rollup -c && npm run generate-msg-sw",
+    "prestart": "rollup -c rollup-config/gulliver.js && rollup -c rollup-config/lighthouse-chart.js && npm run generate-msg-sw",
     "monitor": "nodemon app.js",
     "deploy": "npm run prestart && gcloud app deploy app.yaml",
     "mocha": "_mocha test/**/*",

public/js/lighthouse-chart.js → public/js/lighthouse-chart.es6.js

@@ -15,6 +15,7 @@
 
 /* global google */
 /* eslint-env browser */
+import Loader from './loader';
 
 /**
  * Use to make the API request to get the Lighthouse chart data for a PWA.
@@ -25,7 +26,7 @@ class LighthouseChart {
 
   constructor() {
     this.chartElement = document.getElementById('chart');
-    this.loader = new window.Loader(this.chartElement, 'dark-primary-background');
+    this.loader = new Loader(this.chartElement, 'dark-primary-background');
   }
 
   load() {
@@ -66,7 +67,5 @@ class LighthouseChart {
         console.error('There was an error drawing the chart!', err);
       });
   }
-
 }
-
 new LighthouseChart().load();

public/js/loader.js

@@ -71,8 +71,4 @@ class Loader {
   }
 
 }
-
-// HACK: attach loader class to window object so that chart.js (which is not
-// managed by rollup) can use the loader.
-window.Loader = Loader;
 export default Loader;

rollup-config/lighthouse-chart.js

@@ -0,0 +1,26 @@
+import babel from 'rollup-plugin-babel';
+import uglify from 'rollup-plugin-uglify';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonsjs from 'rollup-plugin-commonjs';
+
+export default {
+  entry: './public/js/lighthouse-chart.es6.js',
+  plugins: [
+    babel({exclude: 'node_modules/**'}),
+    uglify(),
+    nodeResolve(),
+    commonsjs()
+  ],
+  // Quiet warning: https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
+  context: 'window',
+  targets: [
+    {
+      dest: './public/js/lighthouse-chart.js',
+      // Fixes 'navigator' not defined when using Firebase and strict mode:
+      // http://stackoverflow.com/questions/31221357/webpack-firebase-disable-parsing-of-firebase
+      useStrict: false,
+      format: 'iife',
+      sourceMap: true
+    }
+  ]
+};

views/helpers/index.js

@@ -28,7 +28,7 @@ function contrastColor(hexcolor) {
 
   const parsedColor = parseColor(hexcolor);
   if (!parsedColor) {
-    return DEFAULT_LIGHT; 
+    return DEFAULT_LIGHT;
   }
   const r = parsedColor.rgb[0];
   const g = parsedColor.rgb[1];