feat: improve SSR support

BREAKING CHANGE:

- SSR has been rewritten from scratch, if you use it, please follow the
new guide.
- Prefetch component and prefetch functions have been removed, please
use `webpackPrefetch` instead.

Author: gregberge

README.md

@@ -230,46 +230,19 @@ export const OtherComponent = loadable(() =>
 
 ### Prefetching
 
-To enhance user experience, you can prefetch components, it loads component in background. This way you will avoid loading at first component display.
+Loadable Components is fully compatible with [webpack hints `webpackPrefetch` and `webpackPreload`](https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules).
 
-Each `loadable` component exposes a `Prefetch` component. It renders nothing but prefetch the component.
+Most of the time, you want to "prefetch" a component, it means it will be loaded when the browser is idle. You can do it by adding `/* webpackPrefetch: true */` inside your import statement.
 
 ```js
 import loadable from '@loadable/component'
 
-const OtherComponent = loadable(() => import('./OtherComponent'))
-
-function MyComponent() {
-  return (
-    <div>
-      {/* Nothing will be rendered, but the component will be loaded in background */}
-      <OtherComponent.Prefetch />
-    </div>
-  )
-}
-```
-
-A method `prefetch` is also exposed, you can call it to trigger `prefetch` on user action.
-
-```js
-import loadable from '@loadable/component'
-
-const OtherComponent = loadable(() => import('./OtherComponent'))
-
-function MyComponent() {
-  return (
-    <div>
-      <button onMouseOver={() => OtherComponent.prefetch()}>
-        Prefetch on hover
-      </button>
-    </div>
-  )
-}
+const OtherComponent = loadable(() =>
+  import(/* webpackPrefetch: true */ './OtherComponent'),
+)
 ```
 
-> `prefetch` and `Prefetch` are also available for components created with `lazy`, `loadable.lib` and `lazy.lib`.
-
-> Only component based prefetching (`<Prefetch>`) is compatible with Server Side Rendering.
+> You can extract prefetched resources server-side to add `<link rel="prefetch">` in your head.
 
 ## API
 

examples/server-side-rendering/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

examples/server-side-rendering/.gitignore

@@ -0,0 +1 @@
+public/dist

examples/server-side-rendering/babel.config.js

@@ -0,0 +1,29 @@
+const loadableBabelPlugin = require('../../packages/babel-plugin')
+
+function isWebTarget(caller) {
+  return Boolean(caller && caller.target === 'web')
+}
+
+function isWebpack(caller) {
+  return Boolean(caller && caller.name === 'babel-loader')
+}
+
+module.exports = api => {
+  const web = api.caller(isWebTarget)
+  const webpack = api.caller(isWebpack)
+
+  return {
+    presets: [
+      '@babel/preset-react',
+      [
+        '@babel/preset-env',
+        {
+          useBuiltIns: web ? 'entry' : undefined,
+          targets: !web ? { node: 'current' } : undefined,
+          modules: webpack ? false : 'commonjs',
+        },
+      ],
+    ],
+    plugins: ['@babel/plugin-syntax-dynamic-import', loadableBabelPlugin],
+  }
+}

examples/server-side-rendering/nodemon.json

@@ -0,0 +1,6 @@
+{
+  "ignore": ["client", "public"],
+  "execMap": {
+    "js": "babel-node"
+  }
+}

examples/server-side-rendering/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "client-side",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nodemon src/server/main.js",
+    "build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
+    "build:webpack": "webpack",
+    "build:lib": "babel -d lib src",
+    "start": "NODE_ENV=production node lib/server/main.js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.2",
+    "@babel/node": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.1",
+    "mini-css-extract-plugin": "^0.4.4",
+    "nodemon": "^1.18.5",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "dependencies": {
+    "express": "^4.16.4",
+    "express-async-handler": "^1.1.4",
+    "moment": "^2.22.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
+  }
+}

examples/server-side-rendering/src/client/App.js

@@ -0,0 +1,25 @@
+import React from 'react'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component'
+import './main.css'
+
+const A = loadable(() => import('./letters/A'))
+const B = loadable(() => import('./letters/B'))
+const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
+const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
+
+// We keep some references to prevent uglify remove
+A.C = C
+A.D = D
+
+const Moment = loadable.lib(() => import('moment'))
+
+const App = () => (
+  <div>
+    <A />
+    <B />
+    <Moment>{moment => moment().format('HH:mm')}</Moment>
+  </div>
+)
+
+export default App

examples/server-side-rendering/src/client/letters/A.css

@@ -0,0 +1 @@
+/* A CSS */

examples/server-side-rendering/src/client/letters/A.js

@@ -0,0 +1,10 @@
+// We simulate that "moment" is called in "A" and "B"
+import moment from 'moment'
+import './A.css'
+
+const A = () => 'A'
+
+// We keep a reference to prevent uglify remove
+A.moment = moment
+
+export default A

examples/server-side-rendering/src/client/letters/B.js

@@ -0,0 +1,9 @@
+// We simulate that "moment" is called in "A" and "B"
+import moment from 'moment'
+
+const B = () => 'B'
+
+// We keep a reference to prevent uglify remove
+B.moment = moment
+
+export default B