Add browser to integration test suite

Author: aron

.github/workflows/ci.yml

@@ -35,10 +35,12 @@ jobs:
       matrix:
         # See supported Node.js release schedule at https://nodejs.org/en/about/previous-releases
         node-version: [18.x, 20.x]
-        suite: [commonjs, esm, typescript, cloudflare-worker]
+        suite: [commonjs, esm, typescript, cloudflare-worker, browser]
         exclude:
           - suite: cloudflare-worker
             node-version: 18.x # Only test Cloudflare suite with the latest Node version
+          - suite: browser
+            node-version: 18.x # Only test Cloudflare suite with the latest Node version
       fail-fast: false
 
     env:

index.js

@@ -5,6 +5,7 @@ const {
   withAutomaticRetries,
   validateWebhook,
   parseProgressFromLogs,
+  streamAsyncIterator,
 } = require("./lib/util");
 
 const accounts = require("./lib/accounts");
@@ -297,18 +298,7 @@ class Replicate {
         options: { signal },
       });
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        yield value;
-      }
-      reader.releaseLock();
+      yield* streamAsyncIterator(stream);
     } else {
       throw new Error("Prediction does not support streaming");
     }

integration/browser/package.json

@@ -6,7 +6,8 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "node index.test.js"
+    "test": "playwright test",
+    "postinstall": "playwright install"
   },
   "license": "ISC",
   "dependencies": {

lib/stream.js

@@ -1,6 +1,7 @@
 // Attempt to use readable-stream if available, attempt to use the built-in stream module.
 
 const ApiError = require("./error");
+const { streamAsyncIterator } = require("./util");
 const {
   EventSourceParserStream,
 } = require("../vendor/eventsource-parser/stream");
@@ -73,15 +74,7 @@ function createReadableStream({ url, fetch, options = {} }) {
         .pipeThrough(new TextDecoderStream())
         .pipeThrough(new EventSourceParserStream());
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value: event } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
+      for await (const event of streamAsyncIterator(stream)) {
         if (event.event === "error") {
           controller.error(new Error(event.data));
           break;
@@ -96,7 +89,6 @@ function createReadableStream({ url, fetch, options = {} }) {
         }
       }
 
-      reader.releaseLock();
       controller.close();
     },
   });

lib/util.js

@@ -354,9 +354,33 @@ function parseProgressFromLogs(input) {
   return null;
 }
 
+/**
+ * Helper to make any `ReadableStream` iterable, this is supported
+ * by most server runtimes but browsers still haven't implemented
+ * it yet.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#browser_compatibility
+ *
+ * @template T
+ * @param {ReadableStream<T>} stream an instance of a `ReadableStream`
+ * @yields {T} a chunk/event from the stream
+ */
+async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
 module.exports = {
   transformFileInputs,
   validateWebhook,
   withAutomaticRetries,
   parseProgressFromLogs,
+  streamAsyncIterator,
 };

tsconfig.json

@@ -5,7 +5,5 @@
     "strict": true,
     "allowJs": true
   },
-  "exclude": [
-    "**/node_modules"
-  ]
-}
+  "exclude": ["integration/**", "**/node_modules"]
+}