Merge pull request #4 from PolygonFox/upgrade-dependencies

React upgrade

Author: hirako2000

config/webpack/dev.js

@@ -40,7 +40,7 @@ var config = {
       },
       {
         test: /\.tsx?$/,
-        loader: 'react-hot-loader!awesome-typescript-loader'
+        loader: 'react-hot-loader/webpack!awesome-typescript-loader'
       },
       {
         test: /\.jsx$/,

config/webpack/prod.js

@@ -46,7 +46,7 @@ var config = {
       },
       {
         test: /\.tsx?$/,
-        loader: 'react-hot-loader!awesome-typescript-loader'
+        loader: 'react-hot-loader/webpack!awesome-typescript-loader'
       },
       {
         test: /\.jsx$/,

package.json

@@ -59,13 +59,12 @@
     "@types/isomorphic-fetch": "0.0.34",
     "@types/jest": "^19.2.2",
     "@types/node": "^7.0.0",
-    "@types/react": "^15.0.0",
-    "@types/react-addons-test-utils": "^0.14.16",
-    "@types/react-dom": "^0.14.20",
-    "@types/react-helmet": "^5.0.0",
-    "@types/react-redux": "^4.4.35",
-    "@types/react-router": "^3.0.2",
-    "@types/react-router-redux": "^4.0.38",
+    "@types/react": "^16.0.34",
+    "@types/react-dom": "^16.0.3",
+    "@types/react-helmet": "^5.0.3",
+    "@types/react-redux": "^5.0.14",
+    "@types/react-router": "^4.0.20",
+    "@types/react-router-redux": "^5.0.11",
     "@types/redux": "^3.6.31",
     "@types/redux-devtools": "^3.0.36",
     "@types/redux-devtools-dock-monitor": "^1.1.29",
@@ -86,7 +85,7 @@
     "classnames": "^2.2.5",
     "cross-env": "^5.0.1",
     "css-loader": "^0.28.0",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.3.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "fetch-mock": "^5.8.1",
     "file-loader": "^0.11.1",
@@ -98,17 +97,16 @@
     "postcss-assets": "^4.1.0",
     "postcss-cssnext": "^2.9.0",
     "postcss-loader": "^1.2.2",
-    "react-addons-test-utils": "^15.5.1",
-    "react-hot-loader": "^1.3.1",
+    "react-hot-loader": "^3.1.3",
     "redux-mock-store": "^1.2.3",
     "rimraf": "^2.5.4",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.17.0",
     "stylelint": "^7.7.1",
     "ts-jest": "^20.0.6",
-    "tslint": "^4.3.1",
+    "tslint": "^5.9.1",
     "tslint-loader": "^3.3.0",
-    "tslint-react": "^2.3.0",
+    "tslint-react": "^3.4.0",
     "typescript": "^2.1.5",
     "url-loader": "^0.5.7",
     "webpack": "^2.4.1",
@@ -122,17 +120,19 @@
     "compression": "^1.6.2",
     "es6-promise": "^4.1.1",
     "express": "^4.14.0",
-    "history": "^4.6.3",
+    "history": "^4.7.2",
     "isomorphic-fetch": "^2.2.1",
-    "react": "^15.5.4",
-    "react-css-modules": "^4.1.0",
-    "react-dom": "^15.5.4",
-    "react-helmet": "^5.0.3",
-    "react-redux": "^5.0.4",
-    "react-router": "^3.0.2",
-    "react-router-redux": "^4.0.7",
+    "react": "^16.2.0",
+    "react-css-modules": "^4.7.1",
+    "react-dom": "^16.2.0",
+    "react-helmet": "^5.2.0",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-config": "^1.0.0-beta.4",
+    "react-router-dom": "^4.2.2",
+    "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^3.6.0",
-    "redux-connect": "^5.0.0",
+    "redux-connect": "^7.0.0",
     "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0",
     "serve-favicon": "^2.3.2",

src/app/components/Header/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 const style = require('./style.css');
 
 export const Header = () => (
   <nav className={style.Nav}>
     <ul>
-      <li><Link to="/">Cube</Link></li>
-      <li><Link to="sphere">Sphere</Link></li>
+      <li><Link to="/cube">Cube</Link></li>
+      <li><Link to="/sphere">Sphere</Link></li>
     </ul>
   </nav>
 );

src/app/containers/App/index.tsx

@@ -19,4 +19,4 @@ class App extends React.Component<any, any> {
   }
 }
 
-export { App }
+export { App };

src/app/containers/Cube/index.tsx

@@ -3,8 +3,7 @@ import {Box} from 'whs';
 import * as THREE from 'three';
 
 import { add, remove } from 'modules/world/';
-import { IWorld } from 'models/world';
-import { IWorldAction } from 'models/world';
+import { IWorld, IWorldAction } from 'models/world';
 const { connect } = require('react-redux');
 
 interface IProps {
@@ -25,6 +24,7 @@ class Cube extends React.Component<IProps, any> {
 
   public constructor(props) {
     super(props);
+
     this.state = {
       world: null,
       object: null,
@@ -90,4 +90,4 @@ class Cube extends React.Component<IProps, any> {
   }
 }
 
-export { Cube }
+export { Cube };

src/app/containers/Sphere/index.tsx

@@ -5,8 +5,7 @@ import {Sphere as wSphere} from 'whs';
 import * as THREE from 'three';
 
 import { add, remove } from 'modules/world/';
-import { IWorld } from 'models/world';
-import { IWorldAction } from 'models/world';
+import { IWorld, IWorldAction } from 'models/world';
 const { connect } = require('react-redux');
 
 interface IProps {
@@ -24,8 +23,10 @@ interface IProps {
 )
 
 class Sphere extends React.Component<IProps, any> {
+
   public constructor(props) {
     super(props);
+
     this.state = {
       world: null,
       object: null,
@@ -72,7 +73,6 @@ class Sphere extends React.Component<IProps, any> {
           z: 0
         }
       });
-
       this.setState({object});
     }
   }
@@ -92,4 +92,4 @@ class Sphere extends React.Component<IProps, any> {
   }
 }
 
-export { Sphere }
+export { Sphere };

src/app/redux/IStore.ts

@@ -2,4 +2,4 @@ import { IWorld } from 'models/world';
 
 export interface IStore {
   world: IWorld;
-};
+}

src/app/routes/index.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { IndexRoute, Route } from 'react-router';
+import { Route, Switch } from 'react-router';
 import { App, Sphere, Cube } from 'containers';
 
 export default (
-  <Route path="/" component={App}>
-    <IndexRoute component={Cube} />
-    <Route path="cube" component={Cube} />
-    <Route path="sphere" component={Sphere} />
-  </Route>
+  <App>
+    <Switch>
+        <Route exact={true} path="/" component={Cube} />
+        <Route path="/cube" component={Cube} />
+        <Route path="/sphere" component={Sphere} />
+    </Switch>
+  </App>
 );

src/client.tsx

@@ -4,27 +4,26 @@ import * as e6p from 'es6-promise';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-import { ReduxAsyncConnect } from 'redux-connect';
+import { ConnectedRouter } from 'react-router-redux';
+import createHistory from 'history/createBrowserHistory';
 import { configureStore } from './app/redux/store';
 import routes from './app/routes';
 // require('file-loader?name=[name].[ext]!./public/index.html');
+
+const history = createHistory();
+
 const store = configureStore(
-  browserHistory,
+  history,
   window.__INITIAL_STATE__
 );
-const history = syncHistoryWithStore(browserHistory, store);
-const connectedCmp = (props) => <ReduxAsyncConnect {...props} />;
 
 ReactDOM.render(
   <Provider store={store} key="provider">
-    <Router
+    <ConnectedRouter
       history={history}
-      render={connectedCmp}
     >
       {routes}
-    </Router>
+    </ConnectedRouter>
   </Provider>,
   document.getElementById('app')
 );

tslint.json

@@ -4,7 +4,6 @@
     "tslint-react"
   ],
   "rules": {
-    "no-new": 0,
     "trailing-comma": [
       false,
       {
@@ -33,6 +32,8 @@
     ],
     "jsx-alignment": [
       false
-    ]
+    ],
+    "no-implicit-dependencies": false,
+    "no-submodule-imports": false
   }
 }