@module-federation/bridge-react 0.0.0-next-20240725030707 → 0.0.0-next-20240725035430
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 -2
- package/dist/index.cjs.js +103 -75
- package/dist/index.d.ts +19 -6
- package/dist/index.es.js +105 -77
- package/dist/router-v5.cjs.js +80 -0
- package/dist/router-v5.d.ts +8 -0
- package/dist/router-v5.es.js +63 -0
- package/dist/router-v6.cjs.js +87 -0
- package/dist/router-v6.d.ts +11 -0
- package/dist/router-v6.es.js +64 -0
- package/package.json +12 -2
- package/src/create.tsx +22 -22
- package/src/provider.tsx +37 -23
- package/src/remote/index.tsx +69 -56
- package/src/router-v5.tsx +78 -0
- package/src/router-v6.tsx +76 -0
- package/src/router.tsx +2 -0
- package/vite.config.ts +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
# @module-federation/bridge-react
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-20240725035430
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- chore: bump next
|
|
8
|
+
- @module-federation/bridge-shared@0.0.0-next-20240725035430
|
|
8
9
|
|
|
9
10
|
## 0.3.1
|
|
10
11
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -117,55 +117,61 @@ function hasArrayChanged() {
|
|
|
117
117
|
let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
|
|
118
118
|
return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
|
|
119
119
|
}
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
var _a, _b;
|
|
152
|
-
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
153
|
-
context.LoggerInstance.log(
|
|
154
|
-
`createRemoteComponent LazyComponent destroy >>>`,
|
|
155
|
-
{ name, basename, dom: renderDom.current }
|
|
156
|
-
);
|
|
157
|
-
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
158
|
-
dom: renderDom.current
|
|
159
|
-
});
|
|
160
|
-
}
|
|
120
|
+
const RemoteAppWrapper = React.forwardRef(function(props, ref) {
|
|
121
|
+
const RemoteApp2 = () => {
|
|
122
|
+
const {
|
|
123
|
+
name,
|
|
124
|
+
memoryRoute,
|
|
125
|
+
basename,
|
|
126
|
+
providerInfo,
|
|
127
|
+
className,
|
|
128
|
+
style,
|
|
129
|
+
...resProps
|
|
130
|
+
} = props;
|
|
131
|
+
const rootRef = ref && "current" in ref ? ref : React.useRef(null);
|
|
132
|
+
const renderDom = React.useRef(null);
|
|
133
|
+
const providerInfoRef = React.useRef(null);
|
|
134
|
+
React.useEffect(() => {
|
|
135
|
+
const renderTimeout = setTimeout(() => {
|
|
136
|
+
const providerReturn = providerInfo();
|
|
137
|
+
providerInfoRef.current = providerReturn;
|
|
138
|
+
const renderProps = {
|
|
139
|
+
name,
|
|
140
|
+
dom: rootRef.current,
|
|
141
|
+
basename,
|
|
142
|
+
memoryRoute,
|
|
143
|
+
...resProps
|
|
144
|
+
};
|
|
145
|
+
renderDom.current = rootRef.current;
|
|
146
|
+
context.LoggerInstance.log(
|
|
147
|
+
`createRemoteComponent LazyComponent render >>>`,
|
|
148
|
+
renderProps
|
|
149
|
+
);
|
|
150
|
+
providerReturn.render(renderProps);
|
|
161
151
|
});
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
152
|
+
return () => {
|
|
153
|
+
clearTimeout(renderTimeout);
|
|
154
|
+
setTimeout(() => {
|
|
155
|
+
var _a, _b;
|
|
156
|
+
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
157
|
+
context.LoggerInstance.log(
|
|
158
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
159
|
+
{ name, basename, dom: renderDom.current }
|
|
160
|
+
);
|
|
161
|
+
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
162
|
+
dom: renderDom.current
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
};
|
|
167
|
+
}, []);
|
|
168
|
+
return /* @__PURE__ */ React.createElement("div", { className, style, ref: rootRef });
|
|
169
|
+
};
|
|
170
|
+
RemoteApp2["__APP_VERSION__"] = "0.3.1";
|
|
171
|
+
return /* @__PURE__ */ React.createElement(RemoteApp2, null);
|
|
172
|
+
});
|
|
167
173
|
function withRouterData(WrappedComponent) {
|
|
168
|
-
|
|
174
|
+
const Component = React.forwardRef(function(props, ref) {
|
|
169
175
|
var _a;
|
|
170
176
|
let enableDispathPopstate = false;
|
|
171
177
|
let routerContextVal;
|
|
@@ -223,10 +229,13 @@ function withRouterData(WrappedComponent) {
|
|
|
223
229
|
setPathname(location.pathname);
|
|
224
230
|
}, [location]);
|
|
225
231
|
}
|
|
226
|
-
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
|
|
227
|
-
};
|
|
232
|
+
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
|
|
233
|
+
});
|
|
234
|
+
return React.forwardRef(function(props, ref) {
|
|
235
|
+
return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
|
|
236
|
+
});
|
|
228
237
|
}
|
|
229
|
-
const RemoteApp
|
|
238
|
+
const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
230
239
|
function createLazyRemoteComponent(info) {
|
|
231
240
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
232
241
|
return React.lazy(async () => {
|
|
@@ -243,13 +252,14 @@ function createLazyRemoteComponent(info) {
|
|
|
243
252
|
);
|
|
244
253
|
const exportFn = m2[exportName];
|
|
245
254
|
if (exportName in m2 && typeof exportFn === "function") {
|
|
246
|
-
const RemoteAppComponent = React.forwardRef((props,
|
|
255
|
+
const RemoteAppComponent = React.forwardRef((props, ref) => {
|
|
247
256
|
return /* @__PURE__ */ React.createElement(
|
|
248
|
-
RemoteApp
|
|
257
|
+
RemoteApp,
|
|
249
258
|
{
|
|
250
259
|
name: moduleName,
|
|
251
260
|
providerInfo: exportFn,
|
|
252
261
|
exportName: info.export || "default",
|
|
262
|
+
ref,
|
|
253
263
|
...props
|
|
254
264
|
}
|
|
255
265
|
);
|
|
@@ -274,10 +284,10 @@ function createLazyRemoteComponent(info) {
|
|
|
274
284
|
});
|
|
275
285
|
}
|
|
276
286
|
function createRemoteComponent(info) {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
|
|
280
|
-
};
|
|
287
|
+
return React.forwardRef(function(props, ref) {
|
|
288
|
+
const LazyComponent = createLazyRemoteComponent(info);
|
|
289
|
+
return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
|
|
290
|
+
});
|
|
281
291
|
}
|
|
282
292
|
var client = {};
|
|
283
293
|
var m = ReactDOM;
|
|
@@ -307,32 +317,50 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
307
317
|
return () => {
|
|
308
318
|
const rootMap = /* @__PURE__ */ new Map();
|
|
309
319
|
const RawComponent = (info) => {
|
|
310
|
-
const { appInfo, propsInfo } = info;
|
|
320
|
+
const { appInfo, propsInfo, ...restProps } = info;
|
|
311
321
|
const { name, memoryRoute, basename = "/" } = appInfo;
|
|
312
|
-
return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
|
|
322
|
+
return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
|
|
313
323
|
};
|
|
314
324
|
return {
|
|
315
|
-
render(info) {
|
|
325
|
+
async render(info) {
|
|
316
326
|
context.LoggerInstance.log(`createBridgeComponent render Info`, info);
|
|
317
327
|
const { name, basename, memoryRoute, ...propsInfo } = info;
|
|
318
328
|
if (context.atLeastReact18(React__namespace)) {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
329
|
+
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
|
|
330
|
+
Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
|
|
331
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
332
|
+
RawComponent,
|
|
333
|
+
{
|
|
334
|
+
propsInfo,
|
|
335
|
+
appInfo: {
|
|
336
|
+
name,
|
|
337
|
+
basename,
|
|
338
|
+
memoryRoute
|
|
339
|
+
}
|
|
330
340
|
}
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
341
|
+
),
|
|
342
|
+
info.dom
|
|
343
|
+
)).then((root) => rootMap.set(info.dom, root));
|
|
344
|
+
} else {
|
|
345
|
+
const root = client.createRoot(info.dom);
|
|
346
|
+
root.render(
|
|
347
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
348
|
+
RawComponent,
|
|
349
|
+
{
|
|
350
|
+
propsInfo,
|
|
351
|
+
appInfo: {
|
|
352
|
+
name,
|
|
353
|
+
basename,
|
|
354
|
+
memoryRoute
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
)
|
|
358
|
+
);
|
|
359
|
+
rootMap.set(info.dom, root);
|
|
360
|
+
}
|
|
334
361
|
} else {
|
|
335
|
-
ReactDOM.render
|
|
362
|
+
const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
|
|
363
|
+
renderFunc(
|
|
336
364
|
/* @__PURE__ */ React__namespace.createElement(
|
|
337
365
|
RawComponent,
|
|
338
366
|
{
|
|
@@ -348,7 +376,7 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
348
376
|
);
|
|
349
377
|
}
|
|
350
378
|
},
|
|
351
|
-
destroy(info) {
|
|
379
|
+
async destroy(info) {
|
|
352
380
|
context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
|
|
353
381
|
dom: info.dom
|
|
354
382
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
2
3
|
import { default as default_2 } from 'react';
|
|
4
|
+
import { default as default_3 } from 'react-dom/client';
|
|
3
5
|
import { ErrorInfo } from 'react';
|
|
6
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
4
7
|
import { PropsWithChildren } from 'react';
|
|
8
|
+
import { PropsWithoutRef } from 'react';
|
|
5
9
|
import * as React_2 from 'react';
|
|
10
|
+
import { RefAttributes } from 'react';
|
|
6
11
|
|
|
7
12
|
export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
|
|
8
|
-
render(info: RenderFnParams & any): void
|
|
13
|
+
render(info: RenderFnParams & any): Promise<void>;
|
|
9
14
|
destroy(info: {
|
|
10
15
|
dom: HTMLElement;
|
|
11
|
-
}): void
|
|
16
|
+
}): Promise<void>;
|
|
12
17
|
rawComponent: React_2.ComponentType<T>;
|
|
13
18
|
__BRIDGE_FN__: (_args: T) => void;
|
|
14
19
|
};
|
|
@@ -18,10 +23,7 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
|
|
|
18
23
|
loading: default_2.ReactNode;
|
|
19
24
|
fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
|
|
20
25
|
export?: E;
|
|
21
|
-
}):
|
|
22
|
-
basename?: ProviderParams['basename'];
|
|
23
|
-
memoryRoute?: ProviderParams['memoryRoute'];
|
|
24
|
-
} & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;
|
|
26
|
+
}): ForwardRefExoticComponent<PropsWithoutRef<RemoteProps> & RefAttributes<HTMLElement | HTMLDivElement>>;
|
|
25
27
|
|
|
26
28
|
declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
|
|
27
29
|
fallback?: never;
|
|
@@ -49,6 +51,7 @@ declare type FallbackProps = {
|
|
|
49
51
|
|
|
50
52
|
declare type ProviderFnParams<T> = {
|
|
51
53
|
rootComponent: React_2.ComponentType<T>;
|
|
54
|
+
render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
|
|
52
55
|
};
|
|
53
56
|
|
|
54
57
|
export declare interface ProviderParams {
|
|
@@ -57,10 +60,20 @@ export declare interface ProviderParams {
|
|
|
57
60
|
memoryRoute?: {
|
|
58
61
|
entryPath: string;
|
|
59
62
|
};
|
|
63
|
+
style?: CSSProperties;
|
|
64
|
+
className?: string | string[];
|
|
60
65
|
}
|
|
61
66
|
|
|
67
|
+
declare type RemoteProps = {
|
|
68
|
+
basename?: ProviderParams['basename'];
|
|
69
|
+
memoryRoute?: ProviderParams['memoryRoute'];
|
|
70
|
+
[key: string]: any;
|
|
71
|
+
};
|
|
72
|
+
|
|
62
73
|
export declare interface RenderFnParams extends ProviderParams {
|
|
63
74
|
dom: HTMLElement;
|
|
64
75
|
}
|
|
65
76
|
|
|
77
|
+
declare type RootType = HTMLElement | default_3.Root;
|
|
78
|
+
|
|
66
79
|
export { }
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React__default, { createContext, Component, createElement, isValidElement,
|
|
3
|
-
import {
|
|
2
|
+
import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
|
|
3
|
+
import { L as LoggerInstance, p as pathJoin, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
|
|
4
4
|
import * as ReactRouterDOM from "react-router-dom";
|
|
5
5
|
import ReactDOM from "react-dom";
|
|
6
6
|
const ErrorBoundaryContext = createContext(null);
|
|
@@ -98,55 +98,61 @@ function hasArrayChanged() {
|
|
|
98
98
|
let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
|
|
99
99
|
return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
|
|
100
100
|
}
|
|
101
|
-
const
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
var _a, _b;
|
|
133
|
-
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
134
|
-
LoggerInstance.log(
|
|
135
|
-
`createRemoteComponent LazyComponent destroy >>>`,
|
|
136
|
-
{ name, basename, dom: renderDom.current }
|
|
137
|
-
);
|
|
138
|
-
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
139
|
-
dom: renderDom.current
|
|
140
|
-
});
|
|
141
|
-
}
|
|
101
|
+
const RemoteAppWrapper = forwardRef(function(props, ref) {
|
|
102
|
+
const RemoteApp2 = () => {
|
|
103
|
+
const {
|
|
104
|
+
name,
|
|
105
|
+
memoryRoute,
|
|
106
|
+
basename,
|
|
107
|
+
providerInfo,
|
|
108
|
+
className,
|
|
109
|
+
style,
|
|
110
|
+
...resProps
|
|
111
|
+
} = props;
|
|
112
|
+
const rootRef = ref && "current" in ref ? ref : useRef(null);
|
|
113
|
+
const renderDom = useRef(null);
|
|
114
|
+
const providerInfoRef = useRef(null);
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
const renderTimeout = setTimeout(() => {
|
|
117
|
+
const providerReturn = providerInfo();
|
|
118
|
+
providerInfoRef.current = providerReturn;
|
|
119
|
+
const renderProps = {
|
|
120
|
+
name,
|
|
121
|
+
dom: rootRef.current,
|
|
122
|
+
basename,
|
|
123
|
+
memoryRoute,
|
|
124
|
+
...resProps
|
|
125
|
+
};
|
|
126
|
+
renderDom.current = rootRef.current;
|
|
127
|
+
LoggerInstance.log(
|
|
128
|
+
`createRemoteComponent LazyComponent render >>>`,
|
|
129
|
+
renderProps
|
|
130
|
+
);
|
|
131
|
+
providerReturn.render(renderProps);
|
|
142
132
|
});
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
133
|
+
return () => {
|
|
134
|
+
clearTimeout(renderTimeout);
|
|
135
|
+
setTimeout(() => {
|
|
136
|
+
var _a, _b;
|
|
137
|
+
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
138
|
+
LoggerInstance.log(
|
|
139
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
140
|
+
{ name, basename, dom: renderDom.current }
|
|
141
|
+
);
|
|
142
|
+
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
143
|
+
dom: renderDom.current
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
}, []);
|
|
149
|
+
return /* @__PURE__ */ React__default.createElement("div", { className, style, ref: rootRef });
|
|
150
|
+
};
|
|
151
|
+
RemoteApp2["__APP_VERSION__"] = "0.3.1";
|
|
152
|
+
return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
|
|
153
|
+
});
|
|
148
154
|
function withRouterData(WrappedComponent) {
|
|
149
|
-
|
|
155
|
+
const Component2 = forwardRef(function(props, ref) {
|
|
150
156
|
var _a;
|
|
151
157
|
let enableDispathPopstate = false;
|
|
152
158
|
let routerContextVal;
|
|
@@ -204,10 +210,13 @@ function withRouterData(WrappedComponent) {
|
|
|
204
210
|
setPathname(location.pathname);
|
|
205
211
|
}, [location]);
|
|
206
212
|
}
|
|
207
|
-
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
|
|
208
|
-
};
|
|
213
|
+
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
|
|
214
|
+
});
|
|
215
|
+
return forwardRef(function(props, ref) {
|
|
216
|
+
return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
|
|
217
|
+
});
|
|
209
218
|
}
|
|
210
|
-
const RemoteApp
|
|
219
|
+
const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
211
220
|
function createLazyRemoteComponent(info) {
|
|
212
221
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
213
222
|
return React__default.lazy(async () => {
|
|
@@ -224,13 +233,14 @@ function createLazyRemoteComponent(info) {
|
|
|
224
233
|
);
|
|
225
234
|
const exportFn = m2[exportName];
|
|
226
235
|
if (exportName in m2 && typeof exportFn === "function") {
|
|
227
|
-
const RemoteAppComponent = forwardRef((props,
|
|
236
|
+
const RemoteAppComponent = forwardRef((props, ref) => {
|
|
228
237
|
return /* @__PURE__ */ React__default.createElement(
|
|
229
|
-
RemoteApp
|
|
238
|
+
RemoteApp,
|
|
230
239
|
{
|
|
231
240
|
name: moduleName,
|
|
232
241
|
providerInfo: exportFn,
|
|
233
242
|
exportName: info.export || "default",
|
|
243
|
+
ref,
|
|
234
244
|
...props
|
|
235
245
|
}
|
|
236
246
|
);
|
|
@@ -255,10 +265,10 @@ function createLazyRemoteComponent(info) {
|
|
|
255
265
|
});
|
|
256
266
|
}
|
|
257
267
|
function createRemoteComponent(info) {
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
|
|
261
|
-
};
|
|
268
|
+
return forwardRef(function(props, ref) {
|
|
269
|
+
const LazyComponent = createLazyRemoteComponent(info);
|
|
270
|
+
return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })));
|
|
271
|
+
});
|
|
262
272
|
}
|
|
263
273
|
var client = {};
|
|
264
274
|
var m = ReactDOM;
|
|
@@ -288,32 +298,50 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
288
298
|
return () => {
|
|
289
299
|
const rootMap = /* @__PURE__ */ new Map();
|
|
290
300
|
const RawComponent = (info) => {
|
|
291
|
-
const { appInfo, propsInfo } = info;
|
|
301
|
+
const { appInfo, propsInfo, ...restProps } = info;
|
|
292
302
|
const { name, memoryRoute, basename = "/" } = appInfo;
|
|
293
|
-
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
|
|
303
|
+
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
|
|
294
304
|
};
|
|
295
305
|
return {
|
|
296
|
-
render(info) {
|
|
306
|
+
async render(info) {
|
|
297
307
|
LoggerInstance.log(`createBridgeComponent render Info`, info);
|
|
298
308
|
const { name, basename, memoryRoute, ...propsInfo } = info;
|
|
299
309
|
if (atLeastReact18(React)) {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
310
|
+
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
|
|
311
|
+
Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
|
|
312
|
+
/* @__PURE__ */ React.createElement(
|
|
313
|
+
RawComponent,
|
|
314
|
+
{
|
|
315
|
+
propsInfo,
|
|
316
|
+
appInfo: {
|
|
317
|
+
name,
|
|
318
|
+
basename,
|
|
319
|
+
memoryRoute
|
|
320
|
+
}
|
|
311
321
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
322
|
+
),
|
|
323
|
+
info.dom
|
|
324
|
+
)).then((root) => rootMap.set(info.dom, root));
|
|
325
|
+
} else {
|
|
326
|
+
const root = client.createRoot(info.dom);
|
|
327
|
+
root.render(
|
|
328
|
+
/* @__PURE__ */ React.createElement(
|
|
329
|
+
RawComponent,
|
|
330
|
+
{
|
|
331
|
+
propsInfo,
|
|
332
|
+
appInfo: {
|
|
333
|
+
name,
|
|
334
|
+
basename,
|
|
335
|
+
memoryRoute
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
)
|
|
339
|
+
);
|
|
340
|
+
rootMap.set(info.dom, root);
|
|
341
|
+
}
|
|
315
342
|
} else {
|
|
316
|
-
ReactDOM.render
|
|
343
|
+
const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
|
|
344
|
+
renderFunc(
|
|
317
345
|
/* @__PURE__ */ React.createElement(
|
|
318
346
|
RawComponent,
|
|
319
347
|
{
|
|
@@ -329,7 +357,7 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
329
357
|
);
|
|
330
358
|
}
|
|
331
359
|
},
|
|
332
|
-
destroy(info) {
|
|
360
|
+
async destroy(info) {
|
|
333
361
|
LoggerInstance.log(`createBridgeComponent destroy Info`, {
|
|
334
362
|
dom: info.dom
|
|
335
363
|
});
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const ReactRouterDom = require("react-router-dom/index.js");
|
|
5
|
+
const context = require("./context--mtFt3tp.cjs");
|
|
6
|
+
function _interopNamespaceDefault(e) {
|
|
7
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
8
|
+
if (e) {
|
|
9
|
+
for (const k in e) {
|
|
10
|
+
if (k !== "default") {
|
|
11
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
12
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: () => e[k]
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
n.default = e;
|
|
20
|
+
return Object.freeze(n);
|
|
21
|
+
}
|
|
22
|
+
const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
|
|
23
|
+
function WraperRouter(props) {
|
|
24
|
+
const { basename, ...propsRes } = props;
|
|
25
|
+
const routerContextProps = React.useContext(context.RouterContext) || {};
|
|
26
|
+
context.LoggerInstance.log(`WraperRouter info >>>`, {
|
|
27
|
+
...routerContextProps,
|
|
28
|
+
routerContextProps,
|
|
29
|
+
WraperRouterProps: props
|
|
30
|
+
});
|
|
31
|
+
if (!routerContextProps)
|
|
32
|
+
return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
|
|
33
|
+
if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
|
|
34
|
+
return /* @__PURE__ */ React.createElement(
|
|
35
|
+
ReactRouterDom__namespace.MemoryRouter,
|
|
36
|
+
{
|
|
37
|
+
...props,
|
|
38
|
+
initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
return /* @__PURE__ */ React.createElement(
|
|
43
|
+
ReactRouterDom__namespace.BrowserRouter,
|
|
44
|
+
{
|
|
45
|
+
...propsRes,
|
|
46
|
+
basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
function WraperRouterProvider(props) {
|
|
51
|
+
const { router, ...propsRes } = props;
|
|
52
|
+
const routerContextProps = React.useContext(context.RouterContext) || {};
|
|
53
|
+
const routers = router.routes;
|
|
54
|
+
context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
|
|
55
|
+
...routerContextProps,
|
|
56
|
+
routerContextProps,
|
|
57
|
+
WraperRouterProviderProps: props,
|
|
58
|
+
router
|
|
59
|
+
});
|
|
60
|
+
const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
|
|
61
|
+
const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
|
|
62
|
+
const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
|
|
63
|
+
if (!routerContextProps)
|
|
64
|
+
return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
|
|
65
|
+
if (routerContextProps.memoryRoute) {
|
|
66
|
+
const MemeoryRouterInstance = createMemoryRouter(routers, {
|
|
67
|
+
initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
|
|
68
|
+
});
|
|
69
|
+
return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
|
|
70
|
+
} else {
|
|
71
|
+
const BrowserRouterInstance = createBrowserRouter(routers, {
|
|
72
|
+
basename: routerContextProps.basename,
|
|
73
|
+
future: router.future,
|
|
74
|
+
window: router.window
|
|
75
|
+
});
|
|
76
|
+
return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
exports.BrowserRouter = WraperRouter;
|
|
80
|
+
exports.RouterProvider = WraperRouterProvider;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
|
+
import * as ReactRouterDom from 'react-router-dom/index.js';
|
|
3
|
+
|
|
4
|
+
export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
|
|
5
|
+
|
|
6
|
+
export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
|
|
7
|
+
|
|
8
|
+
export { }
|