@modern-js/main-doc 2.65.5 → 2.66.1-alpha.0

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

@@ -1,44 +1,30 @@
----
-title: App.[tj]sx
-sidebar_position: 1
----
 # App.[tj]sx
 
-The identifier for the entry points when the application uses [Self-controlled Routing](/guides/concept/entries.html#self-controlled-routing).
+The entry identifier when using [Self-controlled Routing](/guides/concept/entries.html#self-controlled-routing) in the application.
 
-`App.[tj]sx` is not the actual entry. Modern.js will generate the real entry for application. The content is roughly as follows:
+`App.[tj]sx` is not the actual application entry; Modern.js will automatically generate the real entry file, which is roughly as follows:
 
 ```js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { createApp, bootstrap } from '@modern-js/runtime';
-// App.[jt]sx
+// runtime-global-context
+import { setGlobalContext } from '@modern-js/runtime/context';
 import App from '@_modern_js_src/App';
-// runtime plugin
-import { router } from '@modern-js/runtime/plugins';
-
-const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
-const MOUNT_ID = 'root';
-
-let AppWrapper = null;
-
-function render() {
-  AppWrapper = createApp({
-    plugins: [
-     router({...{"serverBase":["/"]}, ...App.config?.router}),
-    ]
-  })(App)
-  if (IS_BROWSER) {
-    bootstrap(AppWrapper, MOUNT_ID, null, ReactDOM);
-  }
-  return AppWrapper
-}
-
-AppWrapper = render();
-export default AppWrapper;
+
+setGlobalContext({
+  App,
+});
+
+// index.tsx
+import './runtime-global-context';
+import { createRoot } from '@modern-js/runtime/react';
+import { render } from '@modern-js/runtime/browser';
+
+const ModernRoot = createRoot();
+
+render(<ModernRoot />, 'root');
 ```
 
-:::note
-In the multi-entry scenario, each entry can have its own `App.[jt]sx`. See [Entries](/guides/concept/entries) for details.
+When `createRoot` is executed, it will retrieve the registered Global App and generate the actual React component.
 
+:::note
+In scenarios with multiple entry points, each entry can have its own independent `App.[jt]sx`. For more details, see [Entry Points](/guides/concept/entries).
 :::

package/docs/en/apis/app/hooks/src/modern.runtime.mdx

@@ -0,0 +1,9 @@
+---
+title: modern.runtime.[tj]s
+sidebar_position: 4
+---
+# modern.runtime.[tj]s
+
+The Modern.js Runtime configuration file allows for personalized configuration of the Runtime capabilities for the current project.
+
+For specific usage of the configuration, please refer to [Runtime Configuration](/configure/app/runtime/0-intro.html).

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -3,8 +3,14 @@ title: defineConfig
 ---
 # defineConfig
 
+:::warning
+
+Soon to be deprecated. It is recommended to use `src/modern.runtime.ts` to define Runtime configurations, which supports both static and dynamic configurations. Please refer to the plugin [Runtime Configuration](/configure/app/runtime/0-intro.html).
+
 For dynamically configuring applications runtime features.
 
+:::
+
 ## Usage
 
 ```ts

package/docs/en/community/blog/v2-release-note.mdx

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system.html)文档。
 
 ### 嵌套路由
 

package/docs/en/components/enable-micro-frontend.mdx

@@ -1,13 +1,30 @@
-```js title="modern.config.ts"
+```ts title="modern.config.ts"
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   runtime: {
     router: true,
-    state: true,
-    masterApp: true,
   },
   plugins: [appTools(), garfishPlugin()],
 });
+
+```
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({
+  masterApp: {
+    apps: [{
+      name: 'Table',
+      entry: 'http://localhost:8081',
+      // activeWhen: '/table'
+    }, {
+      name: 'Dashboard',
+      entry: 'http://localhost:8082'
+      // activeWhen: '/dashboard'
+    }]
+  },
+});
 ```

package/docs/en/components/micro-runtime-config.mdx

@@ -1,18 +1,17 @@
-```js title="src/App.tsx"
-import { defineConfig } from '@modern-js/runtime';
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
 
-defineConfig(App, {
+export default defineRuntimeConfig({
   masterApp: {
-    apps: [
-      {
-        name: 'DashBoard',
-        entry: 'http://127.0.0.1:8081/',
-      },
-      {
-        name: 'TableList',
-        entry: 'http://localhost:8082',
-      },
-    ],
+    apps: [{
+      name: 'Table',
+      entry: 'http://localhost:8081',
+      // activeWhen: '/table'
+    }, {
+      name: 'Dashboard',
+      entry: 'http://localhost:8082'
+      // activeWhen: '/dashboard'
+    }]
   },
 });
 ```

package/docs/en/components/reduck-notify.mdx

@@ -0,0 +1,27 @@
+:::warning
+Starting from `MAJOR_VERSION.67.0`, Modern.js no longer provides Reduck state management capabilities by default. If you need to use Reduck, you must install and register the state plugin.
+
+**Installation Steps**
+
+1. Install the `@modern-js/plugin-state` dependency:
+
+```bash
+pnpm add @modern-js/plugin-state
+```
+
+2. Register the state plugin:
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+import { statePlugin } from '@modern-js/plugin-state';
+
+export default defineConfig({
+  ...,
+  plugins: [
+    ...,
+    statePlugin(),
+  ],
+});
+```
+
+:::

package/docs/en/configure/app/plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 9
 
 Used to configure custom Modern.js framework plugins.
 
-Refer to [How to Develop Plugins](/plugin/plugin-system/implement) for how to write custom plugins.
+Refer to [How to Develop Plugins](/plugin/plugin-system) for how to write custom plugins.
 
 ## Note
 
@@ -33,7 +33,7 @@ Currently, Modern.js has opened up the ability to customize CLI plugins, and Ser
 
 By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
 
-When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/plugin/plugin-system/relationship) for more information.
+When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Plugins Structure](/plugin/plugin-system) for more information.
 
 ## Example
 

package/docs/en/configure/app/runtime/0-intro.mdx

@@ -1,119 +1,91 @@
----
-title: Overview
-sidebar_position: 1
----
+# Introduce
 
-# Overview
+Modern.js runtime configuration should be centralized in the `src/modern.runtime.ts` file.
 
-This section describes configuration of the Runtime plugin.
-
-## Configuration
-
-### runtime
-
-- **Type:** `Object`
-
-The runtime is configured as follows:
+:::info
+If this file doesn't exist in your project yet, create it with the following command:
 
-#### Base
+```bash
+touch src/modern.runtime.ts
+```
+:::
 
-Configure in `modern.config.ts`:
+## Basic Configuration
 
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
+```tsx
+import { defineRuntimeConfig } from '@modern-js/runtime';
 
-export default defineConfig({
-  runtime: {
-    state: true,
-    router: true,
+export default defineRuntimeConfig({
+  router: {
+    // Router configuration
+  },
+  state: {
+    // State management configuration
   },
+  // Other runtime modules...
 });
 ```
 
-#### DefineConfig
-
-Configure using [`defineConfig`](/apis/app/runtime/app/define-config) API:
-
-:::info
-When there is a function in the runtime configuration, it can only be configured this way.
-
-:::
+## Multi-Entry Configuration
 
-import { Tabs, Tab as TabItem } from "@theme";
+For multi-entry applications, `defineRuntimeConfig` can accept a function that returns specific configurations based on the entry name:
 
-<Tabs>
-  <TabItem value="layout" label="Conventional Routing" default>
+```tsx
+import { defineRuntimeConfig } from '@modern-js/runtime';
 
-```tsx title="src/routes/layout.tsx"
-import type { AppConfig } from '@modern-js/runtime';
-
-export const config = (): AppConfig => {
-  return {
-    router: {
-      supportHtml5History: false
-    }
+export default defineRuntimeConfig((entryName) => {
+  if (entryName === 'main') {
+    return {
+      router: {
+        // Router configuration for "main" entry
+      },
+      state: {
+        // State management configuration for "main" entry
+      },
+    };
   }
-};
-```
-
-  </TabItem>
-
-  <TabItem value="app" label="Self-controlled Routing">
-
-```ts title="src/App.tsx"
-import { defineConfig } from '@modern-js/runtime';
-
-const App = () => {
-  /** */
-};
 
-defineConfig(App, {
-  router: {
-    supportHtml5History: false,
-  },
+  // Configuration for other entries
+  return {
+    masterApp: {
+      // Micro-frontend configuration example
+    },
+  };
 });
-
-export default App;
 ```
-
-  </TabItem>
-</Tabs>
-
-:::info
-Using runtime configuration, you can solve the problem that runtime plugin configuration needs to be at runtime to get specific content.
-
-Runtime plugin runtime configuration and configuration directly in `modern.config.ts` are merged by default, and runtime configuration takes precedence.
-
+:::tip
+Using the `src/modern.runtime.ts` configuration approach does not support exporting asynchronous functions, which is related to the rendering method of Modern.js. If you need to add asynchronous logic, please use the **[Runtime Plugin](/plugin/introduction.html#runtime-plugin)**.
 :::
 
 :::warning
-The `defineConfig` API only accepts the specific configuration of Runtime plugins. Enabling the plugin is determined through `modern.config.ts` configuration."
-
+Using the `src/modern.runtime.ts` configuration approach requires Modern.js version **MAJOR_VERSION.66.0** or higher.
 :::
 
-### runtimeByEntries
+## Configuration Evolution
 
-- **Type:** `Object`
+Before MAJOR_VERSION.66.0, runtime configurations were scattered across multiple locations:
 
-#### Introduction
+1. The `runtime` and `runtimeByEntries` fields in `modern.config.ts`
+2. The `App.config` or the `config` function exported from `layout` files for each entry
 
-Add the runtime configuration according to the entry. The option attribute is consistent with the runtime. The specified value will be replaced and merged with the content of the runtime attribute.
+To improve maintainability, Modern.js introduced the unified `src/modern.runtime.ts` configuration entry.
 
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
+### Legacy Configuration (Compatible but Not Recommended)
 
-export default defineConfig({
-  runtime: {
-    state: false,
-  },
-  runtimeByEntries: {
-    entry1: {
-      state: true, // { state: true }
-    },
-    entry2: {
-      // { state: false, router: true }
-      router: true,
-    },
-  },
-});
+```ts
+// modern.config.ts
+export default {
+  runtime: { /* ... */ },
+  runtimeByEntries: { /* ... */ },
+};
+
+// App.config
+App.config = {/* ... */}
+
+// layout file
+export const config = () => { /* Dynamic configuration logic */ };
 ```
+
+### Migration Recommendation
+
+We strongly recommend migrating all runtime configurations to `src/modern.runtime.ts`. Although the legacy configuration approach is still compatible, it is planned to be gradually deprecated in future versions. A unified configuration entry prevents scattered configurations and significantly improves project maintainability.

package/docs/en/configure/app/tools/esbuild.mdx

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [Esbuild Plugin Configuration](/plugin/rsbuild-plugins/plugin-esbuild.html#config).
+For config details, please refer to [Esbuild Plugin Configuration](/plugin/official/rsbuild-plugins/plugin-esbuild.html#config).

package/docs/en/configure/app/tools/swc.mdx

@@ -108,4 +108,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [SWC Plugin Configuration](/plugin/cli-plugins/plugin-swc.html#config).
+For config details, please refer to [SWC Plugin Configuration](/plugin/official/cli-plugins/plugin-swc.html#config).