@bleedingdev/modern-js-plugin-i18n 3.5.0-ultramodern.30 → 3.5.0-ultramodern.31

package/src/runtime/providerComposition.tsx

@@ -0,0 +1,142 @@
+import { RuntimeContext } from '@modern-js/runtime';
+import { Helmet } from '@modern-js/runtime/head';
+import type React from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import type { BaseLocaleDetectionOptions } from '../shared/type';
+import { ModernI18nProvider } from './context';
+import {
+  createContextValue,
+  useClientSideRedirect,
+  useLanguageSync,
+  useSdkResourcesLoader,
+} from './hooks';
+import type { I18nInstance } from './i18n';
+import { getI18nextInstanceForProvider } from './i18n/instance';
+import type { RuntimeContextWithI18n } from './pluginSetup';
+
+export interface I18nRootWrapperOptions {
+  entryName?: string;
+  htmlLangAttr: boolean;
+  localePathRedirect: boolean;
+  languages: string[];
+  fallbackLanguage: string;
+  ignoreRedirectRoutes?: BaseLocaleDetectionOptions['ignoreRedirectRoutes'];
+  localisedUrls?: BaseLocaleDetectionOptions['localisedUrls'];
+  getLatestI18nInstance: () => I18nInstance | undefined;
+  getI18nextProvider: () => React.ComponentType<any> | null | undefined;
+}
+
+export const createI18nRootWrapper =
+  (options: I18nRootWrapperOptions) => (App: React.ComponentType<any>) => {
+    return (props: Record<string, unknown>) => {
+      const {
+        entryName,
+        htmlLangAttr,
+        localePathRedirect,
+        languages,
+        fallbackLanguage,
+        ignoreRedirectRoutes,
+        localisedUrls,
+        getLatestI18nInstance,
+        getI18nextProvider,
+      } = options;
+      const runtimeContext = useContext(
+        RuntimeContext,
+      ) as RuntimeContextWithI18n;
+      const i18nInstance =
+        runtimeContext.i18nInstance || getLatestI18nInstance();
+      const initialLang = useMemo(
+        () => i18nInstance?.language || fallbackLanguage,
+        [i18nInstance?.language, fallbackLanguage],
+      );
+      const [lang, setLang] = useState(initialLang);
+      const [forceUpdate, setForceUpdate] = useState(0);
+      const prevLangRef = useRef(lang);
+      const runtimeContextRef = useRef(runtimeContext);
+      runtimeContextRef.current = runtimeContext;
+
+      useEffect(() => {
+        if (i18nInstance?.language) {
+          const translator = (i18nInstance as any).translator;
+          if (translator) {
+            translator.language = i18nInstance.language;
+          }
+        }
+      }, [i18nInstance?.language]);
+
+      useEffect(() => {
+        prevLangRef.current = lang;
+      }, [lang]);
+
+      useSdkResourcesLoader(i18nInstance, setForceUpdate);
+      useLanguageSync(
+        i18nInstance,
+        localePathRedirect,
+        languages,
+        runtimeContextRef,
+        prevLangRef,
+        setLang,
+      );
+
+      // Handle client-side redirect for static deployments.
+      useClientSideRedirect(
+        i18nInstance,
+        localePathRedirect,
+        languages,
+        fallbackLanguage,
+        ignoreRedirectRoutes,
+        localisedUrls,
+      );
+
+      const contextValue = useMemo(
+        () =>
+          createContextValue(
+            lang,
+            i18nInstance,
+            entryName,
+            languages,
+            localePathRedirect,
+            ignoreRedirectRoutes,
+            localisedUrls,
+            setLang,
+          ),
+        [
+          lang,
+          i18nInstance,
+          entryName,
+          languages,
+          localePathRedirect,
+          ignoreRedirectRoutes,
+          localisedUrls,
+          forceUpdate,
+        ],
+      );
+
+      const children = (props as React.PropsWithChildren).children;
+      const appContent = (
+        <>
+          {Boolean(htmlLangAttr) && <Helmet htmlAttributes={{ lang }} />}
+          <ModernI18nProvider value={contextValue}>
+            {App ? <App {...props}>{children}</App> : children}
+          </ModernI18nProvider>
+        </>
+      );
+
+      if (!i18nInstance) {
+        return appContent;
+      }
+
+      const I18nextProvider = getI18nextProvider();
+      if (I18nextProvider) {
+        const i18nextInstanceForProvider =
+          getI18nextInstanceForProvider(i18nInstance);
+        return (
+          <I18nextProvider i18n={i18nextInstanceForProvider}>
+            {appContent}
+          </I18nextProvider>
+        );
+      }
+
+      return appContent;
+    };
+  };

package/src/runtime/reactI18next.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+export interface ReactI18nextIntegration {
+  I18nextProvider: React.ComponentType<any> | null;
+  initReactI18next: any | null;
+}
+
+export type LoadReactI18nextIntegration =
+  () => Promise<ReactI18nextIntegration | null>;
+
+export const resolveReactI18nextIntegration = async (
+  reactI18next: boolean,
+  loadReactI18nextIntegration?: LoadReactI18nextIntegration,
+): Promise<ReactI18nextIntegration | null> => {
+  if (!reactI18next) {
+    return null;
+  }
+
+  return loadReactI18nextIntegration?.() ?? null;
+};

package/src/server/apiPrefix.ts

@@ -0,0 +1,67 @@
+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}/`),
+  );
+};

package/src/server/detectorOptions.ts

@@ -0,0 +1,105 @@
+import {
+  DEFAULT_I18NEXT_DETECTION_OPTIONS,
+  mergeDetectionOptions,
+} from '../runtime/i18n/detection/config.js';
+import type { LanguageDetectorOptions } from '../runtime/i18n/instance';
+
+/**
+ * Convert i18next detection options to hono languageDetector options
+ */
+export 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']);
+
+  const cookieMinutes = (mergedDetection as Record<string, unknown>)
+    .cookieMinutes;
+  const cookieMaxAge =
+    typeof cookieMinutes === 'number' && Number.isFinite(cookieMinutes)
+      ? Math.max(0, Math.floor(cookieMinutes * 60))
+      : DEFAULT_I18NEXT_DETECTION_OPTIONS.cookieMinutes * 60;
+
+  const cookieDomain = (mergedDetection as Record<string, unknown>)
+    .cookieDomain;
+  const cookieSecure = (mergedDetection as Record<string, unknown>)
+    .cookieSecure;
+  const cookieHttpOnly = (mergedDetection as Record<string, unknown>)
+    .cookieHttpOnly;
+  const cookieSameSite = (mergedDetection as Record<string, unknown>)
+    .cookieSameSite;
+
+  const normalizedCookieDomain =
+    typeof cookieDomain === 'string' ? cookieDomain : undefined;
+
+  // Keep cookie defaults aligned with i18next language detector behavior:
+  // language cookie should be readable from browser-side detector.
+  const cookieOptions = {
+    maxAge: cookieMaxAge,
+    sameSite:
+      cookieSameSite === 'None' || cookieSameSite === 'none'
+        ? ('None' as const)
+        : cookieSameSite === 'Lax' || cookieSameSite === 'lax'
+          ? ('Lax' as const)
+          : ('Strict' as const),
+    secure: typeof cookieSecure === 'boolean' ? cookieSecure : false,
+    httpOnly: typeof cookieHttpOnly === 'boolean' ? cookieHttpOnly : false,
+    ...(normalizedCookieDomain ? { domain: normalizedCookieDomain } : {}),
+  };
+
+  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 }),
+    ...(caches !== false && { cookieOptions }),
+    ignoreCase: true,
+  };
+};

package/src/server/index.ts

@@ -3,341 +3,26 @@ 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 {
-  localiseTargetPathname,
-  resolveLocalisedUrlsConfig,
-} from '../shared/localisedUrls.js';
+import { resolveLocalisedUrlsConfig } from '../shared/localisedUrls.js';
 import type { LocaleDetectionOptions } from '../shared/type';
 import { getLocaleDetectionOptions } from '../shared/utils.js';
+import { collectApiPrefixes, matchesApiPrefix } from './apiPrefix.js';
+import { convertToHonoLanguageDetectorOptions } from './detectorOptions.js';
+import {
+  buildLocalizedUrl,
+  createLocaleRedirectResponse,
+  getLanguageFromPath,
+  isStaticResourceRequest,
+  shouldIgnoreRedirect,
+} from './redirectPolicy.js';
+
+export { collectApiPrefixes, matchesApiPrefix } from './apiPrefix.js';
 
 export interface I18nPluginOptions {
   localeDetection: LocaleDetectionOptions;
   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
- */
-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']);
-
-  const cookieMinutes = (mergedDetection as Record<string, unknown>)
-    .cookieMinutes;
-  const cookieMaxAge =
-    typeof cookieMinutes === 'number' && Number.isFinite(cookieMinutes)
-      ? Math.max(0, Math.floor(cookieMinutes * 60))
-      : DEFAULT_I18NEXT_DETECTION_OPTIONS.cookieMinutes * 60;
-
-  const cookieDomain = (mergedDetection as Record<string, unknown>)
-    .cookieDomain;
-  const cookieSecure = (mergedDetection as Record<string, unknown>)
-    .cookieSecure;
-  const cookieHttpOnly = (mergedDetection as Record<string, unknown>)
-    .cookieHttpOnly;
-  const cookieSameSite = (mergedDetection as Record<string, unknown>)
-    .cookieSameSite;
-
-  const normalizedCookieDomain =
-    typeof cookieDomain === 'string' ? cookieDomain : undefined;
-
-  // Keep cookie defaults aligned with i18next language detector behavior:
-  // language cookie should be readable from browser-side detector.
-  const cookieOptions = {
-    maxAge: cookieMaxAge,
-    sameSite:
-      cookieSameSite === 'None' || cookieSameSite === 'none'
-        ? ('None' as const)
-        : cookieSameSite === 'Lax' || cookieSameSite === 'lax'
-          ? ('Lax' as const)
-          : ('Strict' as const),
-    secure: typeof cookieSecure === 'boolean' ? cookieSecure : false,
-    httpOnly: typeof cookieHttpOnly === 'boolean' ? cookieHttpOnly : false,
-    ...(normalizedCookieDomain ? { domain: normalizedCookieDomain } : {}),
-  };
-
-  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 }),
-    ...(caches !== false && { cookieOptions }),
-    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])) {
-    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[],
-  localisedUrls?: LocaleDetectionOptions['localisedUrls'],
-): 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 newPathname = localiseTargetPathname(
-    remainingPath,
-    language,
-    languages,
-    localisedUrls,
-  );
-  // 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;
-};
-
-const createLocaleRedirectResponse = (location: string): Response =>
-  new Response(null, {
-    status: 302,
-    headers: {
-      'Cache-Control': 'private, no-store',
-      Location: location,
-      Vary: 'Accept-Language, Cookie',
-    },
-  });
-
 export const i18nServerPlugin = (options: I18nPluginOptions): ServerPlugin => ({
   name: '@modern-js/plugin-i18n/server',
   setup: api => {