Files
ComfyUI_frontend/scripts/collect-i18n-general.ts
sno 8e006bb8a3 [bugfix] Add vite-define shim for Playwright i18n collection (#6906)
## 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>
2025-12-02 03:43:20 +00:00

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))
})