feat: support react pipeable streams

package.json

@@ -58,6 +58,8 @@
     "listhen": "^1.2.2",
     "node-fetch-native": "^1.2.0",
     "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "supertest": "^6.3.3",
     "typescript": "^5.1.6",
     "unbuild": "^1.2.1",

src/utils/response.ts

@@ -176,9 +176,15 @@ export function isStream(data: any): data is Readable | ReadableStream {
   if (!data || typeof data !== "object") {
     return false;
   }
-  // Node.js Readable Streams
-  if (typeof data.pipe === "function" && typeof data._read === "function") {
-    return true;
+  if (typeof data.pipe === "function") {
+    // Node.js Readable Streams
+    if (typeof data._read === "function") {
+      return true;
+    }
+    // React Pipeable Streams
+    if (typeof data.abort === "function") {
+      return true;
+    }
   }
   // Web Streams
   if (typeof data.pipeTo === "function") {
@@ -225,17 +231,30 @@ export function sendStream(
       });
   }
 
-  // Node.js Readable streams
+  // Node.js Readable Streams
   // https://nodejs.org/api/stream.html#readable-streams
-  if ("pipe" in stream && "_read" in stream) {
+  if (typeof stream.pipe === "function") {
     return new Promise<void>((resolve, reject) => {
+      // Pipe stream to response
       stream.pipe(event.node.res);
-      stream.on("end", () => {
-        event.node.res.end();
-        resolve();
-      });
-      stream.on("error", (error: Error) => {
-        reject(error);
+
+      // Handle stream events (if supported)
+      if (stream.on) {
+        stream.on("end", () => {
+          event.node.res.end();
+          resolve();
+        });
+        stream.on("error", (error: Error) => {
+          reject(error);
+        });
+      }
+
+      // Handle request aborts
+      event.node.res.on("close", () => {
+        // https://react.dev/reference/react-dom/server/renderToPipeableStream
+        if ((stream as any).abort) {
+          (stream as any).abort();
+        }
       });
     });
   }

test/integrations.test.ts

@@ -2,9 +2,51 @@ import express from "express";
 import createConnectApp from "connect";
 import { describe, it, expect, beforeEach } from "vitest";
 import supertest, { SuperTest, Test } from "supertest";
-import { createApp, App, toNodeListener, fromNodeMiddleware } from "../src";
+import { createElement } from "react";
+import { renderToString, renderToPipeableStream } from "react-dom/server";
+import {
+  createApp,
+  App,
+  toNodeListener,
+  fromNodeMiddleware,
+  eventHandler,
+} from "../src";
 
-describe("integrations with other frameworks", () => {
+describe("integration with react", () => {
+  let app: App;
+  let request: SuperTest<Test>;
+
+  beforeEach(() => {
+    app = createApp({ debug: true });
+    request = supertest(toNodeListener(app));
+  });
+
+  it("renderToString", async () => {
+    app.use(
+      "/",
+      eventHandler(() => {
+        const el = createElement("h1", null, `Hello`);
+        return renderToString(el);
+      }),
+    );
+    const res = await request.get("/");
+    expect(res.text).toBe("<h1>Hello</h1>");
+  });
+
+  it("renderToPipeableStream", async () => {
+    app.use(
+      "/",
+      eventHandler(() => {
+        const el = createElement("h1", null, `Hello`);
+        return renderToPipeableStream(el);
+      }),
+    );
+    const res = await request.get("/");
+    expect(res.text).toBe("<h1>Hello</h1>");
+  });
+});
+
+describe("integration with express", () => {
   let app: App;
   let request: SuperTest<Test>;