Upgrade to react-hot-loader 3

gatsbyjs · Sep 23, 2016 · 5185c3a · 5185c3a
1 parent c542bb5
commit 5185c3a
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 74 deletions.
diff --git a/lib/intermediate-representation-dir/app.js b/lib/intermediate-representation-dir/app.js
@@ -1,38 +1,27 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { applyRouterMiddleware, Router, browserHistory } from 'react-router'
-import useScroll from 'react-router-scroll/lib/useScroll'
-import { onRouteUpdate } from 'gatsby-browser'
+import { AppContainer } from 'react-hot-loader'
 
 const rootElement = document.getElementById(`react-mount`)
-
-let currentLocation
-
-browserHistory.listen(location => {
-  currentLocation = location
-})
-
-function renderApp () {
-  const rootRoute = require(`./child-routes`)
-
-  ReactDOM.render((
-    <Router
-      history={browserHistory}
-      routes={rootRoute}
-      render={applyRouterMiddleware(useScroll())}
-      onUpdate={() => {if (onRouteUpdate) { onRouteUpdate(currentLocation) }}}
-    />
-  ), rootElement)
-}
-
-renderApp()
+let Root = require('./root')
+if (Root.default) { Root = Root.default }
+ReactDOM.render(
+  <AppContainer>
+    <Root />
+  </AppContainer>,
+  rootElement
+)
 
 if (module.hot) {
-  module.hot.accept(`./child-routes`, () => {
-    setTimeout(() => {
-      ReactDOM.unmountComponentAtNode(rootElement)
-      renderApp()
-    })
+  module.hot.accept(`./root`, () => {
+    let NextRoot = require('./root')
+    if (NextRoot.default) { NextRoot = NextRoot.default }
+    ReactDOM.render(
+      <AppContainer>
+        <NextRoot />
+      </AppContainer>,
+      rootElement
+    )
   })
 }
 
diff --git a/lib/intermediate-representation-dir/root.js b/lib/intermediate-representation-dir/root.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { applyRouterMiddleware, Router, browserHistory } from 'react-router'
+import useScroll from 'react-router-scroll/lib/useScroll'
+import { onRouteUpdate } from 'gatsby-browser'
+
+const rootRoute = require(`./child-routes`)
+
+let currentLocation
+
+browserHistory.listen(location => {
+  currentLocation = location
+})
+
+const Root = () => (
+  <Router
+    history={browserHistory}
+    routes={rootRoute}
+    render={applyRouterMiddleware(useScroll())}
+    onUpdate={() => {if (onRouteUpdate) { onRouteUpdate(currentLocation) }}}
+  />
+)
+
+export default Root
diff --git a/lib/utils/babel-config.js b/lib/utils/babel-config.js
@@ -128,7 +128,7 @@ export default function babelConfig (program, stage) {
     defaultConfig()
 
   if (stage === `develop`) {
-    babelrc.presets.unshift(`react-hmre`)
+    babelrc.plugins.unshift(`react-hot-loader/babel`)
   }
 
   if (!babelrc.hasOwnProperty(`cacheDirectory`)) {

diff --git a/lib/utils/develop.js b/lib/utils/develop.js
@@ -10,12 +10,12 @@ import Negotiator from 'negotiator'
 import parsePath from 'parse-filepath'
 import _ from 'lodash'
 import webpackRequire from 'webpack-require'
-import WebpackPlugin from 'hapi-webpack-plugin'
 import opn from 'opn'
 import fs from 'fs'
 import glob from 'glob'
 import rl from 'readline'
 import GraphQL from 'hapi-graphql'
+import WebpackDevServer from 'webpack-dev-server'
 import { pagesDB } from './globals'
 
 import bootstrap from '../bootstrap'
@@ -28,14 +28,15 @@ const rlInterface = rl.createInterface({
 import webpackConfig from './webpack.config'
 const debug = require(`debug`)(`gatsby:application`)
 
-function startServer (program, launchPort) {
+function startServer (program) {
   const directory = program.directory
-  const serverPort = launchPort || program.port
 
   // Load pages for the site.
   return bootstrap(program, (err, schema) => {
-  //return globPages(directory, (err, pages) => {
-    const compilerConfig = webpackConfig(program, directory, `develop`, program.port)
+    // Generate random port for webpack to listen on.
+    // Perhaps should check if port is open.
+    const webpackPort = Math.round(Math.random() * 1000 + 1000)
+    const compilerConfig = webpackConfig(program, directory, `develop`, webpackPort)
 
     const compiler = webpack(compilerConfig.resolve())
 
@@ -58,11 +59,42 @@ function startServer (program, launchPort) {
       const HTML = factory()
       debug(`Configuring develop server`)
 
+      const webpackDevServer = new WebpackDevServer(compiler, {
+        hot: true,
+        quiet: true,
+        noInfo: true,
+        host: program.host,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+        },
+        stats: {
+          colors: true,
+        },
+      })
+
+      // Start webpack-dev-server
+      webpackDevServer.listen(webpackPort, program.host)
+
       const server = new Hapi.Server()
 
       server.connection({
         host: program.host,
-        port: serverPort,
+        port: program.port,
+      })
+
+      // As our two processes (Webpack-Dev-Server + this Hapi.js server) are
+      // running on different ports, we proxy requests for the bundle.js to
+      // Webpack.
+      server.route({
+        method: 'GET',
+        path: '/commons.js',
+        handler: {
+          proxy: {
+            uri: `http://0.0.0.0:${webpackPort}/commons.js`,
+            passThrough: true,
+            xforward: true,
+          },
+        },
       })
 
       server.route({
@@ -144,25 +176,6 @@ function startServer (program, launchPort) {
         }
       })
 
-      const assets = {
-        noInfo: true,
-        reload: true,
-        publicPath: compilerConfig._config.output.publicPath,
-      }
-      const hot = {
-        hot: true,
-        quiet: true,
-        noInfo: true,
-        host: program.host,
-        headers: {
-          'Access-Control-Allow-Origin': `*`,
-        },
-        stats: {
-          colors: true,
-        },
-      }
-
-
       return server.register([
         // Add GraphQL support
         {
@@ -178,14 +191,6 @@ function startServer (program, launchPort) {
             },
           },
         },
-        {
-          register: WebpackPlugin,
-          options: {
-            compiler,
-            assets,
-            hot,
-          },
-        },
       ], (er) => {
         if (er) {
           console.log(er)
@@ -196,7 +201,7 @@ function startServer (program, launchPort) {
           if (e) {
             if (e.code === `EADDRINUSE`) {
               // eslint-disable-next-line max-len
-              console.log(`Unable to start Gatsby on port ${serverPort} as there's already a process listing on that port.`)
+              console.log(`Unable to start Gatsby on port ${program.port} as there's already a process listing on that port.`)
             } else {
               console.log(e)
             }
@@ -230,12 +235,11 @@ module.exports = (program) => {
       const question = `Something is already running at port ${program.port} \nWould you like to run the app at another port instead? [Y/n] `
 
       return rlInterface.question(question, (answer) => {
-        let launchPort = program.port
         if (answer.length === 0 || answer.match(/^yes|y$/i)) {
-          launchPort = _port
+          program.port = _port // eslint-disable-line no-param-reassign
         }
 
-        return startServer(program, launchPort)
+        return startServer(program)
       })
     }
 

diff --git a/lib/utils/webpack.config.js b/lib/utils/webpack.config.js
@@ -79,7 +79,9 @@ module.exports = (program, directory, suppliedStage, webpackPort = 1500, pages =
       case `develop`:
         return {
           commons: [
-            require.resolve(`webpack-hot-middleware/client`),
+            `${require.resolve('webpack-dev-server/client')}?http://${program.host}:${webpackPort}/`,
+            require.resolve(`webpack/hot/only-dev-server`),
+            require.resolve(`react-hot-loader/patch`),
             `${directory}/.intermediate-representation/app`,
           ],
         }

diff --git a/package.json b/package.json
@@ -20,13 +20,10 @@
     "babel-core": "^6.14.0",
     "babel-loader": "^6.2.5",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-tcomb": "^0.3.13",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-babili": "0.0.3",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
-    "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
     "boom": "^2.7.2",
     "bundle-loader": "^0.5.4",
@@ -49,7 +46,6 @@
     "graphql-relay": "^0.4.3",
     "hapi": "^8.5.1",
     "hapi-graphql": "^1.0.1",
-    "hapi-webpack-plugin": "^1.3.0",
     "highlight.js": "^9.6.0",
     "history": "^2.1.2",
     "invariant": "^2.2.1",
@@ -80,7 +76,7 @@
     "react": "^15.3.2",
     "react-document-title": "^2.0.1",
     "react-dom": "^15.3.2",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "^3.0.0-beta.5",
     "react-router": "^2.8.1",
     "react-router-scroll": "^0.3.2",
     "remark": "^6.0.1",
@@ -97,7 +93,7 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-configurator": "^0.3.0",
-    "webpack-hot-middleware": "^2.12.2",
+    "webpack-dev-server": "^1.16.1",
     "webpack-md5-hash": "0.0.5",
     "webpack-require": "0.0.16",
     "webpack-stats-plugin": "^0.1.3",