rwsdk 0.1.0-alpha.8 → 0.1.0

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

@@ -1,51 +1,56 @@
 import React from "react";
 import { RequestInfo } from "../requestInfo/types";
-export type DocumentProps = RequestInfo & {
+import type { Kysely } from "kysely";
+export type DocumentProps<T extends RequestInfo = RequestInfo> = T & {
     children: React.ReactNode;
 };
-export type LayoutProps = {
+export type LayoutProps<T extends RequestInfo = RequestInfo> = {
     children?: React.ReactNode;
-    requestInfo?: RequestInfo;
+    requestInfo?: T;
 };
 export type RwContext = {
     nonce: string;
-    Document: React.FC<DocumentProps>;
+    Document: React.FC<DocumentProps<any>>;
     rscPayload: boolean;
-    layouts?: React.FC<LayoutProps>[];
+    ssr: boolean;
+    layouts?: React.FC<LayoutProps<any>>[];
+    databases: Map<string, Kysely<any>>;
 };
-export type RouteMiddleware = (requestInfo: RequestInfo) => Response | Promise<Response> | void | Promise<void> | Promise<Response | void>;
-type RouteFunction = (requestInfo: RequestInfo) => Response | Promise<Response>;
+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>;
 type MaybePromise<T> = T | Promise<T>;
-type RouteComponent = (requestInfo: RequestInfo) => MaybePromise<React.JSX.Element | Response>;
-type RouteHandler = RouteFunction | RouteComponent | [...RouteMiddleware[], RouteFunction | RouteComponent];
-export type Route = RouteMiddleware | RouteDefinition | Array<Route>;
-export type RouteDefinition = {
+type RouteComponent<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<React.JSX.Element | Response>;
+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> = {
     path: string;
-    handler: RouteHandler;
-    layouts?: React.FC<LayoutProps>[];
+    handler: RouteHandler<T>;
+    layouts?: React.FC<LayoutProps<T>>[];
 };
-export declare function matchPath(routePath: string, requestPath: string): RequestInfo["params"] | null;
-export declare function defineRoutes(routes: Route[]): {
-    routes: Route[];
+export declare function matchPath<T extends RequestInfo = RequestInfo>(routePath: string, requestPath: string): T["params"] | null;
+export declare function defineRoutes<T extends RequestInfo = RequestInfo>(routes: Route<T>[]): {
+    routes: Route<T>[];
     handle: ({ request, renderPage, getRequestInfo, onError, runWithRequestInfoOverrides, }: {
         request: Request;
-        renderPage: (requestInfo: RequestInfo, Page: React.FC, onError: (error: unknown) => void) => Promise<Response>;
-        getRequestInfo: () => RequestInfo;
+        renderPage: (requestInfo: T, Page: React.FC, onError: (error: unknown) => void) => Promise<Response>;
+        getRequestInfo: () => T;
         onError: (error: unknown) => void;
-        runWithRequestInfoOverrides: <Result>(overrides: Partial<RequestInfo>, fn: () => Promise<Result>) => Promise<Result>;
+        runWithRequestInfoOverrides: <Result>(overrides: Partial<T>, fn: () => Promise<Result>) => Promise<Result>;
     }) => Response | Promise<Response>;
 };
-export declare function route(path: string, handler: RouteHandler): RouteDefinition;
-export declare function index(handler: RouteHandler): RouteDefinition;
-export declare function prefix(prefixPath: string, routes: Route[]): Route[];
-export declare function layout(LayoutComponent: React.FC<LayoutProps>, routes: Route[]): Route[];
-export declare function render(Document: React.FC<DocumentProps>, routes: Route[], 
+export declare function route<T extends RequestInfo = RequestInfo>(path: string, handler: RouteHandler<T>): RouteDefinition<T>;
+export declare function index<T extends RequestInfo = RequestInfo>(handler: RouteHandler<T>): RouteDefinition<T>;
+export declare function prefix<T extends RequestInfo = RequestInfo>(prefixPath: string, routes: Route<T>[]): Route<T>[];
+export declare function layout<T extends RequestInfo = RequestInfo>(LayoutComponent: React.FC<LayoutProps<T>>, routes: Route<T>[]): Route<T>[];
+export declare function render<T extends RequestInfo = RequestInfo>(Document: React.FC<DocumentProps<T>>, routes: Route<T>[], 
 /**
  * @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: boolean;
-}): Route[];
+    rscPayload?: boolean;
+    ssr?: boolean;
+}): Route<T>[];
 export declare const isClientReference: (Component: React.FC<any>) => boolean;
 export {};

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.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { RequestInfo, DefaultAppContext } from "./requestInfo/types";
 import { Route } from "./lib/router";
 declare global {
     type Env = {
@@ -6,7 +7,7 @@ declare global {
         DB: D1Database;
     };
 }
-export declare const defineApp: (routes: Route[]) => {
+export declare const defineApp: <T extends RequestInfo = RequestInfo<any, DefaultAppContext>>(routes: Route<T>[]) => {
     fetch: (request: Request, env: Env, cf: ExecutionContext) => Promise<Response>;
 };
 export declare const SmokeTestWrapper: React.FC<{

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) => {
@@ -31,13 +31,16 @@ export const defineApp = (routes) => {
             }
             try {
                 const url = new URL(request.url);
-                const isRSCRequest = url.searchParams.has("__rsc");
+                const isRSCRequest = url.searchParams.has("__rsc") ||
+                    request.headers.get("accept")?.includes("text/x-component");
                 const isSmokeTest = url.searchParams.has("__smoke_test");
                 const userHeaders = new Headers();
                 const rw = {
                     Document: DefaultDocument,
                     nonce: generateNonce(),
                     rscPayload: true,
+                    ssr: true,
+                    databases: new Map(),
                 };
                 const outerRequestInfo = {
                     request,
@@ -50,8 +53,7 @@ export const defineApp = (routes) => {
                 const createPageElement = (requestInfo, Page) => {
                     let pageElement;
                     if (isClientReference(Page)) {
-                        const { ctx, params } = requestInfo;
-                        // context(justinvdm, 25 Feb 2025): If the page is a client reference, we need to avoid passing
+                        const { ctx, params } = requestInfo; // context(justinvdm, 25 Feb 2025): If the page is a client reference, we need to avoid passing
                         // down props the client shouldn't get (e.g. env). For safety, we pick the allowed props explicitly.
                         pageElement = _jsx(Page, { ctx: ctx, params: params });
                     }
@@ -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: {
@@ -122,7 +129,7 @@ export const defineApp = (routes) => {
                         resolve(await router.handle({
                             request,
                             renderPage,
-                            getRequestInfo,
+                            getRequestInfo: getRequestInfo,
                             runWithRequestInfoOverrides,
                             onError: reject,
                         }));

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.mjs

@@ -49,6 +49,7 @@ export const configPlugin = ({ mode, silent, projectRootDir, clientEntryPathname
                     },
                     optimizeDeps: {
                         noDiscovery: false,
+                        include: ["rwsdk/client"],
                         esbuildOptions: {
                             jsx: "automatic",
                             jsxImportSource: "react",
@@ -58,23 +59,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 +75,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 +98,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 +117,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;