Merge abdfbfa into f9fd9cf

.babelrc

@@ -7,11 +7,7 @@
           "node": "current"
         }
       }
-    ],
-    "react"
-  ],
-  "plugins": [
-    "transform-react-jsx-source"
+    ]
   ],
   "env": {
     "coverage": {
@@ -27,6 +23,9 @@
         "react"
       ],
       "plugins": [
+        "dynamic-import-node",
+        "syntax-dynamic-import",
+        "transform-react-jsx-source",
         [
           "istanbul",
           {

gulpfile.babel.js/configs/.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": [
     "airbnb",
     "prettier",

gulpfile.babel.js/configs/config.js

@@ -31,6 +31,7 @@ const config = {
     server: {
       integration: {
         src: [
+          'test/server/utils/babel-register.js',
           'test/server/utils/test_initializer_util.js',
           'test/server/integration/**/*.js',
           'test/shared/integration/**/*.js',
@@ -39,6 +40,7 @@ const config = {
       },
       unit: {
         src: [
+          'test/server/utils/babel-register.js',
           'test/server/utils/test_initializer_utils.js',
           'test/server/utils/enzyme_initializer.js',
           'test/shared/utils/**/*.js',

gulpfile.babel.js/configs/karma.conf.coverage.js

@@ -87,7 +87,11 @@ module.exports = function karmaConfIntegration(config) {
                       }
                     ]
                   ],
-                  plugins: ['istanbul']
+                  plugins: [
+                    'istanbul',
+                    'syntax-dynamic-import',
+                    'transform-react-jsx-source'
+                  ]
                 }
               }
             ],

gulpfile.babel.js/configs/karma.conf.integration.js

@@ -65,7 +65,7 @@ module.exports = function karmaConfIntegration(config) {
                     ]
                   ],
                   plugins: [
-                    'react-hot-loader/babel',
+                    'syntax-dynamic-import',
                     'transform-react-jsx-source'
                   ]
                 }

gulpfile.babel.js/configs/karma.conf.unit.js

@@ -74,7 +74,7 @@ module.exports = function karmaConfUnit(config) {
                     ]
                   ],
                   plugins: [
-                    'react-hot-loader/babel',
+                    'syntax-dynamic-import',
                     'transform-react-jsx-source'
                   ]
                 }

gulpfile.babel.js/configs/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = {
       'fontfaceobserver',
       'react',
       'react-dom',
+      'react-async-component',
       'bluebird',
       'history/createBrowserHistory',
       'react-router-config',
@@ -29,7 +30,7 @@ module.exports = {
       'exenv',
       'scriptjs'
     ],
-    app: [
+    bundle: [
       'react-hot-loader/patch',
       // activate HMR for React
 
@@ -42,11 +43,15 @@ module.exports = {
       // only- means to only hot reload for successful updates
 
       path.join(__dirname, '../../src/client/index')
-    ]
+    ],
+    search: path.join(
+      __dirname,
+      '../../src/views/containers/pages/search_results_page/search_results_page.js'
+    )
   },
   output: {
     path: path.join(__dirname, '../../dist'),
-    filename: 'bundle.js',
+    filename: '[name].js',
     publicPath: 'http://localhost:3001/static'
   },
   devServer: {
@@ -64,14 +69,14 @@ module.exports = {
     new ManifestPlugin({ writeToFileEmit: true }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      chunks: ['app'],
+      chunks: ['app', 'search'],
       minChunks(module /* , count */) {
         const { context } = module;
         return context && context.indexOf('node_modules') >= 0;
       },
       filename: 'vendor.js'
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
+    // new webpack.optimize.ModuleConcatenationPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     // enable HMR globally
 
@@ -100,7 +105,11 @@ module.exports = {
                   }
                 ]
               ],
-              plugins: ['react-hot-loader/babel', 'transform-react-jsx-source']
+              plugins: [
+                'syntax-dynamic-import',
+                'react-hot-loader/babel',
+                'transform-react-jsx-source'
+              ]
             }
           }
         ],

gulpfile.babel.js/configs/webpack.config.production.js

@@ -11,6 +11,7 @@ module.exports = {
       'fontfaceobserver',
       'react',
       'react-dom',
+      'react-async-component',
       'bluebird',
       'history/createBrowserHistory',
       'react-router-config',
@@ -30,11 +31,15 @@ module.exports = {
       'exenv',
       'scriptjs'
     ],
-    app: path.join(__dirname, '../../src/client/index')
+    app: path.join(__dirname, '../../src/client/index'),
+    search: path.join(
+      __dirname,
+      '../../src/views/containers/pages/search_results_page/search_results_page.js'
+    )
   },
   output: {
     path: path.join(__dirname, '../../dist/static/js'),
-    filename: 'bundle.[hash].js'
+    filename: '[name].[hash].js'
   },
   plugins: [
     new webpack.HashedModuleIdsPlugin({
@@ -51,8 +56,7 @@ module.exports = {
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      chunks: ['app'],
-      async: false,
+      chunks: ['app', 'search'],
       minChunks(module /* , count */) {
         const { context } = module;
         return context && context.indexOf('node_modules') >= 0;
@@ -94,7 +98,8 @@ module.exports = {
                     }
                   }
                 ]
-              ]
+              ],
+              plugins: ['syntax-dynamic-import']
             }
           }
         ],

gulpfile.babel.js/tasks/gulp_babel_server.js

@@ -5,6 +5,12 @@ import babel from 'gulp-babel';
 import config from './../configs/config';
 
 gulp.task('babel-server', function babelServer() {
+  const env = process.env.NODE_ENV;
+  const plugins =
+    env === 'production'
+      ? ['dynamic-import-node']
+      : ['dynamic-import-node', 'transform-react-jsx-source'];
+
   const babelStream = babel({
     sourceMaps: 'inline',
     presets: [
@@ -17,7 +23,8 @@ gulp.task('babel-server', function babelServer() {
           }
         }
       ]
-    ]
+    ],
+    plugins
   });
 
   babelStream.on('error', function handleError(err) {

gulpfile.babel.js/tasks/gulp_server_integration_test.js

@@ -8,7 +8,7 @@ gulp.task('server-integration-test', function serverIntegrationTest() {
     .src(config.test.server.integration.src, {
       read: false
     })
-    .pipe(mocha({ require: 'babel-register' }))
+    .pipe(mocha())
     .once('error', function handleError(err) {
       log(err);
     });

gulpfile.babel.js/tasks/gulp_server_unit_test.js

@@ -8,7 +8,7 @@ gulp.task('server-unit-test', function serverUnitTeset() {
     .src(config.test.server.unit.src, {
       read: false
     })
-    .pipe(mocha({ require: 'babel-register' }))
+    .pipe(mocha())
     .once('error', function handleError(err) {
       log(err);
     });

package.json

@@ -23,7 +23,7 @@
     "style-lint-fix": "stylelint ./src/**/*.scss --syntax scss --config gulpfile.babel.js/configs/.stylelintrc --fix",
     "fix-all": "npm run js-lint-fix && npm run style-lint-fix",
     "svg-min": "gulp svg-min",
-    "test": "gulp test",
+    "test": "NODE_ENV=test gulp test",
     "ci-test": "gulp ci-test",
     "prod-server": "pm2 reload pm2/pm2.json5",
     "build-prod": "NODE_ENV=production gulp build-prod",
@@ -65,6 +65,7 @@
     "pretty-error": "2.1.1",
     "prop-types": "15.6.0",
     "react": "16.2.0",
+    "react-async-component": "1.0.2",
     "react-dom": "16.2.0",
     "react-error-boundary": "1.2.0",
     "react-helmet": "5.2.0",
@@ -93,10 +94,13 @@
     "babel-core": "6.26.0",
     "babel-eslint": "8.0.2",
     "babel-loader": "7.1.2",
+    "babel-plugin-dynamic-import-node": "1.2.0",
     "babel-plugin-istanbul": "4.1.5",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-react-jsx-source": "6.22.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-react": "6.24.1",
+    "babel-register": "6.26.0",
     "babel-runtime": "6.26.0",
     "bunyan-prettystream": "0.1.3",
     "chai": "4.1.2",

src/views/containers/layouts/layout.js

@@ -5,8 +5,8 @@ import Switch from 'react-router/Switch';
 import Route from 'react-router/Route';
 import { connect } from 'react-redux';
 import ErrorBoundary from 'react-error-boundary';
-import TransitionGroup from 'react-transition-group/TransitionGroup';
-import CSSTransition from 'react-transition-group/CSSTransition';
+// import TransitionGroup from 'react-transition-group/TransitionGroup';
+// import CSSTransition from 'react-transition-group/CSSTransition';
 
 import Header from './../../components/header/header';
 import Config from './../../components/config/config';
@@ -15,16 +15,30 @@ import log from '../../../services/logger_service';
 const renderRoutes = (routes, location) =>
   routes ? (
     <Switch key={location.key} location={location}>
-      {routes.map(route => (
-        <Route
-          key={location.key}
-          location={location}
-          path={route.path}
-          exact={route.exact}
-          strict={route.strict}
-          component={route.component}
-        />
-      ))}
+      {routes.map(route => {
+        if (route.component) {
+          return (
+            <Route
+              key={location.key}
+              location={location}
+              path={route.path}
+              exact={route.exact}
+              strict={route.strict}
+              component={route.component}
+            />
+          );
+        }
+        return (
+          <Route
+            key={location.key}
+            location={location}
+            path={route.path}
+            exact={route.exact}
+            strict={route.strict}
+            render={route.render}
+          />
+        );
+      })}
     </Switch>
   ) : null;
 
@@ -89,24 +103,7 @@ class Layout extends Component {
           }}
           fallbackcomponent={<div>Error</div>}
         >
-          <TransitionGroup
-            enter={true}
-            exit={true}
-            appear={true}
-            className="main"
-            role="main"
-            component="main"
-          >
-            <CSSTransition
-              key={this.props.location.pathname}
-              classNames="fadeTranslate"
-              timeout={1000}
-              mountOnEnter={true}
-              unmountOnExit={true}
-            >
-              {renderRoutes(this.props.route.routes, this.props.location)}
-            </CSSTransition>
-          </TransitionGroup>
+          {renderRoutes(this.props.route.routes, this.props.location)}
         </ErrorBoundary>
         {this.livereload()}
         <Config state={this.props.state} />