mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 14:45:36 +00:00
ceb9936058
## Summary
Sidebar buttons rendered literal i18n keys (e.g.
`sideToolbar.labels.assets`) on a fresh install when the user's
`navigator.language` base tag wasn't one of the 12 shipped locales —
German/Italian/Polish/Dutch/Brazilian-Portuguese users among others.
## Changes
- **What**: Add `resolveSupportedLocale()` that tries the full BCP-47
tag first (preserves `zh-TW`, `pt-BR`), then the base tag, then `'en'`.
Wire through both entry points (`createI18n`'s initial locale,
`Comfy.Locale`'s `defaultValue`) and clamp inside `loadLocale`,
propagating the resolved tag to `GraphView` so a stale stored
`Comfy.Locale='de'` from older builds also recovers.
- **Side benefit**: Brazilian Portuguese users were previously falling
through `pt-BR` → `pt` (unshipped) → broken. The full-tag-first lookup
now correctly lands them on the `pt-BR` bundle.
- **Breaking**: None.
- **Dependencies**: None.
## Root Cause
Three-link chain:
1. `Comfy.Locale`'s default was `() => navigator.language.split('-')[0]
|| 'en'`. German → `'de'` (unshipped).
2. `loadLocale('de')` silently `console.warn`'d and returned without
throwing.
3. `GraphView` then ran `i18n.global.locale.value = 'de'` anyway.
4. `st(key, fallback) = te(key) ? t(key) : fallback`. vue-i18n's `te()`
checks **only** the current locale and ignores `fallbackLocale` — every
key missed → `st()` returned the literal key string.
Two pathways reached the broken state (defaultValue path, and
unset-setting path through `createI18n`'s own `navigator.language`
snapshot); the new helper closes both.
## Review Focus
- `loadLocale` now returns `SupportedLocale` (was `void`). Old `void`
callers continue to compile; the only change is `GraphView` consuming
the return value.
- Unit-tested in `src/i18n.test.ts` (added `resolveSupportedLocale`
block + updated the `loadLocale` unsupported-locale case from "warn" to
"clamp to en").
- Self-reproduced via Playwright with `navigator.language='de-DE'` +
fresh-install state on both `main` (shows the bug) and this branch
(shows the fix). Spec saved at
`temp/scripts/issue-10563-locale-bug.spec.ts`.
Fixes #10563
FE-480 — https://linear.app/comfyorg/issue/FE-480
## Screenshots
**Before** (from #10563, on `main`):
<img width="258" height="399" alt="Sidebar with literal i18n keys"
src="https://github.com/user-attachments/assets/098d1d76-8e89-4237-813f-5f030b34e51e"
/>
**After** (this branch, same `navigator.language='de-DE'`):
<img width="367" height="793" alt="Screenshot 2026-04-28 at 2 07 38 PM"
src="https://github.com/user-attachments/assets/9d279de3-50a8-4774-999f-ab4c3018a9ef"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11712-fix-i18n-clamp-unsupported-browser-locales-to-a-shipped-tag-3506d73d3650812f89d2f0fe3199de3a)
by [Unito](https://www.unito.io)
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
|
|
|
|
// Regression test for https://github.com/Comfy-Org/ComfyUI_frontend/issues/10563
|
|
//
|
|
// Pins the end-to-end cascade through createI18n + coreSettings defaultValue +
|
|
// GraphView watchEffect: when navigator.language base tag is unsupported (e.g.
|
|
// 'de-DE') and Comfy.Locale is unset (fresh-install state), sidebar labels
|
|
// must render translated strings, not literal i18n keys like
|
|
// 'sideToolbar.labels.assets'.
|
|
test.describe('i18n locale fallback', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.page.addInitScript(() => {
|
|
Object.defineProperty(navigator, 'language', {
|
|
value: 'de-DE',
|
|
configurable: true
|
|
})
|
|
Object.defineProperty(navigator, 'languages', {
|
|
value: ['de-DE', 'de'],
|
|
configurable: true
|
|
})
|
|
})
|
|
// Default sidebar size on small viewports hides labels; force normal so
|
|
// .side-bar-button-label is rendered for the assertion.
|
|
await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
|
|
await comfyPage.page.reload()
|
|
await comfyPage.waitForAppReady()
|
|
})
|
|
|
|
test('sidebar labels render translated strings, not raw i18n keys', async ({
|
|
comfyPage
|
|
}) => {
|
|
const { page } = comfyPage
|
|
await page.setViewportSize({ width: 1920, height: 1080 })
|
|
|
|
const labelTexts = await page
|
|
.getByTestId('side-toolbar')
|
|
.locator('.side-bar-button-label')
|
|
.allTextContents()
|
|
|
|
expect(labelTexts.length).toBeGreaterThan(0)
|
|
for (const text of labelTexts) {
|
|
expect(text).not.toContain('sideToolbar.labels')
|
|
}
|
|
})
|
|
})
|