feat: i18n plugin support merge custom plugin config && op wrap root

Author: caohuilin

packages/runtime/plugin-i18n/package.json

@@ -88,6 +88,7 @@
       "@modern-js/plugin": "workspace:*",
       "@modern-js/server-core": "workspace:*",
       "@modern-js/server-runtime": "workspace:*",
+      "@modern-js/runtime-utils": "workspace:*",
       "@modern-js/types": "workspace:*",
       "@modern-js/utils": "workspace:*",
       "@swc/helpers": "^0.5.17",

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

@@ -4,8 +4,9 @@ import {
   isBrowser,
   useRuntimeContext,
 } from '@modern-js/runtime';
+import { merge } from '@modern-js/runtime-utils/merge';
 import type React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type {
   BaseBackendOptions,
   BaseLocaleDetectionOptions,
@@ -43,13 +44,17 @@ export interface I18nPluginOptions {
   [key: string]: any;
 }
 
-const getPathname = (context: TRuntimeContext) => {
+const getPathname = (context: TRuntimeContext): string => {
   if (isBrowser()) {
     return window.location.pathname;
   }
   return context.ssrContext?.request?.pathname || '/';
 };
 
+interface RuntimeContextWithI18n extends TRuntimeContext {
+  i18nInstance?: I18nInstance;
+}
+
 export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
   name: '@modern-js/plugin-i18n',
   setup: api => {
@@ -73,6 +78,9 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
 
     api.onBeforeRender(async context => {
       let i18nInstance = await getI18nInstance(userI18nInstance);
+      const { i18n: otherConfig } = api.getRuntimeConfig();
+      const { initOptions: otherInitOptions } = otherConfig || {};
+      const initOptions = merge(otherInitOptions || {}, userInitOptions || {});
       const initReactI18next = await getInitReactI18next();
       I18nextProvider = await getI18nextProvider();
       if (initReactI18next) {
@@ -90,9 +98,9 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
         i18nextDetector,
         detection,
         localePathRedirect,
-        userInitOptions,
+        initOptions,
       );
-      const mergedBackend = mergeBackendOptions(backend, userInitOptions);
+      const mergedBackend = mergeBackendOptions(backend, initOptions);
 
       // Register Backend before init() if needed
       if (backendEnabled) {
@@ -106,7 +114,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
         localePathRedirect,
         i18nextDetector,
         detection,
-        userInitOptions,
+        userInitOptions: initOptions,
         pathname,
         ssrContext: context.ssrContext,
       });
@@ -119,7 +127,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
         languages,
         mergedDetection,
         mergedBackend,
-        userInitOptions,
+        initOptions,
       );
 
       if (!isBrowser() && i18nInstance.cloneInstance) {
@@ -134,7 +142,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
           i18nextDetector,
           detection,
           localePathRedirect,
-          userInitOptions,
+          initOptions,
         );
       }
 
@@ -150,21 +158,37 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
 
     api.wrapRoot(App => {
       return props => {
-        const runtimeContext = useRuntimeContext();
-        const i18nInstance = (runtimeContext as any).i18nInstance;
-        const initialLang =
-          i18nInstance?.language || (localeDetection?.fallbackLanguage ?? 'en');
+        const runtimeContext = useRuntimeContext() as RuntimeContextWithI18n;
+        const i18nInstance = runtimeContext.i18nInstance;
+        const initialLang = useMemo(
+          () =>
+            i18nInstance?.language ||
+            (localeDetection?.fallbackLanguage ?? 'en'),
+          [i18nInstance?.language, localeDetection?.fallbackLanguage],
+        );
         const [lang, setLang] = useState(initialLang);
 
-        if (i18nInstance?.language && i18nInstance.translator) {
-          i18nInstance.translator.language = i18nInstance.language;
-        }
+        // Sync translator language with i18n instance language
+        useEffect(() => {
+          if (i18nInstance?.language) {
+            const translator = (i18nInstance as any).translator;
+            if (translator) {
+              translator.language = i18nInstance.language;
+            }
+          }
+        }, [i18nInstance?.language]);
+
+        // Handle language detection and updates
+        const runtimeContextRef = useRef(runtimeContext);
+        runtimeContextRef.current = runtimeContext;
 
         useEffect(() => {
+          if (!i18nInstance) {
+            return;
+          }
+
           if (localePathRedirect) {
-            const currentPathname = getPathname(
-              runtimeContext as TRuntimeContext,
-            );
+            const currentPathname = getPathname(runtimeContextRef.current);
             const pathDetection = detectLanguageFromPath(
               currentPathname,
               languages,
@@ -174,8 +198,8 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
               const currentLang = pathDetection.language;
               if (currentLang !== lang) {
                 setLang(currentLang);
-                i18nInstance?.setLang?.(currentLang);
-                i18nInstance?.changeLanguage?.(currentLang);
+                i18nInstance.setLang?.(currentLang);
+                i18nInstance.changeLanguage?.(currentLang);
                 if (isBrowser()) {
                   const detectionOptions = i18nInstance.options?.detection;
                   cacheUserLanguage(
@@ -192,24 +216,49 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
               setLang(instanceLang);
             }
           }
-        }, []);
+        }, [i18nInstance, localePathRedirect, languages, lang]);
 
-        const contextValue = {
-          language: lang,
+        const contextValue = useMemo(() => {
+          if (!i18nInstance) {
+            // Return a minimal context value when i18nInstance is not available
+            return {
+              language: lang,
+              i18nInstance: {} as I18nInstance,
+              entryName,
+              languages,
+              localePathRedirect,
+              ignoreRedirectRoutes,
+              updateLanguage: setLang,
+            };
+          }
+          return {
+            language: lang,
+            i18nInstance,
+            entryName,
+            languages,
+            localePathRedirect,
+            ignoreRedirectRoutes,
+            updateLanguage: setLang,
+          };
+        }, [
+          lang,
           i18nInstance,
           entryName,
           languages,
           localePathRedirect,
           ignoreRedirectRoutes,
-          updateLanguage: setLang,
-        };
+        ]);
 
         const appContent = (
           <ModernI18nProvider value={contextValue}>
             <App {...props} />
           </ModernI18nProvider>
         );
 
+        if (!i18nInstance) {
+          return appContent;
+        }
+
         return I18nextProvider ? (
           <I18nextProvider i18n={i18nInstance}>{appContent}</I18nextProvider>
         ) : (