[WIP] LazyComponent

Author: nDriaDev

apps/react-tools-demo/src/assets/bubbles.mp3:Zone.Identifier

@@ -11,29 +11,29 @@ export const UseStateValidator = () => {
 		},
 		(state, validation) => {
 			if (state.name.length > 10) {
-				validation.name.result = false;
+				validation.name.invalid = true;
 				validation.name.message = "Max Length 10 characters"
 			}
 			if (!state.email.includes("@")) {
-				validation.email.result = false;
+				validation.email.invalid = true;
 				validation.email.message = "@ is missing"
 			}
 			return validation;
 		}
 	);
 
 	return <div>
-		<div>
+		<div style={{display: "flex", flexDirection: "column", width: 'fit-content', margin: "0 auto"}}>
 			<input type="text" name="name" value={state.name} onChange={e => setState(s => ({...s, [e.target.name]: e.target.value}))} />
 			{
-				validation.name.result &&
+				validation.name.invalid &&
 				<span style={{ color: "red" }}>{validation.name.message}</span>
 			}
 		</div>
-		<div>
+		<div style={{display: "flex", flexDirection: "column", width: 'fit-content', margin: "0 auto"}}>
 			<input type="text" name="email" value={state.email} onChange={e => setState(s => ({...s, [e.target.name]: e.target.value}))} />
 			{
-				validation.email.result &&
+				validation.email.invalid &&
 				<span style={{ color: "red" }}>{validation.email.message}</span>
 			}
 		</div>
@@ -47,7 +47,7 @@ export const UseStateValidator = () => {
 ## API
 
 ```tsx
-useStateValidator<T>(initialState: T | (() => T), validator: StateValidator<T>): [T, Dispatch<SetStateAction<T>>, T extends Record<string, unknown> ? {[k in keyof T]:{result: boolean, message?: string}} : {result: boolean, message?: string}]
+useStateValidator<T>(initialState: T | (() => T), validator: StateValidator<T>): [T, Dispatch<SetStateAction<T>>, T extends Record<string, unknown> ? {[k in keyof T]:{invalid: boolean, message?: string}} : {invalid: boolean, message?: string}]
 ```
 
 > ### Params
@@ -60,10 +60,10 @@ function that will be executed to validate state.
 
 > ### Returns
 >
-> __} result__:  __Array__:  
+> __} invalid__:  __Array__:  
     - _T_  
     - _Dispatch<SetStateAction<T>>_  
-    - _T extends Record<string, unknown> ? {[k in keyof T]:{result: boolean, message?: string}} : {result: boolean, message?: strin_  
+    - _T extends Record<string, unknown> ? {[k in keyof T]:{invalid: boolean, message?: string}} : {invalid: boolean, message?: strin_  
 > Array with:
 > - first element: __state__ value.
 > - second element: __setState__ function to update state.

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

@@ -155,7 +155,8 @@
 	- [ ] Index: Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value.
 	- [ ] RestrictedRoute (maybe)
 	- [ ] ErrorBoundary (?? error event listener)
-	- [ ] Suspense: Suspence compontent react-like for async component
+	- [ ] LazyComponent: Async component loading by path and fallback for suspense
+	- [ ] Suspense: Suspence compontent react-like for async component (or polyfill)
 	- [ ] Dynamic: This component lets you insert an arbitrary Component or tag and passes the props through to it.
 	- [ ] ImageOpt (???)
 

packages/react-tools/README.md

@@ -0,0 +1,25 @@
+import { Suspense, JSX } from "react";
+
+const promise: { name: string; promise: Promise<void>; response?:()=>JSX.Element }[] = [];
+const DynamicComponent = ({ name }: { name: string }) => {
+	for (const prom of promise) {
+		if (prom.name === name) {
+			return prom.response && prom.response();
+		}
+	}
+
+	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)]
+		}),
+	}
+	promise.push(current);
+	throw current.promise;
+};
+
+const LazyComponent = ({ name }: { name: string }) => {
+	return <Suspense fallback="loading">
+		<DynamicComponent name={name} />
+	</Suspense>
+}