refactor: make each component an AppContainer (#830)

Fix #806

examples/async-portals/.babelrc

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

examples/async-portals/.gitignore

@@ -0,0 +1 @@
+node_modules

examples/async-portals/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "hot-async-portals",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --hot"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "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"
+  },
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "next",
+    "react-portal": "^4.1.2"
+  }
+}

examples/async-portals/src/App.js

@@ -0,0 +1,21 @@
+import { hot, setConfig } from 'react-hot-loader'
+import * as React from 'react'
+import Counter from './Counter'
+import AsyncComponent from './async-component'
+import Portal from './Portal'
+
+const importer = () => import('./DeferredRender')
+const Async = () => <AsyncComponent importer={importer} />
+
+const App = () => (
+  <h1>
+    <p>{40}!</p>
+    <Counter />
+    <Async />
+    <Portal />
+  </h1>
+)
+
+setConfig({ logLevel: 'debug' })
+
+export default hot(module)(App)

examples/async-portals/src/Counter.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const RAND = Math.round(Math.random() * 1000)
+
+class Counter extends React.Component {
+  state = { count: 0 }
+  gen = 0
+
+  componentDidMount() {
+    this.setState({
+      count: RAND,
+    })
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    // gen should change. count - no.
+    return (
+      <span>
+        {this.state.count}:{this.gen++}
+      </span>
+    )
+  }
+}
+
+export default Counter

examples/async-portals/src/DeferredRender.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Portal } from 'react-portal'
+import hidden from './HiddenComponent'
+
+const Hidden = hidden()
+
+const APortal = () => (
+  <Portal>
+    This is a async portal
+    <Hidden.counter />
+  </Portal>
+)
+
+export default () => (
+  <div>
+    ASYNC
+    <Hidden.counter />
+    and <APortal />
+  </div>
+)

examples/async-portals/src/HiddenComponent.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Counter from './Counter'
+
+const hidden = function() {
+  return {
+    counter: () => (
+      <div>
+        this is hidden counter(<Counter />)
+      </div>
+    ),
+  }
+}
+
+export default hidden

examples/async-portals/src/Portal.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Portal } from 'react-portal'
+import hidden from './HiddenComponent'
+
+const Hidden = hidden()
+
+const InPortal = ({ children }) => <div> + {children}</div>
+
+export default () => (
+  <Portal>
+    <InPortal>
+      This is a first portal
+      <Hidden.counter />
+    </InPortal>
+  </Portal>
+)

examples/async-portals/src/async-component.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+
+class AsyncComponent extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  componentWillMount() {
+    this.load()
+  }
+
+  componentWillReceiveProps() {
+    if (module.hot) {
+      setImmediate(() => {
+        this.load()
+      })
+    }
+  }
+
+  load() {
+    return this.props.importer().then(payload => {
+      this.setState({ AsyncComponent: payload.default })
+    })
+  }
+
+  render() {
+    const { AsyncComponent } = this.state
+
+    if (AsyncComponent) {
+      return <AsyncComponent {...this.props} />
+    }
+    return <div>async</div>
+  }
+}
+
+export default AsyncComponent

examples/async-portals/src/index.js

@@ -0,0 +1,9 @@
+import 'babel-polyfill'
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+const root = document.createElement('div')
+document.body.appendChild(root)
+
+render(<App />, root)

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

@@ -0,0 +1,22 @@
+/* eslint-disable */
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        //exclude: /node_modules|packages/,  // should work without exclude
+        test: /\.js$/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
+}