@modern-js/plugin-i18n 2.69.5 → 3.0.0-alpha.0

package/src/runtime/i18n/detection/middleware.ts

@@ -0,0 +1,251 @@
+import { isBrowser } from '@modern-js/runtime';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import type { I18nInstance } from '../instance';
+import { getActualI18nextInstance, isI18nWrapperInstance } from '../instance';
+
+/**
+ * Register LanguageDetector plugin to i18n instance
+ * Must be called before init() to properly register the detector
+ * For wrapper instances, ensure detector is registered on the underlying i18next instance
+ */
+export const useI18nextLanguageDetector = (i18nInstance: I18nInstance) => {
+  if (!i18nInstance.isInitialized) {
+    // For wrapper instances, also register on the underlying instance
+    if (isI18nWrapperInstance(i18nInstance)) {
+      const actualInstance = getActualI18nextInstance(i18nInstance);
+      if (actualInstance && !actualInstance.isInitialized) {
+        actualInstance.use(LanguageDetector);
+      }
+    }
+    return i18nInstance.use(LanguageDetector);
+  }
+  return i18nInstance;
+};
+
+/**
+ * Read language directly from localStorage/cookie
+ * Fallback when detector is not available in services
+ */
+export const readLanguageFromStorage = (
+  detectionOptions?: any,
+): string | undefined => {
+  try {
+    const options = detectionOptions || {};
+    const order = options.order || [
+      'querystring',
+      'cookie',
+      'localStorage',
+      'navigator',
+      'htmlTag',
+      'path',
+      'subdomain',
+    ];
+
+    // Follow the detection order
+    for (const method of order) {
+      switch (method) {
+        case 'querystring': {
+          const lookupKey = options.lookupQuerystring || 'lng';
+          const urlParams = new URLSearchParams(window.location.search);
+          const lang = urlParams.get(lookupKey);
+          if (lang) {
+            return lang;
+          }
+          break;
+        }
+        case 'cookie': {
+          const lookupKey = options.lookupCookie || 'i18next';
+          const cookies = document.cookie
+            .split(';')
+            .reduce((acc: Record<string, string>, item: string) => {
+              const [key, value] = item.trim().split('=');
+              if (key && value) {
+                acc[key] = decodeURIComponent(value);
+              }
+              return acc;
+            }, {});
+          if (cookies[lookupKey]) {
+            return cookies[lookupKey];
+          }
+          break;
+        }
+        case 'localStorage': {
+          const lookupKey = options.lookupLocalStorage || 'i18nextLng';
+          const keysToCheck = [lookupKey];
+          if (lookupKey === 'i18nextLng') {
+            keysToCheck.push('i18next');
+          }
+          for (const key of keysToCheck) {
+            const stored = localStorage.getItem(key);
+            if (stored) {
+              return stored;
+            }
+          }
+          break;
+        }
+        case 'navigator': {
+          if (navigator.language) {
+            return navigator.language.split('-')[0];
+          }
+          break;
+        }
+        case 'htmlTag': {
+          const htmlLang = document.documentElement.lang;
+          if (htmlLang) {
+            return htmlLang.split('-')[0];
+          }
+          break;
+        }
+      }
+    }
+  } catch (error) {
+    // Ignore errors
+  }
+
+  return undefined;
+};
+
+/**
+ * Detect language using i18next-browser-languagedetector
+ * For initialized instances without detector in services, manually create a detector instance
+ * For wrapper instances, access the underlying i18next instance's services
+ */
+export const detectLanguage = (
+  i18nInstance: I18nInstance,
+  _request?: any,
+  detectionOptions?: any,
+): string | undefined => {
+  try {
+    // For wrapper instances, get the underlying i18next instance
+    const actualInstance = isI18nWrapperInstance(i18nInstance)
+      ? getActualI18nextInstance(i18nInstance)
+      : i18nInstance;
+
+    // Check if either instance is initialized
+    const isInitialized =
+      i18nInstance.isInitialized || actualInstance?.isInitialized;
+
+    // Try to get detector from services (prefer actual instance for wrapper)
+    const detector =
+      actualInstance?.services?.languageDetector ||
+      i18nInstance.services?.languageDetector;
+    if (detector && typeof detector.detect === 'function') {
+      const result = detector.detect();
+      if (typeof result === 'string') {
+        return result;
+      }
+      if (Array.isArray(result) && result.length > 0) {
+        return result[0];
+      }
+      // If detector exists but returns undefined, continue to fallback logic
+    }
+
+    // Fallback: read directly from storage (always try this in browser)
+    // This is important for wrapper instances where detector might not be properly initialized
+    if (isBrowser()) {
+      const directRead = readLanguageFromStorage(detectionOptions);
+      if (directRead) {
+        return directRead;
+      }
+    }
+
+    // If instance is initialized, try creating manual detector
+    if (isInitialized) {
+      // Use actual instance's services/options for wrapper, otherwise use wrapper's
+      const servicesToUse = actualInstance?.services || i18nInstance.services;
+      const optionsToUse = actualInstance?.options || i18nInstance.options;
+
+      if (servicesToUse && optionsToUse) {
+        const manualDetector = new LanguageDetector();
+        const mergedOptions = detectionOptions
+          ? { ...optionsToUse, detection: detectionOptions }
+          : optionsToUse;
+        manualDetector.init(servicesToUse, mergedOptions as any);
+
+        const result = manualDetector.detect();
+        if (typeof result === 'string') {
+          return result;
+        }
+        if (Array.isArray(result) && result.length > 0) {
+          return result[0];
+        }
+      }
+    }
+  } catch (error) {
+    return undefined;
+  }
+
+  return undefined;
+};
+
+/**
+ * Cache user language to localStorage/cookie
+ * Uses LanguageDetector's cacheUserLanguage method when available
+ * For wrapper instances, access the underlying i18next instance's services
+ */
+export const cacheUserLanguage = (
+  i18nInstance: I18nInstance,
+  language: string,
+  detectionOptions?: any,
+): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    // For wrapper instances, get the underlying i18next instance
+    const actualInstance = isI18nWrapperInstance(i18nInstance)
+      ? getActualI18nextInstance(i18nInstance)
+      : i18nInstance;
+
+    // Try to use detector's cacheUserLanguage method first
+    // Prefer actual instance's detector for wrapper instances
+    const detector =
+      actualInstance?.services?.languageDetector ||
+      i18nInstance.services?.languageDetector;
+    if (detector && typeof detector.cacheUserLanguage === 'function') {
+      try {
+        detector.cacheUserLanguage(language);
+        return;
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            '[i18n] Failed to cache via detector, falling back to manual cache:',
+            error,
+          );
+        }
+      }
+    }
+
+    // Fallback: manually create detector instance if i18n is initialized
+    const isInitialized =
+      i18nInstance.isInitialized || actualInstance?.isInitialized;
+    const servicesToUse = actualInstance?.services || i18nInstance.services;
+    const optionsToUse = actualInstance?.options || i18nInstance.options;
+
+    if (isInitialized && servicesToUse && optionsToUse) {
+      try {
+        const userOptions = detectionOptions || optionsToUse?.detection;
+        const mergedOptions = userOptions
+          ? { ...optionsToUse, detection: userOptions }
+          : optionsToUse;
+
+        const manualDetector = new LanguageDetector();
+        manualDetector.init(servicesToUse, mergedOptions as any);
+
+        if (typeof manualDetector.cacheUserLanguage === 'function') {
+          manualDetector.cacheUserLanguage(language);
+          return;
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('[i18n] Failed to create manual detector:', error);
+        }
+      }
+    }
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Failed to cache user language:', error);
+    }
+  }
+};

package/src/runtime/i18n/index.ts

@@ -0,0 +1,8 @@
+export type {
+  I18nInstance,
+  I18nInitOptions,
+} from './instance';
+
+export { isI18nInstance, getI18nInstance } from './instance';
+
+export { assertI18nInstance } from './utils';

package/src/runtime/i18n/instance.ts

@@ -0,0 +1,227 @@
+import type { BaseBackendOptions } from '../../shared/type';
+
+export interface I18nResourceStore {
+  data?: {
+    [language: string]: {
+      [namespace: string]: string | { [key: string]: any };
+    };
+  };
+  addResourceBundle?: (
+    language: string,
+    namespace: string,
+    resources: Record<string, string>,
+    deep?: boolean,
+    overwrite?: boolean,
+  ) => void;
+}
+
+export function isI18nWrapperInstance(obj: any): boolean {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+  if (!obj.i18nInstance || typeof obj.i18nInstance !== 'object') {
+    return false;
+  }
+  if (!obj.i18nInstance.instance) {
+    return false;
+  }
+  if (typeof obj.init !== 'function' || typeof obj.use !== 'function') {
+    return false;
+  }
+  return true;
+}
+
+export function getI18nWrapperI18nextInstance(wrapperInstance: any): any {
+  if (isI18nWrapperInstance(wrapperInstance)) {
+    return wrapperInstance.i18nInstance?.instance;
+  }
+  return null;
+}
+
+export function getActualI18nextInstance(instance: I18nInstance | any): any {
+  if (isI18nWrapperInstance(instance)) {
+    const i18nextInstance = getI18nWrapperI18nextInstance(instance);
+    return i18nextInstance || instance;
+  }
+  return instance;
+}
+
+export interface I18nInstance {
+  language: string;
+  isInitialized: boolean;
+  init: {
+    (callback?: (error: any, t: any) => void): Promise<any>;
+    (
+      options: I18nInitOptions,
+      callback?: (error: any, t: any) => void,
+    ): Promise<any>;
+  };
+  changeLanguage?: (
+    lng?: string,
+    callback?: (error: any, t: any) => void,
+  ) => Promise<any>;
+  setLang?: (lang: string) => void | Promise<void>;
+  use: (plugin: any) => void;
+  createInstance: (options?: I18nInitOptions) => I18nInstance;
+  cloneInstance?: () => I18nInstance; // ssr need
+  // i18next store (may not be in type definition but exists at runtime)
+  store?: I18nResourceStore;
+  emit?: (event: string, ...args: any[]) => void;
+  reloadResources?: (language?: string, namespace?: string) => Promise<void>;
+  services?: {
+    languageDetector?: {
+      detect: (request?: any, options?: any) => string | string[] | undefined;
+      [key: string]: any;
+    };
+    resourceStore?: I18nResourceStore;
+    backend?: any; // Backend instance (e.g., SdkBackend)
+    [key: string]: any;
+  };
+  // i18next instance options (available after initialization)
+  options?: {
+    backend?: BackendOptions;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+type LanguageDetectorOrder = string[];
+type LanguageDetectorCaches = boolean | string[];
+export interface LanguageDetectorOptions {
+  order?: LanguageDetectorOrder;
+  lookupQuerystring?: string;
+  lookupCookie?: string;
+  lookupLocalStorage?: string;
+  lookupSession?: string;
+  lookupFromPathIndex?: number;
+  caches?: LanguageDetectorCaches;
+  cookieExpirationDate?: Date;
+  cookieDomain?: string;
+  lookupHeader?: string;
+}
+
+export interface BackendOptions extends Omit<BaseBackendOptions, 'enabled'> {
+  parse?: (data: string) => any;
+  stringify?: (data: any) => string;
+  [key: string]: any;
+}
+
+export interface Resources {
+  [lng: string]: {
+    [source: string]: string | Record<string, string>;
+  };
+}
+
+export type I18nInitOptions = {
+  lng?: string;
+  fallbackLng?: string;
+  supportedLngs?: string[];
+  initImmediate?: boolean;
+  detection?: LanguageDetectorOptions;
+  backend?: BackendOptions;
+  resources?: Resources;
+  ns?: string | string[];
+  defaultNS?: string | string[];
+  interpolation?: {
+    escapeValue?: boolean;
+    [key: string]: any;
+  };
+  react?: {
+    useSuspense?: boolean;
+    [key: string]: any;
+  };
+};
+
+export function isI18nInstance(obj: any): obj is I18nInstance {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+
+  if (isI18nWrapperInstance(obj)) {
+    return true;
+  }
+
+  return typeof obj.init === 'function' && typeof obj.use === 'function';
+}
+
+async function tryImportI18next(): Promise<I18nInstance | null> {
+  try {
+    const i18next = await import('i18next');
+    return i18next.default as unknown as I18nInstance;
+  } catch (error) {
+    return null;
+  }
+}
+
+async function createI18nextInstance(): Promise<I18nInstance | null> {
+  try {
+    const i18next = await tryImportI18next();
+    if (!i18next) {
+      return null;
+    }
+    return i18next.createInstance({
+      initImmediate: false,
+    }) as unknown as I18nInstance;
+  } catch (error) {
+    return null;
+  }
+}
+
+async function tryImportReactI18next() {
+  try {
+    const reactI18next = await import('react-i18next');
+    return reactI18next;
+  } catch (error) {
+    return null;
+  }
+}
+
+export function getI18nextInstanceForProvider(
+  instance: I18nInstance | any,
+): any {
+  if (isI18nWrapperInstance(instance)) {
+    const i18nextInstance = getI18nWrapperI18nextInstance(instance);
+    if (i18nextInstance) {
+      return i18nextInstance;
+    }
+  }
+
+  return instance;
+}
+
+export async function getI18nInstance(
+  userInstance?: I18nInstance | any,
+): Promise<I18nInstance> {
+  if (userInstance) {
+    if (isI18nWrapperInstance(userInstance)) {
+      return userInstance as I18nInstance;
+    }
+
+    if (isI18nInstance(userInstance)) {
+      return userInstance;
+    }
+  }
+
+  const i18nextInstance = await createI18nextInstance();
+  if (i18nextInstance) {
+    return i18nextInstance;
+  }
+
+  throw new Error('No i18n instance found');
+}
+
+export async function getInitReactI18next() {
+  const reactI18nextModule = await tryImportReactI18next();
+  if (reactI18nextModule) {
+    return reactI18nextModule.initReactI18next;
+  }
+  return null;
+}
+
+export async function getI18nextProvider() {
+  const reactI18nextModule = await tryImportReactI18next();
+  if (reactI18nextModule) {
+    return reactI18nextModule.I18nextProvider;
+  }
+  return null;
+}