Merge pull request #47 from netguru/beta

Beta - 3.0.0

Author: Dominik Rowicki

packages/react-scripts/config/webpack.config.dev.js

@@ -41,8 +41,6 @@ module.exports = {
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
-    // React Hot Loader v3
-    require.resolve('react-hot-loader/patch'),
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case
@@ -163,7 +161,6 @@ module.exports = {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
             use: [
-              require.resolve('react-hot-loader/webpack'),
               {
                 loader: require.resolve('babel-loader'),
                 options: {

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netguru/react-scripts",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Netguru configuration and scripts for Create React App",
   "repository": "netguru/create-react-app",
   "license": "MIT",
@@ -77,7 +77,7 @@
   "devDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-hot-loader": "^3.1.3",
+    "react-hot-loader": "^4.3.2",
     "normalize.css": "^7.0.0"
   },
   "optionalDependencies": {

packages/react-scripts/scripts/init.js

@@ -101,7 +101,7 @@ module.exports = function(
     command = 'npm';
     args = ['install', '--save', verbose && '--verbose'].filter(e => e);
   }
-  args.push('react', 'react-dom', 'react-hot-loader@^3.1.3', 'normalize.css');
+  args.push('react', 'react-dom', 'react-hot-loader@^4.3.2', 'normalize.css');
 
   // Install additional template dependencies, if present
   const templateDependenciesPath = path.join(

packages/react-scripts/template/.babelrc

@@ -4,5 +4,6 @@
     "es2015",
     "stage-2",
     "react"
-  ]
+  ],
+  "plugins": ["react-hot-loader/babel"]
 }

packages/react-scripts/template/src/components/App/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { hot } from 'react-hot-loader';
 import logo from './logo.svg';
 import LogoInline from './logo.inline.svg';
 import styles from './style.scss';
@@ -41,4 +42,5 @@ class App extends Component {
   }
 }
 
-export default App;
+export { App as AppUnwrapped };
+export default hot(module)(App);

packages/react-scripts/template/src/components/App/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './index';
+import { AppUnwrapped as App } from './index';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

packages/react-scripts/template/src/index.js

@@ -1,28 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import 'normalize.css';
 
 import App from 'components/App';
 import registerServiceWorker from 'utils/registerServiceWorker';
 
-function render(Component) {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>,
-    document.getElementById('root'),
-  );
-}
-
-render(App);
-
-if (module.hot) {
-  module.hot.accept('./components/App', () => {
-    // eslint-disable-next-line global-require
-    const nextApp = require('./components/App').default;
-    render(nextApp);
-  });
-}
+ReactDOM.render(<App />, document.getElementById('root'));
 
 registerServiceWorker();