From 718443de30d98021c5100ad94ad51b1743ef98cf Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Tue, 17 Apr 2018 13:42:25 -0400
Subject: [PATCH 01/10] Only use Babel to process .js files.

---
 .babelrc          |  6 ++----
 webpack.config.js | 51 +++++++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/.babelrc b/.babelrc
index a9d2d2e6..453d1afc 100644
--- a/.babelrc
+++ b/.babelrc
@@ -4,7 +4,7 @@
 			"env",
 			{
 				"loose": true,
-				"uglify": true,
+				"uglify": false,
 				"modules": false,
 				"targets": {
 					"browsers": "last 2 versions"
@@ -17,10 +17,8 @@
 		]
 	],
 	"plugins": [
-		"syntax-dynamic-import",
 		"transform-decorators-legacy",
 		"transform-class-properties",
-		"transform-object-rest-spread",
 		"transform-react-constant-elements",
 		"transform-react-remove-prop-types",
 		[
@@ -30,4 +28,4 @@
 			}
 		]
 	]
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
index b2aacc79..6a19385a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -49,23 +50,6 @@ module.exports = function(_, env) {
     },
     module: {
       rules: [
-        {
-          test: /\.tsx?$/,
-          exclude: nodeModules,
-          // Ensure typescript is compiled prior to Babel running:
-          enforce: 'pre',
-          use: [
-            // pluck the sourcemap back out so Babel creates a composed one:
-            'source-map-loader',
-            'ts-loader'
-          ]
-        },
-        {
-          test: /\.(ts|js)x?$/,
-          loader: 'babel-loader',
-          // Don't respect any Babel RC files found on the filesystem:
-          options: Object.assign(readJson('.babelrc'), { babelrc: false })
-        },
         {
           test: /\.(scss|sass)$/,
           loader: 'sass-loader',
@@ -113,6 +97,17 @@ module.exports = function(_, env) {
               }
             }
           ]
+        },
+        {
+          test: /\.tsx?$/,
+          exclude: nodeModules,
+          loader: 'ts-loader'
+        },
+        {
+          test: /\.jsx?$/,
+          loader: 'babel-loader',
+          // Don't respect any Babel RC files found on the filesystem:
+          options: Object.assign(readJson('.babelrc'), { babelrc: false })
         }
       ]
     },
@@ -225,6 +220,28 @@ module.exports = function(_, env) {
       })
     ].filter(Boolean), // Filter out any falsey plugin array entries.
 
+    optimization: {
+      minimizer: [
+        new UglifyJsPlugin({
+          sourceMap: isProd,
+          extractComments: {
+            file: 'build/licenses.txt'
+          },
+          uglifyOptions: {
+            compress: {
+              inline: 1
+            },
+            mangle: {
+              safari10: true
+            },
+            output: {
+              safari10: true
+            }
+          }
+        })
+      ]
+    },
+
     // Turn off various NodeJS environment polyfills Webpack adds to bundles.
     // They're supposed to be added only when used, but the heuristic is loose
     // (eg: existence of a variable called setImmedaite in any scope)

From 3b47ee6fe5533508035fd2047712fe3fcfe2e8b4 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Tue, 17 Apr 2018 21:26:28 -0400
Subject: [PATCH 02/10] Don't transpile ES Classes.

---
 .babelrc | 62 ++++++++++++++++++++++++++++++--------------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/.babelrc b/.babelrc
index 453d1afc..e50346c7 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,31 +1,35 @@
 {
-	"presets": [
-		[
-			"env",
-			{
-				"loose": true,
-				"uglify": false,
-				"modules": false,
-				"targets": {
-					"browsers": "last 2 versions"
-				},
-				"exclude": [
-					"transform-regenerator",
-					"transform-es2015-typeof-symbol"
-				]
-			}
-		]
-	],
-	"plugins": [
-		"transform-decorators-legacy",
-		"transform-class-properties",
-		"transform-react-constant-elements",
-		"transform-react-remove-prop-types",
-		[
-			"transform-react-jsx",
-			{
-				"pragma": "h"
-			}
-		]
-	]
+  "presets": [
+    [
+      "env",
+      {
+        "loose": true,
+        "uglify": false,
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "not android>0",
+            "not ie>0"
+          ]
+        },
+        "exclude": [
+          "transform-regenerator",
+          "transform-es2015-typeof-symbol"
+        ]
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    "transform-react-constant-elements",
+    "transform-react-remove-prop-types",
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h"
+      }
+    ]
+  ]
 }

From c5e3f9e7371c23fabdad0f12421f586e4c4f28e4 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Wed, 18 Apr 2018 14:44:43 -0400
Subject: [PATCH 03/10] Remove env preset and decorator plugin

---
 .babelrc | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/.babelrc b/.babelrc
index e50346c7..29ef00dd 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,27 +1,5 @@
 {
-  "presets": [
-    [
-      "env",
-      {
-        "loose": true,
-        "uglify": false,
-        "modules": false,
-        "targets": {
-          "browsers": [
-            "last 2 versions",
-            "not android>0",
-            "not ie>0"
-          ]
-        },
-        "exclude": [
-          "transform-regenerator",
-          "transform-es2015-typeof-symbol"
-        ]
-      }
-    ]
-  ],
   "plugins": [
-    "transform-decorators-legacy",
     "transform-class-properties",
     "transform-react-constant-elements",
     "transform-react-remove-prop-types",

From 311d0524dbf35f2a38fea5a593de6e37abb02829 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Tue, 24 Apr 2018 14:03:44 -0400
Subject: [PATCH 04/10] improve tests

---
 config/prerender-loader.js |  26 ++-
 package-lock.json          | 464 +++++++++++++++++++------------------
 package.json               |   4 -
 3 files changed, 257 insertions(+), 237 deletions(-)

diff --git a/config/prerender-loader.js b/config/prerender-loader.js
index 67b8456a..05998585 100644
--- a/config/prerender-loader.js
+++ b/config/prerender-loader.js
@@ -1,6 +1,6 @@
 const jsdom = require('jsdom');
 const os = require('os');
-const util = require('util');
+// const util = require('util');
 const path = require('path');
 const loaderUtils = require('loader-utils');
 const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
@@ -15,6 +15,7 @@ const FILENAME = 'ssr-bundle.js';
 const PRERENDER_REG = /\{\{prerender(?::\s*([^}]+)\s*)?\}\}/;
 
 module.exports = function PrerenderLoader (content) {
+  // const { string, disabled, ...options } = getOptions()
   const options = loaderUtils.getOptions(this) || {};
   const outputFilter = options.as === 'string' || options.string ? stringToModule : String;
 
@@ -54,11 +55,13 @@ async function prerender (loaderContext, options, inject) {
   const context = parentCompiler.options.context || process.cwd();
   const entry = './' + ((options.entry && [].concat(options.entry).pop().trim()) || path.relative(context, parentCompiler.options.entry));
 
-  if (!inject && options.template) {
-    const loadModule = util.promisify(loaderContext.loadModule);
-    const source = await loadModule('!!raw-loader!' + path.resolve(context, options.template));
-    options.templateContent = source;
-  }
+  // undocumented option (to remove):
+  // !!prerender-loader?template=src/index.html!src/index.js
+  // if (!inject && options.template) {
+  //   const loadModule = util.promisify(loaderContext.loadModule);
+  //   const source = await loadModule('!!raw-loader!' + path.resolve(context, options.template));
+  //   options.templateContent = source;
+  // }
 
   const outputOptions = {
     // fix for plugins not using outputfilesystem
@@ -75,7 +78,8 @@ async function prerender (loaderContext, options, inject) {
 
   // Define PRERENDER to be true within the SSR bundle
   new DefinePlugin({
-    PRERENDER: 'true'
+    PRERENDER: 'true',
+    document: 'undefined' // if (typeof document==='undefined') {}
   }).apply(compiler);
 
   // ... then define PRERENDER to be false within the client bundle
@@ -116,7 +120,9 @@ async function prerender (loaderContext, options, inject) {
 
     const tpl = options.templateContent || '<!DOCTYPE html><html><head></head><body></body></html>';
     dom = new jsdom.JSDOM(tpl.replace(PRERENDER_REG, '<div id="PRERENDER_INJECT"></div>'), {
+      // don't track source locations for performance reasons
       includeNodeLocations: false,
+      // don't allow inline event handlers & script tag exec
       runScripts: 'outside-only'
     });
     const { window } = dom;
@@ -129,12 +135,14 @@ async function prerender (loaderContext, options, inject) {
     }
 
     // These are missing from JSDOM
-    window.requestAnimationFrame = setTimeout;
-    window.cancelAnimationFrame = clearTimeout;
+    let counter = 0;
+    window.requestAnimationFrame = () => ++counter;
+    window.cancelAnimationFrame = () => {};
 
     // Invoke the SSR bundle within the JSDOM document and grab the exported/returned result
     result = window.eval(output + '\nPRERENDER_RESULT') || result;
 
+    // @todo this seems pointless
     if (window.PRERENDER_RESULT != null) {
       result = window.PRERENDER_RESULT;
     }
diff --git a/package-lock.json b/package-lock.json
index d6171f3b..6caf552c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,131 +4,6 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@babel/code-frame": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.40.tgz",
-      "integrity": "sha512-eVXQSbu/RimU6OKcK2/gDJVTFcxXJI4sHbIqw2mhwMZeQ2as/8AhS9DGkEDoHMBBNJZ5B0US63lF56x+KDcxiA==",
-      "dev": true,
-      "requires": {
-        "@babel/highlight": "7.0.0-beta.40"
-      }
-    },
-    "@babel/generator": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.40.tgz",
-      "integrity": "sha512-c91BQcXyTq/5aFV4afgOionxZS1dxWt8OghEx5Q52SKssdGRFSiMKnk9tGkev1pYULPJBqjSDZU2Pcuc58ffZw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "7.0.0-beta.40",
-        "jsesc": "2.5.1",
-        "lodash": "4.17.5",
-        "source-map": "0.5.7",
-        "trim-right": "1.0.1"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-          "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-function-name": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.40.tgz",
-      "integrity": "sha512-cK9BVLtOfisSISTTHXKGvBc2OBh65tjEk4PgXhsSnnH0i8RP2v+5RCxoSlh2y/i+l2fxQqKqv++Qo5RMiwmRCA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-get-function-arity": "7.0.0-beta.40",
-        "@babel/template": "7.0.0-beta.40",
-        "@babel/types": "7.0.0-beta.40"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.40.tgz",
-      "integrity": "sha512-MwquaPznI4cUoZEgHC/XGkddOXtqKqD4DvZDOyJK2LR9Qi6TbMbAhc6IaFoRX7CRTFCmtGeu8gdXW2dBotBBTA==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "7.0.0-beta.40"
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.40.tgz",
-      "integrity": "sha512-mOhhTrzieV6VO7odgzFGFapiwRK0ei8RZRhfzHhb6cpX3QM8XXuCLXWjN8qBB7JReDdUR80V3LFfFrGUYevhNg==",
-      "dev": true,
-      "requires": {
-        "chalk": "2.3.1",
-        "esutils": "2.0.2",
-        "js-tokens": "3.0.2"
-      }
-    },
-    "@babel/template": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.40.tgz",
-      "integrity": "sha512-RlQiVB7eL7fxsKN6JvnCCwEwEL28CBYalXSgWWULuFlEHjtMoXBqQanSie3bNyhrANJx67sb+Sd/vuGivoMwLQ==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "7.0.0-beta.40",
-        "@babel/types": "7.0.0-beta.40",
-        "babylon": "7.0.0-beta.40",
-        "lodash": "4.17.5"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.40.tgz",
-          "integrity": "sha512-AVxF2EcxvGD5hhOuLTOLAXBb0VhwWpEX0HyHdAI2zU+AAP4qEwtQj8voz1JR3uclGai0rfcE+dCTHnNMOnimFg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.40.tgz",
-      "integrity": "sha512-h96SQorjvdSuxQ6hHFIuAa3oxnad1TA5bU1Zz88+XqzwmM5QM0/k2D+heXGGy/76gT5ajl7xYLKGiPA/KTyVhQ==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "7.0.0-beta.40",
-        "@babel/generator": "7.0.0-beta.40",
-        "@babel/helper-function-name": "7.0.0-beta.40",
-        "@babel/types": "7.0.0-beta.40",
-        "babylon": "7.0.0-beta.40",
-        "debug": "3.1.0",
-        "globals": "11.3.0",
-        "invariant": "2.2.3",
-        "lodash": "4.17.5"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.40.tgz",
-          "integrity": "sha512-AVxF2EcxvGD5hhOuLTOLAXBb0VhwWpEX0HyHdAI2zU+AAP4qEwtQj8voz1JR3uclGai0rfcE+dCTHnNMOnimFg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/types": {
-      "version": "7.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.40.tgz",
-      "integrity": "sha512-uXCGCzTgMZxcSUzutCPtZmXbVC+cvENgS2e0tRuhn+Y1hZnMb8IHP0Trq7Q2MB/eFmG5pKrAeTIUfQIe5kA4Tg==",
-      "dev": true,
-      "requires": {
-        "esutils": "2.0.2",
-        "lodash": "4.17.5",
-        "to-fast-properties": "2.0.0"
-      },
-      "dependencies": {
-        "to-fast-properties": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-          "dev": true
-        }
-      }
-    },
     "@material/animation": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz",
@@ -1235,28 +1110,6 @@
         }
       }
     },
-    "babel-eslint": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz",
-      "integrity": "sha512-Qt2lz2egBxNYWqN9JIO2z4NOOf8i4b5JS6CFoYrOZZTDssueiV1jH/jsefyg+86SeNY3rB361/mi3kE1WK2WYQ==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "7.0.0-beta.40",
-        "@babel/traverse": "7.0.0-beta.40",
-        "@babel/types": "7.0.0-beta.40",
-        "babylon": "7.0.0-beta.40",
-        "eslint-scope": "3.7.1",
-        "eslint-visitor-keys": "1.0.0"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "7.0.0-beta.40",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.40.tgz",
-          "integrity": "sha512-AVxF2EcxvGD5hhOuLTOLAXBb0VhwWpEX0HyHdAI2zU+AAP4qEwtQj8voz1JR3uclGai0rfcE+dCTHnNMOnimFg==",
-          "dev": true
-        }
-      }
-    },
     "babel-generator": {
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
@@ -2709,29 +2562,29 @@
       "dev": true
     },
     "chalk": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
-      "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz",
+      "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==",
       "dev": true,
       "requires": {
-        "ansi-styles": "3.2.0",
+        "ansi-styles": "3.2.1",
         "escape-string-regexp": "1.0.5",
-        "supports-color": "5.2.0"
+        "supports-color": "5.4.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "dev": true,
           "requires": {
             "color-convert": "1.9.1"
           }
         },
         "supports-color": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
-          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "dev": true,
           "requires": {
             "has-flag": "3.0.0"
@@ -3446,6 +3299,12 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
       "dev": true
     },
+    "contains-path": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
+      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
@@ -4390,7 +4249,7 @@
       "requires": {
         "ajv": "5.5.2",
         "babel-code-frame": "6.26.0",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "concat-stream": "1.6.0",
         "cross-spawn": "5.1.0",
         "debug": "3.1.0",
@@ -4427,47 +4286,193 @@
         "text-table": "0.2.0"
       }
     },
-    "eslint-config-developit": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-developit/-/eslint-config-developit-1.1.1.tgz",
-      "integrity": "sha512-Wc2jbDhWixq9IDfFBVcFHYaOo2i3qwdVH236jQKsiNpJlfErxm0KDT5SWZiDSWU/h6ppHsru94W3DGbUg/MjzA==",
-      "dev": true,
-      "requires": {
-        "babel-eslint": "8.2.2",
-        "eslint-plugin-compat": "2.2.0",
-        "eslint-plugin-jest": "21.13.0",
-        "eslint-plugin-mocha": "4.12.1",
-        "eslint-plugin-react": "7.7.0"
-      }
-    },
-    "eslint-plugin-compat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-compat/-/eslint-plugin-compat-2.2.0.tgz",
-      "integrity": "sha512-nMH9Ibga+VZVLGtyxx8Dry69NN+a7YykNoUA9NtL3QNTeciV4QAAOtBLykKDR0Q37wwtKME+Inlce7JOhy5dbg==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "6.26.0",
-        "browserslist": "2.11.3",
-        "caniuse-db": "1.0.30000810",
-        "mdn-browser-compat-data": "0.0.20",
-        "requireindex": "1.2.0"
-      }
-    },
-    "eslint-plugin-jest": {
-      "version": "21.13.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-21.13.0.tgz",
-      "integrity": "sha512-tR8bn4tZk1I5i6HstvucC5tprxJKeuyh0baP7xYasQq/RS/hPcmAgUE42d52R1ysg719OPKsFqkJDuyvNeolvg==",
+    "eslint-config-standard": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz",
+      "integrity": "sha512-oDdENzpViEe5fwuRCWla7AXQd++/oyIp8zP+iP9jiUPG6NBj3SHgdgtl/kTn00AjeN+1HNvavTKmYbMo+xMOlw==",
       "dev": true
     },
-    "eslint-plugin-mocha": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-mocha/-/eslint-plugin-mocha-4.12.1.tgz",
-      "integrity": "sha512-hxWtYHvLA0p/PKymRfDYh9Mxt5dYkg2Goy1vZDarTEEYfELP9ksga7kKG1NUKSQy27C8Qjc7YrSWTLUhOEOksA==",
+    "eslint-config-standard-jsx": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-5.0.0.tgz",
+      "integrity": "sha512-rLToPAEqLMPBfWnYTu6xRhm2OWziS2n40QFqJ8jAM8NSVzeVKTa3nclhsU4DpPJQRY60F34Oo1wi/71PN/eITg==",
+      "dev": true
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
+      "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
       "dev": true,
       "requires": {
-        "ramda": "0.25.0"
+        "debug": "2.6.9",
+        "resolve": "1.6.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
       }
     },
+    "eslint-module-utils": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz",
+      "integrity": "sha1-snA2LNiLGkitMIl2zn+lTphBF0Y=",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "pkg-dir": "1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "2.1.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "pkg-dir": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
+          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
+          "dev": true,
+          "requires": {
+            "find-up": "1.1.2"
+          }
+        }
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.11.0.tgz",
+      "integrity": "sha1-Fa7qN6Z0mdhI6OmBgG1GJ7VQOBY=",
+      "dev": true,
+      "requires": {
+        "contains-path": "0.1.0",
+        "debug": "2.6.9",
+        "doctrine": "1.5.0",
+        "eslint-import-resolver-node": "0.3.2",
+        "eslint-module-utils": "2.2.0",
+        "has": "1.0.1",
+        "lodash": "4.17.5",
+        "minimatch": "3.0.4",
+        "read-pkg-up": "2.0.0",
+        "resolve": "1.6.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
+          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
+          "dev": true,
+          "requires": {
+            "esutils": "2.0.2",
+            "isarray": "1.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "parse-json": "2.2.0",
+            "pify": "2.3.0",
+            "strip-bom": "3.0.0"
+          }
+        },
+        "path-type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
+          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "dev": true,
+          "requires": {
+            "pify": "2.3.0"
+          }
+        },
+        "read-pkg": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
+          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "2.0.0",
+            "normalize-package-data": "2.4.0",
+            "path-type": "2.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
+          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "dev": true,
+          "requires": {
+            "find-up": "2.1.0",
+            "read-pkg": "2.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-node": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz",
+      "integrity": "sha512-Q/Cc2sW1OAISDS+Ji6lZS2KV4b7ueA/WydVWd1BECTQwVvfQy5JAi3glhINoKzoMnfnuRgNP+ZWKrGAbp3QDxw==",
+      "dev": true,
+      "requires": {
+        "ignore": "3.3.7",
+        "minimatch": "3.0.4",
+        "resolve": "1.6.0",
+        "semver": "5.5.0"
+      }
+    },
+    "eslint-plugin-promise": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-3.7.0.tgz",
+      "integrity": "sha512-2WO+ZFh7vxUKRfR0cOIMrWgYKdR6S1AlOezw6pC52B6oYpd5WFghN+QHxvrRdZMtbo8h3dfUZ2o1rWb0UPbKtg==",
+      "dev": true
+    },
     "eslint-plugin-react": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz",
@@ -4480,6 +4485,12 @@
         "prop-types": "15.6.1"
       }
     },
+    "eslint-plugin-standard": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-3.0.1.tgz",
+      "integrity": "sha1-NNDJFbRe3G8BA5PH7vOCOwhWXPI=",
+      "dev": true
+    },
     "eslint-scope": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
@@ -7129,7 +7140,7 @@
       "dev": true,
       "requires": {
         "ansi-escapes": "3.0.0",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "cli-cursor": "2.1.0",
         "cli-width": "2.2.0",
         "external-editor": "2.1.0",
@@ -8034,6 +8045,16 @@
         "is-buffer": "1.1.6"
       }
     },
+    "last-call-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.5",
+        "webpack-sources": "1.1.0"
+      }
+    },
     "lazy-cache": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz",
@@ -8427,7 +8448,7 @@
       "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
       "dev": true,
       "requires": {
-        "chalk": "2.3.1"
+        "chalk": "2.4.0"
       }
     },
     "log-update": {
@@ -8882,15 +8903,6 @@
         }
       }
     },
-    "mdn-browser-compat-data": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.20.tgz",
-      "integrity": "sha512-DImQhKtc7umi/LI0licM3GVnKTxYoYmFUKnMjomfIvW8dO4B6UeQLWYQhf1jDTfEV9WZGjFTz3DOfcsnZO6WdA==",
-      "dev": true,
-      "requires": {
-        "extend": "3.0.1"
-      }
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -9864,6 +9876,16 @@
         "is-wsl": "1.1.0"
       }
     },
+    "optimize-css-assets-webpack-plugin": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.0.tgz",
+      "integrity": "sha512-wcQJMk23VQAFdOYnF7pSTg3yvRsSmF3FBwuPf2MDE7e/AG4hoD5V+xxZkrhZEYZ6ZQezfu2qegprs0Z7Xc9xKA==",
+      "dev": true,
+      "requires": {
+        "cssnano": "3.10.0",
+        "last-call-webpack-plugin": "3.0.0"
+      }
+    },
     "optionator": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -11301,12 +11323,6 @@
       "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=",
       "dev": true
     },
-    "ramda": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
-      "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==",
-      "dev": true
-    },
     "randomatic": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
@@ -11385,6 +11401,12 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
+      "dev": true
+    },
     "read-chunk": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz",
@@ -11775,12 +11797,6 @@
         "resolve-from": "1.0.1"
       }
     },
-    "requireindex": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
-      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
-      "dev": true
-    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -13102,7 +13118,7 @@
       "requires": {
         "ajv": "5.5.2",
         "ajv-keywords": "2.1.1",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "lodash": "4.17.5",
         "slice-ansi": "1.0.0",
         "string-width": "2.1.1"
@@ -13360,7 +13376,7 @@
       "integrity": "sha512-dzgQnkAGY4sLqVw6t4LJH8FGR8j0zsPmC1Ff2ChzKhYO+hgWJkSEyrHTlSSZqn5oWr0Po7q/IRoeq8O4SNKQ9A==",
       "dev": true,
       "requires": {
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "enhanced-resolve": "4.0.0",
         "loader-utils": "1.1.0",
         "micromatch": "3.1.9",
@@ -13648,7 +13664,7 @@
       "requires": {
         "babel-code-frame": "6.26.0",
         "builtin-modules": "1.1.1",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "commander": "2.14.1",
         "diff": "3.5.0",
         "glob": "7.1.2",
@@ -14849,7 +14865,7 @@
       "requires": {
         "acorn": "5.5.0",
         "bfj-node4": "5.2.1",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "commander": "2.14.1",
         "ejs": "2.5.7",
         "express": "4.16.2",
@@ -15191,7 +15207,7 @@
       "integrity": "sha512-B53SD4N4BHpZdUwZcj4st2QT7gVfqZtqHDruC1N+K2sciq0Rt/3F1Dx6RlylVkcrToMLTaiaeT48k9Lq4iDVDA==",
       "dev": true,
       "requires": {
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "log-symbols": "2.2.0",
         "loglevelnext": "1.0.3",
         "uuid": "3.2.1"
@@ -15630,7 +15646,7 @@
       "integrity": "sha512-6/W7/B54OPHJXob0n0+pmkwFsirC8cokuQkPSmT/D0lCcSxkKtg/BA6ZnjUBIwjuGqmw3DTrT4en++htaUju5g==",
       "dev": true,
       "requires": {
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "debug": "3.1.0",
         "diff": "3.5.0",
         "escape-string-regexp": "1.0.5",
@@ -15667,7 +15683,7 @@
       "dev": true,
       "requires": {
         "async": "2.6.0",
-        "chalk": "2.3.1",
+        "chalk": "2.4.0",
         "cli-table": "0.3.1",
         "cross-spawn": "5.1.0",
         "dargs": "5.1.0",
diff --git a/package.json b/package.json
index 791334b4..c592706c 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "chalk": "^2.3.2",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.1",
-    "css": "^2.2.1",
     "css-loader": "^0.28.11",
     "ejs-loader": "^0.3.1",
     "eslint": "^4.18.2",
@@ -65,12 +64,9 @@
     "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.3.0",
     "node-sass": "^4.7.2",
-    "nwmatcher": "^1.4.4",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
-    "parse5": "^4.0.0",
     "preact-render-to-string": "^3.7.0",
     "preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
-    "pretty-bytes": "^4.0.2",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",

From 81aaadbabffe4e5e0663b3b51f10dbd371d2593d Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Tue, 1 May 2018 09:52:58 -0400
Subject: [PATCH 05/10] Remove all prerendering & critical CSS stuff

---
 config/critters-webpack-plugin.js | 409 -----------------
 config/prerender-loader.js        | 222 ---------
 config/prerender.js               |  20 -
 package-lock.json                 | 727 +-----------------------------
 package.json                      |  11 +-
 webpack.config.js                 |  16 +-
 6 files changed, 25 insertions(+), 1380 deletions(-)
 delete mode 100644 config/critters-webpack-plugin.js
 delete mode 100644 config/prerender-loader.js
 delete mode 100644 config/prerender.js

diff --git a/config/critters-webpack-plugin.js b/config/critters-webpack-plugin.js
deleted file mode 100644
index d0a9894c..00000000
--- a/config/critters-webpack-plugin.js
+++ /dev/null
@@ -1,409 +0,0 @@
-const path = require('path');
-const parse5 = require('parse5');
-const nwmatcher = require('nwmatcher');
-const css = require('css');
-const prettyBytes = require('pretty-bytes');
-
-const treeAdapter = parse5.treeAdapters.htmlparser2;
-
-const PLUGIN_NAME = 'critters-webpack-plugin';
-
-const PARSE5_OPTS = {
-  treeAdapter
-};
-
-/** Critters: Webpack Plugin Edition!
- *  @class
- *  @param {Object} options
- *  @param {Boolean} [options.external=true]    Fetch and inline critical styles from external stylesheets
- *  @param {Boolean} [options.async=false]      Convert critical-inlined external stylesheets to load asynchronously (via link rel="preload" - see https://filamentgroup.com/lab/async-css.html)
- *  @param {Boolean} [options.preload=false]    (requires `async` option) Append a new <link rel="stylesheet"> into <body> instead of swapping the preload's rel attribute
- *  @param {Boolean} [options.fonts]            If `true`, keeps critical `@font-face` rules and preloads them. If `false`, removes the rules and does not preload the fonts
- *  @param {Boolean} [options.preloadFonts=false]   Preloads critical fonts (even those removed by `{fonts:false}`)
- *  @param {Boolean} [options.removeFonts=false]    Remove all fonts (even critical ones)
- *  @param {Boolean} [options.compress=true]        Compress resulting critical CSS
- */
-module.exports = class CrittersWebpackPlugin {
-  constructor (options) {
-    this.options = options || {};
-    this.urlFilter = this.options.filter;
-    if (this.urlFilter instanceof RegExp) {
-      this.urlFilter = this.urlFilter.test.bind(this.urlFilter);
-    }
-  }
-
-  /** Invoked by Webpack during plugin initialization */
-  apply (compiler) {
-    // hook into the compiler to get a Compilation instance...
-    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
-      // ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.
-      compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
-        this.process(compiler, compilation, htmlPluginData)
-          .then(result => { callback(null, result); })
-          .catch(callback);
-      });
-    });
-  }
-
-  readFile (filename, encoding) {
-    return new Promise((resolve, reject) => {
-      this.fs.readFile(filename, encoding, (err, data) => {
-        if (err) reject(err);
-        else resolve(data);
-      });
-    });
-  }
-
-  async process (compiler, compilation, htmlPluginData) {
-    const outputPath = compiler.options.output.path;
-
-    // Parse the generated HTML in a DOM we can mutate
-    const document = parse5.parse(htmlPluginData.html, PARSE5_OPTS);
-    makeDomInteractive(document);
-
-    // `external:false` skips processing of external sheets
-    if (this.options.external !== false) {
-      const externalSheets = document.querySelectorAll('link[rel="stylesheet"]');
-      await Promise.all(externalSheets.map(
-        link => this.embedLinkedStylesheet(link, compilation, outputPath)
-      ));
-    }
-
-    // go through all the style tags in the document and reduce them to only critical CSS
-    const styles = document.querySelectorAll('style');
-    await Promise.all(styles.map(
-      style => this.processStyle(style, document)
-    ));
-
-    // serialize the document back to HTML and we're done
-    const html = parse5.serialize(document, PARSE5_OPTS);
-    return { html };
-  }
-
-  /** Inline the target stylesheet referred to by a <link rel="stylesheet"> (assuming it passes `options.filter`) */
-  async embedLinkedStylesheet (link, compilation, outputPath) {
-    const href = link.getAttribute('href');
-    const document = link.ownerDocument;
-
-    // skip filtered resources, or network resources if no filter is provided
-    if (this.urlFilter ? this.urlFilter(href) : href.match(/^(https?:)?\/\//)) return Promise.resolve();
-
-    // path on disk
-    const filename = path.resolve(outputPath, href.replace(/^\//, ''));
-
-    // try to find a matching asset by filename in webpack's output (not yet written to disk)
-    const asset = compilation.assets[path.relative(outputPath, filename).replace(/^\.\//, '')];
-
-    // CSS loader is only injected for the first sheet, then this becomes an empty string
-    let cssLoaderPreamble = `function $loadcss(u,l){(l=document.createElement('link')).rel='stylesheet';l.href=u;document.head.appendChild(l)}`;
-
-    const media = typeof this.options.media === 'string' ? this.options.media : 'all';
-
-    // { preload:'js', media:true }
-    // { preload:'js', media:'print' }
-    if (this.options.media) {
-      cssLoaderPreamble = cssLoaderPreamble.replace('l.href', "l.media='only x';l.onload=function(){l.media='" + media + "'};l.href");
-    }
-
-    // Attempt to read from assets, falling back to a disk read
-    const sheet = asset ? asset.source() : await this.readFile(filename, 'utf8');
-
-    // the reduced critical CSS gets injected into a new <style> tag
-    const style = document.createElement('style');
-    style.appendChild(document.createTextNode(sheet));
-    link.parentNode.insertBefore(style, link.nextSibling);
-
-    // drop a reference to the original URL onto the tag (used for reporting to console later)
-    style.$$name = href;
-
-    // the `async` option changes any critical'd <link rel="stylesheet"> tags to async-loaded equivalents
-    if (this.options.async) {
-      link.setAttribute('rel', 'preload');
-      link.setAttribute('as', 'style');
-      if (this.options.preload === 'js') {
-        const script = document.createElement('script');
-        script.appendChild(document.createTextNode(`${cssLoaderPreamble}$loadcss(${JSON.stringify(href)})`));
-        link.parentNode.insertBefore(script, link.nextSibling);
-        cssLoaderPreamble = '';
-      } else if (this.options.preload) {
-        const bodyLink = document.createElement('link');
-        bodyLink.setAttribute('rel', 'stylesheet');
-        bodyLink.setAttribute('href', href);
-        document.body.appendChild(bodyLink);
-      } else if (this.options.media) {
-        // @see https://github.com/filamentgroup/loadCSS/blob/af1106cfe0bf70147e22185afa7ead96c01dec48/src/loadCSS.js#L26
-        link.setAttribute('rel', 'stylesheet');
-        link.removeAttribute('as');
-        link.setAttribute('media', 'only x');
-        link.setAttribute('onload', "this.media='" + media + "'");
-      } else {
-        link.setAttribute('onload', "this.rel='stylesheet'");
-      }
-    }
-  }
-
-  /** Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document. */
-  async processStyle (style) {
-    const options = this.options;
-    const document = style.ownerDocument;
-    const head = document.querySelector('head');
-
-    // basically `.textContent`
-    let sheet = style.childNodes.length > 0 && style.childNodes.map(node => node.nodeValue).join('\n');
-
-    // store a reference to the previous serialized stylesheet for reporting stats
-    const before = sheet;
-
-    // Skip empty stylesheets
-    if (!sheet) return;
-
-    const ast = css.parse(sheet);
-
-    // a string to search for font names (very loose)
-    let criticalFonts = '';
-
-    // Walk all CSS rules, transforming unused rules to comments (which get removed)
-    visit(ast, rule => {
-      if (rule.type === 'rule') {
-        // Filter the selector list down to only those matche
-        rule.selectors = rule.selectors.filter(sel => {
-          // Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist.
-          // This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches.
-          sel = sel.replace(/::?(?:[a-z-]+)([.[#~&^:*]|\s|\n|$)/gi, '$1');
-          return document.querySelector(sel, document) != null;
-        });
-        // If there are no matched selectors, remove the rule:
-        if (rule.selectors.length === 0) {
-          return false;
-        }
-
-        if (rule.declarations) {
-          for (let i = 0; i < rule.declarations.length; i++) {
-            const decl = rule.declarations[i];
-            if (decl.property.match(/\bfont\b/i)) {
-              criticalFonts += ' ' + decl.value;
-            }
-          }
-        }
-      }
-
-      // keep font rules, they're handled in the second pass:
-      if (rule.type === 'font-face') return;
-
-      // If there are no remaining rules, remove the whole rule:
-      return !rule.rules || rule.rules.length !== 0;
-    });
-
-    const preloadedFonts = [];
-    visit(ast, rule => {
-      // only process @font-face rules in the second pass
-      if (rule.type !== 'font-face') return;
-
-      let family, src;
-      for (let i = 0; i < rule.declarations.length; i++) {
-        const decl = rule.declarations[i];
-        if (decl.property === 'src') {
-          // @todo parse this properly and generate multiple preloads with type="font/woff2" etc
-          src = (decl.value.match(/url\s*\(\s*(['"]?)(.+?)\1\s*\)/) || [])[2];
-        } else if (decl.property === 'font-family') {
-          family = decl.value;
-        }
-      }
-
-      if (src && (options.fonts === true || options.preloadFonts) && preloadedFonts.indexOf(src) === -1) {
-        preloadedFonts.push(src);
-        const preload = document.createElement('link');
-        preload.setAttribute('rel', 'preload');
-        preload.setAttribute('as', 'font');
-        if (src.match(/:\/\//)) {
-          preload.setAttribute('crossorigin', 'anonymous');
-        }
-        preload.setAttribute('href', src.trim());
-        head.appendChild(preload);
-      }
-
-      // if we're missing info or the font is unused, remove the rule:
-      if (!family || !src || criticalFonts.indexOf(family) === -1 || !options.fonts || options.removeFonts) return false;
-    });
-
-    sheet = css.stringify(ast, { compress: this.options.compress !== false });
-
-    // If all rules were removed, get rid of the style element entirely
-    if (sheet.trim().length === 0) {
-      sheet.parentNode.removeChild(sheet);
-    } else {
-      // replace the inline stylesheet with its critical'd counterpart
-      while (style.lastChild) {
-        style.removeChild(style.lastChild);
-      }
-      style.appendChild(document.createTextNode(sheet));
-    }
-
-    // output some stats
-    const name = style.$$name ? style.$$name.replace(/^\//, '') : 'inline CSS';
-    const percent = sheet.length / before.length * 100 | 0;
-    console.log('\u001b[32mCritters: inlined ' + prettyBytes(sheet.length) + ' (' + percent + '% of original ' + prettyBytes(before.length) + ') of ' + name + '.\u001b[39m');
-  }
-};
-
-/** Recursively walk all rules in a stylesheet.
- *  The iterator can explicitly return `false` to remove the current node.
- */
-function visit (node, fn) {
-  if (node.stylesheet) return visit(node.stylesheet, fn);
-
-  node.rules = node.rules.filter(rule => {
-    if (rule.rules) {
-      visit(rule, fn);
-    }
-    return fn(rule) !== false;
-  });
-}
-
-/** Enhance an htmlparser2-style DOM with basic manipulation methods. */
-function makeDomInteractive (document) {
-  defineProperties(document, DocumentExtensions);
-  // Find the first <html> element within the document
-  // document.documentElement = document.childNodes.filter( child => String(child.tagName).toLowerCase()==='html' )[0];
-
-  // Extend Element.prototype with DOM manipulation methods.
-  //   Note: document.$$scratchElement is also used by createTextNode()
-  const scratch = document.$$scratchElement = document.createElement('div');
-  const elementProto = Object.getPrototypeOf(scratch);
-  defineProperties(elementProto, ElementExtensions);
-  elementProto.ownerDocument = document;
-
-  // nwmatcher is a selector engine that happens to work with Parse5's htmlparser2 DOM (they form the base of jsdom).
-  // It is exposed to the document so that it can be used within Element.prototype methods.
-  document.$match = nwmatcher({ document });
-  document.$match.configure({
-    CACHING: false,
-    USE_QSAPI: false,
-    USE_HTML5: false
-  });
-}
-
-/** Essentially Object.defineProperties() except any functions are assigned as values rather than descriptors. */
-function defineProperties (obj, properties) {
-  for (const i in properties) {
-    const value = properties[i];
-    Object.defineProperty(obj, i, typeof value === 'function' ? { value } : value);
-  }
-}
-
-/** {document,Element}.getElementsByTagName() is the only traversal method required by nwmatcher.
- *    Note: if perf issues arise, 2 faster but more verbose implementations are benchmarked here:
- *    https://esbench.com/bench/5ac3b647f2949800a0f619e1
- */
-function getElementsByTagName (tagName) {
-  // Only return Element/Document nodes
-  if ((this.nodeType !== 1 && this.nodeType !== 9) || this.type === 'directive') return [];
-  return Array.prototype.concat.apply(
-    // Add current element if it matches tag
-    (tagName === '*' || (this.tagName && (this.tagName === tagName || this.nodeName === tagName.toUpperCase()))) ? [this] : [],
-    // Check children recursively
-    this.children.map(child => getElementsByTagName.call(child, tagName))
-  );
-}
-
-const reflectedProperty = attributeName => ({
-  get () {
-    return this.getAttribute(attributeName);
-  },
-  set (value) {
-    this.setAttribute(attributeName, value);
-  }
-});
-
-/** Methods and descriptors to mix into Element.prototype */
-const ElementExtensions = {
-  nodeName: {
-    get () {
-      return this.tagName.toUpperCase();
-    }
-  },
-  id: reflectedProperty('id'),
-  className: reflectedProperty('class'),
-  insertBefore (child, referenceNode) {
-    if (!referenceNode) return this.appendChild(child);
-    treeAdapter.insertBefore(this, child, referenceNode);
-    return child;
-  },
-  appendChild (child) {
-    treeAdapter.appendChild(this, child);
-    return child;
-  },
-  removeChild (child) {
-    treeAdapter.detachNode(child);
-  },
-  setAttribute (name, value) {
-    if (this.attribs == null) this.attribs = {};
-    if (value == null) value = '';
-    this.attribs[name] = value;
-  },
-  removeAttribute (name) {
-    if (this.attribs != null) {
-      delete this.attribs[name];
-    }
-  },
-  getAttribute (name) {
-    return this.attribs != null && this.attribs[name];
-  },
-  hasAttribute (name) {
-    return this.attribs != null && this.attribs[name] != null;
-  },
-  getAttributeNode (name) {
-    const value = this.getAttribute(name);
-    if (value != null) return { specified: true, value };
-  },
-  getElementsByTagName
-};
-
-/** Methods and descriptors to mix into the global document instance */
-const DocumentExtensions = {
-  // document is just an Element in htmlparser2, giving it a nodeType of ELEMENT_NODE.
-  // nwmatcher requires that it at least report a correct nodeType of DOCUMENT_NODE.
-  nodeType: {
-    get () {
-      return 9;
-    }
-  },
-  nodeName: {
-    get () {
-      return '#document';
-    }
-  },
-  documentElement: {
-    get () {
-      // Find the first <html> element within the document
-      return this.childNodes.filter(child => String(child.tagName).toLowerCase() === 'html')[0];
-    }
-  },
-  body: {
-    get () {
-      return this.querySelector('body');
-    }
-  },
-  createElement (name) {
-    return treeAdapter.createElement(name, null, []);
-  },
-  createTextNode (text) {
-    // there is no dedicated createTextNode equivalent in htmlparser2's DOM, so
-    // we have to insert Text and then remove and return the resulting Text node.
-    const scratch = this.$$scratchElement;
-    treeAdapter.insertText(scratch, text);
-    const node = scratch.lastChild;
-    treeAdapter.detachNode(node);
-    return node;
-  },
-  querySelector (sel) {
-    return this.$match.first(sel, this.documentElement);
-  },
-  querySelectorAll (sel) {
-    return this.$match.select(sel, this.documentElement);
-  },
-  getElementsByTagName,
-  // nwmatcher uses inexistence of `document.addEventListener` to detect IE:
-  // https://github.com/dperini/nwmatcher/blob/3edb471e12ce7f7d46dc1606c7f659ff45675a29/src/nwmatcher.js#L353
-  addEventListener: Object
-};
diff --git a/config/prerender-loader.js b/config/prerender-loader.js
deleted file mode 100644
index 05998585..00000000
--- a/config/prerender-loader.js
+++ /dev/null
@@ -1,222 +0,0 @@
-const jsdom = require('jsdom');
-const os = require('os');
-// const util = require('util');
-const path = require('path');
-const loaderUtils = require('loader-utils');
-const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
-const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
-const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
-const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
-const DefinePlugin = require('webpack').DefinePlugin;
-const MemoryFs = require('memory-fs');
-
-const FILENAME = 'ssr-bundle.js';
-
-const PRERENDER_REG = /\{\{prerender(?::\s*([^}]+)\s*)?\}\}/;
-
-module.exports = function PrerenderLoader (content) {
-  // const { string, disabled, ...options } = getOptions()
-  const options = loaderUtils.getOptions(this) || {};
-  const outputFilter = options.as === 'string' || options.string ? stringToModule : String;
-
-  if (options.disabled === true) {
-    return outputFilter(content);
-  }
-
-  // When applied to HTML, attempts to inject into a specified {{prerender}} field.
-  // @note: this is only used when the entry module exports a String or function
-  // that resolves to a String, otherwise the whole document is serialized.
-  let inject = false;
-  if (!this.request.match(/.(js|ts)x?$/i)) {
-    const matches = content.match(PRERENDER_REG);
-    if (matches) {
-      inject = true;
-      options.entry = matches[1];
-    }
-    options.templateContent = content;
-  }
-
-  const callback = this.async();
-
-  prerender(this, options, inject)
-    .then(output => {
-      callback(null, outputFilter(output));
-    })
-    .catch(err => {
-      console.error(err);
-      callback(err);
-    });
-};
-
-async function prerender (loaderContext, options, inject) {
-  const parentCompilation = loaderContext._compilation;
-  const parentCompiler = rootCompiler(parentCompilation.compiler);
-  const request = loaderContext.request;
-  const context = parentCompiler.options.context || process.cwd();
-  const entry = './' + ((options.entry && [].concat(options.entry).pop().trim()) || path.relative(context, parentCompiler.options.entry));
-
-  // undocumented option (to remove):
-  // !!prerender-loader?template=src/index.html!src/index.js
-  // if (!inject && options.template) {
-  //   const loadModule = util.promisify(loaderContext.loadModule);
-  //   const source = await loadModule('!!raw-loader!' + path.resolve(context, options.template));
-  //   options.templateContent = source;
-  // }
-
-  const outputOptions = {
-    // fix for plugins not using outputfilesystem
-    path: os.tmpdir(),
-    filename: FILENAME
-  };
-
-  // Only copy over mini-extract-text-plugin (excluding it breaks extraction entirely)
-  const plugins = (parentCompiler.options.plugins || []).filter(c => /MiniCssExtractPlugin/i.test(c.constructor.name));
-
-  // Compile to an in-memory filesystem since we just want the resulting bundled code as a string
-  const compiler = parentCompilation.createChildCompiler('prerender', outputOptions, plugins);
-  compiler.outputFileSystem = new MemoryFs();
-
-  // Define PRERENDER to be true within the SSR bundle
-  new DefinePlugin({
-    PRERENDER: 'true',
-    document: 'undefined' // if (typeof document==='undefined') {}
-  }).apply(compiler);
-
-  // ... then define PRERENDER to be false within the client bundle
-  new DefinePlugin({
-    PRERENDER: 'false'
-  }).apply(parentCompiler);
-
-  // Compile to CommonJS to be executed by Node
-  new NodeTemplatePlugin(outputOptions).apply(compiler);
-  new NodeTargetPlugin().apply(compiler);
-
-  new LibraryTemplatePlugin('PRERENDER_RESULT', 'var').apply(compiler);
-
-  // Kick off compilation at our entry module (either the parent compiler's entry or a custom one defined via `{{prerender:entry.js}}`)
-  new SingleEntryPlugin(context, entry, undefined).apply(compiler);
-
-  // Set up cache inheritance for the child compiler
-  const subCache = 'subcache ' + request;
-  function addChildCache (compilation, data) {
-    if (compilation.cache) {
-      if (!compilation.cache[subCache]) compilation.cache[subCache] = {};
-      compilation.cache = compilation.cache[subCache];
-    }
-  }
-  if (compiler.hooks) {
-    compiler.hooks.compilation.tap('prerender-loader', addChildCache);
-  } else {
-    compiler.plugin('compilation', addChildCache);
-  }
-
-  const compilation = await runChildCompiler(compiler);
-  let result = '';
-  let dom, injectParent;
-
-  if (compilation.assets[compilation.options.output.filename]) {
-    // Get the compiled main bundle
-    const output = compilation.assets[compilation.options.output.filename].source();
-
-    const tpl = options.templateContent || '<!DOCTYPE html><html><head></head><body></body></html>';
-    dom = new jsdom.JSDOM(tpl.replace(PRERENDER_REG, '<div id="PRERENDER_INJECT"></div>'), {
-      // don't track source locations for performance reasons
-      includeNodeLocations: false,
-      // don't allow inline event handlers & script tag exec
-      runScripts: 'outside-only'
-    });
-    const { window } = dom;
-
-    // Find the placeholder node for injection & remove it
-    const injectPlaceholder = window.document.getElementById('PRERENDER_INJECT');
-    if (injectPlaceholder) {
-      injectParent = injectPlaceholder.parentNode;
-      injectPlaceholder.remove();
-    }
-
-    // These are missing from JSDOM
-    let counter = 0;
-    window.requestAnimationFrame = () => ++counter;
-    window.cancelAnimationFrame = () => {};
-
-    // Invoke the SSR bundle within the JSDOM document and grab the exported/returned result
-    result = window.eval(output + '\nPRERENDER_RESULT') || result;
-
-    // @todo this seems pointless
-    if (window.PRERENDER_RESULT != null) {
-      result = window.PRERENDER_RESULT;
-    }
-  }
-
-  // Deal with ES Module exports (just use the best guess):
-  if (result && result.__esModule === true) {
-    result = getBestModuleExport(result);
-  }
-
-  if (typeof result === 'function') {
-    // @todo any arguments worth passing here?
-    result = result();
-  }
-
-  // The entry can export or return a Promise in order to perform fully async prerendering:
-  if (result && result.then) {
-    result = await result;
-  }
-
-  // Returning or resolving to `null` / `undefined` defaults to serializing the whole document.
-  // Note: this pypasses `inject` because the document is already derived from the template.
-  if (result == null && dom) {
-    result = dom.serialize();
-  } else if (inject) {
-    // @todo determine if this is really necessary for the string return case
-    if (injectParent) {
-      injectParent.insertAdjacentHTML('beforeend', result || '');
-    } else {
-      // Otherwise inject the prerendered HTML into the template
-      result = options.templateContent.replace(PRERENDER_REG, result || '');
-    }
-  }
-
-  return result;
-}
-
-// Promisified version of compiler.runAsChild() with error hoisting and isolated output/assets
-function runChildCompiler (compiler) {
-  return new Promise((resolve, reject) => {
-    // runAsChild() merges assets into the parent compilation, we don't want that.
-    compiler.compile((err, compilation) => {
-      compiler.parentCompilation.children.push(compilation);
-      if (err) return reject(err);
-
-      if (compilation.errors && compilation.errors.length) {
-        const errorDetails = compilation.errors.map(error => error.details).join('\n');
-        return reject(Error('Child compilation failed:\n' + errorDetails));
-      }
-
-      resolve(compilation);
-    });
-  });
-}
-
-// Crawl up the compiler tree and return the outermost compiler instance
-function rootCompiler (compiler) {
-  while (compiler.parentCompilation && compiler.parentCompilation.compiler) {
-    compiler = compiler.parentCompilation.compiler;
-  }
-  return compiler;
-}
-
-// Find the best possible export for an ES Module. Returns `undefined` for no exports.
-function getBestModuleExport (exports) {
-  if (exports.default) {
-    return exports.default;
-  }
-  for (const prop in exports) {
-    if (prop !== '__esModule') {
-      return exports[prop];
-    }
-  }
-}
-
-// Wrap a String up into an ES Module that exports it
-const stringToModule = str => 'export default ' + JSON.stringify(str);
diff --git a/config/prerender.js b/config/prerender.js
deleted file mode 100644
index 65fda441..00000000
--- a/config/prerender.js
+++ /dev/null
@@ -1,20 +0,0 @@
-let path = require('path');
-let preact = require('preact');
-let renderToString = require('preact-render-to-string');
-
-let appPath = path.join(__dirname, '../src/index');
-
-module.exports = function(options) {
-  options = options || {};
-  let url = typeof options==='string' ? options : options.url;
-  global.history = {};
-  global.location = { href: url, pathname: url };
-
-  // let app = require('app-entry-point');
-  let app = require(appPath);
-
-  let html = renderToString(preact.h(app, { url }));
-  console.log(html);
-
-  return html;
-};
diff --git a/package-lock.json b/package-lock.json
index 6caf552c..af34fca5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,24 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.0.0-beta.46",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.46.tgz",
+      "integrity": "sha512-/3a3USMKk54BEHhDgY8rtxtaQOs4bp4aQwo6SDtdwmrXmgSgEusWuXNX5oIs/nwzmTD9o8wz2EyAjA+uHDMmJA==",
+      "dev": true,
+      "requires": {
+        "core-js": "2.5.5",
+        "regenerator-runtime": "0.11.1"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=",
+          "dev": true
+        }
+      }
+    },
     "@material/animation": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz",
@@ -385,12 +403,6 @@
       "integrity": "sha512-4Ba90mWNx8ddbafuyGGwjkZMigi+AWfYLSDCpovwsE63ia8w93r3oJ8PIAQc3y8U+XHcnMOHPIzNe3o438Ywcw==",
       "dev": true
     },
-    "abab": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
-      "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=",
-      "dev": true
-    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -422,15 +434,6 @@
         "acorn": "5.5.0"
       }
     },
-    "acorn-globals": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.1.0.tgz",
-      "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==",
-      "dev": true,
-      "requires": {
-        "acorn": "5.5.0"
-      }
-    },
     "acorn-jsx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
@@ -837,12 +840,6 @@
       "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
       "dev": true
     },
-    "array-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
-    },
     "array-filter": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
@@ -2245,12 +2242,6 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
-    "browser-process-hrtime": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz",
-      "integrity": "sha1-Ql1opY00R/AqBKqJQYf86K+Le44=",
-      "dev": true
-    },
     "browserify-aes": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.1.1.tgz",
@@ -3317,12 +3308,6 @@
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
       "dev": true
     },
-    "content-type-parser": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/content-type-parser/-/content-type-parser-1.0.2.tgz",
-      "integrity": "sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==",
-      "dev": true
-    },
     "convert-source-map": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
@@ -3612,21 +3597,6 @@
         "source-map": "0.5.7"
       }
     },
-    "cssom": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
-      "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
-      "dev": true
-    },
-    "cssstyle": {
-      "version": "0.2.37",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
-      "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
-      "dev": true,
-      "requires": {
-        "cssom": "0.3.2"
-      }
-    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -3965,15 +3935,6 @@
       "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
       "dev": true
     },
-    "domexception": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
-      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-      "dev": true,
-      "requires": {
-        "webidl-conversions": "4.0.2"
-      }
-    },
     "domhandler": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.1.0.tgz",
@@ -4045,36 +4006,6 @@
       "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo=",
       "dev": true
     },
-    "ejs-loader": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/ejs-loader/-/ejs-loader-0.3.1.tgz",
-      "integrity": "sha512-bdJHTxBY3uqZ6L5V1WRohf1gr7ousgESpArPVseEQCWCATs+M8BRqxyJWqnFo+h815gTA++g5LyAyqS5OTIfdQ==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "0.2.17",
-        "lodash": "3.10.1"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "0.2.17",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-          "dev": true,
-          "requires": {
-            "big.js": "3.2.0",
-            "emojis-list": "2.1.0",
-            "json5": "0.5.1",
-            "object-assign": "4.1.1"
-          }
-        },
-        "lodash": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
-          "dev": true
-        }
-      }
-    },
     "electron-to-chromium": {
       "version": "1.3.34",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.34.tgz",
@@ -4213,34 +4144,6 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
       "dev": true
     },
-    "escodegen": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz",
-      "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==",
-      "dev": true,
-      "requires": {
-        "esprima": "3.1.3",
-        "estraverse": "4.2.0",
-        "esutils": "2.0.2",
-        "optionator": "0.8.2",
-        "source-map": "0.6.1"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
     "eslint": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.18.2.tgz",
@@ -4763,18 +4666,6 @@
         }
       }
     },
-    "extract-text-webpack-plugin": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
-      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
-      "dev": true,
-      "requires": {
-        "async": "2.6.0",
-        "loader-utils": "1.1.0",
-        "schema-utils": "0.4.5",
-        "webpack-sources": "1.1.0"
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -4997,109 +4888,6 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true
     },
-    "fork-ts-checker-notifier-webpack-plugin": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-notifier-webpack-plugin/-/fork-ts-checker-notifier-webpack-plugin-0.4.0.tgz",
-      "integrity": "sha512-v0mt/9FLGbsbeplA68HaXj1s+ydEJkEWYs+NjtZs9r20UdrzmONzOQIkwhhk+k2Xv9RWypXdFFezC3uFphJ68Q==",
-      "dev": true,
-      "requires": {
-        "node-notifier": "5.2.1"
-      }
-    },
-    "fork-ts-checker-webpack-plugin": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.4.1.tgz",
-      "integrity": "sha512-UckdUYL51F5t9t/2Uqk0xatxz8Cf75a1THNIrDYajjcAcg2Q64SXNP7BTQPxXm0bU1chzjR3brXIaianbFqI3Q==",
-      "dev": true,
-      "requires": {
-        "babel-code-frame": "6.26.0",
-        "chalk": "1.1.3",
-        "chokidar": "1.7.0",
-        "lodash.endswith": "4.2.1",
-        "lodash.isfunction": "3.0.9",
-        "lodash.isstring": "4.0.1",
-        "lodash.startswith": "4.2.1",
-        "minimatch": "3.0.4",
-        "resolve": "1.6.0",
-        "tapable": "1.0.0",
-        "vue-parser": "1.1.6"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
-          "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==",
-          "dev": true,
-          "requires": {
-            "micromatch": "2.3.11",
-            "normalize-path": "2.1.1"
-          }
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
-          }
-        },
-        "chokidar": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-          "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
-          "dev": true,
-          "requires": {
-            "anymatch": "1.3.2",
-            "async-each": "1.0.1",
-            "fsevents": "1.1.3",
-            "glob-parent": "2.0.0",
-            "inherits": "2.0.3",
-            "is-binary-path": "1.0.1",
-            "is-glob": "2.0.1",
-            "path-is-absolute": "1.0.1",
-            "readdirp": "2.1.0"
-          }
-        },
-        "glob-parent": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-          "dev": true,
-          "requires": {
-            "is-glob": "2.0.1"
-          }
-        },
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "1.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        }
-      }
-    },
     "form-data": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
@@ -6485,12 +6273,6 @@
         "lodash": "4.17.5"
       }
     },
-    "growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
-      "dev": true
-    },
     "gzip-size": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
@@ -6515,12 +6297,6 @@
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
       "dev": true
     },
-    "har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
-    },
     "har-validator": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
@@ -6771,15 +6547,6 @@
       "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=",
       "dev": true
     },
-    "html-encoding-sniffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
-      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
-      "dev": true,
-      "requires": {
-        "whatwg-encoding": "1.0.3"
-      }
-    },
     "html-entities": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
@@ -7727,187 +7494,6 @@
         }
       }
     },
-    "jsdom": {
-      "version": "11.6.2",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.6.2.tgz",
-      "integrity": "sha512-pAeZhpbSlUp5yQcS6cBQJwkbzmv4tWFaYxHbFVSxzXefqjvtRA851Z5N2P+TguVG9YeUDcgb8pdeVQRJh0XR3Q==",
-      "dev": true,
-      "requires": {
-        "abab": "1.0.4",
-        "acorn": "5.5.0",
-        "acorn-globals": "4.1.0",
-        "array-equal": "1.0.0",
-        "browser-process-hrtime": "0.1.2",
-        "content-type-parser": "1.0.2",
-        "cssom": "0.3.2",
-        "cssstyle": "0.2.37",
-        "domexception": "1.0.1",
-        "escodegen": "1.9.1",
-        "html-encoding-sniffer": "1.0.2",
-        "left-pad": "1.2.0",
-        "nwmatcher": "1.4.4",
-        "parse5": "4.0.0",
-        "pn": "1.1.0",
-        "request": "2.85.0",
-        "request-promise-native": "1.0.5",
-        "sax": "1.2.4",
-        "symbol-tree": "3.2.2",
-        "tough-cookie": "2.3.4",
-        "w3c-hr-time": "1.0.1",
-        "webidl-conversions": "4.0.2",
-        "whatwg-encoding": "1.0.3",
-        "whatwg-url": "6.4.0",
-        "ws": "4.1.0",
-        "xml-name-validator": "3.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        },
-        "aws-sign2": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-          "dev": true
-        },
-        "boom": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
-          "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
-          "dev": true,
-          "requires": {
-            "hoek": "4.2.1"
-          }
-        },
-        "caseless": {
-          "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-          "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-          "dev": true
-        },
-        "cryptiles": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
-          "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
-          "dev": true,
-          "requires": {
-            "boom": "5.2.0"
-          },
-          "dependencies": {
-            "boom": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-              "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
-              "dev": true,
-              "requires": {
-                "hoek": "4.2.1"
-              }
-            }
-          }
-        },
-        "form-data": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
-          "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
-          "dev": true,
-          "requires": {
-            "asynckit": "0.4.0",
-            "combined-stream": "1.0.6",
-            "mime-types": "2.1.18"
-          }
-        },
-        "har-validator": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
-          "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
-          "dev": true,
-          "requires": {
-            "ajv": "5.5.2",
-            "har-schema": "2.0.0"
-          }
-        },
-        "hawk": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
-          "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
-          "dev": true,
-          "requires": {
-            "boom": "4.3.1",
-            "cryptiles": "3.1.2",
-            "hoek": "4.2.1",
-            "sntp": "2.1.0"
-          }
-        },
-        "hoek": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-          "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
-          "dev": true
-        },
-        "http-signature": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-          "dev": true,
-          "requires": {
-            "assert-plus": "1.0.0",
-            "jsprim": "1.4.1",
-            "sshpk": "1.13.1"
-          }
-        },
-        "request": {
-          "version": "2.85.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
-          "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "0.7.0",
-            "aws4": "1.6.0",
-            "caseless": "0.12.0",
-            "combined-stream": "1.0.6",
-            "extend": "3.0.1",
-            "forever-agent": "0.6.1",
-            "form-data": "2.3.2",
-            "har-validator": "5.0.3",
-            "hawk": "6.0.2",
-            "http-signature": "1.2.0",
-            "is-typedarray": "1.0.0",
-            "isstream": "0.1.2",
-            "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.18",
-            "oauth-sign": "0.8.2",
-            "performance-now": "2.1.0",
-            "qs": "6.5.1",
-            "safe-buffer": "5.1.1",
-            "stringstream": "0.0.5",
-            "tough-cookie": "2.3.4",
-            "tunnel-agent": "0.6.0",
-            "uuid": "3.2.1"
-          }
-        },
-        "sntp": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
-          "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
-          "dev": true,
-          "requires": {
-            "hoek": "4.2.1"
-          }
-        },
-        "tunnel-agent": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-          "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
     "jsesc": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
@@ -8073,12 +7659,6 @@
         "invert-kv": "1.0.0"
       }
     },
-    "left-pad": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.2.0.tgz",
-      "integrity": "sha1-0wpzxrggHY99jnlWupYWCHpo4O4=",
-      "dev": true
-    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -8369,24 +7949,6 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
-    "lodash.endswith": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/lodash.endswith/-/lodash.endswith-4.2.1.tgz",
-      "integrity": "sha1-/tWawXOO0+I27dcGTsRWRIs3vAk=",
-      "dev": true
-    },
-    "lodash.isfunction": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
-      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
-      "dev": true
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
-      "dev": true
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8399,18 +7961,6 @@
       "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
       "dev": true
     },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
-    },
-    "lodash.startswith": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
-      "integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw=",
-      "dev": true
-    },
     "lodash.tail": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
@@ -8873,7 +8423,7 @@
       }
     },
     "material-radial-progress": {
-      "version": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git#76f1dd168b410d5b5ffecf363688270261d44832"
+      "version": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git#db6fd760ab355faed5f89456a087992af78faa10"
     },
     "math-expression-evaluator": {
       "version": "1.2.17",
@@ -9450,18 +9000,6 @@
         "vm-browserify": "0.0.4"
       }
     },
-    "node-notifier": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.2.1.tgz",
-      "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==",
-      "dev": true,
-      "requires": {
-        "growly": "1.3.0",
-        "semver": "5.5.0",
-        "shellwords": "0.1.1",
-        "which": "1.3.0"
-      }
-    },
     "node-sass": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
@@ -9661,12 +9199,6 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
-    "nwmatcher": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
-      "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==",
-      "dev": true
-    },
     "oauth-sign": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
@@ -9810,18 +9342,6 @@
         }
       }
     },
-    "object.values": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
-      "integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
-      "dev": true,
-      "requires": {
-        "define-properties": "1.1.2",
-        "es-abstract": "1.10.0",
-        "function-bind": "1.1.1",
-        "has": "1.0.1"
-      }
-    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -10182,12 +9702,6 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
-    "parse5": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
-      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
-      "dev": true
-    },
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
@@ -10287,12 +9801,6 @@
         "sha.js": "2.4.11"
       }
     },
-    "performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
-    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -10329,12 +9837,6 @@
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
       "dev": true
     },
-    "pn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
-      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
-      "dev": true
-    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -11052,27 +10554,18 @@
     "preact-material-components-drawer": {
       "version": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git#51843d83fc0432348eeda65a019920ca77bb79c4"
     },
-    "preact-render-to-string": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.7.0.tgz",
-      "integrity": "sha1-fbQXdFS8ATleDQHWrAe8XoOOMe4=",
-      "dev": true,
-      "requires": {
-        "pretty-format": "3.8.0"
-      }
-    },
     "preact-router": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-2.6.0.tgz",
       "integrity": "sha1-Vff7yE5rivDfPqBMjOTCaHFAibY="
     },
     "preload-webpack-plugin": {
-      "version": "github:GoogleChromeLabs/preload-webpack-plugin#798fc677f42e9ed2c1176065f733efa6b7fdc735",
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-sl0xCvUfw6Qrd2WTo3NzavRFUaui4SknwxkubG6s5yQ1i1NLnnKrzJS5sYrhVZgxK+M9UsXMKUrF5hAYTnRZEw==",
       "dev": true,
       "requires": {
-        "object-assign": "4.1.1",
-        "object.values": "1.0.4",
-        "webpack-log": "1.1.2"
+        "@babel/runtime": "7.0.0-beta.46"
       }
     },
     "prelude-ls": {
@@ -11115,12 +10608,6 @@
         "utila": "0.4.0"
       }
     },
-    "pretty-format": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
-      "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=",
-      "dev": true
-    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -11755,26 +11242,6 @@
         }
       }
     },
-    "request-promise-core": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz",
-      "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=",
-      "dev": true,
-      "requires": {
-        "lodash": "4.17.5"
-      }
-    },
-    "request-promise-native": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.5.tgz",
-      "integrity": "sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=",
-      "dev": true,
-      "requires": {
-        "request-promise-core": "1.1.1",
-        "stealthy-require": "1.1.1",
-        "tough-cookie": "2.3.4"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -12358,12 +11825,6 @@
         "rechoir": "0.6.2"
       }
     },
-    "shellwords": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
-      "dev": true
-    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -12887,12 +12348,6 @@
         "readable-stream": "2.3.4"
       }
     },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true
-    },
     "stream-browserify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
@@ -13099,12 +12554,6 @@
       "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=",
       "dev": true
     },
-    "symbol-tree": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
-      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
-      "dev": true
-    },
     "tabbable": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz",
@@ -13311,23 +12760,6 @@
         "punycode": "1.4.1"
       }
     },
-    "tr46": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-      "dev": true,
-      "requires": {
-        "punycode": "2.1.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
-          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
-          "dev": true
-        }
-      }
-    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -13817,58 +13249,6 @@
       "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
       "dev": true
     },
-    "typescript-loader": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/typescript-loader/-/typescript-loader-1.1.3.tgz",
-      "integrity": "sha1-X/fmfLO6WSUZAUqswar2ZqcJ3gE=",
-      "dev": true,
-      "requires": {
-        "bluebird": "2.11.0",
-        "loader-utils": "0.2.17",
-        "object-assign": "2.1.1",
-        "typescript": "1.8.10"
-      },
-      "dependencies": {
-        "bluebird": {
-          "version": "2.11.0",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
-          "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=",
-          "dev": true
-        },
-        "loader-utils": {
-          "version": "0.2.17",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-          "dev": true,
-          "requires": {
-            "big.js": "3.2.0",
-            "emojis-list": "2.1.0",
-            "json5": "0.5.1",
-            "object-assign": "4.1.1"
-          },
-          "dependencies": {
-            "object-assign": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-              "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-              "dev": true
-            }
-          }
-        },
-        "object-assign": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
-          "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=",
-          "dev": true
-        },
-        "typescript": {
-          "version": "1.8.10",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-1.8.10.tgz",
-          "integrity": "sha1-tHXW4N/wv1DyluXKbvn7tccyDx4=",
-          "dev": true
-        }
-      }
-    },
     "typings-for-css-modules-loader": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/typings-for-css-modules-loader/-/typings-for-css-modules-loader-1.7.0.tgz",
@@ -14425,35 +13805,6 @@
         "indexof": "0.0.1"
       }
     },
-    "vue-parser": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/vue-parser/-/vue-parser-1.1.6.tgz",
-      "integrity": "sha512-v3/R7PLbaFVF/c8IIzWs1HgRpT2gN0dLRkaLIT5q+zJGVgmhN4VuZJF4Y9N4hFtFjS4B1EHxAOP6/tzqM4Ug2g==",
-      "dev": true,
-      "requires": {
-        "parse5": "3.0.3"
-      },
-      "dependencies": {
-        "parse5": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
-          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
-          "dev": true,
-          "requires": {
-            "@types/node": "9.4.7"
-          }
-        }
-      }
-    },
-    "w3c-hr-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
-      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
-      "dev": true,
-      "requires": {
-        "browser-process-hrtime": "0.1.2"
-      }
-    },
     "watchpack": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.5.0.tgz",
@@ -14474,12 +13825,6 @@
         "minimalistic-assert": "1.0.0"
       }
     },
-    "webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
-      "dev": true
-    },
     "webpack": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.3.0.tgz",
@@ -15253,32 +14598,12 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
-    "whatwg-encoding": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz",
-      "integrity": "sha512-jLBwwKUhi8WtBfsMQlL4bUUcT8sMkAtQinscJAe/M4KHCkHuUJAF6vuB0tueNIw4c8ziO6AkRmgY+jL3a0iiPw==",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "0.4.19"
-      }
-    },
     "whatwg-fetch": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
       "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=",
       "dev": true
     },
-    "whatwg-url": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz",
-      "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==",
-      "dev": true,
-      "requires": {
-        "lodash.sortby": "4.7.0",
-        "tr46": "1.0.1",
-        "webidl-conversions": "4.0.2"
-      }
-    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -15560,12 +14885,6 @@
       "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
       "dev": true
     },
-    "xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-      "dev": true
-    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
diff --git a/package.json b/package.json
index c592706c..bc86e17a 100644
--- a/package.json
+++ b/package.json
@@ -41,11 +41,9 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-preset-env": "^1.6.1",
     "babel-register": "^6.26.0",
-    "chalk": "^2.3.2",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
-    "ejs-loader": "^0.3.1",
     "eslint": "^4.18.2",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-jsx": "^5.0.0",
@@ -54,19 +52,13 @@
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fork-ts-checker-notifier-webpack-plugin": "^0.4.0",
-    "fork-ts-checker-webpack-plugin": "^0.4.1",
     "html-webpack-plugin": "^3.0.6",
     "if-env": "^1.0.4",
-    "jsdom": "^11.5.1",
     "loader-utils": "^1.1.0",
-    "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.3.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
-    "preact-render-to-string": "^3.7.0",
-    "preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
+    "preload-webpack-plugin": "^3.0.0-alpha.3",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",
@@ -78,7 +70,6 @@
     "tslint-config-semistandard": "^7.0.0",
     "tslint-react": "^3.5.1",
     "typescript": "^2.7.2",
-    "typescript-loader": "^1.1.3",
     "typings-for-css-modules-loader": "^1.7.0",
     "webpack": "^4.3.0",
     "webpack-bundle-analyzer": "^2.11.1",
diff --git a/webpack.config.js b/webpack.config.js
index a243d3bb..db9dd181 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,7 +12,6 @@ const PreloadPlugin = require('preload-webpack-plugin');
 const ReplacePlugin = require('webpack-plugin-replace');
 const CopyPlugin = require('copy-webpack-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
-const CrittersPlugin = require('./config/critters-webpack-plugin');
 const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -165,7 +164,7 @@ module.exports = function (_, env) {
       // For now we're not doing SSR.
       new HtmlPlugin({
         filename: path.join(__dirname, 'build/index.html'),
-        template: '!' + path.join(__dirname, 'config/prerender-loader') + '?string' + (isProd ? '' : '&disabled') + '!src/index.html',
+        template: 'src/index.html',
         minify: isProd && {
           collapseWhitespace: true,
           removeScriptTypeAttributes: true,
@@ -187,19 +186,6 @@ module.exports = function (_, env) {
         include: 'initial'
       }),
 
-      isProd && new CrittersPlugin({
-        // Don't inline fonts into critical CSS, but do preload them:
-        preloadFonts: true,
-        // convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style">:
-        async: true,
-        // Use media hack to load async (<link media="only x" onload="this.media='all'">):
-        media: true
-        // // use a $loadcss async CSS loading shim (DOM insertion to head)
-        // preload: 'js'
-        // // copy original <link rel="stylesheet"> to the end of <body>:
-        // preload: true
-      }),
-
       // Inline constants during build, so they can be folded by UglifyJS.
       new webpack.DefinePlugin({
         // We set node.process=false later in this config.

From e84d2dc7ee755ab0dc7267f22293e7edfcd4e561 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Thu, 3 May 2018 12:01:13 -0700
Subject: [PATCH 06/10] remove redundant PRERENDER define

---
 global.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/global.d.ts b/global.d.ts
index c91b407a..7b9d325d 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,5 +1,4 @@
 declare const __webpack_public_path__: string;
-declare const PRERENDER: boolean;
 
 declare interface NodeModule {
   hot: any;

From b6194272377a28f0106fea650bf2dd03e97951d3 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 4 May 2018 17:05:44 +0100
Subject: [PATCH 07/10] Removing everything that isn't skeletonyy (#22)

* Simplifying

* Ignoring CSS defs
---
 .gitignore                            |   3 +-
 package-lock.json                     | 271 --------------------------
 package.json                          |   4 +-
 src/components/app/index.tsx          | 127 ++----------
 src/components/app/style.scss         |  26 +--
 src/components/app/style.scss.d.ts    |   3 -
 src/components/drawer/index.tsx       |  63 ------
 src/components/drawer/style.scss      |  29 ---
 src/components/drawer/style.scss.d.ts |  14 --
 src/components/fab/index.tsx          |  47 -----
 src/components/fab/style.scss         |  18 --
 src/components/fab/style.scss.d.ts    |   5 -
 src/components/header/index.tsx       |  53 -----
 src/components/header/style.scss      |  52 -----
 src/components/header/style.scss.d.ts |   8 -
 src/components/home/index.tsx         |  41 ----
 src/components/home/style.scss        |  21 --
 src/components/home/style.scss.d.ts   |   3 -
 src/components/output/index.tsx       |  44 +++++
 src/components/output/style.scss      |   3 +
 src/index.tsx                         |   9 -
 src/lib/util.ts                       |  23 ---
 src/style/helpers.scss                |  10 -
 src/style/index.scss                  |  17 --
 src/style/material-icons.scss         |  24 ---
 webpack.config.js                     |  32 +--
 26 files changed, 75 insertions(+), 875 deletions(-)
 delete mode 100644 src/components/app/style.scss.d.ts
 delete mode 100644 src/components/drawer/index.tsx
 delete mode 100644 src/components/drawer/style.scss
 delete mode 100644 src/components/drawer/style.scss.d.ts
 delete mode 100644 src/components/fab/index.tsx
 delete mode 100644 src/components/fab/style.scss
 delete mode 100644 src/components/fab/style.scss.d.ts
 delete mode 100644 src/components/header/index.tsx
 delete mode 100644 src/components/header/style.scss
 delete mode 100644 src/components/header/style.scss.d.ts
 delete mode 100644 src/components/home/index.tsx
 delete mode 100644 src/components/home/style.scss
 delete mode 100644 src/components/home/style.scss.d.ts
 create mode 100644 src/components/output/index.tsx
 create mode 100644 src/components/output/style.scss
 delete mode 100644 src/style/helpers.scss
 delete mode 100644 src/style/material-icons.scss

diff --git a/.gitignore b/.gitignore
index d6cc1d59..df5e0ec2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 /build
-/*.log
\ No newline at end of file
+/*.log
+*.scss.d.ts
diff --git a/package-lock.json b/package-lock.json
index af34fca5..152f3b3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,24 +4,6 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@babel/runtime": {
-      "version": "7.0.0-beta.46",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.46.tgz",
-      "integrity": "sha512-/3a3USMKk54BEHhDgY8rtxtaQOs4bp4aQwo6SDtdwmrXmgSgEusWuXNX5oIs/nwzmTD9o8wz2EyAjA+uHDMmJA==",
-      "dev": true,
-      "requires": {
-        "core-js": "2.5.5",
-        "regenerator-runtime": "0.11.1"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
-          "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=",
-          "dev": true
-        }
-      }
-    },
     "@material/animation": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz",
@@ -3190,15 +3172,6 @@
       "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
       "dev": true
     },
-    "common-tags": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.2.tgz",
-      "integrity": "sha512-joj9ZlUOjCrwdbmiLqafeUSgkUM74NqhLsZtSqDmhKudaIY197zTrb8JMl31fMnCUuxwFT23eC/oWvrZzDLRJQ==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "6.26.0"
-      }
-    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -4936,17 +4909,6 @@
         "readable-stream": "2.3.4"
       }
     },
-    "fs-extra": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "jsonfile": "4.0.0",
-        "universalify": "0.1.1"
-      }
-    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -7346,23 +7308,6 @@
       "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
       "dev": true
     },
-    "isemail": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/isemail/-/isemail-3.1.1.tgz",
-      "integrity": "sha512-mVjAjvdPkpwXW61agT2E9AkGoegZO7SdJGCezWwxnETL58f5KwJ4vSVAMBUL5idL6rTlYAIGkX3n4suiviMLNw==",
-      "dev": true,
-      "requires": {
-        "punycode": "2.1.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
-          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
-          "dev": true
-        }
-      }
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7415,25 +7360,6 @@
         "is-object": "1.0.1"
       }
     },
-    "joi": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz",
-      "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==",
-      "dev": true,
-      "requires": {
-        "hoek": "4.2.1",
-        "isemail": "3.1.1",
-        "topo": "2.0.2"
-      },
-      "dependencies": {
-        "hoek": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-          "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
-          "dev": true
-        }
-      }
-    },
     "js-base64": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
@@ -7524,15 +7450,6 @@
       "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
       "dev": true
     },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "dev": true,
-      "requires": {
-        "jsonify": "0.0.0"
-      }
-    },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -7557,15 +7474,6 @@
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
-    "jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11"
-      }
-    },
     "jsonify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -7925,12 +7833,6 @@
       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
       "dev": true
     },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
-      "dev": true
-    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -7967,25 +7869,6 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
-    "lodash.template": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
-      "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.templatesettings": "4.1.0"
-      }
-    },
-    "lodash.templatesettings": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
-      "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "3.0.0"
-      }
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10559,15 +10442,6 @@
       "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-2.6.0.tgz",
       "integrity": "sha1-Vff7yE5rivDfPqBMjOTCaHFAibY="
     },
-    "preload-webpack-plugin": {
-      "version": "3.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-alpha.3.tgz",
-      "integrity": "sha512-sl0xCvUfw6Qrd2WTo3NzavRFUaui4SknwxkubG6s5yQ1i1NLnnKrzJS5sYrhVZgxK+M9UsXMKUrF5hAYTnRZEw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "7.0.0-beta.46"
-      }
-    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -12728,23 +12602,6 @@
         }
       }
     },
-    "topo": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
-      "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
-      "dev": true,
-      "requires": {
-        "hoek": "4.2.1"
-      },
-      "dependencies": {
-        "hoek": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-          "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
-          "dev": true
-        }
-      }
-    },
     "toposort": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz",
@@ -13424,12 +13281,6 @@
         "imurmurhash": "0.1.4"
       }
     },
-    "universalify": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
-      "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
-      "dev": true
-    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -14671,128 +14522,6 @@
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
       "dev": true
     },
-    "workbox-background-sync": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-3.0.1.tgz",
-      "integrity": "sha512-3zHFDptq3mOiggU1AwkHs0I/egsRemhgUyyEerkvBdO/rpx41r7wK9qx+KrFKoHzRkVCYRN0ho/THo0rlP6dOw==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-broadcast-cache-update": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.0.1.tgz",
-      "integrity": "sha512-I+dDwxTUUvqSmUvOr5MtkfaTp8pcEK+HE4WJQApMRknJlvy0Cj0dEJbCApghM+KLhLhPc6Sq2Oyo26rN1xmn/w==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-build": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-3.0.1.tgz",
-      "integrity": "sha512-bU7KAZDGKNtAIzbcou3xVpR65XU9WI0+lm7zsSC1ta0D2hDqQDErHsFbwtYa9ePMx9iYYw6NRMZfARhwZnfKiw==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "6.26.0",
-        "common-tags": "1.7.2",
-        "fs-extra": "4.0.3",
-        "glob": "7.1.2",
-        "joi": "11.4.0",
-        "lodash.template": "4.4.0",
-        "pretty-bytes": "4.0.2",
-        "workbox-background-sync": "3.0.1",
-        "workbox-broadcast-cache-update": "3.0.1",
-        "workbox-cache-expiration": "3.0.1",
-        "workbox-cacheable-response": "3.0.1",
-        "workbox-core": "3.0.1",
-        "workbox-google-analytics": "3.0.1",
-        "workbox-precaching": "3.0.1",
-        "workbox-routing": "3.0.1",
-        "workbox-strategies": "3.0.1",
-        "workbox-sw": "3.0.1"
-      }
-    },
-    "workbox-cache-expiration": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-cache-expiration/-/workbox-cache-expiration-3.0.1.tgz",
-      "integrity": "sha512-01ztqk94JZtY+Ax1khHUevrNc9fzKbBV6Mq3rEjctMMQJShP8Sd4PL6zV3PFsoKdoUc8176mNfwN0AdwgMEDdg==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-cacheable-response": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-3.0.1.tgz",
-      "integrity": "sha512-bOXjRpogk2w3flZkKMo6Jy8esdHlv0POkFZ2UjMYSFvPVXr8tJZdI9lDna3gxuB3PUt2sizai6x48z+tqzrC0w==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-core": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-3.0.1.tgz",
-      "integrity": "sha512-NiAs17oJnNzvJnIaNJ+KvMgATvLbpnfnDIMgllPPIO03VyG2bMtcg/3x8NTiiPfUI1a7cmIABY/gIs8b12KMBw==",
-      "dev": true
-    },
-    "workbox-google-analytics": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-3.0.1.tgz",
-      "integrity": "sha512-HNTh707qJJ1mtU2mUCVPwt9X4f+GxxFxONjUhQ6+zH1iFlAStXaIKOAyBesyUaKXaeKN47AI7XpBztE92PdKeg==",
-      "dev": true,
-      "requires": {
-        "workbox-background-sync": "3.0.1",
-        "workbox-core": "3.0.1",
-        "workbox-routing": "3.0.1",
-        "workbox-strategies": "3.0.1"
-      }
-    },
-    "workbox-precaching": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-3.0.1.tgz",
-      "integrity": "sha512-qg+t7y0ktoL7Eo4+DtcnQbROhhcaBQ+QRYlHJhFfyHasZHxUigqtWAEDGrzILJurZAF7xbUNhdvdEbfpfv66sw==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-routing": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-3.0.1.tgz",
-      "integrity": "sha512-bL2aEAoYs12ulKEblYrTu1sm9QqWZ/tNUHxYvOym6GG2Qmu3j+Xdeg2+mbssxnMQovwN5ElBX0EVc69ZJpgjoQ==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-strategies": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-3.0.1.tgz",
-      "integrity": "sha512-Dx7TTsqFVrRPVmTUQwzcRqu1khXNzRXWk2SxxJKfprP0uwGln8zheng48svXW2KAzMTQBWGo4Tojz2Cfp99a6Q==",
-      "dev": true,
-      "requires": {
-        "workbox-core": "3.0.1"
-      }
-    },
-    "workbox-sw": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-3.0.1.tgz",
-      "integrity": "sha512-ARONUH2HyzYDhOH3N5a1qOEmqgKiDZ3qJ1SMDBkIrGIrWuSMF1KOFHgvQKuq0sEKtsspisY1ofEnRMBFCpQEKg==",
-      "dev": true
-    },
-    "workbox-webpack-plugin": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-3.0.1.tgz",
-      "integrity": "sha512-0y8FxQna/Ba53X+MtTzMHNl6hyKN5ywZSzODFiXzSiUZ7s3LSzW8NEXXuNFEnUgD7+f3NIITsyriIgfERxkI8g==",
-      "dev": true,
-      "requires": {
-        "json-stable-stringify": "1.0.1",
-        "workbox-build": "3.0.1"
-      }
-    },
     "worker-farm": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz",
diff --git a/package.json b/package.json
index bc86e17a..c0a6a53b 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
     "mini-css-extract-plugin": "^0.3.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
-    "preload-webpack-plugin": "^3.0.0-alpha.3",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",
@@ -75,8 +74,7 @@
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "^2.0.13",
     "webpack-dev-server": "^3.1.1",
-    "webpack-plugin-replace": "^1.1.1",
-    "workbox-webpack-plugin": "^3.0.1"
+    "webpack-plugin-replace": "^1.1.1"
   },
   "dependencies": {
     "classnames": "^2.2.5",
diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 2dfd34be..a41b8e20 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -1,41 +1,16 @@
 import { h, Component } from 'preact';
-import { When, bind } from '../../lib/util';
-import Fab from '../fab';
-import Header from '../header';
-// import Drawer from 'async!../drawer';
-const Drawer = require('async!../drawer').default;
-import Home from '../home';
+import { bind } from '../../lib/util';
 import * as style from './style.scss';
+import Output from '../output';
 
-type Props = {
-  url?: string
-};
-
-export type FileObj = {
-  id: number,
-  data?: string,
-  uri?: string,
-  error?: Error | DOMError | String,
-  file: File,
-  loading: boolean
-};
+type Props = {};
 
 type State = {
-  showDrawer: boolean,
-  showFab: boolean,
-  files: FileObj[]
+  img?: ImageBitmap
 };
 
-let idCounter = 0;
-
 export default class App extends Component<Props, State> {
-  state: State = {
-    showDrawer: false,
-    showFab: true,
-    files: []
-  };
-
-  enableDrawer = false;
+  state: State = {};
 
   constructor() {
     super();
@@ -49,87 +24,25 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  openDrawer() {
-    this.setState({ showDrawer: true });
-  }
-  @bind
-  closeDrawer() {
-    this.setState({ showDrawer: false });
-  }
-  @bind
-  toggleDrawer() {
-    this.setState({ showDrawer: !this.state.showDrawer });
+  async onFileChange(event: Event) {
+    const fileInput = event.target as HTMLInputElement;
+    if (!fileInput.files || !fileInput.files[0]) return;
+    // TODO: handle decode error
+    const img = await createImageBitmap(fileInput.files[0]);
+    this.setState({ img });
   }
 
-  @bind
-  openFab() {
-    this.setState({ showFab: true });
-  }
-  @bind
-  closeFab() {
-    this.setState({ showFab: false });
-  }
-  @bind
-  toggleFab() {
-    this.setState({ showFab: !this.state.showFab });
-  }
-
-  @bind
-  loadFile(file: File) {
-    let fileObj: FileObj = {
-      id: ++idCounter,
-      file,
-      error: undefined,
-      loading: true,
-      data: undefined
-    };
-
-    this.setState({
-      files: [fileObj]
-    });
-
-    Promise.all([
-      new Response(file).text(),
-      new Response(file).blob()
-    ])
-      .then(([data, blob]) => ({
-        data,
-        uri: URL.createObjectURL(blob)
-      }))
-      .catch(error => ({ error }))
-      .then(state => {
-        let files = this.state.files.slice();
-        files[files.indexOf(fileObj)] = Object.assign({}, fileObj, {
-          loading: false,
-          ...state
-        });
-        this.setState({ files });
-      });
-  }
-
-  render({ url }: Props, { showDrawer, showFab, files }: State) {
-    if (showDrawer) this.enableDrawer = true;
-
-    if (showFab) showFab = files.length > 0;
-
+  render({ }: Props, { img }: State) {
     return (
       <div id="app" class={style.app}>
-        <Fab showing={showFab} />
-
-        <Header class={style.header} onToggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
-
-        {/* Avoid loading & rendering the drawer until the first time it is shown. */}
-        <When value={showDrawer}>
-          <Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
-        </When>
-
-        {/*
-          Note: this is normally where a <Router> with auto code-splitting goes.
-          Since we don't seem to need one (yet?), it's omitted.
-        */}
-        <div class={style.content}>
-          <Home files={files} />
-        </div>
+        {img ?
+          <Output img={img} />
+          :
+          <div>
+            <h1>Select an image</h1>
+            <input type="file" onChange={this.onFileChange} />
+          </div>
+        }
       </div>
     );
   }
diff --git a/src/components/app/style.scss b/src/components/app/style.scss
index e3c6e10b..d21e3038 100644
--- a/src/components/app/style.scss
+++ b/src/components/app/style.scss
@@ -1,25 +1,3 @@
-@import '~style/helpers.scss';
-
-.app {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  overflow: hidden;
-  z-index: 1;
-
-  .header {
-    flex: 0 0 auto;
-    position: relative;
-  }
-
-  .content {
-    flex: 1 1 auto;
-    contain: size layout style;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+.app h1 {
+  color: green;
 }
diff --git a/src/components/app/style.scss.d.ts b/src/components/app/style.scss.d.ts
deleted file mode 100644
index 44bf86f2..00000000
--- a/src/components/app/style.scss.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const app: string;
-export const header: string;
-export const content: string;
diff --git a/src/components/drawer/index.tsx b/src/components/drawer/index.tsx
deleted file mode 100644
index d58ee657..00000000
--- a/src/components/drawer/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { h, Component } from 'preact';
-import MdlDrawer from 'preact-material-components-drawer';
-import 'preact-material-components/Drawer/style.css';
-import List from 'preact-material-components/List';
-// import 'preact-material-components/List/style.css';
-import { Text } from 'preact-i18n';
-import * as style from './style.scss';
-import { bind } from '../../lib/util';
-
-type Props = {
-  showing: boolean,
-  openDrawer(): void,
-  closeDrawer(): void
-};
-
-type State = {
-  rendered: boolean
-};
-
-export default class Drawer extends Component<Props, State> {
-  state: State = {
-    rendered: false
-  };
-
-  @bind
-  setRendered() {
-    this.setState({ rendered: true });
-  }
-
-  render({ showing, openDrawer, closeDrawer }: Props, { rendered }: State) {
-    if (showing && !rendered) {
-      setTimeout(this.setRendered, 20);
-      showing = false;
-    }
-
-    return (
-      <MdlDrawer open={showing} onOpen={openDrawer} onClose={closeDrawer}>
-        <MdlDrawer.Header class="mdc-theme--primary-bg">
-          <img class={style.logo} alt="logo" src="/assets/icon.png" />
-        </MdlDrawer.Header>
-        <MdlDrawer.Content>
-          <List>
-            <List.LinkItem href="/">
-              <List.ItemIcon>verified_user</List.ItemIcon>
-              <Text id="SIGN_IN">Sign In</Text>
-            </List.LinkItem>
-            <List.LinkItem href="/register">
-              <List.ItemIcon>account_circle</List.ItemIcon>
-              <Text id="REGISTER">Register</Text>
-            </List.LinkItem>
-          </List>
-        </MdlDrawer.Content>
-
-        <div class={style.bottom}>
-          <List.LinkItem href="/preferences">
-            <List.ItemIcon>settings</List.ItemIcon>
-            <Text id="PREFERENCES">Preferences</Text>
-          </List.LinkItem>
-        </div>
-      </MdlDrawer>
-    );
-  }
-}
diff --git a/src/components/drawer/style.scss b/src/components/drawer/style.scss
deleted file mode 100644
index 41acac3e..00000000
--- a/src/components/drawer/style.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '~style/helpers.scss';
-
-:global {
-  // @import '~preact-material-components/Drawer/style.css';
-  @import '~preact-material-components/List/mdc-list.scss';
-}
-
-.drawer {
-  :global(.mdc-list-item__start-detail) {
-    margin-right: 16px;
-  }
-}
-
-.logo {
-  width: 50%;
-}
-
-.category img {
-  opacity: .6;
-}
-
-.bottom {
-  position: absolute;
-  bottom: 0;
-  bottom: constant(safe-area-inset-bottom);
-  bottom: env(safe-area-inset-bottom);
-  left: 0;
-  width: 100%;
-}
diff --git a/src/components/drawer/style.scss.d.ts b/src/components/drawer/style.scss.d.ts
deleted file mode 100644
index 0cfecb62..00000000
--- a/src/components/drawer/style.scss.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const mdcListItemSecondaryText: string;
-export const mdcListItemGraphic: string;
-export const mdcListItemMeta: string;
-export const mdcListItem: string;
-export const mdcListDivider: string;
-export const mdcListGroup: string;
-export const mdcListGroupSubheader: string;
-export const drawer: string;
-export const logo: string;
-export const category: string;
-export const bottom: string;
-export const mdcRippleFgRadiusIn: string;
-export const mdcRippleFgOpacityIn: string;
-export const mdcRippleFgOpacityOut: string;
diff --git a/src/components/fab/index.tsx b/src/components/fab/index.tsx
deleted file mode 100644
index a43feb27..00000000
--- a/src/components/fab/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/util';
-import Icon from 'preact-material-components/Icon';
-import 'preact-material-components/Icon/style.css';
-import Fab from 'preact-material-components/Fab';
-import RadialProgress from 'material-radial-progress';
-import * as style from './style.scss';
-
-type Props = {
-  showing: boolean
-};
-
-type State = {
-  loading: boolean
-};
-
-export default class AppFab extends Component<Props, State> {
-  state: State = {
-    loading: false
-  };
-
-  @bind
-  setLoading(loading: boolean) {
-    this.setState({ loading });
-  }
-
-  @bind
-  handleClick() {
-    console.log('TODO: Save the file to disk.');
-    this.setState({ loading: true });
-    setTimeout(() => {
-      this.setState({ loading: false });
-    }, 1000);
-  }
-
-  render({ showing }: Props, { loading }: State) {
-    return (
-      <Fab ripple secondary exited={showing === false} class={style.fab} onClick={this.handleClick}>
-        { loading ? (
-          <RadialProgress primary class={style.progress} />
-        ) : (
-          <Icon>file_download</Icon>
-        ) }
-      </Fab>
-    );
-  }
-}
diff --git a/src/components/fab/style.scss b/src/components/fab/style.scss
deleted file mode 100644
index 69e67345..00000000
--- a/src/components/fab/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import '~style/helpers.scss';
-:global {
-  @import '~preact-material-components/Fab/mdc-fab.scss';
-}
-
-.fab {
-  position: fixed;
-  right: 14px;
-  bottom: 14px;
-  z-index: 4;
-  
-  .progress {
-    width: 24px;
-    height: 24px;
-    color: white;
-    --mdc-theme-primary: #fff;
-  }
-}
diff --git a/src/components/fab/style.scss.d.ts b/src/components/fab/style.scss.d.ts
deleted file mode 100644
index 87e220fe..00000000
--- a/src/components/fab/style.scss.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const fab: string;
-export const progress: string;
-export const mdcRippleFgRadiusIn: string;
-export const mdcRippleFgOpacityIn: string;
-export const mdcRippleFgOpacityOut: string;
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
deleted file mode 100644
index f513a16c..00000000
--- a/src/components/header/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { h, Component } from 'preact';
-import Toolbar from 'preact-material-components/Toolbar';
-import cx from 'classnames';
-import * as style from './style.scss';
-import { bind } from '../../lib/util';
-
-type Props = {
-  'class'?: string,
-  showHeader?: boolean,
-  onToggleDrawer?(): void,
-  showFab?(): void,
-  loadFile(f: File): void
-};
-
-type State = {};
-
-export default class Header extends Component<Props, State> {
-  input?: HTMLInputElement;
-
-  @bind
-  setInputRef(c?: Element) {
-    this.input = c as HTMLInputElement;
-  }
-
-  @bind
-  upload() {
-    this.input!.click();
-  }
-
-  @bind
-  handleFiles() {
-    let files = this.input!.files;
-    if (files && files.length) {
-      this.props.loadFile(files[0]);
-    }
-  }
-
-  render({ class: c, onToggleDrawer, showHeader = true, showFab }: Props) {
-    return (
-      <Toolbar fixed class={cx(c, style.toolbar, 'inert', !showHeader && style.minimal)}>
-        <Toolbar.Row>
-          <Toolbar.Title class={style.title}>
-            <Toolbar.Icon title="Upload" ripple onClick={this.upload} id="uploadIcon">file_upload</Toolbar.Icon>
-          </Toolbar.Title>
-          <Toolbar.Section align-end>
-            <Toolbar.Icon ripple onClick={onToggleDrawer}>menu</Toolbar.Icon>
-          </Toolbar.Section>
-        </Toolbar.Row>
-        <input class={style.fileInput} ref={this.setInputRef} type="file" onChange={this.handleFiles} aria-labelledby="uploadIcon" />
-      </Toolbar>
-    );
-  }
-}
diff --git a/src/components/header/style.scss b/src/components/header/style.scss
deleted file mode 100644
index 61bee8ce..00000000
--- a/src/components/header/style.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@import '~style/helpers.scss';
-:global {
-  @import '~preact-material-components/Toolbar/mdc-toolbar.scss';
-}
-
-.toolbar {
-  // height: $toolbar-height;
-
-  &.minimal {
-    display: none;
-    // height: $toolbar-height / 2;
-  }
-
-  // > * {
-  //   min-height: 0;
-  // }
-}
-
-.fileInput {
-  position: absolute;
-  left: 0;
-  top: -999px;
-}
-
-.fab {
-  position: fixed;
-  display: block;
-  right: 14px;
-  bottom: 14px;
-  // z-index: 999;
-  // transform: translateZ(0);
-}
-
-.logo {
-  height: 1em;
-}
-  
-.menu {
-  position: absolute;
-  top: $toolbar-height;
-  right: 5px;
-
-  .menuItem {
-    margin-right: 16px;
-  }
-}
-
-.title {
-  padding: 3px 0 0;
-  font-weight: 300;
-  font-size: 140%;
-}
\ No newline at end of file
diff --git a/src/components/header/style.scss.d.ts b/src/components/header/style.scss.d.ts
deleted file mode 100644
index df66137f..00000000
--- a/src/components/header/style.scss.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const toolbar: string;
-export const minimal: string;
-export const fileInput: string;
-export const fab: string;
-export const logo: string;
-export const menu: string;
-export const menuItem: string;
-export const title: string;
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
deleted file mode 100644
index ad96ad84..00000000
--- a/src/components/home/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { h, Component } from 'preact';
-// import Button from 'preact-material-components/Button';
-// import Switch from 'preact-material-components/Switch';
-// import 'preact-material-components/Switch/style.css';
-import * as style from './style.scss';
-import { FileObj } from '../app';
-
-type Props = {
-  files: FileObj[]
-};
-
-type State = {
-  active: boolean
-};
-
-export default class Home extends Component<Props, State> {
-  state: State = {
-    active: false
-  };
-
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ active: true });
-    });
-  }
-
-  render({ files }: Props, { active }: State) {
-    return (
-      <div class={style.home}>
-        { files && files[0] && (
-          <img src={files[0].uri} class={style.image} />
-        ) || (
-          <div class={style.content}>
-            <h1>Squoosh</h1>
-            <p>Test home content</p>
-          </div>
-        ) }
-      </div>
-    );
-  }
-}
diff --git a/src/components/home/style.scss b/src/components/home/style.scss
deleted file mode 100644
index 2abb508c..00000000
--- a/src/components/home/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '~style/helpers.scss';
-
-// :global {
-//   @import '~preact-material-components/Button/mdc-button.scss';
-//   // @import '~preact-material-components/Switch/mdc-switch.scss';
-// }
-
-.home {
-  padding: 20px;
-}
-
-.image {
-  width: 100%;
-}
-
-.content {
-  max-width: 600px;
-  margin: 50px auto 0;
-  font-size: 120%;
-  text-align: center;
-}
diff --git a/src/components/home/style.scss.d.ts b/src/components/home/style.scss.d.ts
deleted file mode 100644
index 406166b6..00000000
--- a/src/components/home/style.scss.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const home: string;
-export const image: string;
-export const content: string;
diff --git a/src/components/output/index.tsx b/src/components/output/index.tsx
new file mode 100644
index 00000000..2603e103
--- /dev/null
+++ b/src/components/output/index.tsx
@@ -0,0 +1,44 @@
+import { h, Component } from 'preact';
+// This isn't working.
+// https://github.com/GoogleChromeLabs/squoosh/issues/14
+import * as style from './style.scss';
+
+type Props = {
+  img: ImageBitmap
+};
+
+type State = {};
+
+export default class App extends Component<Props, State> {
+  state: State = {};
+  canvas?: HTMLCanvasElement;
+
+  constructor() {
+    super();
+  }
+
+  updateCanvas(img: ImageBitmap) {
+    if (!this.canvas) return;
+    const ctx = this.canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    ctx.drawImage(img, 0, 0);
+  }
+
+  componentDidMount() {
+    this.updateCanvas(this.props.img);
+  }
+
+  componentDidUpdate({ img }: Props) {
+    if (img !== this.props.img) this.updateCanvas(this.props.img);
+  }
+
+  render({ img }: Props, { }: State) {
+    return (
+      <div>
+        <canvas ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
+        <p>And that's all the app does so far!</p>
+      </div>
+    );
+  }
+}
diff --git a/src/components/output/style.scss b/src/components/output/style.scss
new file mode 100644
index 00000000..d21e3038
--- /dev/null
+++ b/src/components/output/style.scss
@@ -0,0 +1,3 @@
+.app h1 {
+  color: green;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 9bfb15cb..70aaaa43 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -20,13 +20,4 @@ if (process.env.NODE_ENV === 'development') {
       root = render(<App />, document.body, root);
     });
   });
-} else if ('serviceWorker' in navigator && location.protocol === 'https:') {
-  addEventListener('load', () => {
-    navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js');
-  });
 }
-
-/** @todo Async SSR if we need it */
-// export default async () => {
-//   // render here, then resolve to a string of HTML (or null to serialize the document)
-// }
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 941a5222..3ceadea5 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -1,26 +1,3 @@
-import { Component, ComponentProps } from 'preact';
-
-type WhenProps = ComponentProps<When> & {
-  value: boolean,
-  children?: (JSX.Element | (() => JSX.Element))[]
-};
-
-type WhenState = {
-  ready: boolean
-};
-
-export class When extends Component<WhenProps, WhenState> {
-  state: WhenState = {
-    ready: !!this.props.value
-  };
-
-  render({ value, children = [] }: WhenProps, { ready }: WhenState) {
-    let child = children[0];
-    if (value && !ready) this.setState({ ready: true });
-    return ready ? (typeof child === 'function' ? child() : child) : null;
-  }
-}
-
 /**
  * A decorator that binds values to their class instance.
  * @example
diff --git a/src/style/helpers.scss b/src/style/helpers.scss
deleted file mode 100644
index 5da0af28..00000000
--- a/src/style/helpers.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$toolbar-height: 56px;
-
-$mdc-theme-primary: #263238;
-$mdc-theme-primary-light: #4f5b62;
-$mdc-theme-primary-dark: #000a12;
-$mdc-theme-secondary: #d81b60;
-$mdc-theme-secondary-light: #ff5c8d;
-$mdc-theme-secondary-dark: #a00037;
-$mdc-theme-secondary-dark: #a00037;
-$mdc-theme-background: #fff;
diff --git a/src/style/index.scss b/src/style/index.scss
index 953b2cb4..c9d5b0cf 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,7 +1,4 @@
-// @import 'material-components-web/material-components-web';
-@import './material-icons.scss';
 @import './reset.scss';
-// @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 html, body {
   height: 100%;
@@ -11,17 +8,3 @@ html, body {
   overflow: hidden;
   overscroll-behavior: none;
 }
-
-html {
-  background: #FAFAFA;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  color: #444;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.mdc-theme--dark {
-  background-color: #333;
-  color: #fff;
-}
\ No newline at end of file
diff --git a/src/style/material-icons.scss b/src/style/material-icons.scss
deleted file mode 100644
index 8847a837..00000000
--- a/src/style/material-icons.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  // @todo woff fallback!
-  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
diff --git a/webpack.config.js b/webpack.config.js
index db9dd181..341295c2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,10 +8,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
 const ScriptExtHtmlPlugin = require('script-ext-html-webpack-plugin');
-const PreloadPlugin = require('preload-webpack-plugin');
 const ReplacePlugin = require('webpack-plugin-replace');
 const CopyPlugin = require('copy-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
 const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -23,8 +21,7 @@ module.exports = function (_, env) {
   const isProd = env.mode === 'production';
   const nodeModules = path.join(__dirname, 'node_modules');
   const componentStyleDirs = [
-    path.join(__dirname, 'src/components'),
-    path.join(__dirname, 'src/routes')
+    path.join(__dirname, 'src/components')
   ];
 
   return {
@@ -64,7 +61,7 @@ module.exports = function (_, env) {
         },
         {
           test: /\.(scss|sass|css)$/,
-          // Only enable CSS Modules within `src/{components,routes}/*`
+          // Only enable CSS Modules within `src/components/*`
           include: componentStyleDirs,
           use: [
             // In production, CSS is extracted to files on disk. In development, it's inlined into JS:
@@ -87,7 +84,7 @@ module.exports = function (_, env) {
         },
         {
           test: /\.(scss|sass|css)$/,
-          // Process non-modular CSS everywhere *except* `src/{components,routes}/*`
+          // Process non-modular CSS everywhere *except* `src/components/*`
           exclude: componentStyleDirs,
           use: [
             isProd ? MiniCssExtractPlugin.loader : 'style-loader',
@@ -181,11 +178,6 @@ module.exports = function (_, env) {
         defaultAttribute: 'async'
       }),
 
-      // Inject <link rel="preload"> for resources
-      isProd && new PreloadPlugin({
-        include: 'initial'
-      }),
-
       // Inline constants during build, so they can be folded by UglifyJS.
       new webpack.DefinePlugin({
         // We set node.process=false later in this config.
@@ -215,22 +207,6 @@ module.exports = function (_, env) {
         analyzerMode: 'static',
         defaultSizes: 'gzip',
         openAnalyzer: false
-      }),
-
-      // Generate a ServiceWorker using Workbox.
-      isProd && new WorkboxPlugin.GenerateSW({
-        swDest: 'sw.js',
-        clientsClaim: true,
-        skipWaiting: true,
-        exclude: [
-          'report.html',
-          'manifest.json',
-          /(report\.html|manifest\.json|\.precache-manifest\..*\.json)$/,
-          /\.(?:map|pem|DS_Store)$/
-        ],
-        // allow for offline client-side routing:
-        navigateFallback: '/',
-        navigateFallbackBlacklist: [/\.[a-z0-9]+$/i]
       })
     ].filter(Boolean), // Filter out any falsey plugin array entries.
 
@@ -280,8 +256,6 @@ module.exports = function (_, env) {
       compress: true,
       // Request paths not ending in a file extension serve index.html:
       historyApiFallback: true,
-      // Don't output server address info to console on startup:
-      noInfo: true,
       // Suppress forwarding of Webpack logs to the browser console:
       clientLogLevel: 'none',
       // Supress the extensive stats normally printed after a dev build (since sizes are mostly useless):

From 444e59c69c2bdb1ddcf1e10a5deb7dc1f9e38615 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 4 May 2018 20:03:57 +0100
Subject: [PATCH 08/10] Merging pinch-zoom (#27)

* Merging pinch-zoom

* Pixelated output
---
 .../output/custom-els/PinchZoom/index.ts      | 298 ++++++++++++++++++
 .../custom-els/PinchZoom/missing-types.d.ts   |  16 +
 .../output/custom-els/PinchZoom/styles.css    |  14 +
 src/components/output/index.tsx               |   7 +-
 src/components/output/style.scss              |   4 +-
 src/lib/PointerTracker/index.ts               | 237 ++++++++++++++
 src/lib/PointerTracker/missing-types.d.ts     |   6 +
 7 files changed, 577 insertions(+), 5 deletions(-)
 create mode 100644 src/components/output/custom-els/PinchZoom/index.ts
 create mode 100644 src/components/output/custom-els/PinchZoom/missing-types.d.ts
 create mode 100644 src/components/output/custom-els/PinchZoom/styles.css
 create mode 100644 src/lib/PointerTracker/index.ts
 create mode 100644 src/lib/PointerTracker/missing-types.d.ts

diff --git a/src/components/output/custom-els/PinchZoom/index.ts b/src/components/output/custom-els/PinchZoom/index.ts
new file mode 100644
index 00000000..f9259b19
--- /dev/null
+++ b/src/components/output/custom-els/PinchZoom/index.ts
@@ -0,0 +1,298 @@
+import './styles.css';
+import { PointerTracker, Pointer } from '../../../../lib/PointerTracker';
+
+interface Point {
+  clientX: number;
+  clientY: number;
+}
+
+interface ApplyChangeOpts {
+  panX?: number;
+  panY?: number;
+  scaleDiff?: number;
+  originX?: number;
+  originY?: number;
+}
+
+interface SetTransformOpts {
+  scale?: number;
+  x?: number;
+  y?: number;
+  /**
+   * Fire a 'change' event if values are different to current values
+   */
+  allowChangeEvent?: boolean;
+}
+
+function getDistance (a: Point, b?: Point): number {
+  if (!b) return 0;
+  return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
+}
+
+function getMidpoint (a: Point, b?: Point): Point {
+  if (!b) return a;
+
+  return {
+    clientX: (a.clientX + b.clientX) / 2,
+    clientY: (a.clientY + b.clientY) / 2
+  };
+}
+
+// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
+// Given that, better to use something everything supports.
+let cachedSvg: SVGSVGElement;
+
+function getSVG (): SVGSVGElement {
+  return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
+}
+
+function createMatrix (): SVGMatrix {
+  return getSVG().createSVGMatrix();
+}
+
+function createPoint (): SVGPoint {
+  return getSVG().createSVGPoint();
+}
+
+export default class PinchZoom extends HTMLElement {
+  // The element that we'll transform.
+  // Ideally this would be shadow DOM, but we don't have the browser
+  // support yet.
+  private _positioningEl?: Element;
+  // Current transform.
+  private _transform: SVGMatrix = createMatrix();
+
+  constructor () {
+    super();
+
+    // Watch for children changes.
+    // Note this won't fire for initial contents,
+    // so _stageElChange is also called in connectedCallback.
+    new MutationObserver(() => this._stageElChange())
+      .observe(this, { childList: true });
+
+    // Watch for pointers
+    const pointerTracker: PointerTracker = new PointerTracker(this, {
+      start: (pointer, event) => {
+        // We only want to track 2 pointers at most
+        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl) return false;
+        event.preventDefault();
+        return true;
+      },
+      move: previousPointers => {
+        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
+      }
+    });
+
+    this.addEventListener('wheel', event => this._onWheel(event));
+  }
+
+  connectedCallback () {
+    this._stageElChange();
+  }
+
+  get x () {
+    return this._transform.e;
+  }
+
+  get y () {
+    return this._transform.f;
+  }
+
+  get scale () {
+    return this._transform.a;
+  }
+
+  /**
+   * Update the stage with a given scale/x/y.
+   */
+  setTransform (opts: SetTransformOpts = {}) {
+    const {
+      scale = this.scale,
+      allowChangeEvent = false
+    } = opts;
+
+    let {
+      x = this.x,
+      y = this.y
+    } = opts;
+
+    // If we don't have an element to position, just set the value as given.
+    // We'll check bounds later.
+    if (!this._positioningEl) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Get current layout
+    const thisBounds = this.getBoundingClientRect();
+    const positioningElBounds = this._positioningEl.getBoundingClientRect();
+
+    // Not displayed. May be disconnected or display:none.
+    // Just take the values, and we'll check bounds later.
+    if (!thisBounds.width || !thisBounds.height) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Create points for _positioningEl.
+    let topLeft = createPoint();
+    topLeft.x = positioningElBounds.left - thisBounds.left;
+    topLeft.y = positioningElBounds.top - thisBounds.top;
+    let bottomRight = createPoint();
+    bottomRight.x = positioningElBounds.width + topLeft.x;
+    bottomRight.y = positioningElBounds.height + topLeft.y;
+
+    // Calculate the intended position of _positioningEl.
+    let matrix = createMatrix()
+      .translate(x, y)
+      .scale(scale)
+      // Undo current transform
+      .multiply(this._transform.inverse());
+
+    topLeft = topLeft.matrixTransform(matrix);
+    bottomRight = bottomRight.matrixTransform(matrix);
+
+    // Ensure _positioningEl can't move beyond out-of-bounds.
+    // Correct for x
+    if (topLeft.x > thisBounds.width) {
+      x += thisBounds.width - topLeft.x;
+    } else if (bottomRight.x < 0) {
+      x += -bottomRight.x;
+    }
+
+    // Correct for y
+    if (topLeft.y > thisBounds.height) {
+      y += thisBounds.height - topLeft.y;
+    } else if (bottomRight.y < 0) {
+      y += -bottomRight.y;
+    }
+
+    this._updateTransform(scale, x, y, allowChangeEvent);
+  }
+
+  /**
+   * Update transform values without checking bounds. This is only called in setTransform.
+   */
+  _updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
+    // Return if there's no change
+    if (
+      scale === this.scale &&
+      x === this.x &&
+      y === this.y
+    ) return;
+
+    this._transform.e = x;
+    this._transform.f = y;
+    this._transform.d = this._transform.a = scale;
+
+    this.style.setProperty('--x', this.x + 'px');
+    this.style.setProperty('--y', this.y + 'px');
+    this.style.setProperty('--scale', this.scale + '');
+
+    if (allowChangeEvent) {
+      const event = new Event('change', { bubbles: true });
+      this.dispatchEvent(event);
+    }
+  }
+
+  /**
+   * Called when the direct children of this element change.
+   * Until we have have shadow dom support across the board, we
+   * require a single element to be the child of <pinch-zoom>, and
+   * that's the element we pan/scale.
+   */
+  private _stageElChange () {
+    this._positioningEl = undefined;
+
+    if (this.children.length === 0) {
+      console.warn('There should be at least one child in <pinch-zoom>.');
+      return;
+    }
+
+    this._positioningEl = this.children[0];
+
+    if (this.children.length > 1) {
+      console.warn('<pinch-zoom> must not have more than one child.');
+    }
+
+    // Do a bounds check
+    this.setTransform();
+  }
+
+  private _onWheel (event: WheelEvent) {
+    event.preventDefault();
+
+    const thisRect = this.getBoundingClientRect();
+    let { deltaY } = event;
+    const { ctrlKey, deltaMode } = event;
+
+    if (deltaMode === 1) { // 1 is "lines", 0 is "pixels"
+      // Firefox uses "lines" for some types of mouse
+      deltaY *= 15;
+    }
+
+    // ctrlKey is true when pinch-zooming on a trackpad.
+    const divisor = ctrlKey ? 100 : 300;
+    const scaleDiff = 1 - deltaY / divisor;
+
+    this._applyChange({
+      scaleDiff,
+      originX: event.clientX - thisRect.left,
+      originY: event.clientY - thisRect.top
+    });
+  }
+
+  private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
+    // Combine next points with previous points
+    const thisRect = this.getBoundingClientRect();
+
+    // For calculating panning movement
+    const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
+    const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
+
+    // Midpoint within the element
+    const originX = prevMidpoint.clientX - thisRect.left;
+    const originY = prevMidpoint.clientY - thisRect.top;
+
+    // Calculate the desired change in scale
+    const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
+    const newDistance = getDistance(currentPointers[0], currentPointers[1]);
+    const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
+
+    this._applyChange({
+      originX, originY, scaleDiff,
+      panX: newMidpoint.clientX - prevMidpoint.clientX,
+      panY: newMidpoint.clientY - prevMidpoint.clientY
+    });
+  }
+
+  /** Transform the view & fire a change event */
+  private _applyChange (opts: ApplyChangeOpts = {}) {
+    const {
+      panX = 0, panY = 0,
+      originX = 0, originY = 0,
+      scaleDiff = 1
+    } = opts;
+
+    const matrix = createMatrix()
+      // Translate according to panning.
+      .translate(panX, panY)
+      // Scale about the origin.
+      .translate(originX, originY)
+      .scale(scaleDiff)
+      .translate(-originX, -originY)
+      // Apply current transform.
+      .multiply(this._transform);
+
+    // Convert the transform into basic translate & scale.
+    this.setTransform({
+      scale: matrix.a,
+      x: matrix.e,
+      y: matrix.f,
+      allowChangeEvent: true
+    });
+  }
+}
+
+customElements.define('pinch-zoom', PinchZoom);
diff --git a/src/components/output/custom-els/PinchZoom/missing-types.d.ts b/src/components/output/custom-els/PinchZoom/missing-types.d.ts
new file mode 100644
index 00000000..3fe15aba
--- /dev/null
+++ b/src/components/output/custom-els/PinchZoom/missing-types.d.ts
@@ -0,0 +1,16 @@
+declare interface CSSStyleDeclaration {
+  willChange: string | null;
+}
+
+// TypeScript, you make me sad.
+// https://github.com/Microsoft/TypeScript/issues/18756
+interface Window {
+  PointerEvent: typeof PointerEvent;
+  Touch: typeof Touch;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    "pinch-zoom": any
+  }
+}
diff --git a/src/components/output/custom-els/PinchZoom/styles.css b/src/components/output/custom-els/PinchZoom/styles.css
new file mode 100644
index 00000000..83668f17
--- /dev/null
+++ b/src/components/output/custom-els/PinchZoom/styles.css
@@ -0,0 +1,14 @@
+pinch-zoom {
+  display: block;
+  overflow: hidden;
+  touch-action: none;
+  --scale: 1;
+  --x: 0;
+  --y: 0;
+}
+
+pinch-zoom > * {
+  transform: translate(var(--x), var(--y)) scale(var(--scale));
+  transform-origin: 0 0;
+  will-change: transform;
+}
diff --git a/src/components/output/index.tsx b/src/components/output/index.tsx
index 2603e103..9b5bfee0 100644
--- a/src/components/output/index.tsx
+++ b/src/components/output/index.tsx
@@ -1,6 +1,5 @@
 import { h, Component } from 'preact';
-// This isn't working.
-// https://github.com/GoogleChromeLabs/squoosh/issues/14
+import './custom-els/PinchZoom';
 import * as style from './style.scss';
 
 type Props = {
@@ -36,7 +35,9 @@ export default class App extends Component<Props, State> {
   render({ img }: Props, { }: State) {
     return (
       <div>
-        <canvas ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
+        <pinch-zoom>
+          <canvas class={style.outputCanvas} ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
+        </pinch-zoom>
         <p>And that's all the app does so far!</p>
       </div>
     );
diff --git a/src/components/output/style.scss b/src/components/output/style.scss
index d21e3038..0f709a65 100644
--- a/src/components/output/style.scss
+++ b/src/components/output/style.scss
@@ -1,3 +1,3 @@
-.app h1 {
-  color: green;
+.outputCanvas {
+  image-rendering: pixelated;
 }
diff --git a/src/lib/PointerTracker/index.ts b/src/lib/PointerTracker/index.ts
new file mode 100644
index 00000000..c6bbcf89
--- /dev/null
+++ b/src/lib/PointerTracker/index.ts
@@ -0,0 +1,237 @@
+const enum Button { Left }
+
+export class Pointer {
+  /** x offset from the top of the document */
+  pageX: number;
+  /** y offset from the top of the document */
+  pageY: number;
+  /** x offset from the top of the viewport */
+  clientX: number;
+  /** y offset from the top of the viewport */
+  clientY: number;
+  /** ID for this pointer */
+  id: number = -1;
+
+  constructor (nativePointer: Touch | PointerEvent | MouseEvent) {
+    this.pageX = nativePointer.pageX;
+    this.pageY = nativePointer.pageY;
+    this.clientX = nativePointer.clientX;
+    this.clientY = nativePointer.clientY;
+
+    if (self.Touch && nativePointer instanceof Touch) {
+      this.id = nativePointer.identifier;
+    } else if (isPointerEvent(nativePointer)) { // is PointerEvent
+      this.id = nativePointer.pointerId;
+    }
+  }
+}
+
+const isPointerEvent = (event: any): event is PointerEvent =>
+  self.PointerEvent && event instanceof PointerEvent;
+
+const noop = () => {};
+
+type StartCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => boolean);
+type MoveCallback = ((previousPointers: Pointer[], event: TouchEvent | PointerEvent | MouseEvent) => void);
+type EndCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => void);
+
+interface PointerTrackerCallbacks {
+  /**
+   * Called when a pointer is pressed/touched within the element.
+   *
+   * @param pointer The new pointer.
+   * This pointer isn't included in this.currentPointers or this.startPointers yet.
+   * @param event The event related to this pointer.
+   *
+   * @returns Whether you want to track this pointer as it moves.
+   */
+  start?: StartCallback;
+  /**
+   * Called when pointers have moved.
+   *
+   * @param previousPointers The state of the pointers before this event.
+   * This contains the same number of pointers, in the same order, as
+   * this.currentPointers and this.startPointers.
+   * @param event The event related to the pointer changes.
+   */
+  move?: MoveCallback;
+  /**
+   * Called when a pointer is released.
+   *
+   * @param pointer The final state of the pointer that ended. This
+   * pointer is now absent from this.currentPointers and
+   * this.startPointers.
+   * @param event The event related to this pointer.
+   */
+  end?: EndCallback;
+}
+
+/**
+ * Track pointers across a particular element
+ */
+export class PointerTracker {
+  /**
+   * State of the tracked pointers when they were pressed/touched.
+   */
+  readonly startPointers: Pointer[] = [];
+  /**
+   * Latest state of the tracked pointers. Contains the same number
+   * of pointers, and in the same order as this.startPointers.
+   */
+  readonly currentPointers: Pointer[] = [];
+
+  private _startCallback: StartCallback;
+  private _moveCallback: MoveCallback;
+  private _endCallback: EndCallback;
+
+  /**
+   * Track pointers across a particular element
+   *
+   * @param element Element to monitor.
+   * @param callbacks
+   */
+  constructor (private _element: HTMLElement, callbacks: PointerTrackerCallbacks) {
+    const {
+      start = () => true,
+      move = noop,
+      end = noop
+    } = callbacks;
+
+    this._startCallback = start;
+    this._moveCallback = move;
+    this._endCallback = end;
+
+    // Bind listener methods
+    this._pointerStart = this._pointerStart.bind(this);
+    this._touchStart = this._touchStart.bind(this);
+    this._move = this._move.bind(this);
+    this._pointerEnd = this._pointerEnd.bind(this);
+    this._touchEnd = this._touchEnd.bind(this);
+
+    // Add listeners
+    if (self.PointerEvent) {
+      this._element.addEventListener('pointerdown', this._pointerStart);
+    } else {
+      this._element.addEventListener('mousedown', this._pointerStart);
+      this._element.addEventListener('touchstart', this._touchStart);
+      this._element.addEventListener('touchmove', this._move);
+      this._element.addEventListener('touchend', this._touchEnd);
+    }
+  }
+
+  /**
+   * Call the start callback for this pointer, and track it if the user wants.
+   *
+   * @param pointer Pointer
+   * @param event Related event
+   * @returns Whether the pointer is being tracked.
+   */
+  private _triggerPointerStart (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
+    if (!this._startCallback(pointer, event)) return false;
+    this.currentPointers.push(pointer);
+    this.startPointers.push(pointer);
+    return true;
+  }
+
+  /**
+   * Listener for mouse/pointer starts. Bound to the class in the constructor.
+   *
+   * @param event This will only be a MouseEvent if the browser doesn't support
+   * pointer events.
+   */
+  private _pointerStart (event: PointerEvent | MouseEvent) {
+    if (event.button !== Button.Left) return;
+    if (!this._triggerPointerStart(new Pointer(event), event)) return;
+
+    // Add listeners for additional events.
+    // The listeners may already exist, but no harm in adding them again.
+    if (isPointerEvent(event)) {
+      this._element.setPointerCapture(event.pointerId);
+      this._element.addEventListener('pointermove', this._move);
+      this._element.addEventListener('pointerup', this._pointerEnd);
+    } else { // MouseEvent
+      window.addEventListener('mousemove', this._move);
+      window.addEventListener('mouseup', this._pointerEnd);
+    }
+  }
+
+  /**
+   * Listener for touchstart. Bound to the class in the constructor.
+   * Only used if the browser doesn't support pointer events.
+   */
+  private _touchStart (event: TouchEvent) {
+    for (const touch of Array.from(event.changedTouches)) {
+      this._triggerPointerStart(new Pointer(touch), event);
+    }
+  }
+
+  /**
+   * Listener for pointer/mouse/touch move events.
+   * Bound to the class in the constructor.
+   */
+  private _move (event: PointerEvent | MouseEvent | TouchEvent) {
+    const previousPointers = this.currentPointers.slice();
+    const changedPointers = ('changedTouches' in event) ? // Shortcut for 'is touch event'.
+      Array.from(event.changedTouches).map(t => new Pointer(t)) :
+      [new Pointer(event)];
+
+    let shouldCallback = false;
+
+    for (const pointer of changedPointers) {
+      const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+      if (index === -1) continue;
+      shouldCallback = true;
+      this.currentPointers[index] = pointer;
+    }
+
+    if (!shouldCallback) return;
+
+    this._moveCallback(previousPointers, event);
+  }
+
+  /**
+   * Call the end callback for this pointer.
+   *
+   * @param pointer Pointer
+   * @param event Related event
+   */
+  private _triggerPointerEnd (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
+    const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+    // Not a pointer we're interested in?
+    if (index === -1) return false;
+
+    this.currentPointers.splice(index, 1);
+    this.startPointers.splice(index, 1);
+
+    this._endCallback(pointer, event);
+    return true;
+  }
+
+  /**
+   * Listener for mouse/pointer ends. Bound to the class in the constructor.
+   * @param event This will only be a MouseEvent if the browser doesn't support
+   * pointer events.
+   */
+  private _pointerEnd (event: PointerEvent | MouseEvent) {
+    if (!this._triggerPointerEnd(new Pointer(event), event)) return;
+
+    if (isPointerEvent(event)) {
+      if (this.currentPointers.length) return;
+      this._element.removeEventListener('pointermove', this._move);
+      this._element.removeEventListener('pointerup', this._pointerEnd);
+    } else { // MouseEvent
+      window.removeEventListener('mousemove', this._move);
+      window.removeEventListener('mouseup', this._pointerEnd);
+    }
+  }
+
+  /**
+   * Listener for touchend. Bound to the class in the constructor.
+   * Only used if the browser doesn't support pointer events.
+   */
+  private _touchEnd (event: TouchEvent) {
+    for (const touch of Array.from(event.changedTouches)) {
+      this._triggerPointerEnd(new Pointer(touch), event);
+    }
+  }
+}
diff --git a/src/lib/PointerTracker/missing-types.d.ts b/src/lib/PointerTracker/missing-types.d.ts
new file mode 100644
index 00000000..01844dd3
--- /dev/null
+++ b/src/lib/PointerTracker/missing-types.d.ts
@@ -0,0 +1,6 @@
+// TypeScript, you make me sad.
+// https://github.com/Microsoft/TypeScript/issues/18756
+interface Window {
+  PointerEvent: typeof PointerEvent;
+  Touch: typeof Touch;
+}

From 31db4b9719bddd67b41c56274bc0adf45aad5cfc Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Tue, 15 May 2018 11:49:01 +0100
Subject: [PATCH 09/10] Ignoring TS'd CSS

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index df5e0ec2..94757426 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 /build
 /*.log
 *.scss.d.ts
+*.css.d.ts

From bcf71f4702e82da5eaba38ed284886d5f11d2f4c Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Tue, 15 May 2018 05:06:04 -0700
Subject: [PATCH 10/10] Using @bind (#29)

---
 src/lib/PointerTracker/index.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/PointerTracker/index.ts b/src/lib/PointerTracker/index.ts
index c6bbcf89..f0ea26a9 100644
--- a/src/lib/PointerTracker/index.ts
+++ b/src/lib/PointerTracker/index.ts
@@ -1,3 +1,4 @@
+import { bind } from '../util';
 const enum Button { Left }
 
 export class Pointer {
@@ -101,13 +102,6 @@ export class PointerTracker {
     this._moveCallback = move;
     this._endCallback = end;
 
-    // Bind listener methods
-    this._pointerStart = this._pointerStart.bind(this);
-    this._touchStart = this._touchStart.bind(this);
-    this._move = this._move.bind(this);
-    this._pointerEnd = this._pointerEnd.bind(this);
-    this._touchEnd = this._touchEnd.bind(this);
-
     // Add listeners
     if (self.PointerEvent) {
       this._element.addEventListener('pointerdown', this._pointerStart);
@@ -139,6 +133,7 @@ export class PointerTracker {
    * @param event This will only be a MouseEvent if the browser doesn't support
    * pointer events.
    */
+  @bind
   private _pointerStart (event: PointerEvent | MouseEvent) {
     if (event.button !== Button.Left) return;
     if (!this._triggerPointerStart(new Pointer(event), event)) return;
@@ -159,6 +154,7 @@ export class PointerTracker {
    * Listener for touchstart. Bound to the class in the constructor.
    * Only used if the browser doesn't support pointer events.
    */
+  @bind
   private _touchStart (event: TouchEvent) {
     for (const touch of Array.from(event.changedTouches)) {
       this._triggerPointerStart(new Pointer(touch), event);
@@ -169,6 +165,7 @@ export class PointerTracker {
    * Listener for pointer/mouse/touch move events.
    * Bound to the class in the constructor.
    */
+  @bind
   private _move (event: PointerEvent | MouseEvent | TouchEvent) {
     const previousPointers = this.currentPointers.slice();
     const changedPointers = ('changedTouches' in event) ? // Shortcut for 'is touch event'.
@@ -195,6 +192,7 @@ export class PointerTracker {
    * @param pointer Pointer
    * @param event Related event
    */
+  @bind
   private _triggerPointerEnd (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
     const index = this.currentPointers.findIndex(p => p.id === pointer.id);
     // Not a pointer we're interested in?
@@ -212,6 +210,7 @@ export class PointerTracker {
    * @param event This will only be a MouseEvent if the browser doesn't support
    * pointer events.
    */
+  @bind
   private _pointerEnd (event: PointerEvent | MouseEvent) {
     if (!this._triggerPointerEnd(new Pointer(event), event)) return;
 
@@ -229,6 +228,7 @@ export class PointerTracker {
    * Listener for touchend. Bound to the class in the constructor.
    * Only used if the browser doesn't support pointer events.
    */
+  @bind
   private _touchEnd (event: TouchEvent) {
     for (const touch of Array.from(event.changedTouches)) {
       this._triggerPointerEnd(new Pointer(touch), event);