Files
claudecodeui/src/i18n/config.js

130 lines
3.5 KiB
JavaScript

/**
* i18n Configuration
*
* Configures i18next for internationalization support.
* Features:
* - Lazy-loading of translation namespaces
* - Language detection from localStorage
* - Fallback to English for missing translations
* - Development mode warnings for missing keys
*/
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
// Import translation resources
import enCommon from './locales/en/common.json';
import enSettings from './locales/en/settings.json';
import enAuth from './locales/en/auth.json';
import enSidebar from './locales/en/sidebar.json';
import enChat from './locales/en/chat.json';
import enCodeEditor from './locales/en/codeEditor.json';
import zhCommon from './locales/zh-CN/common.json';
import zhSettings from './locales/zh-CN/settings.json';
import zhAuth from './locales/zh-CN/auth.json';
import zhSidebar from './locales/zh-CN/sidebar.json';
import zhChat from './locales/zh-CN/chat.json';
import zhCodeEditor from './locales/zh-CN/codeEditor.json';
// Import supported languages configuration
import { languages } from './languages.js';
// Get saved language preference from localStorage
const getSavedLanguage = () => {
try {
const saved = localStorage.getItem('userLanguage');
// Validate that the saved language is supported
if (saved && languages.some(lang => lang.value === saved)) {
return saved;
}
return 'en';
} catch {
return 'en';
}
};
// Initialize i18next
i18n
.use(LanguageDetector) // Detect user language
.use(initReactI18next) // Pass i18n instance to react-i18next
.init({
// Resources containing all translations
resources: {
en: {
common: enCommon,
settings: enSettings,
auth: enAuth,
sidebar: enSidebar,
chat: enChat,
codeEditor: enCodeEditor,
},
'zh-CN': {
common: zhCommon,
settings: zhSettings,
auth: zhAuth,
sidebar: zhSidebar,
chat: zhChat,
codeEditor: zhCodeEditor,
},
},
// Default language
lng: getSavedLanguage(),
// Fallback language when a translation is missing
fallbackLng: 'en',
// Enable debug mode in development (logs missing keys to console)
debug: import.meta.env.DEV,
// Namespaces - load only what's needed
ns: ['common', 'settings', 'auth', 'sidebar', 'chat', 'codeEditor'],
defaultNS: 'common',
// Key separator for nested keys (default: '.')
keySeparator: '.',
// Namespace separator (default: ':')
nsSeparator: ':',
// Save missing translations (disabled - requires manual review)
saveMissing: false,
// Interpolation settings
interpolation: {
escapeValue: false, // React already escapes values
},
// React-specific settings
react: {
useSuspense: true, // Use Suspense for lazy-loading
bindI18n: 'languageChanged', // Re-render on language change
bindI18nStore: false, // Don't re-render on resource changes
},
// Detection options
detection: {
// Order of language detection (local storage first)
order: ['localStorage'],
// Keys to look for in localStorage
lookupLocalStorage: 'userLanguage',
// Cache user language
caches: ['localStorage'],
},
});
// Save language preference when it changes
i18n.on('languageChanged', (lng) => {
try {
localStorage.setItem('userLanguage', lng);
} catch (error) {
console.error('Failed to save language preference:', error);
}
});
export default i18n;