Merge pull request #6 from bearsunday/hmr

update ui project
bearsunday · Dec 20, 2016 · 2b1a28f · 2b1a28f
2 parents 896bbc0 + 25fdbd5
commit 2b1a28f
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 5,239 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,6 @@ nbproject
 node_modules/
 vendor/
 composer.lock
+*.map
+*-compiled.js
+*.bundle.js
diff --git a/ui-skeleton/redux/package.json b/ui-skeleton/redux/package.json
@@ -8,27 +8,32 @@
     "build": "npm run clean && $(npm bin)/webpack -p --progress --config ui/webpack.config.js",
     "build-prod": "npm run clean && BABEL_ENV=production $(npm bin)/webpack -p --progress --config ui/webpack.config.prod.js",
     "test": "$(npm bin)/karma start ui/karma.conf.js",
-    "lint": "$(npm bin)/eslint ui/src; exit 0;"
+    "lint": "$(npm bin)/eslint --ignore-pattern *-compiled.js ui/src; exit 0;"
   },
   "dependencies": {
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
-    "react-redux": "^4.4.4",
-    "redux": "^3.4.0"
+    "react-redux": "^5.0.1",
+    "redux": "^3.4.0",
+    "redux-logger": "^2.7.4",
+    "redux-thunk": "^2.1.0"
   },
   "devDependencies": {
     "babel-core": "^6.7.6",
     "babel-loader": "^6.2.4",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-plugin-transform-class-properties": "^6.19.0",
+    "babel-plugin-transform-object-rest-spread": "^6.20.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "browser-sync": "^2.18.5",
     "chai": "^3.5.0",
     "eslint": "^3.12.2",
-    "eslint-config-airbnb": "^8.0.0",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-import": "^1.6.0",
-    "eslint-plugin-jsx-a11y": "^1.0.2",
-    "eslint-plugin-react": "^5.0.1",
+    "eslint-config-airbnb": "^13.0.0",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.0.2",
+    "eslint-plugin-react": "^6.8.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-exists": "^2.0.0",
     "gulp": "^3.9.1",
@@ -49,11 +54,13 @@
     "mocha": "^3.2.0",
     "react-addons-test-utils": "^15.4.1",
     "react-hot-loader": "^1.3.1",
-    "redux-logger": "^2.7.4",
-    "redux-thunk": "^2.1.0",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.3.3",
     "rimraf": "^2.5.4",
     "webpack": "^1.12.15",
     "webpack-hot-middleware": "^2.13.2",
     "webpack-stream": "^3.2.0"
-  }
+  },
+  "private": true
 }
diff --git a/ui-skeleton/redux/ui/.babelrc b/ui-skeleton/redux/ui/.babelrc
@@ -1,3 +1,19 @@
 {
-  "presets": ["es2015", "react"]
+  presets: ["es2015", "react"],
+  plugins: [
+    ['transform-object-rest-spread'],
+    ['transform-class-properties'],
+    ['react-transform', {
+      transforms: [
+        {
+          transform: 'react-transform-hmr',
+          imports: ['react'],
+          locals: ['module'],
+        }, {
+          transform: 'react-transform-catch-errors',
+          imports: ['react', 'redbox-react'],
+        },
+      ],
+    }],
+  ],
 }
diff --git a/ui-skeleton/redux/ui/entry.js b/ui-skeleton/redux/ui/entry.js
@@ -1,5 +1,5 @@
 module.exports = {
-  react: 'src/react-bundle.js',
+  react: 'src/react-bundle',
   ssr_example: 'src/page/example/app/server',
   example: [
     'webpack/hot/dev-server',

diff --git a/ui-skeleton/redux/ui/src/page/example/components/App.js b/ui-skeleton/redux/ui/src/page/example/components/App.js
diff --git a/ui-skeleton/redux/ui/src/page/example/components/App.jsx b/ui-skeleton/redux/ui/src/page/example/components/App.jsx
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import Hello from '../containers/HelloWorld';
+
+export default class App extends Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div>
+        <Hello />
+      </div>
+    );
+  }
+}
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/...x/ui/src/page/example/components/Hello.js → .../ui/src/page/example/components/Hello.jsx b/...x/ui/src/page/example/components/Hello.js → .../ui/src/page/example/components/Hello.jsx
diff --git a/ui-skeleton/redux/ui/src/page/example/containers/HelloWorld.js b/ui-skeleton/redux/ui/src/page/example/containers/HelloWorld.js
@@ -2,19 +2,19 @@ import { connect } from 'react-redux';
 import { helloWorld } from '../actions';
 import Hello from '../components/Hello';
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   message: state.hello.message,
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = dispatch => ({
   onClick: () => {
     dispatch(helloWorld());
   },
 });
 
 const HelloWorld = connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(Hello);
 
 export default HelloWorld;
diff --git a/ui-skeleton/redux/ui/src/page/example/store/configureStore.js b/ui-skeleton/redux/ui/src/page/example/store/configureStore.js
@@ -9,8 +9,10 @@ export default function configureStore(preloadedState) {
       preloadedState,
       compose(
           applyMiddleware(thunkMiddleware, createLogger()),
-          window.devToolsExtension ? window.devToolsExtension() : f => f
-      )
+          /* eslint-disable no-undef */
+          window.devToolsExtension ? window.devToolsExtension() : f => f,
+          /* eslint-enable no-undef */
+      ),
   );
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
@@ -21,3 +23,4 @@ export default function configureStore(preloadedState) {
   }
   return store;
 }
+
diff --git a/ui-skeleton/redux/ui/webpack.config.js b/ui-skeleton/redux/ui/webpack.config.js
@@ -15,14 +15,14 @@ module.exports = {
     module: {
         preLoaders: [
             {
-                test: /\.js$/,
-                loader: "eslint-loader",
+                test: /\.(js|jsx)$/,
+                loader: "eslint",
                 exclude: /node_modules/
             }
         ],
         loaders: [
             {
-              test: /\.(js|jsx)$/,
+                test: /\.(js|jsx)$/,
                 loaders: ['react-hot', 'babel'],
                 exclude: /(node_modules)/
             },
@@ -42,7 +42,7 @@ module.exports = {
     },
     resolve: {
         modulesDirectories: [__dirname + '/../node_modules', __dirname],
-        extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"]
+        extensions: ["", ".js", ".jsx"],
     },
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),

diff --git a/ui-skeleton/redux/ui/webpack.config.prod.js b/ui-skeleton/redux/ui/webpack.config.prod.js
@@ -12,20 +12,20 @@ module.exports = {
     module: {
         preLoaders: [
             {
-                test: /\.js$/,
-                loader: "eslint-loader",
+                test: /\.(js|jsx)$/,
+                loader: "eslint",
                 exclude: /node_modules/
             }
         ],
         loaders: [
             {
-                test: /\.(js)$/,
+                test: /\.(js|jsx)$/,
                 loader: 'babel',
                 exclude: /(node_modules)/
             },
             {
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+                loader: ExtractTextPlugin.extract("style", "css")
             },
             {
                 test: /\.json$/,
@@ -39,7 +39,7 @@ module.exports = {
     },
     resolve: {
         modulesDirectories: [__dirname + '/../node_modules', __dirname],
-        extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"]
+        extensions: ["", ".js", ".jsx"],
     },
     plugins: [
         new ExtractTextPlugin("style.css", {