refactor double nested code splitting + react-hot-loader

Author: theKashey

README.md

@@ -163,9 +163,12 @@ What you could load using `useImported`? Everything - `imported` itself is using
 <a name="api"/>
 
 # API
+> Don't forget - there are TS typings provided.
 
 ### Code splitting components
 > import {*} from 'react-imported-component';
+
+##### importedComponent
 - `importedComponent(importFunction, [options]): ComponentLoader` - main API, default export, HOC to create imported component.
   - `importFunction - function which resolves with Component to be imported.
   - `options` - optional settings
@@ -178,12 +181,18 @@ What you could load using `useImported`? Everything - `imported` itself is using
 
   - [static] `.preload` - static method to preload components.
 
+##### lazy
 - `lazy(importFunction)` - helper to mimic __React.lazy__ behavior
 
-- `useImported(importFunction, exportPicker?)` - code splitting hook
-  - `importFunction` - a function which resolves to `default` or `wildcard` import(T | {default:T})
-  - `exportPicker` - function to pick "T" from the import
+##### useImported
 
+- `useImported(importFunction, [exportPicker], [options])` - code splitting hook
+  - `importFunction` - a function which resolves to `default` or `wildcard` import(T | {default:T})
+  - `[exportPicker]` - function to pick "T" from the import
+  - `[options]` - options to the hook
+    - `[options.import]` - controls import. Hooks would be executed only if this is not false
+    - `[options.track]` - ability to disable server-side usage tracking. 
+]
 ### Server side API
 > import {*} from 'react-imported-component/server';
 - `whenComponentsReady():Promise` - will be resolved, when all components are loaded. Usually on the next "Promise" tick.

examples/react-hot-loader/package.json

@@ -20,8 +20,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-hot-loader": "^4.12.11",
-    "react-imported-component": "../../react-imported-component-6.0.0-beta.1.tgz",
+    "react-hot-loader": "^4.12.12",
+    "react-imported-component": "^6.0.1",
     "react-portal": "^4.1.2"
   }
 }

examples/react-hot-loader/src/DeferredRender.js

@@ -1,20 +1,29 @@
 import React from 'react'
-import { Portal } from 'react-portal'
+import imported, {remapImports} from 'react-imported-component';
+import {Portal} from 'react-portal'
 import hidden from './HiddenComponent'
 
+const V = 2;
+console.log('run ', V);
+const SubAsync = imported(() => {
+  console.log('import ', V);
+  return remapImports(import('./SubAsync'), x => x.SubAsync)
+});
+
 const Hidden = hidden();
 
 const APortal = () => (
   <Portal>
     This is a async portal
-    <Hidden.counter />
+    <Hidden.counter/>
   </Portal>
-)
+);
 
 export default () => (
   <div>
     ASYNC 77
-    <Hidden.counter />
-    and <APortal />
+    <Hidden.counter/>
+    and <APortal/>
+    + <SubAsync/>
   </div>
-)
+);

examples/react-hot-loader/src/SubAsync.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+console.log('sub async 4');
+
+export const SubAsync = () => (
+  <div>
+    Async In Async!
+  </div>
+);

examples/react-hot-loader/yarn.lock

@@ -4311,10 +4311,10 @@ react-dom@^16.9.0:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-react-hot-loader@^4.12.11:
-  version "4.12.11"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.11.tgz#06bd618d0a7343c8afa4a31206844f651193bae5"
-  integrity sha512-ySsg1hPwr/5dkZCJVp1nZRbwbpbEQ+3e2+bn/D681Wvr9+o+5bLKkTGq0TXskj8HgCS3ScysXddOng9Cg+JKzw==
+react-hot-loader@^4.12.12:
+  version "4.12.12"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.12.tgz#8b33f59efef8a34f64e01f0d9393230d4b4bc6d4"
+  integrity sha512-Tkd412j5yPKHoTRsJzZb+5UJNFKkPszm7QGKGYvt+jnzTkDS+qK0u3AYPlB0MmBlwzUKVHICqq5KH9Srzda7XA==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
@@ -4325,9 +4325,10 @@ react-hot-loader@^4.12.11:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-imported-component@../../react-imported-component-6.0.0-beta.1.tgz:
-  version "6.0.0-beta.1"
-  resolved "../../react-imported-component-6.0.0-beta.1.tgz#68c7662e275da8cb5d234f214a0398c95e9d1fef"
+react-imported-component@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-imported-component/-/react-imported-component-6.0.1.tgz#b1b88c612e2474a1139be261eaed93e9b4da9780"
+  integrity sha512-+No+Qhu6Z/d8hmj3PneuQZ/4MaO0WQdPdDbLeQlJOE5mvyjyft53el7Lpazvte+3kXX787nnH7SkoDZ0OU+NUQ==
   dependencies:
     crc-32 "^1.2.0"
     detect-node "^2.0.4"

package.json

@@ -64,13 +64,17 @@
     "tslib": "^1.10.0"
   },
   "size-limit": [
+    {
+      "path": ["dist/es2015/index.js", "dist/es2015/boot.js"],
+      "limit": "3.3 KB"
+    },
     {
       "path": "dist/es2015/index.js",
       "limit": "3 KB"
     },
     {
       "path": "dist/es2015/boot.js",
-      "limit": "1.5 KB"
+      "limit": "1.6 KB"
     }
   ],
   "engines": {

src/HOC.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import {ImportedComponent} from './Component';
-import {executeLoadable, getLoadable} from './loadable';
-import {HOC, HOCType, LazyImport, Loadable} from "./types";
+import {getLoadable} from './loadable';
+import {ComponentOptions, DefaultComponentImport, HOCOptions, HOCType, LazyImport} from "./types";
 import {useLoadable} from "./useImported";
-import {useEffect, useRef, useState, useMemo} from "react";
+import {useMemo} from "react";
 import {asDefault} from "./utils";
 import {isBackend} from "./detectBackend";
-import {Simulate} from "react-dom/test-utils";
-import load = Simulate.load;
 
 /**
  *
@@ -18,7 +16,10 @@ import load = Simulate.load;
  * @param {Function} [options.onError] - error handler. Will consume the real error.
  * @param {Function} [options.async] - enable React 16+ suspense.
  */
-const loader: HOC = (loaderFunction, baseOptions = {}) => {
+function loader<P, K = P>(
+  loaderFunction: DefaultComponentImport<P>,
+  baseOptions: Partial<ComponentOptions<P, K>> & HOCOptions = {}
+): HOCType<P, K> {
   const loadable = getLoadable(loaderFunction);
 
   const Imported = React.forwardRef<any, any>(

src/loadable.ts

@@ -109,7 +109,7 @@ function toLoadable<T>(firstImportFunction: Promised<T>, autoImport = true): Loa
       if(this.promise) {
         this.promise = undefined;
 
-        return this.load();
+        return this.load() as any;
       }
       return Promise.resolve();
     },

src/useImported.ts

@@ -14,6 +14,21 @@ function loadLoadable(loadable: Loadable<any>, callback: (l: any) => void) {
     .then(upd, upd);
 }
 
+const WEAK_MAP = new WeakMap<Loadable<any>, any>();
+
+
+function executeLoadableEventually(loadable: Loadable<any>, cb: any) {
+  const tracker = {};
+  WEAK_MAP.set(loadable, tracker);
+
+  // execute loadable after some timeout to let HMR propagate thought
+  setTimeout(() => {
+    if (WEAK_MAP.get(loadable) === tracker) {
+      loadable.reload().then(cb);
+    }
+  }, 16);
+}
+
 interface ImportedShape<T> {
   imported?: T;
   error?: any;
@@ -91,7 +106,7 @@ export function useImported<T, K = T>(importer: DefaultImport<T> | Loadable<T>,
   // kick loading effect
   useEffect(() => {
     if (postEffectRef.current) {
-      executeLoadable(importer).then(update);
+      executeLoadableEventually(loadable, update);
     }
 
     postEffectRef.current = true;