@modern-js/main-doc 2.33.1 → 2.35.0

package/docs/en/apis/app/hooks/config/public.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 ---
 # public/
 
-Any static resource files can be placed in the `public/` directory, and the files will be deployed to the corresponding application domain by the server.
+Any static assets can be placed in the `public/` directory, and the files will be deployed to the corresponding application domain by the server.
 
 ## Description
 
@@ -19,7 +19,7 @@ For example, authentication files required by third-party systems such as `robot
 Or SDKs for other business parties (requiring unchanged routing), or HTML files without entry.
 
 :::info
-For static resources (such as SVG images) that need to be imported through import in the source code, it is recommended to manage them in the `src/assets` directory.
+For static assets (such as SVG images) that need to be imported through import in the source code, it is recommended to manage them in the `src/assets` directory.
 
 :::
 

package/docs/en/apis/app/hooks/config/upload.mdx

@@ -4,13 +4,13 @@ sidebar_position: 4
 ---
 # upload/
 
-Any static resource files can be placed in the `upload/` directory.
+Any static assets can be placed in the `upload/` directory.
 
 ## Description
 
-In the development environment, the static resource files in this directory will be hosted under the `/upload` path. After building the application, the files in this directory will be copied to the dist directory.
+In the development environment, the static assets in this directory will be hosted under the `/upload` path. After building the application, the files in this directory will be copied to the dist directory.
 
-This file convention is mainly used for developers to use plugins to proactively upload static resource files to the CDN.
+This file convention is mainly used for developers to use plugins to proactively upload static assets to the CDN.
 
 ## Scenarios
 

package/docs/en/components/tech-stack-node-framework.mdx

@@ -0,0 +1 @@
+Modern.js supports [Express.js](https://expressjs.com/) and [Koa.js](https://koajs.com/) as optional BFF runtime frameworks. Please refer to the [BFF - Frameworks](/guides/advanced-features/bff/frameworks.html) for more information.

package/docs/en/configure/app/server/ssr.mdx

@@ -28,6 +28,8 @@ When the value type is `Object`, the following properties can be configured:
 - `mode`: `string = 'string'`, which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering.
 - `forceCSR`: `boolean = false`, which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page.
 - `inlineScript`: `boolean = true`, by default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables.
+- `disablePrerender`: `boolean = fasle`, To ensure compatibility with the old data request method (`useLoader`), by default, Modern.js performs pre-rendering of components.
+  However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/source/config-dir.mdx

@@ -7,11 +7,11 @@ sidebar_label: configDir
 - **Type:** `string`
 - **Default:** `./config`
 
-Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static resources, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html).
+Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static assets, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html).
 
 This option allows you to customize the directory of the configuration files.
 
-For example, adjust the resource file directory to the `resources` directory:
+For example, adjust the assets directory to the `resources` directory:
 
 ```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

package/docs/en/guides/advanced-features/eslint.mdx

@@ -71,7 +71,7 @@ If the project does have special requirements or inevitable compatibility issues
 
 ### `src/.eslintrc.js`
 
-The application project and module project of Modern.js will have this configuration file by default in the source code directory, which is designed for Universal JS code.
+Modern.js Framework or Modern.js Module project will have this configuration file by default in the source code directory, which is designed for Universal JS code.
 
 :::info
 Universal JS code is code that can run on both the browser side and the server side.

package/docs/en/guides/basic-features/alias.mdx

@@ -4,64 +4,25 @@ sidebar_position: 3
 
 # Path Alias
 
-Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
+import Alias from '@modern-js/builder-doc/docs/en/shared/alias';
 
-```js
-{
-  '@': '<appDirectory>/src',
-  '@shared': '<appDirectory>/shared',
-}
-```
-
-:::info
-When enabling optional features, the `new` command will also dynamically add built-in alias specific to the features. For example, when enabling BFF, the `@api` alias is added by default.
+<Alias />
 
-:::
+## Default Aliases
 
-For example, importing modules from the `src/common` directory in the `src/App.tsx` file:
-
-```bash
-.
-├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
-└── App.tsx
-```
-
-The code in `src/App.tsx` is as follows:
-
-```ts
-import utils from '@/src/common/utils';
-import '@/src/common/styles/base.css';
-```
-
-Modern.js also provides a way to customize alias. For example, adding the `@common` alias is as follows:
-
-For TypeScript projects, just set `compilerOptions.paths` in the project's `tsconfig.json`:
+The Modern.js framework comes with the following aliases built-in:
 
 ```json
 {
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/common/*": ["./src/common/*"]
-    }
-  }
+  "@": "./src",
+  "@shared": "./shared"
 }
 ```
 
-For JavaScript projects, set `source.alias` in `modern.config.js`:
+Additionally, when the BFF plugin of the framework is enabled, the `@api` alias is automatically added.
 
-```ts title="modern.config.js"
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
+```json
+{
+  "@api": "./api"
+}
 ```
-
-For the specific usage of alias configuration, please refer to the [source.alias documentation](/configure/app/source/alias).

package/docs/en/guides/basic-features/env-vars.mdx

@@ -10,7 +10,7 @@ Modern.js provides support for environment variables, including built-in environ
 
 ### ASSET_PREFIX
 
-The current path prefix of the resource file, which is a read-only environment variable.
+The current path prefix of the asset, which is a read-only environment variable.
 
 ### NODE_ENV
 

package/docs/en/guides/basic-features/routes.mdx

@@ -480,9 +480,9 @@ In conventional routing, Modern.js automatically splits routes into chunks based
 
 However, this also brings a problem: if the chunk corresponding to the route has not finished loading when the user visits the route, a white screen will appear.
 
-In this case, you can define a `Loading` component to display a custom `Loading` component before the static resources are loaded.
+In this case, you can define a `Loading` component to display a custom `Loading` component before the static assets are loaded.
 
-To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data.
+To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static assets and data.
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -502,10 +502,10 @@ The `prefetch` attribute has three optional values:
 
 #### FAQ
 
-1. What is the difference between using `render` and not splitting static resources based on the route?
+1. What is the difference between using `render` and not splitting static assets based on the route?
 
 - By using `render`, you can specify which routes to load during the initial screen, and you can control the rendering so that only when the `Link` component enters the visible area, the `Link` component will be rendered.
-- By using `render`, static resources will only be loaded when the system is idle, and will not compete with the static resources of the initial screen for network resources.
+- By using `render`, static assets will only be loaded when the system is idle, and will not compete with the static assets of the initial screen for network assets.
 - In the SSR scenario, data will also be pre-fetched.
 
 import Motivation from '@site-docs-en/components/convention-routing-motivation'

package/docs/en/guides/concept/builder.mdx

@@ -42,6 +42,6 @@ For detailed information about build configuration, please refer to [「Modern.j
 
 ## Builder Capabilities
 
-Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
+Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
 We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.

package/docs/en/guides/get-started/glossary.mdx

@@ -64,7 +64,7 @@ With SSR, the server generates HTML that already contains dynamic content and se
 
 SSG stands for "Static Site Generation". It means that web pages are pre-rendered as static HTML and served directly to the client, without the need for the server to generate HTML in real-time.
 
-In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static resource service.
+In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static assets service.
 
 Compared to traditional SSR, SSG can provide faster loading speeds and less server-side overhead, as there is no need to maintain a server to generate HTML in real-time. However, SSG is not suitable for websites that require dynamic content, as the HTML is generated during the build process and does not support real-time updates.
 

package/docs/en/guides/get-started/introduction.mdx

@@ -66,6 +66,26 @@ It mainly includes the following features:
 - 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, Monorepo solutions, and other peripheral needs.
 - 🕸 **Routing Modes**: Includes self-controlled routing, file-convention-based routing (nested routing), etc.
 
-## Next
+## Comparison with Others
+
+### Next.js
+
+Next.js is one of the most popular React frameworks in the community. It is developed by Vercel.
+
+Next.js defaults to using React Server Components, which means **you will need to render your web application on the server and pay for the server-side rendering costs**. In addition, Server Components is not yet a stable technology, and many popular React libraries in the community have not yet finished adapting to RSC. At this stage, you may need to use the Next.js's Pages Router to avoid issues caused by Server Components.
+
+If you want to build a single-page application (SPA) and render it on the client side, Next.js may not be the best choice because many of its features are designed around server-first principles. If you need to use client-side rendering, you can only use limited functionality through Next.js's "static exports" feature.
+
+On the other hand, Modern.js considers both client-side rendering (CSR) and server-side rendering (SSR) to be equally important. When you build a Modern.js application, it defaults to client-side rendering, and you don't need to understand the uses and limitations of Server Components. You can also enable SSR whenever you need it, and even enable SSR for specific pages. The whole process is fully progressive. Please note that Modern.js does not currently support Server Components. We will continue to monitor its potential and provide support when appropriate.
+
+### Umi
+
+Umi is a popular React framework in the Chinese community and serves as the underlying frontend framework for the Ant Group. Modern.js and Umi share many similarities, such as support for plugin system, convention-based routing, and micro-generators.
+
+**The main difference between Modern.js and Umi is their approach to optimizing build speed**. Umi uses MFSU technology to improve build speed, while Modern.js uses Rspack to achieve 5 to 10 times faster build speed. From our perspective, Rust tools like Rspack are more in line with the long-term evolution of the front-end toolchain, as they can strike a good balance between performance, stability, and ecosystem compatibility.
+
+In addition, Modern.js provides richer server-side features, including comprehensive SSR capabilities, integrated BFF development capabilities, and support for custom web servers. These capabilities have been extensively validated by ByteDance in numerous online applications and can be directly used in production environments.
+
+## Next Step
 
 If you want to learn how to use the Modern.js framework, you can try to [create your first application](/tutorials/first-app/c01-start), or read the [Quick Start](/guides/get-started/quick-start) guide.

package/docs/en/guides/get-started/tech-stack.mdx

@@ -0,0 +1,138 @@
+---
+sidebar_position: 4
+---
+
+# Tech Stack
+
+The Modern.js framework comes with built-in popular libraries and development tools from the community.
+
+In this document, you can learn about the main technology stack involved in the Modern.js framework, as well as some optional libraries and tools.
+
+---
+
+## UI Library
+
+Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
+
+The underlying Builder of Modern.js also supports building Vue applications. If you need to use Vue, you can refer to ["Building Vue App"](https://modernjs.dev/builder/en/guide/framework/vue3.html).
+
+---
+
+## Routing
+
+Modern.js uses [React Router 6](https://reactrouter.com/en/main) for routing and is also compatible with React Router 5.
+
+Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/en/guides/basic-features/routes) to make your choice.
+
+---
+
+## Micro Frontends
+
+Modern.js provides out-of-the-box support for the [Garfish](https://www.garfishjs.org/) micro frontend framework.
+
+We are also working with Zack Jackson, the author of [Module Federation](https://webpack.js.org/concepts/module-federation/), to provide a more comprehensive solution.
+
+---
+
+## State Management
+
+Modern.js can be used with any community state management library, such as [Redux](https://redux.js.org/), [Jotai](https://jotai.org/), [Zustand](https://docs.pmnd.rs/zustand), [Valtio](https://valtio.pmnd.rs/), and more.
+
+Modern.js also provides a wrapper around Redux called Reduck for state management. You can refer to ["Reduck State Management"](/en/guides/topic-detail/model/quick-start) for usage.
+
+---
+
+## Package Manager
+
+Modern.js can be used with any community package manager, such as [npm](https://www.npmjs.com/package/npm), [yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/), or [Bun](https://bun.sh/).
+
+We recommend using pnpm for faster installation speed.
+
+---
+
+## Bundler
+
+Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://www.rspack.dev/) to bundle your web applications.
+
+The default bundler used is Webpack 5. You can refer to ["Using Rspack"](/en/guides/advanced-features/rspack-start) to switch to the faster Rspack.
+
+---
+
+## Transpiler
+
+Modern.js uses [Babel](https://babeljs.io/), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
+
+- When using Webpack for bundling, the default tool is Babel, which can be switched to SWC or esbuild.
+- When using Rspack for bundling, the default tool is SWC, which can be switched to Babel.
+
+---
+
+## Minimizer
+
+During production builds, Modern.js uses [Terser](https://github.com/terser/terser), [SWC](https://swc.rs/), or [esbuild](https://esbuild.github.io/) to minify JavaScript code, and [cssnano](https://cssnano.co/) to minify CSS code.
+
+- When using Webpack for bundling, the default tool for minifying JS code is Terser, which can be switched to SWC or esbuild.
+- When using Rspack for bundling, the default tool for minifying JS code is SWC, and switching to other tools is not currently supported.
+
+---
+
+## CSS Transformer
+
+Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables [autoprefixer](https://github.com/postcss/autoprefixer) by default to add CSS prefixes.
+
+Modern.js supports enabling ["Tailwind CSS"](/en/guides/basic-features/css.html#using-tailwind-css) and is compatible with both Tailwind CSS v2 and v3.
+
+---
+
+## CSS Preprocessors
+
+Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
+
+- Sass and Less are supported by default and ready to use.
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://modernjs.dev/builder/en/plugins/plugin-stylus.html).
+
+---
+
+## CSS Modules
+
+Modern.js provides out-of-the-box support for [CSS Modules](https://github.com/css-modules/css-modules), which is implemented internally based on [css-loader](https://www.npmjs.com/package/css-loader).
+
+Please refer to ["Use CSS Modules"](https://modernjs.dev/builder/en/guide/basic/css-modules.html) for usage instructions.
+
+---
+
+## CSS-in-JS
+
+Modern.js supports the use of [styled-components](https://styled-components.com/). Please refer to ["Using CSS-in-JS"](/en/guides/basic-features/css.html#using-css-in-js) for usage instructions.
+
+If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.
+
+---
+
+## Testing Framework
+
+Modern.js supports the use of [Jest](https://jestjs.io/) for unit testing or integration testing. This feature is optional. Please refer to ["Using Jest"](/en/guides/advanced-features/testing) to enable it.
+
+If you need to use [Vitest](https://vitest.dev/) or other testing frameworks, you can integrate them into your project on your own.
+
+---
+
+## UI Components
+
+Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.
+
+Additionally, Modern.js provides built-in support for [on-demand import](/configure/app/source/transform-import) of Ant Design and Arco Design.
+
+---
+
+## Component Development
+
+Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/en/guides/advanced-features/using-storybook) to enable it.
+
+---
+
+## Node.js Framework
+
+import TechStackNodeFramework from '@site-docs-en/components/tech-stack-node-framework';
+
+<TechStackNodeFramework />

package/docs/en/guides/topic-detail/changesets/add.mdx

@@ -22,7 +22,7 @@ A changeset includes:
 The following example commands are all using pnpm. If you need to use other package managers, please replace them as needed.
 :::
 
-### NPM Module
+### Modern.js Module
 
 #### Run the change command in the root directory:
 

package/docs/en/guides/topic-detail/changesets/changelog.mdx

@@ -160,11 +160,11 @@ Configure `changlog` as `./my-changelog-config.js`:
 }
 ```
 
-### Using Npm Module
+### Using Modern.js Module
 
-Customizing changelog can also be managed using the NPM module project to provide a common solution.
+Customizing changelog can also be managed using the Modern.js Module to provide a common solution.
 
-#### Use `npx @modern-js/create@latest` to create a module project.
+#### Use `npx @modern-js/create@latest` to create a Modern.js Module.
 
 ```md
 ? Please select the type of project you want to create: Npm Module

package/docs/en/guides/topic-detail/changesets/commit.mdx

@@ -191,11 +191,11 @@ Configure `commit` as `./my-commit-config.js`:
 }
 ```
 
-### Using NPM Module
+### Using Modern.js Module
 
-Customizing commit can also be managed using the NPM module project to provide a common solution.
+Customizing commit can also be managed using the Modern.js Module to provide a common solution.
 
-#### Use `npx @modern-js/create@latest` to create a module project
+#### Use `npx @modern-js/create@latest` to create a mModern.js Module
 
 ```md
 ? Please select the type of project you want to create: Npm Module

package/docs/en/guides/topic-detail/changesets/release-note.mdx

@@ -204,11 +204,11 @@ You can also define the command parameters directly in `package.json`:
 
 Run the command `pnpm run gen-release-note` directly.
 
-### Using NPM Module
+### Using Modern.js Module
 
-Customizing release note can also be managed using the NPM module project to provide a common solution.
+Customizing release note can also be managed using the Modern.js Module to provide a common solution.
 
-#### Use `npx @modern-js/create@latest` to create a module project
+#### Use `npx @modern-js/create@latest` to create a Modern.js Module
 
 ```md
 ? Please select the type of project you want to create: Npm Module

package/docs/en/guides/topic-detail/changesets/release.mdx

@@ -13,7 +13,7 @@ The following example commands are all using pnpm. If you need to use other pack
 
 :::
 
-### Npm Module
+### Modern.js Module
 
 #### Run the bump command in the root directory
 

package/docs/en/guides/topic-detail/framework-plugin/implement.mdx

@@ -33,7 +33,7 @@ In addition, plugins allow configuration of the execution order with other plugi
 
 ### Plugin Types
 
-Modern.js supports various types of project development, such as application development (`app-tools`), module development (`module-tools`), etc.
+Modern.js supports various types of project development, such as application development (Modern.js Framework), module development (Modern.js Module), etc.
 
 To balance the differences and commonalities between various types of project development, Modern.js organizes plugins as shown in the following figure:
 
@@ -203,9 +203,9 @@ export default defineConfig({
 
 ### Publishing a Plugin on npm
 
-If you want to publish your Modern.js plugin on npm, it's recommended to use the module project solution provided by Modern.js to manage and build the plugin.
+If you want to publish your Modern.js plugin on npm, it's recommended to use the [Modern.js Module](https://modernjs.dev/module-tools) to manage and build the plugin.
 
-First, create an empty module project solution and adjust the package name:
+First, create an empty Modern.js Module project and adjust the package name:
 
 ```json
 {
@@ -214,7 +214,7 @@ First, create an empty module project solution and adjust the package name:
 }
 ```
 
-create plugin main file:
+Create plugin main file:
 
 ```ts title=src/index.ts
 import type { CliPlugin } from '@modern-js/core';

package/docs/en/guides/topic-detail/generator/create/use.mdx

@@ -48,19 +48,11 @@ npx @modern-js/create@latest npm-module
 ? Please select the package manager: pnpm
 ```
 
-### Create a Modern Doc Project
-
-```bash
-npx @modern-js/create@latest doc-website
-? Please select the type of project you want to create: Doc Site
-? Please select the package manager: pnpm
-```
-
 ### Create Monorepo Project
 
 ```bash
 npx @modern-js/create@latest monorepo
-? Please select the type of project you want to create: Doc Site
+? Please select the type of project you want to create: Monorepo
 ? Please select the package manager: pnpm
 ```
 

package/docs/en/guides/topic-detail/generator/plugin/context.md

@@ -25,7 +25,7 @@ Only some APIs are briefly explained below. For the complete API, please refer t
 
 ## Customize Input
 
-Both Modern.js Web App and Npm Module schemes have default input interactions. These APIs can be used to add, modify, hide, and provide default values for these inputs.
+Both Modern.js Framework and Modern.js Module have default input interactions. These APIs can be used to add, modify, hide, and provide default values for these inputs.
 
 For example:
 

package/docs/en/tutorials/examples/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Examples",
+  "position": 3,
+  "collapsed": false
+}