@modern-js/app-tools 3.9.3 → 3.10.0

package/docs/guides/basic-features/routes/config-routes.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Config Routes
 
 By default, Modern.js recommends using [Convention Routes](/guides/basic-features/routes/routes.md) as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
@@ -17,13 +19,11 @@ Config routes are particularly useful in the following scenarios:
 In the `src` directory or each entry directory, you can define a `modern.routes.ts` file to configure routes:
 
 ```ts
-import { defineRoutes } from '@modern-js/runtime/config-routes'
+import { defineRoutes } from '@modern-js/runtime/config-routes';
 
 export default defineRoutes(({ route, layout, page, $ }, fileRoutes) => {
-  return [
-    route("home.tsx", "/"),
-  ]
-})
+  return [route('home.tsx', '/')];
+});
 ```
 
 ### Function Signature Description
@@ -69,24 +69,24 @@ The `route` function is a general-purpose route configuration function that auto
 export default defineRoutes(({ route }, fileRoutes) => {
   return [
     // When no child routes, automatically generates page route
-    route("home.tsx", "/"),
-    route("about.tsx", "about"),
+    route('home.tsx', '/'),
+    route('about.tsx', 'about'),
 
     // When has child routes, automatically generates layout route
     // dashboard/layout.tsx needs to contain <Outlet> to render child routes
-    route("dashboard/layout.tsx", "dashboard", [
-      route("dashboard/overview.tsx", "overview"),  // Generated path: /dashboard/overview
-      route("dashboard/settings.tsx", "settings"),  // Generated path: /dashboard/settings
+    route('dashboard/layout.tsx', 'dashboard', [
+      route('dashboard/overview.tsx', 'overview'), // Generated path: /dashboard/overview
+      route('dashboard/settings.tsx', 'settings'), // Generated path: /dashboard/settings
     ]),
 
     // Dynamic routes
-    route("products/detail.tsx", "products/:id"),
+    route('products/detail.tsx', 'products/:id'),
 
     // Multiple paths pointing to the same component
-    route("user/profile.tsx", "user"),
-    route("user/profile.tsx", "profile"),
-  ]
-})
+    route('user/profile.tsx', 'user'),
+    route('user/profile.tsx', 'profile'),
+  ];
+});
 ```
 
 **Use cases**:
@@ -102,12 +102,12 @@ The `layout` function is specifically used to configure layout routes, always ge
 export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
     // Generate layout route with path "/auth", must contain child routes
-    layout("auth/layout.tsx", "auth", [
-      page("auth/login/page.tsx", "login"),      // Generated path: /auth/login
-      page("auth/register/page.tsx", "register"), // Generated path: /auth/register
+    layout('auth/layout.tsx', 'auth', [
+      page('auth/login/page.tsx', 'login'), // Generated path: /auth/login
+      page('auth/register/page.tsx', 'register'), // Generated path: /auth/register
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **Use cases**:
@@ -123,12 +123,12 @@ The `page` function is specifically used to configure page routes, always genera
 ```ts
 export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
-    layout("dashboard/layout.tsx", "dashboard", [
-      page("dashboard/overview.tsx", "overview"),  // Generated path: /dashboard/overview
-      page("dashboard/settings.tsx", "settings"),  // Generated path: /dashboard/settings
+    layout('dashboard/layout.tsx', 'dashboard', [
+      page('dashboard/overview.tsx', 'overview'), // Generated path: /dashboard/overview
+      page('dashboard/settings.tsx', 'settings'), // Generated path: /dashboard/settings
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **Use cases**:
@@ -144,13 +144,13 @@ The `$` function is specifically used to configure wildcard routes for handling
 ```ts
 export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
   return [
-    layout("blog/layout.tsx", "blog", [
-      page("blog/page.tsx", ""),                    // Generated path: /blog
-      page("blog/[id]/page.tsx", ":id"),            // Generated path: /blog/:id
-      $("blog/$.tsx", "*"),                         // Wildcard route, matches all unmatched paths under /blog
+    layout('blog/layout.tsx', 'blog', [
+      page('blog/page.tsx', ''), // Generated path: /blog
+      page('blog/[id]/page.tsx', ':id'), // Generated path: /blog/:id
+      $('blog/$.tsx', '*'), // Wildcard route, matches all unmatched paths under /blog
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **Use cases**:
@@ -170,11 +170,11 @@ The `$` function has the same functionality as the `$.tsx` file in convention ro
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
     // Use page function to explicitly specify page route
-    page("home.tsx", "/"),
-    page("about.tsx", "about"),
-    page("contact.tsx", "contact"),
-  ]
-})
+    page('home.tsx', '/'),
+    page('about.tsx', 'about'),
+    page('contact.tsx', 'contact'),
+  ];
+});
 ```
 
 ### Routes Without Path
@@ -186,12 +186,12 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
     // Use layout function to explicitly specify layout route
     // auth/layout.tsx needs to contain <Outlet> to render child routes
-    layout("auth/layout.tsx", [
-      page("login/page.tsx", "login"),
-      page("register/page.tsx", "register"),
+    layout('auth/layout.tsx', [
+      page('login/page.tsx', 'login'),
+      page('register/page.tsx', 'register'),
     ]),
-  ]
-})
+  ];
+});
 ```
 
 The above configuration will generate:
@@ -204,11 +204,11 @@ The above configuration will generate:
 ```ts
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
-    page("user.tsx", "user"),
-    page("user.tsx", "profile"),
-    page("user.tsx", "account"),
-  ]
-})
+    page('user.tsx', 'user'),
+    page('user.tsx', 'profile'),
+    page('user.tsx', 'account'),
+  ];
+});
 ```
 
 ### Dynamic Routes
@@ -219,12 +219,12 @@ Config routes support dynamic route parameters:
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
     // Required parameter
-    page("blog/detail.tsx", "blog/:id"),
+    page('blog/detail.tsx', 'blog/:id'),
 
     // Optional parameter
-    page("blog/index.tsx", "blog/:slug?"),
-  ]
-})
+    page('blog/index.tsx', 'blog/:slug?'),
+  ];
+});
 ```
 
 ## Automatic Route-Related File Discovery
@@ -235,10 +235,10 @@ Config routes automatically discover component-related files without manual conf
 // modern.routes.ts
 export default defineRoutes(({ route }, fileRoutes) => {
   return [
-    route("pages/profile.tsx", "profile"),
-    route("pages/user/detail.tsx", "user/:id"),
-  ]
-})
+    route('pages/profile.tsx', 'profile'),
+    route('pages/user/detail.tsx', 'user/:id'),
+  ];
+});
 ```
 
 Modern.js will automatically find and load:

package/docs/guides/basic-features/routes/routes.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Routing
 
 Modern.js routing is based on [React Router v7](https://reactrouter.com/en/main), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.md#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.

package/docs/guides/basic-features/static-assets/json-files.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Import JSON Files
 
 Modern.js supports import JSON files in code by default. You can use Rsbuild plugins to support importing [YAML](https://yaml.org/) and [Toml](https://toml.io/en/) files and converting them to JSON format.

package/docs/guides/basic-features/static-assets/svg-assets.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Import SVG Assets
 
 Modern.js supports import SVG assets and transform SVG into React components or URLs.

package/docs/guides/basic-features/static-assets/wasm-assets.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Import Wasm Assets
 
 Modern.js supports import WebAssembly assets in code.

package/docs/guides/basic-features/static-assets.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Import Static Assets
 
 Modern.js supports import static assets, including images, fonts, and medias.

package/docs/guides/basic-features/testing/playwright.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Playwright
 
 Playwright is a testing framework that allows you to run tests automatically in Chromium, Firefox, and WebKit environments using a single API. You can use it to **write E2E tests**.
@@ -83,18 +85,18 @@ export default Index;
 Next, add test cases to ensure the links on your pages work properly.
 
 ```ts title="tests/example.spec.ts"
-import { test, expect } from '@playwright/test'
+import { test, expect } from '@playwright/test';
 
 test('should navigate to the about page', async ({ page }) => {
   // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
-  await page.goto('http://localhost:8080/')
+  await page.goto('http://localhost:8080/');
   // Find an element with the text 'About' and click on it
-  await page.click('text=About')
+  await page.click('text=About');
   // The new URL should be "/about" (baseURL is used there)
-  await expect(page).toHaveURL('http://localhost:8080/about')
+  await expect(page).toHaveURL('http://localhost:8080/about');
   // The new page should contain an h1 with "About"
-  await expect(page.locator('h1')).toContainText('About')
-})
+  await expect(page.locator('h1')).toContainText('About');
+});
 ```
 
 ## Run Test Cases

package/docs/guides/basic-features/testing/rstest.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Rstest
 
 [Rstest](https://rstest.rs) is a testing framework developed by the Rspack team and built on top of Rspack for fast test execution.
@@ -119,9 +121,9 @@ test('Page', async () => {
     </Router>,
   );
 
-  await expect.element(
-    page.getByRole('heading', { level: 1, name: 'Home' }),
-  ).toBeVisible();
+  await expect
+    .element(page.getByRole('heading', { level: 1, name: 'Home' }))
+    .toBeVisible();
 });
 ```
 
@@ -231,8 +233,6 @@ For your Agent
 
 Migrate to Rstest
 
-Copy this prompt and send it to your coding agent.
-
 Copy Prompt
 
 Migrate this Modern.js project from Jest or Vitest to Rstest.
@@ -241,10 +241,12 @@ First install and use the migrate-to-rstest skill. If it is not installed, insta
 npx skills add rstackjs/agent-skills --skill migrate-to-rstest
 
 Follow the migrate-to-rstest skill instructions and the official Rstest migration guides:
+
 - Jest: https://rstest.rs/guide/migration/jest
 - Vitest: https://rstest.rs/guide/migration/vitest
 
 Modern.js-specific requirement:
+
 - Install and use @modern-js/adapter-rstest together with @rstest/core.
 - Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
 - Reuse the Modern.js app configuration with extends: withModernConfig().

package/docs/guides/concept/builder.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Build Engine
 
 Modern.js internally encapsulates [Rsbuild](https://v2.rsbuild.rs/), using Rspack as the bundler.

package/docs/guides/concept/entries.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Page Entry
 
 Through this chapter, you can understand the entry conventions in Modern.js and how to customize entries.

package/docs/guides/concept/server.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Web Server
 
 Modern.js provides an integrated Web server for applications that can run in any container environment with Node.js. Whether executing the `dev` command in a local development environment, running the `build && serve` commands in a production environment, or using the official deployment solution, it all runs through this Web server to host the application.

package/docs/guides/get-started/ai-coding-agents.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Modern.js For AI
 
 Modern.js provides a toolkit for AI agents that makes your project agent-ready out of the box, helping you use AI to develop, upgrade, and migrate Modern.js applications more accurately and efficiently.
@@ -10,10 +12,10 @@ AI agents use them to get APIs, config, and conventions that exactly match your
 
 ## AGENTS.md
 
-`AGENTS.md` gives AI coding agents project-level guidance — telling them to read the bundled docs before making changes and to follow Modern.js conventions. A `CLAUDE.md` is generated alongside it, reusing the same guidance for Claude Code via the `@AGENTS.md` import.
+`AGENTS.md` gives AI coding agents project-level guidance — telling them to read the bundled docs before making changes and to follow Modern.js conventions.
 
-- **New projects**: `npx @modern-js/create` generates both files by default; pass `--no-agents-md` to skip them.
-- **Existing projects**: run `npx @modern-js/create --agents-md-only` at the project root to create or update them. Re-run it any time; your own additions are preserved.
+- **New projects**: `npx @modern-js/create` generates `AGENTS.md` by default; pass `--no-agents-md` to skip it.
+- **Existing projects**: run `npx @modern-js/create --agents-md-only` at the project root to create or update `AGENTS.md`. Re-run it any time; your own additions are preserved.
 
 Modern.js only maintains the content inside the `<!-- BEGIN:modernjs-agent-rules -->` markers in `AGENTS.md`; anything you write outside them is left untouched.
 

package/docs/guides/get-started/glossary.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Glossary
 
 ## BFF

package/docs/guides/get-started/introduction.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Introduction to Modern.js
 
 **Modern.js is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.

package/docs/guides/get-started/quick-start.md

@@ -1,10 +1,12 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Quick Start
 
 ## Environment
 
 ### Node.js
 
-Before getting started, you will need to install [Node.js](https://nodejs.org/), and ensure that your Node.js version is not lower than v20.19.5. **We recommend using the LTS version of Node.js 22.**
+Before getting started, you will need to install [Node.js](https://nodejs.org/), and ensure that your Node.js version is not lower than v22.18.0. **We recommend using the LTS version of Node.js 22.**
 
 You can check the currently used Node.js version with the following command:
 
@@ -12,7 +14,7 @@ You can check the currently used Node.js version with the following command:
 node -v
 ```
 
-If you do not have Node.js installed in your current environment, or the installed version is lower than v20.19.5, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install the required version.
+If you do not have Node.js installed in your current environment, or the installed version does not meet this requirement, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install the required version.
 
 Here is an example of how to install the Node.js 22 LTS version via nvm:
 
@@ -90,19 +92,18 @@ npx @modern-js/create@latest myapp
 
 ⚡ Start the development server:
 
-  pnpm start
+  pnpm dev
 ```
 
 Now, the project structure is as follows:
 
 ```
 .
-├── biome.json
 ├── modern.config.ts
 ├── package.json
 ├── README.md
+├── rstack.config.mts
 ├── src
-│   ├── modern-app-env.d.ts
 │   ├── modern.runtime.ts
 │   └── routes
 │       ├── index.css
@@ -111,6 +112,13 @@ Now, the project structure is as follows:
 └── tsconfig.json
 ```
 
+New standalone projects use [Rstack CLI](https://rstack.rs/) for linting and formatting:
+
+```bash
+pnpm check
+pnpm format
+```
+
 ## Development
 
 Run `pnpm run dev` in the project to start the project:

package/docs/guides/get-started/tech-stack.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Tech Stack
 
 The Modern.js framework comes with built-in popular libraries and development tools from the community.

package/docs/guides/get-started/upgrade.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Upgrading
 
 

package/docs/guides/topic-detail/module-federation/application.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Application-Level Modules
 
 Modern.js provides runtime APIs to quickly export application-level Module Federation modules from your application.

package/docs/guides/topic-detail/module-federation/deploy.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Deployment
 
 In general, when deploying a Module Federation application, there are two key points to consider:
@@ -63,9 +65,9 @@ At this point, the `publicPath` defined in the producer's build output `mf-manif
     "name": "remote",
     "publicPath": "https://my-remote-module/"
   },
-  "shared": [ /* xxx */ ],
+  "shared": [/* xxx */],
   "remotes": [],
-  "exposes": [ /* xxx */ ]
+  "exposes": [/* xxx */]
 }
 ```
 

package/docs/guides/topic-detail/module-federation/i18n.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Integrating Internationalization
 
 Modern.js provides the **@modern-js/plugin-i18n** plugin to support internationalization. When using Module Federation, you need to provide corresponding i18n integration solutions for different scenarios (components or applications).

package/docs/guides/topic-detail/module-federation/introduce.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Introduction
 
 Module Federation is an architectural pattern for dividing JavaScript applications, allowing you to share code and resources among multiple JavaScript applications.

package/docs/guides/topic-detail/module-federation/ssr.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Server-Side Rendering
 
 `@module-federation/modern-js-v3` offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.

package/docs/guides/topic-detail/module-federation/usage.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Getting Started
 
 To use Module Federation in Modern.js, we recommend using the official plugin `@module-federation/modern-js-v3`.

package/docs/guides/troubleshooting/builder.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Build FAQ
 
 If you encounter any build-related issues, you can refer to the current document for troubleshooting.

package/docs/guides/troubleshooting/cli.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # CLI FAQ
 
 ### Unable to pass command line arguments correctly when using pnpm?

package/docs/guides/troubleshooting/dependencies.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Dependencies FAQ
 
 ### How to check the actual installed version of a dependency in the project?

package/docs/guides/troubleshooting/hmr.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # HMR FAQ
 
 ### How to troubleshooting HMR ineffective issues?

package/docs/guides/upgrade/config.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Configuration Changes
 
 This document mainly introduces incompatible configuration changes and recommended migration methods when upgrading from Modern.js 2.0 to 3.0.
@@ -22,6 +24,18 @@ server: {
 }
 ```
 
+### dev.lazyCompilation
+
+**Change**: The default value in development has changed. Pure CSR and streaming SSR applications enable lazy compilation by default with `{ imports: true, entries: false }`; applications using string SSR, RSC or SSG keep it disabled by default. This only affects development and does not change production build output.
+
+**Migration Example**: To keep the 2.0 behavior, disable it explicitly:
+
+```typescript
+dev: {
+  lazyCompilation: false;
+}
+```
+
 ## html
 
 ### html.appIcon

package/docs/guides/upgrade/entry.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Entry Changes
 
 This chapter introduces changes related to page entries when upgrading from Modern.js 2.0 to 3.0.

package/docs/guides/upgrade/other.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Other Important Changes
 
 This document introduces other important incompatible changes and related migration instructions when upgrading from Modern.js 2.0 to 3.0.

package/docs/guides/upgrade/overview.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Overview
 
 This guide will help you upgrade from Modern.js 2.0 to Modern.js 3.0.

package/docs/guides/upgrade/tailwindcss.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Tailwind Plugin Changes
 
 Modern.js 3.0 recommends integrating Tailwind CSS through Rsbuild's native approach, no longer relying on the `@modern-js/plugin-tailwindcss` plugin, to fully utilize Rsbuild's more flexible configuration capabilities and better build experience.

package/docs/guides/upgrade/web-server.md

@@ -1,3 +1,5 @@
+> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
+
 # Custom Web Server Changes
 
 This chapter covers upgrades for two types of legacy custom Server APIs:
@@ -21,7 +23,10 @@ These two approaches are mutually exclusive in the legacy version. When migratin
 
 ```typescript
 // Legacy - server/index.ts
-export const unstableMiddleware: UnstableMiddleware[] = [middleware1, middleware2];
+export const unstableMiddleware: UnstableMiddleware[] = [
+  middleware1,
+  middleware2,
+];
 
 // New - server/modern.server.ts
 import { defineServerConfig } from '@modern-js/server-runtime';
@@ -38,13 +43,22 @@ export default defineServerConfig({
 
 ```typescript
 // Legacy
-import type { UnstableMiddleware, UnstableMiddlewareContext } from '@modern-js/server-runtime';
-const middleware: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+import type {
+  UnstableMiddleware,
+  UnstableMiddlewareContext,
+} from '@modern-js/server-runtime';
+const middleware: UnstableMiddleware = async (
+  c: UnstableMiddlewareContext,
+  next,
+) => {
   return c.response.raw('response'); // Will continue rendering even without calling next
 };
 
 // New
-import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+import {
+  defineServerConfig,
+  type MiddlewareHandler,
+} from '@modern-js/server-runtime';
 const middleware: MiddlewareHandler = async (c, next) => {
   await next(); // Must call
   return c.text('response');
@@ -88,7 +102,10 @@ export const afterRender = (ctx, next) => {
 };
 
 // New - server/modern.server.ts
-import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+import {
+  defineServerConfig,
+  type MiddlewareHandler,
+} from '@modern-js/server-runtime';
 
 const renderMiddleware: MiddlewareHandler = async (c, next) => {
   await next(); // Wait for page rendering first
@@ -104,6 +121,8 @@ const renderMiddleware: MiddlewareHandler = async (c, next) => {
 };
 
 export default defineServerConfig({
-  renderMiddlewares: [{ name: 'custom-content-injection', handler: renderMiddleware }],
+  renderMiddlewares: [
+    { name: 'custom-content-injection', handler: renderMiddleware },
+  ],
 });
 ```