use typed comfy app

package.json

@@ -7,7 +7,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "vite": "^6.3.5",
-    "vite-plugin-vue-devtools": "^7.7.2"
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "@comfyorg/comfyui-frontend-types": "^1.22.1"
   },
   "scripts": {
     "build": "vite build"

src/components/VueExampleComponent.vue

@@ -3,38 +3,49 @@
     <h1>{{ t("vue-basic.title") }}</h1>
     <div>
       <DrawingApp
-        ref="drawingAppRef"
-        :width="300"
-        :height="300"
-        @state-save="handleStateSave"
+          ref="drawingAppRef"
+          :width="300"
+          :height="300"
+          @state-save="handleStateSave"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
-  import DrawingApp from "./DrawingApp.vue";
-  import { useI18n } from 'vue-i18n'
-  import { app } from "../../../scripts/app.js";
+import {onMounted, ref} from 'vue'
+import DrawingApp from "./DrawingApp.vue";
+import {useI18n} from 'vue-i18n'
+import {ComfyApp} from '@comfyorg/comfyui-frontend-types'
+
+declare global {
+  interface Window {
+    app?: ComfyApp
+  }
+}
 
-  const { t } = useI18n()
-  const drawingAppRef = ref<InstanceType<typeof DrawingApp> | null>(null);
-  const canvasDataURL = ref<string | null>(null);
+const {t} = useI18n()
+const drawingAppRef = ref<InstanceType<typeof DrawingApp> | null>(null);
+const canvasDataURL = ref<string | null>(null);
 
-  const { widget } = defineProps<{
-    widget: ComponentWidget<string[]>
-  }>()
+const {widget} = defineProps<{
+  widget: ComponentWidget<string[]>
+}>()
 
-  const node = widget.node
+const node = widget.node
 
-  function handleStateSave(dataURL: string) {
-    canvasDataURL.value = dataURL;
+function handleStateSave(dataURL: string) {
+  canvasDataURL.value = dataURL;
 
-    console.log("canvas state saved:", dataURL.substring(0, 50) + "...");
-  }
+  console.log("canvas state saved:", dataURL.substring(0, 50) + "...");
+}
+
+async function uploadTempImage(imageData: string, prefix: string) {
+  try {
+    if (!window.app?.api) {
+      throw new Error('ComfyUI API not available')
+    }
 
-  async function uploadTempImage(imageData: string, prefix: string) {
     const blob = await fetch(imageData).then((r) => r.blob())
     const name = `${prefix}_${Date.now()}.png`
     const file = new File([blob], name)
@@ -44,31 +55,45 @@
     body.append('subfolder', 'threed')
     body.append('type', 'temp')
 
-    console.log(app.api.fetchApi)
+    console.log('Vue Component: Using window.app.api.fetchApi')
 
-    const resp = await app.api.fetchApi('/upload/image', {
+    const resp = await window.app.api.fetchApi('/upload/image', {
       method: 'POST',
       body
     })
 
     return resp.json()
+  } catch (error) {
+    console.error('Vue Component: Error uploading image:', error)
+    throw error
   }
+}
 
-  onMounted(() => {
-    widget.serializeValue = async (node, index) => {
-      console.log("inside vue")
+onMounted(() => {
+  widget.serializeValue = async (node, index) => {
+    try {
+      console.log("Vue Component: inside vue serializeValue")
       console.log("node", node)
       console.log("index", index)
 
       const canvasData = canvasDataURL.value
 
+      if (!canvasData) {
+        console.warn('Vue Component: No canvas data available')
+        return {image: null}
+      }
+
       const data = await uploadTempImage(canvasData, "test_vue_basic")
 
       return {
         image: `threed/${data.name} [temp]`
       }
+    } catch (error) {
+      console.error('Vue Component: Error in serializeValue:', error)
+      return {image: null}
     }
-  })
+  }
+})
 </script>
 
 <style scoped>

src/main.ts

@@ -1,9 +1,13 @@
 import { app } from "../../../scripts/app.js";
+import { ComfyApp } from '@comfyorg/comfyui-frontend-types'
+
 import { addWidget, ComponentWidgetImpl } from "../../../scripts/domWidget.js";
 
 import VueExampleComponent from "@/components/VueExampleComponent.vue";
 
-app.registerExtension({
+const comfyApp: ComfyApp = app;
+
+comfyApp.registerExtension({
     name: 'vue-basic',
     getCustomWidgets(app) {
         return {
@@ -24,7 +28,7 @@ app.registerExtension({
                 })
 
                 addWidget(node, widget)
-                
+
                 return {widget}
             }
         }