feat: i18n plugin support backend (#7867)

Author: caohuilin

packages/runtime/plugin-i18n/package.json

@@ -86,7 +86,9 @@
       "@modern-js/utils": "workspace:*",
       "@swc/helpers": "^0.5.17",
       "i18next-browser-languagedetector": "^8.2.0",
-      "i18next-http-middleware": "^3.8.1"
+      "i18next-http-middleware": "^3.8.1",
+      "i18next-fs-backend": "^2.6.0",
+      "i18next-http-backend": "^3.0.2"
     },
     "peerDependencies": {
       "react": ">=17",

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

@@ -1,28 +1,33 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 import { getPublicDirRoutePrefixes } from '@modern-js/server-core';
-import type { LocaleDetectionOptions } from '../shared/type';
-import { getLocaleDetectionOptions } from '../shared/utils';
+import type { BackendOptions, LocaleDetectionOptions } from '../shared/type';
+import { getBackendOptions, getLocaleDetectionOptions } from '../shared/utils';
 
 export interface I18nPluginOptions {
   localeDetection?: LocaleDetectionOptions;
+  backend?: BackendOptions;
 }
 
 export const i18nPlugin = (
   options: I18nPluginOptions = {},
 ): CliPlugin<AppTools> => ({
   name: '@modern-js/plugin-i18n',
   setup: api => {
-    const { localeDetection } = options;
+    const { localeDetection, backend } = options;
     api._internalRuntimePlugins(({ entrypoint, plugins }) => {
       const localeDetectionOptions = localeDetection
         ? getLocaleDetectionOptions(entrypoint.entryName, localeDetection)
         : undefined;
+      const backendOptions = backend
+        ? getBackendOptions(entrypoint.entryName, backend)
+        : undefined;
       plugins.push({
         name: 'i18n',
         path: '@modern-js/plugin-i18n/runtime',
         config: {
           entryName: entrypoint.entryName,
           localeDetection: localeDetectionOptions,
+          backend: backendOptions,
         },
       });
       return {

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

@@ -0,0 +1,10 @@
+import { deepMerge } from '../../../shared/deepMerge';
+import type { BackendOptions } from '../instance';
+
+export function mergeBackendOptions(
+  defaultOptions: BackendOptions,
+  cliOptions: BackendOptions = {},
+  userOptions?: BackendOptions,
+): BackendOptions {
+  return deepMerge(deepMerge(defaultOptions, cliOptions), userOptions ?? {});
+}

packages/runtime/plugin-i18n/src/runtime/i18n/backend/defaults.node.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_I18NEXT_BACKEND_OPTIONS = {
+  loadPath: './locales/{{lng}}/{{ns}}.json',
+  addPath: './locales/{{lng}}/{{ns}}.json',
+};

packages/runtime/plugin-i18n/src/runtime/i18n/backend/defaults.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_I18NEXT_BACKEND_OPTIONS = {
+  loadPath: '/locales/{{lng}}/{{ns}}.json',
+  addPath: '/locales/{{lng}}/{{ns}}.json',
+};

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

@@ -0,0 +1,18 @@
+import type { BaseBackendOptions } from '../../../shared/type';
+import type { BackendOptions, I18nInitOptions } from '../instance';
+import { mergeBackendOptions as baseMergeBackendOptions } from './config';
+import { DEFAULT_I18NEXT_BACKEND_OPTIONS } from './defaults';
+
+export const mergeBackendOptions = (
+  backend?: BaseBackendOptions,
+  userInitOptions?: I18nInitOptions,
+) => {
+  const mergedBackend = backend?.enabled
+    ? baseMergeBackendOptions(
+        DEFAULT_I18NEXT_BACKEND_OPTIONS,
+        backend as BackendOptions,
+        userInitOptions?.backend,
+      )
+    : userInitOptions?.backend;
+  return mergedBackend;
+};

packages/runtime/plugin-i18n/src/runtime/i18n/backend/middleware.node.ts

@@ -0,0 +1,6 @@
+import Backend from 'i18next-fs-backend';
+import type { I18nInstance } from '../instance';
+
+export const useI18nextBackend = (i18nInstance: I18nInstance) => {
+  return i18nInstance.use(Backend);
+};

packages/runtime/plugin-i18n/src/runtime/i18n/backend/middleware.ts

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

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

@@ -21,8 +21,12 @@ export const DEFAULT_I18NEXT_DETECTION_OPTIONS = {
 };
 
 export function mergeDetectionOptions(
+  cliOptions?: LanguageDetectorOptions,
   userOptions?: LanguageDetectorOptions,
   defaultOptions: LanguageDetectorOptions = DEFAULT_I18NEXT_DETECTION_OPTIONS,
 ): LanguageDetectorOptions {
-  return deepMerge(defaultOptions, userOptions);
+  return deepMerge(
+    deepMerge(defaultOptions, cliOptions ?? {}),
+    userOptions ?? {},
+  );
 }

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

@@ -1,6 +1,10 @@
 import { type RuntimeContext, isBrowser } from '@modern-js/runtime';
 import { detectLanguageFromPath } from '../../utils';
-import type { I18nInitOptions, I18nInstance } from '../instance';
+import type {
+  I18nInitOptions,
+  I18nInstance,
+  LanguageDetectorOptions,
+} from '../instance';
 import { mergeDetectionOptions as mergeDetectionOptionsUtil } from './config';
 import { detectLanguage } from './middleware';
 
@@ -13,12 +17,16 @@ export const getLanguageFromSSRData = (window: Window): string | undefined => {
   return ssrData?.data?.i18nData?.lng as string | undefined;
 };
 
-export interface LanguageDetectionOptions {
+export interface BaseLanguageDetectionOptions {
   languages: string[];
   fallbackLanguage: string;
   localePathRedirect: boolean;
   i18nextDetector: boolean;
+  detection?: LanguageDetectorOptions;
   userInitOptions?: I18nInitOptions;
+}
+
+export interface LanguageDetectionOptions extends BaseLanguageDetectionOptions {
   pathname: string;
   ssrContext?: any;
 }
@@ -96,20 +104,15 @@ const detectLanguageFromPathPriority = (
  */
 const initializeI18nForDetector = async (
   i18nInstance: I18nInstance,
-  options: {
-    languages: string[];
-    fallbackLanguage: string;
-    localePathRedirect: boolean;
-    i18nextDetector: boolean;
-    userInitOptions?: I18nInitOptions;
-  },
+  options: BaseLanguageDetectionOptions,
 ): Promise<void> => {
   if (i18nInstance.isInitialized) {
     return;
   }
 
-  const { mergedDetection } = mergeDetectionOptions(
+  const mergedDetection = mergeDetectionOptions(
     options.i18nextDetector,
+    options.detection,
     options.localePathRedirect,
     options.userInitOptions,
   );
@@ -140,14 +143,7 @@ const initializeI18nForDetector = async (
  */
 const detectLanguageFromI18nextDetector = async (
   i18nInstance: I18nInstance,
-  options: {
-    languages: string[];
-    fallbackLanguage: string;
-    localePathRedirect: boolean;
-    i18nextDetector: boolean;
-    userInitOptions?: I18nInitOptions;
-    ssrContext?: any;
-  },
+  options: BaseLanguageDetectionOptions & { ssrContext?: any },
 ): Promise<string | undefined> => {
   if (!options.i18nextDetector) {
     return undefined;
@@ -195,6 +191,7 @@ export const detectLanguageWithPriority = async (
     fallbackLanguage,
     localePathRedirect,
     i18nextDetector,
+    detection,
     userInitOptions,
     pathname,
     ssrContext,
@@ -219,6 +216,7 @@ export const detectLanguageWithPriority = async (
       fallbackLanguage,
       localePathRedirect,
       i18nextDetector,
+      detection,
       userInitOptions,
       ssrContext,
     });
@@ -276,18 +274,19 @@ export const buildInitOptions = (
  */
 export const mergeDetectionOptions = (
   i18nextDetector: boolean,
-  localePathRedirect: boolean,
+  detection?: LanguageDetectorOptions,
+  localePathRedirect?: boolean,
   userInitOptions?: I18nInitOptions,
 ) => {
   // Exclude 'path' from detection order to avoid conflict with manual path detection
   const mergedDetection = i18nextDetector
-    ? mergeDetectionOptionsUtil(userInitOptions?.detection)
+    ? mergeDetectionOptionsUtil(detection, userInitOptions?.detection)
     : userInitOptions?.detection;
   if (localePathRedirect && mergedDetection?.order) {
     mergedDetection.order = mergedDetection.order.filter(
       (item: string) => item !== 'path',
     );
   }
 
-  return { mergedDetection };
+  return mergedDetection;
 };