fix(component): fix lazy usage

It seems like a breaking change but the library has been released
yesterday, so I will not publish a new major again.

README.md

@@ -123,12 +123,12 @@ function MyComponent() {
 
 ### Suspense
 
-`@loadable/component` exposes a `loadable.lazy` method that acts similarly as `React.lazy` one.
+`@loadable/component` exposes a `lazy` method that acts similarly as `React.lazy` one.
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
+const OtherComponent = lazy(() => import('./OtherComponent'))
 
 function MyComponent() {
   return (
@@ -141,7 +141,7 @@ function MyComponent() {
 }
 ```
 
-> Use `loadable.lib.lazy` for libraries.
+> Use `lazy.lib` for libraries.
 
 > Suspense is not yet available for server-side rendering.
 
@@ -183,18 +183,16 @@ If the other module fails to load (for example, due to network failure), it will
 
 ```js
 import MyErrorBoundary from '/MyErrorBoundary'
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
-const AnotherComponent = loadable.lazy(() => import('./AnotherComponent'))
+const OtherComponent = loadable(() => import('./OtherComponent'))
+const AnotherComponent = loadable(() => import('./AnotherComponent'))
 
 const MyComponent = () => (
   <div>
     <MyErrorBoundary>
-      <Suspense fallback={<div>Loading...</div>}>
-        <section>
-          <OtherComponent />
-          <AnotherComponent />
-        </section>
-      </Suspense>
+      <section>
+        <OtherComponent />
+        <AnotherComponent />
+      </section>
     </MyErrorBoundary>
   </div>
 )
@@ -267,7 +265,7 @@ function MyComponent() {
 }
 ```
 
-> `prefetch` and `Prefetch` are also available for components created with `loadable.lazy`, `loadable.lib` and `loadable.lib.lazy`.
+> `prefetch` and `Prefetch` are also available for components created with `lazy`, `loadable.lib` and `lazy.lib`.
 
 > Only component based prefetching is compatible with Server Side Rendering.
 
@@ -289,7 +287,7 @@ import loadable from '@loadable/component'
 const OtherComponent = loadable(() => import('./OtherComponent'))
 ```
 
-### loadableState.lazy
+### lazy
 
 Create a loadable component "Suspense" ready.
 
@@ -298,14 +296,14 @@ Create a loadable component "Suspense" ready.
 | `loadFn`  | The function call to load the component. |
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const OtherComponent = loadable.lazy(() => import('./OtherComponent'))
+const OtherComponent = lazy(() => import('./OtherComponent'))
 ```
 
 ### LoadableComponent
 
-A component created using `loadable` or `loadable.lazy`.
+A component created using `loadable` or `lazy`.
 
 | Props      | Description                                       |
 | ---------- | ------------------------------------------------- |
@@ -328,7 +326,7 @@ import loadable from '@loadable/component'
 const Moment = loadable.lib(() => import('moment'))
 ```
 
-### loadable.lib.lazy
+### lazy.lib
 
 Create a loadable library "Suspense" ready.
 
@@ -337,14 +335,14 @@ Create a loadable library "Suspense" ready.
 | `loadFn`  | The function call to load the component. |
 
 ```js
-import loadable from '@loadable/component'
+import { lazy } from '@loadable/component'
 
-const Moment = loadable.lib.lazy(() => import('moment'))
+const Moment = lazy.lib(() => import('moment'))
 ```
 
 ### LoadableLibrary
 
-A component created using `loadable.lib` or `loadable.lib.lazy`.
+A component created using `loadable.lib` or `lazy.lib`.
 
 | Props      | Description                                          |
 | ---------- | ---------------------------------------------------- |

examples/suspense/src/index.js

@@ -1,9 +1,9 @@
 import React, { Suspense } from 'react'
 import { render } from 'react-dom'
-import loadable from '../../../packages/component'
+import { lazy } from '../../../packages/component'
 
-const Hello = loadable.lazy(() => import('./Hello'))
-const Moment = loadable.lib(() => import('moment'))
+const Hello = lazy(() => import('./Hello'))
+const Moment = lazy.lib(() => import('moment'))
 
 const App = () => (
   <div>

packages/component/src/createLoadable.js

@@ -134,6 +134,8 @@ function createLoadable({ resolve = identity, render, onLoad }) {
             .catch(error => {
               this.setState({ error, loading: false })
             })
+
+        return this.promise
       }
 
       render() {
@@ -183,9 +185,7 @@ function createLoadable({ resolve = identity, render, onLoad }) {
     return loadable(ctor, { ...options, suspense: true })
   }
 
-  loadable.lazy = lazy
-
-  return loadable
+  return { loadable, lazy }
 }
 
 export default createLoadable

packages/component/src/index.js

@@ -1,12 +1,16 @@
 /* eslint-disable no-underscore-dangle */
 import * as sharedInternals from './sharedInternals'
-import loadable from './loadable'
-import library from './library'
+import * as loadableExports from './loadable'
+import * as libraryExports from './library'
 
-loadable.lib = library
+const { loadable } = loadableExports
+loadable.lib = libraryExports.loadable
+
+const { lazy } = loadableExports
+lazy.lib = libraryExports.lazy
 
 export default loadable
-export { default as library } from './library'
+export { lazy }
 
 export { default as loadComponents } from './loadComponents'
 export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals

packages/component/src/library.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 import createLoadable from './createLoadable'
 
-const library = createLoadable({
+export const { loadable, lazy } = createLoadable({
   onLoad(result, props) {
     if (result && props.ref) {
       if (typeof props.ref === 'function') {
@@ -19,5 +19,3 @@ const library = createLoadable({
     return null
   },
 })
-
-export default library

packages/component/src/loadable.js

@@ -3,11 +3,9 @@ import React from 'react'
 import createLoadable from './createLoadable'
 import { resolveComponent } from './resolvers'
 
-const loadable = createLoadable({
+export const { loadable, lazy } = createLoadable({
   resolve: resolveComponent,
   render({ result: Component, props }) {
     return <Component {...props} />
   },
 })
-
-export default loadable