mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 11:11:53 +00:00
Front stack primary updates and improvements (#757)
* (fix) index.html formating for prettier * (add) proper icon management - on-demand icons auto importing - handle all available icon sets (https://icones.js.org) * (fix) proper css management * (add) front stack improvement: - implement vue router - prepare for App.vue simplification - proper management of views and layouts - fix Tailwind CSS and prepare for overall css cleaning * (fix) move back user.css to public dir * (fix) remove user.css import from main.ts
This commit is contained in:
ArtificialLab
115
vite.config.mts
115
vite.config.mts
@@ -1,92 +1,95 @@
|
||||
import { defineConfig, Plugin } from 'vite';
|
||||
import type { UserConfigExport } from 'vitest/config';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import path from 'path';
|
||||
import dotenv from "dotenv";
|
||||
dotenv.config();
|
||||
import { defineConfig, Plugin } from 'vite'
|
||||
import type { UserConfigExport } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
import dotenv from "dotenv"
|
||||
import Icons from 'unplugin-icons/vite'
|
||||
import IconsResolver from 'unplugin-icons/resolver'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
|
||||
const IS_DEV = process.env.NODE_ENV === 'development';
|
||||
const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true';
|
||||
dotenv.config()
|
||||
|
||||
const IS_DEV = process.env.NODE_ENV === 'development'
|
||||
const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
|
||||
|
||||
interface ShimResult {
|
||||
code: string;
|
||||
exports: string[];
|
||||
code: string
|
||||
exports: string[]
|
||||
}
|
||||
|
||||
function isLegacyFile(id: string): boolean {
|
||||
return id.endsWith('.ts') && (
|
||||
id.includes("src/extensions/core") ||
|
||||
id.includes("src/scripts")
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
function comfyAPIPlugin(): Plugin {
|
||||
return {
|
||||
name: 'comfy-api-plugin',
|
||||
transform(code: string, id: string) {
|
||||
if (IS_DEV)
|
||||
return null;
|
||||
if (IS_DEV) return null
|
||||
|
||||
if (isLegacyFile(id)) {
|
||||
const result = transformExports(code, 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 projectRoot = process.cwd()
|
||||
const relativePath = path.relative(path.join(projectRoot, 'src'), id)
|
||||
const shimFileName = relativePath.replace(/\.ts$/, '.js')
|
||||
|
||||
const shimComment = `// Shim for ${relativePath}\n`;
|
||||
const shimComment = `// Shim for ${relativePath}\n`
|
||||
|
||||
this.emitFile({
|
||||
type: "asset",
|
||||
fileName: shimFileName,
|
||||
source: shimComment + result.exports.join(""),
|
||||
});
|
||||
source: shimComment + result.exports.join("")
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
code: result.code,
|
||||
map: null // If you're not modifying the source map, return null
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function transformExports(code: string, id: string): ShimResult {
|
||||
const moduleName = getModuleName(id);
|
||||
const exports: string[] = [];
|
||||
let newCode = code;
|
||||
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;
|
||||
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];
|
||||
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 = 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`);
|
||||
newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
|
||||
exports.push(`export const ${name} = window.comfyAPI.${moduleName}.${name};\n`)
|
||||
}
|
||||
|
||||
return {
|
||||
code: newCode,
|
||||
exports,
|
||||
};
|
||||
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
|
||||
const parts = id.split('/')
|
||||
const fileName = parts[parts.length - 1]
|
||||
return fileName.replace(/\.\w+$/, '') // Remove file extension
|
||||
}
|
||||
|
||||
const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188';
|
||||
const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
|
||||
|
||||
export default defineConfig({
|
||||
base: '',
|
||||
@@ -95,27 +98,43 @@ export default defineConfig({
|
||||
'/internal': {
|
||||
target: DEV_SERVER_COMFYUI_URL,
|
||||
},
|
||||
|
||||
'/api': {
|
||||
target: DEV_SERVER_COMFYUI_URL,
|
||||
// Return empty array for extensions API as these modules
|
||||
// are not on vite's dev server.
|
||||
bypass: (req, res, options) => {
|
||||
if (req.url === '/api/extensions') {
|
||||
res.end(JSON.stringify([]));
|
||||
res.end(JSON.stringify([]))
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
},
|
||||
},
|
||||
|
||||
'/ws': {
|
||||
target: DEV_SERVER_COMFYUI_URL,
|
||||
ws: true,
|
||||
},
|
||||
ws: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
vue(),
|
||||
comfyAPIPlugin(),
|
||||
|
||||
Icons({
|
||||
'compiler': 'vue3'
|
||||
}),
|
||||
|
||||
Components({
|
||||
dts: true,
|
||||
resolvers: [IconsResolver()],
|
||||
dirs: ['src/components', 'src/layout', 'src/views'],
|
||||
deep: true,
|
||||
extensions: ['vue']
|
||||
})
|
||||
],
|
||||
|
||||
build: {
|
||||
minify: SHOULD_MINIFY ? 'esbuild' : false,
|
||||
target: 'es2022',
|
||||
@@ -126,23 +145,27 @@ export default defineConfig({
|
||||
treeshake: false
|
||||
}
|
||||
},
|
||||
|
||||
esbuild: {
|
||||
minifyIdentifiers: false,
|
||||
keepNames: true,
|
||||
minifySyntax: SHOULD_MINIFY,
|
||||
minifyWhitespace: SHOULD_MINIFY,
|
||||
minifyWhitespace: SHOULD_MINIFY
|
||||
},
|
||||
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'happy-dom',
|
||||
setupFiles: ['./vitest.setup.ts'],
|
||||
setupFiles: ['./vitest.setup.ts']
|
||||
},
|
||||
|
||||
define: {
|
||||
'__COMFYUI_FRONTEND_VERSION__': JSON.stringify(process.env.npm_package_version),
|
||||
'__COMFYUI_FRONTEND_VERSION__': JSON.stringify(process.env.npm_package_version)
|
||||
},
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src'
|
||||
}
|
||||
}
|
||||
}) as UserConfigExport;
|
||||
}) as UserConfigExport
|
||||
|
||||
Reference in New Issue
Block a user