Removing everything that isn't skeletonyy (#22 )

* Simplifying * Ignoring CSS defs
remove redundant PRERENDER define
2018-05-04 17:05:44 +01:00 · 2018-05-03 12:01:13 -07:00 · 2018-05-01 09:52:58 -04:00 · 2018-04-24 14:03:44 -04:00 · 2018-04-17 21:35:28 -04:00 · 2018-04-17 21:33:59 -04:00
31 changed files with 369 additions and 2328 deletions
--- 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 @@
 			}
 		]
 	]
-}
+}
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 /build
-/*.log
+/*.log
 *.scss.d.ts
--- a/config/critters-webpack-plugin.js
+++ b/config/critters-webpack-plugin.js
@@ -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
 };
--- a/config/prerender-loader.js
+++ b/config/prerender-loader.js
@@ -1,64 +0,0 @@
 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
@@ -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;
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -41,12 +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": "^2.2.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",
@@ -55,21 +52,14 @@
    "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.6.2",
+    "loader-utils": "^1.1.0",
    "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",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "source-map-loader": "^0.2.3",
@@ -79,14 +69,12 @@
    "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",
+    "webpack-plugin-replace": "^1.1.1"
    "workbox-webpack-plugin": "^3.0.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
--- 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 { 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>
    );
  }
--- a/src/components/app/style.scss
+++ b/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;
  }
 }
--- a/src/components/app/style.scss.d.ts
+++ b/src/components/app/style.scss.d.ts
@@ -1,3 +0,0 @@
 export const app: string;
 export const header: string;
 export const content: string;
--- a/src/components/drawer/index.tsx
+++ b/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>
    );
  }
 }
--- a/src/components/drawer/style.scss
+++ b/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%;
 }
--- a/src/components/drawer/style.scss.d.ts
+++ b/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;
--- a/src/components/fab/index.tsx
+++ b/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>
    );
  }
 }
--- a/src/components/fab/style.scss
+++ b/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;
  }
 }
--- a/src/components/fab/style.scss.d.ts
+++ b/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;
--- a/src/components/header/index.tsx
+++ b/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}>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
@@ -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%;
 }
--- a/src/components/header/style.scss.d.ts
+++ b/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;
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -1,36 +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 + ' ' + (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
@@ -1,20 +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;
  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
@@ -1,3 +0,0 @@
 export const home: string;
 export const active: string;
 export const fadeIn: string;
--- a/src/components/output/index.tsx
+++ 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>
    );
  }
 }
--- a/src/components/output/style.scss
+++ b/src/components/output/style.scss
@@ -0,0 +1,3 @@
 .app h1 {
  color: green;
 }
--- a/src/index.html
+++ b/src/index.html
@@ -10,14 +10,6 @@
    <link rel="manifest" href="/manifest.json">
  </head>
  <body>
-    <div id="app" prerender></div>
+    <div id="app"></div>
    <script>
      (function(style){
        style.rel='stylesheet'
        style.href='https://fonts.googleapis.com/icon?family=Material+Icons'
        document.head.appendChild(style)
      })(document.createElement('link'));
    </script>
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
  </body>
-</html>
+</html>
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import './style';
 import App from './components/app';
 // Find the outermost Element in our server-rendered HTML structure.
-let root = document.querySelector('[prerender]') || undefined;
+let root = document.querySelector('#app') || undefined;
 // "attach" the client-side rendering to it, updating the DOM in-place instead of replacing:
 root = render(<App />, document.body, root);
@@ -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 SSR */
 // if (typeof module==='object') {
 //   module.exports = app;
 // }
--- 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
--- a/src/style/helpers.scss
+++ b/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;
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,7 +1,4 @@
 // @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%;
@@ -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;
 }
--- a/src/style/material-icons.scss
+++ b/src/style/material-icons.scss
@@ -1,28 +0,0 @@
@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/webpack.config.js
+++ b/webpack.config.js
@@ -1,35 +1,34 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanPlugin = 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 OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
-const PreloadPlugin = require('preload-webpack-plugin');
+const ScriptExtHtmlPlugin = require('script-ext-html-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;
-function readJson(filename) {
+function readJson (filename) {
  return JSON.parse(fs.readFileSync(filename));
 }
-module.exports = function(_, env) {
+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 {
    mode: isProd ? 'production' : 'development',
    entry: './src/index',
    devtool: isProd ? 'source-map' : 'inline-source-map',
    stats: 'minimal',
    output: {
      filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
      chunkFilename: '[name].chunk.[chunkhash:5].js',
@@ -50,23 +49,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',
@@ -79,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:
@@ -102,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',
@@ -114,6 +96,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 })
        }
      ]
    },
@@ -129,9 +122,10 @@ module.exports = function(_, env) {
      // Remove old files before outputting a production build:
      isProd && new CleanPlugin([
        'assets',
-        '**/*.{css,js,json,html}'
+        '**/*.{css,js,json,html,map}'
      ], {
        root: path.join(__dirname, 'build'),
        verbose: false,
        beforeEmit: true
      }),
@@ -165,15 +159,14 @@ module.exports = function(_, env) {
      ]),
      // For now we're not doing SSR.
-      new HtmlWebpackPlugin({
+      new HtmlPlugin({
        filename: path.join(__dirname, 'build/index.html'),
-        template: '!!ejs-loader!src/index.html',
+        template: 'src/index.html',
        // template: '!!'+path.join(__dirname, 'config/prerender-loader')+'!src/index.html',
        minify: isProd && {
          collapseWhitespace: true,
          removeScriptTypeAttributes: true,
          removeRedundantAttributes: true,
          removeStyleLinkTypeAttributes: true,
          removeRedundantAttributes: true,
          removeComments: true
        },
        manifest: readJson('./src/manifest.json'),
@@ -181,20 +174,8 @@ module.exports = function(_, env) {
        compile: true
      }),
-      // Inject <link rel="preload"> for resources
+      new ScriptExtHtmlPlugin({
-      isProd && new PreloadWebpackPlugin(),
+        defaultAttribute: 'async'
      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.
@@ -226,19 +207,31 @@ 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,
        // allow for offline client-side routing:
        navigateFallback: '/',
        navigateFallbackBlacklist: [/\.[a-z0-9]+$/i]
      })
    ].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)
@@ -263,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):
Author	SHA1	Message	Date
Jake Archibald	dbf38e5a44	Removing everything that isn't skeletonyy (#22 ) * Simplifying * Ignoring CSS defs	2018-05-04 17:05:44 +01:00
Jason Miller	e84d2dc7ee	remove redundant PRERENDER define	2018-05-03 12:01:13 -07:00
Jason Miller	81aaadbabf	Remove all prerendering & critical CSS stuff	2018-05-01 09:52:58 -04:00
Jason Miller	311d0524db	improve tests	2018-04-24 14:03:44 -04:00
Jason Miller	540b3c8154	Merge branch 'master' into prerendering	2018-04-17 21:35:28 -04:00
Jason Miller	06642fd047	Merge pull request #18 from GoogleChromeLabs/critters-async-await Critters: async/await & font handling	2018-04-17 21:33:59 -04:00
Jason Miller	058cce1d49	Merge pull request #17 from GoogleChromeLabs/babel-fixes Only use Babel to process .js files.	2018-04-17 17:11:03 -04:00
Jason Miller	2078b57dae	Merge pull request #12 from GoogleChromeLabs/css-inlining CSS Inlining	2018-04-17 17:10:43 -04:00
Jason Miller	11bebfc836	A11y: add aria attribute to give the upload field a name	2018-04-17 14:08:49 -04:00
Jason Miller	dec93a724f	Fix for Workbox precaching way too many files	2018-04-17 14:08:23 -04:00
Jason Miller	411614b731	Output minimal stats to the console during build	2018-04-17 14:07:57 -04:00
Jason Miller	896d267de5	Add plugin to make script loading async	2018-04-17 14:07:42 -04:00
Jason Miller	e0c59577a4	Lint webpack config, and only preload initial chunks	2018-04-17 14:07:22 -04:00
Jason Miller	5936c57a82	Clean up app to remove old prerendering bits	2018-04-17 14:05:50 -04:00
Jason Miller	3ba0a5a22a	Adds single-pass prerendering via a new `prerender-loader`	2018-04-17 14:04:55 -04:00
Jason Miller	b911e960a8	Merge pull request #1 from GoogleChromeLabs/app-skeleton App skeleton	2018-04-17 13:46:16 -04:00
Jason Miller	718443de30	Only use Babel to process .js files.	2018-04-17 13:42:25 -04:00