rwsdk 0.2.0-alpha.9 → 0.2.0

package/dist/runtime/client/client.d.ts

@@ -0,0 +1,10 @@
+import "./setWebpackRequire";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
+import type { Transport, HydrationOptions } from "./types";
+export declare const fetchTransport: Transport;
+export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
+    transport?: Transport;
+    hydrateRootOptions?: HydrationOptions;
+    handleResponse?: (response: Response) => boolean;
+}) => Promise<void>;

package/dist/runtime/{client.js → client/client.js}

@@ -1,11 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { clientWebpackRequire } from "./imports/client";
-// NOTE: `react-server-dom-webpack` uses this global to load modules,
-// so we need to define it here before importing "react-server-dom-webpack."
-globalThis.__webpack_require__ = clientWebpackRequire;
+// note(justinvdm, 14 Aug 2025): Rendering related imports and logic go here.
+// See client.tsx for the actual client entrypoint.
+// context(justinvdm, 14 Aug 2025): `react-server-dom-webpack` uses this global
+// to load modules, so we need to define it here before importing
+// "react-server-dom-webpack."
+import "./setWebpackRequire";
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createFromReadableStream, createFromFetch, encodeReply, } from "react-server-dom-webpack/client.browser";
+import { rscStream } from "rsc-html-stream/client";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
 export const fetchTransport = (transportContext) => {
     const fetchCallServer = async (id, args) => {
-        const { createFromFetch, encodeReply } = await import("react-server-dom-webpack/client.browser");
         const url = new URL(window.location.href);
         url.searchParams.set("__rsc", "");
         if (id != null) {
@@ -41,8 +48,6 @@ export const fetchTransport = (transportContext) => {
     return fetchCallServer;
 };
 export const initClient = async ({ transport = fetchTransport, hydrateRootOptions, handleResponse, } = {}) => {
-    const React = await import("react");
-    const { hydrateRoot } = await import("react-dom/client");
     const transportContext = {
         setRscPayload: () => { },
         handleResponse,
@@ -50,7 +55,7 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     let transportCallServer = transport(transportContext);
     const callServer = (id, args) => transportCallServer(id, args);
     const upgradeToRealtime = async ({ key } = {}) => {
-        const { realtimeTransport } = await import("./lib/realtime/client");
+        const { realtimeTransport } = await import("../lib/realtime/client");
         const createRealtimeTransport = realtimeTransport({ key });
         transportCallServer = createRealtimeTransport(transportContext);
     };
@@ -67,8 +72,6 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     // context(justinvdm, 18 Jun 2025): We inject the RSC payload
     // unless render(Document, [...], { rscPayload: false }) was used.
     if (globalThis.__FLIGHT_DATA) {
-        const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
-        const { rscStream } = await import("rsc-html-stream/client");
         rscPayload = createFromReadableStream(rscStream, {
             callServer,
         });

package/dist/runtime/client/navigation.d.ts

@@ -0,0 +1,9 @@
+export interface ClientNavigationOptions {
+    onNavigate?: () => void;
+    scrollToTop?: boolean;
+    scrollBehavior?: "auto" | "smooth" | "instant";
+}
+export declare function validateClickEvent(event: MouseEvent, target: HTMLElement): boolean;
+export declare function initClientNavigation(opts?: ClientNavigationOptions): {
+    handleResponse: (response: Response) => boolean;
+};

package/dist/runtime/client/navigation.js

@@ -0,0 +1,88 @@
+function saveScrollPosition(x, y) {
+    window.history.replaceState({
+        ...window.history.state,
+        scrollX: x,
+        scrollY: y,
+    }, "", window.location.href);
+}
+export function validateClickEvent(event, target) {
+    // should this only work for left click?
+    if (event.button !== 0) {
+        return false;
+    }
+    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+        return false;
+    }
+    const link = target.closest("a");
+    if (!link) {
+        return false;
+    }
+    const href = link.getAttribute("href");
+    if (!href) {
+        return false;
+    }
+    if (href.includes("#")) {
+        return false;
+    }
+    // Skip if target="_blank" or similar
+    if (link.target && link.target !== "_self") {
+        return false;
+    }
+    if (href.startsWith("http")) {
+        return false;
+    }
+    // Skip if download attribute
+    if (link.hasAttribute("download")) {
+        return false;
+    }
+    return true;
+}
+export function initClientNavigation(opts = {}) {
+    const options = {
+        onNavigate: async function onNavigate() {
+            // @ts-expect-error
+            await globalThis.__rsc_callServer();
+        },
+        scrollToTop: true,
+        scrollBehavior: "instant",
+        ...opts,
+    };
+    history.scrollRestoration = "auto";
+    document.addEventListener("click", async function handleClickEvent(event) {
+        // Prevent default navigation
+        if (!validateClickEvent(event, event.target)) {
+            return;
+        }
+        event.preventDefault();
+        const el = event.target;
+        const a = el.closest("a");
+        const href = a?.getAttribute("href");
+        saveScrollPosition(window.scrollX, window.scrollY);
+        window.history.pushState({ path: href }, "", window.location.origin + href);
+        await options.onNavigate();
+        if (options.scrollToTop && history.scrollRestoration === "auto") {
+            window.scrollTo({
+                top: 0,
+                left: 0,
+                behavior: options.scrollBehavior,
+            });
+            saveScrollPosition(0, 0);
+        }
+        history.scrollRestoration = "auto";
+    }, true);
+    window.addEventListener("popstate", async function handlePopState() {
+        saveScrollPosition(window.scrollX, window.scrollY);
+        await options.onNavigate();
+    });
+    // Return a handleResponse function for use with initClient
+    return {
+        handleResponse: function handleResponse(response) {
+            if (!response.ok) {
+                // Redirect to the current page (window.location) to show the error
+                window.location.href = window.location.href;
+                return false;
+            }
+            return true;
+        },
+    };
+}

package/dist/runtime/{clientNavigation.test.js → client/navigation.test.js}

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { validateClickEvent } from "./clientNavigation";
+import { validateClickEvent } from "./navigation";
 describe("clientNavigation", () => {
     let mockEvent = {
         button: 0, // right click

package/dist/runtime/client/setWebpackRequire.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/client/setWebpackRequire.js

@@ -0,0 +1,2 @@
+import { clientWebpackRequire } from "../imports/client";
+globalThis.__webpack_require__ = clientWebpackRequire;

package/dist/runtime/{client.d.ts → client/types.d.ts}

@@ -1,19 +1,13 @@
-import { type CallServerCallback } from "react-server-dom-webpack/client.browser";
-import { type HydrationOptions } from "react-dom/client";
+import type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { HydrationOptions } from "react-dom/client";
 export type ActionResponse<Result> = {
     node: React.ReactNode;
     actionResult: Result;
 };
-type TransportContext = {
+export type TransportContext = {
     setRscPayload: <Result>(v: Promise<ActionResponse<Result>>) => void;
     handleResponse?: (response: Response) => boolean;
 };
 export type Transport = (context: TransportContext) => CallServerCallback;
 export type CreateCallServer = (context: TransportContext) => <Result>(id: null | string, args: null | unknown[]) => Promise<Result>;
-export declare const fetchTransport: Transport;
-export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
-    transport?: Transport;
-    hydrateRootOptions?: HydrationOptions;
-    handleResponse?: (response: Response) => boolean;
-}) => Promise<void>;
-export {};

package/dist/runtime/client/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/entries/client.d.ts

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/entries/client.js

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/imports/client.d.ts

@@ -1,4 +1,4 @@
-export declare const loadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
-export declare const clientWebpackRequire: ((id: string) => Promise<{
+export declare const loadModule: (id: string) => Promise<any>;
+export declare const clientWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/client.js

@@ -1,11 +1,13 @@
 import React from "react";
-import memoize from "lodash/memoize";
-export const loadModule = memoize(async (id) => {
+import { ClientOnly } from "../client/client";
+import { memoizeOnId } from "../lib/memoizeOnId";
+// @ts-ignore
+import { useClientLookup } from "virtual:use-client-lookup.js";
+export const loadModule = memoizeOnId(async (id) => {
     if (import.meta.env.VITE_IS_DEV_SERVER) {
         return await import(/* @vite-ignore */ id);
     }
     else {
-        const { useClientLookup } = await import("virtual:use-client-lookup.js");
         const moduleFn = useClientLookup[id];
         if (!moduleFn) {
             throw new Error(`(client) No module found for '${id}' in module lookup for "use client" directive`);
@@ -14,7 +16,7 @@ export const loadModule = memoize(async (id) => {
     }
 });
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const clientWebpackRequire = memoize(async (id) => {
+export const clientWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const promisedModule = loadModule(file);
     const promisedComponent = promisedModule.then((module) => module[name]);
@@ -23,11 +25,10 @@ export const clientWebpackRequire = memoize(async (id) => {
         const awaitedComponent = await promisedComponent;
         return { [id]: awaitedComponent };
     }
-    const { ClientOnly } = await import("./ClientOnly");
     const promisedDefault = promisedComponent.then((Component) => ({
         default: Component,
     }));
     const Lazy = React.lazy(() => promisedDefault);
-    const Wrapped = () => React.createElement(ClientOnly, null, React.createElement(Lazy));
+    const Wrapped = (props) => React.createElement(ClientOnly, null, React.createElement(Lazy, props));
     return { [id]: Wrapped };
 });

package/dist/runtime/imports/ssr.d.ts

@@ -1,5 +1,5 @@
-export declare const ssrLoadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const ssrLoadModule: (id: string) => Promise<any>;
 export declare const ssrGetModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/ssr.js

@@ -1,5 +1,5 @@
-import memoize from "lodash/memoize";
-export const ssrLoadModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const ssrLoadModule = memoizeOnId(async (id) => {
     const { useClientLookup } = await import("virtual:use-client-lookup.js");
     const moduleFn = useClientLookup[id];
     if (!moduleFn) {
@@ -13,7 +13,7 @@ export const ssrGetModuleExport = async (id) => {
     return module[name];
 };
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const module = await ssrLoadModule(file);
     return { [id]: module[name] };

package/dist/runtime/imports/worker.d.ts

@@ -1,5 +1,5 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/worker.js

@@ -1,7 +1,7 @@
-import memoize from "lodash/memoize";
 import { requestInfo } from "../requestInfo/worker";
 import { ssrWebpackRequire as baseSsrWebpackRequire } from "rwsdk/__ssr_bridge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {
@@ -14,7 +14,7 @@ export const getServerModuleExport = async (id) => {
     const module = await loadServerModule(file);
     return module[name];
 };
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     if (!requestInfo.rw.ssr) {
         return { [id]: () => null };
     }

package/dist/runtime/lib/manifest.d.ts

@@ -1,2 +1,11 @@
-import { type RequestInfo } from "../requestInfo/types";
-export declare const getManifest: (requestInfo: RequestInfo) => Promise<Record<string, any>>;
+export type Manifest = Record<string, ManifestChunk>;
+export interface ManifestChunk {
+    file: string;
+    src?: string;
+    isEntry?: boolean;
+    isDynamicEntry?: boolean;
+    imports?: string[];
+    css?: string[];
+    assets?: string[];
+}
+export declare const getManifest: () => Promise<Manifest>;

package/dist/runtime/lib/manifest.js

@@ -1,5 +1,5 @@
 let manifest;
-export const getManifest = async (requestInfo) => {
+export const getManifest = async () => {
     if (manifest) {
         return manifest;
     }

package/dist/runtime/lib/memoizeOnId.d.ts

@@ -0,0 +1 @@
+export declare const memoizeOnId: <Result>(fn: (id: string) => Result) => (id: string) => Result;

package/dist/runtime/lib/memoizeOnId.js

@@ -0,0 +1,11 @@
+export const memoizeOnId = (fn) => {
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+    const results = {};
+    const memoizedFn = (id) => {
+        if (hasOwnProperty.call(results, id)) {
+            return results[id];
+        }
+        return (results[id] = fn(id));
+    };
+    return memoizedFn;
+};

package/dist/runtime/lib/realtime/client.d.ts

@@ -1,4 +1,4 @@
-import { type Transport } from "../../client";
+import { type Transport } from "../../client/types";
 export declare const initRealtimeClient: ({ key, handleResponse, }?: {
     key?: string;
     handleResponse?: (response: Response) => boolean;

package/dist/runtime/lib/realtime/client.js

@@ -1,4 +1,4 @@
-import { initClient } from "../../client";
+import { initClient } from "../../client/client";
 import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
 import { MESSAGE_TYPE } from "./shared";
 import { packMessage, unpackMessage, } from "./protocol";

package/dist/runtime/lib/router.d.ts

@@ -18,10 +18,10 @@ export type RwContext = {
     scriptsToBeLoaded: Set<string>;
     pageRouteResolved: PromiseWithResolvers<void> | undefined;
 };
-export type RouteMiddleware<T extends RequestInfo = RequestInfo> = (requestInfo: T) => Response | Promise<Response> | void | Promise<void> | Promise<Response | void>;
-type RouteFunction<T extends RequestInfo = RequestInfo> = (requestInfo: T) => Response | Promise<Response>;
+export type RouteMiddleware<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<React.JSX.Element | Response | void>;
+type RouteFunction<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<Response>;
 type MaybePromise<T> = T | Promise<T>;
-type RouteComponent<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<React.JSX.Element | Response>;
+type RouteComponent<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<React.JSX.Element | Response | void>;
 type RouteHandler<T extends RequestInfo = RequestInfo> = RouteFunction<T> | RouteComponent<T> | [...RouteMiddleware<T>[], RouteFunction<T> | RouteComponent<T>];
 export type Route<T extends RequestInfo = RequestInfo> = RouteMiddleware<T> | RouteDefinition<T> | Array<Route<T>>;
 export type RouteDefinition<T extends RequestInfo = RequestInfo> = {

package/dist/runtime/lib/router.js

@@ -71,53 +71,97 @@ export function defineRoutes(routes) {
             if (path !== "/" && !path.endsWith("/")) {
                 path = path + "/";
             }
-            // Find matching route
-            let match = null;
+            // Flow below; helpers are declared after the main flow for readability
+            // 1) Global middlewares: run any middleware functions encountered (Response short-circuits, element renders)
+            // 2) Route matching: skip non-matching route definitions; stop at first match
+            // 3) Route-specific middlewares: run middlewares attached to the matched route
+            // 4) Final component: render the matched route's final component (layouts apply only here)
             for (const route of flattenedRoutes) {
+                // 1) Global middlewares (encountered before a match)
                 if (typeof route === "function") {
-                    const r = await route(getRequestInfo());
-                    if (r instanceof Response) {
-                        return r;
+                    const result = await route(getRequestInfo());
+                    const handled = await handleMiddlewareResult(result);
+                    if (handled) {
+                        return handled;
                     }
                     continue;
                 }
+                // 2) Route matching (skip if not matched)
                 const params = matchPath(route.path, path);
-                if (params) {
-                    match = { params, handler: route.handler, layouts: route.layouts };
-                    break;
+                if (!params) {
+                    continue;
                 }
+                // Found a match: 3) route middlewares, then 4) final component, then stop
+                return await runWithRequestInfoOverrides({ params }, async () => {
+                    const { routeMiddlewares, componentHandler } = parseHandlers(route.handler);
+                    // 3) Route-specific middlewares
+                    const mwHandled = await handleRouteMiddlewares(routeMiddlewares);
+                    if (mwHandled) {
+                        return mwHandled;
+                    }
+                    // 4) Final component (always last item)
+                    return await handleRouteComponent(componentHandler, route.layouts || []);
+                });
             }
-            if (!match) {
-                // todo(peterp, 2025-01-28): Allow the user to define their own "not found" route.
-                return new Response("Not Found", { status: 404 });
-            }
-            let { params, handler, layouts } = match;
-            return runWithRequestInfoOverrides({ params }, async () => {
+            // No route matched and no middleware handled the request
+            // todo(peterp, 2025-01-28): Allow the user to define their own "not found" route.
+            return new Response("Not Found", { status: 404 });
+            // --- Helpers ---
+            function parseHandlers(handler) {
                 const handlers = Array.isArray(handler) ? handler : [handler];
-                for (const h of handlers) {
-                    if (isRouteComponent(h)) {
-                        const requestInfo = getRequestInfo();
-                        const WrappedComponent = wrapWithLayouts(wrapHandlerToThrowResponses(h), layouts || [], requestInfo);
-                        if (!isClientReference(h)) {
-                            // context(justinvdm, 31 Jul 2025): We now know we're dealing with a page route,
-                            // so we create a deferred so that we can signal when we're done determining whether
-                            // we're returning a response or a react element
-                            requestInfo.rw.pageRouteResolved = Promise.withResolvers();
-                        }
-                        return await renderPage(requestInfo, WrappedComponent, onError);
-                    }
-                    else {
-                        const r = await h(getRequestInfo());
-                        if (r instanceof Response) {
-                            return r;
-                        }
+                const routeMiddlewares = handlers.slice(0, Math.max(handlers.length - 1, 0));
+                const componentHandler = handlers[handlers.length - 1];
+                return {
+                    routeMiddlewares: routeMiddlewares,
+                    componentHandler,
+                };
+            }
+            function renderElement(element) {
+                const requestInfo = getRequestInfo();
+                const Element = () => element;
+                return renderPage(requestInfo, Element, onError);
+            }
+            async function handleMiddlewareResult(result) {
+                if (result instanceof Response) {
+                    return result;
+                }
+                if (result && React.isValidElement(result)) {
+                    return await renderElement(result);
+                }
+                return undefined;
+            }
+            // Note: We no longer have separate global pass or match-only pass;
+            // the outer single pass above handles both behaviors correctly.
+            async function handleRouteMiddlewares(mws) {
+                for (const mw of mws) {
+                    const result = await mw(getRequestInfo());
+                    const handled = await handleMiddlewareResult(result);
+                    if (handled)
+                        return handled;
+                }
+                return undefined;
+            }
+            async function handleRouteComponent(component, layouts) {
+                if (isRouteComponent(component)) {
+                    const requestInfo = getRequestInfo();
+                    const WrappedComponent = wrapWithLayouts(wrapHandlerToThrowResponses(component), layouts, requestInfo);
+                    if (!isClientReference(component)) {
+                        // context(justinvdm, 31 Jul 2025): We now know we're dealing with a page route,
+                        // so we create a deferred so that we can signal when we're done determining whether
+                        // we're returning a response or a react element
+                        requestInfo.rw.pageRouteResolved = Promise.withResolvers();
                     }
+                    return await renderPage(requestInfo, WrappedComponent, onError);
                 }
-                // Add fallback return
+                // If the last handler is not a component, handle as middleware result (no layouts)
+                const tailResult = await component(getRequestInfo());
+                const handledTail = await handleMiddlewareResult(tailResult);
+                if (handledTail)
+                    return handledTail;
                 return new Response("Response not returned from route handler", {
                     status: 500,
                 });
-            });
+            }
         },
     };
 }

package/dist/runtime/register/ssr.d.ts

@@ -1,3 +1,3 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
 export declare const createServerReference: (id: string, name: string) => any;

package/dist/runtime/register/ssr.js

@@ -1,6 +1,6 @@
-import memoize from "lodash/memoize";
 import { createServerReference as baseCreateServerReference } from "react-server-dom-webpack/client.edge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {

package/dist/runtime/render/preloads.d.ts

@@ -0,0 +1,6 @@
+import type { RequestInfo } from "../requestInfo/types.js";
+import type { Manifest, ManifestChunk } from "../lib/manifest.js";
+export declare function findScriptForModule(id: string, manifest: Manifest): ManifestChunk | undefined;
+export declare const Preloads: ({ requestInfo }: {
+    requestInfo: RequestInfo;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/runtime/render/preloads.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { use } from "react";
+import { getManifest } from "../lib/manifest.js";
+export function findScriptForModule(id, manifest) {
+    const visited = new Set();
+    function find(id) {
+        if (visited.has(id)) {
+            return;
+        }
+        visited.add(id);
+        const manifestEntry = manifest[id];
+        if (!manifestEntry) {
+            return;
+        }
+        if (manifestEntry.isEntry || manifestEntry.isDynamicEntry) {
+            return manifestEntry;
+        }
+        if (manifestEntry.imports) {
+            for (const dep of manifestEntry.imports) {
+                const entry = find(dep);
+                if (entry) {
+                    return entry;
+                }
+            }
+        }
+        return;
+    }
+    return find(id);
+}
+export const Preloads = ({ requestInfo }) => {
+    const manifest = use(getManifest());
+    const allScripts = new Set();
+    for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
+        const script = findScriptForModule(scriptId, manifest);
+        if (script) {
+            allScripts.add(script.file);
+        }
+    }
+    return (_jsx(_Fragment, { children: Array.from(allScripts).map((href) => (_jsx("link", { rel: "modulepreload", href: href }, href))) }));
+};

package/dist/runtime/render/renderRscThenableToHtmlStream.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { use } from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
+import { Preloads } from "./preloads.js";
 import { Stylesheets } from "./stylesheets.js";
 export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, shouldSSR, onError, }) => {
     const Component = () => {
         const RscApp = () => {
             const node = use(thenable).node;
-            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
         };
         // todo(justinvdm, 18 Jun 2025): We can build on this later to allow users
         // surface context. e.g:

package/dist/runtime/render/stylesheets.js

@@ -23,7 +23,7 @@ const findCssForModule = (scriptId, manifest) => {
     return Array.from(css);
 };
 export const Stylesheets = ({ requestInfo }) => {
-    const manifest = use(getManifest(requestInfo));
+    const manifest = use(getManifest());
     const allStylesheets = new Set();
     for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
         const css = findCssForModule(scriptId, manifest);

package/dist/runtime/requestInfo/types.d.ts

@@ -9,5 +9,7 @@ export interface RequestInfo<Params = any, AppContext = DefaultAppContext> {
     headers: Headers;
     rw: RwContext;
     cf: ExecutionContext;
-    response: ResponseInit;
+    response: ResponseInit & {
+        headers: Headers;
+    };
 }