@modern-js/plugin-i18n 2.69.5 → 3.0.0-alpha.0

package/package.json

@@ -2,11 +2,12 @@
   "name": "@modern-js/plugin-i18n",
   "description": "A Progressive React Framework for modern web development.",
   "homepage": "https://modernjs.dev",
+  "type": "module",
   "bugs": "https://github.com/web-infra-dev/modern.js/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/modern.js",
-    "directory": "packages/cli/plugin-i18n"
+    "directory": "packages/runtime/plugin-i18n"
   },
   "license": "MIT",
   "keywords": [
@@ -15,47 +16,112 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.69.5",
-  "jsnext:source": "./src/index.ts",
-  "types": "./dist/types/index.d.ts",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "typesVersions": {
-    "*": {
-      "language-detector": [
-        "./dist/types/languageDetector.d.ts"
-      ]
-    }
+  "version": "3.0.0-alpha.0",
+  "engines": {
+    "node": ">=20"
   },
+  "jsnext:source": "./src/cli/index.ts",
+  "types": "./dist/types/cli/index.d.ts",
+  "main": "./dist/cjs/cli/index.cjs",
+  "module": "./dist/esm/cli/index.js",
   "exports": {
     ".": {
-      "node": {
-        "import": "./dist/esm-node/index.js",
-        "require": "./dist/cjs/index.js"
-      },
-      "types": "./dist/types/index.d.ts",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/types/cli/index.d.ts",
+      "jsnext:source": "./src/cli/index.ts",
+      "default": "./dist/cjs/cli/index.cjs"
     },
-    "./language-detector": {
-      "node": {
-        "import": "./dist/esm-node/languageDetector.js",
-        "require": "./dist/cjs/languageDetector.js"
-      },
-      "types": "./dist/types/languageDetector.d.ts",
-      "default": "./dist/esm/languageDetector.js"
+    "./package.json": "./package.json",
+    "./cli": {
+      "types": "./dist/types/cli/index.d.ts",
+      "jsnext:source": "./src/cli/index.ts",
+      "default": "./dist/cjs/cli/index.cjs"
+    },
+    "./runtime": {
+      "types": "./dist/types/runtime/index.d.ts",
+      "jsnext:source": "./src/runtime/index.ts",
+      "import": "./dist/esm/runtime/index.js",
+      "node": "./dist/esm-node/runtime/index.js",
+      "default": "./dist/esm/runtime/index.js"
+    },
+    "./server": {
+      "types": "./dist/types/server/index.d.ts",
+      "jsnext:source": "./src/server/index.ts",
+      "import": "./dist/esm/server/index.js",
+      "node": "./dist/esm-node/server/index.js",
+      "default": "./dist/esm/server/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/types/runtime/i18n/index.d.ts",
+      "jsnext:source": "./src/runtime/i18n/index.ts",
+      "import": "./dist/esm/runtime/i18n/index.js",
+      "node": "./dist/esm-node/runtime/i18n/index.js",
+      "default": "./dist/esm/runtime/i18n/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/cli/index.d.ts"
+      ],
+      "cli": [
+        "./dist/types/cli/index.d.ts"
+      ],
+      "runtime": [
+        "./dist/types/runtime/index.d.ts"
+      ],
+      "server": [
+        "./dist/types/server/index.d.ts"
+      ],
+      "i18n": [
+        "./dist/types/runtime/i18n/index.d.ts"
+      ]
     }
   },
   "dependencies": {
     "@swc/helpers": "^0.5.17",
-    "@modern-js/utils": "2.69.5"
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-http-middleware": "^3.9.1",
+    "i18next-fs-backend": "^2.6.1",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-chained-backend": "^4.6.2",
+    "@modern-js/plugin": "3.0.0-alpha.0",
+    "@modern-js/server-core": "3.0.0-alpha.0",
+    "@modern-js/server-runtime": "3.0.0-alpha.0",
+    "@modern-js/runtime-utils": "3.0.0-alpha.0",
+    "@modern-js/types": "3.0.0-alpha.0",
+    "@modern-js/utils": "3.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
+    "i18next": ">=25.7.3",
+    "react-i18next": ">=15.7.4",
+    "@modern-js/runtime": "^3.0.0-alpha.0"
+  },
+  "peerDependenciesMeta": {
+    "i18next": {
+      "optional": true
+    },
+    "react-i18next": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@types/jest": "^29",
-    "@types/node": "^18",
-    "jest": "^29",
+    "i18next": "25.7.3",
+    "react-i18next": "15.7.4",
+    "@rslib/core": "0.18.5",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20",
+    "jest": "^29.7.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@scripts/build": "2.66.0",
-    "@scripts/jest-config": "2.66.0"
+    "@modern-js/runtime": "3.0.0-alpha.0",
+    "@modern-js/app-tools": "3.0.0-alpha.0",
+    "@scripts/jest-config": "2.66.0",
+    "@modern-js/rslib": "2.68.10"
   },
   "sideEffects": false,
   "publishConfig": {
@@ -63,8 +129,8 @@
     "access": "public"
   },
   "scripts": {
-    "new": "modern-lib new",
-    "build": "modern-lib build",
-    "test": "jest --passWithNoTests"
+    "dev": "rslib build --watch",
+    "build": "rslib build",
+    "test": "jest"
   }
 }

package/rslib.config.mts

@@ -0,0 +1,4 @@
+import { rslibConfig } from '@modern-js/rslib';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig(rslibConfig);

package/src/cli/index.ts

@@ -0,0 +1,245 @@
+import fs from 'fs';
+import path from 'path';
+import type { AppTools, CliPlugin } from '@modern-js/app-tools';
+import { getPublicDirRoutePrefixes } from '@modern-js/server-core';
+import type { Entrypoint } from '@modern-js/types';
+import type { BackendOptions, LocaleDetectionOptions } from '../shared/type';
+import { getBackendOptions, getLocaleDetectionOptions } from '../shared/utils';
+
+export type TransformRuntimeConfigFn = (
+  extendedConfig: Record<string, any>,
+  entrypoint: Entrypoint,
+) => Record<string, any>;
+
+/**
+ * Check if a directory exists and contains JSON files
+ */
+function hasJsonFiles(dirPath: string): boolean {
+  try {
+    if (!fs.existsSync(dirPath) || !fs.statSync(dirPath).isDirectory()) {
+      return false;
+    }
+    const entries = fs.readdirSync(dirPath);
+    // Check if there are any JSON files in the directory or subdirectories
+    for (const entry of entries) {
+      const entryPath = path.join(dirPath, entry);
+      const stat = fs.statSync(entryPath);
+      if (stat.isFile() && entry.endsWith('.json')) {
+        return true;
+      }
+      if (stat.isDirectory()) {
+        // Recursively check subdirectories (e.g., locales/en/, locales/zh/)
+        if (hasJsonFiles(entryPath)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Auto-detect if locales directory exists with JSON files
+ * Checks both project root and config/public directory
+ */
+function detectLocalesDirectory(
+  appDirectory: string,
+  normalizedConfig?: any,
+): boolean {
+  // Check project root directory
+  const rootLocalesPath = path.join(appDirectory, 'locales');
+  if (hasJsonFiles(rootLocalesPath)) {
+    return true;
+  }
+
+  // Check config/public directory
+  const configPublicPath = path.join(
+    appDirectory,
+    'config',
+    'public',
+    'locales',
+  );
+  if (hasJsonFiles(configPublicPath)) {
+    return true;
+  }
+
+  // Check publicDir if configured
+  const publicDir = normalizedConfig?.server?.publicDir;
+  if (publicDir) {
+    const publicDirPath = Array.isArray(publicDir) ? publicDir[0] : publicDir;
+    const localesPath = path.isAbsolute(publicDirPath)
+      ? path.join(publicDirPath, 'locales')
+      : path.join(appDirectory, publicDirPath, 'locales');
+    if (hasJsonFiles(localesPath)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export interface I18nPluginOptions {
+  localeDetection?: LocaleDetectionOptions;
+  backend?: BackendOptions;
+  transformRuntimeConfig?: TransformRuntimeConfigFn;
+  customPlugin?: {
+    runtime?: {
+      name?: string;
+      path?: string;
+    };
+    server?: {
+      name?: string;
+    };
+  };
+  [key: string]: any;
+}
+
+export const i18nPlugin = (
+  options: I18nPluginOptions = {},
+): CliPlugin<AppTools> => ({
+  name: '@modern-js/plugin-i18n',
+  setup: api => {
+    const {
+      localeDetection,
+      backend,
+      transformRuntimeConfig,
+      customPlugin,
+      ...restOptions
+    } = options;
+
+    api._internalRuntimePlugins(({ entrypoint, plugins }) => {
+      const localeDetectionOptions = localeDetection
+        ? getLocaleDetectionOptions(entrypoint.entryName, localeDetection)
+        : undefined;
+
+      // Auto-detect locales directory and enable backend if:
+      // 1. User didn't explicitly set backend.enabled to false
+      // 2. Locales directory exists with JSON files
+      // 3. If user configured loadPath or addPath, auto-enable backend without detection
+      let backendOptions: BackendOptions | undefined;
+      const { appDirectory } = api.getAppContext();
+      const normalizedConfig = api.getNormalizedConfig();
+
+      if (backend) {
+        const entryBackendOptions = getBackendOptions(
+          entrypoint.entryName,
+          backend,
+        );
+        // If user explicitly set enabled to false, don't auto-detect
+        if (entryBackendOptions?.enabled === false) {
+          backendOptions = entryBackendOptions;
+        } else {
+          // If user configured loadPath or addPath, auto-enable backend
+          // No need to detect locales directory since user has specified the path
+          if (entryBackendOptions?.loadPath || entryBackendOptions?.addPath) {
+            backendOptions = {
+              ...entryBackendOptions,
+              enabled: true,
+            };
+          } else if (entryBackendOptions?.enabled !== true) {
+            // Auto-detect if enabled is not explicitly true and no loadPath/addPath configured
+            const hasLocales = detectLocalesDirectory(
+              appDirectory,
+              normalizedConfig,
+            );
+
+            if (hasLocales) {
+              // Auto-enable backend if locales directory is detected
+              backendOptions = {
+                ...entryBackendOptions,
+                enabled: true,
+              };
+            } else {
+              backendOptions = entryBackendOptions;
+            }
+          } else {
+            backendOptions = entryBackendOptions;
+          }
+        }
+      } else {
+        // No backend config provided, try auto-detection
+        const hasLocales = detectLocalesDirectory(
+          appDirectory,
+          normalizedConfig,
+        );
+
+        if (hasLocales) {
+          // Auto-enable backend if locales directory is detected
+          backendOptions = getBackendOptions(entrypoint.entryName, {
+            enabled: true,
+          });
+        }
+      }
+
+      const { metaName } = api.getAppContext();
+
+      // Transform extended config if transform function is provided
+      let extendedConfig = restOptions;
+      if (transformRuntimeConfig) {
+        extendedConfig = transformRuntimeConfig(
+          restOptions,
+          entrypoint as Entrypoint,
+        );
+      }
+
+      // Build final config with base config and transformed extended config
+      const config = {
+        entryName: entrypoint.entryName,
+        localeDetection: localeDetectionOptions,
+        backend: backendOptions,
+        ...extendedConfig,
+      };
+
+      plugins.push({
+        name: customPlugin?.runtime?.name || 'i18n',
+        path: customPlugin?.runtime?.path || `@${metaName}/plugin-i18n/runtime`,
+        config,
+      });
+      return {
+        entrypoint,
+        plugins,
+      };
+    });
+
+    api._internalServerPlugins(({ plugins }) => {
+      const { serverRoutes, metaName } = api.getAppContext();
+      const normalizedConfig = api.getNormalizedConfig();
+
+      let staticRoutePrefixes: string[] = [];
+      if (serverRoutes && Array.isArray(serverRoutes)) {
+        // Get static route prefixes from 'public' directories
+        // 'public' routes are handled by static plugin
+        staticRoutePrefixes = serverRoutes
+          .filter(
+            route => !route.entryName && route.entryPath.startsWith('public'),
+          )
+          .map(route => route.urlPath)
+          .filter(Boolean);
+      }
+
+      // Also include publicDir configuration paths
+      // publicDir files are copied to dist/{dir}/ and should be treated as static resources
+      const publicDirPrefixes = getPublicDirRoutePrefixes(
+        normalizedConfig?.server?.publicDir,
+      );
+      publicDirPrefixes.forEach(prefix => {
+        if (!staticRoutePrefixes.includes(prefix)) {
+          staticRoutePrefixes.push(prefix);
+        }
+      });
+
+      plugins.push({
+        name: customPlugin?.server?.name || `@${metaName}/plugin-i18n/server`,
+        options: {
+          localeDetection,
+          staticRoutePrefixes,
+        },
+      });
+      return { plugins };
+    });
+  },
+});
+
+export default i18nPlugin;

package/src/runtime/I18nLink.tsx

@@ -0,0 +1,76 @@
+import { Link, useInRouterContext, useParams } from '@modern-js/runtime/router';
+import type React from 'react';
+import { useModernI18n } from './context';
+import { buildLocalizedUrl } from './utils';
+
+export interface I18nLinkProps {
+  to: string;
+  children: React.ReactNode;
+  [key: string]: any; // Allow other props to be passed through
+}
+
+/**
+ * I18nLink component that automatically adds language prefix to navigation links.
+ * This component should be used within a :lang dynamic route context.
+ *
+ * @example
+ * ```tsx
+ * // When current language is 'en' and to="/about"
+ * // The actual link will be "/en/about"
+ * <I18nLink to="/about">About</I18nLink>
+ *
+ * // When current language is 'zh' and to="/"
+ * // The actual link will be "/zh"
+ * <I18nLink to="/">Home</I18nLink>
+ * ```
+ */
+// Use static imports to avoid breaking router tree-shaking. Detect router context via useInRouterContext.
+const useRouterHooks = () => {
+  const inRouter = useInRouterContext();
+  return {
+    Link: inRouter ? Link : null,
+    params: inRouter ? useParams() : ({} as any),
+    hasRouter: inRouter,
+  };
+};
+
+export const I18nLink: React.FC<I18nLinkProps> = ({
+  to,
+  children,
+  ...props
+}) => {
+  const { Link, params, hasRouter } = useRouterHooks();
+  const { language, supportedLanguages } = useModernI18n();
+
+  // Get the 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 currentLang = language;
+
+  // Build the localized URL by adding language prefix
+  const localizedTo = buildLocalizedUrl(to, currentLang, supportedLanguages);
+
+  // In development mode, warn if used outside of :lang route context
+  if (process.env.NODE_ENV === 'development' && hasRouter && !params.lang) {
+    console.warn(
+      'I18nLink is being used outside of a :lang dynamic route context. ' +
+        'This may cause unexpected behavior. Please ensure I18nLink is used within a route that has a :lang parameter.',
+    );
+  }
+
+  // If router is not available, render as a regular anchor tag
+  if (!hasRouter || !Link) {
+    return (
+      <a href={localizedTo} {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link to={localizedTo} {...props}>
+      {children}
+    </Link>
+  );
+};
+
+export default I18nLink;