rwsdk 0.1.0-alpha.9 → 0.1.1

package/dist/runtime/lib/router.js

@@ -186,11 +186,18 @@ export function render(Document, routes,
 /**
  * @param options - Configuration options for rendering.
  * @param options.rscPayload - Toggle the RSC payload that's appended to the Document. Disabling this will mean that interactivity no longer works.
+ * @param options.ssr - Disable sever side rendering for all these routes. This only allow client side rendering`, which requires `rscPayload` to be enabled.
  */
-options = { rscPayload: true }) {
+options = {}) {
+    options = {
+        rscPayload: true,
+        ssr: true,
+        ...options,
+    };
     const documentMiddleware = ({ rw }) => {
         rw.Document = Document;
-        rw.rscPayload = options.rscPayload;
+        rw.rscPayload = options.rscPayload ?? true;
+        rw.ssr = options.ssr ?? true;
     };
     return [documentMiddleware, ...routes];
 }

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

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

package/dist/runtime/register/ssr.js

@@ -1,5 +1,18 @@
+import memoize from "lodash/memoize";
 import { createServerReference as baseCreateServerReference } from "react-server-dom-webpack/client.edge";
-import { getServerModuleExport } from "../imports/worker.js";
+export const loadServerModule = memoize(async (id) => {
+    const { useServerLookup } = await import("virtual:use-server-lookup");
+    const moduleFn = useServerLookup[id];
+    if (!moduleFn) {
+        throw new Error(`(worker) No module found for '${id}' in module lookup for "use server" directive`);
+    }
+    return await moduleFn();
+});
+export const getServerModuleExport = async (id) => {
+    const [file, name] = id.split("#");
+    const module = await loadServerModule(file);
+    return module[name];
+};
 const ssrCallServer = async (id, args) => {
     const action = await getServerModuleExport(id);
     if (typeof action !== "function") {

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

@@ -1,4 +1,4 @@
 export declare function registerServerReference(action: Function, id: string, name: string): Function;
-export declare function registerClientReference<Target extends Record<string, any>>(id: string, exportName: string): () => null;
+export declare function registerClientReference<Target extends Record<string, any>>(id: string, exportName: string, value: any): any;
 export declare function __smokeTestActionHandler(timestamp?: number): Promise<unknown>;
 export declare function rscActionHandler(req: Request): Promise<unknown>;

package/dist/runtime/register/worker.js

@@ -8,9 +8,12 @@ export function registerServerReference(action, id, name) {
     // Note: We no longer need to register in a Map since we use virtual lookup
     return baseRegisterServerReference(action, id, name);
 }
-export function registerClientReference(id, exportName) {
+export function registerClientReference(id, exportName, value) {
+    const wrappedValue = (value && typeof value === "function") || typeof value === "object"
+        ? value
+        : () => null;
     const reference = baseRegisterClientReference({}, id, exportName);
-    return Object.defineProperties(() => null, {
+    return Object.defineProperties(wrappedValue, {
         ...Object.getOwnPropertyDescriptors(reference),
         $$async: { value: true },
         $$isClientReference: { value: true },

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

@@ -1,7 +1,8 @@
 import { type DocumentProps } from "../lib/router";
 import { type RequestInfo } from "../requestInfo/types";
-export declare const renderRscThenableToHtmlStream: ({ thenable, Document, requestInfo, }: {
+export declare const renderRscThenableToHtmlStream: ({ thenable, Document, requestInfo, shouldSSR, }: {
     thenable: any;
     Document: React.FC<DocumentProps>;
     requestInfo: RequestInfo;
+    shouldSSR: boolean;
 }) => Promise<import("react-dom/server").ReactDOMServerReadableStream>;

package/dist/runtime/render/renderRscThenableToHtmlStream.js

@@ -1,9 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { use } from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
-export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, }) => {
+export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, shouldSSR, }) => {
     const Component = () => {
-        return (_jsx(Document, { ...requestInfo, children: use(thenable).node }));
+        const node = use(thenable).node;
+        // todo(justinvdm, 18 Jun 2025): We can build on this later to allow users
+        // surface context. e.g:
+        // * we assign `user: requestInfo.clientCtx` here
+        // * user populates requestInfo.clientCtx on worker side
+        // * user can import a read only `import { clientCtx } from "rwsdk/client"`
+        // on client side
+        const clientContext = {
+            rw: {
+                ssr: shouldSSR,
+            },
+        };
+        return (_jsxs(Document, { ...requestInfo, children: [_jsx("script", { nonce: requestInfo.rw.nonce, dangerouslySetInnerHTML: {
+                        __html: `globalThis.__RWSDK_CONTEXT = ${JSON.stringify(clientContext)}`,
+                    } }), _jsx("div", { id: "hydrate-root", children: node })] }));
     };
     return await renderToReadableStream(_jsx(Component, {}), {
         nonce: requestInfo.rw.nonce,

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

@@ -0,0 +1,9 @@
+import { ReactElement, FC } from "react";
+import { DocumentProps } from "../lib/router";
+export interface RenderToStreamOptions {
+    Document?: FC<DocumentProps>;
+    injectRSCPayload?: boolean;
+    onError?: (error: unknown) => void;
+}
+export declare const IdentityDocument: FC<DocumentProps>;
+export declare const renderToStream: (element: ReactElement, { Document, injectRSCPayload: shouldInjectRSCPayload, onError, }?: RenderToStreamOptions) => Promise<ReadableStream>;

package/dist/runtime/render/renderToStream.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { renderToRscStream } from "./renderToRscStream";
+import { transformRscToHtmlStream } from "./transformRscToHtmlStream";
+import { requestInfo } from "../requestInfo/worker";
+import { injectRSCPayload } from "rsc-html-stream/server";
+export const IdentityDocument = ({ children }) => (_jsx(_Fragment, { children: children }));
+export const renderToStream = async (element, { Document = IdentityDocument, injectRSCPayload: shouldInjectRSCPayload = false, onError, } = {}) => {
+    let rscStream = renderToRscStream({
+        node: element,
+        actionResult: null,
+        onError,
+    });
+    if (shouldInjectRSCPayload) {
+        const [rscPayloadStream1, rscPayloadStream2] = rscStream.tee();
+        rscStream = rscPayloadStream1;
+        rscStream = rscStream.pipeThrough(injectRSCPayload(rscPayloadStream2, {
+            nonce: requestInfo.rw.nonce,
+        }));
+    }
+    const htmlStream = await transformRscToHtmlStream({
+        stream: rscStream,
+        Document,
+        requestInfo,
+    });
+    return htmlStream;
+};

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

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+import { DocumentProps } from "../lib/router";
+export interface RenderToStringOptions {
+    Document?: FC<DocumentProps>;
+    injectRSCPayload?: boolean;
+}
+export declare const renderToString: (element: ReactElement, options?: RenderToStringOptions) => Promise<string>;

package/dist/runtime/render/renderToString.js

@@ -0,0 +1,26 @@
+import { renderToStream } from "./renderToStream";
+export const renderToString = async (element, options) => {
+    const stream = await new Promise((resolve, reject) => renderToStream(element, {
+        ...options,
+        onError: reject,
+    })
+        .then(resolve)
+        .catch(reject));
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+    let result = "";
+    try {
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+                break;
+            result += decoder.decode(value, { stream: true });
+        }
+        // Flush any remaining bytes
+        result += decoder.decode();
+        return result;
+    }
+    finally {
+        reader.releaseLock();
+    }
+};

package/dist/runtime/render/transformRscToHtmlStream.js

@@ -13,5 +13,6 @@ export const transformRscToHtmlStream = ({ stream, Document, requestInfo, }) =>
         thenable,
         Document,
         requestInfo,
+        shouldSSR: requestInfo.rw.ssr,
     });
 };

package/dist/runtime/worker.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { transformRscToHtmlStream } from "./render/transformRscToHtmlStream";
 import { renderToRscStream } from "./render/renderToRscStream";
-import { ssrWebpackRequire } from "rwsdk/__ssr_bridge";
 import { rscActionHandler } from "./register/worker";
 import { injectRSCPayload } from "rsc-html-stream/server";
 import { ErrorResponse } from "./error";
@@ -9,6 +8,7 @@ import { getRequestInfo, runWithRequestInfo, runWithRequestInfoOverrides, } from
 import { defineRoutes } from "./lib/router";
 import { generateNonce } from "./lib/utils";
 import { IS_DEV } from "./constants";
+import { ssrWebpackRequire } from "./imports/worker";
 export const defineApp = (routes) => {
     return {
         fetch: async (request, env, cf) => {
@@ -39,6 +39,8 @@ export const defineApp = (routes) => {
                     Document: DefaultDocument,
                     nonce: generateNonce(),
                     rscPayload: true,
+                    ssr: true,
+                    databases: new Map(),
                 };
                 const outerRequestInfo = {
                     request,
@@ -87,7 +89,8 @@ export const defineApp = (routes) => {
                         actionResult = await rscActionHandler(request);
                     }
                     const pageElement = createPageElement(requestInfo, Page);
-                    const rscPayloadStream = renderToRscStream({
+                    const { rscPayload: shouldInjectRSCPayload } = rw;
+                    let rscPayloadStream = renderToRscStream({
                         node: pageElement,
                         actionResult: actionResult instanceof Response ? null : actionResult,
                         onError,
@@ -99,17 +102,21 @@ export const defineApp = (routes) => {
                             },
                         });
                     }
-                    const [rscPayloadStream1, rscPayloadStream2] = rscPayloadStream.tee();
-                    const htmlStream = await transformRscToHtmlStream({
-                        stream: rscPayloadStream1,
+                    let injectRSCPayloadStream;
+                    if (shouldInjectRSCPayload) {
+                        const [rscPayloadStream1, rscPayloadStream2] = rscPayloadStream.tee();
+                        rscPayloadStream = rscPayloadStream1;
+                        injectRSCPayloadStream = injectRSCPayload(rscPayloadStream2, {
+                            nonce: rw.nonce,
+                        });
+                    }
+                    let html = await transformRscToHtmlStream({
+                        stream: rscPayloadStream,
                         Document: rw.Document,
                         requestInfo: requestInfo,
                     });
-                    let html = htmlStream;
-                    if (rw.rscPayload) {
-                        html = htmlStream.pipeThrough(injectRSCPayload(rscPayloadStream2, {
-                            nonce: rw.nonce,
-                        }));
+                    if (injectRSCPayloadStream) {
+                        html = html.pipeThrough(injectRSCPayloadStream);
                     }
                     return new Response(html, {
                         headers: {

package/dist/scripts/debug-sync.mjs

@@ -8,12 +8,14 @@ export const debugSync = async (opts) => {
     const syncCommand = `echo 🏗️ rebuilding... && pnpm build && rm -rf ${targetDir}/node_modules/rwsdk/dist ${targetDir}/node_modules/rwsdk/package.json && echo 📁 syncing sdk from ${process.cwd()} to ${targetDir}/node_modules/rwsdk/... && cp -r package.json dist ${targetDir}/node_modules/rwsdk/ && echo ✅ done syncing`;
     // Run initial sync
     await $({ stdio: "inherit", shell: true }) `${syncCommand}`;
-    console.log("🧹 Cleaning Vite cache...");
-    await $({
-        stdio: "inherit",
-        shell: true,
-        cwd: targetDir,
-    }) `npm run clean:vite`;
+    if (!process.env.NO_CLEAN_VITE) {
+        console.log("🧹 Cleaning Vite cache...");
+        await $({
+            stdio: "inherit",
+            shell: true,
+            cwd: targetDir,
+        }) `rm -rf node_modules/.vite`;
+    }
     // If dev flag is present, clean vite cache and start dev server
     if (dev) {
         console.log("🚀 Starting dev server...");

package/dist/scripts/worker-run.mjs

@@ -41,6 +41,7 @@ export const runWorkerScript = async (relativeScriptPath) => {
             plugins: [
                 redwood({
                     configPath: tmpWorkerPath.path,
+                    includeCloudflarePlugin: true,
                     entry: {
                         worker: scriptPath,
                     },

package/dist/vite/configPlugin.d.mts

@@ -1,10 +1,10 @@
 import { Plugin } from "vite";
 export declare const cloudflareBuiltInModules: string[];
 export declare const externalModules: string[];
-export declare const configPlugin: ({ mode, silent, projectRootDir, clientEntryPathname, workerEntryPathname, }: {
+export declare const configPlugin: ({ mode, silent, projectRootDir, clientEntryPathnames, workerEntryPathname, }: {
     mode: "development" | "production";
     silent: boolean;
     projectRootDir: string;
-    clientEntryPathname: string;
+    clientEntryPathnames: string[];
     workerEntryPathname: string;
 }) => Plugin;

package/dist/vite/configPlugin.mjs

@@ -15,7 +15,7 @@ export const externalModules = [
     ...builtinModules,
     ...builtinModules.map((m) => `node:${m}`),
 ];
-export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname, workerEntryPathname, }) => ({
+export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathnames, workerEntryPathname, }) => ({
     name: "rwsdk:config",
     config: (_, { command }) => {
         const baseConfig = {
@@ -39,9 +39,7 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                         outDir: resolve(projectRootDir, "dist", "client"),
                         manifest: true,
                         rollupOptions: {
-                            input: {
-                                client: clientEntryPathname,
-                            },
+                            input: clientEntryPathnames,
                         },
                     },
                     define: {
@@ -49,6 +47,7 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                     },
                     optimizeDeps: {
                         noDiscovery: false,
+                        include: ["rwsdk/client"],
                         esbuildOptions: {
                             jsx: "automatic",
                             jsxImportSource: "react",
@@ -58,23 +57,13 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                             },
                         },
                     },
+                    resolve: {
+                        conditions: ["browser", "module"],
+                    },
                 },
                 ssr: {
                     resolve: {
-                        conditions: [
-                            "workerd",
-                            // context(justinvdm, 11 Jun 2025): Some packages meant for cloudflare workers, yet
-                            // their deps have only node import conditions, e.g. `agents` package (meant for CF),
-                            // has `pkce-challenge` package as a dep, which has only node import conditions.
-                            // https://github.com/crouchcd/pkce-challenge/blob/master/package.json#L17
-                            //
-                            // Once the transformed code for this environment is in turn processed in the `worker` environment,
-                            // @cloudflare/vite-plugin should take care of any relevant polyfills for deps with
-                            // node builtins imports that can be polyfilled though, so it is worth us including this condition here.
-                            // However, it does mean we will try to run packages meant for node that cannot be run on cloudflare workers.
-                            // That's the trade-off, but arguably worth it. (context(justinvdm, 11 Jun 2025))
-                            "node",
-                        ],
+                        conditions: ["workerd", "module", "browser"],
                         noExternal: true,
                     },
                     define: {
@@ -84,11 +73,10 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                         noDiscovery: false,
                         entries: [workerEntryPathname],
                         exclude: externalModules,
-                        include: ["rwsdk/__ssr_bridge"],
+                        include: ["rwsdk/__ssr", "rwsdk/__ssr_bridge"],
                         esbuildOptions: {
                             jsx: "automatic",
                             jsxImportSource: "react",
-                            conditions: ["workerd"],
                             plugins: [],
                         },
                     },
@@ -108,6 +96,7 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                         conditions: [
                             "workerd",
                             "react-server",
+                            "module",
                             // context(justinvdm, 11 Jun 2025): Some packages meant for cloudflare workers, yet
                             // their deps have only node import conditions, e.g. `agents` package (meant for CF),
                             // has `pkce-challenge` package as a dep, which has only node import conditions.
@@ -126,7 +115,7 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                     },
                     optimizeDeps: {
                         noDiscovery: false,
-                        include: [],
+                        include: ["rwsdk/worker"],
                         exclude: [],
                         entries: [workerEntryPathname],
                         esbuildOptions: {

package/dist/vite/createDirectiveLookupPlugin.d.mts

@@ -1,5 +1,6 @@
 import { Plugin } from "vite";
 interface DirectiveLookupConfig {
+    kind: "client" | "server";
     directive: "use client" | "use server";
     virtualModuleName: string;
     exportName: string;

package/dist/vite/createDirectiveLookupPlugin.mjs

@@ -1,26 +1,19 @@
 import MagicString from "magic-string";
 import path from "path";
 import { readFile } from "fs/promises";
-import { glob } from "glob";
 import debug from "debug";
 import { normalizeModulePath } from "./normalizeModulePath.mjs";
-import { ensureAliasArray } from "./ensureAliasArray.mjs";
 import { pathExists } from "fs-extra";
 import { stat } from "fs/promises";
 import { getSrcPaths } from "../lib/getSrcPaths.js";
+import { hasDirective } from "./hasDirective.mjs";
 export const findFilesContainingDirective = async ({ projectRootDir, files, directive, debugNamespace, }) => {
     const log = debug(debugNamespace);
     const verboseLog = debug(`verbose:${debugNamespace}`);
     log("Starting search for '%s' files in projectRootDir=%s", directive, projectRootDir);
-    const filesOutsideNodeModules = await getSrcPaths(projectRootDir);
-    const filesInsideNodeModules = await glob("**/node_modules/**/*.{js,mjs,cjs}", {
-        cwd: projectRootDir,
-        absolute: true,
-        nodir: true,
-    });
-    const allFiles = [...filesOutsideNodeModules, ...filesInsideNodeModules];
-    log("Found %d files to scan for '%s' directive", allFiles.length, directive);
-    for (const file of allFiles) {
+    const filesToScan = await getSrcPaths(projectRootDir);
+    log("Found %d files to scan for '%s' directive", filesToScan.length, directive);
+    for (const file of filesToScan) {
         try {
             const stats = await stat(file);
             if (!stats.isFile()) {
@@ -29,18 +22,10 @@ export const findFilesContainingDirective = async ({ projectRootDir, files, dire
             }
             verboseLog("Scanning file: %s", file);
             const content = await readFile(file, "utf-8");
-            const lines = content.split("\n");
-            for (const line of lines) {
-                const trimmedLine = line.trim();
-                if (trimmedLine.length > 0) {
-                    if (trimmedLine.startsWith(`"${directive}"`) ||
-                        trimmedLine.startsWith(`'${directive}'`)) {
-                        const normalizedPath = normalizeModulePath(projectRootDir, file);
-                        log("Found '%s' directive in file: %s -> %s", directive, file, normalizedPath);
-                        files.add(normalizedPath);
-                    }
-                    break;
-                }
+            if (hasDirective(content, directive)) {
+                const normalizedPath = normalizeModulePath(projectRootDir, file);
+                log("Found '%s' directive in file: %s -> %s", directive, file, normalizedPath);
+                files.add(normalizedPath);
             }
         }
         catch (error) {
@@ -48,37 +33,79 @@ export const findFilesContainingDirective = async ({ projectRootDir, files, dire
         }
     }
     log("Completed scan. Found %d %s files total", files.size, directive);
+    verboseLog("Found files for %s: %j", directive, Array.from(files));
 };
-const resolveOptimizedDep = async (projectRootDir, filePath, environment, debugNamespace) => {
+const resolveOptimizedDep = async (projectRootDir, id, environment, debugNamespace) => {
     const log = debug(debugNamespace);
     const verboseLog = debug(`verbose:${debugNamespace}`);
     try {
-        const getDepsDir = (env) => env === "client" ? "deps" : `deps_${env}`;
-        const getManifestPath = (env) => path.join(projectRootDir, "node_modules", ".vite", getDepsDir(env), "_metadata.json");
-        const getOptimizedPath = (env, fileName) => path.join("/", "node_modules", ".vite", getDepsDir(env), fileName);
-        const manifestPath = getManifestPath(environment);
-        verboseLog("Checking for manifest at: %s", manifestPath);
+        const depsDir = environment === "client" ? "deps" : `deps_${environment}`;
+        const nodeModulesDepsDirPath = path.join("node_modules", ".vite", depsDir);
+        const depsDirPath = path.join(projectRootDir, nodeModulesDepsDirPath);
+        const manifestPath = path.join(depsDirPath, "_metadata.json");
+        log("Checking for manifest at: %s", manifestPath);
         const manifestExists = await pathExists(manifestPath);
         if (!manifestExists) {
-            verboseLog("Manifest not found at %s", manifestPath);
+            log("Manifest not found at %s", manifestPath);
             return undefined;
         }
         const manifestContent = await readFile(manifestPath, "utf-8");
         const manifest = JSON.parse(manifestContent);
-        if (manifest.optimized && manifest.optimized[filePath]) {
-            const optimizedFile = manifest.optimized[filePath].file;
-            const optimizedPath = getOptimizedPath(environment, optimizedFile);
-            log("Found optimized dependency: %s -> %s", filePath, optimizedPath);
+        if (manifest.optimized && manifest.optimized[id]) {
+            const optimizedFile = manifest.optimized[id].file;
+            const optimizedPath = path.join("/", nodeModulesDepsDirPath, optimizedFile);
+            log("Found optimized dependency: filePath=%s, optimizedPath=%s", id, optimizedPath);
             return optimizedPath;
         }
-        verboseLog("File %s not found in optimized dependencies", filePath);
+        verboseLog("File not found in optimized dependencies: id=%s", id);
         return undefined;
     }
     catch (error) {
-        verboseLog("Error resolving optimized dependency for %s: %s", filePath, error);
+        verboseLog("Error resolving optimized dependency for id=%s: %s", id, error);
         return undefined;
     }
 };
+const addOptimizedDepsEntries = async ({ projectRootDir, directive, environment, debugNamespace, files, }) => {
+    const log = debug(debugNamespace);
+    const verboseLog = debug(`verbose:${debugNamespace}`);
+    try {
+        const depsDir = environment === "client" ? "deps" : `deps_${environment}`;
+        const depsDirPath = path.join(projectRootDir, "node_modules", ".vite", depsDir);
+        const manifestPath = path.join(depsDirPath, "_metadata.json");
+        verboseLog("Checking for manifest at: %s", manifestPath);
+        const manifestExists = await pathExists(manifestPath);
+        if (!manifestExists) {
+            verboseLog("Manifest not found at %s", manifestPath);
+            return;
+        }
+        const manifestContent = await readFile(manifestPath, "utf-8");
+        const manifest = JSON.parse(manifestContent);
+        for (const entryId of Object.keys(manifest.optimized)) {
+            if (entryId.startsWith("/node_modules/")) {
+                const srcPath = manifest.optimized[entryId].src;
+                const resolvedSrcPath = path.resolve(projectRootDir, "node_modules", ".vite", "deps", srcPath);
+                let contents;
+                try {
+                    contents = await readFile(resolvedSrcPath, "utf-8");
+                }
+                catch (error) {
+                    verboseLog("Error reading file %s: %s", resolvedSrcPath, error);
+                    continue;
+                }
+                if (hasDirective(contents, directive)) {
+                    log("Adding optimized entry to files: %s", entryId);
+                    files.add(entryId);
+                }
+                else {
+                    log("Skipping optimized entry %s because it does not contain the '%s' directive", entryId, directive);
+                }
+            }
+        }
+    }
+    catch (error) {
+        verboseLog("Error adding optimized deps entries: %s", error);
+    }
+};
 export const createDirectiveLookupPlugin = async ({ projectRootDir, files, config, }) => {
     const debugNamespace = `rwsdk:vite:${config.pluginName}`;
     const log = debug(debugNamespace);
@@ -91,14 +118,26 @@ export const createDirectiveLookupPlugin = async ({ projectRootDir, files, confi
         directive: config.directive,
         debugNamespace,
     });
+    let devServer;
     return {
         name: `rwsdk:${config.pluginName}`,
         config(_, { command, isPreview }) {
             isDev = !isPreview && command === "serve";
             log("Development mode: %s", isDev);
         },
-        configEnvironment(env, viteConfig) {
+        configureServer(server) {
+            devServer = server;
+        },
+        async configEnvironment(env, viteConfig) {
             log("Configuring environment: env=%s", env);
+            // Add optimized deps entries that match our pattern
+            await addOptimizedDepsEntries({
+                projectRootDir,
+                files,
+                directive: config.directive,
+                environment: env,
+                debugNamespace,
+            });
             viteConfig.optimizeDeps ??= {};
             viteConfig.optimizeDeps.esbuildOptions ??= {};
             viteConfig.optimizeDeps.esbuildOptions.plugins ??= [];
@@ -125,26 +164,16 @@ export const createDirectiveLookupPlugin = async ({ projectRootDir, files, confi
             if (shouldOptimizeForEnv) {
                 log("Applying optimizeDeps and aliasing for environment: %s", env);
                 viteConfig.optimizeDeps.include ??= [];
-                const aliases = ensureAliasArray(viteConfig);
                 for (const file of files) {
                     const actualFilePath = path.join(projectRootDir, file);
-                    if (file.includes("/node_modules/")) {
-                        verboseLog("Adding to optimizeDeps.include: %s -> %s", file);
-                        viteConfig.optimizeDeps.include.push(file);
-                        const findRegex = new RegExp(`^${file.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")}$`);
-                        aliases.push({ find: findRegex, replacement: actualFilePath });
-                        verboseLog("Added alias for `node_modules` module matching directive in env=%s: %s -> %s", env, file, actualFilePath);
-                    }
-                    else {
-                        verboseLog("Adding to optimizeDeps.entries: %s", actualFilePath);
-                        const entries = Array.isArray(viteConfig.optimizeDeps.entries)
-                            ? viteConfig.optimizeDeps.entries
-                            : [].concat(viteConfig.optimizeDeps.entries ?? []);
-                        viteConfig.optimizeDeps.entries = entries;
-                        entries.push(actualFilePath);
-                    }
+                    verboseLog("Adding to optimizeDeps.entries: %s", actualFilePath);
+                    const entries = Array.isArray(viteConfig.optimizeDeps.entries)
+                        ? viteConfig.optimizeDeps.entries
+                        : [].concat(viteConfig.optimizeDeps.entries ?? []);
+                    viteConfig.optimizeDeps.entries = entries;
+                    entries.push(actualFilePath);
                 }
-                log("Environment configuration complete for env=%s with %d optimizeDeps includes and %d aliases", env, Array.from(files).filter((f) => f.includes("/node_modules/")).length, files.size);
+                log("Environment configuration complete for env=%s", env);
             }
             else {
                 log("Skipping optimizeDeps and aliasing for environment: %s", env);
@@ -155,18 +184,20 @@ export const createDirectiveLookupPlugin = async ({ projectRootDir, files, confi
             if (source === config.virtualModuleName ||
                 source === `/@id/${config.virtualModuleName}`) {
                 log("Resolving %s module", config.virtualModuleName);
-                return config.virtualModuleName;
+                // context(justinvdm, 16 Jun 2025): Include .js extension
+                // so it goes through vite processing chain
+                return config.virtualModuleName + ".js";
             }
             verboseLog("No resolution for id=%s", source);
         },
         async load(id) {
             verboseLog("Loading id=%s", id);
-            if (id === config.virtualModuleName) {
+            if (id === config.virtualModuleName + ".js") {
                 log("Loading %s module with %d files", config.virtualModuleName, files.size);
                 const environment = this.environment?.name || "client";
                 log("Current environment: %s, isDev: %s", environment, isDev);
                 const optimizedDeps = {};
-                if (isDev) {
+                if (isDev && devServer) {
                     for (const file of files) {
                         const resolvedPath = await resolveOptimizedDep(projectRootDir, file, environment, debugNamespace);
                         if (resolvedPath) {

package/dist/vite/devServerTimingPlugin.d.mts

@@ -0,0 +1,2 @@
+import { Plugin } from "vite";
+export declare const devServerTimingPlugin: () => Plugin;