@modern-js/main-doc 2.68.7 → 2.68.9

package/docs/en/guides/topic-detail/module-federation/application.mdx

@@ -75,7 +75,7 @@ If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard
 :::
 
 ```tsx title="src/routes/remote/$.tsx"
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import { loadRemote } from '@module-federation/modern-js/runtime';
 
 const ErrorBoundary = (info?: { error: { message: string } }) => {
@@ -87,7 +87,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => {
   );
 };
 const Loading = <div>loading...</div>;
-const RemoteApp = createRemoteComponent({
+const RemoteApp = createRemoteAppComponent({
   loader: () => loadRemote('remote/app'),
   fallback: ErrorBoundary,
   loading: Loading,
@@ -97,7 +97,7 @@ export default RemoteApp;
 ```
 
 :::info
-[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) is used to load application-level modules.
+[`createRemoteAppComponent`](https://module-federation.io/practice/bridge/react-bridge.html#createremoteappcomponent) is used to load application-level modules.
 :::
 
 ## Start the Application

package/docs/en/guides/topic-detail/module-federation/ssr.mdx

@@ -26,6 +26,45 @@ Currently, `@module-federation/bridge-react` is not compatible with the Node env
 
 ## Data Fetching
 
-:::note
-Stay tuned
-:::
+:::tip
+Currently, this feature is experimental and has not been fully practiced. Please use it with caution.
+:::
+
+Module Federation now supports [data fetching](https://module-federation.io/zh/guide/basic/data-fetch/index.html#%E7%AE%80%E4%BB%8B) capabilities. Each producer file can have a corresponding data fetching file, with the file name format of `[name].data.ts`.
+
+In Modern.js, data fetching can be used with SSR. Using the example in the previous chapter, create a data fetching file:
+
+```ts title="src/components/Button.data.ts"
+import type { DataFetchParams } from '@module-federation/modern-js/react';
+
+export type Data = {
+  data: string;
+};
+
+export const fetchData = async (params: DataFetchParams): Promise<Data> => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        data: `data: ${new Date()}`,
+      });
+    }, 1000);
+  });
+};
+```
+
+In Button, we get the data from the `Props`:
+
+```ts title="src/components/Button.tsx"
+import React from 'react';
+import './index.css';
+import type { Data } from './Button.data';
+
+export const Button = (props: { mfData: Data }) => {
+  const { mfData } = props;
+  return (
+    <button type="button" className="test">
+      Remote Button {mfData?.data}
+    </button>
+  );
+};
+```

package/docs/zh/guides/topic-detail/module-federation/application.mdx

@@ -75,7 +75,7 @@ export default createModuleFederationConfig({
 :::
 
 ```tsx title="src/routes/remote/$.tsx"
-import { createRemoteComponent } from '@module-federation/bridge-react';
+import { createRemoteAppComponent } from '@module-federation/bridge-react';
 import { loadRemote } from '@module-federation/modern-js/runtime';
 
 const ErrorBoundary = (info?: { error: { message: string } }) => {
@@ -87,7 +87,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => {
   );
 };
 const Loading = <div>loading...</div>;
-const RemoteApp = createRemoteComponent({
+const RemoteApp = createRemoteAppComponent({
   loader: () => loadRemote('remote/app'),
   fallback: ErrorBoundary,
   loading: Loading,
@@ -97,7 +97,7 @@ export default RemoteApp;
 ```
 
 :::info
-[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) 用于加载应用级别模块。
+[`createRemoteAppComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremoteappcomponent) 用于加载应用级别模块。
 :::
 
 ## 启动应用

package/docs/zh/guides/topic-detail/module-federation/ssr.mdx

@@ -13,9 +13,11 @@ export default defineConfig({
   server: {
     ssr: {
       mode: 'stream',
+      // 禁用预渲染，优化 SSR 性能
+      disablePrerender: true,
     },
   },
-}
+})
 ```
 
 为更好的性能体验，我们仅支持 Streaming SSR 情况使用这种能力组合。
@@ -26,6 +28,45 @@ export default defineConfig({
 
 ## 数据获取
 
-:::note
-敬请期待
-:::
+:::tip
+目前该功能为实验性功能，功能还未经过充分实践，请谨慎使用。
+:::
+
+Module Federation 在新版本中支持了[数据获取](https://module-federation.io/zh/guide/basic/data-fetch/index.html#%E7%AE%80%E4%BB%8B)的能力。每个生产者文件都可以有一个对应的数据获取文件，文件名格式为 `[name].data.ts`。
+
+在 Modern.js 中，数据获取可以配合 SSR 使用。我们以前面章节的 Demo 为例子，创建一个数据获取文件：
+
+```ts title="src/components/Button.data.ts"
+import type { DataFetchParams } from '@module-federation/modern-js/react';
+
+export type Data = {
+  data: string;
+};
+
+export const fetchData = async (params: DataFetchParams): Promise<Data> => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        data: `data: ${new Date()}`,
+      });
+    }, 1000);
+  });
+};
+```
+
+在 Button 中，我们从 `Props` 中获取到数据：
+
+```ts title="src/components/Button.tsx"
+import React from 'react';
+import './index.css';
+import type { Data } from './Button.data';
+
+export const Button = (props: { mfData: Data }) => {
+  const { mfData } = props;
+  return (
+    <button type="button" className="test">
+      Remote Button {mfData?.data}
+    </button>
+  );
+};
+```

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.68.7",
+  "version": "2.68.9",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.68.7"
+    "@modern-js/sandpack-react": "2.68.9"
   },
   "devDependencies": {
-    "@rsbuild/plugin-sass": "1.3.4",
+    "@rsbuild/plugin-sass": "1.3.5",
     "@shikijs/transformers": "^3.4.2",
     "@rspress/shared": "2.0.0-beta.16",
     "@rspress/plugin-llms": "2.0.0-beta.16",

package/rspress.config.ts

@@ -77,6 +77,12 @@ export default defineConfig({
         mode: 'link',
         content: 'https://github.com/web-infra-dev/modern.js',
       },
+      {
+        icon: 'lark',
+        mode: 'link',
+        content:
+          'https://applink.larkoffice.com/client/chat/chatter/add_by_link?link_token=d21hc667-9403-48a9-ba32-bc1440a80279',
+      },
     ],
   },
   route: {