refactor and fix hot reloading

Author: Markus Dethlefsen

.babelrc

@@ -3,13 +3,15 @@
     "production" : {
       "presets": ["es2015-webpack", "stage-0", "react"],
       "plugins": [
+        "transform-promise-to-bluebird",
         "transform-react-constant-elements",
         "transform-react-inline-elements"
       ]
     },
     "development": {
       "presets": ["es2015-loose", "stage-0", "react"],
       "plugins": [
+        ["transform-promise-to-bluebird"],
         ["babel-plugin-espower", {
           "embedAst": true
         }],
@@ -23,6 +25,7 @@
     "test": {
       "presets": ["es2015-loose", "stage-0", "react"],
       "plugins": [
+        ["transform-promise-to-bluebird"],
         ["babel-plugin-espower", {
           "embedAst": true
         }],

.eslintrc

@@ -1,17 +1,6 @@
 {
   "extends": "airbnb",
-  "plugins": [
-    "react"
-  ],
   "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true
-    }
-  },
   "globals": {
     "sinon": false,
     "expect": false,
@@ -54,6 +43,7 @@
     "react/forbid-prop-types": [1, {
       "forbid": ["any"]
     }],
+    "react/jsx-filename-extension": 0,
     "react/jsx-first-prop-new-line": 0,
     "react/jsx-boolean-value": 0,
     "react/jsx-closing-bracket-location": 0,
@@ -66,8 +56,6 @@
     "react/jsx-no-literals": 0,
     "react/jsx-no-undef": 1,
     "react/jsx-pascal-case": 1,
-    "react/jsx-sort-prop-types": 0,
-    "react/jsx-sort-props": 0,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "react/no-danger": 1,
@@ -80,9 +68,8 @@
     "react/prefer-es6-class": 1,
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 1,
-    "react/require-extension": 1,
     "react/self-closing-comp": 1,
     "react/sort-comp": 1,
-    "react/wrap-multilines": 1
+    "react/jsx-wrap-multilines": 1
   }
 }

.sass-lint.yml

@@ -5,9 +5,11 @@
   "scripts": {
     "start": "cross-env NODE_ENV=production node dist/index.js",
     "prestart:dev": "rimraf ./i18n",
+    "dev": "npm run start:dev",
     "start:dev": "run-p -c --silent test:watch build:dev translation:watchpot translation:watchpo",
     "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --reporter mocha-junit-reporter",
-    "test:watch": "npm run test -- --watch --reporter min",
+    "test:spec": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --reporter spec",
+    "test:watch": "npm run test -- --watch --reporter spec",
     "test:coverage": "nyc --cache npm run test -- --reporter spec",
     "test:lint": "eslint ./src",
     "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.js",
@@ -48,73 +50,44 @@
     "npm": ">=3.8.3"
   },
   "dependencies": {
-    "bluebird": "^3.4.0",
-    "cors": "^2.7.1",
-    "dotenv-safe": "^2.3.1",
-    "express": "^4.13.4",
-    "express-jwt": "^3.4.0",
-    "isomorphic-fetch": "^2.2.1",
-    "lodash": "^4.13.1",
-    "react": "^15.2.0",
-    "react-addons-css-transition-group": "^15.2.0",
-    "react-body-classname": "^1.0.1",
-    "react-bootstrap": "^0.29.4",
-    "react-dom": "^15.2.0",
-    "react-helmet": "^3.1.0",
-    "react-hot-loader": "^3.0.0-beta.2",
-    "react-intl": "^2.1.3",
-    "react-intl-redux": "0.0.11",
-    "react-redux": "^4.4.5",
-    "react-router": "^2.5.2",
-    "react-router-redux": "^4.0.5",
-    "redux": "^3.3.1",
-    "redux-promise": "^0.5.3",
-    "redux-thunk": "^2.1.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^6.3.7",
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
-    "babel-eslint": "^6.1.0",
+    "autoprefixer": "^6.4.0",
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.11.4",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-__coverage__": "^11.0.0",
     "babel-plugin-espower": "^2.3.1",
     "babel-plugin-react-intl": "^2.1.3",
-    "babel-plugin-system-import-transformer": "^2.2.0",
+    "babel-plugin-system-import-transformer": "^2.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-promise-to-bluebird": "^1.1.0",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-react-inline-elements": "^6.6.5",
-    "babel-plugin-webpack-aliases": "^1.0.2",
-    "babel-plugin-webpack-loaders": "^0.7.0",
+    "babel-plugin-webpack-aliases": "^1.0.3",
+    "babel-plugin-webpack-loaders": "^0.7.1",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-loose": "^7.0.0",
-    "babel-preset-es2015-webpack": "^6.4.1",
+    "babel-preset-es2015-webpack": "^6.4.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "bcrypt": "^0.8.7",
-    "carte-blanche": "^0.2.3",
-    "chai": "^3.5.0",
+    "babel-runtime": "^6.11.6",
+    "bluebird": "^3.4.0",
+    "chalk": "^1.1.3",
     "chokidar-cli": "^1.2.0",
     "cookie": "^0.3.1",
     "cookie-parser": "^1.4.3",
-    "cross-env": "^1.0.8",
+    "cors": "^2.7.1",
+    "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
     "debug": "^2.2.0",
     "deep-freeze": "0.0.1",
-    "dirty-chai": "^1.2.2",
-    "enzyme": "^2.3.0",
-    "esformatter": "^0.9.5",
-    "esformatter-quotes": "^1.1.0",
-    "eslint": "^3.0.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-import-resolver-webpack": "^0.3.2",
-    "eslint-plugin-import": "^1.10.2",
-    "eslint-plugin-jsx-a11y": "^1.5.5",
-    "eslint-plugin-react": "^5.1.1",
+    "dotenv-safe": "^2.3.1",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "express": "^4.13.4",
+    "express-jwt": "^3.4.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "file-loader": "^0.9.0",
     "glob": "^7.0.5",
     "google-fonts-downloader": "0.0.3",
@@ -125,40 +98,70 @@
     "inject-loader": "^2.0.1",
     "intl": "^1.2.4",
     "intl-locales-supported": "^1.0.0",
-    "isparta": "^4.0.0",
-    "istanbul": "^0.4.4",
-    "js-beautify": "^1.6.3",
-    "jsdom": "^9.4.1",
+    "isomorphic-fetch": "^2.2.1",
     "json-loader": "^0.5.4",
     "jsonwebtoken": "^7.0.1",
+    "lodash": "^4.13.1",
     "mkdirp": "^0.5.1",
-    "mocha": "^2.5.3",
-    "mocha-junit-reporter": "^1.11.1",
     "npm-run-all": "^2.3.0",
-    "nyc": "^6.6.1",
     "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
     "postcss-modules-values": "^1.1.3",
-    "power-assert": "^1.4.1",
     "precss": "^1.4.0",
     "pretty-error": "^2.0.0",
     "proxy-middleware": "^0.15.0",
+    "react": "^15.2.0",
+    "react-addons-css-transition-group": "^15.2.0",
     "react-addons-test-utils": "^15.2.0",
+    "react-body-classname": "^1.0.1",
+    "react-bootstrap": "^0.30.1",
+    "react-dom": "^15.2.0",
     "react-gettext-parser": "^1.0.1",
+    "react-helmet": "^3.1.0",
+    "react-hot-loader": "^3.0.0-beta.2",
+    "react-intl": "^2.1.3",
     "react-intl-loader": "^1.0.2",
     "react-intl-po": "^1.0.5",
+    "react-intl-redux": "^0.1.0",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.6.1",
+    "react-router-bootstrap": "^0.23.1",
+    "react-router-redux": "^4.0.5",
+    "redux": "^3.3.1",
     "redux-mock-store": "^1.1.2",
+    "redux-promise": "^0.5.3",
+    "redux-thunk": "^2.1.0",
     "rucksack-css": "^0.8.6",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
     "to-object-by": "^1.0.3",
     "url-loader": "^0.5.7",
+    "webpack-validator": "^2.2.2"
+  },
+  "devDependencies": {
+    "chai": "^3.5.0",
+    "dirty-chai": "^1.2.2",
+    "enzyme": "^2.4.1",
+    "esformatter": "^0.9.6",
+    "esformatter-quotes": "^1.1.0",
+    "eslint": "^3.2.2",
+    "eslint-config-airbnb": "^10.0.0",
+    "eslint-import-resolver-webpack": "^0.4.0",
+    "eslint-plugin-import": "^1.10.2",
+    "eslint-plugin-react": "^6.0.0",
+    "power-assert": "^1.4.1",
+    "isparta": "^4.0.0",
+    "istanbul": "^0.4.4",
+    "js-beautify": "^1.6.3",
+    "jsdom": "^9.4.1",
+    "mocha": "^2.5.3",
+    "mocha-junit-reporter": "^1.11.1",
+    "nyc": "^6.6.1",
+    "sinon": "^1.17.3",
+    "sinon-chai": "^2.8.0",
     "wallaby-webpack": "0.0.22",
-    "webpack": "^2.1.0-beta.15",
+    "webpack": "^2.1.0-beta.20",
     "webpack-cleanup-plugin": "^0.2.0",
     "webpack-dev-server": "^2.1.0-beta.0",
-    "webpack-shell-plugin": "^0.4.2",
-    "webpack-validator": "^2.2.2"
+    "webpack-shell-plugin": "^0.4.2"
   }
 }

package.json

@@ -1,4 +1,5 @@
 const express = require('express')
+
 const router = express.Router()
 
 router.get('/product', (req, res) => {

server/mocks/route.api.product.js

@@ -1,7 +1,8 @@
 const express = require('express')
 const jwt = require('jsonwebtoken')
-const bcrypt = require('bcrypt')
+// const bcrypt = require('bcrypt')
 const cookie = require('cookie')
+
 const router = express.Router()
 
 /*
@@ -43,7 +44,8 @@ router.get('/users/signup', (req, res) => {
   }
 
   const body = Object.assign({}, { name: 'markus', username: 'drathal', email: '[email protected]', password: 'p' }, req.body)
-  const hash = bcrypt.hashSync(body.password.trim(), 10)
+  // const hash = bcrypt.hashSync(body.password.trim(), 10)
+  const hash = '1234'
   const user = {
     id: 1,
     name: body.name.trim(),

server/mocks/route.api.user.js

@@ -4,7 +4,7 @@ import './layout/theme.css'
 const app = ({ children }) => React.Children.only(children)
 
 app.propTypes = {
-  children: PropTypes.element
+  children: PropTypes.element.isRequired
 }
 
 export default app

src/app/app.js

@@ -1,2 +1,3 @@
 import component from './app'
+
 export default component

src/app/index.js

@@ -31,8 +31,8 @@ const component = ({ children, params, intl: { formatMessage: fm } }) => <BodyCl
   <div className={`${style.layout} layout layout-dashboard`}>
     <Helmet title={fm(m.brandNameTwo)} />
     <TopNavBar style={style} brand={<Link to="/main">{fm(m.brandNameTwo)}</Link>}>
-      <LanguageSelectorContainer key={'menuitem-1'} />
-      <NavLogin key={'menuitem-2'} messages={{ login: fm(m.login), logout: fm(m.logout) }} />
+      <LanguageSelectorContainer />
+      <NavLogin messages={{ login: fm(m.login), logout: fm(m.logout) }} />
     </TopNavBar>
     <aside className={`${style.sidemenu} app-aside`}>
       <div className={`${style.sidemenuBody}`}>

src/app/layout/layout_dashboard/layout_dashboard.js

@@ -6,7 +6,7 @@ import LayoutDashboard from './layout_dashboard'
 
 const store = configureStore()({ intl: { locale: 'en' } })
 
-describe('component <LayoutMain />', () => {
+describe('component <LayoutDashboard />', () => {
   it('can render childs', () => {
     const wrapper = mount(<Provider store={store}><LayoutDashboard children="childs" /></Provider>)
     expect(wrapper.html().includes('childs')).to.equal(true)

src/app/layout/layout_dashboard/layout_dashboard.spec.js

@@ -1,3 +1,4 @@
 import layout_main from './layout_main'
 import './favicon.ico'
+
 export default layout_main

src/app/layout/layout_main/index.js

@@ -26,13 +26,12 @@ const m = defineMessages({
   }
 })
 
-const component = ({ children, params, intl: { formatMessage: fm } }) => <div
-  className={`${style.layout} layout layout-main`}>
+const component = ({ children, params, intl: { formatMessage: fm } }) => <div className={`${style.layout} layout layout-main`}>
   <Helmet title={fm(m.brandName)} />
   <TopNavBar brand={<Link to="/dashboard">{fm(m.brandName)}</Link>}>
     <NavLinks linkList={top_navigation_links(params)} />
-    <LanguageSelectorContainer key={'menuitem-1'} />
-    <NavLogin key={'menuitem-2'} messages={{ login: fm(m.login), logout: fm(m.logout) }} />
+    <LanguageSelectorContainer />
+    <NavLogin messages={{ login: fm(m.login), logout: fm(m.logout) }} />
   </TopNavBar>
   <div className={`${style.container} app-content`}>
     <div className={`${style.containerBody} app-content-body`}>

src/app/layout/layout_main/layout_main.js

@@ -1,22 +1,33 @@
+import ProductRoute from '../products/route'
+import NotFoundRoute from '../notFound/route'
+
+// this will fix hot reloading - on a dynamic route (only development)
+if (process.env.NODE_ENV === 'development') {
+  require('./layout_main/index.js').default // eslint-disable-line
+  require('./layout_dashboard/index.js').default // eslint-disable-line
+}
+
 export default {
   path: ':layout',
   getComponent(location, cb) {
     require.ensure([], (require) => cb(null, require(`./layout_${location.params.layout}/index.js`).default), 'layout')
-    // this will fix hot reloading - on a dynamic route (only development)
-    if (process.env.NODE_ENV === 'development') {
-      require('./layout_main/index.js').default // eslint-disable-line
-      require('./layout_dashboard/index.js').default // eslint-disable-line
-    }
   },
   indexRoute: {
     onEnter: (nextState, replace) => {
       replace(`/${nextState.params.layout}/products`)
     }
   },
+  childRoutes: [
+    ProductRoute,
+    NotFoundRoute
+  ]
+}
+
+/*
   getChildRoutes(location, cb) {
     require.ensure([], (require) => cb(null, [
       require('../products/route').default,
       require('../notFound/route').default]
     ), 'products-notFound-route')
   }
-}
+*/

src/app/layout/route.js

@@ -1,2 +1,3 @@
 import products from './products'
+
 export default products