@modern-js/main-doc 2.67.5 → 2.67.6

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

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" />

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

@@ -1,6 +1,5 @@
 ---
 title: filename
-configName: output.filename
 ---
 
 :::warning
@@ -57,6 +56,6 @@ const prodDefaultFilename = {
 
 Sets the filename of dist files.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.filename" />

package/docs/en/configure/app/output/inject-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: injectStyles
-configName: output.injectStyles
 ---
 
 # output.injectStyles
@@ -10,6 +9,6 @@ configName: output.injectStyles
 
 Whether to inject styles into DOM.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.injectStyles" />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineScripts
-configName: output.inlineScripts
 ---
 
 # output.inlineScripts
@@ -29,6 +28,6 @@ Whether to inline output scripts files (.js files) into HTML with `<script>` tag
 When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineScripts" />

package/docs/en/configure/app/output/inline-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineStyles
-configName: output.inlineStyles
 ---
 
 # output.inlineStyles
@@ -29,6 +28,6 @@ Whether to inline output style files (.css files) into HTML with `<style>` tags.
 When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineStyles" />