Migrate ui/ (#14)

* Rename js to ts

* Fix all tsc errors

src/scripts/app.ts

@@ -5,7 +5,7 @@ import { api } from "./api";
 import { defaultGraph } from "./defaultGraph.js";
 import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo";
 import { addDomClippingSetting } from "./domWidget";
-import { createImageHost, calculateImageGrid } from "./ui/imagePreview.js"
+import { createImageHost, calculateImageGrid } from "./ui/imagePreview"
 import type { ComfyExtension } from "/types/comfy";
 import type { IWidget, LGraph, LGraphCanvas, LGraphNode } from "/types/litegraph";
 

src/scripts/ui.ts

@@ -1,7 +1,7 @@
 import { api } from "./api";
-import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
-import { toggleSwitch } from "./ui/toggleSwitch.js";
-import { ComfySettingsDialog } from "./ui/settings.js";
+import { ComfyDialog as _ComfyDialog } from "./ui/dialog";
+import { toggleSwitch } from "./ui/toggleSwitch";
+import { ComfySettingsDialog } from "./ui/settings";
 import { ComfyApp, app } from "./app";
 
 export const ComfyDialog = _ComfyDialog;

src/scripts/ui/dialog.ts

@@ -1,6 +1,9 @@
 import { $el } from "../ui";
 
 export class ComfyDialog {
+	element: HTMLElement;
+	textElement: HTMLElement;
+
 	constructor() {
 		this.element = $el("div.comfy-modal", { parent: document.body }, [
 			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),

src/scripts/ui/imagePreview.ts

@@ -50,7 +50,7 @@ export function createImageHost(node) {
 				if (elH < 190) {
 					elH = 190;
 				}
-				el.style.setProperty("--comfy-widget-min-height", elH);
+				el.style.setProperty("--comfy-widget-min-height", elH.toString());
 			} else {
 				el.style.setProperty("--comfy-widget-min-height", null);
 			}

src/scripts/ui/settings.ts

@@ -1,6 +1,6 @@
 import { $el } from "../ui";
 import { api } from "../api";
-import { ComfyDialog } from "./dialog.js";
+import { ComfyDialog } from "./dialog";
 import type { ComfyApp } from "../app";
 
 /* The Setting entry stored in `ComfySettingsDialog` */

src/scripts/ui/toggleSwitch.ts

@@ -6,14 +6,16 @@ import { $el } from "../ui";
 /**
  * Creates a toggle switch element
  * @param { string } name
- * @param { Array<string | ToggleSwitchItem } items
+ * @param { Array<string> | ToggleSwitchItem } items
  * @param { Object } [opts]
  * @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange]
  */
-export function toggleSwitch(name, items, { onChange } = {}) {
+export function toggleSwitch(name, items, e?) {
+	const onChange = e?.onChange;
+
 	let selectedIndex;
 	let elements;
-	
+
 	function updateSelected(index) {
 		if (selectedIndex != null) {
 			elements[selectedIndex].classList.remove("comfy-toggle-selected");

src/scripts/ui/userSelection.ts

@@ -1,10 +1,16 @@
 import { api } from "../api";
 import { $el } from "../ui";
 import { addStylesheet } from "../utils";
-import { createSpinner } from "./spinner.js";
+import { createSpinner } from "./spinner";
+
+interface SelectedUser {
+	username: string;
+	userId: string;
+	created: boolean;
+}
 
 export class UserSelectionScreen {
-	async show(users, user) {
+	async show(users, user): Promise<SelectedUser>{
 		// This will rarely be hit so move the loading to on demand
 		await addStylesheet(import.meta.url);
 		const userSelection = document.getElementById("comfy-user-selection");
@@ -48,6 +54,9 @@ export class UserSelectionScreen {
 					}
 
 					// Create new user
+					// @ts-ignore
+					// Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)
+					// Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)
 					input.disabled = select.disabled = input.readonly = select.readonly = true;
 					const spinner = createSpinner();
 					button.prepend(spinner);
@@ -56,7 +65,7 @@ export class UserSelectionScreen {
 						if (resp.status >= 300) {
 							let message = "Error creating user: " + resp.status + " " + resp.statusText;
 							try {
-								const res = await resp.json();								
+								const res = await resp.json();
 								if(res.error) {
 									message = res.error;
 								}
@@ -69,6 +78,9 @@ export class UserSelectionScreen {
 					} catch (err) {
 						spinner.remove();
 						error.textContent = err.message ?? err.statusText ?? err ?? "An unknown error occurred.";
+						// @ts-ignore
+						// Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)
+						// Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)
 						input.disabled = select.disabled = input.readonly = select.readonly = false;
 						return;
 					}
@@ -106,7 +118,7 @@ export class UserSelectionScreen {
 				userSelection.classList.add("no-users");
 				input.focus();
 			}
-		}).then((r) => {
+		}).then((r: SelectedUser) => {
 			userSelection.remove();
 			return r;
 		});