Skip to content

Commit b621893

Browse files
2heal12heal1
authored
docs: add createRemoteCompoent and createRemoteSSRComponent deprecated documentation (#3978)
1 parent 0f1e3a9 commit b621893

File tree

4 files changed

+125
-2
lines changed

4 files changed

+125
-2
lines changed

‎apps/website-new/docs/en/guide/framework/modernjs.mdx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Modern.js
22

3+
import { Badge } from '@theme';
4+
35
[Modern.js](https://modernjs.dev/guides/get-started/introduction.html) is a progressive web development framework based on React. Internally at ByteDance, Modern.js supports the development of thousands of web applications.
46

57
The Module Federation team works closely with the Modern.js team and provides the `@module-federation/modern-js` plugin to help users better utilize Module Federation within Modern.js.
@@ -85,6 +87,54 @@ The Modern.js plugin re-exports `@module-federation/bridge-react` from `@module-
8587

8688
`@module-federation/modern-js` re-exports `@module-federation/modern-js/runtime` from the `runtime` subpath. You can use `@module-federation/modern-js/runtime` to get the MF Runtime.Runtime。
8789

90+
91+
### createRemoteComponent <Badge type="danger">Deprecated</Badge>
92+
93+
::: danger
94+
This API has been deprecated. Please use [createLazyComponent](../../practice/bridge/react-bridge#createlazycomponent) instead.
95+
:::
96+
97+
#### Migration Guide
98+
99+
The parameters for `createRemoteComponent` and `createLazyComponent` are identical. The only difference is that the `createLazyComponent` API needs to be called through an instance after registering the plugin.
100+
101+
```diff
102+
- import { createRemoteComponent } from '@module-federation/modern-js/runtime';
103+
+ import { getInstance } from '@module-federation/modern-js/runtime';
104+
+ import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
105+
106+
const instance = getInstance();
107+
// After registering the lazyLoadComponentPlugin, the instance will automatically add the createLazyComponent API
108+
instance.registerPlugins([lazyLoadComponentPlugin()]);
109+
110+
- const LazyComponent = createRemoteComponent({
111+
+ const LazyComponent = instance.createLazyComponent({
112+
loader: () => import('remote/Image'),
113+
loading: <div>loading...</div>,
114+
fallback: ({ error }) => {
115+
console.error(error)
116+
return <div>fallback</div>;
117+
},
118+
});
119+
120+
const App: FC = () => {
121+
return <>
122+
<LazyComponent />
123+
</>;
124+
};
125+
export default App;
126+
```
127+
128+
### createRemoteSSRComponent <Badge type="danger">Deprecated</Badge>
129+
130+
::: danger
131+
This API has been deprecated. Please use [createLazyComponent](../../practice/bridge/react-bridge#createlazycomponent) instead.
132+
:::
133+
134+
#### Migration Guide
135+
136+
Same as [createRemoteComponent#migration-guide](#migration-guide)
137+
88138
## Configuration
89139

90140
### ssr

‎apps/website-new/docs/en/practice/bridge/react-bridge.mdx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ In addition to loading components, this function also supports the following cap
433433
```tsx
434434
import React, { FC, memo, useEffect } from 'react';
435435
import { getInstance } from '@module-federation/enhanced/runtime';
436-
import { createLazyComponent, ERROR_TYPE } from '@module-federation/bridge-react';
436+
import { ERROR_TYPE } from '@module-federation/bridge-react';
437437

438438
const instance = getInstance();
439439
const LazyComponent = instance.createLazyComponent({
@@ -565,6 +565,18 @@ type DataFetchParams = {
565565
566566
Preloads component resource files and the component's data loader.
567567
568+
```ts
569+
import React, { FC, memo, useEffect } from 'react';
570+
import { getInstance } from '@module-federation/enhanced/runtime';
571+
572+
const instance = getInstance();
573+
574+
instance.prefetch({
575+
id: 'remote/Image',
576+
preloadComponentResource: true,
577+
});
578+
```
579+
568580
#### id
569581
570582
- Type: `string`

‎apps/website-new/docs/zh/guide/framework/modernjs.mdx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Modern.js
22

3+
import { Badge } from '@theme';
4+
35
[Modern.js](https://modernjs.dev/zh/guides/get-started/introduction.html) 是一个基于 React 的渐进式 Web 开发框架。在字节跳动内部，Modern.js 支撑了数千个 Web 应用的研发。
46

57
Module Federation 团队与 Modern.js 团队紧密合作，并提供 `@module-federation/modern-js` 插件来帮助用户在 Modern.js 中更好的使用 Module Federation。
@@ -85,6 +87,53 @@ export default createModuleFederationConfig({
8587

8688
`@module-federation/modern-js` 在子路径 `runtime` 重导出了 `@module-federation/modern-js/runtime` ，你可以使用 `@module-federation/modern-js/runtime` 来获取 MF Runtime。
8789

90+
### createRemoteComponent <Badge type="danger">废弃</Badge>
91+
92+
::: danger
93+
此 API 已被废弃，请使用[createLazyComponent](../../practice/bridge/react-bridge#createlazycomponent) 。
94+
:::
95+
96+
#### 如何迁移
97+
98+
createRemoteComponent 参数和 createLazyComponent 完全一致，区别在于 createLazyComponent API 需要注册插件后，通过实例调用。
99+
100+
```diff
101+
- import { createRemoteComponent } from '@module-federation/modern-js/runtime';
102+
+ import { getInstance } from '@module-federation/modern-js/runtime';
103+
+ import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
104+
105+
const instance = getInstance();
106+
// 注册 lazyLoadComponentPlugin 插件后，instance 会自动添加 createLazyComponent API
107+
instance.registerPlugins([lazyLoadComponentPlugin()]);
108+
109+
- const LazyComponent = createRemoteComponent({
110+
+ const LazyComponent = instance.createLazyComponent({
111+
loader: () => import('remote/Image'),
112+
loading: <div>loading...</div>,
113+
fallback: ({ error }) => {
114+
console.error(error)
115+
return <div>fallback</div>;
116+
},
117+
});
118+
119+
const App: FC = () => {
120+
return <>
121+
<LazyComponent />
122+
</>;
123+
};
124+
export default App;
125+
```
126+
127+
### createRemoteSSRComponent <Badge type="danger">废弃</Badge>
128+
129+
::: danger
130+
此 API 已被废弃，请使用[createLazyComponent](../../practice/bridge/react-bridge#createlazycomponent) 。
131+
:::
132+
133+
#### 如何迁移
134+
135+
同 [createRemoteComponent#如何迁移](#如何迁移)
136+
88137
## 配置
89138

90139
### ssr

‎apps/website-new/docs/zh/practice/bridge/react-bridge.mdx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,7 @@ type ErrorInfo = {
441441
```tsx
442442
import React, { FC, memo, useEffect } from 'react';
443443
import { getInstance } from '@module-federation/enhanced/runtime';
444-
import { createLazyComponent, ERROR_TYPE } from '@module-federation/bridge-react';
444+
import { ERROR_TYPE } from '@module-federation/bridge-react';
445445

446446
const instance = getInstance();
447447
const LazyComponent = instance.createLazyComponent({
@@ -573,6 +573,18 @@ type DataFetchParams = {
573573
574574
预加载组件资源文件以及组件的 data loader 。
575575
576+
```ts
577+
import React, { FC, memo, useEffect } from 'react';
578+
import { getInstance } from '@module-federation/enhanced/runtime';
579+
580+
const instance = getInstance();
581+
582+
instance.prefetch({
583+
id: 'remote/Image',
584+
preloadComponentResource: true,
585+
});
586+
```
587+
576588
#### id
577589
578590
- 类型：`string`

0 commit comments

Comments
 (0)