react-simple-loadable 1.0.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # React Simple Loadable HOC
 
-This is simple ErrorBoundary component    
+This is simple loadable component based on Class React Component  
 
 ## Usage  
 
@@ -12,4 +12,15 @@ loadable(async () => {
 }, 
   SkeletonComponent
 )
+```
+
+```tsx
+import { loadable } from "react-simple-loadable";
+
+loadable(async () => {
+  return (await import('./your-component')).YourNamedComponent
+},{
+  loader: SkeletonComponent,
+  extra: () => <div>renders with the lazy component</div>
+})
 ```

package/loadable.d.ts

@@ -1,5 +1,12 @@
 import { ComponentType } from 'react';
-import { Maybe } from 'yammies/utils/types';
 export type LoadableComponentFunction<P = Record<string, any>> = () => Promise<ComponentType<P>>;
-export declare function loadable<P = any>(loadFunction: LoadableComponentFunction<P>, Fallback?: Maybe<ComponentType>, ExtraComponent?: ComponentType<any>): ComponentType<P>;
+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>;
+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":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAC5E,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAKF,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,YAAY,EAAE,yBAAyB,CAAC,CAAC,CAAC,EAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,EAE/B,cAAc,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,GAClC,aAAa,CAAC,CAAC,CAAC,CAclB"}
+{"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"}

package/loadable.js

@@ -1,13 +1,115 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, Suspense } from 'react';
-const DefaultFallback = () => null;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable sonarjs/sonar-no-unused-class-component-methods */
+/* eslint-disable sonarjs/no-unsafe */
+/* eslint-disable sonarjs/public-static-readonly */
+/* eslint-disable @typescript-eslint/ban-types */
+import { Component } from 'react';
+const DefaultLoader = () => null;
+const loadingStates = new WeakMap();
+const getOrCreateLoadingState = (loadFn) => {
+    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 };
+    loadingStates.set(loadFn, updatedState);
+    return updatedState;
+};
+const load = (loadFn) => {
+    const state = getOrCreateLoadingState(loadFn);
+    if (state.result) {
+        return state;
+    }
+    updateLoadingState(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);
+        return result;
+    })
+        .catch((error) => {
+        state.loading = false;
+        state.error = error;
+        updateLoadingState(loadFn, state);
+        throw error;
+    });
+    updateLoadingState(loadFn, state);
+    return state;
+};
+class LoadableComponentBase extends Component {
+    config;
+    constructor(config, initialState, props) {
+        super(props);
+        this.config = config;
+        this.state = initialState;
+    }
+    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();
+        promise
+            .then(() => {
+            this.syncLoadingState();
+            return null;
+        })
+            .catch(() => {
+            this.syncLoadingState();
+            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, {});
+        }
+        else if (this.state.result) {
+            const Component = this.state.result;
+            const Extra = this.config.extra;
+            return (_jsxs(_Fragment, { children: [_jsx(Component, { ...this.props }), Extra && _jsx(Extra, {})] }));
+        }
+        else {
+            return null;
+        }
+    }
+}
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export function loadable(loadFunction, Fallback, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-ExtraComponent) {
-    const LazyComponent = lazy(async () => ({
-        default: await loadFunction(),
-    }));
-    const UsageFallback = Fallback ?? DefaultFallback;
-    return (props) => (_jsxs(Suspense, { fallback: _jsx(UsageFallback, { ...props }), children: [_jsx(LazyComponent, { ...props }), ExtraComponent && _jsx(ExtraComponent, {})] }));
+export function loadable(loadFn, loaderOrConfig) {
+    const config = typeof loaderOrConfig === 'object'
+        ? loaderOrConfig
+        : { loader: loaderOrConfig };
+    class LoadableComponent extends LoadableComponentBase {
+        loadFn = loadFn;
+        constructor(props) {
+            super({
+                loadFn,
+                ...config,
+            }, getOrCreateLoadingState(loadFn), props);
+        }
+    }
+    return LoadableComponent;
 }

package/package.json

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