@modern-js/plugin-i18n 2.69.7 → 3.0.0-alpha.1

package/src/runtime/utils.ts

@@ -0,0 +1,151 @@
+import { isBrowser } from '@modern-js/runtime';
+import {
+  type TInternalRuntimeContext,
+  getGlobalBasename,
+} from '@modern-js/runtime/context';
+
+export const getPathname = (context: TInternalRuntimeContext): string => {
+  if (isBrowser()) {
+    return window.location.pathname;
+  }
+  return context.ssrContext?.request?.pathname || '/';
+};
+
+export const getEntryPath = (): string => {
+  const basename = getGlobalBasename();
+  if (basename) {
+    return basename === '/' ? '' : basename;
+  }
+  return '';
+};
+/**
+ * Helper function to get language from current pathname
+ * @param pathname - The current pathname
+ * @param languages - Array of supported languages
+ * @param fallbackLanguage - Fallback language when no language is detected
+ * @returns The detected language or fallback language
+ */
+export const getLanguageFromPath = (
+  pathname: string,
+  languages: string[],
+  fallbackLanguage: string,
+): string => {
+  const segments = pathname.split('/').filter(Boolean);
+  const firstSegment = segments[0];
+
+  if (languages.includes(firstSegment)) {
+    return firstSegment;
+  }
+
+  return fallbackLanguage;
+};
+
+/**
+ * Helper function to build localized URL
+ * @param pathname - The current pathname
+ * @param language - The target language
+ * @param languages - Array of supported languages
+ * @returns The localized URL path
+ */
+export const buildLocalizedUrl = (
+  pathname: string,
+  language: string,
+  languages: string[],
+): 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('/')}`;
+};
+
+export const detectLanguageFromPath = (
+  pathname: string,
+  languages: string[],
+  localePathRedirect: boolean,
+): {
+  detected: boolean;
+  language?: string;
+} => {
+  if (!localePathRedirect) {
+    return { detected: false };
+  }
+
+  const relativePath = pathname.replace(getEntryPath(), '');
+  const segments = relativePath.split('/').filter(Boolean);
+  const firstSegment = segments[0];
+
+  if (firstSegment && languages.includes(firstSegment)) {
+    return { detected: true, language: firstSegment };
+  }
+
+  return { detected: false };
+};
+
+/**
+ * Check if the given pathname should ignore automatic locale redirect
+ */
+export const shouldIgnoreRedirect = (
+  pathname: string,
+  languages: string[],
+  ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean),
+): boolean => {
+  if (!ignoreRedirectRoutes) {
+    return false;
+  }
+
+  // Remove language prefix if present (e.g., /en/api -> /api)
+  const segments = pathname.split('/').filter(Boolean);
+  let pathWithoutLang = pathname;
+  if (segments.length > 0 && languages.includes(segments[0])) {
+    // Remove language prefix
+    pathWithoutLang = `/${segments.slice(1).join('/')}`;
+  }
+
+  // Normalize path (ensure it starts with /)
+  const normalizedPath = pathWithoutLang.startsWith('/')
+    ? pathWithoutLang
+    : `/${pathWithoutLang}`;
+
+  if (typeof ignoreRedirectRoutes === 'function') {
+    return ignoreRedirectRoutes(normalizedPath);
+  }
+
+  // Check if pathname matches any of the ignore patterns
+  return ignoreRedirectRoutes.some(pattern => {
+    // Support both exact match and prefix match
+    return (
+      normalizedPath === pattern || normalizedPath.startsWith(`${pattern}/`)
+    );
+  });
+};
+
+// 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

@@ -0,0 +1,336 @@
+import * as honoPkg from '@modern-js/server-core/hono';
+const { languageDetector } = honoPkg;
+import type { Context, Next, ServerPlugin } from '@modern-js/server-runtime';
+import {
+  DEFAULT_I18NEXT_DETECTION_OPTIONS,
+  mergeDetectionOptions,
+} from '../runtime/i18n/detection/config.js';
+import type { LanguageDetectorOptions } from '../runtime/i18n/instance';
+import type { LocaleDetectionOptions } from '../shared/type';
+import { getLocaleDetectionOptions } from '../shared/utils.js';
+
+export interface I18nPluginOptions {
+  localeDetection: LocaleDetectionOptions;
+  staticRoutePrefixes: string[];
+}
+
+/**
+ * Convert i18next detection options to hono languageDetector options
+ */
+const convertToHonoLanguageDetectorOptions = (
+  languages: string[],
+  fallbackLanguage: string,
+  detectionOptions?: LanguageDetectorOptions,
+) => {
+  // Merge user detection options with defaults
+  const mergedDetection = detectionOptions
+    ? mergeDetectionOptions(detectionOptions)
+    : DEFAULT_I18NEXT_DETECTION_OPTIONS;
+
+  // Get detection order, excluding 'path' and browser-only detectors
+  const order = (mergedDetection.order || []).filter(
+    (item: string) =>
+      !['path', 'localStorage', 'navigator', 'htmlTag', 'subdomain'].includes(
+        item,
+      ),
+  );
+
+  // If no order specified, use default server-side order
+  const detectionOrder =
+    order.length > 0 ? order : ['querystring', 'cookie', 'header'];
+
+  // Map i18next order to hono order
+  const honoOrder = detectionOrder.map(item => {
+    // Map 'querystring' to 'querystring', 'cookie' to 'cookie', 'header' to 'header'
+    if (item === 'querystring') return 'querystring';
+    if (item === 'cookie') return 'cookie';
+    if (item === 'header') return 'header';
+    return item;
+  }) as ('querystring' | 'cookie' | 'header' | 'path')[];
+
+  // Determine caches option
+  // hono languageDetector expects: false | "cookie"[] | undefined
+  const caches: false | ['cookie'] | undefined =
+    mergedDetection.caches === false
+      ? false
+      : Array.isArray(mergedDetection.caches) &&
+          !mergedDetection.caches.includes('cookie')
+        ? false
+        : (['cookie'] as ['cookie']);
+
+  return {
+    supportedLanguages: languages.length > 0 ? languages : [fallbackLanguage],
+    fallbackLanguage,
+    order: honoOrder,
+    lookupQueryString:
+      mergedDetection.lookupQuerystring ||
+      DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupQuerystring ||
+      'lng',
+    lookupCookie:
+      mergedDetection.lookupCookie ||
+      DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupCookie ||
+      'i18next',
+    lookupFromHeaderKey:
+      mergedDetection.lookupHeader ||
+      DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupHeader ||
+      'accept-language',
+    ...(caches !== undefined && { caches }),
+    ignoreCase: true,
+  };
+};
+
+/**
+ * Check if the given pathname should ignore automatic locale redirect
+ */
+const shouldIgnoreRedirect = (
+  pathname: string,
+  urlPath: string,
+  ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean),
+): boolean => {
+  if (!ignoreRedirectRoutes) {
+    return false;
+  }
+
+  // Remove urlPath prefix to get remaining path for matching
+  const basePath = urlPath.replace('/*', '');
+  const remainingPath = pathname.startsWith(basePath)
+    ? pathname.slice(basePath.length)
+    : pathname;
+
+  // Normalize path (ensure it starts with /)
+  const normalizedPath = remainingPath.startsWith('/')
+    ? remainingPath
+    : `/${remainingPath}`;
+
+  if (typeof ignoreRedirectRoutes === 'function') {
+    return ignoreRedirectRoutes(normalizedPath);
+  }
+
+  // Check if pathname matches any of the ignore patterns
+  return ignoreRedirectRoutes.some(pattern => {
+    // Support both exact match and prefix match
+    return (
+      normalizedPath === pattern || normalizedPath.startsWith(`${pattern}/`)
+    );
+  });
+};
+
+/**
+ * Check if the given pathname is a static resource request
+ * This includes:
+ * 1. Paths matching staticRoutePrefixes (from public directories)
+ * 2. Standard static resource paths like /static/, /upload/
+ * 3. Paths with language prefix like /en/static/, /zh/static/
+ */
+const isStaticResourceRequest = (
+  pathname: string,
+  staticRoutePrefixes: string[],
+  languages: string[] = [],
+): boolean => {
+  // Check against staticRoutePrefixes (from public directories)
+  if (
+    staticRoutePrefixes.some(
+      prefix => pathname.startsWith(`${prefix}/`) || pathname === prefix,
+    )
+  ) {
+    return true;
+  }
+
+  // Check standard static resource paths
+  const standardStaticPrefixes = ['/static/', '/upload/'];
+  if (standardStaticPrefixes.some(prefix => pathname.startsWith(prefix))) {
+    return true;
+  }
+
+  // Check paths with language prefix (e.g., /en/static/, /zh/static/)
+  // Remove language prefix if present and check again
+  const pathSegments = pathname.split('/').filter(Boolean);
+  if (pathSegments.length > 0 && languages.includes(pathSegments[0])) {
+    // biome-ignore lint/style/useTemplate: <explanation>
+    const pathWithoutLang = '/' + pathSegments.slice(1).join('/');
+    if (
+      standardStaticPrefixes.some(prefix =>
+        pathWithoutLang.startsWith(prefix),
+      ) ||
+      staticRoutePrefixes.some(
+        prefix =>
+          pathWithoutLang.startsWith(`${prefix}/`) ||
+          pathWithoutLang === prefix,
+      )
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const getLanguageFromPath = (
+  req: any,
+  urlPath: string,
+  languages: string[],
+): string | null => {
+  const url = new URL(req.url, `http://${req.header().host}`);
+  const pathname = url.pathname;
+
+  // Remove urlPath prefix to get remaining path
+  // urlPath format is /lang/*, need to remove /lang part
+  const basePath = urlPath.replace('/*', '');
+  const remainingPath = pathname.startsWith(basePath)
+    ? pathname.slice(basePath.length)
+    : pathname;
+
+  const segments = remainingPath.split('/').filter(Boolean);
+  const firstSegment = segments[0];
+
+  if (languages.includes(firstSegment)) {
+    return firstSegment;
+  }
+
+  return null;
+};
+
+const buildLocalizedUrl = (
+  req: any,
+  urlPath: string,
+  language: string,
+  languages: string[],
+): string => {
+  const url = new URL(req.url);
+  const pathname = url.pathname;
+
+  // Remove urlPath prefix to get remaining path
+  const basePath = urlPath.replace('/*', '');
+  const remainingPath = pathname.startsWith(basePath)
+    ? 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('/')}`;
+  // Handle root path case to avoid double slashes like //en
+  const suffix = `${url.search}${url.hash}`;
+  const localizedUrl =
+    basePath === '/' ? newPathname + suffix : basePath + newPathname + suffix;
+
+  return localizedUrl;
+};
+
+export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
+  name: '@modern-js/plugin-i18n/server',
+  setup: api => {
+    api.onPrepare(() => {
+      const { middlewares, routes } = api.getServerContext();
+      routes.map(route => {
+        const { entryName } = route;
+        if (!entryName) {
+          return;
+        }
+        if (!options.localeDetection) {
+          return;
+        }
+        const {
+          localePathRedirect,
+          i18nextDetector = true,
+          languages = [],
+          fallbackLanguage = 'en',
+          detection,
+          ignoreRedirectRoutes,
+        } = getLocaleDetectionOptions(entryName, options.localeDetection);
+        const staticRoutePrefixes = options.staticRoutePrefixes;
+        const originUrlPath = route.urlPath;
+        const urlPath = originUrlPath.endsWith('/')
+          ? `${originUrlPath}*`
+          : `${originUrlPath}/*`;
+        if (localePathRedirect) {
+          // Add languageDetector middleware before the redirect handler
+          if (i18nextDetector) {
+            const detectorOptions = convertToHonoLanguageDetectorOptions(
+              languages,
+              fallbackLanguage,
+              detection,
+            );
+            const detectorHandler = languageDetector(detectorOptions);
+            middlewares.push({
+              name: 'i18n-language-detector',
+              path: urlPath,
+              handler: async (c: Context, next: Next) => {
+                const url = new URL(c.req.url);
+                const pathname = url.pathname;
+
+                // For static resource requests, skip language detection
+                if (
+                  isStaticResourceRequest(
+                    pathname,
+                    staticRoutePrefixes,
+                    languages,
+                  )
+                ) {
+                  return await next();
+                }
+
+                return detectorHandler(c, next);
+              },
+            });
+          }
+
+          middlewares.push({
+            name: 'i18n-server-middleware',
+            path: urlPath,
+            handler: async (c: Context, next: Next) => {
+              const url = new URL(c.req.url);
+              const pathname = url.pathname;
+
+              // For static resource requests, skip i18n processing
+              if (
+                isStaticResourceRequest(
+                  pathname,
+                  staticRoutePrefixes,
+                  languages,
+                )
+              ) {
+                return await next();
+              }
+
+              // Check if this route should ignore automatic redirect
+              if (
+                shouldIgnoreRedirect(pathname, urlPath, ignoreRedirectRoutes)
+              ) {
+                return await next();
+              }
+
+              const language = getLanguageFromPath(c.req, urlPath, languages);
+              if (!language) {
+                // Get detected language from languageDetector middleware
+                let detectedLanguage: string | null = null;
+                if (i18nextDetector) {
+                  detectedLanguage = c.get('language') || null;
+                }
+                // Use detected language or fallback to fallbackLanguage
+                const targetLanguage = detectedLanguage || fallbackLanguage;
+                const localizedUrl = buildLocalizedUrl(
+                  c.req,
+                  originUrlPath,
+                  targetLanguage,
+                  languages,
+                );
+                return c.redirect(localizedUrl);
+              }
+              await next();
+            },
+          });
+        }
+      });
+    });
+  },
+});
+
+export default i18nServerPlugin;

package/src/shared/deepMerge.ts

@@ -0,0 +1,38 @@
+function isPlainObject(value: any): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    !(value instanceof Date)
+  );
+}
+
+export function deepMerge<T extends Record<string, any>>(
+  defaultOptions: T,
+  userOptions?: Partial<T>,
+): T {
+  if (!userOptions) {
+    return defaultOptions;
+  }
+
+  const merged: Record<string, any> = { ...defaultOptions };
+
+  for (const key in userOptions) {
+    const userValue = userOptions[key];
+    if (userValue === undefined) {
+      continue;
+    }
+
+    const defaultValue = merged[key];
+    const isUserValueObject = isPlainObject(userValue);
+    const isDefaultValueObject = isPlainObject(defaultValue);
+
+    if (isUserValueObject && isDefaultValueObject) {
+      merged[key] = deepMerge(defaultValue, userValue);
+    } else {
+      merged[key] = userValue;
+    }
+  }
+
+  return merged as T;
+}

package/src/shared/detection.ts

@@ -0,0 +1,131 @@
+import {
+  DEFAULT_I18NEXT_DETECTION_OPTIONS,
+  mergeDetectionOptions,
+} from '../runtime/i18n/detection/config.js';
+import type { LanguageDetectorOptions } from '../runtime/i18n/instance';
+
+/**
+ * Detect language from request using the same detection logic as i18next
+ * This ensures consistency between server-side and client-side detection
+ */
+export function detectLanguageFromRequest(
+  req: {
+    url: string;
+    headers:
+      | {
+          get: (name: string) => string | null;
+        }
+      | Headers;
+  },
+  languages: string[],
+  detectionOptions?: LanguageDetectorOptions,
+): string | null {
+  try {
+    // Merge user detection options with defaults
+    const mergedDetection = detectionOptions
+      ? mergeDetectionOptions(detectionOptions)
+      : DEFAULT_I18NEXT_DETECTION_OPTIONS;
+
+    // Get detection order, excluding 'path' and browser-only detectors
+    const order = (mergedDetection.order || []).filter(
+      (item: string) =>
+        !['path', 'localStorage', 'navigator', 'htmlTag', 'subdomain'].includes(
+          item,
+        ),
+    );
+
+    // If no order specified, use default server-side order
+    const detectionOrder =
+      order.length > 0 ? order : ['querystring', 'cookie', 'header'];
+
+    // Helper to get header value
+    const getHeader = (name: string): string | null => {
+      if (req.headers instanceof Headers) {
+        return req.headers.get(name);
+      }
+      return req.headers.get(name);
+    };
+
+    // Try each detection method in order
+    for (const method of detectionOrder) {
+      let detectedLang: string | null = null;
+
+      switch (method) {
+        case 'querystring': {
+          const lookupKey =
+            mergedDetection.lookupQuerystring ||
+            DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupQuerystring ||
+            'lng';
+          const host = getHeader('host') || 'localhost';
+          const url = new URL(req.url, `http://${host}`);
+          detectedLang = url.searchParams.get(lookupKey);
+          break;
+        }
+        case 'cookie': {
+          const lookupKey =
+            mergedDetection.lookupCookie ||
+            DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupCookie ||
+            'i18next';
+          const cookieHeader = getHeader('Cookie');
+          if (cookieHeader) {
+            const cookies = cookieHeader
+              .split(';')
+              .reduce((acc: Record<string, string>, item: string) => {
+                const [key, value] = item.trim().split('=');
+                if (key && value) {
+                  acc[key] = value;
+                }
+                return acc;
+              }, {});
+            detectedLang = cookies[lookupKey] || null;
+          }
+          break;
+        }
+        case 'header': {
+          const lookupKey =
+            mergedDetection.lookupHeader ||
+            DEFAULT_I18NEXT_DETECTION_OPTIONS.lookupHeader ||
+            'accept-language';
+          const acceptLanguage = getHeader(lookupKey);
+          if (acceptLanguage) {
+            // Parse Accept-Language header: "en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7"
+            const languagesList = acceptLanguage
+              .split(',')
+              .map((lang: string) => {
+                const [code, q] = lang.trim().split(';');
+                return {
+                  code: code.split('-')[0], // Extract base language code
+                  quality: q ? parseFloat(q.split('=')[1]) : 1.0,
+                };
+              })
+              .sort(
+                (a: { quality: number }, b: { quality: number }) =>
+                  b.quality - a.quality,
+              );
+
+            // Find first matching language
+            for (const lang of languagesList) {
+              if (languages.length === 0 || languages.includes(lang.code)) {
+                detectedLang = lang.code;
+                break;
+              }
+            }
+          }
+          break;
+        }
+      }
+
+      // If detected and valid, return it
+      if (
+        detectedLang &&
+        (languages.length === 0 || languages.includes(detectedLang))
+      ) {
+        return detectedLang;
+      }
+    }
+  } catch (error) {
+    // Silently ignore errors
+  }
+
+  return null;
+}