chore: add @modern-js/plugin-i18n for locale router

packages/runtime/plugin-i18n/README.md

@@ -0,0 +1,32 @@
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+
+<h1 align="center">Modern.js</h1>
+
+<p align="center">
+  A Progressive React Framework for modern web development.
+</p>
+
+## Getting Started
+
+Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
+
+## Documentation
+
+- [English Documentation](https://modernjs.dev/en/)
+- [中文文档](https://modernjs.dev)
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).
+
+## Credist
+
+Thanks to:
+
+- [@loadable/webpack-plugin](https://github.com/gregberge/loadable-components) to create a webpack plugin prepare for loadable usage in ssr.

packages/runtime/plugin-i18n/modern.config.js

@@ -0,0 +1,5 @@
+const { universalBuildConfig } = require('@scripts/build');
+
+module.exports = {
+  buildConfig: universalBuildConfig,
+};

packages/runtime/plugin-i18n/package.json

@@ -0,0 +1,126 @@
+{
+    "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/runtime/plugin-i18n"
+    },
+    "license": "MIT",
+    "keywords": [
+      "react",
+      "framework",
+      "modern",
+      "modern.js"
+    ],
+    "version": "2.68.1",
+    "engines": {
+      "node": ">=20"
+    },
+    "jsnext:source": "./src/cli/index.ts",
+    "types": "./src/cli/index.ts",
+    "main": "./dist/cjs/cli/index.js",
+    "module": "./dist/esm/cli/index.js",
+    "exports": {
+      ".": {
+        "types": "./dist/types/cli/index.d.ts",
+        "jsnext:source": "./src/cli/index.ts",
+        "default": "./dist/cjs/cli/index.js"
+      },
+      "./package.json": "./package.json",
+      "./cli": {
+        "types": "./dist/types/cli/index.d.ts",
+        "jsnext:source": "./src/cli/index.ts",
+        "default": "./dist/cjs/cli/index.js"
+      },
+      "./runtime": {
+        "types": "./dist/types/runtime/index.d.ts",
+        "jsnext:source": "./src/runtime/index.ts",
+        "default": "./dist/esm/runtime/index.js"
+      },
+      "./server": {
+        "types": "./dist/types/server/index.d.ts",
+        "jsnext:source": "./src/server/index.ts",
+        "default": "./dist/esm/server/index.js"
+      },
+      "./i18n": {
+        "types": "./dist/types/runtime/i18n/index.d.ts",
+        "jsnext:source": "./src/runtime/i18n/index.ts",
+        "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"
+        ]
+      }
+    },
+    "scripts": {
+      "dev": "modern-lib build --watch",
+      "prepublishOnly": "only-allow-pnpm",
+      "new": "modern-lib new",
+      "build": "modern-lib build",
+      "test": "jest"
+    },
+    "dependencies": {
+      "@modern-js/plugin": "workspace:*",
+      "@modern-js/server-runtime": "workspace:*",
+      "@modern-js/types": "workspace:*",
+      "@modern-js/utils": "workspace:*",
+      "@swc/helpers": "^0.5.17"
+    },
+    "peerDependencies": {
+      "react": ">=17",
+      "react-dom": ">=17.0.2",
+      "i18next": ">=25.2.1",
+      "react-i18next": ">=15.5.2",
+      "@modern-js/runtime": "workspace:^2.68.1"
+    },
+    "peerDependenciesMeta": {
+      "i18next": {
+        "optional": true
+      },
+      "react-i18next": {
+        "optional": true
+      }
+    },
+    "devDependencies": {
+      "i18next":"25.2.1",
+      "react-i18next":"15.5.2",
+      "@modern-js/runtime": "workspace:*",
+      "@modern-js/app-tools": "workspace:*",
+      "@scripts/build": "workspace:*",
+      "@scripts/jest-config": "workspace:*",
+      "@testing-library/react": "^13.4.0",
+      "@types/jest": "^29.5.14",
+      "@types/node": "^20",
+      "jest": "^29.7.0",
+      "react": "^19.2.0",
+      "react-dom": "^19.2.0",
+      "ts-jest": "^29.4.5",
+      "ts-node": "^10.9.2",
+      "typescript": "^5"
+    },
+    "sideEffects": false,
+    "publishConfig": {
+      "registry": "https://registry.npmjs.org/",
+      "access": "public",
+      "types": "./dist/types/cli/index.d.ts"
+    }
+  }

packages/runtime/plugin-i18n/src/cli/index.ts

@@ -0,0 +1,47 @@
+import type { AppTools, CliPlugin } from '@modern-js/app-tools';
+import {
+  type LocaleDetectionOptions,
+  getLocaleDetectionOptions,
+} from '../utils/config';
+
+export interface I18nPluginOptions {
+  localeDetection?: LocaleDetectionOptions;
+}
+
+export const i18nPlugin = (
+  options: I18nPluginOptions = {},
+): CliPlugin<AppTools> => ({
+  name: '@modern-js/plugin-i18n',
+  setup: api => {
+    const { localeDetection } = options;
+    api._internalRuntimePlugins(({ entrypoint, plugins }) => {
+      const localeDetectionOptions = localeDetection
+        ? getLocaleDetectionOptions(entrypoint.entryName, localeDetection)
+        : undefined;
+      plugins.push({
+        name: 'i18n',
+        path: '@modern-js/plugin-i18n/runtime',
+        config: {
+          entryName: entrypoint.entryName,
+          localeDetection: localeDetectionOptions,
+        },
+      });
+      return {
+        entrypoint,
+        plugins,
+      };
+    });
+
+    api._internalServerPlugins(({ plugins }) => {
+      plugins.push({
+        name: '@modern-js/plugin-i18n/server',
+        options: {
+          localeDetection,
+        },
+      });
+      return { plugins };
+    });
+  },
+});
+
+export default i18nPlugin;

packages/runtime/plugin-i18n/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;