/** * 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;