@module-federation/bridge-react 0.0.0-next-20240918063302 → 0.0.0-next-20240918073359
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -5
- package/dist/index.cjs.js +16 -1036
- package/dist/index.d.ts +4 -21
- package/dist/index.es.js +16 -1036
- package/package.json +3 -4
- package/src/create.tsx +2 -4
- package/src/index.ts +0 -1
- package/src/provider.tsx +5 -36
- package/src/remote/index.tsx +1 -13
- package/src/lifecycle.ts +0 -18
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@module-federation/bridge-react",
|
|
3
|
-
"version": "0.0.0-next-
|
|
3
|
+
"version": "0.0.0-next-20240918073359",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,13 +35,12 @@
|
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@loadable/component": "^5.16.4",
|
|
37
37
|
"react-error-boundary": "^4.0.13",
|
|
38
|
-
"@module-federation/bridge-shared": "0.0.0-next-
|
|
38
|
+
"@module-federation/bridge-shared": "0.0.0-next-20240918073359"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.9.0",
|
|
42
42
|
"react-dom": ">=16.9.0",
|
|
43
|
-
"react-router-dom": ">=4"
|
|
44
|
-
"@module-federation/runtime": "0.0.0-next-20240918063302"
|
|
43
|
+
"react-router-dom": ">=4"
|
|
45
44
|
},
|
|
46
45
|
"devDependencies": {
|
|
47
46
|
"@testing-library/react": "15.0.7",
|
package/src/create.tsx
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
+
import type { ProviderParams } from '@module-federation/bridge-shared';
|
|
3
|
+
import { LoggerInstance } from './utils';
|
|
2
4
|
import {
|
|
3
5
|
ErrorBoundary,
|
|
4
6
|
ErrorBoundaryPropsWithComponent,
|
|
5
7
|
} from 'react-error-boundary';
|
|
6
|
-
|
|
7
|
-
import { LoggerInstance } from './utils';
|
|
8
8
|
import RemoteApp from './remote';
|
|
9
9
|
|
|
10
|
-
import type { ProviderParams } from '@module-federation/bridge-shared';
|
|
11
|
-
|
|
12
10
|
export interface RenderFnParams extends ProviderParams {
|
|
13
11
|
dom?: any;
|
|
14
12
|
}
|
package/src/index.ts
CHANGED
package/src/provider.tsx
CHANGED
|
@@ -2,32 +2,23 @@ import { useLayoutEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import ReactDOM from 'react-dom';
|
|
4
4
|
import ReactDOMClient from 'react-dom/client';
|
|
5
|
+
import { RouterContext } from './context';
|
|
5
6
|
import type {
|
|
6
7
|
ProviderParams,
|
|
7
8
|
RenderFnParams,
|
|
8
9
|
} from '@module-federation/bridge-shared';
|
|
9
|
-
import { ErrorBoundary } from 'react-error-boundary';
|
|
10
|
-
|
|
11
|
-
import { RouterContext } from './context';
|
|
12
10
|
import { LoggerInstance, atLeastReact18 } from './utils';
|
|
11
|
+
import { ErrorBoundary } from 'react-error-boundary';
|
|
13
12
|
|
|
14
|
-
type RenderParams = RenderFnParams & any;
|
|
15
|
-
type DestroyParams = {
|
|
16
|
-
dom: HTMLElement;
|
|
17
|
-
};
|
|
18
13
|
type RootType = HTMLElement | ReactDOMClient.Root;
|
|
19
|
-
|
|
20
14
|
type ProviderFnParams<T> = {
|
|
21
15
|
rootComponent: React.ComponentType<T>;
|
|
22
16
|
render?: (
|
|
23
17
|
App: React.ReactElement,
|
|
24
18
|
id?: HTMLElement | string,
|
|
25
19
|
) => RootType | Promise<RootType>;
|
|
26
|
-
hooks?: {
|
|
27
|
-
beforeBridgeRender?: (params: RenderFnParams) => void;
|
|
28
|
-
beforeBridgeDestroy?: (params: DestroyParams) => void;
|
|
29
|
-
};
|
|
30
20
|
};
|
|
21
|
+
|
|
31
22
|
export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
|
|
32
23
|
return () => {
|
|
33
24
|
const rootMap = new Map<any, RootType>();
|
|
@@ -46,7 +37,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
|
|
|
46
37
|
};
|
|
47
38
|
|
|
48
39
|
return {
|
|
49
|
-
async render(info:
|
|
40
|
+
async render(info: RenderFnParams & any) {
|
|
50
41
|
LoggerInstance.log(`createBridgeComponent render Info`, info);
|
|
51
42
|
const {
|
|
52
43
|
moduleName,
|
|
@@ -70,17 +61,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
|
|
|
70
61
|
</ErrorBoundary>
|
|
71
62
|
);
|
|
72
63
|
|
|
73
|
-
// call beforeBridgeRender hook
|
|
74
|
-
if (
|
|
75
|
-
bridgeInfo?.hooks &&
|
|
76
|
-
bridgeInfo?.hooks.beforeBridgeRender &&
|
|
77
|
-
typeof bridgeInfo?.hooks.beforeBridgeRender === 'function'
|
|
78
|
-
) {
|
|
79
|
-
bridgeInfo.hooks.beforeBridgeRender(info);
|
|
80
|
-
// bridgeInfo?.beforeBridgeRender?.(info);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// call render function
|
|
84
64
|
if (atLeastReact18(React)) {
|
|
85
65
|
if (bridgeInfo?.render) {
|
|
86
66
|
// in case bridgeInfo?.render is an async function, resolve this to promise
|
|
@@ -98,21 +78,10 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
|
|
|
98
78
|
renderFn?.(rootComponentWithErrorBoundary, info.dom);
|
|
99
79
|
}
|
|
100
80
|
},
|
|
101
|
-
async destroy(info:
|
|
81
|
+
async destroy(info: { dom: HTMLElement }) {
|
|
102
82
|
LoggerInstance.log(`createBridgeComponent destroy Info`, {
|
|
103
83
|
dom: info.dom,
|
|
104
84
|
});
|
|
105
|
-
|
|
106
|
-
// call beforeBridgeDestroy hook
|
|
107
|
-
if (
|
|
108
|
-
bridgeInfo?.hooks &&
|
|
109
|
-
bridgeInfo?.hooks.beforeBridgeDestroy &&
|
|
110
|
-
typeof bridgeInfo?.hooks.beforeBridgeDestroy === 'function'
|
|
111
|
-
) {
|
|
112
|
-
bridgeInfo.hooks.beforeBridgeDestroy(info);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
// call destroy function
|
|
116
85
|
if (atLeastReact18(React)) {
|
|
117
86
|
const root = rootMap.get(info.dom);
|
|
118
87
|
(root as ReactDOMClient.Root)?.unmount();
|
package/src/remote/index.tsx
CHANGED
|
@@ -7,10 +7,9 @@ import React, {
|
|
|
7
7
|
} from 'react';
|
|
8
8
|
import * as ReactRouterDOM from 'react-router-dom';
|
|
9
9
|
import type { ProviderParams } from '@module-federation/bridge-shared';
|
|
10
|
+
import { LoggerInstance, pathJoin } from '../utils';
|
|
10
11
|
import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
|
|
11
12
|
import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
|
|
12
|
-
import bridgeHook from '../lifecycle';
|
|
13
|
-
import { LoggerInstance, pathJoin } from '../utils';
|
|
14
13
|
|
|
15
14
|
declare const __APP_VERSION__: string;
|
|
16
15
|
export interface RenderFnParams extends ProviderParams {
|
|
@@ -79,9 +78,6 @@ const RemoteAppWrapper = forwardRef(function (
|
|
|
79
78
|
`createRemoteComponent LazyComponent render >>>`,
|
|
80
79
|
renderProps,
|
|
81
80
|
);
|
|
82
|
-
bridgeHook.lifecycle.beforeBridgeRender.emit({
|
|
83
|
-
...renderProps,
|
|
84
|
-
});
|
|
85
81
|
providerReturn.render(renderProps);
|
|
86
82
|
});
|
|
87
83
|
|
|
@@ -93,14 +89,6 @@ const RemoteAppWrapper = forwardRef(function (
|
|
|
93
89
|
`createRemoteComponent LazyComponent destroy >>>`,
|
|
94
90
|
{ moduleName, basename, dom: renderDom.current },
|
|
95
91
|
);
|
|
96
|
-
bridgeHook.lifecycle.beforeBridgeDestroy.emit({
|
|
97
|
-
moduleName,
|
|
98
|
-
dom: renderDom.current,
|
|
99
|
-
basename,
|
|
100
|
-
memoryRoute,
|
|
101
|
-
fallback,
|
|
102
|
-
...resProps,
|
|
103
|
-
});
|
|
104
92
|
providerInfoRef.current?.destroy({
|
|
105
93
|
dom: renderDom.current,
|
|
106
94
|
});
|
package/src/lifecycle.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { getInstance } from '@module-federation/runtime';
|
|
2
|
-
import helper from '@module-federation/runtime/helpers';
|
|
3
|
-
|
|
4
|
-
const registerPlugin = helper.global.registerPlugins;
|
|
5
|
-
const pluginHelper = helper.global.pluginHelper;
|
|
6
|
-
const host = getInstance()!;
|
|
7
|
-
const pluginSystem = new pluginHelper.PluginSystem({
|
|
8
|
-
beforeBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], void>(),
|
|
9
|
-
beforeBridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], void>(),
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
registerPlugin<typeof pluginSystem.lifecycle, typeof pluginSystem>(
|
|
13
|
-
host?.options?.plugins,
|
|
14
|
-
[pluginSystem],
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
export default pluginSystem;
|
|
18
|
-
export type BridgeRuntimePlugin = typeof pluginSystem;
|