hot-reload: initial

Author: nkzawa

bin/next

@@ -26,6 +26,6 @@ const bin = resolve(__dirname, 'next-' + cmd)
 const proc = spawn(bin, args, { stdio: 'inherit', customFds: [0, 1, 2] })
 proc.on('close', (code) => process.exit(code))
 proc.on('error', (err) => {
-  console.log(err)
+  console.error(err)
   process.exit(1)
 })

bin/next-dev

@@ -4,6 +4,8 @@ import { resolve } from 'path'
 import parseArgs from 'minimist'
 import Server from '../server'
 import build from '../server/build'
+import HotReloader from '../server/hot-reloader'
+import webpack from '../server/build/webpack'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -20,7 +22,9 @@ const dir = resolve(argv._[0] || '.')
 
 build(dir)
 .then(async () => {
-  const srv = new Server({ dir, dev: true })
+  const compiler = await webpack(dir, { hotReload: true })
+  const hotReloader = new HotReloader(compiler)
+  const srv = new Server({ dir, dev: true, hotReloader })
   await srv.start(argv.port)
   console.log('> Ready on http://localhost:%d', argv.port);
 })

client/next-dev.js

@@ -1 +1,7 @@
-import './next'
+import 'react-hot-loader/patch'
+import 'webpack-dev-server/client?http://localhost:3030'
+import * as next from './next'
+
+module.exports = next
+
+window.next = next

client/next.js

@@ -13,10 +13,11 @@ const {
 const App = app ? evalScript(app).default : DefaultApp
 const Component = evalScript(component).default
 
-const router = new Router(location.href, { Component })
+export const router = new Router(location.href, { Component })
+
 const headManager = new HeadManager()
 const container = document.getElementById('__next')
 const appProps = { Component, props, router, headManager }
 
 StyleSheet.rehydrate(classNames)
-render(createElement(App, { ...appProps }), container)
+render(createElement(App, appProps), container)

gulpfile.js

@@ -65,6 +65,16 @@ gulp.task('compile-test', () => {
   .pipe(notify('Compiled test files'))
 })
 
+gulp.task('copy', [
+  'copy-pages',
+  'copy-test-fixtures'
+]);
+
+gulp.task('copy-pages', () => {
+  return gulp.src('pages/**/*.js')
+  .pipe(gulp.dest('dist/pages'))
+})
+
 gulp.task('copy-test-fixtures', () => {
   return gulp.src('test/fixtures/**/*')
   .pipe(gulp.dest('dist/test/fixtures'))
@@ -83,7 +93,21 @@ gulp.task('build-dev-client', ['compile-lib', 'compile-client'], () => {
   .src('dist/client/next-dev.js')
   .pipe(webpack({
     quiet: true,
-    output: { filename: 'next-dev.bundle.js' }
+    output: { filename: 'next-dev.bundle.js' },
+    module: {
+      loaders: [
+        {
+          test: /eval-script\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel',
+          query: {
+            plugins: [
+              'babel-plugin-transform-remove-strict-mode'
+            ]
+          }
+        }
+      ]
+    },
   }))
   .pipe(gulp.dest('dist/client'))
   .pipe(notify('Built dev client'))
@@ -102,7 +126,21 @@ gulp.task('build-release-client', ['compile-lib', 'compile-client'], () => {
         }
       }),
       new webpack.webpack.optimize.UglifyJsPlugin()
-    ]
+    ],
+    module: {
+      loaders: [
+        {
+          test: /eval-script\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel',
+          query: {
+            plugins: [
+              'babel-plugin-transform-remove-strict-mode'
+            ]
+          }
+        }
+      ]
+    }
   }))
   .pipe(gulp.dest('dist/client'))
   .pipe(notify('Built release client'))
@@ -157,6 +195,7 @@ gulp.task('clean-test', () => {
 gulp.task('default', [
   'compile',
   'build',
+  'copy',
   'test',
   'watch'
 ])
@@ -165,6 +204,7 @@ gulp.task('release', (cb) => {
   sequence('clean', [
     'compile',
     'build-release',
+    'copy',
     'test'
   ], 'clean-test', cb)
 })

lib/app.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react'
+import { AppContainer } from 'react-hot-loader'
 
 export default class App extends Component {
   static childContextTypes = {
@@ -28,6 +29,7 @@ export default class App extends Component {
       const props = data.props || this.state.props
       const state = propsToState({
         ...data,
+        props,
         router
       })
 
@@ -50,7 +52,15 @@ export default class App extends Component {
 
   render () {
     const { Component, props } = this.state
-    return React.createElement(Component, { ...props })
+
+    if ('undefined' === typeof window) {
+      // workaround for https://github.com/gaearon/react-hot-loader/issues/283
+      return <Component { ...props }/>
+    }
+
+    return <AppContainer>
+      <Component { ...props }/>
+    </AppContainer>
   }
 }
 

package.json

@@ -36,13 +36,16 @@
     "path-match": "1.2.4",
     "react": "15.3.2",
     "react-dom": "15.3.2",
+    "react-hot-loader": "3.0.0-beta.6",
     "resolve": "1.1.7",
     "run-sequence": "1.2.2",
     "send": "0.14.1",
     "url": "0.11.0",
-    "webpack": "1.13.2"
+    "webpack": "1.13.2",
+    "webpack-dev-server": "1.16.2"
   },
   "devDependencies": {
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
     "del": "2.2.2",
     "gulp": "3.9.1",
     "gulp-ava": "0.14.1",

lib/pages/_error.js pages/_error.js

@@ -5,7 +5,7 @@ import bundle from './bundle'
 
 export default async function build (dir) {
   const dstDir = resolve(dir, '.next')
-  const templateDir = resolve(__dirname, '..', '..', 'lib', 'pages')
+  const templateDir = resolve(__dirname, '..', '..', 'pages')
 
   // create `.next/pages/_error.js`
   // which may be overwriten by the user sciprt, `pages/_error.js`

server/build/index.js

@@ -0,0 +1,105 @@
+import { resolve } from 'path'
+import webpack from 'webpack'
+import glob from 'glob-promise'
+
+export default async function createCompiler(dir, { hotReload = false } = {}) {
+  const pages = await glob('**/*.js', { cwd: resolve(dir, 'pages') })
+
+  const entry = {}
+  const defaultEntries = hotReload ? ['webpack/hot/only-dev-server'] : []
+  for (const p of pages) {
+    entry[p] = defaultEntries.concat(['./pages/' + p])
+  }
+
+  if (!entry['_error.js']) {
+    entry._error = resolve(__dirname, '..', '..', 'pages', '_error.js')
+  }
+
+  const nodeModulesDir = resolve(__dirname, '..', '..', '..', 'node_modules')
+
+  const plugins = hotReload
+  ? [new webpack.HotModuleReplacementPlugin()]
+  : [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: { warnings: false },
+      sourceMap: false
+    })
+  ]
+
+  const babelRuntimePath = require.resolve('babel-runtime/package')
+  .replace(/[\\\/]package\.json$/, '');
+
+  const loaders = [{
+    test: /\.js$/,
+    loader: 'babel',
+    include: [
+      resolve(dir),
+      resolve(__dirname, '..', '..', 'pages')
+    ],
+    exclude: /node_modules/,
+    query: {
+      presets: ['es2015', 'react'],
+      plugins: [
+        'transform-async-to-generator',
+        'transform-object-rest-spread',
+        'transform-class-properties',
+        'transform-runtime',
+        [
+          'module-alias',
+          [
+            { src: `npm:${babelRuntimePath}`, expose: 'babel-runtime' },
+            { src: `npm:${require.resolve('react')}`, expose: 'react' },
+            { src: `npm:${require.resolve('../../lib/link')}`, expose: 'next/link' },
+            { src: `npm:${require.resolve('../../lib/css')}`, expose: 'next/css' },
+            { src: `npm:${require.resolve('../../lib/head')}`, expose: 'next/head' }
+          ]
+        ]
+      ]
+    }
+  }]
+  .concat(hotReload ? [{
+    test: /\.js$/,
+    loader: 'hot-self-accept-loader',
+    include: resolve(dir, 'pages')
+  }] : [])
+
+  return webpack({
+    context: dir,
+    entry,
+    output: {
+      path: resolve(dir, '.next', '_bundles', 'pages'),
+      filename: '[name]',
+      libraryTarget: 'commonjs2',
+      publicPath: hotReload ? 'http://localhost:3030/' : null
+    },
+    externals: [
+      'react',
+      'react-dom',
+      {
+        [require.resolve('react')]: 'react',
+        [require.resolve('../../lib/link')]: 'next/link',
+        [require.resolve('../../lib/css')]: 'next/css',
+        [require.resolve('../../lib/head')]: 'next/head'
+      }
+    ],
+    resolve: {
+      root: [
+        nodeModulesDir,
+        resolve(dir, 'node_modules')
+      ]
+    },
+    resolveLoader: {
+      root: [
+        nodeModulesDir,
+        resolve(__dirname, '..', 'loaders')
+      ]
+    },
+    plugins,
+    module: {
+      preLoaders: [
+        { test: /\.json$/, loader: 'json-loader' }
+      ],
+      loaders
+    }
+  })
+}

server/build/webpack.js

@@ -0,0 +1,44 @@
+import WebpackDevServer from 'webpack-dev-server'
+
+export default class HotReloader {
+  constructor (compiler) {
+    this.server = new WebpackDevServer(compiler, {
+      publicPath: '/',
+      hot: true,
+      noInfo: true,
+      clientLogLevel: 'warning'
+    })
+  }
+
+  async start () {
+    await this.waitBuild()
+    await this.listen()
+  }
+
+  async waitBuild () {
+    const stats = await new Promise((resolve) => {
+      this.server.middleware.waitUntilValid(resolve)
+    })
+
+    const jsonStats = stats.toJson()
+    if (jsonStats.errors.length > 0) {
+      const err = new Error(jsonStats.errors[0])
+      err.errors = jsonStats.errors
+      err.warnings = jsonStats.warnings
+      throw err
+    }
+  }
+
+  listen () {
+    return new Promise((resolve, reject) => {
+      this.server.listen(3030, (err) => {
+        if (err) return reject(err)
+        resolve()
+      })
+    })
+  }
+
+  get fileSystem () {
+    return this.server.middleware.fileSystem
+  }
+}