Merge pull request #1084 from gaearon/react-16-6

feat: React16.6 compatibility

README.md

@@ -337,12 +337,48 @@ import { setConfig, cold } from 'react-hot-loader'
 setConfig({
   onComponentRegister: (type, name, file) =>
     file.indexOf('node_modules') > 0 && cold(type),
+
+  // some components are not visible as top level variables,
+  // thus its not known where they were created
+  onComponentCreate: (type, name) => file.indexOf('styled') > 0 && cold(type),
 })
 ```
 
 ! To be able to "cold" components from 'node_modules' you have to apply babel to node_modules, while this
 folder is usually excluded.
 You may add one more babel-loader, with only one React-Hot-Loader plugin inside to solve this.
+**Consider using webpack-loader** for this.
+
+##### React-Hooks
+
+React-hot-loader does not support React 16.7 Hooks at all.
+You have to
+
+* _cold_ components using hooks.
+
+```js
+import { setConfig, cold } from 'react-hot-loader'
+setConfig({
+  onComponentCreate: (type, name) =>
+    (String(type).indexOf('useState') > 0 ||
+      String(type).indexOf('useEffect') > 0) &&
+    cold(type),
+})
+```
+
+* _set a special flag_
+
+```js
+import { setConfig, cold } from 'react-hot-loader'
+setConfig({
+  onComponentCreate: (type, name) =>
+    (String(type).indexOf('useState') > 0 ||
+      String(type).indexOf('useEffect') > 0) &&
+    cold(type),
+})
+```
+
+PS: `react-emotion` would break due this operation.
 
 ## API
 

examples/all-possible-containers/webpack.config.js

@@ -3,8 +3,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const exclude = absPath => /node_modules/.test(absPath)
-const mode = 'production'
-//process.env.NODE_ENV || 'development'
+const mode = process.env.NODE_ENV || 'development'
 
 const production = mode === 'production'
 

examples/styled-components/.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["env", "react"],
-  "plugins": ["react-hot-loader/babel", "transform-class-properties"]
+  "plugins": ["react-hot-loader/babel", "transform-class-properties", "dynamic-import-node"]
 }

examples/styled-components/package.json

@@ -11,16 +11,17 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "html-webpack-plugin": "^2.30.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
     "emotion": "^8.0.12",
-    "react": "^16.3.2",
-    "react-dom": "^16.2.0",
-    "react-emotion": "^8.0.12",
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-emotion": "^9.2.12",
     "react-hot-loader": "^4.1.1",
-    "styled-components": "^2.4.0"
+    "styled-components": "^4.0.3"
   }
 }

examples/styled-components/src/App.js

@@ -5,7 +5,7 @@ import emoStyled from 'react-emotion'
 import Counter from './Counter'
 
 const BigText = styled.div`
-  font-size: 20px;
+  font-size: 25px;
 `
 
 const SmallText = emoStyled('div')`
@@ -27,15 +27,34 @@ const indirectStyled = {
   DE: emoStyled('div')`border: 1px solid #F00`,
 }
 
+const Async = React.lazy(() => import('./Async'))
+
 const aNumber = 100500
 
+const OtherComponent = () => <span>test 3</span>
+
+const Memo = React.memo(() => (
+  <div>
+    [mem <OtherComponent />
+    <Counter /> memo]
+  </div>
+))
+
 const App = () => (
   <h1>
-    <BigText>1.Hello, world! {aNumber} </BigText>
+    <BigText>
+      1.Hello, world! {aNumber} <Counter />
+    </BigText>
     <br />
-    <SmallText>2.Hello, world.</SmallText>
+    <SmallText>
+      2.Hello, world <Counter />.
+    </SmallText>
     <br />
     <Counter />
+    <Memo a1 a2 />
+    <React.Suspense fallback="loading">
+      <Async />
+    </React.Suspense>
     <indirect.element />
     <indirectStyled.DS>
       {' '}

examples/styled-components/src/Async.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import Counter from './Counter'
+
+export default () => (
+  <div>
+    async test <Counter />
+  </div>
+)

examples/styled-components/webpack.config.babel.js

@@ -5,6 +5,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: ['./src/index'],
+  mode: 'development',
+  devtool: 'none',
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',