async examples

Author: theKashey

examples/async-components/package.json

@@ -6,6 +6,7 @@
     "start": "webpack-dev-server --hot"
   },
   "devDependencies": {
+    "@hot-loader/react-dom": "^16.7.0-alpha.2.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -23,7 +24,7 @@
     "react-async-component": "^2.0.0",
     "react-dom": "^16.4.1",
     "react-emotion": "^8.0.12",
-    "react-hot-loader": "^4.1.1",
+    "react-hot-loader": "^4.5.2",
     "react-imported-component": "^5.2.0",
     "react-loadable": "^5.5.0",
     "react-remock": "^0.2.1",

examples/async-components/src/App.js

@@ -3,11 +3,11 @@ import * as React from 'react'
 import styled from 'styled-components'
 import emoStyled from 'react-emotion'
 
-import CAsync from './chunks/async-component'
-import CLoadableComp from './chunks/loadable-components'
-import CLoadable from './chunks/react-loadable'
-import CImp from './chunks/react-imported-component'
-import CUni from './chunks/react-universal-component'
+// import CAsync from './chunks/async-component'
+// import CLoadableComp from './chunks/loadable-components'
+import { RLoadable1, RLoadable2 } from './chunks/react-loadable'
+// import CImp from './chunks/react-imported-component'
+// import CUni from './chunks/react-universal-component'
 
 const BigText = styled.div`
   font-size: 20px;
@@ -29,21 +29,22 @@ const App = () => (
   <div>
     Testing React-Hot-Loader againts "React code splitting" components
     <ul>
+      {/*<li>*/}
+      {/*Async-components <CAsync />*/}
+      {/*</li>*/}
+      {/*<li>*/}
+      {/*Loadable-components <CLoadableComp />*/}
+      {/*</li>*/}
       <li>
-        Async-components <CAsync />
-      </li>
-      <li>
-        Loadable-components <CLoadableComp />
-      </li>
-      <li>
-        React-Loadable <CLoadable />
-      </li>
-      <li>
-        Imported-component <CImp />
-      </li>
-      <li>
-        Universal-component <CUni />
+        React-Loadable <RLoadable1 />
+        1
       </li>
+      {/*<li>*/}
+      {/*Imported-component <CImp />*/}
+      {/*</li>*/}
+      {/*<li>*/}
+      {/*Universal-component <CUni />*/}
+      {/*</li>*/}
     </ul>
   </div>
 )

examples/async-components/src/Counter.js

@@ -5,6 +5,7 @@ class Counter extends React.Component {
   state = { count: 0 }
 
   componentDidMount() {
+    //
     this.interval = setInterval(
       () => this.setState(prevState => ({ count: prevState.count + 1 })),
       200,
@@ -16,8 +17,13 @@ class Counter extends React.Component {
   }
 
   render() {
-    return <div>#{this.state.count}</div>
+    return (
+      <div>
+        1#{this.state.count}
+        <span>5</span>
+      </div>
+    )
   }
 }
 
-export default Counter //hot(module)(Counter)
+export default Counter

examples/async-components/src/Counter2.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { hot } from 'react-hot-loader'
+
+class Counter extends React.Component {
+  state = { count: 0 }
+
+  componentDidMount() {
+    //return;
+    this.interval = setInterval(
+      () => this.setState(prevState => ({ count: prevState.count + 2 })),
+      200,
+    )
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    return <div>2#{this.state.count}</div>
+  }
+}
+
+export default Counter

examples/async-components/src/chunks/loadable-components.js

@@ -1,4 +1,6 @@
 // import loadable from 'loadable-components' // this is old API
 import loadable from '@loadable/component'
 
-export default loadable(() => import('../Counter'))
+export const Loadable1 = loadable(() => import('../Counter'))
+
+export const Loadable2 = loadable(() => import('../Counter2'))

examples/async-components/src/chunks/react-loadable.js

@@ -1,7 +1,12 @@
 import React from 'react'
 import Loadable from 'react-loadable'
 
-export default Loadable({
+export const RLoadable1 = Loadable({
   loader: () => import('../Counter'),
   loading: () => <div />,
 })
+
+export const RLoadable2 = Loadable({
+  loader: () => import('../Counter2'),
+  loading: () => <div />,
+})

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

@@ -12,7 +12,7 @@ module.exports = {
   module: {
     rules: [
       {
-        //exclude: /node_modules|packages/,  // should work without exclude
+        exclude: /node_modules|packages/, // should work without exclude
         test: /\.js$/,
         use: 'babel-loader',
       },
@@ -22,6 +22,9 @@ module.exports = {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
     alias: {
       react: path.resolve(path.join(__dirname, './node_modules/react')),
+      'react-dom': path.resolve(
+        path.join(__dirname, './node_modules/@hot-loader/react-dom'),
+      ),
       'babel-core': path.resolve(
         path.join(__dirname, './node_modules/@babel/core'),
       ),

examples/async-components/yarn.lock

@@ -19,6 +19,11 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@hot-loader/react-dom@^16.7.0-alpha.2.1":
+  version "16.7.0-alpha.2.1"
+  resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.7.0-alpha.2.1.tgz#c80fbb9b84b7b1d66377e6987a2bc2b3cde6f6b4"
+  integrity sha512-Cyqqv4Lb2OU4Rs5poEsScO1qEMJyzs/77g5RLO0WF/qw6sT+blKs8AAQVoQJ5HHUMELBlncckBjF4ps0QLwQiA==
+
 "@loadable/component@^4.0.2":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@loadable/component/-/component-4.0.2.tgz#9e3f08e7c8ecf9a4733cc4ae760ae19596fad57d"
@@ -2992,6 +2997,11 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -3860,17 +3870,20 @@ react-emotion@^8.0.12:
     babel-plugin-emotion "^8.0.12"
     emotion-utils "^8.0.12"
 
-react-hot-loader@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.1.1.tgz#693499a6414b6dc6880287e254322a9d3155e944"
-  integrity sha512-bwDWesjqXABplFfqNOC6imbmW9y1JtT5RAo+hdIJ4OW2FsU48nrVzFiG8z9a+eB3Xd0C+KzFwD8aq31M+6SYKQ==
+react-hot-loader@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.5.2.tgz#5a91984196fb72801a52c62bfad0eb2322d7bcd3"
+  integrity sha512-R/mYorMt2YC9IkF/bpJqiYezrz5z1F7F+W1XIaiGezeuonQWIRpNycZRobkYHJNz66QKq6eBWeUYV6/AMmfaLw==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
     hoist-non-react-statics "^2.5.0"
+    loader-utils "^1.1.0"
+    lodash.merge "^4.6.1"
     prop-types "^15.6.1"
-    react-lifecycles-compat "^2.0.0"
+    react-lifecycles-compat "^3.0.4"
     shallowequal "^1.0.2"
+    source-map "^0.7.3"
 
 react-imported-component@^5.2.0:
   version "5.2.0"
@@ -3887,10 +3900,10 @@ react-is@^16.3.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.1.tgz#f77b1c3d901be300abe8d58645b7a59e794e5982"
   integrity sha512-wOKsGtvTMYs7WAscmwwdM8sfRRvE17Ym30zFj3n37Qx5tHRfhenPKEPILHaHob6WoLFADmQm1ZNrE5xMCM6sCw==
 
-react-lifecycles-compat@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-2.0.2.tgz#00a23160eec17a43b94dd74f95d44a1a2c3c5ec1"
-  integrity sha512-BPksUj7VMAAFhcCw79sZA0Ow/LTAEjs3Sio1AQcuwLeOP+ua0f/08Su2wyiW+JjDDH6fRqNy3h5CLXh21u1mVg==
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
 react-loadable@^5.5.0:
   version "5.5.0"
@@ -4337,6 +4350,11 @@ [email protected], source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"