[Refactor] Split custom vite plugins to files under build/plugins (#3531)

Author: huchenlei

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/comfyAPIPlugin.ts

@@ -0,0 +1,82 @@
+import path from 'path'
+import { Plugin } from 'vite'
+
+interface ShimResult {
+  code: string
+  exports: string[]
+}
+
+function isLegacyFile(id: string): boolean {
+  return (
+    id.endsWith('.ts') &&
+    (id.includes('src/extensions/core') || id.includes('src/scripts'))
+  )
+}
+
+function transformExports(code: string, id: string): ShimResult {
+  const moduleName = getModuleName(id)
+  const exports: string[] = []
+  let newCode = code
+
+  // Regex to match different types of exports
+  const regex =
+    /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
+  let match
+
+  while ((match = regex.exec(code)) !== null) {
+    const name = match[2]
+    // All exports should be bind to the window object as new API endpoint.
+    if (exports.length == 0) {
+      newCode += `\nwindow.comfyAPI = window.comfyAPI || {};`
+      newCode += `\nwindow.comfyAPI.${moduleName} = window.comfyAPI.${moduleName} || {};`
+    }
+    newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
+    exports.push(
+      `export const ${name} = window.comfyAPI.${moduleName}.${name};\n`
+    )
+  }
+
+  return {
+    code: newCode,
+    exports
+  }
+}
+
+function getModuleName(id: string): string {
+  // Simple example to derive a module name from the file path
+  const parts = id.split('/')
+  const fileName = parts[parts.length - 1]
+  return fileName.replace(/\.\w+$/, '') // Remove file extension
+}
+
+export function comfyAPIPlugin(isDev: boolean): Plugin {
+  return {
+    name: 'comfy-api-plugin',
+    transform(code: string, id: string) {
+      if (isDev) return null
+
+      if (isLegacyFile(id)) {
+        const result = transformExports(code, id)
+
+        if (result.exports.length > 0) {
+          const projectRoot = process.cwd()
+          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
+          const shimFileName = relativePath.replace(/\.ts$/, '.js')
+
+          const shimComment = `// Shim for ${relativePath}\n`
+
+          this.emitFile({
+            type: 'asset',
+            fileName: shimFileName,
+            source: shimComment + result.exports.join('')
+          })
+        }
+
+        return {
+          code: result.code,
+          map: null // If you're not modifying the source map, return null
+        }
+      }
+    }
+  }
+}

build/plugins/generateImportMapPlugin.ts

@@ -0,0 +1,103 @@
+import type { OutputOptions } from 'rollup'
+import { HtmlTagDescriptor, Plugin } from 'vite'
+
+interface VendorLibrary {
+  name: string
+  pattern: RegExp
+}
+
+/**
+ * Vite plugin that generates an import map for vendor chunks.
+ *
+ * This plugin creates a browser-compatible import map that maps module specifiers
+ * (like 'vue' or 'primevue') to their actual file locations in the build output.
+ * This improves module loading in modern browsers and enables better caching.
+ *
+ * The plugin:
+ * 1. Tracks vendor chunks during bundle generation
+ * 2. Creates mappings between module names and their file paths
+ * 3. Injects an import map script tag into the HTML head
+ * 4. Configures manual chunk splitting for vendor libraries
+ *
+ * @param vendorLibraries - An array of vendor libraries to split into separate chunks
+ * @returns {Plugin} A Vite plugin that generates and injects an import map
+ */
+export function generateImportMapPlugin(
+  vendorLibraries: VendorLibrary[]
+): Plugin {
+  const importMapEntries: Record<string, string> = {}
+
+  return {
+    name: 'generate-import-map-plugin',
+
+    // Configure manual chunks during the build process
+    configResolved(config) {
+      if (config.build) {
+        // Ensure rollupOptions exists
+        if (!config.build.rollupOptions) {
+          config.build.rollupOptions = {}
+        }
+
+        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
+        }
+        config.build.rollupOptions.output = outputOptions
+      }
+    },
+
+    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}`
+          )
+
+          if (vendorLib) {
+            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
+            importMapEntries[vendorLib.name] = relativePath
+
+            console.log(
+              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
+            )
+          }
+        }
+      }
+    },
+
+    transformIndexHtml(html) {
+      if (Object.keys(importMapEntries).length === 0) {
+        console.warn(
+          '[ImportMap Plugin] No vendor chunks found to create import map.'
+        )
+        return html
+      }
+
+      const importMap = {
+        imports: importMapEntries
+      }
+
+      const importMapTag: HtmlTagDescriptor = {
+        tag: 'script',
+        attrs: { type: 'importmap' },
+        children: JSON.stringify(importMap, null, 2),
+        injectTo: 'head'
+      }
+
+      return {
+        html,
+        tags: [importMapTag]
+      }
+    }
+  }
+}

build/plugins/index.ts

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