feat: Added browser support

Author: asafgardin

package-lock.json

@@ -1,19 +1,20 @@
 {
   "name": "ai21",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.3",
   "description": "AI21 TypeScript SDK",
-  "main": "./dist/index.js",
+  "main": "./dist/bundle.cjs.js",
   "types": "./dist/index.d.ts",
+  "module": "./dist/bundle.esm.js",
   "type": "module",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.js",
+      "require": "./dist/bundle.cjs.js",
+      "import": "./dist/bundle.esm.js",
       "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
-    "build": "tsc",
+    "build": "rollup -c",
     "test": "jest --coverage --no-cache --runInBand --config jest.config.ts",
     "unused-deps": "npx depcheck --json | jq '.dependencies == []'",
     "clean-build": "rm -rf ./dist",
@@ -45,6 +46,10 @@
   "devDependencies": {
     "@eslint/js": "^9.14.0",
     "@jest/types": "^29.6.3",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
@@ -61,6 +66,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "madge": "^6.1.0",
     "prettier": "^3.3.3",
+    "rollup": "^2.79.2",
+    "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^24.2.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
@@ -70,5 +77,10 @@
     "typescript": "^4.9.5",
     "typescript-eslint": "^8.13.0",
     "uuid": "^11.0.3"
+  },
+  "browser": {
+    "fs": false,
+    "os": false,
+    "path": false
   }
 }

package.json

@@ -0,0 +1,27 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/index.ts', // Entry point of your library
+  output: [
+    {
+      file: 'dist/bundle.cjs.js',
+      format: 'cjs', // CommonJS format for Node.js
+      sourcemap: true,
+    },
+    {
+      file: 'dist/bundle.esm.js',
+      format: 'esm', // ES module format for modern browsers
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve(), // Resolves node_modules
+    commonjs(), // Converts CommonJS to ES6
+    typescript(), // Compiles TypeScript
+    terser(), // Minifies the bundle
+  ],
+  external: ['node-fetch'], // Exclude node-fetch from the bundle
+};

rollup.config.js

@@ -1,11 +1,11 @@
 import { AI21Error } from './errors';
 import { VERSION } from './version';
 
-import fetch from 'node-fetch';
-import { HeadersInit, RequestInit } from 'node-fetch';
 import { RequestOptions, FinalRequestOptions, APIResponseProps, HTTPMethod, Headers } from './types/index.js';
 import { AI21EnvConfig } from './EnvConfig';
 import { handleAPIResponse } from './ResponseHandler';
+import { createFetchInstance } from 'envFetch';
+import { Fetch } from 'fetch';
 
 const validatePositiveInteger = (name: string, n: unknown): number => {
   if (typeof n !== 'number' || !Number.isInteger(n)) {
@@ -21,19 +21,23 @@ export abstract class APIClient {
   protected baseURL: string;
   protected maxRetries: number;
   protected timeout: number;
+  protected fetch: Fetch;
 
   constructor({
     baseURL,
     maxRetries = AI21EnvConfig.MAX_RETRIES,
     timeout = AI21EnvConfig.TIMEOUT_SECONDS,
+    fetch = createFetchInstance(),
   }: {
     baseURL: string;
     maxRetries?: number | undefined;
     timeout: number | undefined;
+    fetch?: Fetch;
   }) {
     this.baseURL = baseURL;
     this.maxRetries = validatePositiveInteger('maxRetries', maxRetries);
     this.timeout = validatePositiveInteger('timeout', timeout);
+    this.fetch = fetch;
   }
   get<Req, Rsp>(path: string, opts?: RequestOptions<Req>): Promise<Rsp> {
     return this.makeRequest('get', path, opts);
@@ -93,11 +97,10 @@ export abstract class APIClient {
       ...this.defaultHeaders(options),
       ...options.headers,
     };
-
-    const response = await fetch(url, {
+    const response = await this.fetch.call(url, {
       method: options.method,
-      headers: headers as HeadersInit,
-      signal: controller.signal as RequestInit['signal'],
+      headers: headers as any,
+      signal: controller.signal,
       body: options.body ? JSON.stringify(options.body) : undefined,
     });
 

src/APIClient.ts

@@ -1,7 +1,6 @@
 import { APIResponseProps } from './types';
 import { AI21Error } from './errors';
 import { Stream } from './Streaming';
-import { Response } from 'node-fetch';
 
 type APIResponse<T> = {
   data?: T;

src/ResponseHandler.ts

@@ -1,11 +1,10 @@
-import { Response as NodeResponse } from 'node-fetch';
-import { Readable } from 'stream';
 import { SSE_DATA_PREFIX } from './Consts';
 import { StreamingDecodeError } from '../errors';
+import { getReadableStream } from 'envFetch';
 
 export interface SSEDecoder {
   decode(line: string): string | null;
-  iterLines(response: NodeResponse): AsyncIterableIterator<string>;
+  iterLines(response: Response): AsyncIterableIterator<string>;
 }
 
 export class DefaultSSEDecoder implements SSEDecoder {
@@ -19,16 +18,15 @@ export class DefaultSSEDecoder implements SSEDecoder {
     throw new StreamingDecodeError(`Invalid SSE line: ${line}`);
   }
 
-  async *iterLines(response: NodeResponse): AsyncIterableIterator<string> {
+  async *iterLines(response: Response): AsyncIterableIterator<string> {
     if (!response.body) {
       throw new Error('Response body is null');
     }
 
-    const webReadableStream = Readable.toWeb(response.body as Readable);
-    const reader = webReadableStream.getReader();
-
+    const reader = await getReadableStream(response.body);
     let buffer = '';
 
+
     try {
       while (true) {
         const { done, value } = await reader.read();

src/Streaming/SSEDecoder.ts

@@ -1,4 +1,3 @@
-import { Response as NodeResponse } from 'node-fetch';
 import { DefaultSSEDecoder } from './SSEDecoder';
 import { SSEDecoder } from './SSEDecoder';
 import { SSE_DONE_MSG } from './Consts';
@@ -17,7 +16,7 @@ export class Stream<T> implements AsyncIterableIterator<T> {
   private iterator: AsyncIterableIterator<T>;
 
   constructor(
-    private response: NodeResponse,
+    private response: Response,
     decoder?: SSEDecoder,
   ) {
     this.decoder = decoder || new DefaultSSEDecoder();

src/Streaming/Stream.ts

@@ -0,0 +1,31 @@
+import { BrowserFetch, Fetch, NodeFetch } from 'fetch';
+
+export const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
+export const isWebWorker =
+    typeof self === "object" &&
+    // @ts-ignore
+    typeof self?.importScripts === "function" &&
+    (self.constructor?.name === "DedicatedWorkerGlobalScope" ||
+        self.constructor?.name === "ServiceWorkerGlobalScope" ||
+        self.constructor?.name === "SharedWorkerGlobalScope");
+
+
+export const isNode = typeof process !== "undefined" && Boolean(process.version) && Boolean(process.versions?.node);
+
+export const getReadableStream = async (responseBody: ReadableStream<Uint8Array>): Promise<ReadableStreamDefaultReader<Uint8Array>> => {
+    if (isBrowser || isWebWorker) {
+        return responseBody.getReader();
+    } else {
+        // @ts-ignore - ReadableStream.from() is available in Node.js but TypeScript doesn't recognize it
+        return (await import("stream/web")).ReadableStream.from(responseBody).getReader();
+    }
+};
+
+
+export function createFetchInstance(): Fetch {
+    if (isBrowser || isWebWorker) {
+        return new BrowserFetch();
+    } else {
+        return new NodeFetch();
+    }
+}

src/envFetch.ts

@@ -0,0 +1,3 @@
+export abstract class Fetch {
+    abstract call(url: string, options?: RequestInit): Promise<Response>;
+}

src/fetch/BaseFetch.ts

@@ -0,0 +1,7 @@
+import { Fetch } from './BaseFetch';
+
+export class BrowserFetch extends Fetch {
+    call(url: string, options?: RequestInit): Promise<Response> {
+        return fetch(url, options);
+    }
+}