[IMPL] Lazy Component

Author: nDriaDev

apps/react-tools-demo/src/markdown/Lazy.md

@@ -1,10 +1,26 @@
 # Lazy
 Component Wrapper to lazy loading a Component. [See demo](https://nDriaDev.io/react-tools/#/components/Lazy)
 
+## Usage
+
+```tsx
+export default function LC() {
+	return (
+		<Lazy
+			factory={() => import('./LazyComponent').then(res => new Promise<{ [k: string]: ComponentType<unknown> }>(resolve => setTimeout(()=>resolve(res), 5000)))}
+			fallback={<p>Loading component...</p>}
+		/>
+	);
+}
+```
+
+> The component uses _Lazy_ component to lazy load a component imported dynamically by _factory_ prop. The component loading is delayed by 5 seconds. During this time, _fallback_ prop is shown that renders a p element with the text __Loading component...__.
+
+
 ## API
 
 ```tsx
-Lazy<T extends ComponentType<unknown>>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<{ [K:string]: T }>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
+Lazy<T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
 ```
 
 > ### Params

apps/react-tools-demo/src/pages/components/lazy/Lazy.md

@@ -0,0 +1,16 @@
+import { Lazy } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _Lazy_ component to lazy load a component imported dynamically by _factory_ prop. The component loading is delayed by 5 seconds. During this time, _fallback_ prop is shown that renders a p element with the text __Loading component...__.
+ */
+export default function LC() {
+	return (
+		<Lazy
+			factory={() => import('./LazyComponent').then(async res => {
+				await new Promise(resolve => setTimeout(resolve, 5000));
+				return res;
+			})}
+			fallback={<p>Loading component...</p>}
+		/>
+	);
+}

apps/react-tools-demo/src/pages/components/lazy/Lazy.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export const LazyComponent = () => {
+	const [timer, setTimer] = useState(new Date().toLocaleTimeString());
+
+	useEffect(() => {
+		const id = setInterval(() => setTimer(new Date().toLocaleTimeString()), 1000);
+		return () => clearInterval(id);
+	}, []);
+	return (<>
+		<h3>Lazy Component</h3>
+		<p>Clock: {timer}</p>
+		<p>This component has been loaded lazy.</p>
+	</>);
+}

apps/react-tools-demo/src/pages/components/lazy/LazyComponent.tsx

@@ -6,7 +6,7 @@ export default function Home() {
 		<div className='home-container'>
 			<img src={Logo} alt="react" className="logo"/>
 			<h1 className='title'>React Tools</h1>
-			<h2>A collection of hooks and utilities for React</h2>
+			<h2>A collection of hooks, components and utilities for React</h2>
 			<div className='npm-container'>
 				<span
 					className='npm-copy'
@@ -32,7 +32,7 @@ export default function Home() {
 				</div>
 				<div className='cell'>
 					<div className='title'>Demos</div>
-					<div className='body'>All hooks have a demo that allow you to try them.</div>
+					<div className='body'>All implementations have a demo that allow you to try them.</div>
 				</div>
 			</div>
 		</div>

apps/react-tools-demo/src/pages/home/Home.tsx

@@ -132,6 +132,7 @@ import useVisibleMD from "../markdown/useVisible.md?raw"
 import useWebSocketMD from "../markdown/useWebSocket.md?raw"
 import useWebWorkerMD from "../markdown/useWebWorker.md?raw"
 import useWebWorkerFnMD from "../markdown/useWebWorkerFn.md?raw"
+const Lazy = lazy((() => import('../pages/components/lazy/Lazy').then(module => ({default: "default" in module ? module["default"] : module["Lazy"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 const Show = lazy((() => import('../pages/components/show/Show').then(module => ({default: "default" in module ? module["default"] : module["Show"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
 import HomeWrapper from '../pages/home/HomeWrapper'
 const UseActiveElement = lazy((() => import('../pages/hooks/api-dom/useActiveElement/UseActiveElement').then(module => ({default: "default" in module ? module["default"] : module["UseActiveElement"]}))) as unknown as () => Promise<{ default: ComponentType; }>)
@@ -982,7 +983,7 @@ function Router() {
 					{
 						path: "Lazy",
 						element: <Suspense fallback={<Spinner/>}>
-							<ComponentLayout markdown={LazyMD} />
+							<ComponentLayout markdown={LazyMD} component={<Lazy/>}/>
 						</Suspense>
 					},
 					{
@@ -1090,7 +1091,7 @@ function Router() {
 					{
 						path: "lazy",
 						element: <Suspense fallback={<Spinner/>}>
-							<ComponentLayout markdown={lazyMD} />
+							<ComponentLayout markdown={lazyMD} component={<Lazy/>}/>
 						</Suspense>
 					},
 					{

apps/react-tools-demo/src/router/Router.tsx

@@ -1,40 +1,40 @@
 import { Suspense, JSX, ComponentType, ReactNode } from "react";
 
-const promise: { factorySerialized: string; promise: Promise<void>; response?: () => JSX.Element, reject?: unknown }[] = [];
+const promise: { factorySerialized: string; promise: Promise<void>; response?: ComponentType<unknown>, error?: unknown }[] = [];
 const DynamicComponent = ({ factory, componentName, beforeLoad, afterLoad }: { factory: () => Promise<{[k:string]:unknown}>, componentName?:string, beforeLoad?: () => void, afterLoad?: () => void }) => {
 	const fSerialized = factory.toString();
 	for (const prom of promise) {
 		if (prom.factorySerialized === fSerialized) {
 			if (prom.response) {
 				!!afterLoad && afterLoad();
-				return prom.response && prom.response();
+				return prom.response && (prom as unknown as {response: () => JSX.Element}).response();
 			}
-			if (prom.reject) {
-				throw prom.reject;
+			if (prom.error) {
+				throw prom.error;
 			}
 			throw prom.promise;
 		}
 	}
 
 	const current: typeof promise[number] = {
-		factorySerialized: fSerialized,
+		factorySerialized: String.raw`${fSerialized}`,
 		promise: (() => {
 			!!beforeLoad && beforeLoad();
 			return factory()
 				.then((res) => {
 					if ("default" in res) {
-						return { default: res.default };
+						current.response = res.default as ComponentType<unknown>;
 					}
 					if (!!componentName && componentName in res) {
-						return { default: res[componentName] };
+						current.response = res[componentName] as ComponentType<unknown>;
 					}
 					const keys = Reflect.ownKeys(res).filter(el => el !== "__esModule");
 					if (keys.length > 0) {
-						return { default: res[keys[0] as keyof typeof res] };
+						current.response = res[keys[0] as keyof typeof res] as ComponentType<unknown>;
 					}
 					throw Error("Invalid import");
 				})
-				.catch(err => current.reject = err);
+				.catch(err => current.error = err);
 		})(),
 	}
 	promise.push(current);
@@ -43,15 +43,15 @@ const DynamicComponent = ({ factory, componentName, beforeLoad, afterLoad }: { f
 
 /**
  * **`Lazy`**: Component Wrapper to lazy loading a Component. [See demo](https://nDriaDev.io/react-tools/#/components/Lazy)
- * @param {Object} param - properties to load component. 
+ * @param {Object} param - properties to load component.
  * @param {() => Promise<{ [k:string]: T }>} param.factory - function that returns a Promise or another thenable.
  * @param {string} [param.componentName] - name of the of the module to load lazy. If it is missing, and the _load_ execution result not have a default property, the first key in res is returned as result.
  * @param {ReactNode} [object.fallback] - optional element to render when _when_ prop is false.
- * @param {()=>void} [param.beforeLoad] - function that will be executed before loading component . 
- * @param {()=>void} [param.afterLoad] - function that will be executed after loading component . 
+ * @param {()=>void} [param.beforeLoad] - function that will be executed before loading component .
+ * @param {()=>void} [param.afterLoad] - function that will be executed after loading component .
  * @returns {JSX.Element} element
  */
-export const Lazy = <T extends ComponentType<unknown>>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<{ [K:string]: T }>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void }) => {
+export const Lazy = <T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void }) => {
 	return <Suspense fallback={fallback}>
 		<DynamicComponent factory={factory} componentName={componentName} beforeLoad={beforeLoad} afterLoad={afterLoad} />
 	</Suspense>

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

@@ -18,7 +18,7 @@ export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<
 	})
 	for (const cached of promiseCache) {
 		index.current = index.current+1;
-		if (isDeepEqual([...deps, promise.toString()], cached.deps)) {
+		if (isDeepEqual([...deps, String.raw`${promise.toString()}`], cached.deps)) {
 			if ("error" in cached) {
 				throw cached.error;
 			}
@@ -29,7 +29,7 @@ export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<
 		}
 	}
 	const cached: { deps: DependencyList, promise: Promise<void>, error?: unknown, response?: Awaited<ReturnType<T>> } = {
-		deps:[...deps, promise.toString()],
+		deps:[...deps, String.raw`${promise.toString()}`],
 		promise: promise()
 			.then(response => {
 				cached.response = response as Awaited<ReturnType<T>>;