@modern-js/app-tools 3.9.3 → 3.10.0

package/docs/guides/advanced-features/server-monitor/monitors.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.
+
 # Monitors
 
 Modern.js is a full-stack framework that supports both client-side and server-side development. When server-side rendering (SSR), the framework automatically injects additional logs and metrics during server runtime to help production issue diagnosis.
@@ -129,9 +131,7 @@ const myMonitorPlugin = (): ServerPlugin => ({
           console.log(`[${event.payload.level}] ${event.payload.message}`);
         } else if (event.type === 'timing') {
           // Handle timing events
-          console.log(
-            `Timing: ${event.payload.name} = ${event.payload.dur}ms`,
-          );
+          console.log(`Timing: ${event.payload.name} = ${event.payload.dur}ms`);
         } else if (event.type === 'counter') {
           // Handle counter events
           console.log(`Counter: ${event.payload.name}`);

package/docs/guides/advanced-features/source-build.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.
+
 # Source Code Build Mode
 
 The source code build mode is used in the monorepo development scenario, allowing developers to directly reference the source code of other sub-projects within the monorepo for development.
@@ -138,7 +140,7 @@ At the same time, we need to set `composite` to `true` in the lib project's `tsc
 {
   "compilerOptions": {
     "composite": true
-  },
+  }
 }
 ```
 

package/docs/guides/advanced-features/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
 
 Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
@@ -46,13 +48,13 @@ After creating the file, you can write custom logic in this file.
 
 3. Include `server` directory in `tsconfig.json`
 
-```json5
+```jsonc
 {
   // ...
   "include": [
     // ...
-    "server"
-  ]
+    "server",
+  ],
 }
 ```
 

package/docs/guides/basic-features/alias.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.
+
 # Path Alias
 
 Path aliases allow developers to define aliases for modules, making it easier to reference them in code. This can be useful when you want to use a short, easy-to-remember name for a module instead of a long, complex path.

package/docs/guides/basic-features/css/css-in-js.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.
+
 # Using CSS-in-JS
 
 CSS-in-JS is a technique that allows you to write CSS styles within JS files.

package/docs/guides/basic-features/css/css-modules.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.
+
 # Use CSS Modules
 
 [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.

package/docs/guides/basic-features/css/css.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.
+
 # Styling
 
 Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.

package/docs/guides/basic-features/css/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.
+
 # Using Tailwind CSS
 
 [Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.

package/docs/guides/basic-features/data/data-cache.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.
+
 # Data Caching
 
 The `cache` function allows you to cache the results of data fetching or computation, Compared to full-page [rendering cache](/guides/basic-features/render/ssr-cache.md), it provides more fine-grained control over data granularity and is applicable to various scenarios such as Client-Side Rendering (CSR), Server-Side Rendering (SSR), and API services (BFF).

package/docs/guides/basic-features/data/data-fetch.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.
+
 # Data Fetching
 
 Modern.js provides out-of-the-box data fetching capabilities. Developers can use these APIs to fetch data in their projects. It's important to note that these APIs do not help the application make requests but assist developers in managing data better and improving project performance.
@@ -20,9 +22,7 @@ Modern.js recommends managing routes using [conventional routing](/guides/basic-
 In the `routes/user/page.data.ts` file, you can export a Data Loader function:
 
 ```ts title="routes/user/page.data.ts"
-export type ProfileData = {
-  /*  some types */
-};
+export type ProfileData = {/*  some types */};
 
 export const loader = async (): Promise<ProfileData> => {
   const res = await fetch('https://api/user/profile');

package/docs/guides/basic-features/data/data-write.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.
+
 # Data Writing
 
 In the [Data Fetching](/guides/basic-features/data/data-fetch.md) section, we introduced how Modern.js fetches data. This might bring up two questions:
@@ -38,7 +40,7 @@ import {
   useFetcher,
   useLoaderData,
   useParams,
-  Outlet
+  Outlet,
 } from '@modern-js/runtime/router';
 
 export default () => {
@@ -46,23 +48,21 @@ export default () => {
   const { submit } = useFetcher();
   const editUser = () => {
     const newUser = {
-      name: 'Modern.js'
-    }
+      name: 'Modern.js',
+    };
     return submit(newUser, {
       method: 'post',
       encType: 'application/json',
-    })
-  }
+    });
+  };
   return (
     <div>
       <button onClick={editUser}>edit user</button>
-      <div className="user-profile">
-        {userInfo}
-      </div>
+      <div className="user-profile">{userInfo}</div>
       <Outlet context={userInfo}></Outlet>
     </div>
-  )
-}
+  );
+};
 ```
 
 After executing `submit`, the defined `action` function will be triggered. You can get the submitted data from the [parameters](/guides/basic-features/data/data-write.md#parameters) in the `action` function and ultimately send the data to the server.
@@ -119,14 +119,14 @@ useSubmit:
 
 ```ts
 const submit = useSubmit();
-submit(null, { method: "post", action: "/logout" });
+submit(null, { method: 'post', action: '/logout' });
 ```
 
 useFetcher:
 
 ```ts
 const { submit } = useFetcher();
-submit(null, { method: "post", action: "/logout" });
+submit(null, { method: 'post', action: '/logout' });
 ```
 
 The `submit` function takes two parameters. The first parameter is the `formData` passed to the server. The second parameter is an optional object where:
@@ -148,7 +148,7 @@ For example, `FormData`:
 
 ```ts
 let formData = new FormData();
-formData.append("cheese", "gouda");
+formData.append('cheese', 'gouda');
 submit(formData);
 // In the action, you can get the data by request.json
 ```
@@ -157,7 +157,7 @@ or `URLSearchParams`:
 
 ```ts
 let searchParams = new URLSearchParams();
-searchParams.append("cheese", "gouda");
+searchParams.append('cheese', 'gouda');
 submit(searchParams);
 // In the action, you can get the data by request.json
 ```
@@ -165,10 +165,10 @@ submit(searchParams);
 or any value that the `URLSearchParams` constructor accepts:
 
 ```ts
-submit("cheese=gouda&toasted=yes");
+submit('cheese=gouda&toasted=yes');
 submit([
-  ["cheese", "gouda"],
-  ["toasted", "yes"],
+  ['cheese', 'gouda'],
+  ['toasted', 'yes'],
 ]);
 // In the action, you can get the data by request.json
 ```
@@ -177,11 +177,11 @@ By default, if the first parameter of the `submit` function is an object, the co
 
 ```ts
 submit(
-  { key: "value" },
+  { key: 'value' },
   {
-    method: "post",
-    encType: "application/x-www-form-urlencoded",
-  }
+    method: 'post',
+    encType: 'application/x-www-form-urlencoded',
+  },
 );
 
 // In the action, you can get the data by request.formData
@@ -190,14 +190,11 @@ submit(
 You can also specify the encoding type via the second parameter:
 
 ```tsx
-submit(
-  { key: "value" },
-  { method: "post", encType: "application/json" }
-);
+submit({ key: 'value' }, { method: 'post', encType: 'application/json' });
 
 submit('{"key":"value"}', {
-  method: "post",
-  encType: "application/json",
+  method: 'post',
+  encType: 'application/json',
 });
 
 // In the action, you can get the data by request.json
@@ -206,7 +203,7 @@ submit('{"key":"value"}', {
 or submit plain text:
 
 ```ts
-submit("value", { method: "post", encType: "text/plain" });
+submit('value', { method: 'post', encType: 'text/plain' });
 // In the action, you can get the data by request.text
 ```
 

package/docs/guides/basic-features/debug/mock.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.
+
 # Data Mocking
 
 Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
@@ -98,8 +100,8 @@ type MockConfig = {
 };
 
 export const config = {
-  enable: false
-}
+  enable: false,
+};
 ```
 
 Currently only the `enable` configuration is supported, which allows developers to control whether to execute mock.

package/docs/guides/basic-features/debug/proxy.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.
+
 # Local Proxy
 
 Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server.md).

package/docs/guides/basic-features/debug/rsdoctor.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.
+
 # Using Rsdoctor
 
 Rsdoctor is a Rspack build analysis tool. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.

package/docs/guides/basic-features/debug/using-storybook.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.
+
 # Using Storybook
 
 [Storybook](https://storybook.js.org/) is a tool specifically designed for component debugging. It provides:
@@ -46,14 +48,14 @@ You need to install `@rsbuild/core` in your project, otherwise the plugin may no
 ## Configure `.storybook/main.ts`
 
 ```ts
-import type { StorybookConfig } from 'storybook-react-rsbuild'
+import type { StorybookConfig } from 'storybook-react-rsbuild';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['storybook-addon-modernjs'],
   framework: 'storybook-react-rsbuild',
-}
-export default config
+};
+export default config;
 ```
 
 ## BFF Integrated Calls in Storybook
@@ -68,7 +70,7 @@ Add the following scripts to `package.json` to start the BFF server and Storyboo
 {
   "scripts": {
     "dev:api": "modern dev --api-only",
-    "storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open",
+    "storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
   }
 }
 ```

package/docs/guides/basic-features/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.
+
 # Deploy Application
 
 Currently, Modern.js offers two deployment way:

package/docs/guides/basic-features/env-vars.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.
+
 # Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.

package/docs/guides/basic-features/html.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.
+
 # HTML Template
 
 Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
@@ -15,9 +17,8 @@ For example, consider the following directory structure:
     ├── entry-a
     │   ├── Document.tsx
     │   └── routes
-    ├── entry-b
-    │    └── routes
-    └── modern-app-env.d.ts
+    └── entry-b
+         └── routes
 ```
 
 `entry-a` will use the `Document.tsx` file under the current entry as the template. If there is no `Document.tsx` file under the current entry, like `entry-b`, it will look for the `Document.tsx` file under the root directory.

package/docs/guides/basic-features/output-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.
+
 # Output Files
 
 This chapter will introduces the directory structure of output files and how to control the output directory of different types of files.
@@ -109,7 +111,7 @@ export default {
   },
   html: {
     outputStructure: 'flat',
-  }
+  },
 };
 ```
 

package/docs/guides/basic-features/render/before-render.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.
+
 # Render Preprocessing
 
 In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using **[Runtime Plugins](/plugin/introduction.md#runtime-plugins)** to implement this type of logic.

package/docs/guides/basic-features/render/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.
+
 # Rendering Mode Overview
 
 Modern.js supports multiple rendering modes, and different rendering modes are suitable for different scenarios. Choosing the right rendering mode can significantly improve application performance and user experience.

package/docs/guides/basic-features/render/rsc.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.
+
 # React Server Components (RSC)
 
 React Server Components (RSC) is a new component type that allows components to be rendered in a server environment, bringing better performance and developer experience to modern web applications.
@@ -264,7 +266,11 @@ In Modern.js RSC projects, Server Components can receive data returned by Data L
 
 ```tsx title="routes/user/page.tsx"
 // Server Component receives loaderData through props
-export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+export default function UserPage({
+  loaderData,
+}: {
+  loaderData: { name: string };
+}) {
   return <div>Welcome, {loaderData.name}</div>;
 }
 ```
@@ -272,7 +278,11 @@ export default function UserPage({ loaderData }: { loaderData: { name: string }
 ```tsx title="routes/user/page.tsx"
 'use client';
 // Client Component can also receive loaderData through props
-export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+export default function UserPage({
+  loaderData,
+}: {
+  loaderData: { name: string };
+}) {
   return <div>Welcome, {loaderData.name}</div>;
 }
 ```

package/docs/guides/basic-features/render/ssg.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.
+
 # Static Site Generation
 
 SSG (Static Site Generation) is a technical solution that generates complete static web pages at build time based on data and templates. This means that in a production environment, pages are pre-rendered with content and can be cached by a CDN. SSG can offer better performance and higher security for pages that do not require dynamic data.

package/docs/guides/basic-features/render/ssr-cache.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.
+
 # Rendering Cache
 
 When developing applications, sometimes we cache computation results using hooks like React's `useMemo` and `useCallback`. By leveraging caching, we can reduce the number of computations, thus saving CPU resources and improving user experience.

package/docs/guides/basic-features/render/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
 
 Server-Side Rendering (SSR) generates complete HTML pages on the server and sends them to the browser for direct display, without requiring additional client-side rendering.
@@ -90,7 +92,7 @@ export async function loader({ params }) {
   const data = await res.json();
   return {
     message: data.message,
-  }
+  };
 }
 ```
 
@@ -124,11 +126,7 @@ const Page = () => {
   const undefinedVars = data.unDefined;
   const definedVars = data.defined;
 
-  return (
-    <div>
-      {isNode ? undefinedVars.msg : definedVars.msg}
-    </div>
-  );
+  return <div>{isNode ? undefinedVars.msg : definedVars.msg}</div>;
 };
 
 export default Page;
@@ -212,7 +210,7 @@ document.addEventListener('load', () => {
   console.log('document load');
 });
 
-export const doSomething = () => {}
+export const doSomething = () => {};
 ```
 
 Directly referencing this in a component will cause SSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
@@ -224,8 +222,8 @@ export const Page = () => {
   if (process.env.MODERN_TARGET === 'browser') {
     doSomething();
   }
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 ```
 
 Modern.js supports distinguishing between SSR and CSR bundles by using `.server.` suffix files. You can create `.ts` and `.server.ts` files with the same name to create a proxy:
@@ -241,12 +239,12 @@ export const doSomething: any = () => {};
 Import `./a` in the file, and the SSR bundle will prioritize the `.server.ts` files, while the CSR bundle will prioritize the `.ts` files.
 
 ```tsx title="routes/page.tsx"
-import { doSomething } from './a'
+import { doSomething } from './a';
 
 export const Page = () => {
   doSomething();
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 ```
 
 ## Common Issues

package/docs/guides/basic-features/render/streaming-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.
+
 # Streaming Server-Side Rendering
 
 Streaming rendering is an advanced rendering method that progressively returns content during the page rendering process, significantly improving user experience.
@@ -245,7 +247,8 @@ Set the header in your middleware to choose the behavior dynamically:
 ```ts title="middleware example"
 export const middleware = async (ctx, next) => {
   const ua = ctx.req.header('user-agent') || '';
-  const shouldWaitAll = /Lighthouse|Googlebot/i.test(ua) || ctx.req.path === '/marketing';
+  const shouldWaitAll =
+    /Lighthouse|Googlebot/i.test(ua) || ctx.req.path === '/marketing';
 
   // Write a boolean string: true -> onAllReady, false -> onShellReady
   ctx.req.headers.set('x-should-stream-all', String(shouldWaitAll));