feat(component): add preload method

Closes #196

packages/component/src/createLoadable.js

@@ -163,6 +163,13 @@ function createLoadable({ resolve = identity, render, onLoad }) {
       <EnhancedInnerLoadable forwardedRef={ref} {...props} />
     ))
 
+    Loadable.preload = props => {
+      if (typeof window === 'undefined') {
+        throw new Error('`preload` cannot be called server-side')
+      }
+      ctor.requireAsync(props)
+    }
+
     return Loadable
   }
 

packages/component/src/resolvers.js

@@ -3,8 +3,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics'
 export function resolveComponent(loadedModule, { Loadable }) {
   const Component = loadedModule.default || loadedModule
   hoistNonReactStatics(Loadable, Component, {
-    prefetch: true,
-    Prefetch: true,
+    preload: true,
   })
   return Component
 }

website/src/pages/docs/api-loadable-component.mdx

@@ -6,7 +6,7 @@ order: 10
 
 # @loadable/component
 
-## Loadable
+## loadable
 
 Create a loadable component.
 
@@ -23,7 +23,7 @@ import loadable from '@loadable/component'
 const OtherComponent = loadable(() => import('./OtherComponent'))
 ```
 
-## Lazy
+## lazy
 
 Create a loadable component "Suspense" ready.
 
@@ -46,6 +46,22 @@ A component created using `loadable` or `lazy`.
 | `fallback` | Fallback displayed during the loading.            |
 | `...`      | Props are forwarded as first argument of `loadFn` |
 
+## LoadableComponent.preload
+
+Force the loading of a component.
+
+| Arguments | Description                        |
+| --------- | ---------------------------------- |
+| `args`    | Props passed to the load function. |
+
+```js
+import loadable from '@loadable/component'
+
+const OtherComponent = loadable(() => import('./OtherComponent'))
+
+OtherComponent.preload()
+```
+
 ## loadable.lib
 
 Create a loadable library.

website/src/pages/docs/prefetching.mdx

@@ -14,8 +14,40 @@ Most of the time, you want to "prefetch" a component, it means it will be loaded
 import loadable from '@loadable/component'
 
 const OtherComponent = loadable(() =>
-  import(/* webpackPrefetch: true */ './OtherComponent')
+  import(/* webpackPrefetch: true */ './OtherComponent'),
 )
 ```
 
 > You can extract prefetched resources server-side to add `<link rel="prefetch">` in your head.
+
+## Manually preload a component
+
+It is possible to _force_ the preload of a component. It has the same effect as if the component is rendered for the first time.
+
+It can be useful to trigger a `preload` on mouse over:
+
+```js
+import loadable from '@loadable/component'
+
+const Infos = () => loadable(() => './Infos')
+
+function App() {
+  const [show, setShow] = useState(false)
+  return (
+    <div>
+      <a onMouseOver={() => Infos.preload()} onClick={() => setShow(true)}>
+        Show Infos
+      </a>
+      {show && <Infos />}
+    </div>
+  )
+}
+
+const OtherComponent = loadable(() =>
+  import(/* webpackPrefetch: true */ './OtherComponent'),
+)
+```
+
+> `preload` is not available server-side, you should only call it client-side. If you want to use prefetching server-side, use webpack hints instead.
+
+> `preload` is aggressive and doesn't take care of network condition and data saving preference of the user. You should call it carefully.