@module-federation/bridge-react 0.0.0-next-20240723033044 → 0.0.0-next-20240723095610
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 -14
- package/dist/index.cjs.js +101 -75
- package/dist/index.d.ts +16 -6
- package/dist/index.es.js +103 -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 +67 -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,22 +1,11 @@
|
|
|
1
1
|
# @module-federation/bridge-react
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-20240723095610
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
## 0.2.8
|
|
10
|
-
|
|
11
|
-
### Patch Changes
|
|
12
|
-
|
|
13
|
-
- @module-federation/bridge-shared@0.2.8
|
|
14
|
-
|
|
15
|
-
## 0.2.7
|
|
16
|
-
|
|
17
|
-
### Patch Changes
|
|
18
|
-
|
|
19
|
-
- @module-federation/bridge-shared@0.2.7
|
|
7
|
+
- chore: bump next
|
|
8
|
+
- @module-federation/bridge-shared@0.0.0-next-20240723095610
|
|
20
9
|
|
|
21
10
|
## 0.2.6
|
|
22
11
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -117,55 +117,59 @@ 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
|
-
clearTimeout(renderTimeout);
|
|
150
|
-
setTimeout(() => {
|
|
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
|
+
...resProps
|
|
128
|
+
} = props;
|
|
129
|
+
const rootRef = ref && "current" in ref ? ref : React.useRef(null);
|
|
130
|
+
const renderDom = React.useRef(null);
|
|
131
|
+
const providerInfoRef = React.useRef(null);
|
|
132
|
+
React.useEffect(() => {
|
|
133
|
+
const renderTimeout = setTimeout(() => {
|
|
134
|
+
const providerReturn = providerInfo();
|
|
135
|
+
providerInfoRef.current = providerReturn;
|
|
136
|
+
const renderProps = {
|
|
137
|
+
name,
|
|
138
|
+
dom: rootRef.current,
|
|
139
|
+
basename,
|
|
140
|
+
memoryRoute,
|
|
141
|
+
...resProps
|
|
142
|
+
};
|
|
143
|
+
renderDom.current = rootRef.current;
|
|
144
|
+
context.LoggerInstance.log(
|
|
145
|
+
`createRemoteComponent LazyComponent render >>>`,
|
|
146
|
+
renderProps
|
|
147
|
+
);
|
|
148
|
+
providerReturn.render(renderProps);
|
|
161
149
|
});
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
150
|
+
return () => {
|
|
151
|
+
clearTimeout(renderTimeout);
|
|
152
|
+
setTimeout(() => {
|
|
153
|
+
var _a, _b;
|
|
154
|
+
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
155
|
+
context.LoggerInstance.log(
|
|
156
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
157
|
+
{ name, basename, dom: renderDom.current }
|
|
158
|
+
);
|
|
159
|
+
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
160
|
+
dom: renderDom.current
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
};
|
|
165
|
+
}, []);
|
|
166
|
+
return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
|
|
167
|
+
};
|
|
168
|
+
RemoteApp2["__APP_VERSION__"] = "0.2.6";
|
|
169
|
+
return /* @__PURE__ */ React.createElement(RemoteApp2, null);
|
|
170
|
+
});
|
|
167
171
|
function withRouterData(WrappedComponent) {
|
|
168
|
-
|
|
172
|
+
const Component = React.forwardRef(function(props, ref) {
|
|
169
173
|
var _a;
|
|
170
174
|
let enableDispathPopstate = false;
|
|
171
175
|
let routerContextVal;
|
|
@@ -223,10 +227,13 @@ function withRouterData(WrappedComponent) {
|
|
|
223
227
|
setPathname(location.pathname);
|
|
224
228
|
}, [location]);
|
|
225
229
|
}
|
|
226
|
-
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
|
|
227
|
-
};
|
|
230
|
+
return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
|
|
231
|
+
});
|
|
232
|
+
return React.forwardRef(function(props, ref) {
|
|
233
|
+
return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
|
|
234
|
+
});
|
|
228
235
|
}
|
|
229
|
-
const RemoteApp
|
|
236
|
+
const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
230
237
|
function createLazyRemoteComponent(info) {
|
|
231
238
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
232
239
|
return React.lazy(async () => {
|
|
@@ -243,13 +250,14 @@ function createLazyRemoteComponent(info) {
|
|
|
243
250
|
);
|
|
244
251
|
const exportFn = m2[exportName];
|
|
245
252
|
if (exportName in m2 && typeof exportFn === "function") {
|
|
246
|
-
const RemoteAppComponent = React.forwardRef((props,
|
|
253
|
+
const RemoteAppComponent = React.forwardRef((props, ref) => {
|
|
247
254
|
return /* @__PURE__ */ React.createElement(
|
|
248
|
-
RemoteApp
|
|
255
|
+
RemoteApp,
|
|
249
256
|
{
|
|
250
257
|
name: moduleName,
|
|
251
258
|
providerInfo: exportFn,
|
|
252
259
|
exportName: info.export || "default",
|
|
260
|
+
ref,
|
|
253
261
|
...props
|
|
254
262
|
}
|
|
255
263
|
);
|
|
@@ -274,10 +282,10 @@ function createLazyRemoteComponent(info) {
|
|
|
274
282
|
});
|
|
275
283
|
}
|
|
276
284
|
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
|
-
};
|
|
285
|
+
return React.forwardRef(function(props, ref) {
|
|
286
|
+
const LazyComponent = createLazyRemoteComponent(info);
|
|
287
|
+
return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
|
|
288
|
+
});
|
|
281
289
|
}
|
|
282
290
|
var client = {};
|
|
283
291
|
var m = ReactDOM;
|
|
@@ -307,32 +315,50 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
307
315
|
return () => {
|
|
308
316
|
const rootMap = /* @__PURE__ */ new Map();
|
|
309
317
|
const RawComponent = (info) => {
|
|
310
|
-
const { appInfo, propsInfo } = info;
|
|
318
|
+
const { appInfo, propsInfo, ...restProps } = info;
|
|
311
319
|
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 }));
|
|
320
|
+
return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
|
|
313
321
|
};
|
|
314
322
|
return {
|
|
315
|
-
render(info) {
|
|
323
|
+
async render(info) {
|
|
316
324
|
context.LoggerInstance.log(`createBridgeComponent render Info`, info);
|
|
317
325
|
const { name, basename, memoryRoute, ...propsInfo } = info;
|
|
318
326
|
if (context.atLeastReact18(React__namespace)) {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
327
|
+
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
|
|
328
|
+
Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
|
|
329
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
330
|
+
RawComponent,
|
|
331
|
+
{
|
|
332
|
+
propsInfo,
|
|
333
|
+
appInfo: {
|
|
334
|
+
name,
|
|
335
|
+
basename,
|
|
336
|
+
memoryRoute
|
|
337
|
+
}
|
|
330
338
|
}
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
339
|
+
),
|
|
340
|
+
info.dom
|
|
341
|
+
)).then((root) => rootMap.set(info.dom, root));
|
|
342
|
+
} else {
|
|
343
|
+
const root = client.createRoot(info.dom);
|
|
344
|
+
root.render(
|
|
345
|
+
/* @__PURE__ */ React__namespace.createElement(
|
|
346
|
+
RawComponent,
|
|
347
|
+
{
|
|
348
|
+
propsInfo,
|
|
349
|
+
appInfo: {
|
|
350
|
+
name,
|
|
351
|
+
basename,
|
|
352
|
+
memoryRoute
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
);
|
|
357
|
+
rootMap.set(info.dom, root);
|
|
358
|
+
}
|
|
334
359
|
} else {
|
|
335
|
-
ReactDOM.render
|
|
360
|
+
const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
|
|
361
|
+
renderFunc(
|
|
336
362
|
/* @__PURE__ */ React__namespace.createElement(
|
|
337
363
|
RawComponent,
|
|
338
364
|
{
|
|
@@ -348,7 +374,7 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
348
374
|
);
|
|
349
375
|
}
|
|
350
376
|
},
|
|
351
|
-
destroy(info) {
|
|
377
|
+
async destroy(info) {
|
|
352
378
|
context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
|
|
353
379
|
dom: info.dom
|
|
354
380
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
2
|
import { default as default_2 } from 'react';
|
|
3
|
+
import { default as default_3 } from 'react-dom/client';
|
|
3
4
|
import { ErrorInfo } from 'react';
|
|
5
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
4
6
|
import { PropsWithChildren } from 'react';
|
|
7
|
+
import { PropsWithoutRef } from 'react';
|
|
5
8
|
import * as React_2 from 'react';
|
|
9
|
+
import { RefAttributes } from 'react';
|
|
6
10
|
|
|
7
11
|
export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
|
|
8
|
-
render(info: RenderFnParams & any): void
|
|
12
|
+
render(info: RenderFnParams & any): Promise<void>;
|
|
9
13
|
destroy(info: {
|
|
10
14
|
dom: HTMLElement;
|
|
11
|
-
}): void
|
|
15
|
+
}): Promise<void>;
|
|
12
16
|
rawComponent: React_2.ComponentType<T>;
|
|
13
17
|
__BRIDGE_FN__: (_args: T) => void;
|
|
14
18
|
};
|
|
@@ -18,10 +22,7 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
|
|
|
18
22
|
loading: default_2.ReactNode;
|
|
19
23
|
fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
|
|
20
24
|
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;
|
|
25
|
+
}): ForwardRefExoticComponent<PropsWithoutRef<RemoteProps> & RefAttributes<HTMLElement | HTMLDivElement>>;
|
|
25
26
|
|
|
26
27
|
declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
|
|
27
28
|
fallback?: never;
|
|
@@ -49,6 +50,7 @@ declare type FallbackProps = {
|
|
|
49
50
|
|
|
50
51
|
declare type ProviderFnParams<T> = {
|
|
51
52
|
rootComponent: React_2.ComponentType<T>;
|
|
53
|
+
render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
|
|
52
54
|
};
|
|
53
55
|
|
|
54
56
|
export declare interface ProviderParams {
|
|
@@ -59,8 +61,16 @@ export declare interface ProviderParams {
|
|
|
59
61
|
};
|
|
60
62
|
}
|
|
61
63
|
|
|
64
|
+
declare type RemoteProps = {
|
|
65
|
+
basename?: ProviderParams['basename'];
|
|
66
|
+
memoryRoute?: ProviderParams['memoryRoute'];
|
|
67
|
+
[key: string]: any;
|
|
68
|
+
};
|
|
69
|
+
|
|
62
70
|
export declare interface RenderFnParams extends ProviderParams {
|
|
63
71
|
dom: HTMLElement;
|
|
64
72
|
}
|
|
65
73
|
|
|
74
|
+
declare type RootType = HTMLElement | default_3.Root;
|
|
75
|
+
|
|
66
76
|
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,59 @@ 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
|
-
clearTimeout(renderTimeout);
|
|
131
|
-
setTimeout(() => {
|
|
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
|
+
...resProps
|
|
109
|
+
} = props;
|
|
110
|
+
const rootRef = ref && "current" in ref ? ref : useRef(null);
|
|
111
|
+
const renderDom = useRef(null);
|
|
112
|
+
const providerInfoRef = useRef(null);
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
const renderTimeout = setTimeout(() => {
|
|
115
|
+
const providerReturn = providerInfo();
|
|
116
|
+
providerInfoRef.current = providerReturn;
|
|
117
|
+
const renderProps = {
|
|
118
|
+
name,
|
|
119
|
+
dom: rootRef.current,
|
|
120
|
+
basename,
|
|
121
|
+
memoryRoute,
|
|
122
|
+
...resProps
|
|
123
|
+
};
|
|
124
|
+
renderDom.current = rootRef.current;
|
|
125
|
+
LoggerInstance.log(
|
|
126
|
+
`createRemoteComponent LazyComponent render >>>`,
|
|
127
|
+
renderProps
|
|
128
|
+
);
|
|
129
|
+
providerReturn.render(renderProps);
|
|
142
130
|
});
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
131
|
+
return () => {
|
|
132
|
+
clearTimeout(renderTimeout);
|
|
133
|
+
setTimeout(() => {
|
|
134
|
+
var _a, _b;
|
|
135
|
+
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
136
|
+
LoggerInstance.log(
|
|
137
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
138
|
+
{ name, basename, dom: renderDom.current }
|
|
139
|
+
);
|
|
140
|
+
(_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
|
|
141
|
+
dom: renderDom.current
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
};
|
|
146
|
+
}, []);
|
|
147
|
+
return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
|
|
148
|
+
};
|
|
149
|
+
RemoteApp2["__APP_VERSION__"] = "0.2.6";
|
|
150
|
+
return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
|
|
151
|
+
});
|
|
148
152
|
function withRouterData(WrappedComponent) {
|
|
149
|
-
|
|
153
|
+
const Component2 = forwardRef(function(props, ref) {
|
|
150
154
|
var _a;
|
|
151
155
|
let enableDispathPopstate = false;
|
|
152
156
|
let routerContextVal;
|
|
@@ -204,10 +208,13 @@ function withRouterData(WrappedComponent) {
|
|
|
204
208
|
setPathname(location.pathname);
|
|
205
209
|
}, [location]);
|
|
206
210
|
}
|
|
207
|
-
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
|
|
208
|
-
};
|
|
211
|
+
return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
|
|
212
|
+
});
|
|
213
|
+
return forwardRef(function(props, ref) {
|
|
214
|
+
return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
|
|
215
|
+
});
|
|
209
216
|
}
|
|
210
|
-
const RemoteApp
|
|
217
|
+
const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
211
218
|
function createLazyRemoteComponent(info) {
|
|
212
219
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
213
220
|
return React__default.lazy(async () => {
|
|
@@ -224,13 +231,14 @@ function createLazyRemoteComponent(info) {
|
|
|
224
231
|
);
|
|
225
232
|
const exportFn = m2[exportName];
|
|
226
233
|
if (exportName in m2 && typeof exportFn === "function") {
|
|
227
|
-
const RemoteAppComponent = forwardRef((props,
|
|
234
|
+
const RemoteAppComponent = forwardRef((props, ref) => {
|
|
228
235
|
return /* @__PURE__ */ React__default.createElement(
|
|
229
|
-
RemoteApp
|
|
236
|
+
RemoteApp,
|
|
230
237
|
{
|
|
231
238
|
name: moduleName,
|
|
232
239
|
providerInfo: exportFn,
|
|
233
240
|
exportName: info.export || "default",
|
|
241
|
+
ref,
|
|
234
242
|
...props
|
|
235
243
|
}
|
|
236
244
|
);
|
|
@@ -255,10 +263,10 @@ function createLazyRemoteComponent(info) {
|
|
|
255
263
|
});
|
|
256
264
|
}
|
|
257
265
|
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
|
-
};
|
|
266
|
+
return forwardRef(function(props, ref) {
|
|
267
|
+
const LazyComponent = createLazyRemoteComponent(info);
|
|
268
|
+
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 })));
|
|
269
|
+
});
|
|
262
270
|
}
|
|
263
271
|
var client = {};
|
|
264
272
|
var m = ReactDOM;
|
|
@@ -288,32 +296,50 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
288
296
|
return () => {
|
|
289
297
|
const rootMap = /* @__PURE__ */ new Map();
|
|
290
298
|
const RawComponent = (info) => {
|
|
291
|
-
const { appInfo, propsInfo } = info;
|
|
299
|
+
const { appInfo, propsInfo, ...restProps } = info;
|
|
292
300
|
const { name, memoryRoute, basename = "/" } = appInfo;
|
|
293
|
-
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
|
|
301
|
+
return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
|
|
294
302
|
};
|
|
295
303
|
return {
|
|
296
|
-
render(info) {
|
|
304
|
+
async render(info) {
|
|
297
305
|
LoggerInstance.log(`createBridgeComponent render Info`, info);
|
|
298
306
|
const { name, basename, memoryRoute, ...propsInfo } = info;
|
|
299
307
|
if (atLeastReact18(React)) {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
308
|
+
if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
|
|
309
|
+
Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
|
|
310
|
+
/* @__PURE__ */ React.createElement(
|
|
311
|
+
RawComponent,
|
|
312
|
+
{
|
|
313
|
+
propsInfo,
|
|
314
|
+
appInfo: {
|
|
315
|
+
name,
|
|
316
|
+
basename,
|
|
317
|
+
memoryRoute
|
|
318
|
+
}
|
|
311
319
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
320
|
+
),
|
|
321
|
+
info.dom
|
|
322
|
+
)).then((root) => rootMap.set(info.dom, root));
|
|
323
|
+
} else {
|
|
324
|
+
const root = client.createRoot(info.dom);
|
|
325
|
+
root.render(
|
|
326
|
+
/* @__PURE__ */ React.createElement(
|
|
327
|
+
RawComponent,
|
|
328
|
+
{
|
|
329
|
+
propsInfo,
|
|
330
|
+
appInfo: {
|
|
331
|
+
name,
|
|
332
|
+
basename,
|
|
333
|
+
memoryRoute
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
)
|
|
337
|
+
);
|
|
338
|
+
rootMap.set(info.dom, root);
|
|
339
|
+
}
|
|
315
340
|
} else {
|
|
316
|
-
ReactDOM.render
|
|
341
|
+
const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
|
|
342
|
+
renderFunc(
|
|
317
343
|
/* @__PURE__ */ React.createElement(
|
|
318
344
|
RawComponent,
|
|
319
345
|
{
|
|
@@ -329,7 +355,7 @@ function createBridgeComponent(bridgeInfo) {
|
|
|
329
355
|
);
|
|
330
356
|
}
|
|
331
357
|
},
|
|
332
|
-
destroy(info) {
|
|
358
|
+
async destroy(info) {
|
|
333
359
|
LoggerInstance.log(`createBridgeComponent destroy Info`, {
|
|
334
360
|
dom: info.dom
|
|
335
361
|
});
|
|
@@ -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 { }
|