@chidchanun/bcp 0.1.9 → 0.1.10

package/packages/client/src/index.tsx

@@ -18,6 +18,7 @@ export {
 } from "./navigation-state.js";
 
 export {
+    useGuardData,
     useLoaderData,
 } from "./loader-data.js";
 

package/packages/client/src/loader-data.tsx

@@ -7,32 +7,76 @@ import {
 
 const LOADER_DATA_PARAM =
     "__bcp_loader_data";
+const GUARD_DATA_PARAM =
+    "__bcp_guard_data";
+const SERVER_DATA_MARKER =
+    "__bcp_server_data";
 const MISSING_LOADER_DATA =
     Symbol(
         "bcp-loader-data"
     );
+const MISSING_GUARD_DATA =
+    Symbol(
+        "bcp-guard-data"
+    );
 
 const LoaderDataContext =
     createContext<unknown>(
         MISSING_LOADER_DATA
     );
+const GuardDataContext =
+    createContext<unknown>(
+        MISSING_GUARD_DATA
+    );
 
 export interface BcpLoaderDataProviderProps {
     data: unknown;
     children?: ReactNode;
 }
 
+interface ServerDataEnvelope {
+    __bcp_server_data: true;
+    hasPageLoader: boolean;
+    hasGuard: boolean;
+    loaderData: unknown;
+    guardData: unknown;
+}
+
 export function BcpLoaderDataProvider({
     data,
     children,
 }: BcpLoaderDataProviderProps) {
+    const envelope =
+        isServerDataEnvelope(
+            data
+        )
+            ? data
+            : null;
+    const loaderValue =
+        envelope
+            ? envelope.hasPageLoader
+                ? envelope.loaderData
+                : MISSING_LOADER_DATA
+            : data;
+    const guardValue =
+        envelope?.hasGuard
+            ? envelope.guardData
+            : MISSING_GUARD_DATA;
+
     return createElement(
-        LoaderDataContext.Provider,
+        GuardDataContext.Provider,
         {
             value:
-                data,
+                guardValue,
         },
-        children
+        createElement(
+            LoaderDataContext.Provider,
+            {
+                value:
+                    loaderValue,
+            },
+            children
+        )
     );
 }
 
@@ -51,49 +95,135 @@ export function useLoaderData<
         return contextValue as T;
     }
 
+    const browserValue =
+        readFrameworkParam(
+            LOADER_DATA_PARAM
+        );
+
+    if (browserValue.found) {
+        return browserValue.value as T;
+    }
+
+    throw new Error(
+        "BCP Framework: useLoaderData() was used on a route without loader data. Add loader.ts next to page.tsx."
+    );
+}
+
+export function useGuardData<
+    T = unknown
+>(): T {
+    const contextValue =
+        useContext(
+            GuardDataContext
+        );
+
     if (
-        typeof document !==
+        contextValue !==
+        MISSING_GUARD_DATA
+    ) {
+        return contextValue as T;
+    }
+
+    const browserValue =
+        readFrameworkParam(
+            GUARD_DATA_PARAM
+        );
+
+    if (browserValue.found) {
+        return browserValue.value as T;
+    }
+
+    throw new Error(
+        "BCP Framework: useGuardData() was used on a route without guard data. Add guard.ts to the route or an ancestor route directory."
+    );
+}
+
+function readFrameworkParam(
+    key: string
+): {
+    found: boolean;
+    value: unknown;
+} {
+    if (
+        typeof document ===
         "undefined"
     ) {
-        const element =
-            document.getElementById(
-                "__BCP_DATA__"
-            );
-
-        if (element) {
-            try {
-                const frameworkData =
-                    JSON.parse(
-                        element.textContent ||
-                        "{}"
-                    ) as {
-                        params?: Record<
-                            string,
-                            unknown
-                        >;
-                    };
-                const params =
-                    frameworkData.params;
-
-                if (
-                    params &&
-                    Object.prototype
-                        .hasOwnProperty.call(
-                            params,
-                            LOADER_DATA_PARAM
-                        )
-                ) {
-                    return params[
-                        LOADER_DATA_PARAM
-                    ] as T;
-                }
-            } catch {
-                // Fall through to the framework error below.
-            }
+        return {
+            found:
+                false,
+            value:
+                undefined,
+        };
+    }
+
+    const element =
+        document.getElementById(
+            "__BCP_DATA__"
+        );
+
+    if (!element) {
+        return {
+            found:
+                false,
+            value:
+                undefined,
+        };
+    }
+
+    try {
+        const frameworkData =
+            JSON.parse(
+                element.textContent ||
+                "{}"
+            ) as {
+                params?: Record<
+                    string,
+                    unknown
+                >;
+            };
+        const params =
+            frameworkData.params;
+
+        if (
+            params &&
+            Object.prototype
+                .hasOwnProperty.call(
+                    params,
+                    key
+                )
+        ) {
+            return {
+                found:
+                    true,
+                value:
+                    params[
+                        key
+                    ],
+            };
         }
+    } catch {
+        // Fall through to the missing-data result.
     }
 
-    throw new Error(
-        "BCP Framework: useLoaderData() was used on a route without loader data. Add loader.ts next to page.tsx."
+    return {
+        found:
+            false,
+        value:
+            undefined,
+    };
+}
+
+function isServerDataEnvelope(
+    value: unknown
+): value is ServerDataEnvelope {
+    return (
+        value !== null &&
+        typeof value ===
+            "object" &&
+        (
+            value as
+            Record<string, unknown>
+        )[SERVER_DATA_MARKER] ===
+            true
     );
 }