Modern.js Documentation

@modern-js/plugin-i18n is the internationalization plugin for Modern.js. It is built on top of i18next and react-i18next to provide a seamless i18n experience within the Modern.js framework.

Key features include:

• Framework Integration: Handles SSR (Server-Side Rendering) language passing and automatic route prefix handling.
• Core Translation: Leverages i18next for functions like t(), interpolation, plurals, and namespaces.
• React Integration: Leverages react-i18next to provide React components and Hooks (e.g., useTranslation) that work with the React lifecycle.

Modern.js is a progressive web framework based on React designed to provide high-performance development and user experiences. It is built to support both Client-Side Rendering (CSR) and Server-Side Rendering (SSR) as first-class citizens.

Key features include:

• Rust Bundler: Uses Rsbuild/Rspack for high-speed compilation.
• Progressive Development: Start with streamlined templates and gradually enable features via generators.
• Isomorphic Development: Unified development and production environments for CSR and SSR, with API service calls treated as functions as interfaces.
• Convention Routing: Supports file-based routing for rapid application setup.

By default, Modern.js compiles files into a dist directory at the project root. The structure is organized by file type:

• HTML files: Output to dist/html/[name]/index.html.
• JS files: Output to dist/static/js/[name].[hash].js.
• CSS files: Output to dist/static/css/[name].[hash].css.
• License files: Generated alongside JS files with a .LICENSE.txt suffix.
• Source Map files: Generated alongside JS and CSS files with a .map suffix.

[name] refers to the entry name (e.g., index, main), and [hash] is a content-based hash.

Modern.js uses three distinct types of configuration depending on when and where they are applied:

1. Compile configuration: Configures the build process. Can be defined in modern.config.(ts|js|mjs) at the project root or in the package.json file under the modernConfig field.
2. Runtime configuration: Configured in src/modern.runtime.(ts|js|mjs).
3. Server Runtime configuration: Configured in server/modern.server.(ts|js|mjs).

Note: Do not configure the same item in both package.json and modern.config.ts simultaneously, as this will cause conflicts and warnings.

Rspress is a framework designed for building high-performance documentation sites. Key features include:

• Rspack-based build: Extremely fast project builds and HMR (Hot Module Replacement).
• MDX Support: Allows embedding React components and JSX syntax directly within Markdown files.
• Full-text Search: Built-in search functionality powered by FlexSearch.
• Internationalization (i18n): Supports multi-language documentation switching and multi-language content search.
• Customizable Themes: Includes a default theme that can be extended or replaced with a custom one.
• Plugin System: Provides rich plugin hooks for framework customization.

Note: Rspress is currently in beta. You can find the source code in the Rspress repository.

Modern.js Module is a specialized toolset for developing, debugging, and publishing npm packages. It provides a professional workflow with the following core capabilities:

• Build Capabilities: An esbuild-based build tool that supports type generation and highly customizable build outputs.
• Debugging Capabilities: Integration with Storybook to test component functionality and verify the usability of build artifacts.
• Version Management: Uses Changeset to provide commands for managing the entire lifecycle from development to release.
• Extensibility: A plugin mechanism with rich Hooks to extend debugging capabilities or customize development workflows.