Mount vue app after comfy app init (#167)

* Mount vue app after comfy app

* Emit event when vue app loaded

* Dispatch event to window

* Fix test timeout

* Try observe variable

* Revert

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/App.vue

@@ -9,13 +9,13 @@
 import { onMounted, onUnmounted, provide, ref } from "vue";
 import NodeSearchboxPopover from "@/components/NodeSearchBoxPopover.vue";
 import ProgressSpinner from "primevue/progressspinner";
-import { api } from "@/scripts/api";
 import {
   NodeSearchService,
   SYSTEM_NODE_DEFS,
 } from "./services/nodeSearchService";
 import { ColorPaletteLoadedEvent } from "./types/colorPalette";
 import { LiteGraphNodeSearchSettingEvent } from "./scripts/ui";
+import { app } from "./scripts/app";
 
 const isLoading = ref(true);
 const nodeSearchEnabled = ref(false);
@@ -37,7 +37,7 @@ const updateNodeSearchSetting = (e: LiteGraphNodeSearchSettingEvent) => {
 };
 
 const init = async () => {
-  const nodeDefs = Object.values(await api.getNodeDefs());
+  const nodeDefs = Object.values(app.nodeDefs);
   nodeSearchService.value = new NodeSearchService([
     ...nodeDefs,
     ...SYSTEM_NODE_DEFS,
@@ -48,6 +48,9 @@ const init = async () => {
     "comfy:setting:litegraph-node-search",
     updateNodeSearchSetting
   );
+
+  app.ui.settings.refreshSetting("Comfy.NodeSearchBoxImpl");
+  app.ui.settings.refreshSetting("Comfy.ColorPalette");
 };
 
 onMounted(async () => {

src/main.ts

@@ -7,22 +7,23 @@ import App from "./App.vue";
 import { app as comfyApp } from "@/scripts/app";
 
 const app = createApp(App);
-app
-  .use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        prefix: "p",
-        cssLayer: false,
-        // This is a workaround for the issue with the dark mode selector
-        // https://github.com/primefaces/primevue/issues/5515
-        darkModeSelector: ".dark-theme, :root:has(.dark-theme)",
-      },
-    },
-  })
-  .mount("#vue-app");
 
 comfyApp.setup().then(() => {
   window["app"] = comfyApp;
   window["graph"] = comfyApp.graph;
+
+  app
+    .use(PrimeVue, {
+      theme: {
+        preset: Aura,
+        options: {
+          prefix: "p",
+          cssLayer: false,
+          // This is a workaround for the issue with the dark mode selector
+          // https://github.com/primefaces/primevue/issues/5515
+          darkModeSelector: ".dark-theme, :root:has(.dark-theme)",
+        },
+      },
+    })
+    .mount("#vue-app");
 });

src/scripts/app.ts

@@ -115,6 +115,7 @@ export class ComfyApp {
   bodyRight: HTMLElement;
   bodyBottom: HTMLElement;
   menu: ComfyAppMenu;
+  nodeDefs: Record<string, ComfyNodeDef>;
 
   constructor() {
     this.ui = new ComfyUI(this);
@@ -1871,7 +1872,6 @@ export class ComfyApp {
     this.#addAfterConfigureHandler();
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph);
-    this.ui.settings.refreshSetting("Comfy.NodeSearchBoxImpl");
     this.ctx = canvasEl.getContext("2d");
 
     LiteGraph.release_link_on_empty_shows_menu = true;
@@ -1955,9 +1955,9 @@ export class ComfyApp {
    * Registers nodes with the graph
    */
   async registerNodes() {
-    const app = this;
     // Load node definitions from the backend
     const defs = await api.getNodeDefs();
+    this.nodeDefs = defs;
     await this.registerNodesFromDefs(defs);
     await this.#invokeExtensionsAsync("registerCustomNodes");
   }