Replace depreciated react-hot-loader

bluedaniel · Oct 12, 2015 · d51c774 · d51c774
1 parent f28baa5
commit d51c774
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 34 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,17 @@
+{
+  "stage": 1,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }
+      }
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 !.eslintrc
 !.jscsrc
 !.scss-lint.yml
+!.babelrc
 !.eslintignore
 
 # Logs

diff --git a/app/index-dev.html b/app/index-dev.html
@@ -9,7 +9,7 @@
 
 <body>
   <div id="app"></div>
-  <script src="http://localhost:2992/bundle.js"></script>
+  <script src="http://localhost:3000/bundle.js"></script>
   <script src="http://localhost:35729/livereload.js"></script>
 </body>
 

diff --git a/gulpfile.babel.js/config/webpack.config.js b/gulpfile.babel.js/config/webpack.config.js
@@ -8,9 +8,8 @@ export default function(opts) {
   var entry = [ "./app/scripts/index" ];
 
   var loaders = {
-    "jsx": opts.hotComponents ? ["react-hot", "babel-loader?optional[]=runtime&stage=1"] : "babel-loader?optional[]=runtime&stage=1",
-    "js": {
-      loader: "babel-loader?optional[]=runtime&stage=1",
+    "jsx|js": {
+      loader: "babel-loader",
       exclude: /(node_modules|bower_components)/
     },
     "json": "json-loader",
@@ -21,6 +20,7 @@ export default function(opts) {
   };
 
   var plugins = [
+    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.IgnorePlugin(/vertx/),
     new webpack.PrefetchPlugin("react"),
     new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
@@ -54,19 +54,20 @@ export default function(opts) {
       new webpack.HotModuleReplacementPlugin()
     );
     entry.unshift(
-      "webpack-dev-server/client?http://0.0.0.0:2992",
-      "webpack/hot/only-dev-server"
+      "webpack-hot-middleware/client?path=http://localhost:" + (process.env.PORT || 3000) + "/__webpack_hmr"
     );
   }
 
+  var dist = path.resolve(__dirname, "../../dist/");
+
   return {
     entry: entry,
 
     output: {
-      path: path.resolve(__dirname, "../../dist/"),
+      path: dist,
       filename: "bundle.js",
-      publicPath: opts.devServer ? "http://localhost:2992/" : path.resolve(__dirname, "../../dist"),
-      contentBase: path.resolve(__dirname, "../../dist")
+      publicPath: opts.devServer ? "http://localhost:" + (process.env.PORT || 3000) + "/" : dist,
+      contentBase: dist
     },
 
     target: "atom",
@@ -89,17 +90,6 @@ export default function(opts) {
       }
     },
 
-    plugins: plugins,
-
-    devServer: {
-      hot: true,
-      port: 2992,
-      progress: true,
-      contentBase: path.resolve(__dirname, "../../dist"),
-      stats: {
-        cached: false,
-        exclude: [/node_modules[\\\/]react(-router)?[\\\/]/]
-      }
-    }
+    plugins: plugins
   };
 };
diff --git a/gulpfile.babel.js/tasks/build-development.js b/gulpfile.babel.js/tasks/build-development.js
@@ -1,10 +1,9 @@
 import gulp from "gulp";
 import gulpSequence from "gulp-sequence";
 
-process.env.NODE_ENV = "development";
-
 gulp.task("build:development", (cb) =>
   gulpSequence(
+    "set-dev-node-env",
     "clean",
     "html",
     "images",
@@ -15,3 +14,7 @@ gulp.task("build:development", (cb) =>
     ["electron", "watch"],
     cb)
 );
+
+gulp.task("set-dev-node-env", function() {
+  return process.env.NODE_ENV = "development";
+});
diff --git a/gulpfile.babel.js/tasks/build-production.js b/gulpfile.babel.js/tasks/build-production.js
@@ -3,6 +3,7 @@ import gulpSequence from "gulp-sequence";
 
 gulp.task("build:production", (cb) =>
   gulpSequence(
+    "set-prod-node-env",
     "clean",
     "html",
     "images",
@@ -13,3 +14,7 @@ gulp.task("build:production", (cb) =>
     "package",
     cb)
 );
+
+gulp.task("set-prod-node-env", function() {
+  return process.env.NODE_ENV = "production";
+});
diff --git a/gulpfile.babel.js/tasks/package.js b/gulpfile.babel.js/tasks/package.js
@@ -12,7 +12,7 @@ var DEFAULT_OPTS = {
   dir: "./",
   icon: "app/images/app.icns",
   name: "Kakapo",
-  version: "0.33.6",
+  version: "0.33.7",
   ignore: [
     "/bower.json",
     "/bower_components($|/)",

diff --git a/gulpfile.babel.js/tasks/webpack-development.js b/gulpfile.babel.js/tasks/webpack-development.js
@@ -1,14 +1,23 @@
 import gulp from "gulp";
 import gutil from "gulp-util";
+import express from "express";
+import path from "path";
 import webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
 import config from "../config/webpack-hot-server.config";
 
+var port = process.env.PORT || 3000;
+var url = "http://localhost:" + port
+
 gulp.task("webpack:development", () => {
-  new WebpackDevServer(webpack(config), config.devServer).listen(config.devServer.port, "localhost", function(err) {
-    if (err) {
-      throw new gutil.PluginError("webpack-dev-server", err);
-    }
-    gutil.log("[webpack-dev-server]", "http://localhost:" + config.devServer.port + "/index.html");
-  });
+  var app = express();
+  var compiler = webpack(config);
+
+  express()
+    .use(require("webpack-dev-middleware")(compiler, {
+      noInfo: true,
+      publicPath: config.output.publicPath
+    }))
+    .use(require("webpack-hot-middleware")(compiler))
+    .use(express.static(path.resolve(__dirname, "../../dist")))
+    .listen(port, () => gutil.log("Server started on " + gutil.colors.green(url)));
 });
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "babel-core": "^5.8.25",
     "babel-eslint": "^4.1.2",
     "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
     "babel-runtime": "^5.8.25",
     "bower": "^1.5.3",
     "classnames": "^2.1.5",
@@ -16,11 +17,12 @@
     "css-loader": "^0.19.0",
     "del": "^2.0.2",
     "electron-packager": "^5.1.0",
-    "electron-prebuilt": "^0.33.6",
+    "electron-prebuilt": "^0.33.7",
     "electron-windows-installer": "^1.1.0",
     "eslint": "^1.6.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.5.1",
+    "express": "^4.13.3",
     "file-loader": "^0.8.4",
     "fs": "0.0.2",
     "gulp": "^3.9.0",
@@ -52,7 +54,6 @@
     "object-assign": "^4.0.1",
     "radium": "^0.14.1",
     "rcedit": "^0.3.0",
-    "react": "^0.14.0",
     "react-addons-css-transition-group": "^0.14.0",
     "react-addons-pure-render-mixin": "^0.14.0",
     "react-addons-transition-group": "^0.14.0",
@@ -62,6 +63,9 @@
     "react-intl": "^1.2.0",
     "react-proxy-loader": "^0.3.4",
     "react-router": "^1.0.0-rc3",
+    "react-transform-hmr": "^1.0.1",
+    "react": "^0.14.0",
+    "reflux": "^0.2.12",
     "request": "^2.65.0",
     "require-dir": "^0.3.0",
     "rx": "^4.0.0",
@@ -70,7 +74,8 @@
     "uuid": "^2.0.1",
     "validator": "^4.1.0",
     "webpack": "^1.11.0",
-    "webpack-dev-server": "^1.12.0",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.4.1",
     "ytdl-core": "^0.6.1"
   },
   "scripts": {