custom document support (vercel#405)

Author: nkzawa

client/next.js

@@ -30,7 +30,7 @@ domready(() => {
   const container = document.getElementById('__next')
   const appProps = { Component, props, router, headManager }
 
-  rehydrate(ids)
+  if (ids) rehydrate(ids)
   render(createElement(App, appProps), container)
 })
 

client/webpack-hot-middleware-client.js

@@ -23,6 +23,9 @@ const handlers = {
       // reload to recover from runtime errors
       next.router.reload(route)
     }
+  },
+  hardReload () {
+    window.location.reload()
   }
 }
 

document.js

@@ -0,0 +1 @@
+module.exports = require('./dist/server/document')

lib/document.js

@@ -42,6 +42,7 @@
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
     "babel-runtime": "6.20.0",
+    "chokidar": "1.6.1",
     "cross-spawn": "5.0.1",
     "del": "2.2.2",
     "domready": "1.0.8",

package.json

@@ -0,0 +1 @@
+module.exports = require('next/document')

pages/_document.js

@@ -0,0 +1,62 @@
+import { resolve, join, dirname } from 'path'
+import { readFile, writeFile } from 'mz/fs'
+import { transform } from 'babel-core'
+import chokidar from 'chokidar'
+import mkdirp from 'mkdirp-then'
+
+const babelRuntimePath = require.resolve('babel-runtime/package')
+.replace(/[\\/]package\.json$/, '')
+
+export default babel
+
+async function babel (dir, { dev = false } = {}) {
+  dir = resolve(dir)
+
+  let src
+  try {
+    src = await readFile(join(dir, 'pages', '_document.js'), 'utf8')
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      src = await readFile(join(__dirname, '..', '..', 'pages', '_document.js'), 'utf8')
+    } else {
+      throw err
+    }
+  }
+
+  const { code } = transform(src, {
+    babelrc: false,
+    sourceMaps: dev ? 'inline' : false,
+    presets: ['es2015', 'react'],
+    plugins: [
+      require.resolve('babel-plugin-react-require'),
+      require.resolve('babel-plugin-transform-async-to-generator'),
+      require.resolve('babel-plugin-transform-object-rest-spread'),
+      require.resolve('babel-plugin-transform-class-properties'),
+      require.resolve('babel-plugin-transform-runtime'),
+      [
+        require.resolve('babel-plugin-module-resolver'),
+        {
+          alias: {
+            'babel-runtime': babelRuntimePath,
+            react: require.resolve('react'),
+            'next/link': require.resolve('../../lib/link'),
+            'next/css': require.resolve('../../lib/css'),
+            'next/head': require.resolve('../../lib/head'),
+            'next/document': require.resolve('../../server/document')
+          }
+        }
+      ]
+    ]
+  })
+
+  const file = join(dir, '.next', 'dist', 'pages', '_document.js')
+  await mkdirp(dirname(file))
+  await writeFile(file, code)
+}
+
+export function watch (dir) {
+  return chokidar.watch('pages/_document.js', {
+    cwd: dir,
+    ignoreInitial: true
+  })
+}

server/build/babel.js

@@ -1,4 +1,5 @@
 import webpack from './webpack'
+import babel from './babel'
 import clean from './clean'
 
 export default async function build (dir) {
@@ -7,6 +8,13 @@ export default async function build (dir) {
     clean(dir)
   ])
 
+  await Promise.all([
+    runCompiler(compiler),
+    babel(dir)
+  ])
+}
+
+function runCompiler (compiler) {
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) return reject(err)

server/build/index.js

@@ -58,7 +58,9 @@ export default class WatchPagesPlugin {
   }
 
   isPageFile (f) {
-    return f.indexOf(this.dir) === 0 && extname(f) === '.js'
+    return f.indexOf(this.dir) === 0 &&
+      relative(this.dir, f) !== '_document.js' &&
+      extname(f) === '.js'
   }
 }
 

server/build/plugins/watch-pages-plugin.js

@@ -13,7 +13,10 @@ import DetachPlugin from './plugins/detach-plugin'
 export default async function createCompiler (dir, { hotReload = false, dev = false } = {}) {
   dir = resolve(dir)
 
-  const pages = await glob('pages/**/*.js', { cwd: dir })
+  const pages = await glob('pages/**/*.js', {
+    cwd: dir,
+    ignore: 'pages/_document.js'
+  })
 
   const entry = {}
   const defaultEntries = hotReload ? ['next/dist/client/webpack-hot-middleware-client'] : []
@@ -146,7 +149,8 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
               'next/link': require.resolve('../../lib/link'),
               'next/prefetch': require.resolve('../../lib/prefetch'),
               'next/css': require.resolve('../../lib/css'),
-              'next/head': require.resolve('../../lib/head')
+              'next/head': require.resolve('../../lib/head'),
+              'next/document': require.resolve('../../server/document')
             }
           }
         ]

server/build/webpack.js

@@ -0,0 +1,118 @@
+import React, { Component, PropTypes } from 'react'
+import htmlescape from 'htmlescape'
+import { renderStatic } from 'glamor/server'
+import readPkgUp from 'read-pkg-up'
+
+const { pkg } = readPkgUp.sync({
+  cwd: __dirname,
+  normalize: false
+})
+
+export default class Document extends Component {
+  static getInitialProps ({ renderPage }) {
+    let head
+    const { html, css, ids } = renderStatic(() => {
+      const page = renderPage()
+      head = page.head
+      return page.html
+    })
+    const nextCSS = { css, ids }
+    return { html, head, nextCSS }
+  }
+
+  static childContextTypes = {
+    _documentProps: PropTypes.any
+  }
+
+  constructor (props) {
+    super(props)
+    const { __NEXT_DATA__, nextCSS } = props
+    if (nextCSS) __NEXT_DATA__.ids = nextCSS.ids
+  }
+
+  getChildContext () {
+    return { _documentProps: this.props }
+  }
+
+  render () {
+    return <html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </html>
+  }
+}
+
+export class Head extends Component {
+  static contextTypes = {
+    _documentProps: PropTypes.any
+  }
+
+  render () {
+    const { head, nextCSS } = this.context._documentProps
+    return <head>
+      {(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
+      {nextCSS ? <style dangerouslySetInnerHTML={{ __html: nextCSS.css }} /> : null}
+      {this.props.children}
+    </head>
+  }
+}
+
+export class Main extends Component {
+  static contextTypes = {
+    _documentProps: PropTypes.any
+  }
+
+  render () {
+    const { html, __NEXT_DATA__, staticMarkup } = this.context._documentProps
+    return <div>
+      <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
+      {staticMarkup ? null : <script dangerouslySetInnerHTML={{
+        __html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
+      }} />}
+    </div>
+  }
+}
+
+export class NextScript extends Component {
+  static contextTypes = {
+    _documentProps: PropTypes.any
+  }
+
+  render () {
+    const { staticMarkup, dev, cdn } = this.context._documentProps
+    return <div>
+      {staticMarkup ? null : createClientScript({ dev, cdn })}
+      <script type='text/javascript' src='/_next/commons.js' />
+    </div>
+  }
+}
+
+function createClientScript ({ dev, cdn }) {
+  if (dev) {
+    return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
+  }
+
+  if (!cdn) {
+    return <script type='text/javascript' src='/_next/next.bundle.js' />
+  }
+
+  return <script dangerouslySetInnerHTML={{ __html: `
+    (function () {
+      load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
+        if (err) load('/_next/next.bundle.js')
+      })
+      function load (src, fn) {
+        fn = fn || function () {}
+        var script = document.createElement('script')
+        script.src = src
+        script.onload = function () { fn(null) }
+        script.onerror = fn
+        script.crossorigin = 'anonymous'
+        document.body.appendChild(script)
+      }
+    })()
+  `}} />
+}

server/document.js

@@ -3,6 +3,7 @@ import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
 import isWindowsBash from 'is-windows-bash'
 import webpack from './build/webpack'
+import babel, { watch } from './build/babel'
 import read from './read'
 
 export default class HotReloader {
@@ -12,6 +13,7 @@ export default class HotReloader {
     this.middlewares = []
     this.webpackDevMiddleware = null
     this.webpackHotMiddleware = null
+    this.watcher = null
     this.initialized = false
     this.stats = null
     this.compilationErrors = null
@@ -33,7 +35,11 @@ export default class HotReloader {
   }
 
   async start () {
-    await this.prepareMiddlewares()
+    this.watch()
+    await Promise.all([
+      this.prepareMiddlewares(),
+      babel(this.dir, { dev: true })
+    ])
     this.stats = await this.waitUntilValid()
   }
 
@@ -163,6 +169,26 @@ export default class HotReloader {
   send (action, ...args) {
     this.webpackHotMiddleware.publish({ action, data: args })
   }
+
+  watch () {
+    const onChange = (path) => {
+      babel(this.dir, { dev: true })
+      .then(() => {
+        const f = join(this.dir, '.next', 'dist', relative(this.dir, path))
+        delete require.cache[f]
+        this.send('hardReload')
+      })
+    }
+
+    this.watcher = watch(this.dir)
+    this.watcher
+    .on('add', onChange)
+    .on('change', onChange)
+    .on('unlink', onChange)
+    .on('error', (err) => {
+      console.error(err)
+    })
+  }
 }
 
 function deleteCache (path) {