Merge pull request #1021 from ant-design/feat-hmr

Feat hmr

nico.js

@@ -6,6 +6,7 @@ var inspect = require('util').inspect;
 var Busboy = require('busboy');
 var chalk = require('chalk');
 var webpackMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
 var webpackConfig = require('./webpack.config');
 var webpackCompiler = webpack(webpackConfig);
 var handler;
@@ -89,29 +90,50 @@ exports.middlewares = [
     }
   },
   {
-  name: 'webpackDevMiddleware',
-  filter: /\.(js|css)(\.map)?(\?.*)?$/,
-  handle: function(req, res, next) {
-    handler = handler || webpackMiddleware(webpackCompiler, {
-      publicPath: '/dist/',
-      lazy: false,
-      watchOptions: {
-        aggregateTimeout: 300,
-        poll: false
-      },
-      noInfo: true
-    });
-    try {
-      return handler(req, res, next);
-    } catch(e) {}
+    name: 'webpackDevMiddleware',
+    filter: /\.(js|css|json)(\.map)?(\?.*)?$/,
+    handle: function(req, res, next) {
+      handler = handler || webpackMiddleware(webpackCompiler, {
+        publicPath: webpackConfig.output.publicPath,
+        lazy: false,
+        watchOptions: {
+          aggregateTimeout: 300,
+          poll: false
+        },
+        noInfo: true
+      });
+      try {
+        return handler(req, res, next);
+      } catch(e) {}
+    }
+  },
+  {
+    name: 'webpackHotMiddleware',
+    filter: /.*/,
+    handle: webpackHotMiddleware(webpackCompiler)
   }
-}];
+];
 
 exports.writers = [
   'nico-jsx.PageWriter',
   'nico-jsx.StaticWriter',
   'nico-jsx.FileWriter'
 ];
+
+exports.watchFunc = function(e) {
+  console.log('reload: ' + e.filepath);
+  var post = e.post;
+  if (post && post.template === 'code' && post.id) {
+    var demoNode = $('#' + post.id);
+    if (demoNode[0]) {
+      ReactDOM.unmountComponentAtNode(demoNode[0]);
+      demoNode.next().remove().insertAfter(demoNode);
+      $(post.html).insertAfter(demoNode.next());
+    }
+  } else if (!(/\.js(x?)$/.test(post.filename))) {
+    location.reload();
+  }
+};
 // end settings }}
 
 process.on('uncaughtException', function(err) {

package.json

@@ -79,6 +79,7 @@
     "babel-plugin-add-module-exports": "^0.1.1",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
+    "babel-preset-react-hmre": "^1.1.0",
     "babel-preset-stage-0": "^6.1.18",
     "busboy": "^0.2.9",
     "chalk": "^1.1.0",
@@ -101,7 +102,7 @@
     "less-loader": "^2.2.0",
     "lesshint-antd": "^1.2.1",
     "lodash": "^4.1.0",
-    "nico-jsx": "~0.7.2",
+    "nico-jsx": "~0.8.2",
     "postcss-loader": "^0.8.0",
     "pre-commit": "1.x",
     "rc-scroll-anim": "^0.1.7",
@@ -117,7 +118,8 @@
     "values.js": "^1.0.3",
     "webpack": "^1.10.1",
     "webpack-babel-jest": "^1.0.0",
-    "webpack-dev-middleware": "^1.5.1"
+    "webpack-dev-middleware": "^1.5.1",
+    "webpack-hot-middleware": "^2.6.4"
   },
   "scripts": {
     "babel": "babel components index.js --out-dir lib",

webpack.config.js

@@ -4,7 +4,7 @@ var path = require('path');
 var pkg = require('./package');
 
 var entry = {};
-entry['demo'] = './scripts/demo.js';
+entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client'];
 
 module.exports = {
   entry: entry,
@@ -20,6 +20,7 @@ module.exports = {
 
   output: {
     path: path.join(process.cwd(), 'dist'),
+    publicPath: '/dist/',
     filename: '[name].js'
   },
 
@@ -34,7 +35,7 @@ module.exports = {
       loader: 'babel',
       query: {
         cacheDirectory: true,
-        presets: ['es2015', 'react', 'stage-0'],
+        presets: ['es2015', 'react', 'stage-0', 'react-hmre'],
         plugins: ['add-module-exports']
       }
     }, {
@@ -57,7 +58,10 @@ module.exports = {
   },
 
   plugins: [
-    new ExtractTextPlugin('[name].css')
+    new ExtractTextPlugin('[name].css'),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
   ],
 
   devtool: 'source-map'