@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.5 → 3.2.0-ultramodern.50

package/src/cli/index.ts

@@ -1,8 +1,16 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 import { getPublicDirRoutePrefixes } from '@modern-js/server-core';
-import type { Entrypoint } from '@modern-js/types';
+import type {
+  Entrypoint,
+  NestedRouteForCli,
+  PageRoute,
+} from '@modern-js/types';
 import fs from 'fs';
 import path from 'path';
+import {
+  applyLocalisedUrlsToRoutes,
+  resolveLocalisedUrlsConfig,
+} from '../shared/localisedUrls';
 import type { BackendOptions, LocaleDetectionOptions } from '../shared/type';
 import { getBackendOptions, getLocaleDetectionOptions } from '../shared/utils';
 
@@ -203,6 +211,40 @@ export const i18nPlugin = (
       };
     });
 
+    api.modifyFileSystemRoutes(({ entrypoint, routes }) => {
+      if (!localeDetection) {
+        return { entrypoint, routes };
+      }
+
+      const localeDetectionOptions = getLocaleDetectionOptions(
+        entrypoint.entryName,
+        localeDetection,
+      );
+      const {
+        localePathRedirect,
+        languages = [],
+        localisedUrls,
+      } = localeDetectionOptions;
+
+      if (!localePathRedirect || languages.length === 0) {
+        return { entrypoint, routes };
+      }
+
+      const localisedUrlsConfig = resolveLocalisedUrlsConfig(localisedUrls);
+      if (!localisedUrlsConfig.enabled) {
+        return { entrypoint, routes };
+      }
+
+      return {
+        entrypoint,
+        routes: applyLocalisedUrlsToRoutes(
+          routes as (NestedRouteForCli | PageRoute)[],
+          languages,
+          localisedUrlsConfig.map,
+        ),
+      };
+    });
+
     api._internalServerPlugins(({ plugins }) => {
       const { serverRoutes, metaName } = api.getAppContext();
       const normalizedConfig = api.getNormalizedConfig();

package/src/runtime/I18nLink.tsx

@@ -1,12 +1,12 @@
-import { Link, useInRouterContext, useParams } from '@modern-js/runtime/router';
 import type React from 'react';
 import { useModernI18n } from './context';
+import { useI18nRouterAdapter } from './routerAdapter';
 import { buildLocalizedUrl } from './utils';
 
 export interface I18nLinkProps {
   to: string;
   children: React.ReactNode;
-  [key: string]: any; // Allow other props to be passed through
+  [key: string]: any;
 }
 
 /**
@@ -24,30 +24,25 @@ export interface I18nLinkProps {
  * <I18nLink to="/">Home</I18nLink>
  * ```
  */
-// Use static imports to avoid breaking router tree-shaking. Detect router context via useInRouterContext.
-const useRouterHooks = () => {
-  const inRouter = useInRouterContext();
-  return {
-    Link: inRouter ? Link : null,
-    params: inRouter ? useParams() : ({} as any),
-    hasRouter: inRouter,
-  };
-};
-
 export const I18nLink: React.FC<I18nLinkProps> = ({
   to,
   children,
   ...props
 }) => {
-  const { Link, params, hasRouter } = useRouterHooks();
-  const { language, supportedLanguages } = useModernI18n();
+  const { Link, params, hasRouter } = useI18nRouterAdapter();
+  const { language, supportedLanguages, localisedUrls } = useModernI18n();
 
   // Get the current language from context (which reflects the actual current language)
   // URL params might be stale after language changes, so we prioritize the context language
   const currentLang = language;
 
   // Build the localized URL by adding language prefix
-  const localizedTo = buildLocalizedUrl(to, currentLang, supportedLanguages);
+  const localizedTo = buildLocalizedUrl(
+    to,
+    currentLang,
+    supportedLanguages,
+    localisedUrls,
+  );
 
   // In development mode, warn if used outside of :lang route context
   if (process.env.NODE_ENV === 'development' && hasRouter && !params.lang) {
@@ -57,7 +52,6 @@ export const I18nLink: React.FC<I18nLinkProps> = ({
     );
   }
 
-  // If router is not available, render as a regular anchor tag
   if (!hasRouter || !Link) {
     return (
       <a href={localizedTo} {...props}>

package/src/runtime/context.tsx

@@ -1,15 +1,22 @@
 import { isBrowser } from '@modern-js/runtime';
 import type { FC, ReactNode } from 'react';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
+import type { LocalisedUrlsOption } from '../shared/localisedUrls';
 import type { I18nInstance } from './i18n';
 import type { SdkBackend } from './i18n/backend/sdk-backend';
 import { cacheUserLanguage } from './i18n/detection';
+import { useI18nRouterAdapter } from './routerAdapter';
 import {
   buildLocalizedUrl,
   detectLanguageFromPath,
   getEntryPath,
   shouldIgnoreRedirect,
-  useRouterHooks,
 } from './utils';
 
 export interface ModernI18nContextValue {
@@ -20,6 +27,7 @@ export interface ModernI18nContextValue {
   languages?: string[];
   localePathRedirect?: boolean;
   ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean);
+  localisedUrls?: LocalisedUrlsOption;
   // Callback to update language in context
   updateLanguage?: (newLang: string) => void;
 }
@@ -47,6 +55,7 @@ export interface UseModernI18nReturn {
   changeLanguage: (newLang: string) => Promise<void>;
   i18nInstance: I18nInstance;
   supportedLanguages: string[];
+  localisedUrls?: LocalisedUrlsOption;
   isLanguageSupported: (lang: string) => boolean;
   // Indicates if translation resources for current language are ready to use
   isResourcesReady: boolean;
@@ -77,15 +86,40 @@ export const useModernI18n = (): UseModernI18nReturn => {
     languages,
     localePathRedirect,
     ignoreRedirectRoutes,
+    localisedUrls,
     updateLanguage,
   } = context;
 
-  // Get router hooks safely
-  const { navigate, location, hasRouter } = useRouterHooks();
+  const { navigate, location, hasRouter } = useI18nRouterAdapter();
+
+  const pathLanguage = useMemo(() => {
+    if (!localePathRedirect || !location?.pathname) {
+      return undefined;
+    }
+    const detected = detectLanguageFromPath(
+      location.pathname,
+      languages || [],
+      localePathRedirect,
+    );
+    return detected.detected ? detected.language : undefined;
+  }, [languages, localePathRedirect, location?.pathname]);
+
+  const currentLanguage = pathLanguage || contextLanguage;
 
-  // Get current language from context (which reflects the actual current language)
-  // URL params might be stale after language changes, so we prioritize the context language
-  const currentLanguage = contextLanguage;
+  useEffect(() => {
+    if (!pathLanguage || pathLanguage === contextLanguage) {
+      return;
+    }
+
+    updateLanguage?.(pathLanguage);
+    i18nInstance?.setLang?.(pathLanguage);
+    void i18nInstance?.changeLanguage?.(pathLanguage);
+
+    if (isBrowser()) {
+      const detectionOptions = i18nInstance.options?.detection;
+      cacheUserLanguage(i18nInstance, pathLanguage, detectionOptions);
+    }
+  }, [contextLanguage, i18nInstance, pathLanguage, updateLanguage]);
 
   /**
    * Changes the current language and updates the URL accordingly.
@@ -147,6 +181,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
               relativePath,
               newLang,
               languages || [],
+              localisedUrls,
             );
             const newUrl =
               entryPath + newPath + location.search + location.hash;
@@ -181,6 +216,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
               relativePath,
               newLang,
               languages || [],
+              localisedUrls,
             );
             const newUrl =
               entryPath +
@@ -206,6 +242,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
       updateLanguage,
       localePathRedirect,
       ignoreRedirectRoutes,
+      localisedUrls,
       languages,
       hasRouter,
       navigate,
@@ -275,6 +312,7 @@ export const useModernI18n = (): UseModernI18nReturn => {
     changeLanguage,
     i18nInstance,
     supportedLanguages: languages || [],
+    localisedUrls,
     isLanguageSupported,
     isResourcesReady,
   };

package/src/runtime/hooks.ts

@@ -2,6 +2,7 @@ import type { TRuntimeContext } from '@modern-js/runtime';
 import { isBrowser } from '@modern-js/runtime';
 import type React from 'react';
 import { useEffect, useRef } from 'react';
+import type { LocalisedUrlsOption } from '../shared/localisedUrls';
 import type { I18nInstance } from './i18n';
 import {
   getI18nSdkBackendId,
@@ -9,13 +10,13 @@ import {
   type I18nSdkResourcesLoadedEventDetail,
 } from './i18n/backend/sdk-event';
 import { cacheUserLanguage } from './i18n/detection';
+import { useI18nRouterAdapter } from './routerAdapter';
 import {
   buildLocalizedUrl,
   detectLanguageFromPath,
   getEntryPath,
   getPathname,
   shouldIgnoreRedirect,
-  useRouterHooks,
 } from './utils';
 
 interface RuntimeContextWithI18n extends TRuntimeContext {
@@ -41,6 +42,7 @@ export function createContextValue(
   languages: string[],
   localePathRedirect: boolean,
   ignoreRedirectRoutes: string[] | ((pathname: string) => boolean) | undefined,
+  localisedUrls: LocalisedUrlsOption | undefined,
   setLang: (lang: string) => void,
 ) {
   const instance = i18nInstance || createMinimalI18nInstance(lang);
@@ -51,6 +53,7 @@ export function createContextValue(
     languages,
     localePathRedirect,
     ignoreRedirectRoutes,
+    localisedUrls,
     updateLanguage: setLang,
   };
 }
@@ -162,10 +165,10 @@ export function useClientSideRedirect(
   languages: string[],
   fallbackLanguage: string,
   ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean),
+  localisedUrls?: LocalisedUrlsOption,
 ) {
   const hasRedirectedRef = useRef(false);
-  // Get router hooks safely
-  const { navigate, location, hasRouter } = useRouterHooks();
+  const { navigate, location, hasRouter } = useI18nRouterAdapter();
 
   useEffect(() => {
     if (process.env.MODERN_TARGET !== 'browser') {
@@ -220,7 +223,12 @@ export function useClientSideRedirect(
     const targetLanguage =
       i18nInstance.language || fallbackLanguage || languages[0] || 'en';
 
-    const newPath = buildLocalizedUrl(relativePath, targetLanguage, languages);
+    const newPath = buildLocalizedUrl(
+      relativePath,
+      targetLanguage,
+      languages,
+      localisedUrls,
+    );
     const newUrl = entryPath + newPath + currentSearch + currentHash;
 
     if (newUrl !== currentPathname + currentSearch + currentHash) {
@@ -244,6 +252,7 @@ export function useClientSideRedirect(
     languages,
     fallbackLanguage,
     ignoreRedirectRoutes,
+    localisedUrls,
   ]);
 }
 

package/src/runtime/i18n/backend/defaults.ts

@@ -15,7 +15,9 @@ function convertPath(path: string | undefined): string | undefined {
   }
   // If it's an absolute path (starts with /), convert to relative path
   if (path.startsWith('/')) {
-    return `${window.__assetPrefix__ || ''}${path}`;
+    return typeof window === 'undefined'
+      ? path
+      : `${window.__assetPrefix__ || ''}${path}`;
   }
   return path;
 }

package/src/runtime/i18n/backend/middleware.node.ts

@@ -1,4 +1,4 @@
-import Backend from 'i18next-fs-backend';
+import Backend from 'i18next-fs-backend/cjs';
 import type { ExtendedBackendOptions } from '../../../shared/type';
 import type { I18nInstance } from '../instance';
 import { useI18nextBackendCommon } from './middleware.common';

package/src/runtime/i18n/instance.ts

@@ -167,15 +167,6 @@ async function createI18nextInstance(): Promise<I18nInstance | null> {
   }
 }
 
-async function tryImportReactI18next() {
-  try {
-    const reactI18next = await import('react-i18next');
-    return reactI18next;
-  } catch (error) {
-    return null;
-  }
-}
-
 export function getI18nextInstanceForProvider(
   instance: I18nInstance | any,
 ): any {
@@ -209,19 +200,3 @@ export async function getI18nInstance(
 
   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;
-}

package/src/runtime/i18n/react-i18next.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+
+type ReactI18nextModule = typeof import('react-i18next');
+
+interface ReactI18nextIntegration {
+  I18nextProvider: React.ComponentType<any> | null;
+  initReactI18next: any | null;
+}
+
+function getOptionalReactI18nextPackageName(): string {
+  return ['react', 'i18next'].join('-');
+}
+
+async function tryImportReactI18next(): Promise<ReactI18nextModule | null> {
+  try {
+    return (await import(
+      getOptionalReactI18nextPackageName()
+    )) as ReactI18nextModule;
+  } catch (error) {
+    return null;
+  }
+}
+
+export async function getReactI18nextIntegration(): Promise<ReactI18nextIntegration> {
+  const reactI18nextModule = await tryImportReactI18next();
+
+  return {
+    I18nextProvider: reactI18nextModule?.I18nextProvider ?? null,
+    initReactI18next: reactI18nextModule?.initReactI18next ?? null,
+  };
+}

package/src/runtime/index.tsx

@@ -29,11 +29,7 @@ import {
   mergeDetectionOptions,
 } from './i18n/detection';
 import { useI18nextLanguageDetector } from './i18n/detection/middleware';
-import {
-  getI18nextInstanceForProvider,
-  getI18nextProvider,
-  getInitReactI18next,
-} from './i18n/instance';
+import { getI18nextInstanceForProvider } from './i18n/instance';
 import {
   changeI18nLanguage,
   ensureLanguageMatch,
@@ -54,6 +50,7 @@ export interface I18nPluginOptions {
   changeLanguage?: (lang: string) => void;
   initOptions?: I18nInitOptions;
   htmlLangAttr?: boolean;
+  reactI18next?: boolean;
   [key: string]: any;
 }
 
@@ -72,6 +69,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       localeDetection,
       backend,
       htmlLangAttr = false,
+      reactI18next = true,
     } = options;
     const {
       localePathRedirect = false,
@@ -80,20 +78,31 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       fallbackLanguage = 'en',
       detection,
       ignoreRedirectRoutes,
+      localisedUrls,
     } = localeDetection || {};
     const { enabled: backendEnabled = false } = backend || {};
     let latestI18nInstance: I18nInstance | undefined;
     let I18nextProvider: React.FunctionComponent<any> | null;
 
+    const loadReactI18nextIntegration = async () => {
+      if (!reactI18next) {
+        return null;
+      }
+      const { getReactI18nextIntegration } = await import(
+        './i18n/react-i18next'
+      );
+      return getReactI18nextIntegration();
+    };
+
     api.onBeforeRender(async context => {
       let i18nInstance = await getI18nInstance(userI18nInstance);
       const { i18n: otherConfig } = api.getRuntimeConfig();
       const { initOptions: otherInitOptions } = otherConfig || {};
       const userInitOptions = merge(otherInitOptions || {}, initOptions || {});
-      const initReactI18next = await getInitReactI18next();
-      I18nextProvider = await getI18nextProvider();
-      if (initReactI18next) {
-        i18nInstance.use(initReactI18next);
+      const reactI18nextIntegration = await loadReactI18nextIntegration();
+      I18nextProvider = reactI18nextIntegration?.I18nextProvider ?? null;
+      if (reactI18nextIntegration?.initReactI18next) {
+        i18nInstance.use(reactI18nextIntegration.initReactI18next);
       }
 
       const pathname = getPathname(context);
@@ -227,6 +236,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
           languages,
           fallbackLanguage,
           ignoreRedirectRoutes,
+          localisedUrls,
         );
 
         const contextValue = useMemo(
@@ -238,6 +248,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
               languages,
               localePathRedirect,
               ignoreRedirectRoutes,
+              localisedUrls,
               setLang,
             ),
           [
@@ -247,6 +258,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
             languages,
             localePathRedirect,
             ignoreRedirectRoutes,
+            localisedUrls,
             forceUpdate,
           ],
         );