rwsdk 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/runtime/render/normalizeActionResult.js

@@ -0,0 +1,43 @@
+// context(justinvdm, 24 Mar 2025): React flight limits chunks to 28 bytes, so we need to rechunk
+// the stream to avoid losing data
+function rechunkStream(stream, maxChunkSize = 28) {
+    const reader = stream.getReader();
+    return new ReadableStream({
+        async pull(controller) {
+            let buffer = new Uint8Array(0);
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done && buffer.length === 0) {
+                        controller.close();
+                        return;
+                    }
+                    if (value) {
+                        buffer = new Uint8Array([...buffer, ...value]);
+                    }
+                    while (buffer.length >= maxChunkSize || (done && buffer.length > 0)) {
+                        const chunk = buffer.slice(0, maxChunkSize);
+                        buffer = buffer.slice(maxChunkSize);
+                        controller.enqueue(chunk);
+                    }
+                    if (done) {
+                        controller.close();
+                        return;
+                    }
+                }
+            }
+            catch (error) {
+                controller.error(error);
+            }
+        },
+    });
+}
+export const normalizeActionResult = (actionResult) => {
+    if (actionResult instanceof Response) {
+        return null;
+    }
+    if (actionResult instanceof ReadableStream) {
+        return rechunkStream(actionResult);
+    }
+    return actionResult;
+};

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

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

package/dist/runtime/render/preloads.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { use } from "react";
 import { getManifest } from "../lib/manifest.js";
 export function findScriptForModule(id, manifest) {
     const visited = new Set();
@@ -27,8 +26,8 @@ export function findScriptForModule(id, manifest) {
     }
     return find(id);
 }
-export const Preloads = ({ requestInfo }) => {
-    const manifest = use(getManifest());
+export const Preloads = async ({ requestInfo, }) => {
+    const manifest = await getManifest();
     const allScripts = new Set();
     for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
         const script = findScriptForModule(scriptId, manifest);

package/dist/runtime/render/{renderRscThenableToHtmlStream.d.ts → renderDocumentHtmlStream.d.ts}

@@ -1,9 +1,9 @@
 import { type DocumentProps } from "../lib/router.js";
 import { type RequestInfo } from "../requestInfo/types.js";
-export declare const renderRscThenableToHtmlStream: ({ thenable, Document, requestInfo, shouldSSR, onError, }: {
-    thenable: any;
+export declare const renderDocumentHtmlStream: ({ rscPayloadStream, Document, requestInfo, shouldSSR, onError, }: {
+    rscPayloadStream: ReadableStream;
     Document: React.FC<DocumentProps>;
     requestInfo: RequestInfo;
     shouldSSR: boolean;
     onError: (error: unknown) => void;
-}) => Promise<import("react-dom/server.js").ReactDOMServerReadableStream>;
+}) => Promise<ReadableStream<Uint8Array<ArrayBufferLike>>>;

package/dist/runtime/render/renderDocumentHtmlStream.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Preloads } from "./preloads.js";
+import { Stylesheets } from "./stylesheets.js";
+import { renderHtmlStream, createThenableFromReadableStream, } from "rwsdk/__ssr_bridge";
+import { injectHtmlAtMarker } from "../lib/injectHtmlAtMarker.js";
+export const renderDocumentHtmlStream = async ({ rscPayloadStream, Document, requestInfo, shouldSSR, onError, }) => {
+    // Extract the app node from the RSC payload
+    const rscAppThenable = createThenableFromReadableStream(rscPayloadStream);
+    const { node: appNode } = (await rscAppThenable);
+    // 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,
+        },
+    };
+    // Create the outer document with a marker for injection
+    const documentElement = (_jsxs(Document, { ...requestInfo, children: [_jsx("script", { nonce: requestInfo.rw.nonce, dangerouslySetInnerHTML: {
+                    __html: `globalThis.__RWSDK_CONTEXT = ${JSON.stringify(clientContext)}`,
+                } }), _jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", dangerouslySetInnerHTML: { __html: "<!-- RWSDK_INJECT_APP_HTML -->" } })] }));
+    const outerHtmlStream = await renderHtmlStream({
+        node: documentElement,
+        requestInfo,
+        onError,
+        identifierPrefix: "__RWSDK_DOCUMENT__",
+    });
+    const appHtmlStream = await renderHtmlStream({
+        node: appNode,
+        requestInfo,
+        onError,
+    });
+    // Stitch the streams together
+    const stitchedStream = injectHtmlAtMarker(outerHtmlStream, appHtmlStream, "<!-- RWSDK_INJECT_APP_HTML -->");
+    return stitchedStream;
+};

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

@@ -0,0 +1,7 @@
+import { type RequestInfo } from "../requestInfo/types.js";
+export declare const renderHtmlStream: ({ node, identifierPrefix, requestInfo, onError, }: {
+    node: React.ReactNode;
+    requestInfo: RequestInfo;
+    onError: (error: unknown) => void;
+    identifierPrefix?: string;
+}) => Promise<import("react-dom/server.js").ReactDOMServerReadableStream>;

package/dist/runtime/render/renderHtmlStream.js

@@ -0,0 +1,31 @@
+import { renderToReadableStream } from "react-dom/server.edge";
+export const renderHtmlStream = async ({ node, identifierPrefix, requestInfo, onError, }) => {
+    return await renderToReadableStream(node, {
+        nonce: requestInfo.rw.nonce,
+        identifierPrefix,
+        onError(error, { componentStack }) {
+            try {
+                if (!error) {
+                    error = new Error(`A falsy value was thrown during rendering: ${String(error)}.`);
+                }
+                const message = error
+                    ? (error.stack ?? error.message ?? error)
+                    : error;
+                const wrappedMessage = `${message}\n\nComponent stack:${componentStack}`;
+                if (error instanceof Error) {
+                    const wrappedError = new Error(wrappedMessage);
+                    wrappedError.stack = error.stack;
+                    error = wrappedError;
+                }
+                else {
+                    error = new Error(wrappedMessage);
+                    error.stack = componentStack;
+                }
+                onError(error);
+            }
+            catch {
+                onError(error);
+            }
+        },
+    });
+};

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

@@ -1,5 +1,4 @@
-export declare const renderToRscStream: (app: {
-    node: React.ReactElement;
-    actionResult: any;
+export declare const renderToRscStream: ({ input, onError, }: {
+    input: any;
     onError?: (error: unknown) => void;
 }) => ReadableStream;

package/dist/runtime/render/renderToRscStream.js

@@ -1,46 +1,7 @@
 import { renderToReadableStream as baseRenderToRscStream } from "react-server-dom-webpack/server.edge";
 import { createClientManifest } from "./createClientManifest.js";
-// context(justinvdm, 24 Mar 2025): React flight limits chunks to 28 bytes, so we need to rechunk
-// the stream to avoid losing data
-function rechunkStream(stream, maxChunkSize = 28) {
-    const reader = stream.getReader();
-    return new ReadableStream({
-        async pull(controller) {
-            let buffer = new Uint8Array(0);
-            try {
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done && buffer.length === 0) {
-                        controller.close();
-                        return;
-                    }
-                    if (value) {
-                        buffer = new Uint8Array([...buffer, ...value]);
-                    }
-                    while (buffer.length >= maxChunkSize || (done && buffer.length > 0)) {
-                        const chunk = buffer.slice(0, maxChunkSize);
-                        buffer = buffer.slice(maxChunkSize);
-                        controller.enqueue(chunk);
-                    }
-                    if (done) {
-                        controller.close();
-                        return;
-                    }
-                }
-            }
-            catch (error) {
-                controller.error(error);
-            }
-        },
-    });
-}
-export const renderToRscStream = (app) => {
-    const { node, onError } = app;
-    let { actionResult } = app;
-    if (actionResult instanceof ReadableStream) {
-        actionResult = rechunkStream(actionResult);
-    }
-    return baseRenderToRscStream({ node, actionResult }, createClientManifest(), {
+export const renderToRscStream = ({ input, onError, }) => {
+    return baseRenderToRscStream(input, createClientManifest(), {
         onError,
     });
 };

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

@@ -2,8 +2,9 @@ import { ReactElement, FC } from "react";
 import { DocumentProps } from "../lib/router";
 export interface RenderToStreamOptions {
     Document?: FC<DocumentProps>;
+    ssr?: boolean;
     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>;
+export declare const renderToStream: (element: ReactElement, { ssr: shouldSSR, Document, injectRSCPayload: shouldInjectRSCPayload, onError, }?: RenderToStreamOptions) => Promise<ReadableStream>;

package/dist/runtime/render/renderToStream.js

@@ -1,27 +1,34 @@
 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";
+import { renderDocumentHtmlStream } from "./renderDocumentHtmlStream";
 export const IdentityDocument = ({ children }) => (_jsx(_Fragment, { children: children }));
-export const renderToStream = async (element, { Document = IdentityDocument, injectRSCPayload: shouldInjectRSCPayload = false, onError = () => { }, } = {}) => {
+export const renderToStream = async (element, { ssr: shouldSSR = true, Document = IdentityDocument, injectRSCPayload: shouldInjectRSCPayload = true, onError = () => { }, } = {}) => {
     let rscStream = renderToRscStream({
-        node: element,
-        actionResult: null,
+        input: {
+            node: element,
+            actionResult: undefined,
+        },
         onError,
     });
+    let injectRSCStream;
     if (shouldInjectRSCPayload) {
         const [rscPayloadStream1, rscPayloadStream2] = rscStream.tee();
         rscStream = rscPayloadStream1;
-        rscStream = rscStream.pipeThrough(injectRSCPayload(rscPayloadStream2, {
+        injectRSCStream = injectRSCPayload(rscPayloadStream2, {
             nonce: requestInfo.rw.nonce,
-        }));
+        });
     }
-    const htmlStream = await transformRscToHtmlStream({
-        stream: rscStream,
+    let htmlStream = await renderDocumentHtmlStream({
+        rscPayloadStream: rscStream,
         Document,
         requestInfo,
+        shouldSSR,
         onError,
     });
+    if (injectRSCStream) {
+        htmlStream = htmlStream.pipeThrough(injectRSCStream);
+    }
     return htmlStream;
 };

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

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

package/dist/runtime/render/stylesheets.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { use } from "react";
 import { getManifest } from "../lib/manifest.js";
 const findCssForModule = (scriptId, manifest) => {
     const css = new Set();
@@ -22,8 +21,8 @@ const findCssForModule = (scriptId, manifest) => {
     inner(scriptId);
     return Array.from(css);
 };
-export const Stylesheets = ({ requestInfo }) => {
-    const manifest = use(getManifest());
+export const Stylesheets = async ({ requestInfo, }) => {
+    const manifest = await getManifest();
     const allStylesheets = new Set();
     for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
         const css = findCssForModule(scriptId, manifest);

package/dist/runtime/ssrBridge.d.ts

@@ -1,2 +1,3 @@
-export { renderRscThenableToHtmlStream } from "./render/renderRscThenableToHtmlStream";
+export { renderHtmlStream } from "./render/renderHtmlStream";
+export { createThenableFromReadableStream } from "./render/createThenableFromReadableStream";
 export { ssrLoadModule, ssrGetModuleExport, ssrWebpackRequire, } from "./imports/ssr";

package/dist/runtime/ssrBridge.js

@@ -7,5 +7,6 @@
 // import it through this bridge module, using the bare import path
 // `rwsdk/__ssr_bridge`. We have bundler logic (ssrBridgePlugin) that looks out
 // for imports to it.
-export { renderRscThenableToHtmlStream } from "./render/renderRscThenableToHtmlStream";
+export { renderHtmlStream } from "./render/renderHtmlStream";
+export { createThenableFromReadableStream } from "./render/createThenableFromReadableStream";
 export { ssrLoadModule, ssrGetModuleExport, ssrWebpackRequire, } from "./imports/ssr";

package/dist/runtime/worker.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { RequestInfo, DefaultAppContext } from "./requestInfo/types";
 import { Route } from "./lib/router";
+export * from "./requestInfo/types";
 declare global {
     type Env = {
         ASSETS: Fetcher;

package/dist/runtime/worker.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { transformRscToHtmlStream } from "./render/transformRscToHtmlStream";
+import { renderDocumentHtmlStream } from "./render/renderDocumentHtmlStream";
+import { normalizeActionResult } from "./render/normalizeActionResult";
 import { renderToRscStream } from "./render/renderToRscStream";
 import { rscActionHandler } from "./register/worker";
 import { injectRSCPayload } from "rsc-html-stream/server";
@@ -8,6 +9,7 @@ import { getRequestInfo, runWithRequestInfo, runWithRequestInfoOverrides, } from
 import { defineRoutes } from "./lib/router";
 import { generateNonce } from "./lib/utils";
 import { ssrWebpackRequire } from "./imports/worker";
+export * from "./requestInfo/types";
 export const defineApp = (routes) => {
     return {
         fetch: async (request, env, cf) => {
@@ -79,12 +81,14 @@ export const defineApp = (routes) => {
                             status: 500,
                         });
                     }
-                    const actionResult = requestInfo.rw.actionResult;
+                    const actionResult = normalizeActionResult(requestInfo.rw.actionResult);
                     const pageElement = createPageElement(requestInfo, Page);
                     const { rscPayload: shouldInjectRSCPayload } = rw;
                     let rscPayloadStream = renderToRscStream({
-                        node: pageElement,
-                        actionResult: actionResult instanceof Response ? null : actionResult,
+                        input: {
+                            node: pageElement,
+                            actionResult,
+                        },
                         onError,
                     });
                     if (isRSCRequest) {
@@ -104,11 +108,12 @@ export const defineApp = (routes) => {
                             nonce: rw.nonce,
                         });
                     }
-                    let html = await transformRscToHtmlStream({
-                        stream: rscPayloadStream,
+                    let html = await renderDocumentHtmlStream({
+                        rscPayloadStream: rscPayloadStream,
                         Document: rw.Document,
                         requestInfo: requestInfo,
                         onError,
+                        shouldSSR: rw.ssr,
                     });
                     if (injectRSCPayloadStream) {
                         html = html.pipeThrough(injectRSCPayloadStream);

package/dist/vite/configPlugin.mjs

@@ -148,8 +148,8 @@ export const configPlugin = ({ silent, projectRootDir, workerEntryPathname, clie
                                 // original `export` statement from the bundle to prevent syntax
                                 // errors.
                                 inlineDynamicImports: true,
-                                banner: `export const { renderRscThenableToHtmlStream, ssrWebpackRequire, ssrGetModuleExport } = (function() {`,
-                                footer: `return { renderRscThenableToHtmlStream, ssrWebpackRequire, ssrGetModuleExport };\n})();`,
+                                banner: `export const { renderHtmlStream, ssrWebpackRequire, ssrGetModuleExport, createThenableFromReadableStream } = (function() {`,
+                                footer: `return { renderHtmlStream, ssrWebpackRequire, ssrGetModuleExport, createThenableFromReadableStream };\n})();`,
                             },
                             plugins: [
                                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwsdk",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "description": "Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime",
   "type": "module",
   "bin": {
@@ -90,6 +90,10 @@
     "./realtime/durableObject": {
       "types": "./dist/runtime/lib/realtime/durableObject.d.ts",
       "default": "./dist/runtime/lib/realtime/durableObject.js"
+    },
+    "./e2e": {
+      "types": "./dist/lib/e2e/index.d.mts",
+      "default": "./dist/lib/e2e/index.mjs"
     }
   },
   "keywords": [
@@ -159,9 +163,9 @@
   },
   "peerDependencies": {
     "@cloudflare/vite-plugin": "^1.12.4",
-    "react": "19.2.0-canary-3fb190f7-20250908",
-    "react-dom": "19.2.0-canary-3fb190f7-20250908",
-    "react-server-dom-webpack": "19.2.0-canary-3fb190f7-20250908",
+    "react": "19.2.0-canary-3fb190f7-20250908 <20.0.0",
+    "react-dom": "19.2.0-canary-3fb190f7-20250908 <20.0.0",
+    "react-server-dom-webpack": ">=19.2.0-canary-3fb190f7-20250908 <20.0.0",
     "vite": "^6.2.6 || 7.x",
     "wrangler": "^4.35.0"
   },

package/dist/runtime/render/renderRscThenableToHtmlStream.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { use } from "react";
-import { renderToReadableStream } from "react-dom/server.edge";
-import { Preloads } from "./preloads.js";
-import { Stylesheets } from "./stylesheets.js";
-export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, shouldSSR, onError, }) => {
-    const Component = () => {
-        const RscApp = () => {
-            const node = use(thenable).node;
-            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
-        };
-        // todo(justinvdm, 18 Jun 2025): We can build on this later to allow users
-        // surface context. e.g:
-        // * 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(RscApp, {})] }));
-    };
-    return await renderToReadableStream(_jsx(Component, {}), {
-        nonce: requestInfo.rw.nonce,
-        onError(error, { componentStack }) {
-            try {
-                if (!error) {
-                    error = new Error(`A falsy value was thrown during rendering: ${String(error)}.`);
-                }
-                const message = error
-                    ? (error.stack ?? error.message ?? error)
-                    : error;
-                const wrappedMessage = `${message}\n\nComponent stack:${componentStack}`;
-                if (error instanceof Error) {
-                    const wrappedError = new Error(wrappedMessage);
-                    wrappedError.stack = error.stack;
-                    error = wrappedError;
-                }
-                else {
-                    error = new Error(wrappedMessage);
-                    error.stack = componentStack;
-                }
-                onError(error);
-            }
-            catch {
-                onError(error);
-            }
-        },
-    });
-};

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

@@ -1,8 +0,0 @@
-import { DocumentProps } from "../lib/router";
-import { RequestInfo } from "../requestInfo/types";
-export declare const transformRscToHtmlStream: ({ stream, Document, requestInfo, onError, }: {
-    stream: ReadableStream;
-    Document: React.FC<DocumentProps>;
-    requestInfo: RequestInfo;
-    onError: (error: unknown) => void;
-}) => Promise<import("react-dom/server.js").ReactDOMServerReadableStream>;

package/dist/runtime/render/transformRscToHtmlStream.js

@@ -1,19 +0,0 @@
-import { createModuleMap } from "./createModuleMap.js";
-import ReactServerDom from "react-server-dom-webpack/client.edge";
-import { renderRscThenableToHtmlStream } from "rwsdk/__ssr_bridge";
-const { createFromReadableStream } = ReactServerDom;
-export const transformRscToHtmlStream = ({ stream, Document, requestInfo, onError, }) => {
-    const thenable = createFromReadableStream(stream, {
-        serverConsumerManifest: {
-            moduleMap: createModuleMap(),
-            moduleLoading: null,
-        },
-    });
-    return renderRscThenableToHtmlStream({
-        thenable,
-        Document,
-        requestInfo,
-        shouldSSR: requestInfo.rw.ssr,
-        onError,
-    });
-};