add safety nets

Author: theKashey

src/babel.ts

@@ -2,7 +2,9 @@ import {resolve, relative, dirname} from 'path';
 // @ts-ignore
 import * as crc32 from "crc-32";
 
-export const encipherImport = (str: string) => crc32.str(str).toString(32);
+export const encipherImport = (str: string) => {
+  return crc32.str(str).toString(32);
+};
 
 // Babel v7 compat
 let syntax: any;

src/loadable.ts

@@ -63,7 +63,7 @@ function toLoadable<T>(firstImportFunction: Promised<T>, autoImport = true): Loa
     },
 
     replaceImportFunction(newImportFunction) {
-      importFunction=newImportFunction;
+      importFunction = newImportFunction;
     },
 
     then(cb, err) {
@@ -102,8 +102,12 @@ function toLoadable<T>(firstImportFunction: Promised<T>, autoImport = true): Loa
     },
 
     reload() {
-      this.promise = undefined;
-      return this.load();
+      if(this.promise) {
+        this.promise = undefined;
+
+        return this.load();
+      }
+      return Promise.resolve();
     },
 
     load() {
@@ -171,7 +175,12 @@ export const dryRender = (renderFunction: () => void) => {
 };
 
 export const assignImportedComponents = (set: Array<Promised<any>>) => {
-  set.forEach(imported => toLoadable(imported))
+  const countBefore = LOADABLE_SIGNATURE.size;
+  set.forEach(imported => toLoadable(imported));
+  if (countBefore === LOADABLE_SIGNATURE.size) {
+    console.error('react-imported-component: no import-marks found, please check babel plugin')
+  }
+  done();
 };
 
 export function executeLoadable(importFunction: DefaultImport<any> | Loadable<any>) {

src/marks.ts

@@ -58,13 +58,22 @@ export const rehydrateMarks = (marks?: string[]) => {
   const rehydratedMarks: string[] = marks || (global as any).___REACT_DEFERRED_COMPONENT_MARKS || [];
   const tasks: Promise<any>[] = [];
 
+  const usedMarks = new Set<string>();
+
   LOADABLE_MARKS
     .forEach(({mark, loadable}) => {
       if (allIn(mark, rehydratedMarks)) {
+        mark.forEach(m => usedMarks.add(m));
         tasks.push(loadable.load())
       }
     });
 
+  rehydratedMarks.forEach(m => {
+    if (!usedMarks.has(m)) {
+      throw new Error(`react-imported-component: unknown mark(${m}) has been used. Client and Server should have the same babel configuration.`);
+    }
+  });
+
   return Promise.all(tasks);
 };
 

src/types.ts

@@ -50,7 +50,7 @@ export interface Loadable<T> {
   tryResolveSync<Y = T>(then: (x: T) => Y): Promise<Y>;
 
   load(): Promise<T>;
-  reload(): Promise<T>;
+  reload(): Promise<void>;
 
   then(callback: (x: T) => void, err: () => void): Promise<any>;
 }

src/useImported.ts

@@ -24,23 +24,34 @@ interface ImportedShape<T> {
   retry(): void;
 }
 
-export function useLoadable<T>(loadable: Loadable<T>) {
-  if(isBackend && !isItReady()) {
-    console.error('react-imported-component: trying to render not ready component. Have you `await whenComponentsReady()`?')
-  }
+interface HookOptions {
+  import?: boolean;
+  track?: boolean;
+}
 
+export function useLoadable<T>(loadable: Loadable<T>, options: HookOptions = {}) {
   const UID = useContext(streamContext);
   const [, forceUpdate] = useState(() => {
     // use mark
-    useMark(UID, loadable.mark);
-    loadable.loadIfNeeded();
+    if (options.import !== false) {
+      if (options.track !== false) {
+        useMark(UID, loadable.mark);
+      }
+      loadable.loadIfNeeded();
+    }
 
     return {};
   });
 
   useEffect(() => {
-    loadLoadable(loadable, forceUpdate);
-  }, [loadable]);
+    if (options.import !== false) {
+      loadLoadable(loadable, forceUpdate);
+    }
+  }, [loadable, options.import]);
+
+  if (isBackend && !isItReady() && loadable.isLoading()) {
+    console.error('react-imported-component: trying to render not ready component. Have you `await whenComponentsReady()`?')
+  }
 
   // use mark
   // retry
@@ -54,8 +65,8 @@ export function useLoadable<T>(loadable: Loadable<T>) {
   }, [loadable]);
 
   if (process.env.NODE_ENV !== 'production') {
-    if(isBackend) {
-      if(!loadable.done) {
+    if (isBackend) {
+      if (!loadable.done) {
         console.error('react-imported-component: using not resolved loadable. You should `await whenComponentsReady()`.')
       }
     }
@@ -68,14 +79,14 @@ export function useLoadable<T>(loadable: Loadable<T>) {
   };
 }
 
-export function useImported<T, K = T>(importer: DefaultImport<T> | Loadable<T>, exportPicker: (x: T) => K = es6import): ImportedShape<K> {
+export function useImported<T, K = T>(importer: DefaultImport<T> | Loadable<T>, exportPicker: (x: T) => K = es6import, options: HookOptions = {}): ImportedShape<K> {
   const [topLoadable] = useState(getLoadable(importer));
   const postEffectRef = useRef(false);
   const {
     loadable,
     retry,
     update,
-  } = useLoadable<T>(topLoadable);
+  } = useLoadable<T>(topLoadable, options);
 
   // kick loading effect
   useEffect(() => {