@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.2 → 3.2.0-ultramodern.23

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

@@ -1,5 +1,9 @@
 import type { BaseBackendOptions } from '../../shared/type';
 
+type ReactI18nextModule = typeof import('react-i18next');
+type InitReactI18next = ReactI18nextModule['initReactI18next'];
+type I18nextProviderComponent = ReactI18nextModule['I18nextProvider'];
+
 export interface I18nResourceStore {
   data?: {
     [language: string]: {
@@ -167,10 +171,15 @@ async function createI18nextInstance(): Promise<I18nInstance | null> {
   }
 }
 
-async function tryImportReactI18next() {
+function getOptionalReactI18nextPackageName(): string {
+  return ['react', 'i18next'].join('-');
+}
+
+async function tryImportReactI18next(): Promise<ReactI18nextModule | null> {
   try {
-    const reactI18next = await import('react-i18next');
-    return reactI18next;
+    return (await import(
+      getOptionalReactI18nextPackageName()
+    )) as ReactI18nextModule;
   } catch (error) {
     return null;
   }
@@ -210,7 +219,7 @@ export async function getI18nInstance(
   throw new Error('No i18n instance found');
 }
 
-export async function getInitReactI18next() {
+export async function getInitReactI18next(): Promise<InitReactI18next | null> {
   const reactI18nextModule = await tryImportReactI18next();
   if (reactI18nextModule) {
     return reactI18nextModule.initReactI18next;
@@ -218,7 +227,7 @@ export async function getInitReactI18next() {
   return null;
 }
 
-export async function getI18nextProvider() {
+export async function getI18nextProvider(): Promise<I18nextProviderComponent | null> {
   const reactI18nextModule = await tryImportReactI18next();
   if (reactI18nextModule) {
     return reactI18nextModule.I18nextProvider;

package/src/runtime/index.tsx

@@ -54,6 +54,7 @@ export interface I18nPluginOptions {
   changeLanguage?: (lang: string) => void;
   initOptions?: I18nInitOptions;
   htmlLangAttr?: boolean;
+  reactI18next?: boolean;
   [key: string]: any;
 }
 
@@ -72,6 +73,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       localeDetection,
       backend,
       htmlLangAttr = false,
+      reactI18next = true,
     } = options;
     const {
       localePathRedirect = false,
@@ -80,6 +82,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       fallbackLanguage = 'en',
       detection,
       ignoreRedirectRoutes,
+      localisedUrls,
     } = localeDetection || {};
     const { enabled: backendEnabled = false } = backend || {};
     let latestI18nInstance: I18nInstance | undefined;
@@ -90,8 +93,10 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
       const { i18n: otherConfig } = api.getRuntimeConfig();
       const { initOptions: otherInitOptions } = otherConfig || {};
       const userInitOptions = merge(otherInitOptions || {}, initOptions || {});
-      const initReactI18next = await getInitReactI18next();
-      I18nextProvider = await getI18nextProvider();
+      const initReactI18next = reactI18next
+        ? await getInitReactI18next()
+        : null;
+      I18nextProvider = reactI18next ? await getI18nextProvider() : null;
       if (initReactI18next) {
         i18nInstance.use(initReactI18next);
       }
@@ -227,6 +232,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
           languages,
           fallbackLanguage,
           ignoreRedirectRoutes,
+          localisedUrls,
         );
 
         const contextValue = useMemo(
@@ -238,6 +244,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
               languages,
               localePathRedirect,
               ignoreRedirectRoutes,
+              localisedUrls,
               setLang,
             ),
           [
@@ -247,6 +254,7 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
             languages,
             localePathRedirect,
             ignoreRedirectRoutes,
+            localisedUrls,
             forceUpdate,
           ],
         );

package/src/runtime/routerAdapter.tsx

@@ -0,0 +1,333 @@
+import { isBrowser, RuntimeContext } from '@modern-js/runtime';
+import {
+  InternalRuntimeContext,
+  type TInternalRuntimeContext,
+  type TRuntimeContext,
+} from '@modern-js/runtime/context';
+import {
+  Link as ReactRouterLink,
+  useInRouterContext,
+  useLocation as useReactRouterLocation,
+  useNavigate as useReactRouterNavigate,
+  useParams as useReactRouterParams,
+} from '@modern-js/runtime/router';
+import type React from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+export type I18nRouterFramework = 'react-router' | 'tanstack' | string;
+
+export interface I18nRouterLocation {
+  pathname: string;
+  search: string;
+  hash: string;
+}
+
+export interface I18nRouterNavigateOptions {
+  replace?: boolean;
+  state?: unknown;
+}
+
+export type I18nRouterNavigate = (
+  href: string,
+  options?: I18nRouterNavigateOptions,
+) => void | Promise<void>;
+
+export type I18nRouterLink = React.ComponentType<{
+  to: string;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}>;
+
+export interface I18nRouterAdapter {
+  framework?: I18nRouterFramework;
+  hasRouter: boolean;
+  location: I18nRouterLocation | null;
+  navigate: I18nRouterNavigate | null;
+  Link: I18nRouterLink | null;
+  params: Record<string, string>;
+}
+
+type RuntimeContextWithRouter = TRuntimeContext & {
+  router?: {
+    useRouter?: (options?: { warn?: boolean }) => unknown;
+    useLocation?: () => unknown;
+    useHref?: () => unknown;
+    Link?: I18nRouterLink;
+  };
+};
+
+type InternalRuntimeContextWithRouter = TInternalRuntimeContext & {
+  router?: RuntimeContextWithRouter['router'];
+};
+
+type RouterInstance = {
+  navigate?: (...args: any[]) => unknown;
+  state?: {
+    location?: unknown;
+    matches?: Array<{ params?: Record<string, string> }>;
+  };
+  stores?: {
+    location?: {
+      get?: () => unknown;
+      subscribe?: (listener: () => void) => () => void;
+    };
+    matches?: {
+      get?: () => Array<{ params?: Record<string, string> }>;
+    };
+  };
+  subscribe?: (eventType: string, listener: () => void) => () => void;
+};
+
+const normalizeUrlPart = (value: unknown, prefix: '?' | '#'): string => {
+  if (typeof value !== 'string' || !value) {
+    return '';
+  }
+  return value.startsWith(prefix) ? value : `${prefix}${value}`;
+};
+
+const normalizeLocation = (location: unknown): I18nRouterLocation | null => {
+  if (!location || typeof location !== 'object') {
+    return null;
+  }
+
+  const locationValue = location as {
+    pathname?: unknown;
+    search?: unknown;
+    searchStr?: unknown;
+    hash?: unknown;
+  };
+
+  if (typeof locationValue.pathname !== 'string') {
+    return null;
+  }
+
+  return {
+    pathname: locationValue.pathname,
+    search: normalizeUrlPart(
+      typeof locationValue.search === 'string'
+        ? locationValue.search
+        : locationValue.searchStr,
+      '?',
+    ),
+    hash: normalizeUrlPart(locationValue.hash, '#'),
+  };
+};
+
+const getWindowLocation = (): I18nRouterLocation | null => {
+  if (!isBrowser()) {
+    return null;
+  }
+
+  return {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+  };
+};
+
+const getRouterFramework = (
+  runtimeContext: RuntimeContextWithRouter,
+  internalContext: InternalRuntimeContextWithRouter,
+  inReactRouter: boolean,
+): I18nRouterFramework | undefined => {
+  const framework =
+    internalContext.routerFramework ||
+    internalContext.routerRuntime?.framework ||
+    runtimeContext.routerFramework;
+
+  if (framework) {
+    return framework;
+  }
+
+  if (internalContext.router?.useRouter || runtimeContext.router?.useRouter) {
+    return 'tanstack';
+  }
+
+  if (
+    internalContext.router?.useLocation ||
+    internalContext.router?.useHref ||
+    runtimeContext.router?.useLocation ||
+    runtimeContext.router?.useHref
+  ) {
+    return 'react-router';
+  }
+
+  if (inReactRouter) {
+    return 'react-router';
+  }
+
+  return undefined;
+};
+
+const getRouterInstance = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): RouterInstance | null => {
+  if (contextRouter) {
+    return contextRouter;
+  }
+
+  const router =
+    internalContext.routerInstance || internalContext.routerRuntime?.instance;
+  if (!router || typeof router !== 'object') {
+    return null;
+  }
+  return router as RouterInstance;
+};
+
+const getRouterStateLocation = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): I18nRouterLocation | null => {
+  const router = getRouterInstance(internalContext, contextRouter);
+  return (
+    normalizeLocation(router?.stores?.location?.get?.()) ||
+    normalizeLocation(router?.state?.location)
+  );
+};
+
+const getRouterParams = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): Record<string, string> => {
+  const router = getRouterInstance(internalContext, contextRouter);
+  const matches = router?.stores?.matches?.get?.() || router?.state?.matches;
+  if (!Array.isArray(matches)) {
+    return {};
+  }
+
+  return matches.reduce<Record<string, string>>((params, match) => {
+    if (match?.params) {
+      Object.assign(params, match.params);
+    }
+    return params;
+  }, {});
+};
+
+export const useI18nRouterAdapter = (): I18nRouterAdapter => {
+  const runtimeContext = useContext(RuntimeContext) as RuntimeContextWithRouter;
+  const internalContext = useContext(
+    InternalRuntimeContext,
+  ) as InternalRuntimeContextWithRouter;
+  const inReactRouter = useInRouterContext();
+  const reactRouterNavigate = inReactRouter ? useReactRouterNavigate() : null;
+  const reactRouterLocation = inReactRouter ? useReactRouterLocation() : null;
+  const reactRouterParams = inReactRouter ? useReactRouterParams() : {};
+  const framework = getRouterFramework(
+    runtimeContext,
+    internalContext,
+    inReactRouter,
+  );
+  const contextUseRouter =
+    !inReactRouter && framework === 'tanstack'
+      ? internalContext.router?.useRouter || runtimeContext.router?.useRouter
+      : undefined;
+  const contextRouter = contextUseRouter
+    ? (contextUseRouter({ warn: false }) as RouterInstance | null)
+    : null;
+  const [, setRouterVersion] = useState(0);
+  const hasRouter =
+    framework === 'tanstack' ||
+    framework === 'react-router' ||
+    Boolean(reactRouterNavigate);
+
+  useEffect(() => {
+    if (framework !== 'tanstack') {
+      return;
+    }
+
+    const router = getRouterInstance(internalContext, contextRouter);
+    if (!router) {
+      return;
+    }
+
+    const update = () => setRouterVersion(version => version + 1);
+    const unsubscribers: Array<() => void> = [];
+
+    if (typeof router.stores?.location?.subscribe === 'function') {
+      const unsubscribe = router.stores.location.subscribe(update);
+      if (typeof unsubscribe === 'function') {
+        unsubscribers.push(unsubscribe);
+      }
+    }
+
+    if (typeof router.subscribe === 'function') {
+      for (const eventType of ['onBeforeNavigate', 'onBeforeLoad']) {
+        const unsubscribe = router.subscribe(eventType, update);
+        if (typeof unsubscribe === 'function') {
+          unsubscribers.push(unsubscribe);
+        }
+      }
+    }
+
+    return () => {
+      for (const unsubscribe of unsubscribers) {
+        unsubscribe();
+      }
+    };
+  }, [contextRouter, framework, internalContext]);
+
+  const navigate = useCallback<I18nRouterNavigate>(
+    (href, options) => {
+      const router = getRouterInstance(internalContext, contextRouter);
+      const activeFramework = getRouterFramework(
+        runtimeContext,
+        internalContext,
+        inReactRouter,
+      );
+
+      if (activeFramework === 'tanstack') {
+        if (typeof router?.navigate === 'function') {
+          return router.navigate({
+            to: href,
+            replace: options?.replace,
+            ...(options?.state === undefined ? {} : { state: options.state }),
+          }) as void | Promise<void>;
+        }
+        throw new Error('TanStack router instance is not available.');
+      }
+
+      if (reactRouterNavigate) {
+        return reactRouterNavigate(href, options);
+      }
+
+      if (activeFramework === 'react-router') {
+        if (typeof router?.navigate === 'function') {
+          return router.navigate(href, options) as void | Promise<void>;
+        }
+        throw new Error('React Router instance is not available.');
+      }
+    },
+    [
+      contextRouter,
+      internalContext,
+      inReactRouter,
+      reactRouterNavigate,
+      runtimeContext,
+    ],
+  );
+
+  const location =
+    (reactRouterLocation
+      ? normalizeLocation(reactRouterLocation)
+      : getRouterStateLocation(internalContext, contextRouter)) ||
+    getWindowLocation();
+  const params = inReactRouter
+    ? (reactRouterParams as Record<string, string>)
+    : getRouterParams(internalContext, contextRouter);
+  const Link =
+    framework === 'tanstack'
+      ? internalContext.router?.Link || runtimeContext.router?.Link || null
+      : framework === 'react-router' || inReactRouter
+        ? (ReactRouterLink as I18nRouterLink)
+        : null;
+
+  return {
+    framework,
+    hasRouter,
+    location,
+    navigate: hasRouter ? navigate : null,
+    Link,
+    params,
+  };
+};