react-simple-loadable 2.0.0 → 2.0.2

package/loadable.d.ts

@@ -1,12 +1,17 @@
 import { ComponentType } from 'react';
-export type LoadableComponentFunction<P = Record<string, any>> = () => Promise<ComponentType<P>>;
-interface LoadableConfig {
+export type LoadComponentFn<P = Record<string, any>> = () => Promise<ComponentType<P>>;
+export type LoadableMixin = {
+    preload(): void;
+};
+export type LoadableComponent<P = Record<string, any>> = ComponentType<P> & LoadableMixin;
+export interface LoadableConfig {
     loader?: ComponentType<any>;
     /**
      * Component which renders with the lazy component
      */
     extra?: ComponentType<any>;
 }
-export declare function loadable<P = any>(loadFn: LoadableComponentFunction<P>, loaderOrConfig?: null | undefined | LoadableConfig['loader'] | LoadableConfig): ComponentType<P>;
+type LoadableComponent$<P> = LoadableComponent<P>;
+export declare function loadable<P = any>(loadFn: LoadComponentFn<P>, loaderOrConfig?: null | undefined | LoadableConfig['loader'] | LoadableConfig): LoadableComponent$<P>;
 export {};
 //# sourceMappingURL=loadable.d.ts.map

package/loadable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAC5E,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAIF,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5B;AAyID,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,EACpC,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,GAC5E,aAAa,CAAC,CAAC,CAAC,CAsBlB"}
+{"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAClE,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GACvE,aAAa,CAAC;AAIhB,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5B;AAyHD,KAAK,kBAAkB,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAElD,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,EAC1B,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,GAC5E,kBAAkB,CAAC,CAAC,CAAC,CAqBvB"}

package/loadable.js

@@ -6,86 +6,77 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Component } from 'react';
 const DefaultLoader = () => null;
 const loadingStates = new WeakMap();
-const getOrCreateLoadingState = (loadFn) => {
+const getLoadingState = (loadFn, modify) => {
     if (!loadingStates.has(loadFn)) {
         loadingStates.set(loadFn, {
             error: null,
             loading: true,
         });
     }
-    return loadingStates.get(loadFn);
-};
-const updateLoadingState = (loadFn, update) => {
-    const loadingState = getOrCreateLoadingState(loadFn);
-    const updatedState = { ...loadingState, ...update };
+    const loadingState = loadingStates.get(loadFn);
+    if (modify == null) {
+        return loadingState;
+    }
+    const updatedState = { ...loadingState, ...modify };
     loadingStates.set(loadFn, updatedState);
     return updatedState;
 };
 const load = (loadFn) => {
-    const state = getOrCreateLoadingState(loadFn);
+    const state = getLoadingState(loadFn);
     if (state.result) {
         return state;
     }
-    updateLoadingState(loadFn, { loading: true, error: null });
+    getLoadingState(loadFn, { loading: true, error: null });
     state.loading = true;
     state.error = null;
     state.promise = loadFn()
         .then((result) => {
         state.loading = false;
         state.result = result;
-        updateLoadingState(loadFn, state);
+        getLoadingState(loadFn, state);
         return result;
     })
         .catch((error) => {
         state.loading = false;
         state.error = error;
-        updateLoadingState(loadFn, state);
+        getLoadingState(loadFn, state);
         throw error;
     });
-    updateLoadingState(loadFn, state);
+    getLoadingState(loadFn, state);
     return state;
 };
 class LoadableComponentBase extends Component {
     config;
-    constructor(config, initialState, props) {
+    constructor(config, props) {
         super(props);
         this.config = config;
-        this.state = initialState;
+        this.state = getLoadingState(config.loadFn);
     }
     static loadFn = undefined;
     static preload() {
         load(this.loadFn);
     }
     UNSAFE_componentWillMount() {
-        this.loadModule();
-    }
-    loadModule() {
         if (!this.state.loading) {
             return;
         }
         const { promise } = load(this.config.loadFn);
-        this.syncLoadingState();
+        this.setState(getLoadingState(this.config.loadFn));
         promise
             .then(() => {
-            this.syncLoadingState();
+            this.setState(getLoadingState(this.config.loadFn));
             return null;
         })
             .catch(() => {
-            this.syncLoadingState();
+            this.setState(getLoadingState(this.config.loadFn));
             return null;
         });
     }
-    syncLoadingState() {
-        this.setState(getOrCreateLoadingState(this.config.loadFn));
-    }
-    updateLoadingState(update) {
-        this.setState(updateLoadingState(this.config.loadFn, update));
-    }
     render() {
         const { loader } = this.config;
         const Loader = loader || DefaultLoader;
         if (this.state.loading || this.state.error) {
-            return _jsx(Loader, {});
+            return _jsx(Loader, { ...this.props });
         }
         else if (this.state.result) {
             const Component = this.state.result;
@@ -97,7 +88,6 @@ class LoadableComponentBase extends Component {
         }
     }
 }
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export function loadable(loadFn, loaderOrConfig) {
     const config = typeof loaderOrConfig === 'object'
         ? loaderOrConfig
@@ -108,7 +98,7 @@ export function loadable(loadFn, loaderOrConfig) {
             super({
                 loadFn,
                 ...config,
-            }, getOrCreateLoadingState(loadFn), props);
+            }, props);
         }
     }
     return LoadableComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-loadable",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Really simple React Loadable component",
   "repository": {
     "type": "git",