@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.9 → 3.2.0-ultramodern.91

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,15 +258,17 @@ export const i18nPlugin = (options: I18nPluginOptions): RuntimePlugin => ({
             languages,
             localePathRedirect,
             ignoreRedirectRoutes,
+            localisedUrls,
             forceUpdate,
           ],
         );
 
+        const children = (props as React.PropsWithChildren).children;
         const appContent = (
           <>
             {Boolean(htmlLangAttr) && <Helmet htmlAttributes={{ lang }} />}
             <ModernI18nProvider value={contextValue}>
-              <App {...props} />
+              {App ? <App {...props}>{children}</App> : children}
             </ModernI18nProvider>
           </>
         );

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,
+  };
+};

package/src/runtime/utils.ts

@@ -3,6 +3,11 @@ import {
   getGlobalBasename,
   type TInternalRuntimeContext,
 } from '@modern-js/runtime/context';
+import type { LocalisedUrlsMap } from '../shared/localisedUrls';
+import {
+  resolveLocalisedPath,
+  resolveLocalisedUrlsConfig,
+} from '../shared/localisedUrls';
 
 export const getPathname = (context: TInternalRuntimeContext): string => {
   if (isBrowser()) {
@@ -51,18 +56,25 @@ export const buildLocalizedUrl = (
   pathname: string,
   language: string,
   languages: string[],
+  localisedUrls?: boolean | LocalisedUrlsMap,
 ): string => {
   const segments = pathname.split('/').filter(Boolean);
-
-  if (segments.length > 0 && languages.includes(segments[0])) {
-    // Replace existing language prefix
-    segments[0] = language;
-  } else {
-    // Add language prefix
-    segments.unshift(language);
-  }
-
-  return `/${segments.join('/')}`;
+  const localisedUrlsConfig = resolveLocalisedUrlsConfig(localisedUrls);
+  const pathWithoutLanguage =
+    segments.length > 0 && languages.includes(segments[0])
+      ? `/${segments.slice(1).join('/')}`
+      : pathname;
+  const resolvedPath = localisedUrlsConfig.enabled
+    ? resolveLocalisedPath(
+        pathWithoutLanguage,
+        language,
+        languages,
+        localisedUrlsConfig.map,
+      )
+    : pathWithoutLanguage;
+  const resolvedSegments = resolvedPath.split('/').filter(Boolean);
+
+  return `/${[language, ...resolvedSegments].join('/')}`;
 };
 
 export const detectLanguageFromPath = (
@@ -137,27 +149,3 @@ export const shouldIgnoreRedirect = (
     );
   });
 };
-
-// Safe hook wrapper to handle cases where router context is not available
-export const useRouterHooks = () => {
-  try {
-    const {
-      useLocation,
-      useNavigate,
-      useParams,
-    } = require('@modern-js/runtime/router');
-    return {
-      navigate: useNavigate(),
-      location: useLocation(),
-      params: useParams(),
-      hasRouter: true,
-    };
-  } catch (error) {
-    return {
-      navigate: null,
-      location: null,
-      params: {},
-      hasRouter: false,
-    };
-  }
-};

package/src/server/index.ts

@@ -8,6 +8,10 @@ import {
   mergeDetectionOptions,
 } from '../runtime/i18n/detection/config.js';
 import type { LanguageDetectorOptions } from '../runtime/i18n/instance';
+import {
+  resolveLocalisedPath,
+  resolveLocalisedUrlsConfig,
+} from '../shared/localisedUrls.js';
 import type { LocaleDetectionOptions } from '../shared/type';
 import { getLocaleDetectionOptions } from '../shared/utils.js';
 
@@ -16,6 +20,74 @@ export interface I18nPluginOptions {
   staticRoutePrefixes: string[];
 }
 
+type ApiPrefixInput = string | string[] | undefined;
+
+const normalizeApiPrefix = (prefix: string): string | null => {
+  const trimmedPrefix = prefix.trim();
+  if (!trimmedPrefix) {
+    return null;
+  }
+
+  const prefixedPath = trimmedPrefix.startsWith('/')
+    ? trimmedPrefix
+    : `/${trimmedPrefix}`;
+  const withoutWildcard = prefixedPath.replace(/\/\*$/, '');
+  const normalizedPrefix =
+    withoutWildcard.length > 1
+      ? withoutWildcard.replace(/\/+$/, '')
+      : withoutWildcard;
+
+  return normalizedPrefix === '/' ? null : normalizedPrefix;
+};
+
+export const collectApiPrefixes = (
+  routes: Array<{ isApi?: boolean; urlPath?: string }>,
+  bffPrefix?: ApiPrefixInput,
+): string[] => {
+  const prefixes = new Set<string>();
+
+  for (const route of routes) {
+    if (!route.isApi || !route.urlPath) {
+      continue;
+    }
+
+    const normalizedPrefix = normalizeApiPrefix(route.urlPath);
+    if (normalizedPrefix) {
+      prefixes.add(normalizedPrefix);
+    }
+  }
+
+  const bffPrefixes = Array.isArray(bffPrefix)
+    ? bffPrefix
+    : bffPrefix
+      ? [bffPrefix]
+      : [];
+
+  for (const prefix of bffPrefixes) {
+    const normalizedPrefix = normalizeApiPrefix(prefix);
+    if (normalizedPrefix) {
+      prefixes.add(normalizedPrefix);
+    }
+  }
+
+  return [...prefixes];
+};
+
+export const matchesApiPrefix = (
+  pathname: string,
+  apiPrefixes: string[],
+): boolean => {
+  const normalizedPathname = pathname.startsWith('/')
+    ? pathname
+    : `/${pathname}`;
+
+  return apiPrefixes.some(
+    prefix =>
+      normalizedPathname === prefix ||
+      normalizedPathname.startsWith(`${prefix}/`),
+  );
+};
+
 /**
  * Convert i18next detection options to hono languageDetector options
  */
@@ -231,6 +303,7 @@ const buildLocalizedUrl = (
   urlPath: string,
   language: string,
   languages: string[],
+  localisedUrls?: LocaleDetectionOptions['localisedUrls'],
 ): string => {
   const url = new URL(req.url);
   const pathname = url.pathname;
@@ -242,16 +315,21 @@ const buildLocalizedUrl = (
     : pathname;
 
   const segments = remainingPath.split('/').filter(Boolean);
-
-  if (segments.length > 0 && languages.includes(segments[0])) {
-    // Replace existing language prefix
-    segments[0] = language;
-  } else {
-    // If path doesn't start with language, add language prefix
-    segments.unshift(language);
-  }
-
-  const newPathname = `/${segments.join('/')}`;
+  const localisedUrlsConfig = resolveLocalisedUrlsConfig(localisedUrls);
+  const pathWithoutLanguage =
+    segments.length > 0 && languages.includes(segments[0])
+      ? `/${segments.slice(1).join('/')}`
+      : remainingPath;
+  const resolvedPath = localisedUrlsConfig.enabled
+    ? resolveLocalisedPath(
+        pathWithoutLanguage,
+        language,
+        languages,
+        localisedUrlsConfig.map,
+      )
+    : pathWithoutLanguage;
+  const resolvedSegments = resolvedPath.split('/').filter(Boolean);
+  const newPathname = `/${[language, ...resolvedSegments].join('/')}`;
   // Handle root path case to avoid double slashes like //en
   const suffix = `${url.search}${url.hash}`;
   const localizedUrl =
@@ -265,6 +343,11 @@ export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
   setup: api => {
     api.onPrepare(() => {
       const { middlewares, routes } = api.getServerContext();
+      const serverConfig = api.getServerConfig();
+      const bffPrefix = serverConfig?.bff
+        ? (serverConfig.bff.prefix ?? '/api')
+        : undefined;
+      const apiPrefixes = collectApiPrefixes(routes, bffPrefix);
 
       // Collect all non-root entry paths for cross-entry path detection
       const entryPaths = new Set<string>();
@@ -292,6 +375,7 @@ export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
           fallbackLanguage = 'en',
           detection,
           ignoreRedirectRoutes,
+          localisedUrls,
         } = getLocaleDetectionOptions(entryName, options.localeDetection);
         const staticRoutePrefixes = options.staticRoutePrefixes;
         const originUrlPath = route.urlPath;
@@ -314,6 +398,10 @@ export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
                 const url = new URL(c.req.url);
                 const pathname = url.pathname;
 
+                if (matchesApiPrefix(pathname, apiPrefixes)) {
+                  return await next();
+                }
+
                 // For static resource requests, skip language detection
                 if (
                   isStaticResourceRequest(
@@ -348,6 +436,10 @@ export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
               const url = new URL(c.req.url);
               const pathname = url.pathname;
 
+              if (matchesApiPrefix(pathname, apiPrefixes)) {
+                return await next();
+              }
+
               // For static resource requests, skip i18n processing
               if (
                 isStaticResourceRequest(
@@ -391,9 +483,24 @@ export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
                   originUrlPath,
                   targetLanguage,
                   languages,
+                  localisedUrls,
                 );
                 return c.redirect(localizedUrl);
               }
+              const localisedUrlsConfig =
+                resolveLocalisedUrlsConfig(localisedUrls);
+              if (localisedUrlsConfig.enabled) {
+                const expectedUrl = buildLocalizedUrl(
+                  c.req,
+                  originUrlPath,
+                  language,
+                  languages,
+                  localisedUrls,
+                );
+                if (expectedUrl !== `${pathname}${url.search}${url.hash}`) {
+                  return c.redirect(expectedUrl);
+                }
+              }
               await next();
             },
           });