Custom EventSource implementation (#391)

* Custom EventSource implementation

* Changeset

.changeset/itchy-terms-peel.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/api': minor
+---
+
+Use fetch and a custom EventSource parsing to support node/browser/worker for streaming operations

packages/api/package.json

@@ -12,8 +12,8 @@
         "dist/**"
     ],
     "dependencies": {
-        "@microsoft/fetch-event-source": "^2.0.1",
-        "event-iterator": "^2.0.0"
+        "event-iterator": "^2.0.0",
+        "eventsource-parser": "^1.1.1"
     },
     "devDependencies": {
         "swagger-typescript-api": "^13.0.3",

packages/api/templates/http-client.ejs

@@ -2,7 +2,7 @@
 const { apiConfig, generateResponses, config } = it;
 %>
 import { EventIterator } from 'event-iterator';
-import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { createParser, type ParsedEvent, type ReconnectInterval } from 'eventsource-parser';
 
 export type QueryParamsType = Record<string | number, any>;
 export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
@@ -241,28 +241,55 @@ export class HttpClient<SecurityDataType = unknown> {
                     const { query: requestQuery, ...requestParams } = this.mergeRequestParams(params, secureParams);
                     const queryString = requestQuery ? this.toQueryString(requestQuery) : undefined;
 
-                    await fetchEventSource(
+                    const response = await this.customFetch(
                         `${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`,
                         {
                             ...requestParams,
                             signal: cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal,
-                            onmessage(event) {
-                                if (event.data === 'done') {
-                                    queue.stop();
-                                } else {
-                                    const data = JSON.parse(event.data);
-                                    queue.push(data);
-                                }
-                            },
-                            onclose() {
-                                queue.stop();
-                            },
-                            onerror(error) {
-                                queue.fail(error);
+                        }
+                    )
+
+                    if (!response.ok) {
+                        throw new Error(`${response.status} ${response.statusText}`);
+                        return;
+                    }
+
+                    const reader = response.body.getReader();
+
+                    const stop = () => {
+                        reader.cancel();
+                        queue.stop();
+                    }
+
+                    const parser = createParser((event: ParsedEvent | ReconnectInterval) => {
+                        if (event.type === 'event') {
+                            if (event.data === 'done') {
+                                stop();
+                            } else {
+                                const data = JSON.parse(event.data);
+                                queue.push(data);
                             }
-                        },
-                    );
-                })();
+                        }
+                    })
+
+                    const decoder = new TextDecoder();
+                    while (true) {
+                        const { done, value } = await reader.read();
+
+                        if (value) {
+                            parser.feed(decoder.decode(value))
+                        }
+
+                        if (done) {
+                            break;
+                        }
+                    }
+
+                    stop();
+                })()
+                .catch(error => {
+                    queue.fail(error);
+                });
             }
         );
     };