Hot code reloading

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

@@ -3,7 +3,8 @@ import { exec } from 'child_process'
 import { resolve, join } 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'
 import { exists } from 'mz/fs'
 
 const argv = parseArgs(process.argv.slice(2), {
@@ -25,9 +26,10 @@ const open = url => {
 
 const dir = resolve(argv._[0] || '.')
 
-build(dir)
-.then(async () => {
-  const srv = new Server({ dir, dev: true })
+webpack(dir, { hotReload: true })
+.then(async (compiler) => {
+  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(window.location.href, { Component })
+export const router = new Router(window.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

@@ -67,6 +67,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'))
@@ -98,7 +108,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'))
@@ -117,7 +141,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'))
@@ -179,6 +217,7 @@ gulp.task('clean-test', () => {
 gulp.task('default', [
   'compile',
   'build',
+  'copy',
   'test',
   'watch'
 ])
@@ -187,6 +226,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 = {
@@ -51,7 +52,15 @@ export default class App extends Component {
 
   render () {
     const { Component, props } = this.state
-    return React.createElement(Component, { ...props })
+
+    if (typeof window === 'undefined') {
+      // workaround for https://github.com/gaearon/react-hot-loader/issues/283
+      return <Component {...props} />
+    }
+
+    return <AppContainer>
+      <Component {...props} />
+    </AppContainer>
   }
 }
 

package.json

@@ -33,20 +33,25 @@
     "glob-promise": "1.0.6",
     "gulp-benchmark": "^1.1.1",
     "htmlescape": "1.1.1",
+    "loader-utils": "0.2.16",
     "minimist": "1.2.0",
     "mkdirp-then": "1.2.0",
     "mz": "2.4.0",
     "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",
+    "write-file-webpack-plugin": "3.3.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.0.0",
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
     "del": "2.2.2",
     "gulp": "3.9.1",
     "gulp-ava": "0.14.1",

server/build/index.js

@@ -1,26 +1,21 @@
-import { resolve } from 'path'
-import glob from 'glob-promise'
-import transpile from './transpile'
-import bundle from './bundle'
+import webpack from './webpack'
 
 export default async function build (dir) {
-  const dstDir = resolve(dir, '.next')
-  const templateDir = resolve(__dirname, '..', '..', 'lib', 'pages')
+  const compiler = await webpack(dir)
 
-  // create `.next/pages/_error.js`
-  // which may be overwriten by the user script, `pages/_error.js`
-  const templatPaths = await glob('**/*.js', { cwd: templateDir })
-  await Promise.all(templatPaths.map(async (p) => {
-    await transpile(resolve(templateDir, p), resolve(dstDir, 'pages', p))
-  }))
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) return reject(err)
 
-  const paths = await glob('**/*.js', { cwd: dir, ignore: 'node_modules/**' })
-  await Promise.all(paths.map(async (p) => {
-    await transpile(resolve(dir, p), resolve(dstDir, p))
-  }))
+      const jsonStats = stats.toJson()
+      if (jsonStats.errors.length > 0) {
+        const error = new Error(jsonStats.errors[0])
+        error.errors = jsonStats.errors
+        error.warnings = jsonStats.warnings
+        return reject(error)
+      }
 
-  const pagePaths = await glob('pages/**/*.js', { cwd: dstDir })
-  await Promise.all(pagePaths.map(async (p) => {
-    await bundle(resolve(dstDir, p), resolve(dstDir, '_bundles', p))
-  }))
+      resolve()
+    })
+  })
 }

server/build/loaders/emit-file-loader.js

@@ -0,0 +1,16 @@
+import loaderUrils from 'loader-utils'
+
+module.exports = function (content) {
+  this.cacheable()
+
+  const query = loaderUrils.parseQuery(this.query)
+  const name = query.name || '[hash].[ext]'
+  const context = query.context || this.options.context
+  const regExp = query.regExp
+  const opts = { context, content, regExp }
+  const interpolatedName = loaderUrils.interpolateName(this, name, opts)
+
+  this.emitFile(interpolatedName, content)
+
+  return content
+}

server/build/loaders/hot-self-accept-loader.js

@@ -0,0 +1,14 @@
+
+module.exports = function (content) {
+  this.cacheable()
+
+  return content + `
+    if (module.hot) {
+      module.hot.accept()
+      if ('idle' !== module.hot.status()) {
+        const Component = module.exports.default || module.exports
+        next.router.notify({ Component })
+      }
+    }
+  `
+}