feat: experimental suspense 🤩

gregberge · gregberge · commit 57ce712ddf84 · 2018-05-13T19:18:10.000Z
Also update example
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,3 @@ node_modules/
 /coverage/
 /dist/
 __fixtures__/
-/example/
diff --git a/example/.eslintrc.js b/example/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'jsx-a11y/anchor-is-valid': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': 'off',
+  },
+}
diff --git a/example/Amazing.js b/example/Amazing.js
diff --git a/example/App.js b/example/App.js
diff --git a/example/Big.js b/example/Big.js
diff --git a/example/World.js b/example/World.js
diff --git a/example/package.json b/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",
diff --git a/example/server.js b/example/server.js
diff --git a/example/src/App.js b/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)
diff --git a/example/src/Home.js b/example/src/Home.js
@@ -0,0 +1,3 @@
+const Home = () => 'Welcome on Loadable Components examples'
+
+export default Home
diff --git a/example/src/async-mode/AsyncMode.js b/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
diff --git a/example/src/async-mode/World.js b/example/src/async-mode/World.js
@@ -0,0 +1 @@
+export default () => 'World'
diff --git a/example/src/client.js b/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'),
+  )
 })
diff --git a/example/src/hot-reloading-sandbox/Counter.js b/example/src/hot-reloading-sandbox/Counter.js
diff --git a/example/src/hot-reloading-sandbox/HotReloadingSandbox.js b/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
diff --git a/example/src/multiple-load/Amazing.js b/example/src/multiple-load/Amazing.js
@@ -0,0 +1 @@
+export default () => 'Amazing'
diff --git a/example/src/multiple-load/MultipleLoad.js b/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
diff --git a/example/src/multiple-load/World.js b/example/src/multiple-load/World.js
@@ -0,0 +1 @@
+export default () => 'World'
diff --git a/example/src/nesting/AmazingWorld.js b/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
diff --git a/example/src/nesting/Nesting.js b/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
diff --git a/example/src/nesting/World.js b/example/src/nesting/World.js
@@ -0,0 +1,3 @@
+const World = () => 'World'
+
+export default World
diff --git a/example/src/same-modules/A/Component.js b/example/src/same-modules/A/Component.js
diff --git a/example/src/same-modules/A/index.js b/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'))
diff --git a/example/src/same-modules/B/Component.js b/example/src/same-modules/B/Component.js
diff --git a/example/src/same-modules/B/index.js b/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'))
diff --git a/example/src/same-modules/SameModules.js b/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
diff --git a/example/src/server.js b/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'))
diff --git a/example/webpack.config.js b/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',
diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/src/loadable.js b/src/loadable.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const Home = () => 'Welcome on Loadable Components examples'`
	`2`	`+`
	`3`	`+export default Home`