Fix the old HMR issue

kokororin · Sep 9, 2017 · b9d6af4 · b9d6af4
1 parent 7b25df8
commit b9d6af4
Show file tree

Hide file tree

Showing 10 changed files with 454 additions and 145 deletions.
diff --git a/build/dev-server.js b/build/dev-server.js
diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
@@ -19,8 +19,8 @@ module.exports = {
   entry: [
     'babel-polyfill',
     'react-hot-loader/patch',
-    'webpack-hot-middleware/client?reload=true',
     'whatwg-fetch',
+    'classlist-polyfill',
     './src/index'
   ],
   cache: true,

diff --git a/build/webpack.config.prod.js b/build/webpack.config.prod.js
@@ -10,6 +10,7 @@ module.exports = {
   entry: [
     'babel-polyfill',
     'whatwg-fetch',
+    'classlist-polyfill',
     path.join(__dirname, '../src/index')
   ],
   cache: false,

diff --git a/build/webpack.config.test.js b/build/webpack.config.test.js
@@ -5,6 +5,7 @@ module.exports = {
   entry: [
     'babel-polyfill',
     'whatwg-fetch',
+    'classlist-polyfill',
     path.join(__dirname, '../src/index')
   ],
   devtool: 'eval',

diff --git a/package.json b/package.json
@@ -1,8 +1,7 @@
 {
   "name": "pixiv.moe",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Source code of https://pixiv.moe",
-  "main": "server.js",
   "scripts": {
     "clean": "rimraf dist/*",
     "copy": "copyfiles -f ./src/index.html ./src/CNAME ./dist",
@@ -12,7 +11,7 @@
     "lint": "eslint --max-warnings 0 ./src",
     "lint:fix": "eslint --fix ./src",
     "posttest": "npm run lint",
-    "start": "cross-env NODE_ENV=development node build/dev-server.js",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --progress --config build/webpack.config.js",
     "test": "cross-env NODE_ENV=test karma start && npm run test:api",
     "test:watch": "cross-env NODE_ENV=test karma start --autoWatch=true --singleRun=false",
     "test:api": "cross-env NODE_ENV=test:mocha mocha --compilers js:babel-register --require babel-polyfill --timeout 30000 test/**/*.mocha.js",
@@ -60,7 +59,6 @@
     "eslint-loader": "^1.9.0",
     "eslint-plugin-react": "^7.2.1",
     "expect": "^1.20.2",
-    "express": "^4.15.4",
     "fetch-mock": "^5.12.2",
     "file-loader": "^0.11.2",
     "gh-pages": "^1.0.0",
@@ -76,7 +74,6 @@
     "karma-mocha-reporter": "^2.0.0",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^2.0.4",
-    "log-update": "^2.1.0",
     "minimist": "^1.2.0",
     "mocha": "^3.5.0",
     "nock": "^9.0.14",
@@ -96,8 +93,7 @@
     "url-loader": "^0.5.9",
     "webpack": "^3.5.5",
     "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.18.2",
+    "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
@@ -122,7 +118,6 @@
     "react-modal": "^2.2.4",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.1.2",
-    "react-router-redux": "next",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.2",
     "redux-thunk": "^2.1.0",

diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js
@@ -1,16 +1,12 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'react-router-redux';
-import { Provider } from 'react-redux';
-import injectTapEventPlugin from 'react-tap-event-plugin';
+import { Router, Route, Switch } from 'react-router-dom';
 import 'react-mdl/extra/material.js';
 import 'material-design-icons/iconfont/material-icons.css';
 import '@/styles/mdl/material-design-lite.scss';
 import '@/styles/Base.scss';
 import '@/styles/Reset.scss';
-import 'classlist-polyfill';
 
-import { configureStore, history } from '@/stores';
+import { history } from '@/stores';
 import {
   GalleryContainer,
   IllustContainer,
@@ -19,33 +15,28 @@ import {
 } from '@/containers';
 import { ScrollContext, TrackPageView } from '@/components';
 
-injectTapEventPlugin();
-const store = configureStore();
-
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
     return (
-      <Provider store={store}>
-        <ConnectedRouter history={history}>
-          <ScrollContext>
-            <TrackPageView>
-              <Switch>
-                <Route exact path="/" component={GalleryContainer} />
-                <Route
-                  path="/illust/:illustId(\d+)"
-                  component={IllustContainer}
-                />
-                <Route path="/:illustId(\d+)" component={RedirectContainer} />
-                <Route component={NotFoundContainer} />
-              </Switch>
-            </TrackPageView>
-          </ScrollContext>
-        </ConnectedRouter>
-      </Provider>
+      <Router history={history}>
+        <ScrollContext>
+          <TrackPageView>
+            <Switch>
+              <Route exact path="/" component={GalleryContainer} />
+              <Route
+                path="/illust/:illustId(\d+)"
+                component={IllustContainer}
+              />
+              <Route path="/:illustId(\d+)" component={RedirectContainer} />
+              <Route component={NotFoundContainer} />
+            </Switch>
+          </TrackPageView>
+        </ScrollContext>
+      </Router>
     );
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,15 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContainer as Root } from 'react-hot-loader';
+import { Provider } from 'react-redux';
+import injectTapEventPlugin from 'react-tap-event-plugin';
 
-import { AppContainer } from '@/containers';
+import { configureStore } from '@/stores';
+import AppContainer from '@/containers/AppContainer';
+
+injectTapEventPlugin();
+
+const store = configureStore();
 
 // Render the main component into the dom
 const render = Component => {
   ReactDOM.render(
-    <Root>
-      <Component />
-    </Root>,
+    <Provider store={store}>
+      <Root>
+        <Component />
+      </Root>
+    </Provider>,
     document.getElementById('app')
   );
 };
@@ -18,6 +27,7 @@ render(AppContainer);
 
 if (module.hot) {
   module.hot.accept('@/containers/AppContainer', () => {
-    render(AppContainer);
+    const NextAppContainer = require('@/containers/AppContainer').default;
+    render(NextAppContainer);
   });
 }
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux';
-import { routerReducer } from 'react-router-redux';
 
 import gallery from '@/reducers/gallery';
 import illust from '@/reducers/illust';
 
 const reducers = combineReducers({
   gallery,
-  illust,
-  router: routerReducer
+  illust
 });
 
 export default reducers;
diff --git a/src/stores/index.js b/src/stores/index.js
@@ -1,17 +1,13 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import createHistory from 'history/createBrowserHistory';
-import { routerMiddleware } from 'react-router-redux';
 
 import rootReducer from '@/reducers';
 
 // Create a history of your choosing (we're using a browser history in this case)
 export const history = createHistory();
 // Build the middleware for intercepting and dispatching navigation actions
-const createStoreWithMiddleware = applyMiddleware(
-  thunkMiddleware,
-  routerMiddleware(history)
-)(createStore);
+const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
 
 export function configureStore(initialState) {
   let store;