Add eventsource polyfill for Node.js and browser environments

.changeset/red-colts-burn.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:Add eventsource polyfill for Node.js and browser environments

client/js/package.json

@@ -13,7 +13,9 @@
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
+		"@types/eventsource": "^1.1.15",
 		"bufferutil": "^4.0.7",
+		"eventsource": "^2.0.2",
 		"msw": "^2.2.1",
 		"semiver": "^1.1.0",
 		"typescript": "^5.0.0",
@@ -26,7 +28,10 @@
 	"scripts": {
 		"bundle": "vite build --ssr",
 		"generate_types": "tsc",
-		"build": "pnpm bundle && pnpm generate_types"
+		"build": "pnpm bundle && pnpm generate_types",
+		"test": "pnpm test:client && pnpm test:client:node",
+		"test:client": "vitest run -c vite.config.js",
+		"test:client:node": "TEST_MODE=node vitest run -c vite.config.js"
 	},
 	"engines": {
 		"node": ">=18.0.0"

client/js/src/client.ts

@@ -36,6 +36,16 @@ export class NodeBlob extends Blob {
 	}
 }
 
+if (typeof window === "undefined") {
+	import("eventsource")
+		.then((EventSourceModule) => {
+			global.EventSource = EventSourceModule.default as any;
+		})
+		.catch((error) =>
+			console.error("Failed to load EventSource module:", error)
+		);
+}
+
 export class Client {
 	app_reference: string;
 	options: ClientOptions;
@@ -65,6 +75,8 @@ export class Client {
 	eventSource_factory(url: URL): EventSource {
 		if (typeof window !== undefined && typeof EventSource !== "undefined") {
 			return new EventSource(url.toString());
+		} else if (typeof global !== "undefined" && global.EventSource) {
+			return new global.EventSource(url.toString());
 		}
 		// @ts-ignore
 		return null; // todo: polyfill eventsource for node envs

client/js/src/test/api_info.test.ts

@@ -1,4 +1,5 @@
 import { QUEUE_FULL_MSG, SPACE_METADATA_ERROR_MSG } from "../constants";
+import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
 import {
 	handle_message,
 	get_description,

client/js/src/test/data.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import {
 	update_object,
 	walk_and_store_blobs,

client/js/src/test/handlers.ts

@@ -425,5 +425,14 @@ export const handlers: RequestHandler[] = [
 				"Content-Type": "application/json"
 			}
 		});
+	}),
+	// heartbeat requests
+	http.get(`*/heartbeat/*`, () => {
+		return new HttpResponse(null, {
+			status: 200,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
 	})
 ];

client/js/src/test/init_helpers.test.ts

@@ -4,6 +4,7 @@ import {
 	determine_protocol
 } from "../helpers/init_helpers";
 import { initialise_server } from "./server";
+import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
 
 const server = initialise_server();
 

client/js/src/test/post_data.test.ts

@@ -3,6 +3,7 @@ import { Client } from "../client";
 import { initialise_server } from "./server";
 import { BROKEN_CONNECTION_MSG } from "../constants";
 const server = initialise_server();
+import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());

client/js/src/test/spaces.test.ts

@@ -5,6 +5,7 @@ import {
 	set_space_timeout,
 	check_space_status
 } from "../helpers/spaces";
+import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
 
 import { initialise_server } from "./server";
 import { hardware_sleeptime_response } from "./test_data";

client/js/src/test/upload_files.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, afterEach } from "vitest";
+import { describe, it, expect, afterEach, beforeAll, afterAll } from "vitest";
 
 import { Client } from "..";
 import { initialise_server } from "./server";

client/js/src/utils/stream.ts

@@ -28,7 +28,7 @@ export function open_stream(this: Client): void {
 		throw new Error("Cannot connect to sse endpoint: " + url.toString());
 	}
 
-	event_source.onmessage = async function (event) {
+	event_source.onmessage = async function (event: MessageEvent) {
 		let _data = JSON.parse(event.data);
 		if (_data.msg === "close_stream") {
 			close_stream(stream_status, event_source);
@@ -53,8 +53,13 @@ export function open_stream(this: Client): void {
 					close_stream(stream_status, event_source);
 				}
 			}
-			let fn = event_callbacks[event_id];
-			window.setTimeout(fn, 0, _data); // need to do this to put the event on the end of the event loop, so the browser can refresh between callbacks and not freeze in case of quick generations. See https://github.com/gradio-app/gradio/pull/7055
+			let fn: (data: any) => void = event_callbacks[event_id];
+
+			if (typeof window !== "undefined") {
+				window.setTimeout(fn, 0, _data); // need to do this to put the event on the end of the event loop, so the browser can refresh between callbacks and not freeze in case of quick generations. See https://github.com/gradio-app/gradio/pull/7055
+			} else {
+				setImmediate(fn, _data);
+			}
 		} else {
 			if (!pending_stream_messages[event_id]) {
 				pending_stream_messages[event_id] = [];

client/js/src/utils/submit.ts

@@ -376,7 +376,7 @@ export function submit(
 						);
 					}
 
-					event_source.onmessage = async function (event) {
+					event_source.onmessage = async function (event: MessageEvent) {
 						const _data = JSON.parse(event.data);
 						const { type, status, data } = handle_message(
 							_data,
@@ -476,7 +476,11 @@ export function submit(
 						fn_index,
 						time: new Date()
 					});
-					let hostname = window.location.hostname;
+					let hostname = "";
+					if (typeof window !== "undefined") {
+						hostname = window?.location?.hostname;
+					}
+
 					let hfhubdev = "dev.spaces.huggingface.tech";
 					const origin = hostname.includes(".dev.")
 						? `https://moon-${hostname.split(".")[1]}.${hfhubdev}`

client/js/vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
+const TEST_MODE = process.env.TEST_MODE || "happy-dom";
+
 export default defineConfig({
 	build: {
 		lib: {
@@ -17,6 +19,11 @@ export default defineConfig({
 	},
 	plugins: [svelte()],
 
+	mode: process.env.MODE || "development",
+	test: {
+		include: ["./src/test/*.test.*"],
+		environment: TEST_MODE
+	},
 	ssr: {
 		target: "node",
 		format: "esm",

package.json

@@ -15,7 +15,7 @@
 		"ts:check": "svelte-check --tsconfig tsconfig.json --threshold error",
 		"test": "pnpm --filter @gradio/client build && vitest dev --config .config/vitest.config.ts",
 		"test:run": "pnpm --filter @gradio/client build && vitest run --config .config/vitest.config.ts --reporter=verbose",
-		"test:node": "TEST_MODE=node pnpm  vitest run --config .config/vitest.config.ts",
+		"test:client": "pnpm --filter=@gradio/client test",
 		"test:browser": "pnpm --filter @gradio/app test:browser",
 		"test:browser:reload": "CUSTOM_TEST=1 pnpm --filter @gradio/app test:browser:reload",
 		"test:browser:full": "run-s build test:browser",