@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/en/plugin/introduction.mdx

@@ -0,0 +1,153 @@
+# Introduction
+
+Modern.js provides a powerful plugin system that allows developers to extend the framework's functionality, customize the build process, and meet a variety of personalized development needs. Whether you want to add a custom command, optimize build output, or implement a unique deployment solution, Modern.js's plugin system provides robust support.
+
+## Why Plugins?
+
+In web application development, we often encounter needs that the framework itself cannot directly satisfy, such as:
+
+- **I want to add a custom command-line tool to help me automate some tasks.**
+- **I want to be able to handle a new file format, such as `.xyz`.**
+- **I need to perform some initialization operations before the application starts.**
+- **I want to perform special processing on the generated CSS files.**
+- **I need to customize the application's routing logic or add some server-side middleware.**
+
+Without a plugin system, these requirements might require modifying the framework's source code or resorting to cumbersome hacks. Modern.js's plugin system offers an elegant, flexible, and maintainable solution.
+
+## When to Use Which Plugin?
+
+Modern.js offers two main types of plugins: Modern.js framework plugins and Rsbuild build plugins. The choice of which plugin to use depends on your specific needs:
+
+- **Rsbuild Build Plugins:** If your needs are closely related to the build process, especially involving modifications to Rspack configuration, then you should choose an Rsbuild plugin. For example:
+
+  - Modifying Rspack `loader` or `plugin` configurations.
+  - Handling new file types.
+  - Modifying or compiling file contents.
+  - Optimizing or processing build artifacts.
+
+- **Modern.js Framework Plugins:** If your needs relate to the extension of Modern.js framework itself, runtime behavior, or server-side logic, then you should choose a Modern.js plugin. For example:
+  - Adding custom command-line commands.
+  - Modifying the application's routing configuration.
+  - Customizing the application's rendering process (e.g., SSR).
+  - Adding server-side middleware or handler functions.
+
+In short, use Rsbuild plugins when you need to modify Rspack configurations; use Modern.js plugins for other framework-related extensions.
+
+## Modern.js Framework Plugins
+
+### Plugin Types
+
+Modern.js framework plugins can be further divided into three categories:
+
+#### CLI Plugins
+
+CLI plugins are used to provide additional functionality when running `modern` commands in the application, such as adding commands, modifying configurations, and listening for file changes. Most build-related capabilities can be implemented through CLI plugins.
+
+CLI plugins can be configured via the `plugins` field in `modern.config.ts`.
+
+```ts title="modern.config.ts"
+// an example for bff
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { bffPlugin } from '@modern-js/plugin-bff';
+
+export default defineConfig({
+  plugins: [appTools(), bffPlugin()],
+});
+```
+
+#### Runtime Plugins
+
+Runtime plugins are used to provide additional functionality when the application is running React code, such as performing initialization behaviors and implementing React Higher-Order Component (HOC) encapsulation.
+
+Runtime plugins are configured via the `plugins` field in `src/modern.runtime.ts`.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { routerPlugin } from '@modern-js/runtime/router';
+
+export default defineRuntimeConfig({
+  plugins: [routerPlugin()],
+});
+```
+
+#### Server Plugins
+
+Server plugins are used to provide additional functionality when the application receives requests, such as adding middleware and modifying request responses.
+
+Server plugins are configured via the `plugins` field in `server/modern.server.ts`.
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  plugins: [
+    {
+      name: 'custom-plugin-in-config',
+      setup: api => {
+        api.onPrepare(() => {
+          const { middlewares } = api.getServerContext();
+
+          middlewares?.push({
+            name: 'server-plugin-middleware',
+            handler: async (c, next) => {
+              c.res.headers.set('x-render-middleware-plugin', 'ok');
+              await next();
+            },
+          });
+        });
+      },
+    },
+  ],
+});
+```
+
+### Developing Plugins
+
+If you need to develop Modern.js framework plugins, please read [Modern.js Plugin System](/plugin/plugin-system) for more information.
+
+## Rsbuild Build Plugins
+
+Rsbuild is the underlying build tool for Modern.js. By adding Rsbuild plugins, you can modify the default build behavior and add various additional functionalities, including but not limited to:
+
+- Modifying Rsbuild configuration
+- Handling new file types
+- Modifying or compiling files
+- Deploying artifacts
+
+You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option. See [builderPlugins](/configure/app/builder-plugins.html) for details.
+
+:::info
+You can read [Rsbuild Official Website - Plugins](https://v2.rsbuild.rs/plugins/list/index) to learn more about the Rsbuild plugin system.
+:::
+
+### Official Plugins
+
+#### Built-in Plugins
+
+The following are official Rsbuild plugins that are already built into Modern.js. They can be enabled without installation:
+
+| Plugin                                                                                 | Description                                                                                                                                     | Modern.js Link                                                                                                                        |
+| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React Plugin](https://v2.rsbuild.rs/plugins/list/plugin-react)                        | Provides support for React                                                                                                                      | -                                                                                                                                     |
+| [SVGR Plugin](https://v2.rsbuild.rs/plugins/list/plugin-svgr)                          | Supports converting SVG images into React components                                                                                            | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry Plugin](https://github.com/rstackjs/rsbuild-plugin-assets-retry)          | Automatically retries requests when static asset loading fails                                                                                  | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | Runs TypeScript type checking in a separate process                                                                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates                        | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression                         | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                     | Implements rem adaptive layout for mobile pages                                                                                                 | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+
+#### Plugins Not Built-in
+
+The following are official Rsbuild plugins that are not built into Modern.js:
+
+- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compresses image resources used in the project.
+- [Stylus Plugin](https://v2.rsbuild.rs/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
+- [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build UMD format artifacts.
+- [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Used to reference YAML files and convert them to JavaScript objects.
+- [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Used to reference TOML files and convert them to JavaScript objects.
+
+import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
+
+<OtherPlugins />
+```

package/docs/en/plugin/official/_meta.json

@@ -0,0 +1,7 @@
+[
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  }
+]

package/docs/en/plugin/official/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-bff", "plugin-ssg", "plugin-styled-components"]

package/docs/en/plugin/official/cli-plugins/plugin-bff.mdx

@@ -0,0 +1,5 @@
+# BFF Plugin
+
+In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions using the BFF plugin. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
+
+For more details, refer to [BFF - Basic Usage](/guides/advanced-features/bff/function).

package/docs/en/plugin/official/cli-plugins/plugin-ssg.mdx

@@ -0,0 +1,5 @@
+# SSG Plugin
+
+SSG (Static Site Generation) is a technical solution that renders complete static web pages at build time based on data and templates. This means that in a production environment, pages are populated with content by default and can be cached by a CDN. For pages that do not require dynamic data, SSG can provide better performance and higher security.
+
+For more details, refer to [Static Site Generation (SSG)](/guides/basic-features/render/ssg).

package/docs/en/plugin/official/cli-plugins/plugin-styled-components.mdx

@@ -0,0 +1,5 @@
+# Styled Components Plugin
+
+In a Modern.js application, developers can use the Styled Components plugin to utilize the styled-components library within the app, enabling CSS-in-JS functionality.
+
+For more details, please refer to [Using CSS-in-JS](/guides/basic-features/css/css-in-js).

package/docs/en/plugin/official/cli-plugins.mdx

@@ -0,0 +1,4 @@
+# Overview
+
+- [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
+- [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-ssg): Provides static site generation capabilities.

package/docs/en/plugin/plugin-system.mdx

@@ -0,0 +1,244 @@
+# Plugin System
+
+Modern.js adopts a highly extensible, plugin-based architecture, where its core functionalities and extended capabilities are implemented through plugins. The plugin system not only ensures the framework's flexibility but also provides developers with powerful customization options. This document focuses on how to write Modern.js plugins, helping you quickly get started with plugin development.
+
+## Core Concept: Everything is a Plugin
+
+Modern.js adheres to the design philosophy of "everything is a plugin," modularizing the framework's various functional components and assembling and extending them through plugins. This design brings several advantages, including:
+
+- **High Cohesion, Low Coupling:** Each functional module is independently developed, tested, and maintained, reducing system complexity.
+- **Flexible and Extensible:** Users can easily customize the framework's behavior by writing or combining plugins without modifying the core code.
+- **Easy to Reuse:** Plugins can be shared across projects, improving development efficiency.
+- **Progressive Enhancement:** Plugins are introduced on demand, without the complexity of carrying all functionalities from the start.
+
+## Plugin Types and Use Cases
+
+Modern.js provides three main plugin types, corresponding to different stages of application development:
+
+**CLI Plugins:**
+    -   **Active Stage:** Build time (when executing the `modern` command).
+    -   **Typical Scenarios:**
+        -   Extending command-line tools.
+        -   Modifying build configurations.
+        -   Listening for file changes.
+        -   Controlling the build process.
+    -   **Configuration Method:** The `plugins` field in `modern.config.ts`.
+
+**Runtime Plugins:**
+    -   **Active Stage:** Application runtime (browser/Node.js environment).
+    -   **Typical Scenarios:**
+        -   Initializing global state or services.
+        -   Encapsulating React Higher-Order Components (HOCs).
+        -   Intercepting or modifying routing behavior.
+        -   Controlling the rendering process.
+    -   **Configuration Method:** The `plugins` field in `src/modern.runtime.ts`.
+
+{/* **Server Plugins:**
+    -   **Active Stage:** Server request processing stage.
+    -   **Typical Scenarios:**
+        -   Adding custom middleware.
+        -   Extending server-side APIs.
+        -   Customizing SSR logic.
+        -   Integrating with backend frameworks.
+    -   **Configuration Method:** The `plugins` field in `server/modern.server.ts`. */}
+
+## Plugin Structure
+
+A typical Modern.js plugin consists of the following key parts:
+
+```ts
+import type { Plugin } from '@modern-js/plugin';
+
+const myPlugin: Plugin = {
+  name: 'my-awesome-plugin', // The unique identifier of the plugin (required)
+
+  // Plugin dependencies and execution order (optional)
+  pre: [], // List of plugin names to execute before this plugin, defaults to an empty array
+  post: [], // List of plugin names to execute after this plugin, defaults to an empty array
+  required: [], // List of required plugins; if a dependent plugin is not registered, an error will be thrown, defaults to an empty array
+  usePlugins: [], // List of plugin instances used internally, defaults to an empty array
+
+  // Register new Hooks (optional)
+  registryHooks: {},
+
+  // The entry function of the plugin (required)
+  setup(api) {
+    // The core logic of the plugin, calling plugin APIs through the api object
+    api.modifyRspackConfig(config => {
+      /* ... */
+    });
+    api.onPrepare(() => {
+      /* ... */
+    });
+    // ... Other API calls
+  },
+};
+
+export default myPlugin;
+```
+
+**Field Descriptions:**
+
+##### `name`
+
+- Type: `string`
+- Description: Identifies the name of the plugin. This name must be unique within the plugin system; otherwise, the plugin will fail to load.
+
+:::info
+The plugin names declared in `pre`, `post`, and `required` refer to this `name` field.
+:::
+
+##### `setup`
+
+- Type: `(api: PluginAPI) => MaybePromise<void>`
+- Description: The main entry point for the plugin's logic.
+
+###### `api`
+
+- Type: `PluginAPI`
+- Description: The plugin's API, containing the Hooks and utility functions supported by the plugin.
+
+##### `pre`
+
+- Type: `string[]`
+- Description: Used to insert the plugin execution order. Plugins declared in `pre` will be executed before this plugin.
+
+##### `post`
+
+- Type: `string[]`
+- Description: Used to determine the plugin execution order. Plugins declared in `post` will be executed after this plugin.
+
+##### `required`
+
+- Type: `string[]`
+- Description: Other plugins that this plugin depends on. Before running, it will check if the dependent plugins are registered.
+
+:::info
+If unregistered plugin names are configured in `pre` or `post`, these plugin names will be **automatically ignored** and will not affect the execution of other plugins.
+
+If you need to explicitly declare that the plugins that the current plugin depends on must exist, you need to use the `required` field.
+:::
+
+##### `usePlugins`
+
+- Type: `Plugin`
+- Description: Actively register other plugins of the same type within the plugin.
+
+:::info
+Plugins declared in `usePlugins` are executed before the current plugin by default. To execute them after, use the `post` declaration.
+:::
+
+##### `registryHooks`
+
+- Type: `Record<string, PluginHook<(...args: any[]) => any>>`
+- Description: Extend the currently supported Hook functions to implement custom functionality.
+
+## Plugin Hook Model
+
+The core of the Modern.js plugin system is its Hook model, which defines the communication mechanism between plugins. Modern.js mainly provides two types of Hooks:
+
+### Async Hook
+
+- **Characteristics:**
+  - Hook functions are executed asynchronously, supporting `async/await`.
+  - The return value of the previous Hook function is passed as the first argument to the next Hook function.
+  - Finally returns the return value of the last Hook function.
+- **Use Cases:** Scenarios involving asynchronous operations (such as network requests, file reading/writing, etc.).
+- **Creation Method:** Created using `createAsyncHook`.
+
+Example:
+
+```ts
+// Define Hooks
+import { createAsyncHook } from '@modern-js/plugin';
+
+export type AfterPrepareFn = () => Promise<void> | void;
+export const onAfterPrepare = createAsyncHook<AfterPrepareFn>();
+
+// Register Hooks in the plugin
+const myPlugin = () => ({
+  name: 'my-plugin',
+  registryHooks: {
+    onAfterPrepare,
+  },
+  setup: api => {
+    api.onPrepare(async () => {
+      // Use the registered Hooks in the plugin
+      const hooks = api.getHooks();
+      await hooks.onAfterPrepare.call();
+    });
+  },
+});
+
+// Use Hook in other plugins
+const myPlugin2 = () => ({
+  name: 'my-plugin-2',
+  setup: api => {
+    api.onAfterPrepare(async () => {
+      // TODO
+    });
+  },
+});
+```
+
+### Sync Hook (Synchronous Hook)
+
+- **Characteristics:**
+  - Hook functions are executed synchronously.
+  - The return value of the previous Hook function is passed as the first argument to the next Hook function.
+  - Finally returns the return value of the last Hook function.
+- **Use Cases:** Scenarios where data needs to be modified synchronously (such as modifying configurations, routes, etc.).
+- **Creation Method:** Created using `createSyncHook`.
+
+Example:
+
+```ts
+// Define Hooks
+import { createSyncHook } from '@modern-js/plugin';
+
+type RouteObject = {
+  /** TODO **/
+};
+const modifyRoutes = createSyncHook<(routes: RouteObject[]) => RouteObject[]>();
+
+// Register Hooks in the plugin
+const myPlugin = () => ({
+  name: 'my-plugin',
+  registryHooks: {
+    modifyRoutes,
+  },
+  setup: api => {
+    api.onPrepare(async () => {
+      const routes = {};
+      // Use registered Hooks in the plugin
+      const hooks = api.getHooks();
+      const routesResult = hooks.modifyRoutes.call(routes);
+    });
+  },
+});
+
+// Other plugins use Hooks
+const myPlugin2 = () => ({
+  name: 'my-plugin',
+  setup: api => {
+    api.modifyRoutes(routes => {
+      // Modify routes
+      return routes;
+    });
+  },
+});
+```
+
+## Plugin Development Best Practices
+
+- **Single Responsibility:** Each plugin should focus on implementing a specific, cohesive function. Avoid creating plugins with complex functionalities and unclear responsibilities.
+- **Naming Conventions:** Plugin names should be clear, concise, and follow certain naming conventions (such as `plugin-xxx` or `@scope/plugin-xxx`).
+- **Type Safety:** Make full use of TypeScript's type system to ensure the type safety of the plugin API and reduce runtime errors.
+- **Comprehensive Documentation:** Write clear documentation for the plugin, including API descriptions, usage examples, configuration explanations, and change logs.
+- **Thorough Testing:** Conduct unit tests and integration tests on the plugin to ensure its stability, reliability, and compatibility in various scenarios.
+- **Minimize Side Effects:** Plugins should minimize modifications to the external environment (such as global variables, file systems, etc.) to maintain the plugin's independence and portability.
+- **Error Handling:** Plugins should properly handle potential errors to prevent the entire application from crashing due to plugin exceptions.
+- **Performance Optimization:** Pay attention to the performance impact of the plugin, avoid unnecessary calculations and resource consumption, especially in loops or frequently called Hooks.
+- **Version Control:** Follow Semantic Versioning (SemVer) to ensure the backward compatibility of the plugin and facilitate user upgrades.
+
+Following these best practices can help you develop high-quality, easy-to-maintain, and easy-to-use Modern.js plugins.

package/docs/en/plugin/runtime-plugins/_meta.json

@@ -0,0 +1 @@
+["api", "life-cycle"]

package/docs/en/plugin/runtime-plugins/api.mdx

@@ -0,0 +1,193 @@
+# Plugin API
+
+Modern.js's Runtime Plugins allow you to extend and modify the behavior of your application during its React code execution. With Runtime Plugins, you can easily perform initialization tasks, implement React Higher-Order Component (HOC) wrapping, and more.
+
+:::info
+
+Runtime plugins need to be configured via the [`plugins`](/configure/app/runtime/plugins) field in `src/modern.runtime.ts`.
+
+:::
+
+## Plugin Structure
+
+A typical Runtime Plugin looks like this:
+
+```ts
+import type { RuntimePlugin } from '@modern-js/runtime';
+
+const myRuntimePlugin = (): RuntimePlugin => ({
+  name: 'my-runtime-plugin',
+  setup: api => {
+    // Use the api to register hooks
+    api.onBeforeRender(context => {
+      console.log('Before rendering:', context);
+    });
+
+    api.wrapRoot(App => {
+      return props => (
+        <MyContextProvider>
+          <App {...props} />
+        </MyContextProvider>
+      );
+    });
+  },
+});
+
+export default myRuntimePlugin;
+```
+
+- `name`: A unique identifier for the plugin.
+- `setup`: A function that receives an `api` object, which provides all available Runtime plugin APIs.
+
+## API Overview
+
+The Runtime Plugin API is primarily divided into the following categories:
+
+- **Information Retrieval**: Getting runtime configuration and hook functions.
+- **Lifecycle Hooks**: Executing custom logic at different stages of the application's rendering process.
+
+### Information Retrieval
+
+#### `api.getRuntimeConfig`
+
+Gets the runtime configuration defined by the user in the `modern.runtime.ts` file.
+
+- **Usage**:
+
+```ts
+const config = api.getRuntimeConfig();
+console.log(config.myCustomSetting);
+```
+
+:::warning
+
+This method returns a _copy_ of the user's configuration. Modifying the returned value will not affect the original configuration.
+:::
+
+#### `api.getHooks`
+
+Gets the hook functions that can be triggered manually.
+
+- **Type:**
+
+```ts
+() => {
+  onBeforeRender: {
+    call: (context: any) => Promise<void>;
+  }
+  // Other hooks...
+};
+```
+
+- **Usage:**
+
+```ts
+const hooks = api.getHooks();
+await hooks.onBeforeRender.call(myContext);
+```
+
+### Lifecycle Hooks
+
+#### `api.onBeforeRender`
+
+Executes before the application renders (including both server-side rendering and client-side rendering). You can use this hook to perform data prefetching, modify the rendering context, etc.
+
+- **Type:**
+
+  ```ts
+  type OnBeforeRenderFn<RuntimeContext> = (
+    context: RuntimeContext,
+  ) => Promise<void> | void;
+  ```
+
+  `RuntimeContext` contains contextual information about the current request, such as the request object, response object, etc.
+
+- **Usage:**
+
+  ```ts
+  api.onBeforeRender(async context => {
+    const data = await fetchData(context.req);
+    context.data = data; // Add the data to the context
+  });
+  ```
+
+:::warning
+
+- This hook executes before **every** render, so avoid performing long-running operations.
+- You can modify the `context` object in this hook, and the modified `context` will be passed to subsequent rendering processes.
+
+:::
+
+#### `api.wrapRoot`
+
+Allows you to wrap the application's root component with a custom React component. This is commonly used to add global Providers, layout components, etc.
+
+- **Type:**
+
+  ```ts
+  type WrapRootFn = (App: React.ComponentType<any>) => React.ComponentType<any>;
+  ```
+
+- **Usage:**
+
+      ```ts
+      api.wrapRoot((App) => {
+        const AppWrapper = (props) => {
+          return (
+            <MyGlobalProvider>
+              <Layout>
+                <App {...props} /> {/* Make sure to pass props */}
+              </Layout>
+            </MyGlobalProvider>
+          );
+        };
+        return AppWrapper;
+      });
+      ```
+
+  :::warning
+
+- **It is crucial to pass the `props` to the original `App` component**, otherwise, the application may not function correctly.
+- The component returned by `wrapRoot` is recreated on every render, so avoid defining complex logic or state within it.
+
+:::
+
+## Advanced Usage
+
+### Combining Hooks
+
+You can combine multiple hooks to implement more complex functionality. For example, you can use `onBeforeRender` to fetch data and then use `wrapRoot` to pass the data to the entire application via Context:
+
+```ts
+import { RuntimePlugin, RuntimeContext } from '@modern-js/runtime';
+import { useContext, createContext } from 'react';
+
+export const ThemeContext = createContext<{ theme: string } | null>(null);
+
+export const themePlugin = (): RuntimePlugin => {
+  return {
+    name: 'theme-plugin',
+    setup: api => {
+      api.onBeforeRender(async context => {
+        const userPreference = await fetch('/api/user/theme-settings').then(
+          res => res.json(),
+        );
+        context.data = {
+          theme: userPreference.theme,
+        };
+      });
+
+      api.wrapRoot(App => {
+        return props => {
+          const context = useContext(RuntimeContext);
+          return (
+            <ThemeContext.Provider value={context.data}>
+              <App {...props} />
+            </ThemeContext.Provider>
+          );
+        };
+      });
+    },
+  };
+};
+```

package/docs/en/plugin/runtime-plugins/life-cycle.mdx

@@ -0,0 +1,29 @@
+# Life Cycle
+
+import Mermaid from '@site/src/components/Mermaid';
+
+<Mermaid>
+{`
+flowchart TD
+    init{{"Runtime Initialization"}}
+    load_config(Load User Configuration File)
+    runtime_plugin(Load Runtime Plugins<br><sub>Plugins registered in the configuration file<br>Runtime plugins registered by CLI<br>Plugins used within plugins</sub>)
+    registry_hooks(Register Hooks Functions<br><sub>Execute the plugin setup function, register hooks defined in the plugin, and the logic in the plugin setup will also be executed here</sub>)
+
+    wrapRoot(wrapRoot<br><sub>The logic returned in wrapRoot will be executed when the component is rendered</sub>)
+    onBeforeRender(onBeforeRender)
+
+    init --> load_config
+    load_config --> runtime_plugin
+    runtime_plugin --> registry_hooks
+    registry_hooks --> wrapRoot
+    wrapRoot --> onBeforeRender
+
+    style init fill:#FDE68A,font-size:10px;
+    style load_config stroke-dasharray:5 5,fill:#86EFAC,font-size:10px;
+    style runtime_plugin stroke-dasharray:5 5,fill:#86EFAC,font-size:10px;
+    style registry_hooks stroke-dasharray:5 5,fill:#9CA3AF,font-size:10px;
+    style wrapRoot font-size:10px;
+    style onBeforeRender font-size:10px;
+`}
+</Mermaid>

package/docs/en/plugin/server-plugins/_meta.json

@@ -0,0 +1 @@
+["api", "life-cycle"]