expose Vue

eslint.config.js

@@ -1,4 +1,5 @@
 import pluginJs from '@eslint/js'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import globals from 'globals'
@@ -33,6 +34,7 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   ...pluginVue.configs['flat/recommended'],
+  eslintPluginPrettierRecommended,
   {
     files: ['src/**/*.vue'],
     languageOptions: {
@@ -50,7 +52,8 @@ export default [
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
-      'unused-imports/no-unused-imports': 'error'
+      'unused-imports/no-unused-imports': 'error',
+      'vue/no-v-html': 'off'
     }
   }
 ]

global.d.ts

@@ -15,3 +15,7 @@ interface Navigator {
     visible: boolean
   }
 }
+
+interface Window {
+  Vue: typeof import('vue')
+}

package-lock.json

@@ -61,6 +61,8 @@
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "eslint": "^9.12.0",
+        "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-prettier": "^5.2.6",
         "eslint-plugin-unused-imports": "^4.1.4",
         "eslint-plugin-vue": "^9.27.0",
         "fs-extra": "^11.2.0",
@@ -1791,6 +1793,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.2.tgz",
+      "integrity": "sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.45.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
@@ -5620,6 +5635,50 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.2.tgz",
+      "integrity": "sha512-Epgp/EofAUeEpIdZkW60MHKvPyru1ruQJxPL+WIycnaPApuseK0Zpkrh/FwL9oIpQvIhJwV7ptOy0DWUjTlCiA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.6.tgz",
+      "integrity": "sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.11.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-unused-imports": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.4.tgz",
@@ -6078,6 +6137,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -10275,6 +10341,19 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
@@ -11663,6 +11742,23 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/synckit": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.3.tgz",
+      "integrity": "sha512-szhWDqNNI9etJUvbZ1/cx1StnZx8yMmFxme48SwR4dty4ioSY50KEZlpv0qAfgc1fpRzuh9hBXEzoCpJ779dLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
@@ -11954,10 +12050,11 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-      "dev": true
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
     },
     "node_modules/tsx": {
       "version": "4.16.2",

package.json

@@ -44,6 +44,8 @@
     "autoprefixer": "^10.4.19",
     "chalk": "^5.3.0",
     "eslint": "^9.12.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.27.0",
     "fs-extra": "^11.2.0",

src/components/bottomPanel/BottomPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full">
     <Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
-      <TabList pt:tabList="border-none">
+      <TabList pt:tab-list="border-none">
         <div class="w-full flex justify-between">
           <div class="tabs-container">
             <Tab

src/components/sidebar/SidebarIcon.vue

@@ -1,25 +1,24 @@
 <template>
   <Button
-    v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
-    :class="props.class"
+    v-tooltip="{ value: tooltip, showDelay: 300, hideDelay: 300 }"
     text
     :pt="{
       root: {
         class: `side-bar-button ${
-          props.selected
+          selected
             ? 'p-button-primary side-bar-button-selected'
             : 'p-button-secondary'
         }`,
-        'aria-label': props.tooltip
+        'aria-label': tooltip
       }
     }"
     @click="emit('click', $event)"
   >
     <template #icon>
       <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-        <i :class="props.icon + ' side-bar-button-icon'" />
+        <i :class="icon + ' side-bar-button-icon'" />
       </OverlayBadge>
-      <i v-else :class="props.icon + ' side-bar-button-icon'" />
+      <i v-else :class="icon + ' side-bar-button-icon'" />
     </template>
   </Button>
 </template>
@@ -27,32 +26,25 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 
-// Add this line to import PropsType
+const {
+  icon = '',
+  selected = false,
+  tooltip = '',
+  iconBadge = ''
+} = defineProps<{
+  icon?: string
+  selected?: boolean
+  tooltip?: string
+  iconBadge?: string | (() => string | null)
+}>()
 
-const props = defineProps({
-  icon: String,
-  selected: Boolean,
-  tooltip: {
-    type: String,
-    default: ''
-  },
-  class: {
-    type: String,
-    default: ''
-  },
-  iconBadge: {
-    type: [String, Function] as PropType<string | (() => string | null)>,
-    default: ''
-  }
-})
-
-const emit = defineEmits(['click'])
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
 const overlayValue = computed(() =>
-  typeof props.iconBadge === 'function'
-    ? props.iconBadge() || ''
-    : props.iconBadge
+  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 </script>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -38,12 +38,15 @@
           >
             <template #node="{ node }">
               <TreeExplorerTreeNode :node="node">
-                <template #before-label="{ node }">
-                  <span v-if="node.data.isModified || !node.data.isPersisted"
+                <template #before-label="{ node: treeNode }">
+                  <span
+                    v-if="
+                      treeNode.data?.isModified || !treeNode.data?.isPersisted
+                    "
                     >*</span
                   >
                 </template>
-                <template #actions="{ node }">
+                <template #actions="{ node: treeNode }">
                   <Button
                     class="close-workflow-button"
                     icon="pi pi-times"
@@ -52,7 +55,9 @@
                       workspaceStore.shiftDown ? 'danger' : 'secondary'
                     "
                     size="small"
-                    @click.stop="handleCloseWorkflow(node.data)"
+                    @click.stop="
+                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
+                    "
                   />
                 </template>
               </TreeExplorerTreeNode>

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -1,12 +1,12 @@
 <template>
   <TreeExplorerTreeNode :node="node">
-    <template #actions="{ node }">
+    <template #actions>
       <Button
         :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
         text
         severity="secondary"
         size="small"
-        @click.stop="workflowBookmarkStore.toggleBookmarked(node.data.path)"
+        @click.stop="handleBookmarkClick"
       />
     </template>
   </TreeExplorerTreeNode>
@@ -28,4 +28,10 @@ const workflowBookmarkStore = useWorkflowBookmarkStore()
 const isBookmarked = computed(
   () => node.data && workflowBookmarkStore.isBookmarked(node.data.path)
 )
+
+const handleBookmarkClick = async () => {
+  if (node.data) {
+    await workflowBookmarkStore.toggleBookmarked(node.data.path)
+  }
+}
 </script>

src/components/topbar/WorkflowTabs.vue

@@ -7,7 +7,7 @@
         class: 'p-0 w-full',
         onwheel: handleWheel
       }"
-      pt:barX="h-1"
+      pt:bar-x="h-1"
     >
       <SelectButton
         class="workflow-tabs bg-transparent"

src/locales/ko/main.json

@@ -114,7 +114,7 @@
     "defaultTitle": "오류가 발생했습니다",
     "extensionFileHint": "다음 스크립트 때문일 수 있습니다",
     "loadWorkflowTitle": "워크플로우 데이터를 다시 로드하는 중 오류로 인해 로드가 중단되었습니다",
-    "noStackTrace": "스택 추적이 사용할 수 없습니다",
+    "noStackTrace": "스택 추적을 사용할 수 없습니다",
     "promptExecutionError": "프롬프트 실행 실패"
   },
   "g": {
@@ -176,7 +176,7 @@
     "loadWorkflow": "워크플로 로드",
     "loading": "로딩 중",
     "logs": "로그",
-    "migrate": "마이그레이트",
+    "migrate": "이전(migrate)",
     "missing": "누락됨",
     "name": "이름",
     "newFolder": "새 폴더",
@@ -372,7 +372,7 @@
     "materialMode": "재질 모드",
     "materialModes": {
       "depth": "깊이",
-      "normal": "정상",
+      "normal": "노멀(normal)",
       "original": "원본",
       "wireframe": "와이어프레임"
     },
@@ -408,7 +408,7 @@
     "title": "유지 보수"
   },
   "manager": {
-    "changingVersion": "{from}에서 {to}로 버전 변경 중",
+    "changingVersion": "{from}에서 {to}(으)로 버전 변경 중",
     "createdBy": "작성자",
     "dependencies": "의존성",
     "discoverCommunityContent": "커뮤니티에서 만든 노드 팩 및 확장 프로그램을 찾아보세요...",
@@ -442,7 +442,7 @@
     "sort": {
       "created": "최신",
       "downloads": "가장 인기 있는",
-      "publisher": "출판사",
+      "publisher": "배포자",
       "updated": "최근 업데이트"
     },
     "status": {
@@ -843,8 +843,8 @@
     "Pointer": "포인터",
     "Queue": "실행 큐",
     "QueueButton": "실행 큐 버튼",
-    "Reroute": "재경로",
-    "RerouteBeta": "경로재설정 베타",
+    "Reroute": "경유점",
+    "RerouteBeta": "경유점 (베타)",
     "Server": "서버",
     "Server-Config": "서버 구성",
     "Settings": "설정",
@@ -1010,7 +1010,7 @@
     "fileLoadError": "{fileName}에서 워크플로우를 찾을 수 없습니다",
     "fileUploadFailed": "파일 업로드에 실패했습니다",
     "interrupted": "실행이 중단되었습니다",
-    "migrateToLitegraphReroute": "미래 버전에서는 Reroute 노드가 제거됩니다. litegraph-native reroute로 마이그레이트하려면 클릭하세요.",
+    "migrateToLitegraphReroute": "향후 버전에서는 Reroute 노드가 제거됩니다. LiteGraph 에서 자체 제공하는 경유점으로 변환하려면 클릭하세요.",
     "no3dScene": "텍스처를 적용할 3D 장면이 없습니다",
     "no3dSceneToExport": "내보낼 3D 장면이 없습니다",
     "noTemplatesToExport": "내보낼 템플릿이 없습니다",

src/locales/ko/settings.json

@@ -199,7 +199,7 @@
     "name": "노드 제목을 두 번 클릭하여 편집"
   },
   "Comfy_Node_MiddleClickRerouteNode": {
-    "name": "중간 클릭으로 새 경로재설정 노드 생성"
+    "name": "중간 클릭으로 새 경유점 생성"
   },
   "Comfy_Node_Opacity": {
     "name": "노드 불투명도"
@@ -345,8 +345,8 @@
     "name": "툴팁 지연"
   },
   "LiteGraph_Reroute_SplineOffset": {
-    "name": "Reroute 스플라인 오프셋",
-    "tooltip": "재경로 중심점에서 베지어 제어점까지의 오프셋"
+    "name": "경유점 스플라인 오프셋",
+    "tooltip": "경유점 중심에서 베지어 제어점까지의 오프셋"
   },
   "pysssss_SnapToGrid": {
     "name": "항상 그리드에 스냅"

src/main.ts

@@ -9,6 +9,7 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
+import * as Vue from 'vue'
 
 import '@/assets/css/style.css'
 import router from '@/router'
@@ -59,3 +60,5 @@ app
   .use(pinia)
   .use(i18n)
   .mount('#vue-app')
+
+window.Vue = Vue