Bind fetch and stream in JS client (#8714)

* bind `fetch` and `stream`

* add changeset

* add tests

* tweak

* fix test

* test

* tweak .close() logic

* add changeset

* format

* change fake word

* format

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/shaky-numbers-punch.md

@@ -0,0 +1,7 @@
+---
+"@gradio/client": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Bind `fetch` and `stream` in JS client

client/js/src/client.ts

@@ -141,7 +141,9 @@ export class Client {
 		this.resolve_config = resolve_config.bind(this);
 		this.resolve_cookies = resolve_cookies.bind(this);
 		this.upload = upload.bind(this);
+		this.fetch = this.fetch.bind(this);
 		this.handle_space_success = this.handle_space_success.bind(this);
+		this.stream = this.stream.bind(this);
 	}
 
 	private async init(): Promise<void> {

client/js/src/test/init.test.ts

@@ -9,9 +9,13 @@ import {
 } from "vitest";
 
 import { Client, client, duplicate } from "..";
-import { transformed_api_info, config_response } from "./test_data";
+import {
+	transformed_api_info,
+	config_response,
+	response_api_info
+} from "./test_data";
 import { initialise_server } from "./server";
-import { CONFIG_ERROR_MSG, SPACE_METADATA_ERROR_MSG } from "../constants";
+import { SPACE_METADATA_ERROR_MSG } from "../constants";
 
 const app_reference = "hmb/hello_world";
 const broken_app_reference = "hmb/bye_world";
@@ -26,6 +30,24 @@ afterAll(() => server.close());
 
 describe("Client class", () => {
 	describe("initialisation", () => {
+		test("fetch is bound to the Client instance", async () => {
+			const test = await Client.connect("hmb/hello_world");
+			const fetch_method = test.fetch;
+			const res = await fetch_method(direct_app_reference + "/info");
+
+			await expect(res.json()).resolves.toEqual(response_api_info);
+		});
+
+		test("stream is bound to the Client instance", async () => {
+			const test = await Client.connect("hmb/hello_world");
+			const stream_method = test.stream;
+			const url = new URL(`${direct_app_reference}/queue/data`);
+			const stream = stream_method(url);
+
+			expect(stream).toBeDefined();
+			expect(stream.onmessage).toBeDefined();
+		});
+
 		test("backwards compatibility of client using deprecated syntax", async () => {
 			const app = await client(app_reference);
 			expect(app.config).toEqual(config_response);

client/js/src/utils/stream.ts

@@ -182,7 +182,7 @@ export function readable_stream(
 ): EventSource {
 	const instance: EventSource & { readyState: number } = {
 		close: () => {
-			throw new Error("Method not implemented.");
+			console.warn("Method not implemented.");
 		},
 		onerror: null,
 		onmessage: null,

js/upload/src/UploadProgress.svelte

@@ -50,6 +50,7 @@
 			const _data = JSON.parse(event.data);
 			if (!progress) progress = true;
 			if (_data.msg === "done") {
+				// the stream will close itself but is here for clarity; remove .close() in 5.0
 				stream?.close();
 				dispatch("done");
 			} else {
@@ -59,6 +60,7 @@
 		};
 	});
 	onDestroy(() => {
+		// the stream will close itself but is here for clarity; remove .close() in 5.0
 		if (stream != null || stream != undefined) stream.close();
 	});