feat: i18n use i18next detection plugin

Author: caohuilin

packages/runtime/plugin-i18n/src/runtime/i18n/detection/config.ts

@@ -0,0 +1,68 @@
+import type { LanguageDetectorOptions } from '../instance';
+
+export const DEFAULT_I18NEXT_DETECTION_OPTIONS = {
+  caches: ['cookie', 'localStorage'],
+  order: [
+    'querystring',
+    'cookie',
+    'localStorage',
+    'header',
+    'navigator',
+    'htmlTag',
+    'path',
+    'subdomain',
+  ],
+  cookieMinutes: 60 * 24 * 365,
+  lookupQuerystring: 'lng',
+  lookupCookie: 'i18next',
+  lookupLocalStorage: 'i18nextLng',
+  lookupHeader: 'accept-language',
+};
+
+/**
+ * Deep merge detection options, merging user options with default options
+ * @param defaultOptions - Default detection options
+ * @param userOptions - User-provided detection options (optional)
+ * @returns Merged detection options
+ */
+export function mergeDetectionOptions(
+  userOptions?: LanguageDetectorOptions,
+  defaultOptions: LanguageDetectorOptions = DEFAULT_I18NEXT_DETECTION_OPTIONS,
+): LanguageDetectorOptions {
+  if (!userOptions) {
+    return defaultOptions;
+  }
+
+  const merged: Record<string, any> = { ...defaultOptions };
+  const userOptionsRecord = userOptions as Record<string, any>;
+
+  // Deep merge nested objects
+  for (const key in userOptions) {
+    if (userOptionsRecord[key] !== undefined) {
+      const userValue = userOptionsRecord[key];
+      const defaultValue = merged[key];
+
+      // If both are objects (but not arrays or Date), deep merge them
+      if (
+        userValue &&
+        typeof userValue === 'object' &&
+        !Array.isArray(userValue) &&
+        !(userValue instanceof Date) &&
+        defaultValue &&
+        typeof defaultValue === 'object' &&
+        !Array.isArray(defaultValue) &&
+        !(defaultValue instanceof Date)
+      ) {
+        merged[key] = mergeDetectionOptions(
+          defaultValue as LanguageDetectorOptions,
+          userValue as LanguageDetectorOptions,
+        );
+      } else {
+        // Otherwise, use user value (which overrides default)
+        merged[key] = userValue;
+      }
+    }
+  }
+
+  return merged as LanguageDetectorOptions;
+}

packages/runtime/plugin-i18n/src/runtime/i18n/detection/index.node.ts

@@ -0,0 +1,6 @@
+import { LanguageDetector } from 'i18next-http-middleware';
+import type { I18nInstance } from '../instance';
+
+export const useI18nextLanguageDetector = (i18nInstance: I18nInstance) => {
+  return i18nInstance.use(LanguageDetector);
+};

packages/runtime/plugin-i18n/src/runtime/i18n/detection/index.ts

@@ -0,0 +1,6 @@
+import LanguageDetector from 'i18next-browser-languagedetector';
+import type { I18nInstance } from '../instance';
+
+export const useI18nextLanguageDetector = (i18nInstance: I18nInstance) => {
+  return i18nInstance.use(LanguageDetector);
+};

packages/runtime/plugin-i18n/src/runtime/i18n/instance.ts

@@ -9,11 +9,25 @@ export interface I18nInstance {
   cloneInstance?: () => I18nInstance; // ssr need
 }
 
+type LanguageDetectorOrder = string[];
+type LanguageDetectorCaches = boolean | string[];
+export interface LanguageDetectorOptions {
+  order?: LanguageDetectorOrder;
+  lookupQuerystring?: string;
+  lookupCookie?: string;
+  lookupSession?: string;
+  lookupFromPathIndex?: number;
+  caches?: LanguageDetectorCaches;
+  cookieExpirationDate?: Date;
+  cookieDomain?: string;
+}
+
 export type I18nInitOptions = {
   lng?: string;
   fallbackLng?: string;
   supportedLngs?: string[];
   initImmediate?: boolean;
+  detection?: LanguageDetectorOptions;
 };
 
 export function isI18nInstance(obj: any): obj is I18nInstance {

packages/runtime/plugin-i18n/src/runtime/index.tsx

@@ -9,6 +9,8 @@ import type { BaseLocaleDetectionOptions } from '../utils/config';
 import { ModernI18nProvider } from './context';
 import type { I18nInitOptions, I18nInstance } from './i18n';
 import { getI18nInstance } from './i18n';
+import { useI18nextLanguageDetector } from './i18n/detection';
+import { mergeDetectionOptions } from './i18n/detection/config';
 import { getI18nextProvider, getInitReactI18next } from './i18n/instance';
 import { getEntryPath, getLanguageFromPath } from './utils';
 
@@ -26,7 +28,6 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
     const {
       entryName,
       i18nInstance: userI18nInstance,
-      changeLanguage,
       initOptions: userInitOptions,
       localeDetection,
     } = options;
@@ -60,6 +61,9 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       if (initReactI18next) {
         i18nInstance.use(initReactI18next);
       }
+      if (i18nextDetector) {
+        useI18nextLanguageDetector(i18nInstance);
+      }
       // Always detect language from path for consistency between SSR and client
       let initialLanguage = fallbackLanguage;
       if (localePathRedirect) {
@@ -73,11 +77,17 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
         }
       }
       if (!i18nInstance.isInitialized) {
+        // Merge detection options: default options + user options
+        const mergedDetection = i18nextDetector
+          ? mergeDetectionOptions(userInitOptions?.detection)
+          : userInitOptions?.detection;
+
         const initOptions: I18nInitOptions = {
           lng: initialLanguage,
           fallbackLng: fallbackLanguage,
           supportedLngs: languages,
           ...(userInitOptions || {}),
+          detection: mergedDetection,
         };
         await i18nInstance.init(initOptions);
       }