Force import DraggableList (#24)

* Force import

* Fix circular import

src/scripts/app.ts

@@ -6,6 +6,7 @@ import { defaultGraph } from "./defaultGraph";
 import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo";
 import { addDomClippingSetting } from "./domWidget";
 import { createImageHost, calculateImageGrid } from "./ui/imagePreview"
+import { DraggableList } from "./ui/draggableList";
 import { applyTextReplacements, addStylesheet } from "./utils";
 import type { ComfyExtension } from "/types/comfy";
 import type { LGraph, LGraphCanvas, LGraphNode } from "/types/litegraph";
@@ -53,9 +54,11 @@ export class ComfyApp {
 	static clipspace_return_node = null;
 
 	// Force vite to import utils.ts as part of index.
+	// Force import of DraggableList.
 	static utils = {
 		applyTextReplacements,
 		addStylesheet,
+		DraggableList,
 	};
 
 	ui: ComfyUI;

src/scripts/ui/draggableList.ts

@@ -1,4 +1,3 @@
-// @ts-check
 /*
 	Original implementation:
     https://github.com/TahaSh/drag-to-reorder
@@ -25,7 +24,7 @@
     SOFTWARE.
 */
 
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 
 $el("style", {
     parent: document.head,
@@ -92,7 +91,7 @@ export class DraggableList extends EventTarget {
 		return item.hasAttribute("data-is-toggled");
 	}
 
-	on(source, event, listener, options) {
+	on(source, event, listener, options?) {
 		listener = listener.bind(this);
 		source.addEventListener(event, listener, options);
 		return () => source.removeEventListener(event, listener);

vite.config.mts

@@ -88,7 +88,6 @@ export default defineConfig({
 			targets: [
 				{src: "src/lib/*", dest: "lib/"},
 				{src: "src/extensions/*", dest: "extensions/"},
-				{src: "src/scripts/ui/draggableList.js", dest: "scripts/ui/"},
 			],
 		}),
 	],