Merge pull request #17 from jakoblorz/feature/streaming-squashed

Author: itsMapleLeaf

package.json

@@ -35,6 +35,7 @@
   "peerDependencies": {
     "@remix-run/node": ">=1.4.0",
     "@remix-run/server-runtime": ">=1.4.0",
+    "@remix-run/web-stream": ">=1.0.3",
     "electron": ">=16",
     "react": ">=17",
     "react-dom": ">=17"

pnpm-lock.yaml

@@ -10,14 +10,17 @@ test("collectAssetFiles", async () => {
       {
         "content": [Function],
         "path": "/a.txt",
+        "stream": [Function],
       },
       {
         "content": [Function],
         "path": "/b.txt",
+        "stream": [Function],
       },
       {
         "content": [Function],
         "path": "/c/nested.txt",
+        "stream": [Function],
       },
     ]
   `)

src/asset-files.test.ts

@@ -1,11 +1,14 @@
 import glob from "fast-glob"
 import mime from "mime"
+import { createReadStream } from "node:fs"
 import { readFile } from "node:fs/promises"
 import { relative } from "node:path"
+import { Readable } from "node:stream"
 
 export type AssetFile = {
   path: string
   content: () => Promise<string | Buffer>
+  stream: () => Readable
 }
 
 export async function collectAssetFiles(folder: string): Promise<AssetFile[]> {
@@ -18,6 +21,7 @@ export async function collectAssetFiles(folder: string): Promise<AssetFile[]> {
   return files.map((file) => ({
     path: "/" + relative(folder, file).replace(/\\/g, "/"),
     content: () => readFile(file),
+    stream: () => createReadStream(file),
   }))
 }
 
@@ -31,7 +35,7 @@ export async function serveAsset(
   if (!file) return
 
   return {
-    data: await file.content(),
+    data: file.stream(),
     mimeType: mime.getType(file.path) ?? undefined,
   }
 }

src/asset-files.ts

@@ -15,3 +15,8 @@ Object.assign(globalThis, {
   FormData,
   AbortController,
 })
+
+if (typeof globalThis.ReadableStream === "undefined") {
+  const { ReadableStream } = require("@remix-run/web-stream")
+  globalThis.ReadableStream = ReadableStream
+}

src/browser-globals.ts

@@ -63,7 +63,7 @@ export async function initRemix({
       ? require.resolve(serverBuildOption)
       : undefined
 
-  protocol.interceptBufferProtocol("http", async (request, callback) => {
+  protocol.interceptStreamProtocol("http", async (request, callback) => {
     try {
       if (mode === "development") {
         assetFiles = await collectAssetFiles(publicFolder)

src/main.ts

@@ -1,6 +1,14 @@
 import type { RequestHandler } from "@remix-run/server-runtime"
+import { Readable, PassThrough } from "node:stream"
 import "./browser-globals"
 
+function createPassThroughStream(text: any) {
+  const readable = new PassThrough()
+  readable.push(text)
+  readable.push(null) // eslint-disable-line unicorn/no-null, unicorn/no-array-push-push
+  return readable
+}
+
 export async function serveRemixResponse(
   request: Electron.ProtocolRequest,
   handleRequest: RequestHandler,
@@ -27,8 +35,17 @@ export async function serveRemixResponse(
     values.push(value)
   }
 
+  if (response.body instanceof ReadableStream) {
+    return {
+      // @ts-expect-error
+      data: Readable.from(response.body),
+      headers,
+      statusCode: response.status,
+    }
+  }
+
   return {
-    data: Buffer.from(await response.arrayBuffer()),
+    data: createPassThroughStream(Buffer.from(await response.arrayBuffer())),
     headers,
     statusCode: response.status,
   }

src/serve-remix-response.ts

@@ -23,6 +23,7 @@
     "@remix-run/node": "^1.4.0",
     "@remix-run/react": "^1.4.0",
     "@remix-run/server-runtime": "^1.4.0",
+    "@remix-run/web-stream": ">=1.0.3",
     "fast-glob": "^3.2.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

template/package.json

@@ -11,6 +11,7 @@
     "@remix-run/node": "^1.4.0",
     "@remix-run/react": "^1.4.0",
     "@remix-run/server-runtime": "^1.4.0",
+    "@remix-run/web-stream": ">=1.0.3",
     "fast-glob": "^3.2.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",