Increment version to 1.21.7 (#4067)

Co-authored-by: webfiltered <176114999+webfiltered@users.noreply.github.com>

.mcp.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "playwright": {
-      "command": "npx",
-      "args": ["-y", "@executeautomation/playwright-mcp-server"]
-    }
-  }
-}

README.md

@@ -609,68 +609,6 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
-### Recommended MCP Integrations
-
-#### Playwright Browser Automation
-
-The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
-
-For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
-
-##### Setup for Claude Code
-
-After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
-
-Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
-
-
-```
-> navigate to localhost:5173 and take a screenshot.
-   tell me the items in the menubar
-
-● I'll navigate to localhost:5173 and take a
-  screenshot to see the menubar items.
-
-● playwright:playwright_navigate (MCP)(url:       …
-                                      "http://local
-                                      host:5173")
-  ⎿  Navigated to http://localhost:5173
-
-● playwright:playwright_screenshot (MCP)(name: "lo…
-                                        alhost_5173
-                                        _menubar")
-
-  ⎿ Screenshot saved to: ../../../Downloads/localho
-    st_5173_menubar-2025-05-30T17-23-00-942Z.png
-  ⎿  Screenshot also stored in memory with name:
-     'localhost_5173_menubar'
-
-● Read(../../../Downloads/localhost_5173_menubar-2…
-      25-05-30T17-23-00-942Z.png)
-  ⎿  Read image (94.3KB)
-
-● Based on the screenshot, I can see the menubar at
-   the top of the ComfyUI interface contains the
-  following items:
-
-  Main Menubar Items:
-  - Workflow - Menu for workflow-related actions
-  - Edit - Menu for editing operations
-  - Help - Menu for help and documentation
-
-  Additional UI Elements:
-  - ComfyUI Logo - On the far left
-  - Workflow Tab - Shows "Unsaved Workflow" with a
-  dropdown and close button
-  - Layout Controls - On the far right (grid view
-  and hamburger menu icons)
-
-  The interface shows a typical ComfyUI workflow
-  graph with nodes like "Load Checkpoint", "CLIP
-  Text Encode (Prompt)", "KSampler", and "Empty
-  Latent Image" connected with colored cables.
-```
-
 ### Unit Test
 
 - `npm i` to install all dependencies

build/plugins/addElementVnodeExportPlugin.ts

@@ -0,0 +1,59 @@
+import { Plugin } from 'vite'
+
+/**
+ * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
+ *
+ * This plugin addresses compatibility issues where some components or libraries
+ * might be using the older createElementVNode function name instead of createBaseVNode.
+ * It modifies the Vue vendor chunk during build to add the alias export.
+ *
+ * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
+ */
+export function addElementVnodeExportPlugin(): Plugin {
+  return {
+    name: 'add-element-vnode-export-plugin',
+
+    renderChunk(code, chunk, _options) {
+      if (chunk.name.startsWith('vendor-vue')) {
+        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
+        const match = code.match(exportRegex)
+
+        if (match) {
+          const existingExports = match[2].trim()
+          const exportsArray = existingExports
+            .split(',')
+            .map((e) => e.trim())
+            .filter(Boolean)
+
+          const hasCreateBaseVNode = exportsArray.some((e) =>
+            e.startsWith('createBaseVNode')
+          )
+          const hasCreateElementVNode = exportsArray.some((e) =>
+            e.includes('createElementVNode')
+          )
+
+          if (hasCreateBaseVNode && !hasCreateElementVNode) {
+            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
+            const newCode = code.replace(exportRegex, newExportStatement)
+
+            console.log(
+              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
+            )
+
+            return { code: newCode, map: null }
+          } else if (!hasCreateBaseVNode) {
+            console.warn(
+              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
+            )
+          }
+        } else {
+          console.warn(
+            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
+          )
+        }
+      }
+
+      return null
+    }
+  }
+}

build/plugins/generateImportMapPlugin.ts

@@ -1,24 +1,9 @@
-import glob from 'fast-glob'
-import fs from 'fs-extra'
-import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import type { OutputOptions } from 'rollup'
+import { HtmlTagDescriptor, Plugin } from 'vite'
 
-interface ImportMapSource {
+interface VendorLibrary {
   name: string
-  pattern: string | RegExp
-  entry: string
-  recursiveDependence?: boolean
-  override?: Record<string, Partial<ImportMapSource>>
-}
-
-const parseDeps = (root: string, pkg: string) => {
-  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
-  if (fs.existsSync(pkgPath)) {
-    const content = fs.readFileSync(pkgPath, 'utf-8')
-    const pkg = JSON.parse(content)
-    return Object.keys(pkg.dependencies || {})
-  }
-  return []
+  pattern: RegExp
 }
 
 /**
@@ -38,89 +23,53 @@ const parseDeps = (root: string, pkg: string) => {
  * @returns {Plugin} A Vite plugin that generates and injects an import map
  */
 export function generateImportMapPlugin(
-  importMapSources: ImportMapSource[]
+  vendorLibraries: VendorLibrary[]
 ): Plugin {
   const importMapEntries: Record<string, string> = {}
-  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
-  const assetDir = 'assets/lib'
-  let root: string
 
   return {
     name: 'generate-import-map-plugin',
 
     // Configure manual chunks during the build process
     configResolved(config) {
-      root = config.root
-
       if (config.build) {
         // Ensure rollupOptions exists
         if (!config.build.rollupOptions) {
           config.build.rollupOptions = {}
         }
 
-        for (const source of importMapSources) {
-          resolvedImportMapSources.set(source.name, source)
-          if (source.recursiveDependence) {
-            const deps = parseDeps(root, source.name)
-
-            while (deps.length) {
-              const dep = deps.shift()!
-              const depSource = Object.assign({}, source, {
-                name: dep,
-                pattern: dep,
-                ...source.override?.[dep]
-              })
-              resolvedImportMapSources.set(depSource.name, depSource)
-
-              const _deps = parseDeps(root, depSource.name)
-              deps.unshift(..._deps)
+        const outputOptions: OutputOptions = {
+          manualChunks: (id: string) => {
+            for (const lib of vendorLibraries) {
+              if (lib.pattern.test(id)) {
+                return `vendor-${lib.name}`
+              }
             }
-          }
+            return null
+          },
+          // Disable minification of internal exports to preserve function names
+          minifyInternalExports: false
         }
-
-        const external: (string | RegExp)[] = []
-        for (const [, source] of resolvedImportMapSources) {
-          external.push(source.pattern)
-        }
-        config.build.rollupOptions.external = external
+        config.build.rollupOptions.output = outputOptions
       }
     },
 
-    generateBundle(_options) {
-      for (const [, source] of resolvedImportMapSources) {
-        if (source.entry) {
-          const moduleFile = join(source.name, source.entry)
-          const sourceFile = join(root, 'node_modules', moduleFile)
-          const targetFile = join(root, 'dist', assetDir, moduleFile)
+    generateBundle(_options, bundle) {
+      for (const fileName in bundle) {
+        const chunk = bundle[fileName]
+        if (chunk.type === 'chunk' && !chunk.isEntry) {
+          // Find matching vendor library by chunk name
+          const vendorLib = vendorLibraries.find(
+            (lib) => chunk.name === `vendor-${lib.name}`
+          )
 
-          importMapEntries[source.name] =
-            './' + normalizePath(join(assetDir, moduleFile))
+          if (vendorLib) {
+            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
+            importMapEntries[vendorLib.name] = relativePath
 
-          const targetDir = dirname(targetFile)
-          if (!fs.existsSync(targetDir)) {
-            fs.mkdirSync(targetDir, { recursive: true })
-          }
-          fs.copyFileSync(sourceFile, targetFile)
-        }
-
-        if (source.recursiveDependence) {
-          const files = glob.sync(['**/*.{js,mjs}'], {
-            cwd: join(root, 'node_modules', source.name)
-          })
-
-          for (const file of files) {
-            const moduleFile = join(source.name, file)
-            const sourceFile = join(root, 'node_modules', moduleFile)
-            const targetFile = join(root, 'dist', assetDir, moduleFile)
-
-            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
-              './' + normalizePath(join(assetDir, moduleFile))
-
-            const targetDir = dirname(targetFile)
-            if (!fs.existsSync(targetDir)) {
-              fs.mkdirSync(targetDir, { recursive: true })
-            }
-            fs.copyFileSync(sourceFile, targetFile)
+            console.log(
+              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
+            )
           }
         }
       }

build/plugins/index.ts

@@ -1,2 +1,3 @@
+export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
 export { comfyAPIPlugin } from './comfyAPIPlugin'
 export { generateImportMapPlugin } from './generateImportMapPlugin'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.21.3",
+  "version": "1.21.7",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@executeautomation/playwright-mcp-server": "^1.0.5",
     "@iconify/json": "^2.2.245",
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
@@ -75,7 +74,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.15.14",
+    "@comfyorg/litegraph": "^0.15.15",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/scripts/app.ts

@@ -30,6 +30,12 @@ import {
   isComboInputSpecV1,
   isComboInputSpecV2
 } from '@/schemas/nodeDefSchema'
+import { getFromWebmFile } from '@/scripts/metadata/ebml'
+import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
+import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
+import { getMp3Metadata } from '@/scripts/metadata/mp3'
+import { getOggMetadata } from '@/scripts/metadata/ogg'
+import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -52,7 +58,6 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { getFileHandler } from '@/utils/fileHandlers'
 import {
   executeWidgetsCallback,
   fixLinkInputSlots,
@@ -67,7 +72,13 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
 import { pruneWidgets } from './domWidget'
-import { importA1111 } from './pnginfo'
+import {
+  getFlacMetadata,
+  getLatentMetadata,
+  getPngMetadata,
+  getWebpMetadata,
+  importA1111
+} from './pnginfo'
 import { $el, ComfyUI } from './ui'
 import { ComfyAppMenu } from './ui/menu/index'
 import { clone } from './utils'
@@ -1270,44 +1281,161 @@ export class ComfyApp {
       return f.substring(0, p)
     }
     const fileName = removeExt(file.name)
-
-    // Get the appropriate file handler for this file type
-    const fileHandler = getFileHandler(file)
-
-    if (!fileHandler) {
-      // No handler found for this file type
-      this.showErrorOnFileLoad(file)
-      return
-    }
-
-    try {
-      // Process the file using the handler
-      const { workflow, prompt, parameters, jsonTemplateData } =
-        await fileHandler(file)
-
-      if (workflow) {
-        // We have a workflow, load it
-        await this.loadGraphData(workflow, true, true, fileName)
-      } else if (prompt) {
-        // We have a prompt in API format, load it
-        this.loadApiJson(prompt, fileName)
-      } else if (parameters) {
-        // We have A1111 parameters, import them
+    if (file.type === 'image/png') {
+      const pngInfo = await getPngMetadata(file)
+      if (pngInfo?.workflow) {
+        await this.loadGraphData(
+          JSON.parse(pngInfo.workflow),
+          true,
+          true,
+          fileName
+        )
+      } else if (pngInfo?.prompt) {
+        this.loadApiJson(JSON.parse(pngInfo.prompt), fileName)
+      } else if (pngInfo?.parameters) {
+        // Note: Not putting this in `importA1111` as it is mostly not used
+        // by external callers, and `importA1111` has no access to `app`.
         useWorkflowService().beforeLoadNewGraph()
-        importA1111(this.graph, parameters)
+        importA1111(this.graph, pngInfo.parameters)
         useWorkflowService().afterLoadNewGraph(
           fileName,
           this.graph.serialize() as unknown as ComfyWorkflowJSON
         )
-      } else if (jsonTemplateData) {
-        // We have template data from JSON
-        this.loadTemplateData(jsonTemplateData)
       } else {
-        // No usable data found in the file
         this.showErrorOnFileLoad(file)
       }
-    } catch (error) {
-      console.error('Error processing file:', error)
+    } else if (file.type === 'image/webp') {
+      const pngInfo = await getWebpMetadata(file)
+      // Support loading workflows from that webp custom node.
+      const workflow = pngInfo?.workflow || pngInfo?.Workflow
+      const prompt = pngInfo?.prompt || pngInfo?.Prompt
+
+      if (workflow) {
+        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(JSON.parse(prompt), fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/mpeg') {
+      const { workflow, prompt } = await getMp3Metadata(file)
+      if (workflow) {
+        this.loadGraphData(workflow, true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/ogg') {
+      const { workflow, prompt } = await getOggMetadata(file)
+      if (workflow) {
+        this.loadGraphData(workflow, true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/flac' || file.type === 'audio/x-flac') {
+      const pngInfo = await getFlacMetadata(file)
+      const workflow = pngInfo?.workflow || pngInfo?.Workflow
+      const prompt = pngInfo?.prompt || pngInfo?.Prompt
+
+      if (workflow) {
+        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(JSON.parse(prompt), fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'video/webm') {
+      const webmInfo = await getFromWebmFile(file)
+      if (webmInfo.workflow) {
+        this.loadGraphData(webmInfo.workflow, true, true, fileName)
+      } else if (webmInfo.prompt) {
+        this.loadApiJson(webmInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'video/mp4' ||
+      file.name?.endsWith('.mp4') ||
+      file.name?.endsWith('.mov') ||
+      file.name?.endsWith('.m4v') ||
+      file.type === 'video/quicktime' ||
+      file.type === 'video/x-m4v'
+    ) {
+      const mp4Info = await getFromIsobmffFile(file)
+      if (mp4Info.workflow) {
+        this.loadGraphData(mp4Info.workflow, true, true, fileName)
+      } else if (mp4Info.prompt) {
+        this.loadApiJson(mp4Info.prompt, fileName)
+      }
+    } else if (file.type === 'image/svg+xml' || file.name?.endsWith('.svg')) {
+      const svgInfo = await getSvgMetadata(file)
+      if (svgInfo.workflow) {
+        this.loadGraphData(svgInfo.workflow, true, true, fileName)
+      } else if (svgInfo.prompt) {
+        this.loadApiJson(svgInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'model/gltf-binary' ||
+      file.name?.endsWith('.glb')
+    ) {
+      const gltfInfo = await getGltfBinaryMetadata(file)
+      if (gltfInfo.workflow) {
+        this.loadGraphData(gltfInfo.workflow, true, true, fileName)
+      } else if (gltfInfo.prompt) {
+        this.loadApiJson(gltfInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'application/json' ||
+      file.name?.endsWith('.json')
+    ) {
+      const reader = new FileReader()
+      reader.onload = async () => {
+        const readerResult = reader.result as string
+        const jsonContent = JSON.parse(readerResult)
+        if (jsonContent?.templates) {
+          this.loadTemplateData(jsonContent)
+        } else if (this.isApiJson(jsonContent)) {
+          this.loadApiJson(jsonContent, fileName)
+        } else {
+          await this.loadGraphData(
+            JSON.parse(readerResult),
+            true,
+            true,
+            fileName
+          )
+        }
+      }
+      reader.readAsText(file)
+    } else if (
+      file.name?.endsWith('.latent') ||
+      file.name?.endsWith('.safetensors')
+    ) {
+      const info = await getLatentMetadata(file)
+      // TODO define schema to LatentMetadata
+      // @ts-expect-error
+      if (info.workflow) {
+        await this.loadGraphData(
+          // @ts-expect-error
+          JSON.parse(info.workflow),
+          true,
+          true,
+          fileName
+        )
+        // @ts-expect-error
+      } else if (info.prompt) {
+        // @ts-expect-error
+        this.loadApiJson(JSON.parse(info.prompt))
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else {
       this.showErrorOnFileLoad(file)
     }
   }

src/utils/fileHandlers.ts

@@ -1,336 +0,0 @@
-/**
- * Maps MIME types and file extensions to handler functions for extracting
- * workflow data from various file formats. Uses supportedWorkflowFormats.ts
- * as the source of truth for supported formats.
- */
-import {
-  AUDIO_WORKFLOW_FORMATS,
-  DATA_WORKFLOW_FORMATS,
-  IMAGE_WORKFLOW_FORMATS,
-  MODEL_WORKFLOW_FORMATS,
-  VIDEO_WORKFLOW_FORMATS
-} from '@/constants/supportedWorkflowFormats'
-import type {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
-import { getFromWebmFile } from '@/scripts/metadata/ebml'
-import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
-import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
-import { getMp3Metadata } from '@/scripts/metadata/mp3'
-import { getOggMetadata } from '@/scripts/metadata/ogg'
-import { getSvgMetadata } from '@/scripts/metadata/svg'
-import {
-  getFlacMetadata,
-  getLatentMetadata,
-  getPngMetadata,
-  getWebpMetadata
-} from '@/scripts/pnginfo'
-
-/**
- * Type for the file handler function
- */
-export type WorkflowFileHandler = (file: File) => Promise<{
-  workflow?: ComfyWorkflowJSON
-  prompt?: ComfyApiWorkflow
-  parameters?: string
-  jsonTemplateData?: any // For template JSON data
-}>
-
-/**
- * Maps MIME types to file handlers for loading workflows from different file formats
- */
-export const mimeTypeHandlers = new Map<string, WorkflowFileHandler>()
-
-/**
- * Maps file extensions to file handlers for loading workflows
- * Used as a fallback when MIME type detection fails
- */
-export const extensionHandlers = new Map<string, WorkflowFileHandler>()
-
-/**
- * Handler for PNG files
- */
-const handlePngFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getPngMetadata(file)
-  return {
-    workflow: pngInfo?.workflow ? JSON.parse(pngInfo.workflow) : undefined,
-    prompt: pngInfo?.prompt ? JSON.parse(pngInfo.prompt) : undefined,
-    parameters: pngInfo?.parameters
-  }
-}
-
-/**
- * Handler for WebP files
- */
-const handleWebpFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getWebpMetadata(file)
-  // Support loading workflows from that webp custom node.
-  const workflow = pngInfo?.workflow || pngInfo?.Workflow
-  const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-  return {
-    workflow: workflow ? JSON.parse(workflow) : undefined,
-    prompt: prompt ? JSON.parse(prompt) : undefined
-  }
-}
-
-/**
- * Handler for SVG files
- */
-const handleSvgFile: WorkflowFileHandler = async (file) => {
-  const svgInfo = await getSvgMetadata(file)
-  return {
-    workflow: svgInfo.workflow,
-    prompt: svgInfo.prompt
-  }
-}
-
-/**
- * Handler for MP3 files
- */
-const handleMp3File: WorkflowFileHandler = async (file) => {
-  const { workflow, prompt } = await getMp3Metadata(file)
-  return { workflow, prompt }
-}
-
-/**
- * Handler for OGG files
- */
-const handleOggFile: WorkflowFileHandler = async (file) => {
-  const { workflow, prompt } = await getOggMetadata(file)
-  return { workflow, prompt }
-}
-
-/**
- * Handler for FLAC files
- */
-const handleFlacFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getFlacMetadata(file)
-  const workflow = pngInfo?.workflow || pngInfo?.Workflow
-  const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-  return {
-    workflow: workflow ? JSON.parse(workflow) : undefined,
-    prompt: prompt ? JSON.parse(prompt) : undefined
-  }
-}
-
-/**
- * Handler for WebM files
- */
-const handleWebmFile: WorkflowFileHandler = async (file) => {
-  const webmInfo = await getFromWebmFile(file)
-  return {
-    workflow: webmInfo.workflow,
-    prompt: webmInfo.prompt
-  }
-}
-
-/**
- * Handler for MP4/MOV/M4V files
- */
-const handleMp4File: WorkflowFileHandler = async (file) => {
-  const mp4Info = await getFromIsobmffFile(file)
-  return {
-    workflow: mp4Info.workflow,
-    prompt: mp4Info.prompt
-  }
-}
-
-/**
- * Handler for GLB files
- */
-const handleGlbFile: WorkflowFileHandler = async (file) => {
-  const gltfInfo = await getGltfBinaryMetadata(file)
-  return {
-    workflow: gltfInfo.workflow,
-    prompt: gltfInfo.prompt
-  }
-}
-
-/**
- * Handler for JSON files
- */
-const handleJsonFile: WorkflowFileHandler = async (file) => {
-  // For JSON files, we need to preserve the exact behavior from app.ts
-  // This code intentionally mirrors the original implementation
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => {
-      try {
-        const readerResult = reader.result as string
-        const jsonContent = JSON.parse(readerResult)
-
-        if (jsonContent?.templates) {
-          // This case will be handled separately in handleFile
-          resolve({
-            workflow: undefined,
-            prompt: undefined,
-            jsonTemplateData: jsonContent
-          })
-        } else if (isApiJson(jsonContent)) {
-          // API JSON format
-          resolve({ workflow: undefined, prompt: jsonContent })
-        } else {
-          // Regular workflow JSON
-          resolve({ workflow: JSON.parse(readerResult), prompt: undefined })
-        }
-      } catch (error) {
-        reject(error)
-      }
-    }
-    reader.onerror = () => reject(reader.error)
-    reader.readAsText(file)
-  })
-}
-
-/**
- * Handler for .latent and .safetensors files
- */
-const handleLatentFile: WorkflowFileHandler = async (file) => {
-  // Preserve the exact behavior from app.ts for latent files
-  const info = await getLatentMetadata(file)
-
-  // Direct port of the original code, preserving behavior for TS compatibility
-  if (info && typeof info === 'object' && 'workflow' in info && info.workflow) {
-    return {
-      workflow: JSON.parse(info.workflow as string),
-      prompt: undefined
-    }
-  } else if (
-    info &&
-    typeof info === 'object' &&
-    'prompt' in info &&
-    info.prompt
-  ) {
-    return {
-      workflow: undefined,
-      prompt: JSON.parse(info.prompt as string)
-    }
-  } else {
-    return { workflow: undefined, prompt: undefined }
-  }
-}
-
-/**
- * Helper function to determine if a JSON object is in the API JSON format
- */
-function isApiJson(data: unknown) {
-  return (
-    typeof data === 'object' &&
-    data !== null &&
-    Object.values(data as Record<string, any>).every((v) => v.class_type)
-  )
-}
-
-// Register image format handlers
-IMAGE_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'image/png') {
-    mimeTypeHandlers.set(mimeType, handlePngFile)
-  } else if (mimeType === 'image/webp') {
-    mimeTypeHandlers.set(mimeType, handleWebpFile)
-  } else if (mimeType === 'image/svg+xml') {
-    mimeTypeHandlers.set(mimeType, handleSvgFile)
-  }
-})
-
-IMAGE_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.png') {
-    extensionHandlers.set(ext, handlePngFile)
-  } else if (ext === '.webp') {
-    extensionHandlers.set(ext, handleWebpFile)
-  } else if (ext === '.svg') {
-    extensionHandlers.set(ext, handleSvgFile)
-  }
-})
-
-// Register audio format handlers
-AUDIO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'audio/mpeg') {
-    mimeTypeHandlers.set(mimeType, handleMp3File)
-  } else if (mimeType === 'audio/ogg') {
-    mimeTypeHandlers.set(mimeType, handleOggFile)
-  } else if (mimeType === 'audio/flac' || mimeType === 'audio/x-flac') {
-    mimeTypeHandlers.set(mimeType, handleFlacFile)
-  }
-})
-
-AUDIO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.mp3') {
-    extensionHandlers.set(ext, handleMp3File)
-  } else if (ext === '.ogg') {
-    extensionHandlers.set(ext, handleOggFile)
-  } else if (ext === '.flac') {
-    extensionHandlers.set(ext, handleFlacFile)
-  }
-})
-
-// Register video format handlers
-VIDEO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'video/webm') {
-    mimeTypeHandlers.set(mimeType, handleWebmFile)
-  } else if (
-    mimeType === 'video/mp4' ||
-    mimeType === 'video/quicktime' ||
-    mimeType === 'video/x-m4v'
-  ) {
-    mimeTypeHandlers.set(mimeType, handleMp4File)
-  }
-})
-
-VIDEO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.webm') {
-    extensionHandlers.set(ext, handleWebmFile)
-  } else if (ext === '.mp4' || ext === '.mov' || ext === '.m4v') {
-    extensionHandlers.set(ext, handleMp4File)
-  }
-})
-
-// Register 3D model format handlers
-MODEL_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'model/gltf-binary') {
-    mimeTypeHandlers.set(mimeType, handleGlbFile)
-  }
-})
-
-MODEL_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.glb') {
-    extensionHandlers.set(ext, handleGlbFile)
-  }
-})
-
-// Register data format handlers
-DATA_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'application/json') {
-    mimeTypeHandlers.set(mimeType, handleJsonFile)
-  }
-})
-
-DATA_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.json') {
-    extensionHandlers.set(ext, handleJsonFile)
-  } else if (ext === '.latent' || ext === '.safetensors') {
-    extensionHandlers.set(ext, handleLatentFile)
-  }
-})
-
-/**
- * Gets the appropriate file handler for a given file based on mime type or extension
- */
-export function getFileHandler(file: File): WorkflowFileHandler | null {
-  // First try to match by MIME type
-  if (file.type && mimeTypeHandlers.has(file.type)) {
-    return mimeTypeHandlers.get(file.type) || null
-  }
-
-  // If no MIME type match, try to match by file extension
-  if (file.name) {
-    const extension = '.' + file.name.split('.').pop()?.toLowerCase()
-    if (extension && extensionHandlers.has(extension)) {
-      return extensionHandlers.get(extension) || null
-    }
-  }
-
-  return null
-}

tests-ui/tests/utils/fileHandlers.test.ts

@@ -1,127 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  AUDIO_WORKFLOW_FORMATS,
-  DATA_WORKFLOW_FORMATS,
-  IMAGE_WORKFLOW_FORMATS,
-  MODEL_WORKFLOW_FORMATS,
-  VIDEO_WORKFLOW_FORMATS
-} from '../../../src/constants/supportedWorkflowFormats'
-import {
-  extensionHandlers,
-  getFileHandler,
-  mimeTypeHandlers
-} from '../../../src/utils/fileHandlers'
-
-describe('fileHandlers', () => {
-  describe('handler registrations', () => {
-    it('should register handlers for all image MIME types', () => {
-      IMAGE_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all image extensions', () => {
-      IMAGE_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all audio MIME types', () => {
-      AUDIO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all audio extensions', () => {
-      AUDIO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all video MIME types', () => {
-      VIDEO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all video extensions', () => {
-      VIDEO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all 3D model MIME types', () => {
-      MODEL_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all 3D model extensions', () => {
-      MODEL_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all data MIME types', () => {
-      DATA_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all data extensions', () => {
-      DATA_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-  })
-
-  describe('getFileHandler', () => {
-    it('should return a handler when a file with a recognized MIME type is provided', () => {
-      const file = new File(['test content'], 'test.png', { type: 'image/png' })
-      const handler = getFileHandler(file)
-      expect(handler).not.toBeNull()
-      expect(handler).toBeTypeOf('function')
-    })
-
-    it('should return a handler when a file with a recognized extension but no MIME type is provided', () => {
-      // File with empty MIME type but recognizable extension
-      const file = new File(['test content'], 'test.webp', { type: '' })
-      const handler = getFileHandler(file)
-      expect(handler).not.toBeNull()
-      expect(handler).toBeTypeOf('function')
-    })
-
-    it('should return null when no handler is found for the file type', () => {
-      const file = new File(['test content'], 'test.txt', {
-        type: 'text/plain'
-      })
-      const handler = getFileHandler(file)
-      expect(handler).toBeNull()
-    })
-
-    it('should prioritize MIME type over extension when both are present and different', () => {
-      // A file with a JSON MIME type but SVG extension
-      const file = new File(['{}'], 'test.svg', { type: 'application/json' })
-      const handler = getFileHandler(file)
-
-      // Make a shadow copy of the handlers for comparison
-      const jsonHandler = mimeTypeHandlers.get('application/json')
-      const svgHandler = extensionHandlers.get('.svg')
-
-      // The handler should match the JSON handler, not the SVG handler
-      expect(handler).toBe(jsonHandler)
-      expect(handler).not.toBe(svgHandler)
-    })
-  })
-})

vite.config.mts

@@ -8,7 +8,11 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import type { UserConfigExport } from 'vitest/config'
 
-import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
+import {
+  addElementVnodeExportPlugin,
+  comfyAPIPlugin,
+  generateImportMapPlugin
+} from './build/plugins'
 
 dotenv.config()
 
@@ -73,40 +77,11 @@ export default defineConfig({
       : [vue()]),
     comfyAPIPlugin(IS_DEV),
     generateImportMapPlugin([
-      {
-        name: 'vue',
-        pattern: 'vue',
-        entry: './dist/vue.esm-browser.prod.js'
-      },
-      {
-        name: 'vue-i18n',
-        pattern: 'vue-i18n',
-        entry: './dist/vue-i18n.esm-browser.prod.js'
-      },
-      {
-        name: 'primevue',
-        pattern: /^primevue\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/themes',
-        pattern: /^@primevue\/themes\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/forms',
-        pattern: /^@primevue\/forms\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true,
-        override: {
-          '@primeuix/forms': {
-            entry: ''
-          }
-        }
-      }
+      { name: 'vue', pattern: /[\\/]node_modules[\\/]vue[\\/]/ },
+      { name: 'primevue', pattern: /[\\/]node_modules[\\/]primevue[\\/]/ },
+      { name: 'vue-i18n', pattern: /[\\/]node_modules[\\/]vue-i18n[\\/]/ }
     ]),
+    addElementVnodeExportPlugin(),
 
     Icons({
       compiler: 'vue3'