@modern-js/main-doc 2.67.5 → 2.67.7

package/docs/en/apis/app/hooks/server/server.mdx

@@ -0,0 +1,10 @@
+---
+title: modern.server.[tj]s
+sidebar_position: 1
+---
+
+# modern.server.[tj]s
+
+This file extends the Modern.js Server. In this file, you can configure [Middleware](/guides/advanced-features/web-server.html#middleware), [RenderMiddleware](/guides/advanced-features/web-server.html#rendermiddleware), or [Plugin](/guides/advanced-features/web-server.html#plugin) for the Server that starts with the Modern.js project.
+
+You can intercept and handle requests and responses, perform authentication and role checks, preprocess requests, and handle exceptions, etc. You can also insert specific business logic into the built-in processing logic (including route matching, resource addressing, header injection, page rendering, and static web hosting).

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -10,11 +10,11 @@ Conventional routing uses `routes/` as the convention for the entry point and an
 
 Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as the application's routes:
 
-```bash {3,4}
+```bash
 .
 └── routes
-    ├── layout.tsx
-    ├── page.tsx
+    ├── layout.tsx  # [!code highlight]
+    ├── page.tsx # [!code highlight]
     └── user
         ├── layout.tsx
         └── page.tsx
@@ -88,73 +88,3 @@ export default () => {
 `<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::
-
-## Upgrading to React Router v7
-
-React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
-
-:::info
-
-For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
-
-:::
-
-### Requirements
-
-React Router v7 has certain environment requirements:
-
-- Node.js 20+
-- React 18+
-- React DOM 18+
-
-### Install the Plugin
-
-First, install the Modern.js React Router v7 plugin:
-
-```bash
-pnpm add @modern-js/plugin-router-v7
-```
-
-### Configure the Plugin
-
-Register the plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { routerPlugin } from '@modern-js/plugin-router-v7';
-
-export default {
-  runtime: {
-    router: true,
-  },
-  plugins: [routerPlugin()],
-};
-```
-
-### Code Changes
-
-In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
-
-```ts title="routes/page.data.ts"
-import { defer } from '@modern-js/runtime/router';
-
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  const user = fetchUser(params.id)
-  return { user };
-
-  // v6 style, still compatible with Modern.js
-  return defer({ data: 'hello' });
-};
-```
-
-React Router v7 has also deprecated the `json` API:
-
-```ts title="routes/page.data.ts"
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  return { data: 'hello' };
-
-  // v6 style, still compatible with Modern.js
-  return json({ data: 'hello' });
-};
-```

package/docs/en/apis/app/runtime/bff/use-hono-context.mdx

@@ -0,0 +1,30 @@
+---
+title: useHonoContext
+---
+# useHonoContext
+
+Used to obtain Hono context in an integrated BFF function.
+
+## Usage
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+```
+
+## Function Signature
+
+`function useHonoContext(): Context`
+
+## Example
+
+Developers can use `context` to obtain more request information, such as setting response headers:
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+
+export async function get() {
+  const c = useHonoContext();
+  c.res.headers.set('x-bff-api', 'true');
+  // ...
+}
+```

package/docs/en/components/enable-bff.mdx

@@ -9,40 +9,14 @@ import { PackageManagerTabs } from '@theme';
 ```bash
 ? Please select the operation you want to perform Enable optional features
 ? Please select the feature to enable Enable "BFF"
-? Please select BFF type Framework mode
 ```
 
-:::note
-Currently, it is recommended to create BFF in framework mode. We will remove the BFF type concept in the future.
-:::
-
 3. Depending on the chosen runtime framework, add the following code to `modern.config.[tj]s`:
 
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="modern.config.ts"
-import { expressPlugin } from '@modern-js/plugin-express';
-import { bffPlugin } from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [expressPlugin(), bffPlugin()],
-});
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
 ```ts title="modern.config.ts"
-import { koaPlugin } from '@modern-js/plugin-koa';
 import { bffPlugin } from '@modern-js/plugin-bff';
 
 export default defineConfig({
-  plugins: [koaPlugin(), bffPlugin()],
+  plugins: [bffPlugin()],
 });
 ```
-
-  </TabItem>
-</Tabs>

package/docs/en/components/rsbuild-config-tooltip.mdx

@@ -1,5 +1,5 @@
-import RsbuildLInk from '@site/src/components/RsbuildLink';
+import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info
-The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to <RsbuildLInk configName={frontmatter.configName}/>.
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to <RsbuildLink configName={props.configName}/>.
 :::

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

@@ -1 +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.
+Modern.js Server and BFF use [Hono.js](https://hono.dev/) as the runtime framework, and you can extend the Server based on the Hono.js ecosystem. Please refer to [Custom Web Server](/guides/advanced-features/web-server.html).

package/docs/en/configure/app/dev/asset-prefix.mdx

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: dev.assetPrefix
 ---
 
 # dev.assetPrefix
@@ -10,9 +9,9 @@ configName: dev.assetPrefix
 
 This configuration item is used to set the URL prefix of static resources in **development mode**.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.assetPrefix" />
 
 :::warning
 Please note that this configuration item is only applicable in development mode. In production mode, please use the [output.assetPrefix](/configure/app/output/asset-prefix) configuration item for setting.

package/docs/en/configure/app/dev/client.mdx

@@ -1,6 +1,5 @@
 ---
 title: client
-configName: dev.client
 ---
 
 # dev.client
@@ -41,6 +40,6 @@ const defaultConfig = {
 
 Configure the client code injected by Modern.js during the development process. This can be used to set the WebSocket URL for HMR.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.client" />

package/docs/en/configure/app/dev/hmr.mdx

@@ -1,6 +1,5 @@
 ---
 title: hmr
-configName: dev.hmr
 ---
 
 # dev.hmr
@@ -10,6 +9,6 @@ configName: dev.hmr
 
 Whether to enable Hot Module Replacement.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.hmr" />

package/docs/en/configure/app/dev/live-reload.mdx

@@ -1,6 +1,5 @@
 ---
 title: liveReload
-configName: dev.liveReload
 ---
 
 # dev.liveReload
@@ -10,6 +9,6 @@ configName: dev.liveReload
 
 Whether to reload the page when source files are changed.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.liveReload" />

package/docs/en/configure/app/dev/progress-bar.mdx

@@ -1,6 +1,5 @@
 ---
 title: progressBar
-configName: dev.progressBar
 ---
 
 # dev.progressBar
@@ -19,6 +18,6 @@ type ProgressBar =
 
 Whether to display progress bar during compilation.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.progressBar" />

package/docs/en/configure/app/dev/setup-middlewares.mdx

@@ -1,6 +1,5 @@
 ---
 title: setupMiddlewares
-configName: dev.setupMiddlewares
 ---
 
 # dev.setupMiddlewares
@@ -50,6 +49,6 @@ type SetupMiddlewares = Array<
 
 Provides the ability to execute a custom function and apply custom middlewares.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.setupMiddlewares" />

package/docs/en/configure/app/dev/watch-files.mdx

@@ -1,6 +1,5 @@
 ---
 title: watchFiles
-configName: dev.watchFiles
 ---
 
 # dev.watchFiles
@@ -27,6 +26,6 @@ type WatchFilesConfig = WatchFiles | WatchFiles[];
 
 Watch specified files and directories for changes. When a file change is detected, it can trigger a page reload or restart the dev server.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.watchFiles" />

package/docs/en/configure/app/dev/write-to-disk.mdx

@@ -1,6 +1,5 @@
 ---
 title: writeToDisk
-configName: dev.writeToDisk
 ---
 
 # dev.writeToDisk
@@ -10,6 +9,6 @@ configName: dev.writeToDisk
 
 Controls whether the build output from development mode is written to disk.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.writeToDisk" />

package/docs/en/configure/app/html/app-icon.mdx

@@ -1,6 +1,5 @@
 ---
 title: appIcon
-configName: html.appIcon
 ---
 
 # html.appIcon
@@ -50,6 +49,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.appIcon" />

package/docs/en/configure/app/html/crossorigin.mdx

@@ -1,6 +1,5 @@
 ---
 title: crossorigin
-configName: html.crossorigin
 ---
 
 # html.crossorigin
@@ -10,6 +9,6 @@ configName: html.crossorigin
 
 Set the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) attribute of the `<script>` and `<style>` tags.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.crossorigin" />

package/docs/en/configure/app/html/favicon.mdx

@@ -1,6 +1,5 @@
 ---
 title: favicon
-configName: html.favicon
 ---
 
 # html.favicon
@@ -16,6 +15,6 @@ Set the favicon icon path for all pages, can be set as:
 
 After config this option, the favicon will be automatically copied to the dist directory during the compilation, and the corresponding `link` tag will be added to the HTML.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.favicon" />

package/docs/en/configure/app/html/inject.mdx

@@ -1,6 +1,5 @@
 ---
 title: inject
-configName: html.inject
 ---
 
 # html.inject
@@ -10,6 +9,6 @@ configName: html.inject
 
 Set the inject position of the `<script>` tag.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.inject" />

package/docs/en/configure/app/html/meta.mdx

@@ -1,6 +1,5 @@
 ---
 title: meta
-configName: html.meta
 ---
 
 # html.meta
@@ -24,6 +23,6 @@ const defaultMeta = {
 
 Configure the `<meta>` tag of the HTML.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.meta" />

package/docs/en/configure/app/html/mount-id.mdx

@@ -1,6 +1,5 @@
 ---
 title: mountId
-configName: html.mountId
 ---
 
 # html.mountId
@@ -10,6 +9,6 @@ configName: html.mountId
 
 By default, the `root` element is included in the HTML template for component mounting, and the element id can be modified through `mountId`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.mountId" />

package/docs/en/configure/app/html/output-structure.mdx

@@ -1,6 +1,5 @@
 ---
 title: outputStructure
-configName: html.outputStructure
 ---
 
 # html.outputStructure
@@ -10,6 +9,6 @@ configName: html.outputStructure
 
 Define the directory structure of the HTML output files.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.outputStructure" />

package/docs/en/configure/app/html/script-loading.mdx

@@ -1,6 +1,5 @@
 ---
 title: scriptLoading
-configName: html.scriptLoading
 ---
 
 # html.scriptLoading
@@ -10,6 +9,6 @@ configName: html.scriptLoading
 
 Used to set how `<script>` tags are loaded.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.scriptLoading" />

package/docs/en/configure/app/html/tags.mdx

@@ -1,6 +1,5 @@
 ---
 title: tags
-configName: html.tags
 ---
 
 # html.tags
@@ -15,6 +14,6 @@ type TagsConfig = HtmlTag | HtmlTagHandler | Array<HtmlTag | HtmlTagHandler>;
 
 Modifies the tags that are injected into the HTML page.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.tags" />

package/docs/en/configure/app/html/template-parameters.mdx

@@ -1,6 +1,5 @@
 ---
 title: templateParameters
-configName: html.templateParameters
 ---
 
 # html.templateParameters
@@ -33,6 +32,6 @@ type DefaultParameters = {
 
 Define the parameters in the HTML template, corresponding to the `templateParameters` config of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin). You can use the config as an object or a function.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.templateParameters" />

package/docs/en/configure/app/html/template.mdx

@@ -1,6 +1,5 @@
 ---
 title: template
-configName: html.template
 ---
 
 # html.template
@@ -10,6 +9,6 @@ configName: html.template
 
 Specifies the file path for the HTML template, which can be a relative or absolute path.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.template" />

package/docs/en/configure/app/html/title.mdx

@@ -1,6 +1,5 @@
 ---
 title: title
-configName: html.title
 ---
 
 # html.title
@@ -18,6 +17,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.title" />

package/docs/en/configure/app/output/asset-prefix.mdx

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: output.assetPrefix
 ---
 
 # output.assetPrefix
@@ -14,6 +13,6 @@ import OutputAssetPrefixExtend from '@site-docs-en/components/output-asset-prefi
 
 <OutputAssetPrefixExtend />
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.assetPrefix" />

package/docs/en/configure/app/output/charset.mdx

@@ -1,6 +1,5 @@
 ---
 title: charset
-configName: output.charset
 ---
 
 # output.charset
@@ -10,6 +9,6 @@ configName: output.charset
 
 The `charset` config allows you to specify the [character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) for output files to ensure they are displayed correctly in different environments.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.charset" />

package/docs/en/configure/app/output/copy.mdx

@@ -1,6 +1,5 @@
 ---
 title: copy
-configName: output.copy
 ---
 
 # output.copy
@@ -10,6 +9,6 @@ configName: output.copy
 
 Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin).
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.copy" />

package/docs/en/configure/app/output/css-modules.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssModules
-configName: output.cssModules
 ---
 
 # output.cssModules
@@ -48,6 +47,6 @@ const defaultCssModules = {
 
 For custom CSS Modules configuration.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.cssModules" />

package/docs/en/configure/app/output/data-uri-limit.mdx

@@ -1,6 +1,5 @@
 ---
 title: dataUriLimit
-configName: output.dataUriLimit
 ---
 
 # output.dataUriLimit
@@ -26,6 +25,6 @@ const defaultDatUriLimit = 10000;
 
 Set the size threshold to inline static assets such as images and fonts.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.dataUriLimit" />

package/docs/en/configure/app/output/dist-path.mdx

@@ -1,6 +1,5 @@
 ---
 title: distPath
-configName: output.distPath
 ---
 
 # output.distPath
@@ -18,7 +17,6 @@ type DistPathConfig = {
   wasm?: string;
   image?: string;
   media?: string;
-  server?: string;
   worker?: string;
   assets?: string;
 };
@@ -43,6 +41,6 @@ const defaultDistPath = {
 
 Set the directory of the dist files. Modern.js will output files to the corresponding subdirectory according to the file type.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.distPath" />

package/docs/en/configure/app/output/externals.mdx

@@ -1,6 +1,5 @@
 ---
 title: externals
-configName: output.externals
 ---
 
 # output.externals
@@ -20,6 +19,6 @@ type Externals =
 
 At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.externals" />

package/docs/en/configure/app/output/filename-hash.mdx

@@ -1,6 +1,5 @@
 ---
 title: filenameHash
-configName: output.filenameHash
 ---
 
 # output.filenameHash
@@ -10,6 +9,6 @@ configName: output.filenameHash
 
 Whether to add a hash value to the filename after the production build.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.filenameHash" />