mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
## Summary Fixes the `ReferenceError: __DISTRIBUTION__ is not defined` error when running i18n collection tests. ## Problem PR #6879 added conditional menu commands based on distribution (hiding memory unload commands in cloud). This introduced a dependency on `isCloud` which uses the `__DISTRIBUTION__` Vite define variable in `coreMenuCommands.ts`. When Playwright's test runner imports this file during i18n collection, it fails because Vite define variables are only replaced during Vite's build/dev process, not during Playwright's TypeScript compilation. ## Solution Created a simple shim (`scripts/vite-define-shim.ts`) that: 1. Defines all Vite define variables as global constants with default values 2. Provides a minimal `window` shim for Node environment 3. Is imported at the top of `collect-i18n-general.ts` before any code that uses these variables This approach is simpler than: - Creating a custom Babel plugin (attempted in this PR, see commit history) - Using `ctViteConfig` (only works for component testing, not regular Playwright tests) - Post-build regex replacement (fragile and error-prone) ## Test Plan Run `pnpm collect-i18n` and verify: - ✅ No more `ReferenceError: __DISTRIBUTION__ is not defined` - ✅ No more `ReferenceError: window is not defined` - ⏱️ Tests may timeout if dev server is not running on port 5173, but that's a separate issue ## Related - Fixes issue introduced by PR #6879 - Related to Notion task: https://www.notion.so/comfy-org/Implement-Babel-plugin-for-Vite-define-replacements-in-Playwright-2b56d73d365081d5bb63e02712912b17 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6906-bugfix-Add-vite-define-shim-for-Playwright-i18n-collection-2b66d73d36508182b4d6d69b88ae2771) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
182 lines
5.7 KiB
TypeScript
182 lines
5.7 KiB
TypeScript
import * as fs from 'fs'
|
|
|
|
// Import Vite define shim to make __DISTRIBUTION__ and other define variables available
|
|
import './vite-define-shim'
|
|
|
|
import { DESKTOP_DIALOGS } from '../apps/desktop-ui/src/constants/desktopDialogs'
|
|
import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
|
|
import {
|
|
formatCamelCase,
|
|
normalizeI18nKey
|
|
} from '../packages/shared-frontend-utils/src/formatUtil'
|
|
import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
|
|
import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
|
|
import type { FormItem, SettingParams } from '../src/platform/settings/types'
|
|
import type { ComfyCommandImpl } from '../src/stores/commandStore'
|
|
|
|
const localePath = './src/locales/en/main.json'
|
|
const commandsPath = './src/locales/en/commands.json'
|
|
const settingsPath = './src/locales/en/settings.json'
|
|
|
|
const extractMenuCommandLocaleStrings = (): Set<string> => {
|
|
const labels = new Set<string>()
|
|
for (const [category, _] of CORE_MENU_COMMANDS) {
|
|
category.forEach((category) => labels.add(category))
|
|
}
|
|
return labels
|
|
}
|
|
|
|
test('collect-i18n-general', async ({ comfyPage }) => {
|
|
const commands = (
|
|
await comfyPage.page.evaluate(() => {
|
|
const workspace = window['app'].extensionManager
|
|
const commands = workspace.command.commands as ComfyCommandImpl[]
|
|
return commands.map((command) => ({
|
|
id: command.id,
|
|
label: command.label,
|
|
menubarLabel: command.menubarLabel,
|
|
tooltip: command.tooltip
|
|
}))
|
|
})
|
|
).sort((a, b) => a.id.localeCompare(b.id))
|
|
|
|
const locale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
|
|
|
|
// Commands
|
|
const menuLabels = extractMenuCommandLocaleStrings()
|
|
const commandMenuLabels = new Set(
|
|
commands.map((command) => command.menubarLabel ?? command.label ?? '')
|
|
)
|
|
const allLabels = new Set([...menuLabels, ...commandMenuLabels])
|
|
allLabels.delete('')
|
|
|
|
const allLabelsLocale = Object.fromEntries(
|
|
Array.from(allLabels).map((label) => [normalizeI18nKey(label), label])
|
|
)
|
|
|
|
const allCommandsLocale = Object.fromEntries(
|
|
commands.map((command) => [
|
|
normalizeI18nKey(command.id),
|
|
{
|
|
label: command.label,
|
|
tooltip: command.tooltip
|
|
}
|
|
])
|
|
)
|
|
|
|
// Settings
|
|
const settings = await comfyPage.page.evaluate(() => {
|
|
const workspace = window['app'].extensionManager
|
|
const settings = workspace.setting.settings as Record<string, SettingParams>
|
|
return Object.values(settings)
|
|
.sort((a, b) => a.id.localeCompare(b.id))
|
|
.filter((setting) => setting.type !== 'hidden')
|
|
.map((setting) => ({
|
|
id: setting.id,
|
|
name: setting.name,
|
|
tooltip: setting.tooltip,
|
|
category: setting.category,
|
|
options:
|
|
typeof setting.options === 'function'
|
|
? // @ts-expect-error: Audit and deprecate usage of legacy options type:
|
|
// (value) => [string | {text: string, value: string}]
|
|
setting.options(setting.defaultValue ?? '')
|
|
: setting.options
|
|
}))
|
|
})
|
|
|
|
const allSettingsLocale = Object.fromEntries(
|
|
settings.map((setting) => [
|
|
normalizeI18nKey(setting.id),
|
|
{
|
|
name: setting.name,
|
|
tooltip: setting.tooltip,
|
|
// Don't translate the locale options as each option is in its own language.
|
|
// e.g. "English", "中文", "Русский", "日本語", "한국어"
|
|
options:
|
|
setting.options && setting.id !== 'Comfy.Locale'
|
|
? Object.fromEntries(
|
|
setting.options.map((option) => {
|
|
const optionLabel =
|
|
typeof option === 'string' ? option : option.text
|
|
return [normalizeI18nKey(optionLabel), optionLabel]
|
|
})
|
|
)
|
|
: undefined
|
|
}
|
|
])
|
|
)
|
|
|
|
const allSettingCategoriesLocale = Object.fromEntries(
|
|
settings
|
|
.flatMap((setting) => {
|
|
return (setting.category ?? setting.id.split('.')).slice(0, 2)
|
|
})
|
|
.map((category: string) => [
|
|
normalizeI18nKey(category),
|
|
formatCamelCase(category)
|
|
])
|
|
)
|
|
|
|
// Server Configs
|
|
const allServerConfigsLocale = Object.fromEntries(
|
|
SERVER_CONFIG_ITEMS.map((config) => [
|
|
normalizeI18nKey(config.id),
|
|
{
|
|
name: (config as unknown as FormItem).name,
|
|
tooltip: (config as unknown as FormItem).tooltip
|
|
}
|
|
])
|
|
)
|
|
|
|
const allServerConfigCategoriesLocale = Object.fromEntries(
|
|
SERVER_CONFIG_ITEMS.flatMap((config) => {
|
|
return config.category ?? ['General']
|
|
}).map((category) => [
|
|
normalizeI18nKey(category),
|
|
formatCamelCase(category)
|
|
])
|
|
)
|
|
|
|
// Desktop Dialogs
|
|
const allDesktopDialogsLocale = Object.fromEntries(
|
|
Object.values(DESKTOP_DIALOGS).map((dialog) => [
|
|
normalizeI18nKey(dialog.id),
|
|
{
|
|
title: dialog.title,
|
|
message: dialog.message,
|
|
buttons: Object.fromEntries(
|
|
dialog.buttons.map((button) => [
|
|
normalizeI18nKey(button.label),
|
|
button.label
|
|
])
|
|
)
|
|
}
|
|
])
|
|
)
|
|
|
|
fs.writeFileSync(
|
|
localePath,
|
|
JSON.stringify(
|
|
{
|
|
...locale,
|
|
menuLabels: allLabelsLocale,
|
|
// Do merge for settingsCategories as there are some manual translations
|
|
// for special panels like "About" and "Keybinding".
|
|
settingsCategories: {
|
|
...(locale.settingsCategories ?? {}),
|
|
...allSettingCategoriesLocale
|
|
},
|
|
serverConfigItems: allServerConfigsLocale,
|
|
serverConfigCategories: allServerConfigCategoriesLocale,
|
|
desktopDialogs: allDesktopDialogsLocale
|
|
},
|
|
null,
|
|
2
|
|
)
|
|
)
|
|
|
|
fs.writeFileSync(commandsPath, JSON.stringify(allCommandsLocale, null, 2))
|
|
fs.writeFileSync(settingsPath, JSON.stringify(allSettingsLocale, null, 2))
|
|
})
|