[WIP] LazyComponent

Author: nDriaDev

packages/react-tools/src/components/LazyComponent.tsx

@@ -1,25 +1,39 @@
-import { Suspense, JSX } from "react";
+import { Suspense, JSX, ComponentType, ReactNode } from "react";
 
-const promise: { name: string; promise: Promise<void>; response?:()=>JSX.Element }[] = [];
-const DynamicComponent = ({ name }: { name: string }) => {
+const promise: { factorySerialized: string; promise: Promise<void>; response?: () => JSX.Element, reject?: unknown }[] = [];
+const DynamicComponent = ({ factory, beforeLoad, afterLoad }: { factory: () => Promise<unknown>, beforeLoad?: () => void, afterLoad?: () => void }) => {
+	const fSerialized = factory.toString();
 	for (const prom of promise) {
-		if (prom.name === name) {
-			return prom.response && prom.response();
+		if (prom.factorySerialized === fSerialized) {
+			if (prom.response) {
+				!!afterLoad && afterLoad();
+				return prom.response && prom.response();
+			}
+			if (prom.reject) {
+				throw prom.reject;
+			}
+			throw prom.promise;
 		}
 	}
 
 	const current: typeof promise[number] = {
-		name,
-		promise: import(`../components/hooks/${name}/${name.charAt(0).toUpperCase() + name.substring(1)}.tsx`).then((res) => {
-			current.response = res[name.charAt(0).toUpperCase() + name.substring(1)]
-		}),
+		factorySerialized: fSerialized,
+		promise: (() => {
+			!!beforeLoad && beforeLoad();
+			return factory()
+				.then((res) => {
+					const keys = Object.getOwnPropertyNames(res);
+					current.response = Reflect.get(res as object, keys[0]);
+				})
+				.catch(err => current.reject = err);
+		})(),
 	}
 	promise.push(current);
 	throw current.promise;
 };
 
-const LazyComponent = ({ name }: { name: string }) => {
-	return <Suspense fallback="loading">
-		<DynamicComponent name={name} />
+export const LazyComponent = <T extends ComponentType<unknown>>({ factory, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T | { default: T }>, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void }) => {
+	return <Suspense fallback={fallback}>
+		<DynamicComponent factory={factory} beforeLoad={beforeLoad} afterLoad={afterLoad} />
 	</Suspense>
-}
+}