Merge pull request #1 from GoogleChromeLabs/app-skeleton

App skeleton
2018-04-17 13:46:16 -04:00
parent dc54b80ff9 fbcd16063d
commit b911e960a8
40 changed files with 17096 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,33 @@
+{
+	"presets": [
+		[
+			"env",
+			{
+				"loose": true,
+				"uglify": true,
+				"modules": false,
+				"targets": {
+					"browsers": "last 2 versions"
+				},
+				"exclude": [
+					"transform-regenerator",
+					"transform-es2015-typeof-symbol"
+				]
+			}
+		]
+	],
+	"plugins": [
+		"syntax-dynamic-import",
+		"transform-decorators-legacy",
+		"transform-class-properties",
+		"transform-object-rest-spread",
+		"transform-react-constant-elements",
+		"transform-react-remove-prop-types",
+		[
+			"transform-react-jsx",
+			{
+				"pragma": "h"
+			}
+		]
+	]
+}
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+/build
+/*.log
--- a/config/async-component-loader.js
+++ b/config/async-component-loader.js
@@ -0,0 +1,29 @@
+let loaderUtils = require('loader-utils');
+let componentPath = require.resolve('./async-component');
+
+module.exports = function () { };
+module.exports.pitch = function (remainingRequest) {
+  this.cacheable && this.cacheable();
+  let query = loaderUtils.getOptions(this) || {};
+  let routeName = typeof query.name === 'function' ? query.name(this.resourcePath) : null;
+  let name;
+  if (routeName !== null) {
+    name = routeName;
+  }
+  else if ('name' in query) {
+    name = query.name;
+  }
+  else if ('formatName' in query) {
+    name = query.formatName(this.resourcePath);
+  }
+
+  return `
+    import async from ${JSON.stringify(componentPath)};
+    function load(cb) {
+      require.ensure([], function (require) {
+        cb( require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)}) );
+      }${name ? (', ' + JSON.stringify(name)) : ''});
+    }
+    export default async(load);
+  `;
+};
--- a/config/async-component.js
+++ b/config/async-component.js
@@ -0,0 +1,30 @@
+import { h, Component } from 'preact';
+
+export default function (req) {
+  function Async() {
+    Component.call(this);
+
+    let b, old;
+    this.componentWillMount = () => {
+      b = this.base = this.nextBase || this.__b; // short circuits 1st render
+      req(m => {
+        this.setState({ child: m.default || m });
+      });
+    };
+
+    this.shouldComponentUpdate = (_, nxt) => {
+      nxt = nxt.child === void 0;
+      if (nxt && old === void 0 && !!b) {
+        old = h(b.nodeName, { dangerouslySetInnerHTML: { __html: b.innerHTML } });
+      }
+      else {
+        old = ''; // dump it
+      }
+      return !nxt;
+    };
+
+    this.render = (p, s) => s.child ? h(s.child, p) : old;
+  }
+  (Async.prototype = new Component()).constructor = Async;
+  return Async;
+}
--- a/config/prerender-loader.js
+++ b/config/prerender-loader.js
@@ -0,0 +1,64 @@
+const path = require('path');
+const vm = require('vm');
+
+module.exports = function (content) {
+  const jsdom = require('jsdom');
+  const preact = require('preact');
+  const renderToString = require('preact-render-to-string');
+
+  this.cacheable && this.cacheable();
+
+  const callback = this.async();
+
+  // const dom = new jsdom.JSDOM(`<!DOCTYPE html><html><head></head><body></body></html>`, {
+  const dom = new jsdom.JSDOM(content, {
+    includeNodeLocations: false,
+    runScripts: 'outside-only'
+  });
+  const { window } = dom;
+  const { document } = window;
+
+  // console.log(content);
+
+  const root = document.getElementById('app');
+  this.loadModule(path.join(__dirname, 'client-boot.js'), (err, source) => {
+    if (err) return callback(err);
+
+    console.log(source);
+
+    let mod = eval(source);
+    let props = {};
+    // console.log(mod);
+    let vnode = preact.createElement(mod, props);
+    let frag = document.createElement('div');
+    frag.innerHTML = renderToString(vnode);
+    root.parentNode.replaceChild(frag.firstChild, root);
+
+    let html = dom.serialize();
+    callback(null, html);
+    // return html = `module.exports = ${JSON.stringify(html)}`;
+    // return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
+  });
+
+  // global.window = global;
+  // global.document = {};
+  // return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
+
+  /*
+  let callback = this.async();
+
+  let parts = content.split(/\{\{prerender\}\}/gi);
+
+  if (parts.length<2) {
+    // callback(null, `module.exports = ${JSON.stringify(content)}`);
+    callback(null, content);
+    return;
+  }
+
+  // let html = `
+  //   window = {};
+  // module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
+  let html = `module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
+  callback(null, html);
+  */
+};
--- a/config/prerender.js
+++ b/config/prerender.js
@@ -0,0 +1,20 @@
+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;
+};
--- a/config/watch-timestamps-plugin.js
+++ b/config/watch-timestamps-plugin.js
@@ -0,0 +1,30 @@
+const fs = require('fs');
+
+/** A Webpack plugin to refresh file mtime values from disk before compiling.
+ *  This is used in order to account for SCSS-generated .d.ts files written
+ *  as part of compilation so they trigger only a single recompile per write.
+ *
+ *  All credit for the technique and implementation goes to @reiv. See:
+ *  https://github.com/Jimdo/typings-for-css-modules-loader/issues/48#issuecomment-347036461
+ */
+module.exports = class WatchTimestampsPlugin {
+  constructor(patterns) {
+    this.patterns = patterns;
+  }
+
+  apply(compiler) {
+    compiler.hooks.watchRun.tapAsync('watch-timestamps-plugin', (watch, callback) => {
+      const patterns = this.patterns;
+      const timestamps = watch.fileTimestamps;
+
+      for (const filepath of timestamps) {
+        if (patterns.some(pat => pat instanceof RegExp ? pat.test(filepath) : filepath.indexOf(pat) === 0)) {
+          let time = fs.statSync(filepath).mtime;
+          if (timestamps instanceof Map) timestamps.set(filepath, time);
+          else timestamps[filepath] = time;
+        }
+      }
+      callback();
+    });
+  }
+};
--- a/global.d.ts
+++ b/global.d.ts
@@ -0,0 +1,22 @@
+declare const __webpack_public_path__: string;
+
+declare interface NodeModule {
+  hot: any;
+}
+
+declare interface Window {
+  STATE: any
+}
+
+declare namespace JSX {
+  interface Element { }
+  interface IntrinsicElements { }
+}
+
+declare module 'preact-i18n';
+declare module 'preact-material-components-drawer';
+declare module 'material-radial-progress';
+
+declare module 'classnames' {
+  export default function classnames(...args: any[]): string;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,82 @@
+{
+  "private": true,
+  "name": "squoosh",
+  "version": "0.0.0",
+  "license": "apache-2.0",
+  "scripts": {
+    "start": "webpack serve --hot",
+    "build": "webpack -p",
+    "lint": "eslint src"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-developit",
+    "rules": {
+      "indent": [
+        2,
+        2
+      ],
+      "react/prefer-stateless-function": 0
+    }
+  },
+  "eslintIgnore": [
+    "build/*"
+  ],
+  "devDependencies": {
+    "@types/node": "^9.4.7",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-preset-env": "^1.6.1",
+    "babel-register": "^6.26.0",
+    "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-developit": "^1.1.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.6.2",
+    "mini-css-extract-plugin": "^0.3.0",
+    "node-sass": "^4.7.2",
+    "preact-render-to-string": "^3.7.0",
+    "preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
+    "progress-bar-webpack-plugin": "^1.11.0",
+    "sass-loader": "^6.0.7",
+    "script-ext-html-webpack-plugin": "^2.0.1",
+    "source-map-loader": "^0.2.3",
+    "style-loader": "^0.20.3",
+    "ts-loader": "^4.0.1",
+    "tslint": "^5.9.1",
+    "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",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-plugin-replace": "^1.1.1",
+    "workbox-webpack-plugin": "^3.0.1"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "material-components-web": "^0.32.0",
+    "material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
+    "preact": "^8.2.7",
+    "preact-i18n": "^1.2.0",
+    "preact-material-components": "^1.3.7",
+    "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
+    "preact-router": "^2.6.0"
+  }
+}
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -0,0 +1,136 @@
+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 * as style from './style.scss';
+
+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,
+  showFab: boolean,
+  files: FileObj[]
+};
+
+let idCounter = 0;
+
+export default class App extends Component<Props, State> {
+  state: State = {
+    showDrawer: false,
+    showFab: true,
+    files: []
+  };
+
+  enableDrawer = false;
+
+  constructor() {
+    super();
+    // In development, persist application state across hot reloads:
+    if (process.env.NODE_ENV === 'development') {
+      this.setState(window.STATE);
+      this.componentDidUpdate = () => {
+        window.STATE = this.state;
+      };
+    }
+  }
+
+  @bind
+  openDrawer() {
+    this.setState({ showDrawer: true });
+  }
+  @bind
+  closeDrawer() {
+    this.setState({ showDrawer: false });
+  }
+  @bind
+  toggleDrawer() {
+    this.setState({ showDrawer: !this.state.showDrawer });
+  }
+
+  @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;
+
+    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>
+      </div>
+    );
+  }
+}
--- a/src/components/app/style.scss
+++ b/src/components/app/style.scss
@@ -0,0 +1,25 @@
+@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;
+  }
+}
--- a/src/components/app/style.scss.d.ts
+++ b/src/components/app/style.scss.d.ts
@@ -0,0 +1,3 @@
+export const app: string;
+export const header: string;
+export const content: string;
--- a/src/components/drawer/index.tsx
+++ b/src/components/drawer/index.tsx
@@ -0,0 +1,63 @@
+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>
+    );
+  }
+}
--- a/src/components/drawer/style.scss
+++ b/src/components/drawer/style.scss
@@ -0,0 +1,29 @@
+@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%;
+}
--- a/src/components/drawer/style.scss.d.ts
+++ b/src/components/drawer/style.scss.d.ts
@@ -0,0 +1,14 @@
+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;
--- a/src/components/fab/index.tsx
+++ b/src/components/fab/index.tsx
@@ -0,0 +1,47 @@
+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>
+    );
+  }
+}
--- a/src/components/fab/style.scss
+++ b/src/components/fab/style.scss
@@ -0,0 +1,18 @@
+@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;
+  }
+}
--- a/src/components/fab/style.scss.d.ts
+++ b/src/components/fab/style.scss.d.ts
@@ -0,0 +1,5 @@
+export const fab: string;
+export const progress: string;
+export const mdcRippleFgRadiusIn: string;
+export const mdcRippleFgOpacityIn: string;
+export const mdcRippleFgOpacityOut: string;
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -0,0 +1,53 @@
+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}>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} />
+      </Toolbar>
+    );
+  }
+}
--- a/src/components/header/style.scss
+++ b/src/components/header/style.scss
@@ -0,0 +1,52 @@
+@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%;
+}
--- a/src/components/header/style.scss.d.ts
+++ b/src/components/header/style.scss.d.ts
@@ -0,0 +1,8 @@
+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;
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -0,0 +1,36 @@
+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 + ' ' + (active ? style.active : '')}>
+        { files && files[0] && (
+          <img src={files[0].uri} style="width:100%;" />
+        ) }
+      </div>
+    );
+  }
+}
--- a/src/components/home/style.scss
+++ b/src/components/home/style.scss
@@ -0,0 +1,20 @@
+@import '~style/helpers.scss';
+
+// :global {
+//   @import '~preact-material-components/Button/mdc-button.scss';
+//   // @import '~preact-material-components/Switch/mdc-switch.scss';
+// }
+
+.home {
+  padding: 20px;
+  opacity: 0;
+}
+
+.active {
+  animation: fadeIn 2s forwards ease 1;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
--- a/src/components/home/style.scss.d.ts
+++ b/src/components/home/style.scss.d.ts
@@ -0,0 +1,3 @@
+export const home: string;
+export const active: string;
+export const fadeIn: string;
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Squoosh</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="theme-color" content="#673ab8">
+		<link rel="manifest" href="/manifest.json">
+	</head>
+	<body>
+		<div id="app" prerender></div>
+		<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
+	</body>
+</html>
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,32 @@
+import { h, render } from 'preact';
+import './lib/fix-pmc';
+import './style';
+import App from './components/app';
+
+// Find the outermost Element in our server-rendered HTML structure.
+let root = document.querySelector('[prerender]') || undefined;
+
+// "attach" the client-side rendering to it, updating the DOM in-place instead of replacing:
+root = render(<App />, document.body, root);
+
+// In production, this entire condition is removed.
+if (process.env.NODE_ENV === 'development') {
+  // Enable support for React DevTools and some helpful console warnings:
+  require('preact/debug');
+
+  // When an update to any module is received, re-import the app and trigger a full re-render:
+  module.hot.accept('./components/app', () => {
+    import('./components/app').then(({ default: App }) => {
+      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 SSR */
+// if (typeof module==='object') {
+//   module.exports = app;
+// }
--- a/src/lib/fix-pmc.js
+++ b/src/lib/fix-pmc.js
@@ -0,0 +1,26 @@
+import { options } from 'preact';
+
+const classNameDescriptor = {
+  enumerable: false,
+  configurable: true,
+  get() {
+    return this.class;
+  },
+  set(value) {
+    this.class = value;
+  }
+};
+
+let old = options.vnode;
+options.vnode = vnode => {
+  let a = vnode.attributes;
+  if (a != null) {
+    if ('className' in a) {
+      a.class = a.className;
+    }
+    if ('class' in a) {
+      Object.defineProperty(a, 'className', classNameDescriptor);
+    }
+  }
+  if (old != null) old(vnode);
+};
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -0,0 +1,49 @@
+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
+ * class C {
+ *   @bind
+ *   foo () {
+ *     return this;
+ *   }
+ * }
+ * let f = new C().foo;
+ * f() instanceof C;    // true
+ */
+export function bind(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+  return {
+    // the first time the prototype property is accessed for an instance,
+    // define an instance property pointing to the bound function.
+    // This effectively "caches" the bound prototype method as an instance property.
+    get() {
+      let bound = descriptor.value.bind(this);
+      Object.defineProperty(this, propertyKey, {
+        value: bound
+      });
+      return bound;
+    }
+  };
+}
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "Squoosh",
+  "short_name": "Squoosh",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
--- a/src/style/helpers.scss
+++ b/src/style/helpers.scss
@@ -0,0 +1,10 @@
+$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;
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -0,0 +1,27 @@
+// @import './material-icons.scss';
+// @import 'material-components-web/material-components-web';
+@import './reset.scss';
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  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;
+}
--- a/src/style/material-icons.scss
+++ b/src/style/material-icons.scss
@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
+    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
+    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -0,0 +1,12 @@
+button, a, img, input, select, textarea {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+a, button, img, [inert], .inert {
+  user-select: none;
+  -webkit-user-select: none;
+  user-drag: none;
+  -webkit-user-drag: none;
+  touch-callout: none;
+  -webkit-touch-callout: none;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2017",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "sourceMap": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "allowJs": false,
+    "baseUrl": "."
+  }
+}
--- a/tslint.json
+++ b/tslint.json
@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "tslint-config-semistandard",
+    "tslint-react"
+  ],
+  "rules": {
+    "quotemark": [true, "single", "jsx-double", "avoid-escape"],
+    "no-use-before-declare": false,
+    "no-floating-promises": false,
+    "space-before-function-paren": [true, false],
+    "jsx-boolean-value": [true, "never"],
+    "jsx-no-multiline-js": false,
+    "jsx-no-bind": true,
+    "jsx-no-lambda": true
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,254 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const PreloadWebpackPlugin = 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;
+
+function readJson(filename) {
+  return JSON.parse(fs.readFileSync(filename));
+}
+
+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')
+  ];
+
+  return {
+    mode: isProd ? 'production' : 'development',
+    entry: './src/index',
+    devtool: isProd ? 'source-map' : 'inline-source-map',
+    output: {
+      filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
+      chunkFilename: '[name].chunk.[chunkhash:5].js',
+      path: path.join(__dirname, 'build'),
+      publicPath: '/'
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
+      alias: {
+        style: path.join(__dirname, 'src/style')
+      }
+    },
+    resolveLoader: {
+      alias: {
+        // async-component-loader returns a wrapper component that waits for the import to load before rendering:
+        async: path.join(__dirname, 'config/async-component-loader')
+      }
+    },
+    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',
+          // SCSS gets preprocessed, then treated like any other CSS:
+          enforce: 'pre',
+          options: {
+            sourceMap: true,
+            includePaths: [nodeModules]
+          }
+        },
+        {
+          test: /\.(scss|sass|css)$/,
+          // Only enable CSS Modules within `src/{components,routes}/*`
+          include: componentStyleDirs,
+          use: [
+            // In production, CSS is extracted to files on disk. In development, it's inlined into JS:
+            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+            {
+              // This is a fork of css-loader that auto-generates .d.ts files for CSS module imports.
+              // The result is a definition file with the exported String classname mappings.
+              loader: 'typings-for-css-modules-loader',
+              options: {
+                modules: true,
+                localIdentName: '[local]__[hash:base64:5]',
+                namedExport: true,
+                camelCase: true,
+                importLoaders: 1,
+                sourceMap: isProd,
+                sass: true
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(scss|sass|css)$/,
+          // Process non-modular CSS everywhere *except* `src/{components,routes}/*`
+          exclude: componentStyleDirs,
+          use: [
+            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                sourceMap: isProd
+              }
+            }
+          ]
+        }
+      ]
+    },
+    plugins: [
+      // Pretty progressbar showing build progress:
+      new ProgressBarPlugin({
+        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
+        renderThrottle: 100,
+        summary: false,
+        clear: true
+      }),
+
+      // Remove old files before outputting a production build:
+      isProd && new CleanWebpackPlugin([
+        'assets',
+        '**/*.{css,js,json,html}'
+      ], {
+        root: path.join(__dirname, 'build'),
+        beforeEmit: true
+      }),
+
+      // Automatically split code into async chunks.
+      // See: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      isProd && new webpack.optimize.SplitChunksPlugin({}),
+
+      // In production, extract all CSS to produce files on disk, even for
+      // lazy-loaded CSS chunks. CSS for async chunks is loaded on-demand.
+      // This is a modern Webpack 4 replacement for ExtractTextPlugin.
+      // See: https://github.com/webpack-contrib/mini-css-extract-plugin
+      // See also: https://twitter.com/wsokra/status/970253245733113856
+      isProd && new MiniCssExtractPlugin({
+        chunkFilename: '[name].chunk.[contenthash:5].css'
+      }),
+
+      // These plugins fix infinite loop in typings-for-css-modules-loader.
+      // See: https://github.com/Jimdo/typings-for-css-modules-loader/issues/35
+      new webpack.WatchIgnorePlugin([
+        /(c|sc|sa)ss\.d\.ts$/
+      ]),
+      new WatchTimestampsPlugin([
+        /(c|sc|sa)ss\.d\.ts$/
+      ]),
+
+      // For now we're not doing SSR.
+      new HtmlWebpackPlugin({
+        filename: path.join(__dirname, 'build/index.html'),
+        template: '!!ejs-loader!src/index.html',
+        // template: '!!'+path.join(__dirname, 'config/prerender-loader')+'!src/index.html',
+        minify: isProd && {
+          collapseWhitespace: true,
+          removeScriptTypeAttributes: true,
+          removeRedundantAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          removeComments: true
+        },
+        manifest: readJson('./src/manifest.json'),
+        inject: true,
+        compile: true
+      }),
+
+      // Inject <link rel="preload"> for resources
+      isProd && new PreloadWebpackPlugin(),
+
+      // Inline constants during build, so they can be folded by UglifyJS.
+      new webpack.DefinePlugin({
+        // We set node.process=false later in this config.
+        // Here we make sure if (process && process.foo) still works:
+        process: '{}'
+      }),
+
+      // Babel embeds helpful error messages into transpiled classes that we don't need in production.
+      // Here we replace the constructor and message with a static throw, leaving the message to be DCE'd.
+      // This is useful since it shows the message in SourceMapped code when debugging.
+      isProd && new ReplacePlugin({
+        include: /babel-helper$/,
+        patterns: [{
+          regex: /throw\s+(?:new\s+)?((?:Type|Reference)?Error)\s*\(/g,
+          value: (s, type) => `throw 'babel error'; (`
+        }]
+      }),
+
+      // Copying files via Webpack allows them to be served dynamically by `webpack serve`
+      new CopyPlugin([
+        { from: 'src/manifest.json', to: 'manifest.json' },
+        { from: 'src/assets', to: 'assets' }
+      ]),
+
+      // For production builds, output module size analysis to build/report.html
+      isProd && new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        defaultSizes: 'gzip',
+        openAnalyzer: false
+      }),
+
+      // Generate a ServiceWorker using Workbox.
+      isProd && new WorkboxPlugin.GenerateSW({
+        swDest: 'sw.js',
+        clientsClaim: true,
+        skipWaiting: true,
+        // allow for offline client-side routing:
+        navigateFallback: '/',
+        navigateFallbackBlacklist: [/\.[a-z0-9]+$/i]
+      })
+    ].filter(Boolean), // Filter out any falsey plugin array entries.
+
+    // 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)
+    node: {
+      console: false,
+      // Keep global, it's just an alias of window and used by many third party modules:
+      global: true,
+      // Turn off process to avoid bundling a nextTick implementation:
+      process: false,
+      // Inline __filename and __dirname values:
+      __filename: 'mock',
+      __dirname: 'mock',
+      // Never embed a portable implementation of Node's Buffer module:
+      Buffer: false,
+      // Never embed a setImmediate implementation:
+      setImmediate: false
+    },
+
+    devServer: {
+      // Any unmatched request paths will serve static files from src/*:
+      contentBase: path.join(__dirname, 'src'),
+      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):
+      stats: 'minimal',
+      // Don't embed an error overlay ("redbox") into the client bundle:
+      overlay: false
+    }
+  };
+};