Migrate logging.js (#6)

* Rename js to ts

* Format code

* Fix all tsc errors

src/scripts/app.js

@@ -1,4 +1,4 @@
-import { ComfyLogging } from "./logging.js";
+import { ComfyLogging } from "./logging";
 import { ComfyWidgets, initWidgets } from "./widgets";
 import { ComfyUI, $el } from "./ui.js";
 import { api } from "./api.js";

src/scripts/logging.ts

@@ -1,5 +1,6 @@
 import { $el, ComfyDialog } from "./ui.js";
 import { api } from "./api.js";
+import type { ComfyApp } from "./app.js";
 
 $el("style", {
 	textContent: `
@@ -27,27 +28,27 @@ $el("style", {
 
 // Stringify function supporting max depth and removal of circular references
 // https://stackoverflow.com/a/57193345
-function stringify(val, depth, replacer, space, onGetObjID) {
+function stringify(val, depth, replacer, space, onGetObjID?) {
 	depth = isNaN(+depth) ? 1 : depth;
 	var recursMap = new WeakMap();
-	function _build(val, depth, o, a, r) {
+	function _build(val, depth, o?, a?, r?) {
 		// (JSON.stringify() has it's own rules, which we respect here by using it for property iteration)
 		return !val || typeof val != "object"
 			? val
 			: ((r = recursMap.has(val)),
-			  recursMap.set(val, true),
-			  (a = Array.isArray(val)),
-			  r
+				recursMap.set(val, true),
+				(a = Array.isArray(val)),
+				r
 					? (o = (onGetObjID && onGetObjID(val)) || null)
 					: JSON.stringify(val, function (k, v) {
-							if (a || depth > 0) {
-								if (replacer) v = replacer(k, v);
-								if (!k) return (a = Array.isArray(v)), (val = v);
-								!o && (o = a ? [] : {});
-								o[k] = _build(v, a ? depth : depth - 1);
-							}
-					  }),
-			  o === void 0 ? (a ? [] : {}) : o);
+						if (a || depth > 0) {
+							if (replacer) v = replacer(k, v);
+							if (!k) return (a = Array.isArray(v)), (val = v);
+							!o && (o = a ? [] : {});
+							o[k] = _build(v, a ? depth : depth - 1);
+						}
+					}),
+				o === void 0 ? (a ? [] : {}) : o);
 	}
 	return JSON.stringify(_build(val, depth), null, space);
 }
@@ -75,14 +76,16 @@ const jsonReplacer = (k, v, ui) => {
 	return v;
 };
 
-const fileInput = $el("input", {
+const fileInput: HTMLInputElement = $el("input", {
 	type: "file",
 	accept: ".json",
 	style: { display: "none" },
 	parent: document.body,
-});
+}) as HTMLInputElement;
 
 class ComfyLoggingDialog extends ComfyDialog {
+	logging: any;
+
 	constructor(logging) {
 		super();
 		this.logging = logging;
@@ -117,7 +120,7 @@ class ComfyLoggingDialog extends ComfyDialog {
 			reader.onload = () => {
 				fileInput.remove();
 				try {
-					const obj = JSON.parse(reader.result);
+					const obj = JSON.parse(reader.result as string);
 					if (obj instanceof Array) {
 						this.show(obj);
 					} else {
@@ -164,7 +167,7 @@ class ComfyLoggingDialog extends ComfyDialog {
 		}
 	}
 
-	show(entries) {
+	show(entries?: any[]) {
 		if (!entries) entries = this.logging.entries;
 		this.element.style.width = "100%";
 		const cols = {
@@ -239,6 +242,9 @@ export class ComfyLogging {
 	#enabled;
 	#console = {};
 
+	app: ComfyApp;
+	dialog: ComfyLoggingDialog;
+
 	get enabled() {
 		return this.#enabled;
 	}
@@ -263,7 +269,7 @@ export class ComfyLogging {
 	}
 
 	addSetting() {
-		const settingId = "Comfy.Logging.Enabled";
+		const settingId: string = "Comfy.Logging.Enabled";
 		const htmlSettingId = settingId.replaceAll(".", "-");
 		const setting = this.app.ui.settings.addSetting({
 			id: settingId,
@@ -292,6 +298,9 @@ export class ComfyLogging {
 						$el("button", {
 							textContent: "View Logs",
 							onclick: () => {
+								// TODO: Remove this ts-ignore when settings dialog
+								// is migrated.
+								// @ts-ignore
 								this.app.ui.settings.element.close();
 								this.dialog.show();
 							},

src/scripts/ui.js

@@ -14,6 +14,7 @@ export const ComfyDialog = _ComfyDialog;
  *   dataset?: DOMStringMap,
  *   style?: CSSStyleDeclaration,
  * 	 for?: string
+ *   ...any
  * } | undefined } propsOrChildren 
  * @param { Element[] | undefined } [children]
  * @returns 

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     "sourceMap": true,
     "esModuleInterop": true,