@module-federation/bridge-react 0.0.0-next-20241118092546 → 0.0.0-next-20241118100312

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.
@@ -1,457 +0,0 @@
1
- import * as React from "react";
2
- import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
3
- import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-CUbFnlO5.js";
4
- import * as ReactRouterDOM from "react-router-dom";
5
- import ReactDOM from "react-dom";
6
- const ErrorBoundaryContext = createContext(null);
7
- const initialState = {
8
- didCatch: false,
9
- error: null
10
- };
11
- class ErrorBoundary extends Component {
12
- constructor(props) {
13
- super(props);
14
- this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
15
- this.state = initialState;
16
- }
17
- static getDerivedStateFromError(error) {
18
- return {
19
- didCatch: true,
20
- error
21
- };
22
- }
23
- resetErrorBoundary() {
24
- const {
25
- error
26
- } = this.state;
27
- if (error !== null) {
28
- var _this$props$onReset, _this$props;
29
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
30
- args[_key] = arguments[_key];
31
- }
32
- (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
33
- args,
34
- reason: "imperative-api"
35
- });
36
- this.setState(initialState);
37
- }
38
- }
39
- componentDidCatch(error, info) {
40
- var _this$props$onError, _this$props2;
41
- (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
42
- }
43
- componentDidUpdate(prevProps, prevState) {
44
- const {
45
- didCatch
46
- } = this.state;
47
- const {
48
- resetKeys
49
- } = this.props;
50
- if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
51
- var _this$props$onReset2, _this$props3;
52
- (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
53
- next: resetKeys,
54
- prev: prevProps.resetKeys,
55
- reason: "keys"
56
- });
57
- this.setState(initialState);
58
- }
59
- }
60
- render() {
61
- const {
62
- children,
63
- fallbackRender,
64
- FallbackComponent,
65
- fallback
66
- } = this.props;
67
- const {
68
- didCatch,
69
- error
70
- } = this.state;
71
- let childToRender = children;
72
- if (didCatch) {
73
- const props = {
74
- error,
75
- resetErrorBoundary: this.resetErrorBoundary
76
- };
77
- if (typeof fallbackRender === "function") {
78
- childToRender = fallbackRender(props);
79
- } else if (FallbackComponent) {
80
- childToRender = createElement(FallbackComponent, props);
81
- } else if (fallback === null || isValidElement(fallback)) {
82
- childToRender = fallback;
83
- } else {
84
- throw error;
85
- }
86
- }
87
- return createElement(ErrorBoundaryContext.Provider, {
88
- value: {
89
- didCatch,
90
- error,
91
- resetErrorBoundary: this.resetErrorBoundary
92
- }
93
- }, childToRender);
94
- }
95
- }
96
- function hasArrayChanged() {
97
- let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
98
- let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
99
- return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
100
- }
101
- function e() {
102
- const t = new PopStateEvent("popstate", { state: window.history.state });
103
- window.dispatchEvent(t);
104
- }
105
- const RemoteAppWrapper = forwardRef(function(props, ref) {
106
- const RemoteApp2 = () => {
107
- LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
108
- const {
109
- moduleName,
110
- memoryRoute,
111
- basename,
112
- providerInfo,
113
- className,
114
- style,
115
- fallback,
116
- instance,
117
- ...resProps
118
- } = props;
119
- const rootRef = ref && "current" in ref ? ref : useRef(null);
120
- const renderDom = useRef(null);
121
- const providerInfoRef = useRef(null);
122
- LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
123
- useEffect(() => {
124
- const renderTimeout = setTimeout(() => {
125
- var _a, _b, _c, _d, _e, _f;
126
- const providerReturn = providerInfo();
127
- providerInfoRef.current = providerReturn;
128
- let renderProps = {
129
- moduleName,
130
- dom: rootRef.current,
131
- basename,
132
- memoryRoute,
133
- fallback,
134
- ...resProps
135
- };
136
- renderDom.current = rootRef.current;
137
- LoggerInstance.log(
138
- `createRemoteComponent LazyComponent render >>>`,
139
- renderProps
140
- );
141
- LoggerInstance.log(
142
- `createRemoteComponent LazyComponent hostInstance >>>`,
143
- instance
144
- );
145
- const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
146
- renderProps
147
- )) || {};
148
- renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
149
- providerReturn.render(renderProps);
150
- (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
151
- });
152
- return () => {
153
- clearTimeout(renderTimeout);
154
- setTimeout(() => {
155
- var _a, _b, _c, _d, _e, _f, _g, _h;
156
- if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
157
- LoggerInstance.log(
158
- `createRemoteComponent LazyComponent destroy >>>`,
159
- { moduleName, basename, dom: renderDom.current }
160
- );
161
- (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
162
- moduleName,
163
- dom: renderDom.current,
164
- basename,
165
- memoryRoute,
166
- fallback,
167
- ...resProps
168
- });
169
- (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
170
- moduleName,
171
- dom: renderDom.current
172
- });
173
- (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
174
- moduleName,
175
- dom: renderDom.current,
176
- basename,
177
- memoryRoute,
178
- fallback,
179
- ...resProps
180
- });
181
- }
182
- });
183
- };
184
- }, []);
185
- const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
186
- return /* @__PURE__ */ React__default.createElement(
187
- "div",
188
- {
189
- className: rootComponentClassName,
190
- style: props == null ? void 0 : props.style,
191
- ref: rootRef
192
- }
193
- );
194
- };
195
- RemoteApp2["__APP_VERSION__"] = "0.7.4";
196
- return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
197
- });
198
- function withRouterData(WrappedComponent) {
199
- const Component2 = forwardRef(function(props, ref) {
200
- var _a;
201
- let enableDispathPopstate = false;
202
- let routerContextVal;
203
- try {
204
- ReactRouterDOM.useLocation();
205
- enableDispathPopstate = true;
206
- } catch {
207
- enableDispathPopstate = false;
208
- }
209
- let basename = "/";
210
- if (!props.basename && enableDispathPopstate) {
211
- const ReactRouterDOMAny = ReactRouterDOM;
212
- const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
213
- const useHistory = ReactRouterDOMAny["useHistory"];
214
- const useHref = ReactRouterDOMAny["useHref"];
215
- const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
216
- if (UNSAFE_RouteContext) {
217
- if (useHref) {
218
- basename = useHref == null ? void 0 : useHref("/");
219
- }
220
- routerContextVal = useContext(UNSAFE_RouteContext);
221
- if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
222
- const matchIndex = routerContextVal.matches.length - 1;
223
- const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
224
- basename = pathJoin(basename, pathnameBase || "/");
225
- }
226
- } else {
227
- const match = useRouteMatch == null ? void 0 : useRouteMatch();
228
- if (useHistory) {
229
- const history = useHistory == null ? void 0 : useHistory();
230
- basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
231
- }
232
- if (match) {
233
- basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
234
- }
235
- }
236
- }
237
- LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
238
- ...props,
239
- basename,
240
- routerContextVal,
241
- enableDispathPopstate
242
- });
243
- if (enableDispathPopstate) {
244
- const location = ReactRouterDOM.useLocation();
245
- const [pathname, setPathname] = useState(location.pathname);
246
- useEffect(() => {
247
- if (pathname !== "" && pathname !== location.pathname) {
248
- LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
249
- name: props.name,
250
- pathname: location.pathname
251
- });
252
- e();
253
- }
254
- setPathname(location.pathname);
255
- }, [location]);
256
- }
257
- return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
258
- });
259
- return forwardRef(function(props, ref) {
260
- return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
261
- });
262
- }
263
- const RemoteApp = withRouterData(RemoteAppWrapper);
264
- function createLazyRemoteComponent(info) {
265
- const exportName = (info == null ? void 0 : info.export) || "default";
266
- return React__default.lazy(async () => {
267
- LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
268
- lazyComponent: info.loader,
269
- exportName
270
- });
271
- try {
272
- const m2 = await info.loader();
273
- const moduleName = m2 && m2[Symbol.for("mf_module_id")];
274
- LoggerInstance.log(
275
- `createRemoteComponent LazyComponent loadRemote info >>>`,
276
- { name: moduleName, module: m2, exportName }
277
- );
278
- const exportFn = m2[exportName];
279
- if (exportName in m2 && typeof exportFn === "function") {
280
- const RemoteAppComponent = forwardRef((props, ref) => {
281
- return /* @__PURE__ */ React__default.createElement(
282
- RemoteApp,
283
- {
284
- moduleName,
285
- providerInfo: exportFn,
286
- exportName: info.export || "default",
287
- fallback: info.fallback,
288
- ref,
289
- instance: info.instance,
290
- ...props
291
- }
292
- );
293
- });
294
- return {
295
- default: RemoteAppComponent
296
- };
297
- } else {
298
- LoggerInstance.log(
299
- `createRemoteComponent LazyComponent module not found >>>`,
300
- { name: moduleName, module: m2, exportName }
301
- );
302
- throw Error(
303
- `Make sure that ${moduleName} has the correct export when export is ${String(
304
- exportName
305
- )}`
306
- );
307
- }
308
- } catch (error) {
309
- throw error;
310
- }
311
- });
312
- }
313
- function createRemoteComponent(info) {
314
- return forwardRef(
315
- (props, ref) => {
316
- const LazyComponent = createLazyRemoteComponent(info);
317
- 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 })));
318
- }
319
- );
320
- }
321
- var client = {};
322
- var m = ReactDOM;
323
- if (process.env.NODE_ENV === "production") {
324
- client.createRoot = m.createRoot;
325
- client.hydrateRoot = m.hydrateRoot;
326
- } else {
327
- var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
328
- client.createRoot = function(c, o) {
329
- i.usingClientEntryPoint = true;
330
- try {
331
- return m.createRoot(c, o);
332
- } finally {
333
- i.usingClientEntryPoint = false;
334
- }
335
- };
336
- client.hydrateRoot = function(c, h, o) {
337
- i.usingClientEntryPoint = true;
338
- try {
339
- return m.hydrateRoot(c, h, o);
340
- } finally {
341
- i.usingClientEntryPoint = false;
342
- }
343
- };
344
- }
345
- function createBridgeComponent(bridgeInfo) {
346
- return () => {
347
- const rootMap = /* @__PURE__ */ new Map();
348
- const { instance } = bridgeInfo;
349
- LoggerInstance.log(
350
- `createBridgeComponent instance from props >>>`,
351
- instance
352
- );
353
- const RawComponent = (info) => {
354
- const { appInfo, propsInfo, ...restProps } = info;
355
- const { moduleName, memoryRoute, basename = "/" } = appInfo;
356
- return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
357
- bridgeInfo.rootComponent,
358
- {
359
- ...propsInfo,
360
- basename,
361
- ...restProps
362
- }
363
- ));
364
- };
365
- return {
366
- async render(info) {
367
- var _a, _b, _c, _d, _e, _f;
368
- LoggerInstance.log(`createBridgeComponent render Info`, info);
369
- const {
370
- moduleName,
371
- dom,
372
- basename,
373
- memoryRoute,
374
- fallback,
375
- ...propsInfo
376
- } = info;
377
- const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
378
- const rootComponentWithErrorBoundary = (
379
- // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
380
- /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
381
- RawComponent,
382
- {
383
- appInfo: {
384
- moduleName,
385
- basename,
386
- memoryRoute
387
- },
388
- propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
389
- }
390
- ))
391
- );
392
- if (atLeastReact18(React)) {
393
- if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
394
- Promise.resolve(
395
- bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
396
- ).then((root) => rootMap.set(info.dom, root));
397
- } else {
398
- const root = client.createRoot(info.dom);
399
- root.render(rootComponentWithErrorBoundary);
400
- rootMap.set(info.dom, root);
401
- }
402
- } else {
403
- const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
404
- renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
405
- }
406
- ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
407
- },
408
- async destroy(info) {
409
- var _a, _b, _c, _d, _e, _f;
410
- LoggerInstance.log(`createBridgeComponent destroy Info`, {
411
- dom: info.dom
412
- });
413
- (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
414
- if (atLeastReact18(React)) {
415
- const root = rootMap.get(info.dom);
416
- root == null ? void 0 : root.unmount();
417
- rootMap.delete(info.dom);
418
- } else {
419
- ReactDOM.unmountComponentAtNode(info.dom);
420
- }
421
- (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(
422
- info
423
- );
424
- },
425
- rawComponent: bridgeInfo.rootComponent,
426
- __BRIDGE_FN__: (_args) => {
427
- }
428
- };
429
- };
430
- }
431
- function BridgeReactPlugin() {
432
- return {
433
- name: "bridge-react-plugin",
434
- beforeInit(args) {
435
- const originalCreateRemoteComponent = createRemoteComponent;
436
- args.origin.createRemoteComponent = function(info) {
437
- return originalCreateRemoteComponent({
438
- ...info,
439
- instance: args.origin
440
- });
441
- };
442
- const originalCreateBridgeComponentt = createBridgeComponent;
443
- args.origin.createBridgeComponent = function(info) {
444
- return originalCreateBridgeComponentt({
445
- ...info,
446
- instance: args.origin
447
- });
448
- };
449
- return args;
450
- }
451
- };
452
- }
453
- export {
454
- BridgeReactPlugin as B,
455
- createBridgeComponent as a,
456
- createRemoteComponent as c
457
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- const plugin = require("./plugin-CfJaHqe4.cjs");
3
- module.exports = plugin.BridgeReactPlugin;
package/dist/plugin.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { FederationRuntimePlugin } from '@module-federation/runtime';
2
-
3
- declare function BridgeReactPlugin(): FederationRuntimePlugin;
4
- export default BridgeReactPlugin;
5
-
6
- export { }
package/dist/plugin.es.js DELETED
@@ -1,4 +0,0 @@
1
- import { B } from "./plugin-qjDRExZS.js";
2
- export {
3
- B as default
4
- };
package/src/plugin.ts DELETED
@@ -1,31 +0,0 @@
1
- import type { FederationRuntimePlugin } from '@module-federation/runtime';
2
- import { createRemoteComponent } from './create';
3
- import { createBridgeComponent } from './provider';
4
-
5
- function BridgeReactPlugin(): FederationRuntimePlugin {
6
- return {
7
- name: 'bridge-react-plugin',
8
- beforeInit(args) {
9
- const originalCreateRemoteComponent = createRemoteComponent;
10
- // @ts-ignore
11
- args.origin.createRemoteComponent = function (info) {
12
- return originalCreateRemoteComponent({
13
- ...info,
14
- instance: args.origin,
15
- });
16
- };
17
-
18
- const originalCreateBridgeComponentt = createBridgeComponent; // 保存原始函数
19
- // @ts-ignore
20
- args.origin.createBridgeComponent = function (info) {
21
- return originalCreateBridgeComponentt({
22
- ...info,
23
- instance: args.origin,
24
- });
25
- };
26
- return args;
27
- },
28
- };
29
- }
30
-
31
- export default BridgeReactPlugin;