From 23074eb82358bdd9fd4163a4a77a71c96831c2f0 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Fri, 14 Jun 2024 15:11:09 -0400
Subject: [PATCH] Migrate api.js (#11)

* Rename file

* Migrate api.js
---
 src/scripts/{api.js => api.ts}  | 33 ++++++++++++++++++++++++++++-----
 src/scripts/app.js              |  2 +-
 src/scripts/logging.ts          |  2 +-
 src/scripts/pnginfo.ts          |  2 +-
 src/scripts/ui.ts               |  2 +-
 src/scripts/ui/settings.ts      |  2 +-
 src/scripts/ui/userSelection.js |  2 +-
 src/scripts/widgets.ts          |  2 +-
 8 files changed, 35 insertions(+), 12 deletions(-)
 rename src/scripts/{api.js => api.ts} (94%)

diff --git a/src/scripts/api.js b/src/scripts/api.ts
similarity index 94%
rename from src/scripts/api.js
rename to src/scripts/api.ts
index 1cea711c2..a5491b00e 100644
--- a/src/scripts/api.js
+++ b/src/scripts/api.ts
@@ -1,5 +1,28 @@
+interface QueuePromptRequestBody {
+	client_id: string;
+	// Mapping from node id to node info + input values
+	// TODO: Type this.
+	prompt: Record<number, any>;
+	extra_data: {
+		extra_pnginfo: {
+			// Workflow JSON
+			// TODO: Type this.
+			workflow: any;
+		};
+	};
+	front?: boolean;
+	number?: number;
+}
+
+
 class ComfyApi extends EventTarget {
 	#registered = new Set();
+	api_host: string;
+	api_base: string;
+	initialClientId: string;
+	user: string;
+	socket?: WebSocket;
+	clientId?: string;
 
 	constructor() {
 		super();
@@ -12,7 +35,7 @@ class ComfyApi extends EventTarget {
 		return this.api_base + route;
 	}
 
-	fetchApi(route, options) {
+	fetchApi(route, options?) {
 		if (!options) {
 			options = {};
 		}
@@ -23,7 +46,7 @@ class ComfyApi extends EventTarget {
 		return fetch(this.apiURL(route), options);
 	}
 
-	addEventListener(type, callback, options) {
+	addEventListener(type, callback, options?) {
 		super.addEventListener(type, callback, options);
 		this.#registered.add(type);
 	}
@@ -47,7 +70,7 @@ class ComfyApi extends EventTarget {
 	 * Creates and connects a WebSocket for realtime updates
 	 * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
 	 */
-	#createSocket(isReconnect) {
+	#createSocket(isReconnect?) {
 		if (this.socket) {
 			return;
 		}
@@ -195,8 +218,8 @@ class ComfyApi extends EventTarget {
 	 * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
 	 * @param {object} prompt The prompt data to queue
 	 */
-	async queuePrompt(number, { output, workflow }) {
-		const body = {
+	async queuePrompt(number: number, { output, workflow }) {
+		const body: QueuePromptRequestBody = {
 			client_id: this.clientId,
 			prompt: output,
 			extra_data: { extra_pnginfo: { workflow } },
diff --git a/src/scripts/app.js b/src/scripts/app.js
index e605505ff..337a75ce5 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -1,7 +1,7 @@
 import { ComfyLogging } from "./logging";
 import { ComfyWidgets, initWidgets } from "./widgets";
 import { ComfyUI, $el } from "./ui";
-import { api } from "./api.js";
+import { api } from "./api";
 import { defaultGraph } from "./defaultGraph.js";
 import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo";
 import { addDomClippingSetting } from "./domWidget";
diff --git a/src/scripts/logging.ts b/src/scripts/logging.ts
index 386b55aae..744a9dc1d 100644
--- a/src/scripts/logging.ts
+++ b/src/scripts/logging.ts
@@ -1,5 +1,5 @@
 import { $el, ComfyDialog } from "./ui";
-import { api } from "./api.js";
+import { api } from "./api";
 import type { ComfyApp } from "./app.js";
 
 $el("style", {
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 6494ff4db..d5a1b52d2 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -1,4 +1,4 @@
-import { api } from "./api.js";
+import { api } from "./api";
 
 export function getPngMetadata(file) {
 	return new Promise<Record<string, string>>((r) => {
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 14cd9187d..7059b9842 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,4 +1,4 @@
-import { api } from "./api.js";
+import { api } from "./api";
 import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
 import { toggleSwitch } from "./ui/toggleSwitch.js";
 import { ComfySettingsDialog } from "./ui/settings.js";
diff --git a/src/scripts/ui/settings.ts b/src/scripts/ui/settings.ts
index 570bec7ff..560406096 100644
--- a/src/scripts/ui/settings.ts
+++ b/src/scripts/ui/settings.ts
@@ -1,5 +1,5 @@
 import { $el } from "../ui";
-import { api } from "../api.js";
+import { api } from "../api";
 import { ComfyDialog } from "./dialog.js";
 import type { ComfyApp } from "../app.js";
 
diff --git a/src/scripts/ui/userSelection.js b/src/scripts/ui/userSelection.js
index b6fa58113..89f2bc0ce 100644
--- a/src/scripts/ui/userSelection.js
+++ b/src/scripts/ui/userSelection.js
@@ -1,4 +1,4 @@
-import { api } from "../api.js";
+import { api } from "../api";
 import { $el } from "../ui";
 import { addStylesheet } from "../utils";
 import { createSpinner } from "./spinner.js";
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 80f7745b7..0bc23e5cd 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -1,4 +1,4 @@
-import { api } from "./api.js"
+import { api } from "./api"
 import "./domWidget";
 
 let controlValueRunBefore = false;