Removing everything that isn't skeletonyy (#22)

* Simplifying

* Ignoring CSS defs

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 /build
-/*.log
+/*.log
+*.scss.d.ts

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",

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",
+    "webpack-plugin-replace": "^1.1.1"
-    "workbox-webpack-plugin": "^3.0.1"
   },
   "dependencies": {
     "classnames": "^2.2.5",

src/components/app/index.tsx

@@ -1,41 +1,16 @@
 import { h, Component } from 'preact';
-import { When, bind } from '../../lib/util';
+import { 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 * as style from './style.scss';
+import Output from '../output';
 
-type Props = {
+type Props = {};
-  url?: string
-};
-
-export type FileObj = {
-  id: number,
-  data?: string,
-  uri?: string,
-  error?: Error | DOMError | String,
-  file: File,
-  loading: boolean
-};
 
 type State = {
-  showDrawer: boolean,
+  img?: ImageBitmap
-  showFab: boolean,
-  files: FileObj[]
 };
 
-let idCounter = 0;
-
 export default class App extends Component<Props, State> {
-  state: State = {
+  state: State = {};
-    showDrawer: false,
-    showFab: true,
-    files: []
-  };
-
-  enableDrawer = false;
 
   constructor() {
     super();
@@ -49,87 +24,25 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  openDrawer() {
+  async onFileChange(event: Event) {
-    this.setState({ showDrawer: true });
+    const fileInput = event.target as HTMLInputElement;
-  }
+    if (!fileInput.files || !fileInput.files[0]) return;
-  @bind
+    // TODO: handle decode error
-  closeDrawer() {
+    const img = await createImageBitmap(fileInput.files[0]);
-    this.setState({ showDrawer: false });
+    this.setState({ img });
-  }
-  @bind
-  toggleDrawer() {
-    this.setState({ showDrawer: !this.state.showDrawer });
   }
 
-  @bind
+  render({ }: Props, { img }: State) {
-  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;
-
     return (
       <div id="app" class={style.app}>
-        <Fab showing={showFab} />
+        {img ?
-
+          <Output img={img} />
-        <Header class={style.header} onToggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
+          :
-
+          <div>
-        {/* Avoid loading & rendering the drawer until the first time it is shown. */}
+            <h1>Select an image</h1>
-        <When value={showDrawer}>
+            <input type="file" onChange={this.onFileChange} />
-          <Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
+          </div>
-        </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>
       </div>
     );
   }

src/components/app/style.scss

@@ -1,25 +1,3 @@
-@import '~style/helpers.scss';
+.app h1 {
-
+  color: green;
-.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;
-  }
 }

src/components/app/style.scss.d.ts

@@ -1,3 +0,0 @@
-export const app: string;
-export const header: string;
-export const content: string;

src/components/drawer/index.tsx

@@ -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>
-    );
-  }
-}

src/components/drawer/style.scss

@@ -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%;
-}

src/components/drawer/style.scss.d.ts

@@ -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;

src/components/fab/index.tsx

@@ -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>
-    );
-  }
-}

src/components/fab/style.scss

@@ -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;
-  }
-}

src/components/fab/style.scss.d.ts

@@ -1,5 +0,0 @@
-export const fab: string;
-export const progress: string;
-export const mdcRippleFgRadiusIn: string;
-export const mdcRippleFgOpacityIn: string;
-export const mdcRippleFgOpacityOut: string;

src/components/header/index.tsx

@@ -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>
-    );
-  }
-}

src/components/header/style.scss

@@ -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%;
-}

src/components/header/style.scss.d.ts

@@ -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;

src/components/home/index.tsx

@@ -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>
-    );
-  }
-}

src/components/home/style.scss

@@ -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;
-}

src/components/home/style.scss.d.ts

@@ -1,3 +0,0 @@
-export const home: string;
-export const image: string;
-export const content: string;

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>
+    );
+  }
+}

src/components/output/style.scss

@@ -0,0 +1,3 @@
+.app h1 {
+  color: green;
+}

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)
-// }

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

src/style/helpers.scss

@@ -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;

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;
-}

src/style/material-icons.scss

@@ -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;
-}

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/components')
-    path.join(__dirname, 'src/routes')
   ];
 
   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):