Merge branch 'dev' into 3.4

app/app.js

@@ -29,9 +29,9 @@ import LanguageProvider from 'containers/LanguageProvider';
 
 // Load the favicon, the manifest.json file and the .htaccess file
 /* eslint-disable import/no-webpack-loader-syntax */
-import '!file?name=[name].[ext]!./favicon.ico';
-import '!file?name=[name].[ext]!./manifest.json';
-import 'file?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions
+import '!file-loader?name=[name].[ext]!./favicon.ico';
+import '!file-loader?name=[name].[ext]!./manifest.json';
+import 'file-loader?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions
 /* eslint-enable import/no-webpack-loader-syntax */
 
 import configureStore from './store';
@@ -107,11 +107,11 @@ if (module.hot) {
 // Chunked polyfill for browsers without Intl support
 if (!window.Intl) {
   (new Promise((resolve) => {
-    resolve(System.import('intl'));
+    resolve(import('intl'));
   }))
     .then(() => Promise.all([
-      System.import('intl/locale-data/jsonp/en.js'),
-      System.import('intl/locale-data/jsonp/de.js'),
+      import('intl/locale-data/jsonp/en.js'),
+      import('intl/locale-data/jsonp/de.js'),
     ]))
     .then(() => render(translationMessages))
     .catch((err) => {

app/containers/HomePage/sagas.js

@@ -2,8 +2,7 @@
  * Gets the repositories of the user from Github
  */
 
-import { takeLatest } from 'redux-saga';
-import { take, call, put, select, fork, cancel } from 'redux-saga/effects';
+import { take, call, put, select, cancel, takeLatest } from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
 import { LOAD_REPOS } from 'containers/App/constants';
 import { reposLoaded, repoLoadingError } from 'containers/App/actions';
@@ -28,20 +27,14 @@ export function* getRepos() {
   }
 }
 
-/**
- * Watches for LOAD_REPOS actions and calls getRepos when one comes in.
- * By using `takeLatest` only the result of the latest API call is applied.
- */
-export function* getReposWatcher() {
-  yield fork(takeLatest, LOAD_REPOS, getRepos);
-}
-
 /**
  * Root saga manages watcher lifecycle
  */
 export function* githubData() {
-  // Fork watcher so we can continue execution
-  const watcher = yield fork(getReposWatcher);
+  // Watches for LOAD_REPOS actions and calls getRepos when one comes in.
+  // By using `takeLatest` only the result of the latest API call is applied.
+  // It returns task descriptor (just like fork) so we can continue execution
+  const watcher = yield takeLatest(LOAD_REPOS, getRepos);
 
   // Suspend execution until location changes
   yield take(LOCATION_CHANGE);

app/containers/HomePage/tests/sagas.test.js

@@ -2,14 +2,15 @@
  * Tests for HomePage sagas
  */
 
-import { takeLatest } from 'redux-saga';
-import { take, put, fork } from 'redux-saga/effects';
+import { cancel, take, put, takeLatest } from 'redux-saga/effects';
+import { createMockTask } from 'redux-saga/lib/utils';
+
 import { LOCATION_CHANGE } from 'react-router-redux';
 
 import { LOAD_REPOS } from 'containers/App/constants';
 import { reposLoaded, repoLoadingError } from 'containers/App/actions';
 
-import { getRepos, getReposWatcher, githubData } from '../sagas';
+import { getRepos, githubData } from '../sagas';
 
 const username = 'mxstbr';
 
@@ -46,27 +47,22 @@ describe('getRepos Saga', () => {
   });
 });
 
-describe('getReposWatcher Saga', () => {
-  const getReposWatcherGenerator = getReposWatcher();
-
-  it('should watch for LOAD_REPOS action', () => {
-    const takeDescriptor = getReposWatcherGenerator.next().value;
-    expect(takeDescriptor).toEqual(fork(takeLatest, LOAD_REPOS, getRepos));
-  });
-});
-
 describe('githubDataSaga Saga', () => {
   const githubDataSaga = githubData();
+  const mockedTask = createMockTask();
 
-  let forkDescriptor;
-
-  it('should asyncronously fork getReposWatcher saga', () => {
-    forkDescriptor = githubDataSaga.next();
-    expect(forkDescriptor.value).toEqual(fork(getReposWatcher));
+  it('should start task to watch for LOAD_REPOS action', () => {
+    const takeLatestDescriptor = githubDataSaga.next().value;
+    expect(takeLatestDescriptor).toEqual(takeLatest(LOAD_REPOS, getRepos));
   });
 
   it('should yield until LOCATION_CHANGE action', () => {
-    const takeDescriptor = githubDataSaga.next();
-    expect(takeDescriptor.value).toEqual(take(LOCATION_CHANGE));
+    const takeDescriptor = githubDataSaga.next(mockedTask).value;
+    expect(takeDescriptor).toEqual(take(LOCATION_CHANGE));
+  });
+
+  it('should cancel the forked task when LOCATION_CHANGE happens', () => {
+    const cancelDescriptor = githubDataSaga.next().value;
+    expect(cancelDescriptor).toEqual(cancel(mockedTask));
   });
 });

app/routes.js

@@ -22,9 +22,9 @@ export default function createRoutes(store) {
       name: 'home',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
-          System.import('containers/HomePage/reducer'),
-          System.import('containers/HomePage/sagas'),
-          System.import('containers/HomePage'),
+          import('containers/HomePage/reducer'),
+          import('containers/HomePage/sagas'),
+          import('containers/HomePage'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -42,15 +42,15 @@ export default function createRoutes(store) {
       path: '/features',
       name: 'features',
       getComponent(nextState, cb) {
-        System.import('containers/FeaturePage')
+        import('containers/FeaturePage')
           .then(loadModule(cb))
           .catch(errorLoading);
       },
     }, {
       path: '*',
       name: 'notfound',
       getComponent(nextState, cb) {
-        System.import('containers/NotFoundPage')
+        import('containers/NotFoundPage')
           .then(loadModule(cb))
           .catch(errorLoading);
       },

app/store.js

@@ -46,7 +46,7 @@ export default function configureStore(initialState = {}, history) {
   /* istanbul ignore next */
   if (module.hot) {
     module.hot.accept('./reducers', () => {
-      System.import('./reducers').then((reducerModule) => {
+      import('./reducers').then((reducerModule) => {
         const createReducers = reducerModule.default;
         const nextReducers = createReducers(store.asyncReducers);
 

docs/README.md

@@ -4,6 +4,7 @@
 
 - [General](general)
   - [**CLI Commands**](general/commands.md)
+  - [Introduction ](general/introduction.md)
   - [Tool Configuration](general/files.md)
   - [Server Configurations](general/server-configs.md)
   - [Deployment](general/deployment.md) *(currently Heroku specific)*

docs/general/faq.md

@@ -238,6 +238,18 @@ While it's possible to keep your project up-to-date or "in sync" with `react-boi
 very difficult and therefore ***at your own risk*** and not recommend. You should not need to do it either, as
 every version you use will be amazing! There is a long term goal to make this much easier but no ETA at the moment.
 
+## How to turn off Webpack performance warnings after production build?
+
+Webpack recommends having those performance hints turned off in development but to keep them on in production. If you still want to disable them, add the next lines to the config in `webpack.prod.babel.js`:
+  
+```js
+  performance: {
+    hints: false
+  }
+```
+You can find more information about the `performance` option in the Webpack documentation: [Configuration/Performance](https://webpack.js.org/configuration/performance/).
+
+
 ## Have another question?
 
 Submit an [issue](https://github.com/mxstbr/react-boilerplate/issues),