rwsdk 0.2.0-alpha.1 → 0.2.0-alpha.10

package/dist/lib/smokeTests/browser.mjs

@@ -8,7 +8,7 @@ import puppeteer from "puppeteer-core";
 import { takeScreenshot } from "./artifacts.mjs";
 import { RETRIES } from "./constants.mjs";
 import { $ } from "../$.mjs";
-import { fail } from "./utils.mjs";
+import { fail, withRetries } from "./utils.mjs";
 import { reportSmokeTestResult } from "./reporting.mjs";
 import { updateTestStatus } from "./state.mjs";
 import * as fs from "fs/promises";
@@ -404,7 +404,7 @@ export async function checkUrlSmoke(page, url, isRealtime, bail = false, skipCli
             ? "realtimeClientModuleStyles"
             : "initialClientModuleStyles";
         try {
-            await checkUrlStyles(page, "red");
+            await withRetries(() => checkUrlStyles(page, "red"), "URL styles check");
             updateTestStatus(env, urlStylesKey, "PASSED");
             log(`${phase} URL styles check passed`);
         }
@@ -420,7 +420,7 @@ export async function checkUrlSmoke(page, url, isRealtime, bail = false, skipCli
             }
         }
         try {
-            await checkClientModuleStyles(page, "blue");
+            await withRetries(() => checkClientModuleStyles(page, "blue"), "Client module styles check");
             updateTestStatus(env, clientModuleStylesKey, "PASSED");
             log(`${phase} client module styles check passed`);
         }
@@ -507,7 +507,14 @@ export async function checkUrlSmoke(page, url, isRealtime, bail = false, skipCli
                 await testClientComponentHmr(page, targetDir, phase, environment, bail);
                 // Test style HMR if style tests aren't skipped
                 if (!skipStyleTests) {
-                    await testStyleHMR(page, targetDir);
+                    await withRetries(() => testStyleHMR(page, targetDir), "Style HMR test", async () => {
+                        // This logic runs before each retry of testStyleHMR
+                        const urlStylePath = join(targetDir, "src", "app", "smokeTestUrlStyles.css");
+                        const clientStylePath = join(targetDir, "src", "app", "components", "smokeTestClientStyles.module.css");
+                        // Restore original styles before re-running HMR test
+                        await fs.writeFile(urlStylePath, urlStylesTemplate);
+                        await fs.writeFile(clientStylePath, clientStylesTemplate);
+                    });
                 }
                 else {
                     log("Skipping style HMR test as requested");
@@ -1182,9 +1189,9 @@ async function testStyleHMR(page, targetDir) {
     // Allow time for HMR to kick in
     await new Promise((resolve) => setTimeout(resolve, 5000));
     // Check URL-based stylesheet HMR
-    await checkUrlStyles(page, "green");
+    await withRetries(() => checkUrlStyles(page, "green"), "URL styles HMR check");
     // Check client-module stylesheet HMR
-    await checkClientModuleStyles(page, "green");
+    await withRetries(() => checkClientModuleStyles(page, "green"), "Client module styles HMR check");
     // Restore original styles
     await fs.writeFile(urlStylePath, urlStylesTemplate);
     await fs.writeFile(clientStylePath, clientStylesTemplate);

package/dist/lib/smokeTests/utils.d.mts

@@ -13,3 +13,12 @@ export declare function teardown(): Promise<void>;
  * Formats the path suffix from a custom path
  */
 export declare function formatPathSuffix(customPath?: string): string;
+/**
+ * Wraps an async function with retry logic.
+ * @param fn The async function to execute.
+ * @param description A description of the operation for logging.
+ * @param beforeRetry A function to run before each retry attempt.
+ * @param maxRetries The maximum number of retries.
+ * @param delay The delay between retries in milliseconds.
+ */
+export declare function withRetries<T>(fn: () => Promise<T>, description: string, beforeRetry?: () => Promise<void>, maxRetries?: number, delay?: number): Promise<T>;

package/dist/lib/smokeTests/utils.mjs

@@ -145,3 +145,32 @@ export function formatPathSuffix(customPath) {
     log("Formatted path suffix: %s", suffix);
     return suffix;
 }
+/**
+ * Wraps an async function with retry logic.
+ * @param fn The async function to execute.
+ * @param description A description of the operation for logging.
+ * @param beforeRetry A function to run before each retry attempt.
+ * @param maxRetries The maximum number of retries.
+ * @param delay The delay between retries in milliseconds.
+ */
+export async function withRetries(fn, description, beforeRetry, maxRetries = 5, delay = 2000) {
+    for (let i = 0; i < maxRetries; i++) {
+        try {
+            if (i > 0 && beforeRetry) {
+                log(`Running beforeRetry hook for "${description}"`);
+                await beforeRetry();
+            }
+            return await fn();
+        }
+        catch (error) {
+            log(`Attempt ${i + 1} of ${maxRetries} failed for "${description}": ${error instanceof Error ? error.message : String(error)}`);
+            if (i === maxRetries - 1) {
+                log(`All ${maxRetries} retries failed for "${description}".`);
+                throw error;
+            }
+            log(`Retrying in ${delay}ms...`);
+            await setTimeout(delay);
+        }
+    }
+    throw new Error("Retry loop failed unexpectedly.");
+}

package/dist/runtime/clientNavigation.js

@@ -1,3 +1,10 @@
+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) {
@@ -31,7 +38,6 @@ export function validateClickEvent(event, target) {
     return true;
 }
 export function initClientNavigation(opts = {}) {
-    // Merge user options with defaults
     const options = {
         onNavigate: async function onNavigate() {
             // @ts-expect-error
@@ -41,63 +47,7 @@ export function initClientNavigation(opts = {}) {
         scrollBehavior: "instant",
         ...opts,
     };
-    // Prevent browser's automatic scroll restoration for popstate
-    if ("scrollRestoration" in history) {
-        history.scrollRestoration = "manual";
-    }
-    // Set up scroll behavior management
-    let popStateWasCalled = false;
-    let savedScrollPosition = null;
-    const observer = new MutationObserver(() => {
-        if (popStateWasCalled && savedScrollPosition) {
-            // Restore scroll position for popstate navigation (always instant)
-            window.scrollTo({
-                top: savedScrollPosition.y,
-                left: savedScrollPosition.x,
-                behavior: "instant",
-            });
-            savedScrollPosition = null;
-        }
-        else if (options.scrollToTop && !popStateWasCalled) {
-            // Scroll to top for anchor click navigation (configurable)
-            window.scrollTo({
-                top: 0,
-                left: 0,
-                behavior: options.scrollBehavior,
-            });
-            // Update the current history entry with the new scroll position (top)
-            // This ensures that if we navigate back and then forward again,
-            // we return to the top position, not some previous scroll position
-            window.history.replaceState({
-                ...window.history.state,
-                scrollX: 0,
-                scrollY: 0,
-            }, "", window.location.href);
-        }
-        popStateWasCalled = false;
-    });
-    const handleScrollPopState = (event) => {
-        popStateWasCalled = true;
-        // Save the scroll position that the browser would have restored to
-        const state = event.state;
-        if (state &&
-            typeof state === "object" &&
-            "scrollX" in state &&
-            "scrollY" in state) {
-            savedScrollPosition = { x: state.scrollX, y: state.scrollY };
-        }
-        else {
-            // Fallback: try to get scroll position from browser's session history
-            // This is a best effort since we can't directly access the browser's stored position
-            savedScrollPosition = { x: window.scrollX, y: window.scrollY };
-        }
-    };
-    const main = document.querySelector("main") || document.body;
-    if (main) {
-        window.addEventListener("popstate", handleScrollPopState);
-        observer.observe(main, { childList: true, subtree: true });
-    }
-    // Intercept all anchor tag clicks
+    history.scrollRestoration = "auto";
     document.addEventListener("click", async function handleClickEvent(event) {
         // Prevent default navigation
         if (!validateClickEvent(event, event.target)) {
@@ -107,17 +57,21 @@ export function initClientNavigation(opts = {}) {
         const el = event.target;
         const a = el.closest("a");
         const href = a?.getAttribute("href");
-        // Save current scroll position before navigating
-        window.history.replaceState({
-            path: window.location.pathname,
-            scrollX: window.scrollX,
-            scrollY: window.scrollY,
-        }, "", window.location.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);
-    // Handle browser back/forward buttons
     window.addEventListener("popstate", async function handlePopState() {
+        saveScrollPosition(window.scrollX, window.scrollY);
         await options.onNavigate();
     });
     // Return a handleResponse function for use with initClient

package/dist/runtime/lib/db/DOWorkerDialect.d.ts

@@ -1,23 +1,21 @@
-import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler, Driver, DatabaseConnection } from "kysely";
+import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler, Driver, DatabaseConnection, QueryResult } from "kysely";
+type DOWorkerDialectConfig = {
+    kyselyExecuteQuery: (compiledQuery: {
+        sql: string;
+        parameters: readonly unknown[];
+    }) => Promise<QueryResult<any>>;
+};
 export declare class DOWorkerDialect {
-    config: {
-        stub: any;
-    };
-    constructor(config: {
-        stub: any;
-    });
+    config: DOWorkerDialectConfig;
+    constructor(config: DOWorkerDialectConfig);
     createAdapter(): SqliteAdapter;
     createDriver(): DOWorkerDriver;
     createQueryCompiler(): SqliteQueryCompiler;
     createIntrospector(db: any): SqliteIntrospector;
 }
 declare class DOWorkerDriver implements Driver {
-    config: {
-        stub: any;
-    };
-    constructor(config: {
-        stub: any;
-    });
+    config: DOWorkerDialectConfig;
+    constructor(config: DOWorkerDialectConfig);
     init(): Promise<void>;
     acquireConnection(): Promise<DatabaseConnection>;
     beginTransaction(conn: any): Promise<any>;

package/dist/runtime/lib/db/DOWorkerDialect.js

@@ -24,7 +24,7 @@ class DOWorkerDriver {
     }
     async init() { }
     async acquireConnection() {
-        return new DOWorkerConnection(this.config.stub.kyselyExecuteQuery);
+        return new DOWorkerConnection(this.config.kyselyExecuteQuery);
     }
     async beginTransaction(conn) {
         return await conn.beginTransaction();

package/dist/runtime/lib/db/createDb.d.ts

@@ -1,2 +1,3 @@
 import { Kysely } from "kysely";
-export declare function createDb<T>(durableObjectBinding: any, name?: string): Kysely<T>;
+import { type SqliteDurableObject } from "./index.js";
+export declare function createDb<T>(durableObjectBinding: DurableObjectNamespace<SqliteDurableObject>, name?: string): Kysely<T>;

package/dist/runtime/lib/db/createDb.js

@@ -1,40 +1,14 @@
 import { Kysely } from "kysely";
-import { requestInfo, waitForRequestInfo } from "../../requestInfo/worker.js";
 import { DOWorkerDialect } from "./DOWorkerDialect.js";
-const createDurableObjectDb = (durableObjectBinding, name = "main") => {
-    const durableObjectId = durableObjectBinding.idFromName(name);
-    const stub = durableObjectBinding.get(durableObjectId);
-    stub.initialize();
-    return new Kysely({
-        dialect: new DOWorkerDialect({ stub }),
-    });
-};
 export function createDb(durableObjectBinding, name = "main") {
-    const cacheKey = `${durableObjectBinding}_${name}`;
-    const doCreateDb = () => {
-        if (!requestInfo.rw) {
-            throw new Error(`
-  rwsdk: A database created using createDb() was accessed before requestInfo was available.
-
-  Please make sure database access is happening in a request handler or action handler.
-  `);
-        }
-        let db = requestInfo.rw.databases.get(cacheKey);
-        if (!db) {
-            db = createDurableObjectDb(durableObjectBinding, name);
-            requestInfo.rw.databases.set(cacheKey, db);
-        }
-        return db;
-    };
-    waitForRequestInfo().then(() => doCreateDb());
-    return new Proxy({}, {
-        get(target, prop, receiver) {
-            const db = doCreateDb();
-            const value = db[prop];
-            if (typeof value === "function") {
-                return value.bind(db);
-            }
-            return value;
-        },
+    return new Kysely({
+        dialect: new DOWorkerDialect({
+            kyselyExecuteQuery: (...args) => {
+                const durableObjectId = durableObjectBinding.idFromName(name);
+                const stub = durableObjectBinding.get(durableObjectId);
+                stub.initialize();
+                return stub.kyselyExecuteQuery(...args);
+            },
+        }),
     });
 }

package/dist/runtime/lib/db/index.d.ts

@@ -2,3 +2,4 @@ export * from "./migrations.js";
 export * from "./SqliteDurableObject.js";
 export * from "./createDb.js";
 export type * from "./typeInference/database.js";
+export { sql } from "kysely";

package/dist/runtime/lib/db/index.js

@@ -1,3 +1,4 @@
 export * from "./migrations.js";
 export * from "./SqliteDurableObject.js";
 export * from "./createDb.js";
+export { sql } from "kysely";

package/dist/runtime/lib/manifest.js

@@ -4,10 +4,7 @@ export const getManifest = async (requestInfo) => {
         return manifest;
     }
     if (import.meta.env.VITE_IS_DEV_SERVER) {
-        const url = new URL(requestInfo.request.url);
-        url.searchParams.set("scripts", JSON.stringify(Array.from(requestInfo.rw.scriptsToBeLoaded)));
-        url.pathname = "/__rwsdk_manifest";
-        manifest = await fetch(url.toString()).then((res) => res.json());
+        manifest = {};
     }
     else {
         const { default: prodManifest } = await import("virtual:rwsdk:manifest.js");

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,109 @@ export function defineRoutes(routes) {
             if (path !== "/" && !path.endsWith("/")) {
                 path = path + "/";
             }
-            // Find matching route
-            let match = null;
-            for (const route of flattenedRoutes) {
-                if (typeof route === "function") {
-                    const r = await route(getRequestInfo());
-                    if (r instanceof Response) {
-                        return r;
-                    }
-                    continue;
-                }
-                const params = matchPath(route.path, path);
-                if (params) {
-                    match = { params, handler: route.handler, layouts: route.layouts };
-                    break;
-                }
+            // Flow below; helpers are declared after the main flow for readability
+            // 1) Global middlewares
+            // ----------------------
+            const globalResult = await handleGlobalMiddlewares();
+            if (globalResult) {
+                return globalResult;
             }
+            // 2) Match route
+            // ----------------------
+            const match = matchRoute();
             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 () => {
+            return await runWithRequestInfoOverrides({ params: match.params }, async () => {
+                const { routeMiddlewares, componentHandler } = parseHandlers(match.handler);
+                // 3) Route-specific middlewares
+                // -----------------------------
+                const mwHandled = await handleRouteMiddlewares(routeMiddlewares);
+                if (mwHandled) {
+                    return mwHandled;
+                }
+                // 4) Final component (always last item)
+                // -------------------------------------
+                return await handleRouteComponent(componentHandler, match.layouts || []);
+            });
+            // --- 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(WrappedComponent)) {
-                            // 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);
+                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;
+            }
+            async function handleGlobalMiddlewares() {
+                for (const route of flattenedRoutes) {
+                    if (typeof route !== "function") {
+                        continue;
                     }
-                    else {
-                        const r = await h(getRequestInfo());
-                        if (r instanceof Response) {
-                            return r;
-                        }
+                    const result = await route(getRequestInfo());
+                    const handled = await handleMiddlewareResult(result);
+                    if (handled)
+                        return handled;
+                }
+                return undefined;
+            }
+            function matchRoute() {
+                for (const route of flattenedRoutes) {
+                    if (typeof route === "function")
+                        continue;
+                    const params = matchPath(route.path, path);
+                    if (params) {
+                        return { params, handler: route.handler, layouts: route.layouts };
                     }
                 }
-                // Add fallback return
+                return null;
+            }
+            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);
+                }
+                // 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/render/stylesheets.d.ts

@@ -1,9 +1,4 @@
 import { type RequestInfo } from "../requestInfo/types.js";
-export type CssEntry = {
-    url: string;
-    content: string;
-    absolutePath: string;
-};
 export declare const Stylesheets: ({ requestInfo }: {
     requestInfo: RequestInfo;
 }) => import("react/jsx-runtime.js").JSX.Element;

package/dist/runtime/render/stylesheets.js

@@ -31,15 +31,5 @@ export const Stylesheets = ({ requestInfo }) => {
             allStylesheets.add(entry);
         }
     }
-    return (_jsx(_Fragment, { children: Array.from(allStylesheets).map((entry) => {
-            if (typeof entry === "string") {
-                return (_jsx("link", { rel: "stylesheet", href: entry, precedence: "first" }, entry));
-            }
-            if (import.meta.env.VITE_IS_DEV_SERVER) {
-                return (_jsx("style", { "data-vite-dev-id": entry.absolutePath, dangerouslySetInnerHTML: { __html: entry.content } }, entry.url));
-            }
-            else {
-                return (_jsx("link", { rel: "stylesheet", href: entry.url, precedence: "first" }, entry.url));
-            }
-        }) }));
+    return (_jsx(_Fragment, { children: Array.from(allStylesheets).map((href) => (_jsx("link", { rel: "stylesheet", href: href, precedence: "first" }, href))) }));
 };

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

@@ -5,7 +5,9 @@ export interface RequestInfo<Params = any, AppContext = DefaultAppContext> {
     request: Request;
     params: Params;
     ctx: AppContext;
+    /** @deprecated: Use `response.headers` instead */
     headers: Headers;
     rw: RwContext;
     cf: ExecutionContext;
+    response: ResponseInit;
 }

package/dist/runtime/requestInfo/worker.js

@@ -2,7 +2,7 @@ import { AsyncLocalStorage } from "async_hooks";
 const requestInfoDeferred = Promise.withResolvers();
 const requestInfoStore = new AsyncLocalStorage();
 const requestInfoBase = {};
-const REQUEST_INFO_KEYS = ["request", "params", "ctx", "headers", "rw", "cf"];
+const REQUEST_INFO_KEYS = ["request", "params", "ctx", "headers", "rw", "cf", "response"];
 REQUEST_INFO_KEYS.forEach((key) => {
     Object.defineProperty(requestInfoBase, key, {
         enumerable: true,

package/dist/runtime/script.d.ts

@@ -1,5 +1,5 @@
 export declare const defineScript: (fn: ({ env }: {
-    env: Cloudflare.Env;
+    env: Env;
 }) => Promise<unknown>) => {
     fetch: (request: Request, env: Env, cf: ExecutionContext) => Promise<Response>;
 };

package/dist/runtime/script.js

@@ -3,7 +3,7 @@ import { env } from "cloudflare:workers";
 export const defineScript = (fn) => {
     const app = defineApp([
         async () => {
-            await fn({ env });
+            await fn({ env: env });
             return new Response("Done!");
         },
     ]);

package/dist/runtime/worker.js

@@ -44,6 +44,10 @@ export const defineApp = (routes) => {
                     scriptsToBeLoaded: new Set(),
                     pageRouteResolved: undefined,
                 };
+                const userResponseInit = {
+                    status: 200,
+                    headers: new Headers(),
+                };
                 const outerRequestInfo = {
                     request,
                     headers: userHeaders,
@@ -51,6 +55,7 @@ export const defineApp = (routes) => {
                     params: {},
                     ctx: {},
                     rw,
+                    response: userResponseInit,
                 };
                 const createPageElement = (requestInfo, Page) => {
                     let pageElement;
@@ -89,10 +94,12 @@ export const defineApp = (routes) => {
                         onError,
                     });
                     if (isRSCRequest) {
+                        const responseHeaders = new Headers(userResponseInit.headers);
+                        responseHeaders.set("content-type", "text/x-component; charset=utf-8");
                         return new Response(rscPayloadStream, {
-                            headers: {
-                                "content-type": "text/x-component; charset=utf-8",
-                            },
+                            status: userResponseInit.status,
+                            statusText: userResponseInit.statusText,
+                            headers: responseHeaders,
                         });
                     }
                     let injectRSCPayloadStream;
@@ -112,10 +119,12 @@ export const defineApp = (routes) => {
                     if (injectRSCPayloadStream) {
                         html = html.pipeThrough(injectRSCPayloadStream);
                     }
+                    const responseHeaders = new Headers(userResponseInit.headers);
+                    responseHeaders.set("content-type", "text/html; charset=utf-8");
                     return new Response(html, {
-                        headers: {
-                            "content-type": "text/html; charset=utf-8",
-                        },
+                        status: userResponseInit.status,
+                        statusText: userResponseInit.statusText,
+                        headers: responseHeaders,
                     });
                 };
                 const response = await runWithRequestInfo(outerRequestInfo, async () => new Promise(async (resolve, reject) => {
@@ -135,11 +144,21 @@ export const defineApp = (routes) => {
                 // context(justinvdm, 18 Mar 2025): In some cases, such as a .fetch() call to a durable object instance, or Response.redirect(),
                 // we need to return a mutable response object.
                 const mutableResponse = new Response(response.body, response);
+                // Merge user headers from the legacy headers object
                 for (const [key, value] of userHeaders.entries()) {
                     if (!response.headers.has(key)) {
                         mutableResponse.headers.set(key, value);
                     }
                 }
+                // Merge headers from user response init (these take precedence)
+                if (userResponseInit.headers) {
+                    const userResponseHeaders = new Headers(userResponseInit.headers);
+                    for (const [key, value] of userResponseHeaders.entries()) {
+                        if (!response.headers.has(key)) {
+                            mutableResponse.headers.set(key, value);
+                        }
+                    }
+                }
                 await rw.pageRouteResolved?.promise;
                 return mutableResponse;
             }

package/dist/scripts/debug-sync.mjs

@@ -24,108 +24,12 @@ const getPackageManagerInfo = (targetDir) => {
     }
     return pnpmResult;
 };
-/**
- * @summary Workaround for pnpm's local tarball dependency resolution.
- *
- * @description
- * When installing a new version of the SDK from a local tarball (e.g., during
- * development with `rwsync`), pnpm creates a new, uniquely-named directory in
- * the `.pnpm` store (e.g., `rwsdk@file+...`).
- *
- * A challenge arises when other packages list `rwsdk` as a peer dependency.
- * pnpm may not consistently update the symlinks for these peer dependencies
- * to point to the newest `rwsdk` instance. This can result in a state where
- * multiple versions of `rwsdk` coexist in `node_modules`, with some parts of
- * the application using a stale version.
- *
- * This function addresses the issue by:
- * 1. Identifying the most recently installed `rwsdk` instance in the `.pnpm`
- *    store after a `pnpm install` run.
- * 2. Forcefully updating the top-level `node_modules/rwsdk` symlink to point
- *    to this new instance.
- * 3. Traversing all other `rwsdk`-related directories in the `.pnpm` store
- *    and updating their internal `rwsdk` symlinks to also point to the correct
- *    new instance.
- *
- * I am sorry for this ugly hack, I am sure there is a better way, and that it is me
- * doing something wrong. The aim is not to go down this rabbit hole right now
- * -- @justinvdm
- */
-const hackyPnpmSymlinkFix = async (targetDir) => {
-    console.log("💣 Performing pnpm symlink fix...");
-    const pnpmDir = path.join(targetDir, "node_modules", ".pnpm");
-    if (!existsSync(pnpmDir)) {
-        console.log("   🤔 No .pnpm directory found.");
-        return;
-    }
-    try {
-        const entries = await fs.readdir(pnpmDir);
-        // Find ALL rwsdk directories, not just file-based ones, to handle
-        // all kinds of stale peer dependencies.
-        const rwsdkDirs = entries.filter((e) => e.startsWith("rwsdk@"));
-        console.log("   Found rwsdk directories:", rwsdkDirs);
-        if (rwsdkDirs.length === 0) {
-            console.log("   🤔 No rwsdk directories found to hack.");
-            return;
-        }
-        let latestDir = "";
-        let latestMtime = new Date(0);
-        for (const dir of rwsdkDirs) {
-            const fullPath = path.join(pnpmDir, dir);
-            const stats = await fs.stat(fullPath);
-            if (stats.mtime > latestMtime) {
-                latestMtime = stats.mtime;
-                latestDir = dir;
-            }
-        }
-        console.log("   Latest rwsdk directory:", latestDir);
-        if (!latestDir) {
-            console.log("   🤔 Could not determine the latest rwsdk directory.");
-            return;
-        }
-        const goldenSourcePath = path.join(pnpmDir, latestDir, "node_modules", "rwsdk");
-        if (!existsSync(goldenSourcePath)) {
-            console.error(`   ❌ Golden source path does not exist: ${goldenSourcePath}`);
-            return;
-        }
-        console.log(`   🎯 Golden rwsdk path is: ${goldenSourcePath}`);
-        // 1. Fix top-level symlink
-        const topLevelSymlink = path.join(targetDir, "node_modules", "rwsdk");
-        await fs.rm(topLevelSymlink, { recursive: true, force: true });
-        await fs.symlink(goldenSourcePath, topLevelSymlink, "dir");
-        console.log(`   ✅ Symlinked ${topLevelSymlink} -> ${goldenSourcePath}`);
-        // 2. Fix peer dependency symlinks
-        const allPnpmDirs = await fs.readdir(pnpmDir);
-        for (const dir of allPnpmDirs) {
-            if (dir === latestDir || !dir.includes("rwsdk"))
-                continue;
-            const peerSymlink = path.join(pnpmDir, dir, "node_modules", "rwsdk");
-            if (existsSync(peerSymlink)) {
-                await fs.rm(peerSymlink, { recursive: true, force: true });
-                await fs.symlink(goldenSourcePath, peerSymlink, "dir");
-                console.log(`   ✅ Hijacked symlink in ${dir}`);
-            }
-        }
-    }
-    catch (error) {
-        console.error("   ❌ Failed during hacky pnpm symlink fix:", error);
-    }
-};
-const performFullSync = async (sdkDir, targetDir, cacheBust = false) => {
+const performFullSync = async (sdkDir, targetDir) => {
     const sdkPackageJsonPath = path.join(sdkDir, "package.json");
     let originalSdkPackageJson = null;
     let tarballPath = "";
     let tarballName = "";
     try {
-        if (cacheBust) {
-            console.log("💥 Cache-busting version for full sync...");
-            originalSdkPackageJson = await fs.readFile(sdkPackageJsonPath, "utf-8");
-            const packageJson = JSON.parse(originalSdkPackageJson);
-            const now = Date.now();
-            // This is a temporary version used for cache busting
-            packageJson.version = `${packageJson.version}-dev.${now}`;
-            await fs.writeFile(sdkPackageJsonPath, JSON.stringify(packageJson, null, 2));
-        }
         console.log("📦 Packing SDK...");
         const packResult = await $({ cwd: sdkDir }) `npm pack`;
         tarballName = packResult.stdout?.trim() ?? "";
@@ -145,47 +49,25 @@ const performFullSync = async (sdkDir, targetDir, cacheBust = false) => {
             .readFile(lockfilePath, "utf-8")
             .catch(() => null);
         try {
-            if (pm.name === "pnpm") {
-                console.log("🛠️  Using pnpm overrides to install SDK...");
-                if (originalPackageJson) {
-                    const targetPackageJson = JSON.parse(originalPackageJson);
-                    targetPackageJson.pnpm = targetPackageJson.pnpm || {};
-                    targetPackageJson.pnpm.overrides =
-                        targetPackageJson.pnpm.overrides || {};
-                    targetPackageJson.pnpm.overrides.rwsdk = `file:${tarballPath}`;
-                    await fs.writeFile(packageJsonPath, JSON.stringify(targetPackageJson, null, 2));
-                }
-                // We use install here, which respects the overrides.
-                // We also don't want to fail if the lockfile is out of date.
-                await $("pnpm", ["install", "--no-frozen-lockfile"], {
-                    cwd: targetDir,
-                    stdio: "inherit",
-                });
-                if (process.env.RWSDK_PNPM_SYMLINK_FIX) {
-                    await hackyPnpmSymlinkFix(targetDir);
-                }
+            const cmd = pm.name;
+            const args = [pm.command];
+            if (pm.name === "yarn") {
+                args.push(`file:${tarballPath}`);
             }
             else {
-                const cmd = pm.name;
-                const args = [pm.command];
-                if (pm.name === "yarn") {
-                    args.push(`file:${tarballPath}`);
-                }
-                else {
-                    args.push(tarballPath);
-                }
-                await $(cmd, args, {
-                    cwd: targetDir,
-                    stdio: "inherit",
-                });
+                args.push(tarballPath);
             }
+            await $(cmd, args, {
+                cwd: targetDir,
+                stdio: "inherit",
+            });
         }
         finally {
             if (originalPackageJson) {
                 console.log("Restoring package.json...");
                 await fs.writeFile(packageJsonPath, originalPackageJson);
             }
-            if (originalLockfile && pm.name !== "pnpm") {
+            if (originalLockfile) {
                 console.log(`Restoring ${pm.lockFile}...`);
                 await fs.writeFile(lockfilePath, originalLockfile);
             }
@@ -218,13 +100,17 @@ const performFastSync = async (sdkDir, targetDir) => {
     // Always copy package.json
     await fs.copyFile(path.join(sdkDir, "package.json"), path.join(targetDir, "node_modules/rwsdk/package.json"));
 };
+const areDependenciesEqual = (deps1, deps2) => {
+    // Simple string comparison for this use case is sufficient
+    return JSON.stringify(deps1 ?? {}) === JSON.stringify(deps2 ?? {});
+};
 const performSync = async (sdkDir, targetDir) => {
     console.log("🏗️  Rebuilding SDK...");
     await $ `pnpm build`;
     const forceFullSync = Boolean(process.env.RWSDK_FORCE_FULL_SYNC);
     if (forceFullSync) {
         console.log("🏃 Force full sync mode is enabled.");
-        await performFullSync(sdkDir, targetDir, true);
+        await performFullSync(sdkDir, targetDir);
         console.log("✅ Done syncing");
         return;
     }
@@ -234,15 +120,17 @@ const performSync = async (sdkDir, targetDir) => {
     if (existsSync(installedSdkPackageJsonPath)) {
         const sdkPackageJsonContent = await fs.readFile(sdkPackageJsonPath, "utf-8");
         const installedSdkPackageJsonContent = await fs.readFile(installedSdkPackageJsonPath, "utf-8");
-        if (sdkPackageJsonContent === installedSdkPackageJsonContent) {
+        const sdkPkg = JSON.parse(sdkPackageJsonContent);
+        const installedPkg = JSON.parse(installedSdkPackageJsonContent);
+        if (areDependenciesEqual(sdkPkg.dependencies, installedPkg.dependencies) &&
+            areDependenciesEqual(sdkPkg.devDependencies, installedPkg.devDependencies) &&
+            areDependenciesEqual(sdkPkg.peerDependencies, installedPkg.peerDependencies)) {
             packageJsonChanged = false;
         }
     }
     if (packageJsonChanged) {
         console.log("📦 package.json changed, performing full sync...");
-        // We always cache-bust on a full sync now to ensure pnpm's overrides
-        // see a new version and the hacky symlink fix runs on a clean slate.
-        await performFullSync(sdkDir, targetDir, true);
+        await performFullSync(sdkDir, targetDir);
     }
     else {
         await performFastSync(sdkDir, targetDir);
@@ -261,8 +149,7 @@ export const debugSync = async (opts) => {
         return;
     }
     // --- Watch Mode Logic ---
-    // Use global lock based on SDK directory since all instances sync from the same source
-    const lockfilePath = path.join(sdkDir, ".rwsync.lock");
+    const lockfilePath = path.join(targetDir, "node_modules", ".rwsync.lock");
     let release;
     // Ensure the directory for the lockfile exists
     await fs.mkdir(path.dirname(lockfilePath), { recursive: true });
@@ -273,7 +160,7 @@ export const debugSync = async (opts) => {
     }
     catch (e) {
         if (e.code === "ELOCKED") {
-            console.error(`❌ Another rwsync process is already running for this SDK.`);
+            console.error(`❌ Another rwsync process is already watching ${targetDir}.`);
             console.error(`   If this is not correct, please remove the lockfile at ${lockfilePath}`);
             process.exit(1);
         }

package/dist/scripts/smoke-test.mjs

@@ -30,8 +30,7 @@ if (fileURLToPath(import.meta.url) === process.argv[1]) {
         copyProject: false, // Default to false - don't copy project to artifacts
         realtime: false, // Default to false - don't just test realtime
         skipHmr: false, // Default to false - run HMR tests
-        // todo(justinvdm, 2025-07-31): Remove this once style tests working with headless
-        skipStyleTests: true, // Default to true - skip style tests
+        skipStyleTests: false,
         // sync: will be set below
     };
     // Log if we're in CI
@@ -55,8 +54,8 @@ if (fileURLToPath(import.meta.url) === process.argv[1]) {
         else if (arg === "--skip-hmr") {
             options.skipHmr = true;
         }
-        else if (arg === "--run-style-tests") {
-            options.skipStyleTests = false;
+        else if (arg === "--skip-style-tests") {
+            options.skipStyleTests = true;
         }
         else if (arg === "--keep") {
             options.keep = true;
@@ -94,7 +93,7 @@ Options:
   --skip-release          Skip testing the release/production deployment
   --skip-client           Skip client-side tests, only run server-side checks
   --skip-hmr              Skip hot module replacement (HMR) tests
-  --run-style-tests       Enable stylesheet-related tests (disabled by default)
+  --skip-style-tests      Skip stylesheet-related tests
   --path=PATH             Project directory to test
   --artifact-dir=DIR      Directory to store test artifacts (default: .artifacts)
   --keep                  Keep temporary test directory after tests complete

package/dist/vite/findSsrSpecifiers.d.mts

@@ -1,11 +1,10 @@
 /**
- * Finds __vite_ssr_import__ and __vite_ssr_dynamic_import__ specifiers in the code.
- * @param id The file identifier for language detection.
- * @param code The code to search for SSR imports.
- * @param log Optional logger function for debug output.
- * @returns Object with arrays of static and dynamic import specifiers.
+ * Finds callsites for __vite_ssr_import__ and __vite_ssr_dynamic_import__ with their ranges.
+ * The returned ranges can be used with MagicString to overwrite the entire call expression.
  */
-export declare function findSsrImportSpecifiers(id: string, code: string, log?: (...args: any[]) => void): {
-    imports: string[];
-    dynamicImports: string[];
-};
+export declare function findSsrImportCallSites(id: string, code: string, log?: (...args: any[]) => void): Array<{
+    start: number;
+    end: number;
+    specifier: string;
+    kind: "import" | "dynamic_import";
+}>;

package/dist/vite/findSsrSpecifiers.mjs

@@ -1,67 +1,69 @@
 import { parse as sgParse, Lang as SgLang, Lang } from "@ast-grep/napi";
 import path from "path";
 /**
- * Finds __vite_ssr_import__ and __vite_ssr_dynamic_import__ specifiers in the code.
- * @param id The file identifier for language detection.
- * @param code The code to search for SSR imports.
- * @param log Optional logger function for debug output.
- * @returns Object with arrays of static and dynamic import specifiers.
+ * Finds callsites for __vite_ssr_import__ and __vite_ssr_dynamic_import__ with their ranges.
+ * The returned ranges can be used with MagicString to overwrite the entire call expression.
  */
-export function findSsrImportSpecifiers(id, code, log) {
+export function findSsrImportCallSites(id, code, log) {
     const ext = path.extname(id).toLowerCase();
     const lang = ext === ".tsx" || ext === ".jsx" ? Lang.Tsx : SgLang.TypeScript;
     const logger = process.env.VERBOSE ? (log ?? (() => { })) : () => { };
-    const imports = [];
-    const dynamicImports = [];
+    const results = [];
     try {
         const root = sgParse(lang, code);
         const patterns = [
             {
                 pattern: `__vite_ssr_import__("$SPECIFIER")`,
-                list: imports,
+                kind: "import",
             },
             {
                 pattern: `__vite_ssr_import__('$SPECIFIER')`,
-                list: imports,
+                kind: "import",
             },
             {
                 pattern: `__vite_ssr_dynamic_import__("$SPECIFIER")`,
-                list: dynamicImports,
+                kind: "dynamic_import",
             },
             {
                 pattern: `__vite_ssr_dynamic_import__('$SPECIFIER')`,
-                list: dynamicImports,
+                kind: "dynamic_import",
             },
             {
                 pattern: `__vite_ssr_import__("$SPECIFIER", $$$REST)`,
-                list: imports,
+                kind: "import",
             },
             {
                 pattern: `__vite_ssr_import__('$SPECIFIER', $$$REST)`,
-                list: imports,
+                kind: "import",
             },
             {
                 pattern: `__vite_ssr_dynamic_import__("$SPECIFIER", $$$REST)`,
-                list: dynamicImports,
+                kind: "dynamic_import",
             },
             {
                 pattern: `__vite_ssr_dynamic_import__('$SPECIFIER', $$$REST)`,
-                list: dynamicImports,
+                kind: "dynamic_import",
             },
         ];
-        for (const { pattern, list } of patterns) {
+        for (const { pattern, kind } of patterns) {
             const matches = root.root().findAll(pattern);
             for (const match of matches) {
                 const specifier = match.getMatch("SPECIFIER")?.text();
                 if (specifier) {
-                    list.push(specifier);
-                    logger(`Found SSR import specifier: %s in pattern: %s`, specifier, pattern);
+                    const range = match.range();
+                    results.push({
+                        start: range.start.index,
+                        end: range.end.index,
+                        specifier,
+                        kind,
+                    });
+                    logger(`Found SSR import callsite: %s [%s] at %d-%d`, specifier, kind, range.start.index, range.end.index);
                 }
             }
         }
     }
     catch (err) {
-        logger("Error parsing code for SSR imports: %O", err);
+        logger("Error parsing code for SSR import callsites: %O", err);
     }
-    return { imports, dynamicImports };
+    return results;
 }

package/dist/vite/manifestPlugin.mjs

@@ -4,36 +4,6 @@ import { normalizeModulePath } from "../lib/normalizeModulePath.mjs";
 const log = debug("rwsdk:vite:manifest-plugin");
 const virtualModuleId = "virtual:rwsdk:manifest.js";
 const resolvedVirtualModuleId = "\0" + virtualModuleId;
-const getCssForModule = (server, moduleId, css) => {
-    const stack = [moduleId];
-    const visited = new Set();
-    while (stack.length > 0) {
-        const currentModuleId = stack.pop();
-        if (visited.has(currentModuleId)) {
-            continue;
-        }
-        visited.add(currentModuleId);
-        const moduleNode = server.environments.client.moduleGraph.getModuleById(currentModuleId);
-        if (!moduleNode) {
-            continue;
-        }
-        for (const importedModule of moduleNode.importedModules) {
-            if (importedModule.url.endsWith(".css")) {
-                const absolutePath = importedModule.file;
-                css.add({
-                    url: importedModule.url,
-                    // The `ssrTransformResult` has the CSS content, because the default
-                    // transform for CSS is to a string of the CSS content.
-                    content: importedModule.ssrTransformResult?.code ?? "",
-                    absolutePath,
-                });
-            }
-            if (importedModule.id) {
-                stack.push(importedModule.id);
-            }
-        }
-    }
-};
 export const manifestPlugin = ({ manifestPath, }) => {
     let isBuild = false;
     let root;
@@ -106,46 +76,5 @@ export const manifestPlugin = ({ manifestPath, }) => {
                 },
             });
         },
-        configureServer(server) {
-            log("Configuring server middleware for manifest");
-            server.middlewares.use("/__rwsdk_manifest", async (req, res, next) => {
-                log("Manifest request received: %s", req.url);
-                try {
-                    const url = new URL(req.url, `http://${req.headers.host}`);
-                    const scripts = JSON.parse(url.searchParams.get("scripts") || "[]");
-                    process.env.VERBOSE && log("Transforming scripts: %o", scripts);
-                    for (const script of scripts) {
-                        await server.environments.client.transformRequest(script);
-                    }
-                    const manifest = {};
-                    log("Building manifest from module graph");
-                    for (const file of server.environments.client.moduleGraph.fileToModulesMap.keys()) {
-                        const modules = server.environments.client.moduleGraph.getModulesByFile(file);
-                        if (!modules) {
-                            continue;
-                        }
-                        for (const module of modules) {
-                            if (module.file) {
-                                const css = new Set();
-                                getCssForModule(server, module.id, css);
-                                manifest[normalizeModulePath(module.file, server.config.root)] =
-                                    {
-                                        file: module.url,
-                                        css: Array.from(css),
-                                    };
-                            }
-                        }
-                    }
-                    log("Manifest built successfully");
-                    process.env.VERBOSE && log("Manifest: %o", manifest);
-                    res.setHeader("Content-Type", "application/json");
-                    res.end(JSON.stringify(manifest));
-                }
-                catch (e) {
-                    log("Error building manifest: %o", e);
-                    next(e);
-                }
-            });
-        },
     };
 };

package/dist/vite/miniflareHMRPlugin.mjs

@@ -109,19 +109,19 @@ export const miniflareHMRPlugin = (givenOptions) => [
             let clientDirectiveChanged = false;
             let serverDirectiveChanged = false;
             if (!clientFiles.has(ctx.file) && hasClientDirective) {
-                clientFiles.add(ctx.file);
+                clientFiles.add(normalizeModulePath(ctx.file, givenOptions.rootDir));
                 clientDirectiveChanged = true;
             }
             else if (clientFiles.has(ctx.file) && !hasClientDirective) {
-                clientFiles.delete(ctx.file);
+                clientFiles.delete(normalizeModulePath(ctx.file, givenOptions.rootDir));
                 clientDirectiveChanged = true;
             }
             if (!serverFiles.has(ctx.file) && hasServerDirective) {
-                serverFiles.add(ctx.file);
+                serverFiles.add(normalizeModulePath(ctx.file, givenOptions.rootDir));
                 serverDirectiveChanged = true;
             }
             else if (serverFiles.has(ctx.file) && !hasServerDirective) {
-                serverFiles.delete(ctx.file);
+                serverFiles.delete(normalizeModulePath(ctx.file, givenOptions.rootDir));
                 serverDirectiveChanged = true;
             }
             if (clientDirectiveChanged) {
@@ -129,12 +129,14 @@ export const miniflareHMRPlugin = (givenOptions) => [
                     invalidateModule(ctx.server, environment, "virtual:use-client-lookup.js");
                 });
                 invalidateModule(ctx.server, environment, VIRTUAL_SSR_PREFIX + "/@id/virtual:use-client-lookup.js");
+                invalidateModule(ctx.server, environment, VIRTUAL_SSR_PREFIX + "virtual:use-client-lookup.js");
             }
             if (serverDirectiveChanged) {
                 ["client", "ssr", environment].forEach((environment) => {
                     invalidateModule(ctx.server, environment, "virtual:use-server-lookup.js");
                 });
                 invalidateModule(ctx.server, environment, VIRTUAL_SSR_PREFIX + "/@id/virtual:use-server-lookup.js");
+                invalidateModule(ctx.server, environment, VIRTUAL_SSR_PREFIX + "virtual:use-server-lookup.js");
             }
             // todo(justinvdm, 12 Dec 2024): Skip client references
             const modules = Array.from(ctx.server.environments[environment].moduleGraph.getModulesByFile(ctx.file) ?? []);

package/dist/vite/ssrBridgePlugin.mjs

@@ -1,6 +1,7 @@
 import debug from "debug";
 import { SSR_BRIDGE_PATH } from "../lib/constants.mjs";
-import { findSsrImportSpecifiers } from "./findSsrSpecifiers.mjs";
+import { findSsrImportCallSites } from "./findSsrSpecifiers.mjs";
+import MagicString from "magic-string";
 const log = debug("rwsdk:vite:ssr-bridge-plugin");
 export const VIRTUAL_SSR_PREFIX = "virtual:rwsdk:ssr:";
 export const ssrBridgePlugin = ({ clientFiles, serverFiles, }) => {
@@ -108,35 +109,27 @@ export const ssrBridgePlugin = ({ clientFiles, serverFiles, }) => {
                         return "export default {};";
                     }
                     log("Fetched SSR module code length: %d", code?.length || 0);
-                    const { imports, dynamicImports } = findSsrImportSpecifiers(idForFetch, code || "", log);
-                    const allSpecifiers = [
-                        ...new Set([...imports, ...dynamicImports]),
-                    ].map((id) => id.startsWith("/@id/") ? id.slice("/@id/".length) : id);
-                    const switchCases = allSpecifiers
-                        .map((specifier) => `    case "${specifier}": void import("${VIRTUAL_SSR_PREFIX}${specifier}");`)
-                        .join("\n");
-                    const transformedCode = `
-await (async function(__vite_ssr_import__, __vite_ssr_dynamic_import__) {${code}})(
-  __ssrImport.bind(null, false),
-  __ssrImport.bind(null, true)
-);
-
-function __ssrImport(isDynamic, id, ...args) {
-  id = id.startsWith('/@id/') ? id.slice('/@id/'.length) : id;
-
-  switch (id) {
-${switchCases}
-  }
-
-  return isDynamic
-    ? __vite_ssr_dynamic_import__("/@id/${VIRTUAL_SSR_PREFIX}" + id, ...args)
-    : __vite_ssr_import__("/@id/${VIRTUAL_SSR_PREFIX}" + id, ...args);
-}
-`;
-                    log("Transformed SSR module code length: %d", transformedCode.length);
+                    const s = new MagicString(code || "");
+                    const callsites = findSsrImportCallSites(idForFetch, code || "", log);
+                    for (const site of callsites) {
+                        const normalized = site.specifier.startsWith("/@id/")
+                            ? site.specifier.slice("/@id/".length)
+                            : site.specifier;
+                        // context(justinvdm, 11 Aug 2025):
+                        // - We replace __vite_ssr_import__ and __vite_ssr_dynamic_import__
+                        //   with import() calls so that the module graph can be built
+                        //   correctly (vite looks for imports and import()s to build module
+                        //   graph)
+                        // - We prepend /@id/$VIRTUAL_SSR_PREFIX to the specifier so that we
+                        //   can stay within the SSR subgraph of the worker module graph
+                        const replacement = `import("/@id/${VIRTUAL_SSR_PREFIX}${normalized}")`;
+                        s.overwrite(site.start, site.end, replacement);
+                    }
+                    const out = s.toString();
+                    log("Transformed SSR module code length: %d", out.length);
                     process.env.VERBOSE &&
-                        log("Transformed SSR module code for realId=%s: %s", realId, transformedCode);
-                    return transformedCode;
+                        log("Transformed SSR module code for realId=%s: %s", realId, out);
+                    return out;
                 }
             }
             process.env.VERBOSE && log("No load handling for id=%s", id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwsdk",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.10",
   "description": "Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime",
   "type": "module",
   "bin": {