Rename to ts (#92)

Rename

Remove ts-nocheck, fix errors

Update state when graph cleared via UI (#88)

Convert to ts, fix imports

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

src/scripts/ui/components/asyncDialog.ts

@@ -1,10 +1,10 @@
 import { ComfyDialog } from "../dialog";
 import { $el } from "../../ui";
 
-export class ComfyAsyncDialog extends ComfyDialog {
-  #resolve;
+export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
+  #resolve: (value: any) => void;
 
-  constructor(actions) {
+  constructor(actions?: Array<string | { value?: any; text: string }>) {
     super(
       "dialog.comfy-dialog.comfyui-dialog",
       actions?.map((opt) => {
@@ -20,7 +20,7 @@ export class ComfyAsyncDialog extends ComfyDialog {
     );
   }
 
-  show(html) {
+  show(html: string | HTMLElement | HTMLElement[]) {
     this.element.addEventListener("close", () => {
       this.close();
     });
@@ -32,7 +32,7 @@ export class ComfyAsyncDialog extends ComfyDialog {
     });
   }
 
-  showModal(html) {
+  showModal(html: string | HTMLElement | HTMLElement[]) {
     this.element.addEventListener("close", () => {
       this.close();
     });

src/scripts/ui/components/button.ts

@@ -1,37 +1,41 @@
-// @ts-nocheck
-
 import { $el } from "../../ui";
-import { applyClasses, toggleElement } from "../utils";
+import { applyClasses, ClassList, toggleElement } from "../utils";
 import { prop } from "../../utils";
+import type { ComfyPopup } from "./popup";
+import type { ComfyComponent } from ".";
+import type { ComfyApp } from "scripts/app";
 
-/**
- * @typedef {{
- *    icon?: string;
- *    overIcon?: string;
- *    iconSize?: number;
- *    content?: string | HTMLElement;
- *    tooltip?: string;
- *    enabled?: boolean;
- *    action?: (e: Event, btn: ComfyButton) => void,
- *    classList?: import("../utils").ClassList,
- * 	  visibilitySetting?: { id: string, showValue: any },
- * 	  app?: import("../../app").ComfyApp
- * }} ComfyButtonProps
- */
-export class ComfyButton {
+type ComfyButtonProps = {
+  icon?: string;
+  overIcon?: string;
+  iconSize?: number;
+  content?: string | HTMLElement;
+  tooltip?: string;
+  enabled?: boolean;
+  action?: (e: Event, btn: ComfyButton) => void;
+  classList?: ClassList;
+  visibilitySetting?: { id: string; showValue: any };
+  app?: ComfyApp;
+};
+
+export class ComfyButton implements ComfyComponent<HTMLElement> {
   #over = 0;
   #popupOpen = false;
   isOver = false;
   iconElement = $el("i.mdi");
   contentElement = $el("span");
-  /**
-   * @type {import("./popup").ComfyPopup}
-   */
-  popup;
+  popup: ComfyPopup;
+  element: HTMLElement;
+  overIcon: string;
+  iconSize: number;
+  content: string | HTMLElement;
+  icon: string;
+  tooltip: string;
+  classList: ClassList;
+  hidden: boolean;
+  enabled: boolean;
+  action: (e: Event, btn: ComfyButton) => void;
 
-  /**
-   * @param {ComfyButtonProps} opts
-   */
   constructor({
     icon,
     overIcon,
@@ -43,7 +47,7 @@ export class ComfyButton {
     visibilitySetting,
     app,
     enabled = true,
-  }) {
+  }: ComfyButtonProps) {
     this.element = $el(
       "button",
       {
@@ -101,7 +105,7 @@ export class ComfyButton {
     this.hidden = prop(this, "hidden", false, this.updateClasses);
     this.enabled = prop(this, "enabled", enabled, () => {
       this.updateClasses();
-      this.element.disabled = !this.enabled;
+      (this.element as HTMLButtonElement).disabled = !this.enabled;
     });
     this.action = prop(this, "action", action);
     this.element.addEventListener("click", (e) => {
@@ -148,12 +152,7 @@ export class ComfyButton {
     applyClasses(this.element, this.classList, ...internalClasses);
   };
 
-  /**
-   *
-   * @param { import("./popup").ComfyPopup } popup
-   * @param { "click" | "hover" } mode
-   */
-  withPopup(popup, mode = "click") {
+  withPopup(popup: ComfyPopup, mode: "click" | "hover" = "click") {
     this.popup = popup;
 
     if (mode === "hover") {

src/scripts/ui/components/buttonGroup.ts

@@ -1,34 +1,26 @@
-// @ts-nocheck
-
 import { $el } from "../../ui";
 import { ComfyButton } from "./button";
 import { prop } from "../../utils";
 
 export class ComfyButtonGroup {
   element = $el("div.comfyui-button-group");
+  buttons: (HTMLElement | ComfyButton)[];
 
-  /** @param {Array<ComfyButton | HTMLElement>} buttons */
-  constructor(...buttons) {
+  constructor(...buttons: (HTMLElement | ComfyButton)[]) {
     this.buttons = prop(this, "buttons", buttons, () => this.update());
   }
 
-  /**
-   * @param {ComfyButton} button
-   * @param {number} index
-   */
-  insert(button, index) {
+  insert(button: ComfyButton, index: number) {
     this.buttons.splice(index, 0, button);
     this.update();
   }
 
-  /** @param {ComfyButton} button */
-  append(button) {
+  append(button: ComfyButton) {
     this.buttons.push(button);
     this.update();
   }
 
-  /** @param {ComfyButton|number} indexOrButton */
-  remove(indexOrButton) {
+  remove(indexOrButton: ComfyButton | number) {
     if (typeof indexOrButton !== "number") {
       indexOrButton = this.buttons.indexOf(indexOrButton);
     }

src/scripts/ui/components/index.ts

@@ -0,0 +1,3 @@
+export interface ComfyComponent<T extends HTMLElement = HTMLElement> {
+  element: T;
+}

src/scripts/ui/components/popup.ts

@@ -1,24 +1,19 @@
-// @ts-nocheck
-
 import { prop } from "../../utils";
 import { $el } from "../../ui";
-import { applyClasses } from "../utils";
+import { applyClasses, ClassList } from "../utils";
 
 export class ComfyPopup extends EventTarget {
   element = $el("div.comfyui-popup");
+  open: boolean;
+  children: HTMLElement[];
+  target: HTMLElement;
+  ignoreTarget: boolean;
+  container: HTMLElement;
+  position: string;
+  closeOnEscape: boolean;
+  horizontal: string;
+  classList: ClassList;
 
-  /**
-   * @param {{
-   *     target: HTMLElement,
-   *      container?: HTMLElement,
-   *      classList?: import("../utils").ClassList,
-   * 		ignoreTarget?: boolean,
-   * 		closeOnEscape?: boolean,
-   * 		position?: "absolute" | "relative",
-   * 		horizontal?: "left" | "right"
-   * }} param0
-   * @param  {...HTMLElement} children
-   */
   constructor(
     {
       target,
@@ -28,8 +23,16 @@ export class ComfyPopup extends EventTarget {
       closeOnEscape = true,
       position = "absolute",
       horizontal = "left",
+    }: {
+      target: HTMLElement;
+      container?: HTMLElement;
+      classList?: ClassList;
+      ignoreTarget?: boolean;
+      closeOnEscape?: boolean;
+      position?: "absolute" | "relative";
+      horizontal?: "left" | "right";
     },
-    ...children
+    ...children: HTMLElement[]
   ) {
     super();
     this.target = target;

src/scripts/ui/components/splitButton.ts

@@ -1,23 +1,27 @@
-// @ts-nocheck
-
 import { $el } from "../../ui";
 import { ComfyButton } from "./button";
 import { prop } from "../../utils";
 import { ComfyPopup } from "./popup";
 
 export class ComfySplitButton {
-  /**
-   *  @param {{
-   * 		primary: ComfyButton,
-   * 		mode?: "hover" | "click",
-   * 		horizontal?: "left" | "right",
-   * 		position?: "relative" | "absolute"
-   *  }} param0
-   *  @param {Array<ComfyButton> | Array<HTMLElement>} items
-   */
+  arrow: ComfyButton;
+  element: HTMLElement;
+  popup: ComfyPopup;
+  items: Array<HTMLElement | ComfyButton>;
+
   constructor(
-    { primary, mode, horizontal = "left", position = "relative" },
-    ...items
+    {
+      primary,
+      mode,
+      horizontal = "left",
+      position = "relative",
+    }: {
+      primary: ComfyButton;
+      mode?: "hover" | "click";
+      horizontal?: "left" | "right";
+      position?: "relative" | "absolute";
+    },
+    ...items: Array<HTMLElement | ComfyButton>
   ) {
     this.arrow = new ComfyButton({
       icon: "chevron-down",
@@ -46,7 +50,7 @@ export class ComfySplitButton {
 
   update() {
     this.popup.element.replaceChildren(
-      ...this.items.map((b) => b.element ?? b)
+      ...this.items.map((b) => ("element" in b ? b.element : b))
     );
   }
 }