@rangojs/router 0.0.0-experimental.7 → 0.0.0-experimental.71

package/src/use-loader.tsx

@@ -1,9 +1,71 @@
 "use client";
 
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import {
+  isValidElement,
+  startTransition,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { OutletContext, type OutletContextValue } from "./outlet-context.js";
 import type { LoaderDefinition, LoadOptions } from "./types.js";
 
+/**
+ * Extract a specific loader's data from a content ReactNode.
+ *
+ * When a route registers loaders via loader(), the resolved data lives in
+ * the route's OutletProvider (rendered as <Outlet /> content). Parallel
+ * slots are siblings of <Outlet />, so they can't find it by walking
+ * the parent context chain. This helper traverses wrapper elements
+ * (MountContextProvider, ViewTransition, etc.) to reach the OutletProvider
+ * and extract the loader data directly.
+ */
+const NOT_FOUND = Symbol("not-found");
+
+function extractContentLoaderData(
+  node: ReactNode,
+  loaderId: string,
+): unknown | typeof NOT_FOUND {
+  if (!isValidElement(node)) return NOT_FOUND;
+  const props = node.props as Record<string, any> | undefined;
+  if (!props) return NOT_FOUND;
+
+  // Direct OutletProvider with loaderData
+  if (props.loaderData && loaderId in props.loaderData) {
+    return props.loaderData[loaderId];
+  }
+
+  // LoaderBoundary: loaderIds + loaderDataPromise (already resolved array).
+  // When the segment has loading(), loaderData is resolved inside
+  // LoaderBoundary via use(). If the promise was pre-awaited (forceAwait
+  // or isAction), the prop is a raw array we can index into.
+  if (
+    props.loaderIds &&
+    Array.isArray(props.loaderIds) &&
+    props.loaderDataPromise &&
+    !(props.loaderDataPromise instanceof Promise)
+  ) {
+    const idx = (props.loaderIds as string[]).indexOf(loaderId);
+    if (idx !== -1) {
+      const data = (props.loaderDataPromise as any[])[idx];
+      // loaderDataPromise entries may be { ok, data } result objects
+      if (data && typeof data === "object" && "ok" in data) {
+        return data.ok ? data.data : NOT_FOUND;
+      }
+      return data;
+    }
+  }
+
+  // Traverse into wrapper elements (MountContextProvider, ViewTransition,
+  // Suspense wrappers, etc.)
+  if (props.children) return extractContentLoaderData(props.children, loaderId);
+  return NOT_FOUND;
+}
+
 /**
  * Payload returned by loader RSC requests
  */
@@ -13,12 +75,9 @@ interface LoaderRscPayload<T = unknown> {
 }
 
 /**
- * Load function type with form action support
+ * Load function type for fetching loader data from the client
  */
-export type LoadFunction<T> = ((options?: LoadOptions) => Promise<T>) & {
-  /** Form action for progressive enhancement - can be passed to form action prop */
-  action: (formData: FormData) => Promise<void>;
-};
+export type LoadFunction<T> = (options?: LoadOptions) => Promise<T>;
 
 /**
  * Result type for useLoader hook (strict - data is required)
@@ -69,28 +128,37 @@ export interface UseLoaderOptions {
  */
 function useLoaderInternal<T>(
   loader: LoaderDefinition<T>,
-  options?: UseLoaderOptions
+  options?: UseLoaderOptions,
 ): UseFetchLoaderResult<T> {
   const context = useContext(OutletContext);
 
   // Get data from context (SSR/navigation)
-  const getContextData = useCallback((): T | undefined => {
+  const contextData = useMemo((): T | undefined => {
     let current: OutletContextValue | null | undefined = context;
     while (current) {
       if (current.loaderData && loader.$$id in current.loaderData) {
         return current.loaderData[loader.$$id] as T;
       }
+      // Check content element — the route's OutletProvider is rendered as
+      // <Outlet /> content (a child), so its loaderData isn't in the parent
+      // chain. Parallel slots need to reach into it to find route-level loaders.
+      const contentData = extractContentLoaderData(
+        current.content,
+        loader.$$id,
+      );
+      if (contentData !== NOT_FOUND) {
+        return contentData as T;
+      }
       current = current.parent;
     }
     return undefined;
   }, [context, loader.$$id]);
 
-  const contextData = getContextData();
-
   // Local state for fetched data (from load() calls)
   const [fetchedData, setFetchedData] = useState<T | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const requestIdRef = useRef(0);
 
   // Track context data changes to reset fetched data on navigation
   const prevContextDataRef = useRef(contextData);
@@ -108,13 +176,25 @@ function useLoaderInternal<T>(
 
   const throwOnError = options?.throwOnError ?? true;
 
-  // Load function for fetching data
+  // Refs for values used inside load() that should NOT cause callback identity
+  // churn. loader.$$id can change if a reusable component receives a different
+  // loader without remounting; data changes on every navigation. Refs keep the
+  // callback stable while always reading the latest values.
+  const loaderIdRef = useRef(loader.$$id);
+  loaderIdRef.current = loader.$$id;
+  const dataRef = useRef(data);
+  dataRef.current = data;
+
+  // Load function for fetching data via the ?_rsc_loader endpoint.
+  // Supports GET (data fetching) and POST/PUT/PATCH/DELETE (mutations).
   const load = useCallback(
     async (loadOptions?: LoadOptions): Promise<T> => {
+      const requestId = ++requestIdRef.current;
+      const loaderId = loaderIdRef.current;
       // Verify the loader has $$id
-      if (!loader.$$id) {
+      if (!loaderId) {
         throw new Error(
-          `Loader is missing $$id. Make sure the exposeLoaderId Vite plugin is enabled.`
+          `Loader is missing $$id. Make sure the exposeLoaderId Vite plugin is enabled.`,
         );
       }
 
@@ -122,8 +202,8 @@ function useLoaderInternal<T>(
       setError(null);
 
       try {
-        const url = new URL(window.location.pathname, window.location.origin);
-        url.searchParams.set("_rsc_loader", loader.$$id);
+        const url = new URL(window.location.href);
+        url.searchParams.set("_rsc_loader", loaderId);
 
         const method = loadOptions?.method ?? "GET";
         const isBodyMethod = method !== "GET";
@@ -131,29 +211,58 @@ function useLoaderInternal<T>(
         let fetchOptions: RequestInit;
 
         if (isBodyMethod) {
-          // POST/PUT/PATCH/DELETE - send params and body as JSON
-          const bodyPayload: { params?: Record<string, string>; body?: unknown } = {};
-          if (loadOptions?.params && Object.keys(loadOptions.params).length > 0) {
-            bodyPayload.params = loadOptions.params;
+          const bodyValue =
+            "body" in (loadOptions ?? {})
+              ? (loadOptions as any).body
+              : undefined;
+          const hasParams =
+            loadOptions?.params && Object.keys(loadOptions.params).length > 0;
+
+          if (bodyValue instanceof FormData) {
+            // FormData body — send as multipart/form-data (preserves File objects).
+            // Params are appended as a JSON string in a special field.
+            if (hasParams) {
+              bodyValue.set(
+                "_rsc_loader_params",
+                JSON.stringify(loadOptions!.params),
+              );
+            }
+            fetchOptions = {
+              method,
+              headers: { Accept: "text/x-component" },
+              body: bodyValue,
+            };
+          } else {
+            // JSON body — send params and body as JSON
+            const bodyPayload: {
+              params?: Record<string, string>;
+              body?: unknown;
+            } = {};
+            if (hasParams) {
+              bodyPayload.params = loadOptions!.params;
+            }
+            if (bodyValue !== undefined) {
+              bodyPayload.body = bodyValue;
+            }
+
+            fetchOptions = {
+              method,
+              headers: {
+                Accept: "text/x-component",
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(bodyPayload),
+            };
           }
-          if ("body" in (loadOptions ?? {}) && (loadOptions as any).body !== undefined) {
-            bodyPayload.body = (loadOptions as any).body;
-          }
-
-          fetchOptions = {
-            method,
-            headers: {
-              Accept: "text/x-component",
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(bodyPayload),
-          };
         } else {
           // GET - send params in query string
-          if (loadOptions?.params && Object.keys(loadOptions.params).length > 0) {
+          if (
+            loadOptions?.params &&
+            Object.keys(loadOptions.params).length > 0
+          ) {
             url.searchParams.set(
               "_rsc_loader_params",
-              JSON.stringify(loadOptions.params)
+              JSON.stringify(loadOptions.params),
             );
           }
 
@@ -175,61 +284,32 @@ function useLoaderInternal<T>(
         }
 
         const result = payload.loaderResult;
-        setFetchedData(result);
+        if (requestId === requestIdRef.current) {
+          startTransition(() => {
+            setFetchedData(result);
+          });
+        }
         return result;
       } catch (e) {
         const err = e instanceof Error ? e : new Error(String(e));
-        setError(err);
-        if (throwOnError) {
-          throw err;
+        if (requestId === requestIdRef.current) {
+          setError(err);
         }
-        // When throwOnError is false, return the current data (previous successful
-        // value or undefined). Caller should check error state for error handling.
-        return data as T;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [throwOnError]
-  );
-
-  // Form action for progressive enhancement
-  // This wrapper is for useFetchLoader's load.action - it manages state internally
-  // and doesn't use React's useActionState. For true PE, use loader.action directly
-  // with useActionState.
-  const action = useCallback(
-    async (formData: FormData): Promise<void> => {
-      if (!loader.action) {
-        throw new Error(
-          `Loader "${loader.$$id}" does not have an action. ` +
-            `Make sure the loader is created with fetchable: true.`
-        );
-      }
-
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        // Pass null as prevState - this wrapper manages state internally
-        const result = await loader.action(null, formData);
-        setFetchedData(result);
-      } catch (e) {
-        const err = e instanceof Error ? e : new Error(String(e));
-        setError(err);
         if (throwOnError) {
           throw err;
         }
+        // When throwOnError is false, return the latest data snapshot (previous
+        // successful value or undefined). Caller should check error state.
+        return dataRef.current as T;
       } finally {
-        setIsLoading(false);
+        if (requestId === requestIdRef.current) {
+          setIsLoading(false);
+        }
       }
     },
-    [throwOnError]
+    [throwOnError],
   );
 
-  // Attach action to load function
-  const loadWithAction = load as LoadFunction<T>;
-  loadWithAction.action = action;
-
   // Throw during render if there's an error and throwOnError is true
   // This allows ErrorBoundaries to catch async errors from load()
   if (error && throwOnError) {
@@ -240,8 +320,8 @@ function useLoaderInternal<T>(
     data,
     isLoading,
     error,
-    load: loadWithAction,
-    refetch: loadWithAction,
+    load,
+    refetch: load,
   };
 }
 
@@ -276,7 +356,7 @@ function useLoaderInternal<T>(
  */
 export function useLoader<T>(
   loader: LoaderDefinition<T>,
-  options?: UseLoaderOptions
+  options?: UseLoaderOptions,
 ): UseLoaderResult<T> {
   const result = useLoaderInternal(loader, options);
 
@@ -285,7 +365,7 @@ export function useLoader<T>(
     throw new Error(
       `useLoader: Loader "${loader.$$id}" data not found in context. ` +
         `Make sure the loader is registered on the route with loader(). ` +
-        `If you need on-demand fetching, use useFetchLoader() instead.`
+        `If you need on-demand fetching, use useFetchLoader() instead.`,
     );
   }
 
@@ -340,7 +420,7 @@ export function useLoader<T>(
  */
 export function useFetchLoader<T>(
   loader: LoaderDefinition<T>,
-  options?: UseLoaderOptions
+  options?: UseLoaderOptions,
 ): UseFetchLoaderResult<T> {
   return useLoaderInternal(loader, options);
 }

package/src/vite/discovery/bundle-postprocess.ts

@@ -0,0 +1,181 @@
+/**
+ * Bundle Post-Processing
+ *
+ * Handles handler code eviction from prerender/static chunks and
+ * injection of collected prerender/static data into the RSC entry bundle.
+ */
+
+import { resolve } from "node:path";
+import { readFileSync, writeFileSync, existsSync } from "node:fs";
+import { evictHandlerCode } from "../utils/bundle-analysis.js";
+import { copyStagedBuildAssets } from "../utils/prerender-utils.js";
+import type { DiscoveryState } from "./state.js";
+
+/**
+ * Post-process the RSC bundle: evict handler code and inject
+ * prerender/static data as importable asset modules.
+ */
+export function postprocessBundle(state: DiscoveryState): void {
+  const hasPrerenderData =
+    state.prerenderManifestEntries &&
+    Object.keys(state.prerenderManifestEntries).length > 0;
+  const hasStaticData =
+    state.staticManifestEntries &&
+    Object.keys(state.staticManifestEntries).length > 0;
+  if (!hasPrerenderData && !hasStaticData) return;
+
+  // Find RSC entry (recorded in generateBundle, fallback to dist/rsc/index.js)
+  const rscEntryPath = resolve(
+    state.projectRoot,
+    "dist/rsc",
+    state.rscEntryFileName ?? "index.js",
+  );
+
+  // 1. Evict handler code from whichever chunks contain handler exports.
+  // handlerChunkInfoMap/staticHandlerChunkInfoMap are populated by generateBundle
+  // after the production RSC build. In Vite 6 multi-environment builds, the
+  // RSC build runs twice (analysis + production). The maps are cleared at the
+  // start of each generateBundle pass so only production data is used here.
+  const evictionTargets: Array<{
+    infos: Iterable<import("./state.js").ChunkInfo>;
+    fnName: string;
+    brand: string;
+    label: string;
+  }> = [
+    {
+      infos: state.handlerChunkInfoMap.values(),
+      fnName: "Prerender",
+      brand: "prerenderHandler",
+      label: "handler code from RSC bundle",
+    },
+    {
+      infos: state.staticHandlerChunkInfoMap.values(),
+      fnName: "Static",
+      brand: "staticHandler",
+      label: "static handler code",
+    },
+  ];
+
+  for (const target of evictionTargets) {
+    for (const info of target.infos) {
+      const chunkPath = resolve(state.projectRoot, "dist/rsc", info.fileName);
+      try {
+        const code = readFileSync(chunkPath, "utf-8");
+        const result = evictHandlerCode(
+          code,
+          info.exports,
+          target.fnName,
+          target.brand,
+        );
+        if (result) {
+          writeFileSync(chunkPath, result.code);
+          const savedKB = (result.savedBytes / 1024).toFixed(1);
+          console.log(
+            `[rsc-router] Evicted ${target.label} (${savedKB} KB saved): ${info.fileName}`,
+          );
+        }
+      } catch (replaceErr: any) {
+        console.warn(
+          `[rsc-router] Failed to evict ${target.label}: ${replaceErr.message}`,
+        );
+      }
+    }
+  }
+  state.handlerChunkInfoMap.clear();
+  state.staticHandlerChunkInfoMap.clear();
+
+  // 2. Write prerender data as separate importable asset modules
+  // and inject a lazy manifest loader into the RSC entry.
+  if (hasPrerenderData && existsSync(rscEntryPath)) {
+    const rscCode = readFileSync(rscEntryPath, "utf-8");
+    // Check for the specific injection marker to avoid double-injection.
+    if (!rscCode.includes("__prerender-manifest.js")) {
+      try {
+        let totalBytes = copyStagedBuildAssets(
+          state.projectRoot,
+          Object.values(state.prerenderManifestEntries!),
+        );
+
+        const manifestMap: Record<string, string> = {};
+        for (const [key, assetFileName] of Object.entries(
+          state.prerenderManifestEntries!,
+        )) {
+          manifestMap[key] = `./assets/${assetFileName}`;
+        }
+
+        const manifestCode = [
+          `const m=JSON.parse('${JSON.stringify(manifestMap).replace(/'/g, "\\'")}');`,
+          `export function loadPrerenderAsset(s){return import(s)}`,
+          `export default m;`,
+          "",
+        ].join("\n");
+        const manifestPath = resolve(
+          state.projectRoot,
+          "dist/rsc/__prerender-manifest.js",
+        );
+        writeFileSync(manifestPath, manifestCode);
+        totalBytes += Buffer.byteLength(manifestCode);
+
+        const injection = `globalThis.__loadPrerenderManifestModule = () => import("./__prerender-manifest.js");\n`;
+        writeFileSync(rscEntryPath, injection + rscCode);
+
+        const totalKB = (totalBytes / 1024).toFixed(1);
+        console.log(
+          `[rsc-router] Wrote prerender assets (${totalKB} KB total, ${Object.keys(state.prerenderManifestEntries!).length} entries)`,
+        );
+      } catch (err: any) {
+        throw new Error(
+          `[rsc-router] Failed to write prerender assets: ${err.message}`,
+        );
+      }
+    }
+  }
+
+  // 3. Write static handler data as separate importable asset modules
+  // and inject a __STATIC_MANIFEST import into the RSC entry.
+  if (hasStaticData && existsSync(rscEntryPath)) {
+    const rscCode = readFileSync(rscEntryPath, "utf-8");
+    if (!rscCode.includes("__static-manifest.js")) {
+      try {
+        const manifestEntries: string[] = [];
+        let totalBytes = copyStagedBuildAssets(
+          state.projectRoot,
+          Object.values(state.staticManifestEntries!),
+        );
+
+        for (const [handlerId, assetFileName] of Object.entries(
+          state.staticManifestEntries!,
+        )) {
+          manifestEntries.push(
+            `${JSON.stringify(handlerId)}:()=>import("./assets/${assetFileName}")`,
+          );
+        }
+
+        // Set the global inside the manifest module so it is assigned
+        // during module evaluation (before dependent modules like
+        // segment-resolution.ts run their top-level initializers).
+        const manifestCode = `const m={${manifestEntries.join(",")}};globalThis.__STATIC_MANIFEST=m;export default m;\n`;
+        const manifestPath = resolve(
+          state.projectRoot,
+          "dist/rsc/__static-manifest.js",
+        );
+        writeFileSync(manifestPath, manifestCode);
+        totalBytes += Buffer.byteLength(manifestCode);
+
+        // The import ensures the manifest module is evaluated early.
+        // The global is already set inside the module itself.
+        const injection = `import "./__static-manifest.js";\n`;
+        writeFileSync(rscEntryPath, injection + rscCode);
+
+        const totalKB = (totalBytes / 1024).toFixed(1);
+        console.log(
+          `[rsc-router] Wrote static assets (${totalKB} KB total, ${Object.keys(state.staticManifestEntries!).length} entries)`,
+        );
+      } catch (err: any) {
+        throw new Error(
+          `[rsc-router] Failed to write static assets: ${err.message}`,
+        );
+      }
+    }
+  }
+}