@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

package/src/runtime/routerAdapter.tsx

@@ -0,0 +1,332 @@
+import { isBrowser, RuntimeContext } from '@modern-js/runtime';
+import {
+  getRouterRuntimeState,
+  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 =
+    getRouterRuntimeState(internalContext)?.framework ||
+    getRouterRuntimeState(runtimeContext)?.framework;
+
+  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 = getRouterRuntimeState(internalContext)?.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/types.ts

@@ -10,7 +10,7 @@ declare module '@modern-js/runtime' {
     };
   }
 
-  interface TInternalRuntimeContext {
+  interface TRuntimeContext {
     i18nInstance?: I18nInstance;
     changeLanguage?: (lang: string) => Promise<void>;
   }

package/src/runtime/utils.ts

@@ -3,6 +3,8 @@ import {
   getGlobalBasename,
   type TInternalRuntimeContext,
 } from '@modern-js/runtime/context';
+import type { LocalisedUrlsOption } from '../shared/localisedUrls';
+import { localiseTargetPathname } from '../shared/localisedUrls';
 
 export const getPathname = (context: TInternalRuntimeContext): string => {
   if (isBrowser()) {
@@ -40,29 +42,46 @@ export const getLanguageFromPath = (
   return fallbackLanguage;
 };
 
+/**
+ * Split a link target into its pathname, search and hash parts without
+ * relying on `new URL` (SSR-hot path; targets are relative).
+ */
+export const splitUrlTarget = (
+  target: string,
+): { pathname: string; search: string; hash: string } => {
+  const hashIndex = target.indexOf('#');
+  const hash = hashIndex >= 0 ? target.slice(hashIndex) : '';
+  const beforeHash = hashIndex >= 0 ? target.slice(0, hashIndex) : target;
+  const searchIndex = beforeHash.indexOf('?');
+  const search = searchIndex >= 0 ? beforeHash.slice(searchIndex) : '';
+  const pathname =
+    searchIndex >= 0 ? beforeHash.slice(0, searchIndex) : beforeHash;
+
+  return { pathname, search, hash };
+};
+
 /**
  * Helper function to build localized URL
- * @param pathname - The current pathname
+ * @param target - The language-agnostic target; may include `?search` and `#hash`
  * @param language - The target language
  * @param languages - Array of supported languages
- * @returns The localized URL path
+ * @returns The localized URL path with search and hash re-appended verbatim
  */
 export const buildLocalizedUrl = (
-  pathname: string,
+  target: string,
   language: string,
   languages: string[],
+  localisedUrls?: LocalisedUrlsOption,
 ): 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 { pathname, search, hash } = splitUrlTarget(target);
+  const localizedPathname = localiseTargetPathname(
+    pathname,
+    language,
+    languages,
+    localisedUrls,
+  );
+
+  return `${localizedPathname}${search}${hash}`;
 };
 
 export const detectLanguageFromPath = (
@@ -137,27 +156,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 {
+  localiseTargetPathname,
+  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;
@@ -241,17 +314,12 @@ const buildLocalizedUrl = (
     ? pathname.slice(basePath.length)
     : 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 newPathname = localiseTargetPathname(
+    remainingPath,
+    language,
+    languages,
+    localisedUrls,
+  );
   // Handle root path case to avoid double slashes like //en
   const suffix = `${url.search}${url.hash}`;
   const localizedUrl =
@@ -265,6 +333,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 +365,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 +388,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 +426,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 +473,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();
             },
           });