Merge pull request #43 from g4rcez/await-component

await component

Author: OrionFable

playground/src/main.tsx

@@ -5,7 +5,7 @@ import { Brouther, Scroll } from "../../src";
 import { router } from "./routes";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
         <React.Suspense fallback={<div>Loading...</div>}>
             <Brouther ErrorElement={<p>Error</p>} config={router.config}>

playground/src/pages/root.tsx

@@ -1,4 +1,15 @@
-import { ActionProps, createFormPath, Form, useScroll, jsonResponse, LoaderProps, redirectResponse, useDataLoader, useLoadingState } from "../../../src";
+import {
+    ActionProps,
+    Await,
+    createFormPath,
+    Form,
+    jsonResponse,
+    LoaderProps,
+    redirectResponse,
+    useDataLoader,
+    useLoadingState,
+    useScroll,
+} from "../../../src";
 import { useEffect, useState } from "react";
 import { Input } from "../components/input";
 
@@ -23,6 +34,8 @@ type State = { person: { name: string; surname: string; birthday: Date } };
 
 const path = createFormPath<State>();
 
+const createPromise = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
 export default function Root() {
     const data = useDataLoader<typeof loader>();
     const qs = data?.qs;
@@ -51,10 +64,11 @@ export default function Root() {
         <section className="flex flex-col gap-12">
             <h2 className="font-bold text-3xl">Form post action - json</h2>
             <h2 className="font-medium text-xl">
-                <a href="#main">
-                    {show ? "SHOW" : "CLOSE"}
-                </a>
+                <a href="#main">{show ? "SHOW" : "CLOSE"}</a>
             </h2>
+            <Await loadingElement={<p>Loading...</p>} promise={createPromise(2000)}>
+                {() => <p>Cool</p>}
+            </Await>
             <button
                 className="duration-300 transition-colors ease-in-out bg-red-500 text-white font-semibold text-lg rounded-lg w-fit px-4 py-1 link:bg-red-600"
                 onClick={() => setError(new Error("BOOM"))}
@@ -198,7 +212,9 @@ export default function Root() {
                     subtilitatis, obscuris et malesuada fames.Paullum deliquit, ponderibus modulisque suis ratio utitur.Ullamco laboris nisi ut
                     aliquid ex ea commodi consequat.Cras mattis iudicium purus sit amet fermentum. ut aliquid ex ea commodi consequat.Cras mattis
                     iudicium purus sit amet fermentum.
-                    <span id="main" className="font-bold text-blue-800">iudicium purus sit amet fermentum.</span>
+                    <span id="main" className="font-bold text-blue-800">
+                        iudicium purus sit amet fermentum.
+                    </span>
                 </p>
             ) : null}
             <h2 className="text-3xl mt-96">

playground/src/pages/user.tsx

@@ -1,4 +1,4 @@
-import { InferLoader, jsonResponse, LoaderProps, useDataLoader } from "../../../src";
+import { jsonResponse, LoaderProps, useDataLoader } from "../../../src";
 import Data from "../data/users.json";
 
 export const loader = async (args: LoaderProps<"/user/<id:string>?sort=string">) => {
@@ -7,7 +7,7 @@ export const loader = async (args: LoaderProps<"/user/<id:string>?sort=string">)
 };
 
 export default function UserPage() {
-    const data = useDataLoader<InferLoader<typeof loader>>();
+    const data = useDataLoader<typeof loader>();
     return (
         <div>
             <h1>Hero: {data?.hero?.name}</h1>

playground/src/routes.tsx

@@ -9,6 +9,7 @@ type IndexRoute = Paths["index"];
 
 const ErrorElement = () => {
     const [error] = useRouteError();
+    console.error(error)
     return (
         <p>
             Fail...Error Boom <Link href={"/blog"}>Go to Blog</Link>
@@ -29,4 +30,4 @@ export const router = createMappedRouter({
         loader: asyncLoader(() => import("./pages/user")),
         element: asyncComponent(() => import("./pages/user")),
     }),
-} as const);
+});

src/brouther/await.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+
+type AwaitProps<T extends Promise<any>> = {
+    promise: T;
+    loadingElement?: React.ReactElement;
+    errorElement?: (error: any) => React.ReactElement;
+    children: (resolved: Awaited<T>) => React.ReactElement;
+};
+
+type PromiseResolved<T extends Promise<any>> = { resolved: Awaited<T> | undefined; error: boolean };
+
+const resolvePromise = async <T extends Promise<any>>(
+    promise: T
+): Promise<
+    | {
+          resolved: Awaited<T>;
+          error: false;
+      }
+    | {
+          error: true;
+          resolved: undefined;
+      }
+> => {
+    try {
+        const resolved = await promise;
+        return { resolved, error: false };
+    } catch (e) {
+        return { resolved: undefined, error: true };
+    }
+};
+
+const InnerAwait = <T extends Promise<any>>(props: AwaitProps<T>) => {
+    const [data, setData] = useState<PromiseResolved<T> | undefined>(undefined);
+
+    useEffect(() => void resolvePromise(props.promise).then(setData), [props.promise]);
+
+    if (data === undefined) return props.loadingElement;
+    if (!data.error) return props.children(data.resolved!);
+    if (data.error && props.errorElement) return props.errorElement(data!.error);
+    return props.loadingElement;
+};
+
+export const Await = <T extends Promise<any>>(props: AwaitProps<T>) => (
+    <React.Suspense fallback={props.loadingElement}>
+        <InnerAwait errorElement={props.errorElement} promise={props.promise} loadingElement={props.loadingElement} children={props.children} />
+    </React.Suspense>
+);

src/index.ts

@@ -49,3 +49,4 @@ export { urlSearchParamsToJson, jsonToURLSearchParams, formToJson } from "./form
 export { createFormPath } from "./form/form-path";
 export { redirectResponse, jsonResponse, type InferLoader, type CustomResponse } from "./brouther/brouther-response";
 export { waitFor, Scroll, useScroll } from "./brouther/scroll";
+export { Await } from "./brouther/await";