elmo/dist/api.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var preact = require('preact');
var path = require('path');
var renderToString = _interopDefault(require('preact-render-to-string'));
var Evaluate = _interopDefault(require('eval'));
var webpack = _interopDefault(require('webpack'));
var CACHE = require('gcache');
var simpleFunctionalLoader = require('simple-functional-loader');
var lodash = require('lodash');
var globby = _interopDefault(require('globby'));
var formatStats = _interopDefault(require('webpack-format-messages'));
var MemoryFS = _interopDefault(require('memory-fs'));
var Deferred = _interopDefault(require('deferral'));
var pkgdir = _interopDefault(require('pkg-dir'));
var fs = require('mz/fs');
var exists = _interopDefault(require('path-exists'));
var pathToRegexp = _interopDefault(require('path-to-regexp'));
var WebpackDevMiddleware = _interopDefault(require('webpack-dev-middleware'));
var WebpackHotMiddleware = _interopDefault(require('webpack-hot-middleware'));
var Express = _interopDefault(require('express'));
var http = _interopDefault(require('http'));

/**
 * Render a component to a VNode
 *
 * @param {Function} Component
 * @param {Object<string,any>} initial
 * @return {Promise<Object<string,any>|Error|void>} vnode
 */
async function renderComponent(Component, initial) {
  if (typeof Component !== 'function') {
    return null
  }

  // class component with a render function
  const proto = Component.prototype;
  if (proto && proto.render) {
    return preact.h(Component, initial)
  }

  // stateless component or async function
  let component;
  try {
    component = Component(initial);
  } catch (err) {
    return err
  }

  // is a promise
  if (component.then && component.catch) {
    return component.then(vnode => vnode).catch(err => err)
  }

  // stateless component
  return component
}

/**
 * Render a page to HTML
 *
 * @param {Object<string,any>} ctx
 * @param {Object<string,any>} documentProps
 * @param {Object<string,any>} page
 * @return {Promise<string|void|Error>}
 */
async function renderToHTML(Component, props) {
  // // compile the page into an HTML string
  // // TODO: try catch, classes can throw
  // const pageHTML = renderToString(page)

  // // TODO: rewind styles
  // const styles = []
  // console.log(elmo)
  // // rewind the head
  // const heads = Head ? Head.rewind() : []

  // // add new props to the document's existing props
  // documentProps['styles'] = styles || []
  // documentProps['heads'] = heads || []
  // documentProps['pageHTML'] = pageHTML || []

  const doc = await renderComponent(Component, props);
  if (!doc || doc instanceof Error) {
    return doc
  }

  // TODO: try-catch
  const html = renderToString(doc);

  return html
}

/**
 * Evaluate the component
 *
 * @param {string} entry
 * @param {string} source
 * @param {Object<string,any>=} globals
 * @return {Error|Function}
 */
function evaluate(entry, source, globals) {
  let render;

  try {
    render = Evaluate(
      source,
      entry /* filename: */,
      globals || {} /* scope: */,
      true /* includeGlobals: */
    );
  } catch (err) {
    // turn into an error in this script environment
    // because err instanceof Error is false
    const e = new Error(err.message);
    e.name = err.name;
    e.stack = err.stack;
    return e
  }

  if (render.hasOwnProperty('default')) {
    render = render['default'];
  }

  return render
}

/**
 * Turn the page to a path
 *
 * @param {string} basedir
 * @param {'.html'|'.js'} ext
 * @param {string} page
 * @return {string}
 *
 * e.g.
 *   pages/index.jsx       => /index.js
 *   pages/about.jsx       => /about.js
 *   pages/about/index.jsx => /about.js
 */
function pageToPath(basedir, ext, page) {
  const rel = path.relative(basedir, page);
  const base = path.basename(rel, path.extname(rel));
  let dir = path.dirname(rel);
  if (base === 'index') {
    if (dir === 'index') dir = path.dirname(dir);
    if (dir === '.') return base + ext
    return path.join(dir, base + ext)
  } else {
    return path.join(dir, base, 'index' + ext)
  }
}

/**
 * Page to Route
 *
 *  e.g.
 *   index.js         => /
 *   about.js         => /about
 *   movies/index.js  => /movies
 *   about/another.js => /about/another
 *   index/index.js   => /
 *
 * @param {string} root
 * @param {string} page
 * @return {string}
 */
function pageToRoute(root, path$$1) {
  const page = path.relative(path.join(root, 'pages'), path$$1);
  const base = path.basename(page, path.extname(page));
  if (base === 'index') {
    let dir = path.dirname(page);
    while (dir === 'index') {
      dir = path.dirname(dir);
    }
    return dir === '.' ? '/' : '/' + dir
  }
  return '/' + base
}

// automatically import preact.h(...)
function JSXImport({ types: t }) {
  return {
    visitor: {
      JSXOpeningElement(_path, { file }) {
        file.set('hasJSX', true);
      },

      Program: {
        enter(_path, { file }) {
          file.set('hasJSX', false);
        },

        exit(
          { node, scope },
          {
            file,
            opts: { identifier = 'React', moduleName = 'react' }
          }
        ) {
          if (!(file.get('hasJSX') && !scope.hasBinding(identifier))) {
            return
          }

          const jsxImportDeclaration = t.importDeclaration(
            [t.importDefaultSpecifier(t.identifier(identifier))],
            t.stringLiteral(moduleName)
          );

          node.body.unshift(jsxImportDeclaration);
        }
      }
    }
  }
}

const META_TYPES = ['name', 'httpEquiv', 'charSet', 'itemProp'];

// returns a function for filtering head child elements
// which shouldn't be duplicated, like <title/>.
// TODO: less fancy
function unique() {
  const tags = [];
  const metaTypes = [];
  const metaCategories = {};
  return h => {
    switch (h.nodeName) {
      case 'title':
      case 'base':
        if (~tags.indexOf(h.nodeName)) return false
        tags.push(h.nodeName);
        break
      case 'meta':
        for (let i = 0, len = META_TYPES.length; i < len; i++) {
          const metatype = META_TYPES[i];
          if (!h.attributes.hasOwnProperty(metatype)) continue
          if (metatype === 'charSet') {
            if (~metaTypes.indexOf(metatype)) return false
            metaTypes.push(metatype);
          } else {
            const category = h.attributes[metatype];
            const categories = metaCategories[metatype] || [];
            if (~categories.indexOf(category)) return false
            categories.push(category);
            metaCategories[metatype] = categories;
          }
        }
        break
    }
    return true
  }
}

class Head extends preact.Component {
  render() {
    const docProps = this.context._documentProps;
    let children = this.props.children || [];

    // Head was rendered outside of a Document.
    // This shouldn't happen but don't break if it's not
    if (!docProps) {
      return preact.h('head', {}, children)
    }

    // we have <Head> children from down in the tree,
    // add them as children to our head now
    if (docProps.heads) {
      children = []
        .concat(docProps.heads)
        .concat(children)
        .filter(unique());
    }

    // add in the rewound style vnodes
    if (docProps.styles) {
      children = [].concat(children).concat(docProps.styles);
    }

    // return an empty <head> if we don't have any children
    if (children.length == 0) {
      return preact.h('head')
    }

    return preact.h('head', {}, children)
  }
}

class Script extends preact.Component {
  render() {
    const docProps = this.context._documentProps;

    // Page was rendered outside of a Document
    // or there's no pageHTML prop
    if (!docProps || !docProps.scripts) {
      return null
    }

    return preact.h('div', { id: 'elmo-scripts' }, [
      docProps.scripts.map(script => preact.h('script', { src: script }))
    ])
  }
}

class Page extends preact.Component {
  render() {
    const docProps = this.context._documentProps;

    // Page was rendered outside of a Document
    // or there's no pageHTML prop
    if (!docProps || typeof docProps.pageHTML === 'undefined') {
      return null
    }

    return preact.h('div', {
      id: 'elmo',
      dangerouslySetInnerHTML: { __html: docProps.pageHTML }
    })
  }
}

class Document extends preact.Component {
  getChildContext() {
    return { _documentProps: this.props }
  }

  // Default render implementation, you can override
  // this by extending the Document
  render() {
    return preact.h('html', {}, [
      preact.h(Head, {}),
      preact.h('body', {}, [preact.h(Page, {}), preact.h(Script, {})])
    ])
  }
}

// Statics
Document.Head = Head;
Document.Script = Script;
Document.Page = Page;

const VALID_TYPES = {
  title: true,
  meta: true,
  base: true,
  link: true,
  style: true,
  script: true
};
const IS_BROWSER = typeof window !== 'undefined';
const MARKER = 'elmo-head';
const ATTR_MAP = {
  acceptCharset: 'accept-charset',
  className: 'class',
  htmlFor: 'for',
  httpEquiv: 'http-equiv'
};

// our mounted head components
// reset on each rewind
CACHE.set('heads', []);

// only update on client-side
function update() {
  if (!IS_BROWSER) return
  updateClient(CACHE.get('heads'));
}

// client updates
function updateClient(headComponents) {
  const vnodes = flatten(headComponents);
  const buckets = {};

  // buckets the vnodes
  for (let i = 0; i < vnodes.length; i++) {
    const vnode = vnodes[i];
    const nodeName = vnode.nodeName;
    if (typeof nodeName !== 'string') continue
    if (!VALID_TYPES[nodeName]) continue
    const bucket = buckets[nodeName] || [];
    bucket.push(vnode);
    buckets[nodeName] = bucket;
  }

  // only write the title once
  if (buckets.title) {
    syncTitle(buckets.title[0]);
  }

  // sync the vnodes to the DOM
  for (let type in VALID_TYPES) {
    if (type === 'title') continue
    syncElements(type, buckets[type] || []);
  }
}

// Map an array of Head components into VDOM nodes
function flatten(headComponents) {
  let children = [];

  for (let i = 0; i < headComponents.length; i++) {
    const head = headComponents[i];
    if (!head.props || !head.props.children) continue
    children = children.concat(head.props.children || []);
  }

  // TODO: look back at next.js to see why we
  // need to do this double reversal
  // TODO: less fancy
  children = children
    .reverse()
    .filter(unique())
    .reverse();

  const results = [];
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    // strings are handled natively & pass functions through
    if (typeof child === 'string' || !('nodeName' in child)) {
      results.push(child);
      continue
    }
    // ignore invalid head tags
    if (!VALID_TYPES[child.nodeName]) {
      continue
    }

    // mark the classname
    const attrs = child.attributes || {};
    const className = attrs.className ? `${attrs.className} ${MARKER}` : MARKER;
    results.push(preact.cloneElement(child, { className }));
  }

  return results
}

// write the title to the DOM
function syncTitle(vnode) {
  const title = [].concat(vnode.children).join('');
  if (title !== document.title) document.title = title;
}

// sync elements with the DOM
function syncElements(type, vnodes) {
  const headElement = document.getElementsByTagName('head')[0];
  const oldNodes = Array.prototype.slice.call(
    headElement.querySelectorAll(type + '.' + MARKER)
  );

  const newNodes = [];
  for (let i = 0; i < vnodes.length; i++) {
    newNodes.push(vnodeToDOMNode(vnodes[i]));
  }

  // loop over old nodes looking for old nodes to delete
  const dels = [];
  for (let i = 0; i < oldNodes.length; i++) {
    const oldNode = oldNodes[i];
    let found = false;
    for (let j = 0; j < newNodes.length; j++) {
      if (oldNode.isEqualNode(newNodes[j])) {
        found = true;
        break
      }
    }
    if (!found) {
      dels.push(oldNode);
    }
  }

  // loop over new nodes looking for new nodes to add
  const adds = [];
  for (let i = 0; i < newNodes.length; i++) {
    const newNode = newNodes[i];
    let found = false;
    for (let j = 0; j < oldNodes.length; j++) {
      if (newNode.isEqualNode(oldNodes[j])) {
        found = true;
        break
      }
    }
    if (!found) {
      adds.push(newNode);
    }
  }

  // remove the old nodes
  for (let i = 0; i < dels.length; i++) {
    const node = dels[i];
    if (!node.parentNode) continue
    node.parentNode.removeChild(node);
  }

  // add the new nodes
  for (let i = 0; i < adds.length; i++) {
    const node = adds[i];
    headElement.appendChild(node);
  }
}

// vnodeToDOMNode converts a virtual node into a DOM node
function vnodeToDOMNode(vnode) {
  const el = document.createElement(vnode.nodeName);
  const attrs = vnode.attributes || {};
  const children = vnode.children;
  for (const p in attrs) {
    if (!attrs.hasOwnProperty(p)) continue
    if (p === 'dangerouslySetInnerHTML') continue
    const attr = ATTR_MAP[p] || p.toLowerCase();
    el.setAttribute(attr, attrs[p]);
  }
  if (attrs['dangerouslySetInnerHTML']) {
    el.innerHTML = attrs['dangerouslySetInnerHTML'].__html || '';
  } else if (children) {
    el.textContent = typeof children === 'string' ? children : children.join('');
  }
  return el
}

// All the heads are collected together
class Head$1 extends preact.Component {
  // server: this should get called before rewind
  // client: doesn't matter where it is really
  componentWillMount() {
    const heads = CACHE.get('heads');
    CACHE.set('heads', heads.concat(this));
    update();
  }

  static rewind() {
    const children = flatten(CACHE.get('heads'));
    CACHE.set('heads', []);
    return children
  }

  componentDidUpdate() {
    update();
  }

  componentWillUnmount() {
    const heads = CACHE.get('heads');
    const i = heads.indexOf(this);
    const updated = [];
    heads.forEach((head, j) => {
      if (j === i) return
      updated.push(head);
    });
    CACHE.set('heads', updated);
    update();
  }

  render() {
    return null
  }
}

/**
 * @typedef {Object} Input
 * @prop {string} projectRoot
 * @prop {string} buildRoot
 * @prop {string} env
 * @prop {Array<string>} pages
 *
 * @param {Input} input
 * @return {Object<string,any>|Error|void}
 */
function Prerender(input) {
  const { projectRoot, buildRoot, env, pages } = input;

  const config = {
    mode: env,
    name: 'prerender',
    target: 'node',
    context: buildRoot,
    module: { rules: [] },
    plugins: [],
    devtool: false,
    entry: {}
  };

  // setup the entries
  config.entry = pages.reduce((obj, page) => {
    const name = pageToPath(path.join(buildRoot, 'pages'), '.html', page);
    obj[name] = [].concat(page);
    return obj
  }, {});

  // add the document if we have one
  const docpath = pages.find(p => path.basename(p, path.extname(p)) === '_document');
  if (docpath) config.entry['_document.html'] = docpath;

  // this is to ensure that we use node's actual require(...)
  // which is needed for styled-jsx, but should probably be the
  // default anyway.
  config.externals = [
    function(_parent, request, fn) {
      // if (request === 'elmo') {
      //   return fn(null, join(elmoRoot, 'src', 'nodejs', 'elmo.js'))
      // } else
      if (request[0] !== '.' && request[0] !== '/') {
        // externalize all node_modules
        return fn(null, request)
      } else {
        // pass relative paths through (don't externalize)
        return fn(null, undefined)
      }
    }
  ];

  // resolves
  config.resolve = {
    // extensions: ['.ts', '.js', '.tsx', '.jsx'],
    extensions: ['.js', '.jsx'],
    modules: [path.join(projectRoot, 'node_modules')]
    // alias: {
    //   elmo: join(elmoRoot, 'src', 'nodejs', 'elmo.js')
    // }
  };

  // output configuration
  config.output = {
    path: '/',
    publicPath: '/',
    // [name] ensures the path matches the entry key
    filename: '[name]',
    libraryTarget: 'umd'
  };

  // rules
  const rules = config.module.rules;

  // .jsx support
  rules.push({
    test: /\.jsx/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: [
        // aliases['styled-jsx-preact/babel'],
        '@babel/plugin-proposal-class-properties',
        [JSXImport, { identifier: 'preact', moduleName: 'preact' }],
        [
          '@babel/plugin-transform-react-jsx',
          // TODO: development flag, right now, it should give
          // exact line numbers in stack traces.
          // preact renders it as <div __source="[object Object]">
          // development: environment === 'development'
          { pragma: 'preact.createElement' }
        ]
      ]
    }
  });

  // Reverse plugins, webpack goes from bottom to top
  // but top to bottom makes more sense in a config
  config.module.rules = rules.reverse();

  // plugins
  const plugins = config.plugins;

  // // get all the environment variables
  // let envvars = Environment()

  // attach the env as the NODE_ENV if it's not there already
  // envvars['process.env.NODE_ENV'] = JSON.stringify(
  //   envvars['process.env.NODE_ENV'] || environment
  // )

  // Define environment variables
  // TODO: add the NODE_ENV
  plugins.push(new webpack.EnvironmentPlugin(Object.keys(process.env)));

  // Don't write files if there are errors
  plugins.push(new webpack.NoEmitOnErrorsPlugin());

  // use names instead of IDs
  plugins.push(new webpack.NamedModulesPlugin());

  // server-side
  plugins.push(new PrerenderPlugin({}));

  // setup minification & common chunks
  config.optimization = {
    minimize: env === 'production',
    splitChunks: {
      name: 'common',
      filename: 'common.js',
      chunks: 'initial',

      // TODO: these options should be optimized.
      // right now they make sure we always have
      // a common.js, but sometimes it's not
      // necessary.
      minChunks: 1,
      minSize: 0
    }
  };

  // enable hot module replacement when in dev server in the browser
  // if (action === 'serve' && environment !== 'production') {
  //   plugins.push(new Webpack.HotModuleReplacementPlugin())
  // }

  // console.log(elmoRoot)
  // console.log(
  //   elmoRoot,
  //   require(buildRoot + 'node_modules/webpack/lib/LoaderOptionsPlugin.js')
  // )

  // minify scripts in production in the browser
  if (env === 'production') {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      })
    );
  }

  return config
}

/**
 * Prerender plugin is responsible for turning
 * Javascript source into HTML
 */
class PrerenderPlugin {
  constructor(options) {
    this.options = options || {};
  }

  // webpack specific hook
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('prerender', compilation => {
      compilation.hooks.optimizeAssets.tapAsync('prerender', (assets, done) => {
        this.prerender(assets)
          .then(e => {
            if (e) compilation.errors.push(e);
            done();
          })
          .catch(e => {
            // TODO: fix this
            console.error('Pre-render: uncaught error (watch killed):', e.stack);
            done(e);
          });
      });
    });
  }

  // prerender plugin
  async prerender(entries) {
    // const { buildRoot } = this.options
    let Document$$1 = Document;

    // find the document
    const documentPath = Object.keys(entries).find(entry => {
      return path.basename(entry, path.extname(entry)) === '_document'
    });
    if (documentPath) {
      // turn the Document source into a function
      Document$$1 = evaluate(documentPath, entries[documentPath].source(), {
        require
      });
      if (Document$$1 instanceof Error) {
        return Document$$1
      } else if (typeof Document$$1 !== 'function') {
        return new Error("document doesn't have a default export")
      }
      // delete the document from the entries
      delete entries[documentPath];
    }

    // turn the node files into html files
    for (let entry in entries) {
      // ignore HTML-bound files
      if (path.extname(entry) !== '.html') continue

      const Page = evaluate(entry, entries[entry].source(), { require });
      if (Page instanceof Error) return Page
      // TODO: map entry back to the original file
      else if (typeof Page !== 'function') {
        return new Error(`"${entry}" doesn't have a default export`)
      }

      // empty initials
      const initial = {
        redirect: _path => {},
        render: _props => {},
        url: {
          protocol: '',
          host: '',
          port: 0,
          hostname: '',
          hash: '',
          search: '',
          query: {},
          pathname: '',
          href: ''
        }
      };

      // mock router
      // const router = {
      //   push: _url => {},
      //   replace: _url => {}
      // }

      // render the Page into a VNode
      // TODO: introduce the <Provider>
      const page = await renderComponent(Page, initial);
      if (!page || page instanceof Error) {
        return page
      }

      // TODO: try catch
      const pageHTML = renderToString(page);

      const props = {};
      props['pageHTML'] = pageHTML || '';
      props['heads'] = Head$1.rewind() || [];
      props['scripts'] = ['/common.js', '/' + path.join(path.dirname(entry), 'index.js')];

      const html = await renderToHTML(Document$$1, props);
      if (html instanceof Error) return html

      // update the entry
      entries[entry] = {
        source: () => html,
        size: () => html.length
      };
    }
  }
}

/**
 * @typedef {Object} Input
 * @prop {string} projectRoot
 * @prop {string} environment
 * @prop {boolean} hot
 * @prop {Array<string>} pages
 *
 * @param {Input} input
 * @return {Object<string,any>|Error|void}
 */
function Browser(input) {
  const { projectRoot, buildRoot, env, pages, hot } = input;

  const config = {
    mode: env,
    name: 'browser',
    target: 'web',
    context: buildRoot,
    module: { rules: [] },
    plugins: [],
    devtool: false,
    entry: {},

    // don't support any node polyfills
    node: {
      console: false,
      global: false,
      process: false,
      __filename: false,
      __dirname: false,
      Buffer: false,
      setImmediate: false,
      dns: false,
      fs: false,
      path: true,
      url: false
    },

    // output configuration
    output: {
      path: '/',
      publicPath: '/',
      // [name] ensures the path matches the entry key
      filename: '[name]',
      libraryTarget: 'umd'
    }
  };

  // setup the entries
  config.entry = pages.reduce((obj, page) => {
    const name = pageToPath(path.join(buildRoot, 'pages'), '.js', page);
    const bundle = [];

    // only include webpack hot middleware when we're
    // not in production and using the dev server
    // and we're building for the browser
    if (hot) {
      const client = 'webpack-hot-middleware/client';
      bundle.push(`${client}?path=/__webpack_hmr&noInfo=true&name=${page}`);
      bundle.push('preact/debug');
    }

    obj[name] = bundle.concat(page);
    return obj
  }, {});

  // support electron renderer and web seamlessly
  config.externals = [
    function(_parent, request, fn) {
      if (request === 'electron') {
        return fn(null, request)
      }
      return fn(null, undefined)
    }
  ];

  // resolves
  config.resolve = {
    extensions: ['.ts', '.js', '.tsx', '.jsx'],
    modules: [path.join(projectRoot, 'node_modules')]
    // alias: {
    // elmo: join(elmoRoot, 'src', 'browser', 'elmo.js')
    // }
  };

  // where to resolve loaders
  // config.resolveLoader = {
  //   modules: [join(projectRoot, 'node_modules')]
  // }

  // rules
  const rules = config.module.rules;

  // support json files
  rules.push({
    test: /\.json$/,
    use: ['json-loader']
  });

  // support loading .jsx files
  rules.push({
    test: /\.jsx/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: [
        // 'styled-jsx-preact/babel',
        '@babel/plugin-proposal-class-properties',
        [JSXImport, { identifier: 'preact', moduleName: 'preact' }],
        [
          '@babel/plugin-transform-react-jsx',
          // TODO: development flag, right now, it should give
          // exact line numbers in stack traces.
          // preact renders it as <div __source="[object Object]">
          // development: environment === 'development'
          { pragma: 'preact.createElement' }
        ]
      ]
    }
  });

  // TODO: add polyfill for Promises
  // always polyfill to find bugs faster
  // right now just polyfilling fetch and promise
  // rules.push({
  //   test: /\.[tj]sx?$/,
  //   include: pages.map(page => resolve(projectRoot, page)),
  //   loader: join(__dirname, '..', 'server', 'loaders', 'polyfills.js')
  // })

  // boot script for client-side, only added to the top-level pages
  rules.push({
    test: /\.[jt]sx?$/,
    include: pages,
    loader: simpleFunctionalLoader.createLoader(
      Boot({
        buildRoot: buildRoot,
        routes: input.routes,
        env: input.env,
        target: input.target
      })
    )
  });

  // Reverse plugins, webpack goes from bottom to top
  // but top to bottom makes more sense in a config
  config.module.rules = rules.reverse();

  // plugins
  const plugins = config.plugins;

  // Define environment variables
  // TODO: add the NODE_ENV
  plugins.push(new webpack.EnvironmentPlugin(Object.keys(process.env)));

  // Don't write files if there are errors
  plugins.push(new webpack.NoEmitOnErrorsPlugin());

  // use names instead of IDs
  plugins.push(new webpack.NamedModulesPlugin());

  // setup minification & common chunks
  // do this in development too to ensure no bugs
  // only minify in production though
  config.optimization = {
    minimize: env === 'production',
    splitChunks: {
      name: 'common',
      filename: 'common.js',
      chunks: 'initial',

      // TODO: these options should be optimized
      // right now they make sure we always have
      // a common.js, but sometimes it's not
      // necessary.
      minChunks: 1,
      minSize: 0
    }
  };

  // enable hot module replacement when in dev server in the browser
  if (hot) {
    plugins.push(new webpack.HotModuleReplacementPlugin());
  }

  // minify scripts in production in the browser
  if (env === 'production') {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      })
    );
  }

  return config
}

/**
 * Boot script for client-side build files
 *
 * @this {import('webpack').loader.LoaderContext}
 * @param {string} source
 * @param {string} sourcemap
 */
function Boot(input) {
  return function boot(source, _sourcemap) {
    this.cacheable();

    const path$$1 =
      '/' + pageToPath(path.join(input.buildRoot, 'pages'), '.js', this.resourcePath);

    // This is a bit confusing because we only want to update once, but
    // need to satisfy 3 update conditions: 1st page load, HMR update,
    // and Router.push(...). We only want to update once when we load
    // the page and when there's an HMR update, but not when we async
    // re-route.
    //
    //   -> only do HMR in development mode
    //   if (module.hot) {
    //   -> accept the hot module, this is a noop when we're booting
    //     module.hot.accept()
    //
    //     -> if we're booting, this will be "idle", "apply" occurs
    //     -> when we've made a change, this will allow us to only
    //     -> target HMR updates
    //     if (module.hot.status() === 'apply') {
    //       const Router = require('elmo/router').default
    //       Router.update(Component, route).catch(console.error)
    //       return
    //     }
    //   }
    //
    //   -> This will not be triggered when we're using Router.push(...)
    //   -> there is no corresponding <script>.
    //   if (document.querySelector('script[src="${route}"]')) {
    //     const Router = require('elmo/router').default
    //     Router.update(Component, route).catch(console.error)
    //   }
    const newSource = `
  ${source}
  ;(function (Component, env, path, routes) {
    Component = Component.default || Component
    const { Router, renderToDOM } = require('elmo')
    const parent = document.getElementById('elmo')

    const router = new Router(routes, (Component, ctx) => {
      if (!parent) return
      // TODO: add redirect and render to ctx
      // TODO: wrap the component in a Provider
      return renderToDOM(Component, ctx, parent)
    })

    if (module.hot) {
      module.hot.accept()

      // this should only occur when we are using
      // HMR, never when we boot or when we use Router.push(...)
      if (module.hot.status() === 'apply') {
        router.start(Component, path).catch(console.error)
        return
      }
    }

    // this should only get rendered on boot, never
    // during HMR or when we use Router.push(...)
    if (document.querySelector('script[src="'+ path +'"]')) {
      router.start(Component, path)
        .then(function () {
          // this will signal to prerender.io compatible
          // clients that the page has rendered successfully
          window.prerenderReady = true
        })
        .catch(console.error)
    }
  })(
    require('${this.resourcePath}'),
    ${JSON.stringify(input.env)},
    ${JSON.stringify(path$$1)},
    ${JSON.stringify(input.routes || {})}
  )
  `;
    this.callback(null, newSource, undefined);
  }
}

/**
 * Glob with some common default settings
 *
 * @param {string} root
 * @param {...string} patterns
 * @return {Promise<string[]>}
 */
async function Glob(root, ...patterns) {
  const filegroups = await Promise.all(
    patterns.map(pattern => {
      // TODO: will globby throw?
      return globby(pattern, {
        absolute: true,
        cwd: root,
        dot: false,
        nodir: true,
        ignore: ['**/node_modules/**']
      })
    })
  );

  const files = lodash.uniq(lodash.flatten(filegroups)).sort();

  // filter any file that has an underscore
  // TODO: test this
  return files.filter(file => {
    const parts = file.split(path.sep);
    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      if (part[0] === '_') {
        return false
      }
    }
    return true
  })
}

class Webpack {
  constructor(...configs) {
    this.webpack = webpack(configs || []);
  }

  /**
   * Run our webpack configuration and return
   * a list of files
   *
   * @return {Promise<Error|Array<Object<string,string>>>}
   */
  async run() {
    const deferred = new Deferred();

    // set the output system
    const outputFS = new MemoryFS();
    this.webpack.outputFileSystem = outputFS;

    this.webpack.run((err, stats) => {
      // TODO: turn into a custom error
      if (err) {
        if (err instanceof Error) {
          return deferred.resolve(err)
        }

        // handle "missing module" and maybe more
        const nerr = new Error(err.message || err);
        nerr.stack = err.stack || '';
        return deferred.resolve(nerr)
      }

      // TODO: turn into a custom error
      const serr = this._checkError(stats);
      if (serr) {
        return deferred.resolve(serr)
      }

      return deferred.resolve(stats)
    });

    const stats = await deferred.wait();
    if (stats instanceof Error) return stats

    const files = this._statsToFiles(outputFS, stats);
    if (files instanceof Error) return files
    return files
  }

  async watch() {}

  /**
   * check the stats for any errors
   *
   * @param {import('webpack').Stats} stats
   * @return {Error|null}
   */
  _checkError(stats) {
    const messages = formatStats(stats);

    if (messages.errors.length) {
      const errs = messages.errors.join('');
      return new Error(`webpack: failed to compile.\n\n${errs}`)
    }

    if (messages.warnings.length) {
      const warnings = messages.warnings.join('');
      return new Error(`webpack: compiled with warnings.\n\n${warnings}`)
    }

    return null
  }

  /**
   * Turn webpack stats back into in-memory files
   *
   * @param {import("memory-fs").MemoryFS} fs
   * @param {import("webpack").Stats} stats
   * @return {Error | Array<{path:string, contents:string}>}
   */
  _statsToFiles(fs$$1, stats) {
    const json = stats.toJson({ assets: true, chunks: true });
    if (!json) return new Error('webkpack: no json emitted')

    const files = [];

    for (let i = 0; i < json.children.length; i++) {
      const child = json.children[i];
      const assets = child.assets;

      if (!Array.isArray(assets)) continue

      for (let j = 0; j < assets.length; j++) {
        const asset = assets[j];

        const path$$1 = asset.name;
        const contents = fs$$1.readFileSync(path.resolve('/', path$$1));

        files.push({ path: path$$1, contents });
      }
    }
    return files
  }
}

/**
 * _redirects provider
 *
 * @param {string} projectRoot
 * @return {() => Promise<Object<string,string>|Error>}
 */
function Redirects(projectRoot) {
  const filepath = path.join(projectRoot, '_redirects');
  return async function provider() {
    if (!(await exists(filepath))) return {}
    const file = await fs.readFile(filepath, 'utf8');
    const lines = file.split(/\n+/);
    const out = {};
    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();
      if (line === '' || line[0] === '#') {
        continue
      }
      const [route, redirect] = line.split(/\s+/);
      if (!route || !redirect) continue
      out[route] = redirect;
    }
    return out
  }
}

/**
 * Package provider
 *
 * @param {string} projectRoot
 * @return {() => Promise<Object<string,string>|Error>}
 */
function Package(projectRoot) {
  const filepath = path.join(projectRoot, 'package.json');
  return async function() {
    if (!(await exists(filepath))) return {}
    const file = await fs.readFile(filepath, 'utf8');
    const pkg = tryParse(file);
    return get(pkg, 'elmo.routes') || {}
  }
}

function tryParse(contents) {
  try {
    return JSON.parse(contents)
  } catch (err) {
    return {}
  }
}

// Thanks Jason!
// https://github.com/developit/dlv
function get(obj, key, def, p) {
  p = 0;
  key = key.split ? key.split('.') : key;
  while (obj && p < key.length) obj = obj[key[p++]];
  return obj === undefined || p < key.length ? def : obj
}

/**
 * Page provider
 *
 * This provider will be used if there is
 * no other routemap provider provided
 */
function Page$1(buildRoot) {
  return async function provider() {
    const pages = await Glob(buildRoot, path.join('pages', '**'));
    const routes = {};
    for (let i = 0; i < pages.length; i++) {
      const route = pageToRoute(buildRoot, pages[i]);
      const path$$1 = pageToPath(path.join(buildRoot, 'pages'), '.js', pages[i]);
      routes[route] = '/' + path$$1;
    }
    return routes
  }
}

/**
 * Create a routemap
 *
 * @typedef {Function} Provider
 *
 * @param {...Provider} providers
 * @return {() => Promise<Route[]|Error>}
 */
function Routes(...providers) {
  return async function load() {
    const routemap = {};
    for (let i = 0; i < providers.length; i++) {
      const routes = await providers[i]();
      for (let route in routes) {
        routemap[route] = routes[route];
      }
    }
    return compile(routemap)
  }
}

/**
 * Compile the routes
 *
 * @param {Object<string,string>} map
 * @return {Route[]}
 */
function compile(map) {
  const routes = [];
  for (let k in map) {
    const params = [];
    const regexp = pathToRegexp(k, params);
    routes.push({
      path: map[k],
      regexp: regexp.source,
      params: params.map(p => p.name)
    });
  }
  return routes
}

/**
 * Bundle an elmo project
 *
 * @typedef {Object} Input
 * @property {string} env
 * @property {string} root
 * @property {Object<string,string>} routes
 *
 * @param {Input} input
 * @return {Promise<Error|string|void>}
 */
async function Bundle(input) {
  const env = input.env || 'production';

  const buildRoot = path.resolve(process.cwd(), input.root || './');
  const projectRoot = await pkgdir(buildRoot);

  const pages = await Glob(buildRoot, path.join('pages', '**'));
  const routes =
    input.routes ||
    (await Routes(
      Package(projectRoot),
      Redirects(projectRoot),
      Page$1(buildRoot)
    )());

  const prerender = Prerender({
    projectRoot: projectRoot,
    buildRoot: buildRoot,
    routes: routes,
    pages: pages,
    env: env
  });
  const browser = Browser({
    projectRoot: projectRoot,
    buildRoot: buildRoot,
    routes: routes,
    pages: pages,
    env: env
  });
  const webpack$$1 = new Webpack(prerender, browser);
  const result = await webpack$$1.run();
  if (result instanceof Error) {
    return result
  }
  return result
}

/**
 * Regexp cache for routing
 */
const regexps = {};

/**
 * Is the terminal
 */
const isTTY = !!process.stdout.isTTY;

/**
 * Serve an elmo project
 *
 * @typedef {Object} Input
 * @property {string} env
 * @property {string} root
 * @property {Object<string,string>} routes
 *
 * @param {Input} input
 * @return {Promise<import('http').Server|Error>}
 */
async function Serve(input) {
  const env = input.env || 'production';

  const buildRoot = path.resolve(process.cwd(), input.root || './');
  const projectRoot = await pkgdir(buildRoot);
  const pages = await Glob(buildRoot, path.join('pages', '**'));

  const routes =
    input.routes ||
    (await Routes(
      Package(projectRoot),
      Redirects(projectRoot),
      Page$1(buildRoot)
    )());

  const app = Express();

  const prerender = Prerender({
    projectRoot: projectRoot,
    buildRoot: buildRoot,
    routes: routes,
    pages: pages,
    env: env
  });
  const browser = Browser({
    projectRoot: projectRoot,
    buildRoot: buildRoot,
    routes: routes,
    pages: pages,
    env: env
  });

  const webpack$$1 = webpack([prerender, browser]);

  // TODO: fix this, this is hacky
  // apply the plugin to the multicompiler
  // right now hooks is not on the @types/webpack multicompiler
  // new Messages({
  //   isTTY: isTTY,
  //   onFirstSuccess: () => {
  //     console.log(`\n> Ready on http://localhost:${params.port}`)
  //   }
  // }).apply(webpack)

  const dev = WebpackDevMiddleware(webpack$$1, {
    publicPath: '/',
    logLevel: 'silent'
  });

  app.use(dev);

  const hot = WebpackHotMiddleware(webpack$$1, {
    log: false,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000
  });

  app.use(hot);

  // support custom routing
  if (routes.length) {
    // rehydrate regexps
    app.use(function(req, res, next) {
      if (req.method !== 'GET') return next()
      // TODO: remove me
      // this will disable an annoying console warning about sourcemaps
      // from dependencies that link to source maps (like unfetch)
      if (path.extname(req.path) === '.map') return next()
      if (!req.accepts('html')) return next()

      for (let i = 0, len = routes.length; i < len; i++) {
        const route = routes[i];
        const regexp = (regexps[route.regexp] =
          regexps[route.regexp] || new RegExp(`${route.regexp}`));
        if (!regexp.test(req.path)) {
          continue
        }
        req.url = route.path.replace(/\/+$/, '') + '/';
        return dev(req, res, next)
      }
      return next()
    });
  }

  const def = new Deferred();
  dev.waitUntilValid(_stats => def.resolve());
  await def.wait();

  return http.createServer(app)
}

exports.Bundle = Bundle;
exports.Serve = Serve;