fix: restore async behaviour, fixes #141

example/app.tsx

@@ -1,22 +1,41 @@
-import * as React from 'react';
-import {Component} from 'react';
-import {GHCorner} from 'react-gh-corner';
-import {AppWrapper} from './styled';
-export interface AppState {
-
+import * as React from "react";
+
+import imported, {lazy, LazyBoundary} from "../src";
+
+const deferImport = (promise: Promise<any>) => new Promise(resolve => setTimeout(() => resolve(promise), 2000));
+
+const Lazy = () => <div>I AM LAZY</div>;
+
+
+const ReactLazy = React.lazy(() => deferImport({default: Lazy}));
+const ImportedLazy = lazy(() => deferImport({default: Lazy}));
+const Imported = imported(() => deferImport({default: Lazy}));
+const ImportedLoading = imported(() => deferImport({default: Lazy}), { LoadingComponent: () => "imported is loading"});
+
+function App() {
+  return (
+    <div className="App">
+      <h1>Lazy Loading</h1>
+      <ul>
+        <li>
+          <React.Suspense fallback={<div>Loading (React)</div>}>
+            <ReactLazy/>
+          </React.Suspense>
+        </li>
+        <li>
+          <LazyBoundary fallback={<div>Loading (Imported)</div>}>
+            <ImportedLazy/>
+          </LazyBoundary>
+        </li>
+        <li>
+            <Imported/>
+        </li>
+        <li>
+            <ImportedLoading/>
+        </li>
+      </ul>
+    </div>
+  );
 }
-const repoUrl = 'https://github.com/zzarcon/';
-export default class App extends Component <{}, AppState> {
-  state: AppState = {
-
-  }
 
-  render() {
-    return (
-      <AppWrapper>
-        <GHCorner openInNewTab href={repoUrl} />
-        Example!
-      </AppWrapper>
-    )
-  }
-}
+export default App;

package.json

@@ -70,11 +70,11 @@
         "dist/es2015/index.js",
         "dist/es2015/boot.js"
       ],
-      "limit": "3.3 KB"
+      "limit": "3.4 KB"
     },
     {
       "path": "dist/es2015/index.js",
-      "limit": "3 KB"
+      "limit": "3.1 KB"
     },
     {
       "path": "dist/es2015/boot.js",

src/Component.tsx

@@ -24,6 +24,9 @@ function ImportedComponent<P, K>(props: ComponentOptions<P, K>): ReactElement |
   }
 
   if (loading) {
+    if (props.async) {
+      throw loadable.resolution;
+    }
     return props.LoadingComponent
       ? <props.LoadingComponent {...props.forwardProps} />
       : null;

src/HOC.tsx

@@ -36,6 +36,7 @@ function loader<P, K = P>(
           onError={options.onError}
 
           render={options.render}
+          async={options.async}
 
           forwardProps={props || {}}
           forwardRef={ref}
@@ -51,7 +52,7 @@ function loader<P, K = P>(
   Imported.done = loadable.resolution;
 
   return Imported;
-};
+}
 
 export function lazy<T>(importer: LazyImport<T>): React.FC<T> {
   if (isBackend) {

src/boot.ts

@@ -2,13 +2,16 @@ import {rehydrateMarks} from './marks';
 import {done as whenComponentsReady, assignImportedComponents} from './loadable';
 import {setConfiguration} from './config';
 import {injectLoadableTracker} from './trackers/globalTracker';
+import {loadByChunkname} from './loadByChunkName';
 
 
 export {
   rehydrateMarks,
   whenComponentsReady,
   assignImportedComponents,
 
+  loadByChunkname,
+
   setConfiguration,
 
   injectLoadableTracker,

src/index.ts

@@ -13,6 +13,7 @@ import {setConfiguration} from './config';
 import {remapImports} from './helpers';
 
 import {useImported, useLoadable, useLazy} from './useImported';
+import {loadByChunkname} from './loadByChunkName';
 
 export {
   printDrainHydrateMarks,
@@ -23,6 +24,8 @@ export {
   dryRender,
   assignImportedComponents,
 
+  loadByChunkname,
+
   ComponentLoader,
   loadableResource,
 

src/loadByChunkName.ts

@@ -0,0 +1,9 @@
+import {markMeta} from "./loadable";
+
+export const loadByChunkname = (chunkName: string) => (
+   Promise.all(
+      markMeta
+        .filter(meta => meta.chunkName === chunkName)
+        .map(meta => meta.loadable.load())
+   )
+);

src/loadable.ts

@@ -180,8 +180,8 @@ export const dryRender = (renderFunction: () => void) => {
 
 export const markMeta: MarkMeta[] = [];
 
-const assignMetaData = (mark: Mark, chunkName: string, fileName: string) => {
-  markMeta.push({mark, chunkName, fileName});
+const assignMetaData = (mark: Mark, loadable: Loadable<any>, chunkName: string, fileName: string) => {
+  markMeta.push({mark, loadable, chunkName, fileName});
 };
 
 type ImportedDefinition = [Promised<any>, string, string]
@@ -194,7 +194,7 @@ export const assignImportedComponents = (set: Array<ImportedDefinition>) => {
       marks.forEach(mark => REJECTED_MARKS.add(mark))
     }
     const loadable = toLoadable(imported[0]);
-    assignMetaData(loadable.mark, imported[1], imported[2]);
+    assignMetaData(loadable.mark, loadable, imported[1], imported[2]);
   });
 
   if (countBefore === LOADABLE_SIGNATURE.size) {

src/types.ts

@@ -24,6 +24,7 @@ export type Defaultable<P> = P | Default<P>;
 export type DefaultImport<T> = () => Promise<Defaultable<T>>
 
 export interface MarkMeta {
+  loadable: Loadable<any>;
   mark: Mark;
   chunkName: string;
   fileName: string;