From d2fef2a45a325301465c8c02a3f1e95560abb904 Mon Sep 17 00:00:00 2001
From: Andre Bandarra <andreban@google.com>
Date: Fri, 17 Mar 2017 10:16:22 +0000
Subject: [PATCH] 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 +
 .gitignore                                    |  2 ++
 package.json                                  |  2 +-
 ...house-chart.js => lighthouse-chart.es6.js} |  5 ++--
 public/js/loader.js                           |  4 ---
 rollup.config.js => rollup-config/gulliver.js |  0
 rollup-config/lighthouse-chart.js             | 26 +++++++++++++++++++
 views/helpers/index.js                        |  2 +-
 8 files changed, 33 insertions(+), 9 deletions(-)
 rename public/js/{lighthouse-chart.js => lighthouse-chart.es6.js} (95%)
 rename rollup.config.js => rollup-config/gulliver.js (100%)
 create mode 100644 rollup-config/lighthouse-chart.js

diff --git a/.eslintignore b/.eslintignore
index c0cc587c..512998e0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 /coverage
 /third_party
 /public/js/gulliver.js
+/public/js/lighthouse-chart.js
diff --git a/.gitignore b/.gitignore
index 68b02ae0..b6490ace 100644
--- a/.gitignore
+++ b/.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
 
diff --git a/package.json b/package.json
index 1d66ebbd..f2979205 100644
--- a/package.json
+++ b/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/**/*",
diff --git a/public/js/lighthouse-chart.js b/public/js/lighthouse-chart.es6.js
similarity index 95%
rename from public/js/lighthouse-chart.js
rename to public/js/lighthouse-chart.es6.js
index 782fdf01..a50227bc 100644
--- a/public/js/lighthouse-chart.js
+++ b/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();
diff --git a/public/js/loader.js b/public/js/loader.js
index 850836b1..a44d6390 100644
--- a/public/js/loader.js
+++ b/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;
diff --git a/rollup.config.js b/rollup-config/gulliver.js
similarity index 100%
rename from rollup.config.js
rename to rollup-config/gulliver.js
diff --git a/rollup-config/lighthouse-chart.js b/rollup-config/lighthouse-chart.js
new file mode 100644
index 00000000..51792de2
--- /dev/null
+++ b/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
+    }
+  ]
+};
diff --git a/views/helpers/index.js b/views/helpers/index.js
index bf404ac4..dc5c5d17 100644
--- a/views/helpers/index.js
+++ b/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];