Cleanup (#915)

* (update) cleanup:
- move reflect to main.ts
- add config.ts with comfy frontend version
- cleanup index.html and App.vue

* (fix) lint doesn't like branch assignments

* (fix) properly add __COMFYUI_FRONTEND_VERSION__ to ts globals

src/App.vue

@@ -20,31 +20,39 @@ import {
   watch,
   watchEffect
 } from 'vue'
+import config from '@/config'
+import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
+import { useI18n } from 'vue-i18n'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
+import { api } from '@/scripts/api'
+import { StatusWsMessageStatus } from '@/types/apiTypes'
+import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
+import type { ToastMessageOptions } from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { i18n } from '@/i18n'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
-import { app } from './scripts/app'
-import { useSettingStore } from './stores/settingStore'
-import { useI18n } from 'vue-i18n'
-import { useWorkspaceStore } from './stores/workspaceStateStore'
-import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
-import GlobalDialog from './components/dialog/GlobalDialog.vue'
-import GlobalToast from './components/toast/GlobalToast.vue'
-import UnloadWindowConfirmDialog from './components/dialog/UnloadWindowConfirmDialog.vue'
-import BrowserTabTitle from './components/BrowserTabTitle.vue'
-import { api } from './scripts/api'
-import { StatusWsMessageStatus } from './types/apiTypes'
-import { useQueuePendingTaskCountStore } from './stores/queueStore'
-import type { ToastMessageOptions } from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
-import { i18n } from './i18n'
-import { useExecutionStore } from './stores/executionStore'
-import { useWorkflowStore } from './stores/workflowStore'
+import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
+import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import GlobalToast from '@/components/toast/GlobalToast.vue'
+import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
+import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
 
 const isLoading = computed<boolean>(() => useWorkspaceStore().spinner)
-const theme = computed<string>(() =>
-  useSettingStore().get('Comfy.ColorPalette')
-)
+
+const { t } = useI18n()
+const toast = useToast()
+const settingStore = useSettingStore()
+const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
+const executionStore = useExecutionStore()
+const workflowStore = useWorkflowStore()
+
+const theme = computed<string>(() => settingStore.get('Comfy.ColorPalette'))
+
 watch(
   theme,
   (newTheme) => {
@@ -60,7 +68,7 @@ watch(
 )
 
 watchEffect(() => {
-  const fontSize = useSettingStore().get('Comfy.TextareaWidget.FontSize')
+  const fontSize = settingStore.get('Comfy.TextareaWidget.FontSize')
   document.documentElement.style.setProperty(
     '--comfy-textarea-font-size',
     `${fontSize}px`
@@ -68,7 +76,7 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  const padding = useSettingStore().get('Comfy.TreeExplorer.ItemPadding')
+  const padding = settingStore.get('Comfy.TreeExplorer.ItemPadding')
   document.documentElement.style.setProperty(
     '--comfy-tree-explorer-item-padding',
     `${padding}px`
@@ -76,15 +84,14 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  const locale = useSettingStore().get('Comfy.Locale')
+  const locale = settingStore.get('Comfy.Locale')
   if (locale) {
-    i18n.global.locale.value = locale
+    i18n.global.locale.value = locale as 'en' | 'zh'
   }
 })
 
-const { t } = useI18n()
 const init = () => {
-  useSettingStore().addSettings(app.ui.settings)
+  settingStore.addSettings(app.ui.settings)
   app.extensionManager = useWorkspaceStore()
   app.extensionManager.registerSidebarTab({
     id: 'queue',
@@ -108,19 +115,20 @@ const init = () => {
   })
 }
 
-const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
-const onStatus = (e: CustomEvent<StatusWsMessageStatus>) =>
+const onStatus = (e: CustomEvent<StatusWsMessageStatus>) => {
   queuePendingTaskCountStore.update(e)
+}
 
-const toast = useToast()
 const reconnectingMessage: ToastMessageOptions = {
   severity: 'error',
   summary: t('reconnecting')
 }
+
 const onReconnecting = () => {
   toast.remove(reconnectingMessage)
   toast.add(reconnectingMessage)
 }
+
 const onReconnected = () => {
   toast.remove(reconnectingMessage)
   toast.add({
@@ -130,23 +138,25 @@ const onReconnected = () => {
   })
 }
 
-const executionStore = useExecutionStore()
 app.workflowManager.executionStore = executionStore
 watchEffect(() => {
   app.menu.workflows.buttonProgress.style.width = `${executionStore.executionProgress}%`
 })
-const workflowStore = useWorkflowStore()
 app.workflowManager.workflowStore = workflowStore
 
 onMounted(() => {
+  window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
+  console.log('ComfyUI Front-end version:', config.app_version)
+
   api.addEventListener('status', onStatus)
   api.addEventListener('reconnecting', onReconnecting)
   api.addEventListener('reconnected', onReconnected)
   executionStore.bindExecutionEvents()
+
   try {
     init()
   } catch (e) {
-    console.error('Failed to init Vue app', e)
+    console.error('Failed to init ComfyUI frontend', e)
   }
 })
 

src/config.ts

@@ -0,0 +1,4 @@
+export default {
+  app_title: 'ComfyUI',
+  app_version: __COMFYUI_FRONTEND_VERSION__
+}

src/main.ts

@@ -3,12 +3,13 @@ import router from '@/router'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { i18n } from './i18n'
+import { definePreset } from '@primevue/themes'
 import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
-import { definePreset } from '@primevue/themes'
 import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
+import 'reflect-metadata'
 
 import '@comfyorg/litegraph/style.css'
 import '@/assets/css/style.css'

src/vite-env.d.ts

@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+
+declare global {
+  interface Window {
+    __COMFYUI_FRONTEND_VERSION__: string
+  }
+}