rwsdk 1.0.0-alpha.16 → 1.0.0-alpha.17

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

@@ -0,0 +1,18 @@
+/**
+ * A utility to orchestrate and interleave two ReadableStreams (a document shell and an app shell)
+ * based on a set of markers within their content. This is designed to solve a specific
+ * race condition in streaming Server-Side Rendering (SSR) with Suspense.
+ *
+ * The logic is as follows:
+ * 1. Stream the document until a start marker is found.
+ * 2. Switch to the app stream and stream it until an end marker is found. This is the non-suspended shell.
+ * 3. Switch back to the document stream and stream it until the closing body tag. This sends the client script.
+ * 4. Switch back to the app stream and stream the remainder (the suspended content).
+ * 5. Switch back to the document stream and stream the remainder (closing body and html tags).
+ *
+ * @param outerHtml The stream for the document shell (`<Document>`).
+ * @param innerHtml The stream for the application's content.
+ * @param startMarker The marker in the document to start injecting the app.
+ * @param endMarker The marker in the app stream that signals the end of the initial, non-suspended render.
+ */
+export declare function stitchDocumentAndAppStreams(outerHtml: ReadableStream<Uint8Array>, innerHtml: ReadableStream<Uint8Array>, startMarker: string, endMarker: string): ReadableStream<Uint8Array>;

package/dist/runtime/lib/stitchDocumentAndAppStreams.js

@@ -0,0 +1,143 @@
+/**
+ * A utility to orchestrate and interleave two ReadableStreams (a document shell and an app shell)
+ * based on a set of markers within their content. This is designed to solve a specific
+ * race condition in streaming Server-Side Rendering (SSR) with Suspense.
+ *
+ * The logic is as follows:
+ * 1. Stream the document until a start marker is found.
+ * 2. Switch to the app stream and stream it until an end marker is found. This is the non-suspended shell.
+ * 3. Switch back to the document stream and stream it until the closing body tag. This sends the client script.
+ * 4. Switch back to the app stream and stream the remainder (the suspended content).
+ * 5. Switch back to the document stream and stream the remainder (closing body and html tags).
+ *
+ * @param outerHtml The stream for the document shell (`<Document>`).
+ * @param innerHtml The stream for the application's content.
+ * @param startMarker The marker in the document to start injecting the app.
+ * @param endMarker The marker in the app stream that signals the end of the initial, non-suspended render.
+ */
+export function stitchDocumentAndAppStreams(outerHtml, innerHtml, startMarker, endMarker) {
+    const decoder = new TextDecoder();
+    const encoder = new TextEncoder();
+    let outerReader;
+    let innerReader;
+    let buffer = "";
+    let outerBufferRemains = "";
+    let phase = "outer-head";
+    const pump = async (controller) => {
+        try {
+            if (phase === "outer-head") {
+                const { done, value } = await outerReader.read();
+                if (done) {
+                    if (buffer)
+                        controller.enqueue(encoder.encode(buffer));
+                    controller.close();
+                    return;
+                }
+                buffer += decoder.decode(value, { stream: true });
+                const markerIndex = buffer.indexOf(startMarker);
+                if (markerIndex !== -1) {
+                    controller.enqueue(encoder.encode(buffer.slice(0, markerIndex)));
+                    outerBufferRemains = buffer.slice(markerIndex + startMarker.length);
+                    buffer = "";
+                    phase = "inner-shell";
+                }
+                else {
+                    const flushIndex = buffer.lastIndexOf("\n");
+                    if (flushIndex !== -1) {
+                        controller.enqueue(encoder.encode(buffer.slice(0, flushIndex + 1)));
+                        buffer = buffer.slice(flushIndex + 1);
+                    }
+                }
+            }
+            else if (phase === "inner-shell") {
+                const { done, value } = await innerReader.read();
+                if (done) {
+                    if (buffer)
+                        controller.enqueue(encoder.encode(buffer));
+                    phase = "outer-tail";
+                }
+                else {
+                    buffer += decoder.decode(value, { stream: true });
+                    const markerIndex = buffer.indexOf(endMarker);
+                    if (markerIndex !== -1) {
+                        const endOfMarkerIndex = markerIndex + endMarker.length;
+                        controller.enqueue(encoder.encode(buffer.slice(0, endOfMarkerIndex)));
+                        buffer = buffer.slice(endOfMarkerIndex);
+                        phase = "outer-tail";
+                    }
+                    else {
+                        const flushIndex = buffer.lastIndexOf("\n");
+                        if (flushIndex !== -1) {
+                            controller.enqueue(encoder.encode(buffer.slice(0, flushIndex + 1)));
+                            buffer = buffer.slice(flushIndex + 1);
+                        }
+                    }
+                }
+            }
+            else if (phase === "outer-tail") {
+                if (outerBufferRemains) {
+                    buffer = outerBufferRemains;
+                    outerBufferRemains = "";
+                }
+                const { done, value } = await outerReader.read();
+                if (done) {
+                    if (buffer)
+                        controller.enqueue(encoder.encode(buffer));
+                    phase = "inner-suspended";
+                }
+                else {
+                    buffer += decoder.decode(value, { stream: true });
+                    const markerIndex = buffer.indexOf("</body>");
+                    if (markerIndex !== -1) {
+                        controller.enqueue(encoder.encode(buffer.slice(0, markerIndex)));
+                        buffer = buffer.slice(markerIndex);
+                        phase = "inner-suspended";
+                    }
+                    else {
+                        const flushIndex = buffer.lastIndexOf("\n");
+                        if (flushIndex !== -1) {
+                            controller.enqueue(encoder.encode(buffer.slice(0, flushIndex + 1)));
+                            buffer = buffer.slice(flushIndex + 1);
+                        }
+                    }
+                }
+            }
+            else if (phase === "inner-suspended") {
+                const { done, value } = await innerReader.read();
+                if (done) {
+                    phase = "outer-end";
+                }
+                else {
+                    controller.enqueue(value);
+                }
+            }
+            else if (phase === "outer-end") {
+                if (buffer) {
+                    controller.enqueue(encoder.encode(buffer));
+                    buffer = "";
+                }
+                const { done, value } = await outerReader.read();
+                if (done) {
+                    controller.close();
+                    return;
+                }
+                controller.enqueue(value);
+            }
+            await pump(controller);
+        }
+        catch (e) {
+            controller.error(e);
+        }
+    };
+    return new ReadableStream({
+        start(controller) {
+            outerReader = outerHtml.getReader();
+            innerReader = innerHtml.getReader();
+            pump(controller).catch((e) => controller.error(e));
+        },
+        cancel(reason) {
+            outerReader?.cancel(reason);
+            innerReader?.cancel(reason);
+        },
+    });
+}

package/dist/runtime/render/renderDocumentHtmlStream.js

@@ -2,11 +2,11 @@ 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";
+import { stitchDocumentAndAppStreams } from "../lib/stitchDocumentAndAppStreams.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);
+    const { node: innerAppNode } = (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
@@ -21,7 +21,7 @@ export const renderDocumentHtmlStream = async ({ rscPayloadStream, Document, req
     // 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 -->" } })] }));
+                } }), _jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: _jsx("div", { id: "rwsdk-app-start" }) })] }));
     const outerHtmlStream = await renderHtmlStream({
         node: documentElement,
         requestInfo,
@@ -29,11 +29,11 @@ export const renderDocumentHtmlStream = async ({ rscPayloadStream, Document, req
         identifierPrefix: "__RWSDK_DOCUMENT__",
     });
     const appHtmlStream = await renderHtmlStream({
-        node: appNode,
+        node: innerAppNode,
         requestInfo,
         onError,
     });
     // Stitch the streams together
-    const stitchedStream = injectHtmlAtMarker(outerHtmlStream, appHtmlStream, "<!-- RWSDK_INJECT_APP_HTML -->");
+    const stitchedStream = stitchDocumentAndAppStreams(outerHtmlStream, appHtmlStream, '<div id="rwsdk-app-start"></div>', '<div id="rwsdk-app-end"></div>');
     return stitchedStream;
 };

package/dist/runtime/worker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { renderDocumentHtmlStream } from "./render/renderDocumentHtmlStream";
 import { normalizeActionResult } from "./render/normalizeActionResult";
 import { renderToRscStream } from "./render/renderToRscStream";
@@ -68,6 +68,7 @@ export const defineApp = (routes) => {
                     else {
                         pageElement = _jsx(Page, { ...requestInfo });
                     }
+                    pageElement = (_jsxs(_Fragment, { children: [pageElement, _jsx("div", { id: "rwsdk-app-end" })] }));
                     return pageElement;
                 };
                 const renderPage = async (requestInfo, Page, onError) => {

package/package.json

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

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

@@ -1,11 +0,0 @@
-/**
- * Injects HTML content from one stream into another stream at a specified marker.
- * This preserves streaming behavior by processing chunks incrementally without
- * buffering the entire streams.
- *
- * @param outerHtml - The outer HTML stream containing the marker
- * @param innerHtml - The inner HTML stream to inject at the marker
- * @param marker - The text marker where injection should occur
- * @returns A new ReadableStream with the inner HTML injected at the marker
- */
-export declare function injectHtmlAtMarker(outerHtml: ReadableStream<Uint8Array>, innerHtml: ReadableStream<Uint8Array>, marker: string): ReadableStream<Uint8Array>;

package/dist/runtime/lib/injectHtmlAtMarker.js

@@ -1,90 +0,0 @@
-/**
- * Injects HTML content from one stream into another stream at a specified marker.
- * This preserves streaming behavior by processing chunks incrementally without
- * buffering the entire streams.
- *
- * @param outerHtml - The outer HTML stream containing the marker
- * @param innerHtml - The inner HTML stream to inject at the marker
- * @param marker - The text marker where injection should occur
- * @returns A new ReadableStream with the inner HTML injected at the marker
- */
-export function injectHtmlAtMarker(outerHtml, innerHtml, marker) {
-    const decoder = new TextDecoder();
-    const encoder = new TextEncoder();
-    let buffer = "";
-    let injected = false;
-    return new ReadableStream({
-        async start(controller) {
-            const outerReader = outerHtml.getReader();
-            const flushText = (text) => {
-                if (text.length > 0) {
-                    controller.enqueue(encoder.encode(text));
-                }
-            };
-            const pumpInnerStream = async () => {
-                const innerReader = innerHtml.getReader();
-                try {
-                    while (true) {
-                        const { done, value } = await innerReader.read();
-                        if (done) {
-                            break;
-                        }
-                        controller.enqueue(value);
-                    }
-                }
-                finally {
-                    innerReader.releaseLock();
-                }
-            };
-            try {
-                while (true) {
-                    const { done, value } = await outerReader.read();
-                    if (done) {
-                        // End of outer stream - flush any remaining buffer
-                        if (buffer.length > 0) {
-                            flushText(buffer);
-                        }
-                        controller.close();
-                        break;
-                    }
-                    // Decode the chunk and add to buffer
-                    buffer += decoder.decode(value, { stream: true });
-                    if (!injected) {
-                        // Look for the marker in the buffer
-                        const markerIndex = buffer.indexOf(marker);
-                        if (markerIndex !== -1) {
-                            // Found the marker - emit everything before it
-                            flushText(buffer.slice(0, markerIndex));
-                            // Inject the inner HTML stream
-                            await pumpInnerStream();
-                            // Keep everything after the marker for next iteration
-                            buffer = buffer.slice(markerIndex + marker.length);
-                            injected = true;
-                        }
-                        else {
-                            // Marker not found yet - flush all but potential partial marker
-                            // Keep overlap to handle markers split across chunks
-                            const overlap = Math.max(0, marker.length - 1);
-                            const cutoff = Math.max(0, buffer.length - overlap);
-                            if (cutoff > 0) {
-                                flushText(buffer.slice(0, cutoff));
-                                buffer = buffer.slice(cutoff);
-                            }
-                        }
-                    }
-                    else {
-                        // Already injected - just pass through remaining content
-                        flushText(buffer);
-                        buffer = "";
-                    }
-                }
-            }
-            catch (error) {
-                controller.error(error);
-            }
-            finally {
-                outerReader.releaseLock();
-            }
-        },
-    });
-}