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

eslint.config.js

@@ -14,7 +14,14 @@ export default [
       'src/types/vue-shim.d.ts'
     ]
   },
-  { languageOptions: { globals: globals.browser } },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      }
+    }
+  },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   ...pluginVue.configs['flat/essential'],

global.d.ts

@@ -0,0 +1 @@
+declare const __COMFYUI_FRONTEND_VERSION__: string

index.html

@@ -4,21 +4,6 @@
     <meta charset="UTF-8">
     <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <!-- Browser Test Fonts -->
-    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-    <style>
-      * {
-        font-family: 'Roboto Mono', 'Noto Color Emoji';
-      }
-    </style> -->
-    <script type="module" src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script type="module">
-      import 'reflect-metadata';
-      window["__COMFYUI_FRONTEND_VERSION__"] = __COMFYUI_FRONTEND_VERSION__;
-      console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);
-    </script>
-    <script type="module" src="src/main.ts"></script>
     <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
   </head>
@@ -51,5 +36,7 @@
         </form>
       </main>
     </div>
+    <script type="module" src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>

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 NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
-import { useSettingStore } from './stores/settingStore'
+import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
-import { useI18n } from 'vue-i18n'
+import GlobalToast from '@/components/toast/GlobalToast.vue'
-import { useWorkspaceStore } from './stores/workspaceStateStore'
+import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
-import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
+import BrowserTabTitle from '@/components/BrowserTabTitle.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'
 
 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
+  }
+}

tsconfig.json

@@ -33,6 +33,7 @@
     "src/**/*",
     "src/**/*.vue",
     "src/types/**/*.d.ts",
-    "tests-ui/**/*"
+    "tests-ui/**/*",
+    "global.d.ts"
   ]
 }