Skip to content

feat: add lazy-loaded i18n with multi language support#75

Open
SCPZ24 wants to merge 1 commit into
AIEraDev:masterfrom
SCPZ24:master
Open

feat: add lazy-loaded i18n with multi language support#75
SCPZ24 wants to merge 1 commit into
AIEraDev:masterfrom
SCPZ24:master

Conversation

@SCPZ24

@SCPZ24 SCPZ24 commented Jun 7, 2026

Copy link
Copy Markdown

feat: add lazy-loaded i18n with English / Japanese / Chinese support

Summary

This PR introduces multi-language UI support to Clypra. Since the entire UI
is a single React app shared by the Tauri desktop shell and the Capacitor
iOS/Android shells (all loading the same dist/ bundle), the localization is
implemented purely in the React layer — no native Swift/Kotlin/Gradle changes
are required, and all three platforms get translations automatically.

Users can switch languages via Settings → Appearance → Language
(English / 日本語 / 简体中文). The selection is persisted and restored on
next launch.

截屏2026-06-07 20 13 54

Motivation

The UI strings were previously hardcoded in English, making the editor
inaccessible to non-English speakers. This adds a proper i18n foundation so
the community can grow translation coverage incrementally.

Implementation

  • Framework: react-i18next + i18next.
  • Lazy loading: each locale lives in its own JSON
    (src/i18n/locales/{en,ja,zh-CN}.json) and is pulled in via dynamic
    import(), so Vite emits a separate chunk per language. Only the active
    language plus the en fallback are loaded at startup; other languages are
    fetched on demand the first time the user selects them, then cached.
  • State: a persisted language field added to the existing Zustand
    settingsStore, mirroring the existing theme/font pattern. setLanguage
    updates the UI state immediately, then awaits the chunk load before switching.
  • Startup: main.tsx awaits initI18n(persistedLanguage) before the first
    render (with first-run navigator.language detection) to avoid a key-flash.
  • CJK fonts: when switching to Japanese/Chinese, CJK fallback fonts
    (PingFang SC, Hiragino Sans, Microsoft YaHei, Noto Sans CJK SC) are appended
    to --font-sans to prevent missing glyphs.
  • String extraction: migrated hardcoded strings to t() across the
    Settings modal, TopBar, all media tabs, the properties panel, the Launch
    screen, and the Export dialog, with natural Japanese and Simplified Chinese
    translations.

Scope / follow-ups

Intentionally left for a later pass: timeline components, preview/transport
controls, cache settings, effect/template cards, context menus, and
mobile/viewport chrome. These are mostly covered by tests asserting English
text; migrating them cleanly first requires the test setup to initialize i18n.
This is a non-breaking, additive change (default language remains English).

Testing

  • npm run build passes tsc type-checking cleanly.
  • Verified dist/assets/ contains separate lazy chunks for en, ja, and
    zh-CN.
  • Manually switched between all three languages: instant after first load,
    persists across reload, and CJK text renders without missing glyphs.

Manual testing checklist:

  • No console errors
  • Language switch works on desktop (Tauri)
  • Verified on iOS/Android (Capacitor) — needs a reviewer with mobile setup
  • Tested on Windows / Linux
截屏2026-06-07 20 11 46

Introduce react-i18next with on-demand locale chunks, a language selector
in Settings → Appearance, and CJK font fallbacks for Japanese and Chinese.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant