Migrate deprecated ui.js import to window.comfyAPI.ui.$el (fixes #30)

js/app/canvas_view.js

@@ -4,8 +4,7 @@ import { app } from "../../../scripts/app.js";
 import { api } from "../../../scripts/api.js";
 // @ts-ignore
 import { ChangeTracker } from "../../../scripts/changeTracker.js";
-// @ts-ignore
-import { $el } from "../../../scripts/ui.js";
+const $el = window.comfyAPI?.ui?.$el;
 import { addStylesheet, getUrl, loadTemplate } from "../utils/resource_manager.js";
 import { Canvas, configureCanvasImagePreviewWidget } from "../canvas/canvas.js";
 import { canvasNodeInstances, installLayerForgeMultiImagePromptPatch, installLayerForgeVirtualWirePatch, isLayerForgeTransportInput, pruneLayerForgeTransportInputs, scheduleLayerForgeImageConnectionConversion, } from "./layer_forge_connections.js";

js/utils/resource_manager.js

@@ -1,5 +1,3 @@
-// @ts-ignore
-import { $el } from "../../../scripts/ui.js";
 import { createModuleLogger } from "../log_system/log_funcs.js";
 import { withErrorHandling, createValidationError, createNetworkError } from "../shared/error_handler.js";
 const log = createModuleLogger('ResourceManager');
@@ -11,12 +9,23 @@ export const addStylesheet = withErrorHandling(function (url) {
     if (url.endsWith(".js")) {
         url = url.substr(0, url.length - 2) + "css";
     }
-    $el("link", {
-        parent: document.head,
-        rel: "stylesheet",
-        type: "text/css",
-        href: url.startsWith("http") ? url : getUrl(url),
-    });
+    const href = url.startsWith("http") ? url : getUrl(url);
+    const $el = window.comfyAPI?.ui?.$el;
+    if ($el) {
+        $el("link", {
+            parent: document.head,
+            rel: "stylesheet",
+            type: "text/css",
+            href,
+        });
+    }
+    else {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.href = href;
+        document.head.appendChild(link);
+    }
     log.debug('Stylesheet added successfully:', { finalUrl: url });
 }, 'addStylesheet');
 export function getUrl(path, baseUrl) {

src/app/canvas_view.ts

@@ -6,8 +6,7 @@ import {api} from "../../../scripts/api.js";
 import {ComfyApp} from "../../../scripts/app.js";
 // @ts-ignore
 import {ChangeTracker} from "../../../scripts/changeTracker.js";
-// @ts-ignore
-import {$el} from "../../../scripts/ui.js";
+const $el: any = window.comfyAPI?.ui?.$el;
 
 import { addStylesheet, getUrl, loadTemplate } from "../utils/resource_manager.js";
 

src/shared/types.ts

@@ -59,6 +59,13 @@ export interface ComfyNode {
 
 declare global {
     interface Window {
+        comfyAPI?: {
+            ui?: {
+                $el?: any;
+                [key: string]: any;
+            };
+            [key: string]: any;
+        };
         MaskEditorDialog?: {
             instance?: {
                 getMessageBroker: () => any;

src/utils/resource_manager.ts

@@ -1,5 +1,3 @@
-// @ts-ignore
-import { $el } from "../../../scripts/ui.js";
 import { createModuleLogger } from "../log_system/log_funcs.js";
 import { withErrorHandling, createValidationError, createNetworkError } from "../shared/error_handler.js";
 
@@ -15,12 +13,22 @@ export const addStylesheet = withErrorHandling(function(url: string): void {
     if (url.endsWith(".js")) {
         url = url.substr(0, url.length - 2) + "css";
     }
-    $el("link", {
-        parent: document.head,
-        rel: "stylesheet",
-        type: "text/css",
-        href: url.startsWith("http") ? url : getUrl(url),
-    });
+    const href = url.startsWith("http") ? url : getUrl(url);
+    const $el = window.comfyAPI?.ui?.$el;
+    if ($el) {
+        $el("link", {
+            parent: document.head,
+            rel: "stylesheet",
+            type: "text/css",
+            href,
+        });
+    } else {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.href = href;
+        document.head.appendChild(link);
+    }
 
     log.debug('Stylesheet added successfully:', { finalUrl: url });
 }, 'addStylesheet');

tsconfig.json

@@ -14,7 +14,6 @@
     "paths": {
       "../../scripts/app.js": ["./__mocks__/app.js"],
       "../../scripts/api.js": ["./__mocks__/api.js"],
-      "../../scripts/ui.js": ["./__mocks__/ui.js"],
       "./*.js": ["./src/*.ts"],
       "./utils/*.js": ["./src/utils/*.ts"]
     }