feat: experimental suspense 🤩

Also update example

.eslintignore

@@ -2,4 +2,3 @@ node_modules/
 /coverage/
 /dist/
 __fixtures__/
-/example/

example/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'jsx-a11y/anchor-is-valid': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': 'off',
+  },
+}

example/package.json

@@ -4,15 +4,16 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev:server": "nodemon server",
+    "dev:server": "nodemon src/server.js",
     "dev:client": "webpack-dev-server"
   },
   "dependencies": {
     "express": "^4.16.3",
     "loadable-components": "latest",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-hot-loader": "^4.1.3"
+    "react": "canary",
+    "react-dom": "canary",
+    "react-hot-loader": "^4.1.3",
+    "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

example/src/App.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { hot } from 'react-hot-loader'
+import { Link, Route } from 'react-router-dom'
+import Home from './Home'
+import Nesting from './nesting/Nesting'
+import SameModules from './same-modules/SameModules'
+import MultipleLoad from './multiple-load/MultipleLoad'
+import HotReloadingSandbox from './hot-reloading-sandbox/HotReloadingSandbox'
+import AsyncMode from './async-mode/AsyncMode'
+
+const App = () => (
+  <div>
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/nesting">Nesting</Link>
+        </li>
+        <li>
+          <Link to="/same-modules">Same modules</Link>
+        </li>
+        <li>
+          <Link to="/multiple-load">Multiple Load</Link>
+        </li>
+        <li>
+          <Link to="/hot-reloading-sandbox">Hot Reloading Sandbox</Link>
+        </li>
+        <li>
+          <Link to="/async-mode">Async Mode</Link>
+        </li>
+      </ul>
+    </nav>
+    <main>
+      <Route exact path="/" component={Home} />
+      <Route path="/nesting" component={Nesting} />
+      <Route path="/same-modules" component={SameModules} />
+      <Route path="/multiple-load" component={MultipleLoad} />
+      <Route path="/hot-reloading-sandbox" component={HotReloadingSandbox} />
+      <Route path="/async-mode" component={AsyncMode} />
+    </main>
+  </div>
+)
+
+export default hot(module)(App)

example/src/Home.js

@@ -0,0 +1,3 @@
+const Home = () => 'Welcome on Loadable Components examples'
+
+export default Home

example/src/async-mode/AsyncMode.js

@@ -0,0 +1,20 @@
+import React, { Timeout } from 'react'
+import loadable from 'loadable-components'
+
+const AsyncWorld = loadable(
+  () =>
+    import('./World').then(
+      World => new Promise(resolve => setTimeout(() => resolve(World), 500)),
+    ),
+  { asyncMode: true },
+)
+
+const AsyncMode = () => (
+  <React.Fragment>
+    <Timeout ms={100}>
+      {didTimeout => (didTimeout ? 'Loading...' : <AsyncWorld />)}
+    </Timeout>
+  </React.Fragment>
+)
+
+export default AsyncMode

example/src/async-mode/World.js

@@ -0,0 +1 @@
+export default () => 'World'

example/client.js → example/src/client.js

@@ -1,9 +1,15 @@
 /* eslint-env browser */
 import ReactDOM from 'react-dom'
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import { loadComponents } from 'loadable-components'
 import App from './App'
 
 loadComponents().then(() => {
-  ReactDOM.hydrate(<App />, document.getElementById('root'))
+  ReactDOM.hydrate(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>,
+    document.getElementById('root'),
+  )
 })

example/src/hot-reloading-sandbox/HotReloadingSandbox.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadable from 'loadable-components'
+
+const AsyncCounter = loadable(() => import('./Counter'))
+
+const HotReloadingSandbox = () => (
+  <React.Fragment>
+    Counter: <AsyncCounter />
+  </React.Fragment>
+)
+
+export default HotReloadingSandbox

example/src/multiple-load/Amazing.js

@@ -0,0 +1 @@
+export default () => 'Amazing'

example/What.js → example/src/multiple-load/MultipleLoad.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import loadable from 'loadable-components'
 
-const What = loadable(
+const MultipleLoad = loadable(
   async () => {
     const {
       default: World,
@@ -20,4 +20,4 @@ const What = loadable(
   },
 )
 
-export default What
+export default MultipleLoad

example/src/multiple-load/World.js

@@ -0,0 +1 @@
+export default () => 'World'

example/src/nesting/AmazingWorld.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadable from 'loadable-components'
+
+const AsyncWorld = loadable(() => import('./World'))
+
+const AmazingWorld = () => (
+  <React.Fragment>
+    Amazing <AsyncWorld />
+  </React.Fragment>
+)
+
+export default AmazingWorld

example/src/nesting/Nesting.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadable from 'loadable-components'
+
+const AsyncAmazingWorld = loadable(() => import('./AmazingWorld'))
+
+const Nesting = () => (
+  <React.Fragment>
+    This is an <AsyncAmazingWorld />
+  </React.Fragment>
+)
+
+export default Nesting

example/src/nesting/World.js

@@ -0,0 +1,3 @@
+const World = () => 'World'
+
+export default World

example/A/index.js → example/src/same-modules/A/index.js

@@ -1,4 +1,3 @@
-import React, { Component } from 'react'
 import loadable from 'loadable-components'
 
 const Loaded = loadable(() => import('./Component'))

example/B/index.js → example/src/same-modules/B/index.js

@@ -1,4 +1,3 @@
-import React, { Component } from 'react'
 import loadable from 'loadable-components'
 
 const Loaded = loadable(() => import('./Component'))

example/src/same-modules/SameModules.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import A from './A'
+import B from './B'
+
+const Nesting = () => (
+  <React.Fragment>
+    <A /> <B />
+  </React.Fragment>
+)
+
+export default Nesting

example/src/server.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import { StaticRouter } from 'react-router-dom'
+import express from 'express'
+import { getLoadableState } from 'loadable-components/server'
+import App from './App'
+
+const app = express()
+
+app.use(async (req, res) => {
+  try {
+    const routerContext = {}
+    const reactApp = (
+      <StaticRouter context={routerContext} location={req.url}>
+        <App />
+      </StaticRouter>
+    )
+    const loadableState = await getLoadableState(reactApp)
+    const stream = ReactDOMServer.renderToNodeStream(reactApp)
+    res.write(`<!DOCTYPE html><html><body><div id="root">`)
+    stream.pipe(res, { end: false })
+    stream.on('end', () => {
+      res.end(
+        `</div>${loadableState.getScriptTag()}<script src="bundle.js"></script></body></html>`,
+      )
+    })
+  } catch (err) {
+    res.status(500)
+    res.send(err.stack)
+  }
+})
+
+app.listen(3000, () => console.log('http://localhost:3000'))

example/webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack')
 
 module.exports = {
   mode: 'development',
-  entry: './client.js',
+  entry: './src/client.js',
   output: {
     path: path.resolve(__dirname, 'public'),
     filename: 'bundle.js',