@modern-js/main-doc 2.66.0 → 2.66.1-alpha.1

package/docs/en/guides/basic-features/routes.mdx

@@ -480,101 +480,6 @@ The `prefetch` attribute has three optional values:
 
 :::
 
-
-## Runtime Configuration
-
-{/* Todo Move to runtime configuration chapter */}
-
-In the root `<Layout>` component (`routes/layout.ts`), you can dynamically define runtime configuration:
-
-```tsx title="src/routes/layout.tsx"
-// Define runtime configuration
-import type { AppConfig } from '@modern-js/runtime';
-
-export const config = (): AppConfig => {
-  return {
-    router: {
-      createRoutes() {
-        return [
-          {
-            path: 'modern',
-            element: <div>modern</div>,
-          },
-        ];
-      },
-    },
-  };
-};
-```
-
-## Pre-render Hooks
-
-{/* Todo Move to runtime configuration chapter */}
-
-In some scenarios, you need to perform certain actions before the application renders. You can define the `init` hook in `routes/layout.tsx`, which will be executed both on the client and server. A basic example is shown below:
-
-```ts title="src/routes/layout.tsx"
-import type { RuntimeContext } from '@modern-js/runtime';
-
-export const init = (context: RuntimeContext) => {
-  // do something
-};
-```
-
-With the `init` hook, you can mount some global data that can be accessed elsewhere in the application via the `runtimeContext` variable:
-
-:::note
-This feature is very useful when applications require pre-rendered data, custom data injection, or framework migration (e.g., Next.js).
-:::
-
-```ts title="src/routes/layout.tsx"
-import { RuntimeContext } from '@modern-js/runtime';
-
-type InitialData = {
-  message: string;
-}
-
-export const init = (context: RuntimeContext): InitialData => {
-  return {
-    message: 'Hello World',
-  };
-};
-```
-
-```tsx title="src/routes/page.tsx"
-import { useRuntimeContext } from '@modern-js/runtime;
-
-export default () => {
-  const context = useRuntimeContext();
-  const { message } = context.initialData as InitialData;
-
-  return <div>{message}</div>;
-};
-```
-
-With SSR, the browser can obtain the data returned by `init` during SSR. Developers can decide whether to re-fetch the data on the browser side to override the SSR data. For example:
-
-```tsx title="src/routes/layout.tsx"
-import type { RuntimeContext } from '@modern-js/runtime;
-
-export const init = (runtimeContext: RuntimeContext) => {
-  if (process.env.MODERN_TARGET === 'node') {
-    return {
-      message: 'Hello World By Server',
-    };
-  } else {
-    const { context } = runtimeContext;
-    const data = context.getInitData();
-    // If the expected data is not obtained
-    if (!data.message) {
-      return {
-        message: 'Hello World By Client',
-      };
-    }
-  }
-};
-```
-
 <Motivation />
 
 ## FAQ

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -14,9 +14,9 @@ Through this chapter you can learn:
 
 The routing modes of the current project are divided into the following three types:
 
-- File-based routing (`router: true` and file-based)
-- Self-Controlled routing (`router: true` and create `BrowserRouter`)
-- Other (`router: false` and independent installation of `react-router-dom` in the project)
+- [Conventional Routing](/guides/concept/entries.html#conventional-routing)
+- [Self-controlled Routing](/guides/concept/entries.html#self-controlled-routing)
+- Other (independent installation of `react-router-dom` in the project)
 
 First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
 
@@ -198,7 +198,6 @@ export default defineConfig({
   },
   runtime: {
     router: true,
-    state: true,
   },
   deploy: {
     microFrontend: true,
@@ -245,7 +244,6 @@ export default defineConfig({
   },
   runtime: {
     router: true,
-    state: true,
   },
   deploy: {
     microFrontend: true,

package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -35,8 +35,10 @@ import MicroRuntimeConfig from '@site-docs-en/components/micro-runtime-config';
 
 This function allows you to pull a list of remote child applications and register them with the runtime framework:
 
-```ts title="App.tsx"
-defineConfig(App, {
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({
   masterApp: {
     manifest: {
       getAppList: async () => {

package/docs/en/guides/topic-detail/model/auto-actions.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 6
-title: Automatically Actions
----
 # Automatically Generated Actions
 
 In the [Quick Start](/guides/topic-detail/model/quick-start), we implemented the simplest counter model, which still required 10 lines of code. In fact, Modern.js supports automatically generating commonly used actions based on the declared `state` type, which reduces the amount of boilerplate code. The currently supported types are:

package/docs/en/guides/topic-detail/model/computed-state.mdx

@@ -1,8 +1,3 @@
----
-sidebar_position: 4
-title: Derived State
----
-
 # Derived State
 
 In some scenarios, components need to perform further calculations on the State in Model before they can be used in the components. This logic can be directly written in the component or implemented through derived states in Model. Derived states are defined under the `computed` field in the Model. Depending on the dependencies of the Model and the return type, there are three ways to define derived states.

package/docs/en/guides/topic-detail/model/define-model.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 2
-title: Define Model
----
 # Define a Model
 
 In the previous section, we demonstrated how to create a Model for a simple counter application. In this section, we will provide a detailed introduction on how to create a Model.

package/docs/en/guides/topic-detail/model/faq.mdx

@@ -1,8 +1,3 @@
----
-sidebar_position: 13
-title: FAQ
----
-
 # FAQ
 
 ## Browser Compatibility

package/docs/en/guides/topic-detail/model/manage-effects.mdx

@@ -1,8 +1,3 @@
----
-sidebar_position: 5
-title: Management Effect
----
-
 # Management Effect
 
 The actions in the model must be pure functions and cannot have any side effects during execution. However, in real-world scenarios, we often encounter many side effects, such as: requesting data from an HTTP API to obtain state data, or modifying `localStorage` or sending events while updating the state. In Reduck, side effects are managed through the model's `effects` function.

package/docs/en/guides/topic-detail/model/model-communicate.mdx

@@ -1,8 +1,3 @@
----
-sidebar_position: 7
-title: Model Communication
----
-
 # Model Communication
 
 Model communication refers to communication between different Models, as well as communication between Effects and Actions within the same Model.

package/docs/en/guides/topic-detail/model/performance.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 8
-title: Performance Optimization
----
 # Performance Optimization
 
 Reduck has already done a lot of performance optimization work internally, so performance issues generally do not need to be considered. However, when performance is more sensitive, or when encountering performance issues, you can consider more targeted performance optimization from the following three aspects.

package/docs/en/guides/topic-detail/model/quick-start.mdx

@@ -1,13 +1,12 @@
----
-sidebar_position: 1
-title: Quick Start
----
+# Quick Start
 
 :::caution
 New projects are no longer recommended to use Reduck. You can use state management tools from the community, such as [Jotai](https://jotai.org/), [zustand](https://zustand.docs.pmnd.rs/getting-started/introduction), [valtio](https://valtio.dev/docs/introduction/getting-started), etc.
 :::
 
-# Quick Start
+import ReduckNotify from '@site-docs-en/components/reduck-notify';
+
+<ReduckNotify />
 
 import ReduckMigration from "@site-docs-en/components/reduck-migration"
 
@@ -22,8 +21,7 @@ In the MVC pattern, Reduck plays the role of M(Model), React UI Component corres
 The state management solution of Modern.js is implemented through built-in Reduck. Using Reduck in Modern.js not only eliminates the manual integration process, but also allows all Reduck APIs to be imported and used directly from the Modern.js Runtime package, providing a better consistency experience.
 
 :::info
-1. To use Reduck APIs in Modern.js, you need to set [runtime.state](/configure/app/runtime/state) to enable the state management plugin.
-2. Reduck can also be used separately as a state management library [outside of Modern.js](/guides/topic-detail/model/use-out-of-modernjs).
+Reduck can also be used separately as a state management library [outside of Modern.js](/guides/topic-detail/model/use-out-of-modernjs).
 
 :::
 

package/docs/en/guides/topic-detail/model/redux-integration.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 11
-title: Ecosystem Integration
----
 # Redux Ecosystem Integration
 
 Reduck is based on Redux, so you can use libraries from the [Redux ecosystem](https://redux.js.org/introduction/ecosystem) to enhance its functionality. APIs like [`Provider`](/apis/app/runtime/model/Provider), [`createApp`](/apis/app/runtime/model/create-app), and [`createStore`](/apis/app/runtime/model/create-store) allow you to configure the use of [middlewares](https://redux.js.org/understanding/thinking-in-redux/glossary#middleware) and [store enhancers](https://redux.js.org/understanding/thinking-in-redux/glossary#store-enhancer); and using [`createStore`](/apis/app/runtime/model/create-store), you can take complete control over the process of creating the store.

package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 10
-title: TS Best Practices
----
 # TS Best Practices
 
 Reduck provides excellent support for TypeScript, and in most cases, you can get API type prompts directly without any extra work. In this section, we will provide additional information on other usage scenarios.

package/docs/en/guides/topic-detail/model/use-model.mdx

@@ -1,8 +1,3 @@
----
-sidebar_position: 3
-title: Use Models
----
-
 # Use Models
 
 ## Using Models in Components

package/docs/en/guides/topic-detail/model/use-out-of-modernjs.mdx

@@ -1,7 +1,3 @@
----
-sidebar_position: 12
-title: Using Reduck Separately
----
 # Using Reduck Separately
 
 When integrating Reduck separately from Modern.js, the following modifications need to be made:

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

@@ -2,6 +2,7 @@
 title: App.[tj]sx
 sidebar_position: 1
 ---
+
 # App.[tj]sx
 
 应用使用[自控路由](/guides/concept/entries.html#自控式路由)时的入口标识符。
@@ -9,35 +10,26 @@ sidebar_position: 1
 `App.[tj]sx` 并不是实际的应用入口，Modern.js 会自动生成真正的构建打包的入口文件, 内容大致如下：
 
 ```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');
 ```
 
+`createRoot` 执行时，会去获取注册的 Globa App，生成真实的 React 组件。
+
 :::note
 在多入口的场景下，每个入口都可以拥有独立的 `App.[jt]sx`，详见[入口](/guides/concept/entries)。
 

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

@@ -0,0 +1,9 @@
+---
+title: modern.runtime.[tj]s
+sidebar_position: 4
+---
+# modern.runtime.[tj]s
+
+Modern.js Runtime 配置文件, 通过该文件可以对当前项目的 Runtime 能力进行个性化配置。
+
+了解配置的具体用法，请参考 [Runtime 配置](/configure/app/runtime/0-intro.html)。

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

@@ -4,6 +4,11 @@ title: defineConfig
 ---
 # defineConfig
 
+:::warning
+
+该 API 即将废弃，推荐使用 `src/modern.runtime.ts` 定义 Runtime 配置，同时支持静态配置和动态配置，使用姿势插件[Runtime 配置](/configure/app/runtime/0-intro.html)
+:::
+
 用于动态配置应用。
 
 ## 使用姿势

package/docs/zh/apis/app/runtime/web-server/hook.mdx

@@ -6,6 +6,10 @@ title: Hook
 
 用于拓展 Modern.js 内置的 Web Server，所有的页面请求都会经过 Hook。
 
+:::warning
+推荐使用 [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware) 来处理页面请求。
+:::
+
 :::note
 更多内容可以查看[自定义 Web Server](/guides/advanced-features/web-server)。
 :::

package/docs/zh/apis/app/runtime/web-server/middleware.mdx

@@ -6,11 +6,9 @@ title: Middleware
 
 用于拓展 Modern.js 内置的 Web Server，与 [Hook](/apis/app/runtime/web-server/hook) 不同的是，Middleware 可以直接操作 Node 原生的请求、响应对象，并且可以使用框架拓展。
 
-:::note
-
-在下一个大版本，Modern.js 将会使用新 Middleware 来替代该写法。
+:::warning
 
-推荐使用 [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware) 处理页面请求。
+Middleware 将会在下一个大版本中废弃，推荐使用 [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware) 处理页面请求。
 
 :::
 
@@ -119,22 +117,3 @@ export const Middleware = () => async (ctx, next) => {
   ctx.response.locals.rpc = createRpcInstance();
 };
 ```
-
-### 框架拓展
-
-Middleware 还可以和 BFF 一样，使用运行时框架拓展。Modern.js 约定，当使用框架运行时拓展时，类型信息从 `@modern-js/runtime/{namespace}` 下导出，Middleware 可以使用框架语法，例如框架中间件写法，以下是伪代码：
-
-```ts
-import { SomeType } from '@modern-js/runtime/{namespace}';
-
-export const middleware: SomeType = (ctx, next) => {
-  console.log(ctx.url);
-  next();
-};
-```
-
-默认情况下，在安装框架拓展插件后，Web Server 的框架拓展能力是关闭的。如果希望使用框架拓展，可以通过 [`server.enableFrameworkExt`](/configure/app/server/enable-framework-ext.html) 开启。
-
-:::info
-框架拓展导出的类型名不一定为 Middleware，命名由框架拓展插件。
-:::

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

@@ -1,23 +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,
-    masterApp: {
-      apps: [{
-        name: 'Table',
-        entry: 'http://localhost:8081',
-        // activeWhen: '/table'
-      }, {
-        name: 'Dashboard',
-        entry: 'http://localhost:8082'
-        // activeWhen: '/dashboard'
-      }]
-    },
   },
   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/zh/components/micro-runtime-config.mdx

@@ -1,7 +1,7 @@
-```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: 'Table',

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

@@ -0,0 +1,27 @@
+:::warning
+从 `MAJOR_VERSION.67.0` 起，Modern.js 不再默认提供 Reduck 状态管理能力。如果需要使用 Reduck，您需要安装并注册 state 插件。
+
+**安装步骤**
+
+1. 安装 `@modern-js/plugin-state` 依赖：
+
+```bash
+pnpm add @modern-js/plugin-state
+```
+
+2. 注册 state 插件：
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+import { statePlugin } from '@modern-js/plugin-state';
+
+export default defineConfig({
+  ...,
+  plugins: [
+    ...,
+    statePlugin(),
+  ],
+});
+```
+
+:::