@module-federation/bridge-react 0.0.0-next-20250618090118 → 0.0.0-next-20250620084158
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 -8
- package/__tests__/bridge.spec.tsx +7 -7
- package/dist/{bridge-base-DKPEvcPJ.js → bridge-base-BBH982Tz.cjs} +1 -1
- package/dist/{bridge-base-YDjQh_vg.mjs → bridge-base-P6pEjY1q.js} +1 -1
- package/dist/{index.esm-BjwhLgko.js → index-Cv3p6r66.cjs} +43 -21
- package/dist/{index.esm-nDSYG6Nj.mjs → index-D4yt7Udv.js} +43 -21
- package/dist/index.cjs.js +9 -427
- package/dist/index.d.ts +0 -77
- package/dist/index.es.js +11 -430
- package/dist/router-v5.cjs.js +1 -1
- package/dist/router-v5.es.js +1 -1
- package/dist/router-v6.cjs.js +1 -1
- package/dist/router-v6.es.js +1 -1
- package/dist/router.cjs.js +1 -1
- package/dist/router.es.js +1 -1
- package/dist/v18.cjs.js +1 -1
- package/dist/v18.es.js +1 -1
- package/dist/v19.cjs.js +1 -1
- package/dist/v19.es.js +1 -1
- package/package.json +5 -44
- package/src/index.ts +1 -21
- package/src/remote/component.tsx +3 -3
- package/src/remote/create.tsx +4 -17
- package/vite.config.ts +0 -13
- package/dist/data-fetch-runtime-plugin.cjs.js +0 -71
- package/dist/data-fetch-runtime-plugin.d.ts +0 -6
- package/dist/data-fetch-runtime-plugin.es.js +0 -72
- package/dist/data-fetch-server-middleware.cjs.js +0 -158
- package/dist/data-fetch-server-middleware.d.ts +0 -6
- package/dist/data-fetch-server-middleware.es.js +0 -159
- package/dist/data-fetch-utils.cjs.js +0 -90
- package/dist/data-fetch-utils.d.ts +0 -5
- package/dist/data-fetch-utils.es.js +0 -90
- package/dist/index-BYOQ_Qrb.js +0 -45
- package/dist/index-CUrEc0Q1.mjs +0 -46
- package/dist/lazy-utils.cjs.js +0 -22
- package/dist/lazy-utils.d.ts +0 -114
- package/dist/lazy-utils.es.js +0 -22
- package/dist/utils-DhtukXOQ.mjs +0 -327
- package/dist/utils-YoyAVYsh.js +0 -326
- package/src/lazy/AwaitDataFetch.tsx +0 -176
- package/src/lazy/constant.ts +0 -30
- package/src/lazy/createLazyComponent.tsx +0 -390
- package/src/lazy/data-fetch/call-data-fetch.ts +0 -13
- package/src/lazy/data-fetch/data-fetch-server-middleware.ts +0 -191
- package/src/lazy/data-fetch/index.ts +0 -2
- package/src/lazy/data-fetch/inject-data-fetch.ts +0 -109
- package/src/lazy/data-fetch/runtime-plugin.ts +0 -113
- package/src/lazy/index.ts +0 -18
- package/src/lazy/logger.ts +0 -6
- package/src/lazy/types.ts +0 -49
- package/src/lazy/utils.ts +0 -355
- package/src/lazy/wrapNoSSR.tsx +0 -10
package/dist/index.es.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-
|
|
1
|
+
import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-P6pEjY1q.js";
|
|
2
2
|
import ReactDOM from "react-dom";
|
|
3
|
-
import React__default, { forwardRef, useRef, useState, useEffect, useContext
|
|
4
|
-
import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin } from "./index-
|
|
3
|
+
import React__default, { forwardRef, useRef, useState, useEffect, useContext } from "react";
|
|
4
|
+
import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin } from "./index-D4yt7Udv.js";
|
|
5
5
|
import * as ReactRouterDOM from "react-router-dom";
|
|
6
6
|
import { federationRuntime } from "./plugin.es.js";
|
|
7
|
-
import { default as default2 } from "./data-fetch-runtime-plugin.es.js";
|
|
8
|
-
import { m as getDataFetchIdWithErrorMsgs, n as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, l as logger, o as DATA_FETCH_FUNCTION, p as getLoadedRemoteInfos, a as getDataFetchMapKey, g as getDataFetchInfo, k as fetchData$1, s as setDataFetchItemLoadedStatus, F as FS_HREF, b as getDataFetchItem, M as MF_DATA_FETCH_TYPE } from "./utils-DhtukXOQ.mjs";
|
|
9
|
-
import { q } from "./utils-DhtukXOQ.mjs";
|
|
10
|
-
import { callDataFetch, injectDataFetch } from "./data-fetch-utils.es.js";
|
|
11
7
|
function createReact16Or17Root(container) {
|
|
12
8
|
return {
|
|
13
9
|
render(children) {
|
|
@@ -68,7 +64,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
|
|
|
68
64
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
69
65
|
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
70
66
|
LoggerInstance.debug(
|
|
71
|
-
`
|
|
67
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
72
68
|
{ moduleName, basename, dom: renderDom.current }
|
|
73
69
|
);
|
|
74
70
|
(_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
|
|
@@ -156,7 +152,7 @@ function withRouterData(WrappedComponent) {
|
|
|
156
152
|
}
|
|
157
153
|
}
|
|
158
154
|
}
|
|
159
|
-
LoggerInstance.debug(`
|
|
155
|
+
LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
|
|
160
156
|
...props,
|
|
161
157
|
basename,
|
|
162
158
|
routerContextVal,
|
|
@@ -168,7 +164,7 @@ function withRouterData(WrappedComponent) {
|
|
|
168
164
|
useEffect(() => {
|
|
169
165
|
if (pathname !== "" && pathname !== location.pathname) {
|
|
170
166
|
LoggerInstance.debug(
|
|
171
|
-
`
|
|
167
|
+
`createRemoteComponent dispatchPopstateEnv >>>`,
|
|
172
168
|
{
|
|
173
169
|
name: props.name,
|
|
174
170
|
pathname: location.pathname
|
|
@@ -189,7 +185,7 @@ const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
|
189
185
|
function createLazyRemoteComponent(info) {
|
|
190
186
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
191
187
|
return React__default.lazy(async () => {
|
|
192
|
-
LoggerInstance.debug(`
|
|
188
|
+
LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
|
|
193
189
|
lazyComponent: info.loader,
|
|
194
190
|
exportName
|
|
195
191
|
});
|
|
@@ -197,7 +193,7 @@ function createLazyRemoteComponent(info) {
|
|
|
197
193
|
const m = await info.loader();
|
|
198
194
|
const moduleName = m && m[Symbol.for("mf_module_id")];
|
|
199
195
|
LoggerInstance.debug(
|
|
200
|
-
`
|
|
196
|
+
`createRemoteComponent LazyComponent loadRemote info >>>`,
|
|
201
197
|
{ name: moduleName, module: m, exportName }
|
|
202
198
|
);
|
|
203
199
|
const exportFn = m[exportName];
|
|
@@ -220,7 +216,7 @@ function createLazyRemoteComponent(info) {
|
|
|
220
216
|
};
|
|
221
217
|
} else {
|
|
222
218
|
LoggerInstance.debug(
|
|
223
|
-
`
|
|
219
|
+
`createRemoteComponent LazyComponent module not found >>>`,
|
|
224
220
|
{ name: moduleName, module: m, exportName }
|
|
225
221
|
);
|
|
226
222
|
throw Error(
|
|
@@ -234,7 +230,7 @@ function createLazyRemoteComponent(info) {
|
|
|
234
230
|
}
|
|
235
231
|
});
|
|
236
232
|
}
|
|
237
|
-
function
|
|
233
|
+
function createRemoteComponent(info) {
|
|
238
234
|
const LazyComponent = createLazyRemoteComponent(info);
|
|
239
235
|
return forwardRef((props, ref) => {
|
|
240
236
|
return /* @__PURE__ */ React__default.createElement(
|
|
@@ -246,422 +242,7 @@ function createRemoteAppComponent(info) {
|
|
|
246
242
|
);
|
|
247
243
|
});
|
|
248
244
|
}
|
|
249
|
-
function createRemoteComponent(info) {
|
|
250
|
-
LoggerInstance.warn(
|
|
251
|
-
`createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
|
|
252
|
-
);
|
|
253
|
-
return createRemoteAppComponent(info);
|
|
254
|
-
}
|
|
255
|
-
function isPromise(obj) {
|
|
256
|
-
return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
|
|
257
|
-
}
|
|
258
|
-
const AWAIT_ERROR_PREFIX = "<Await /> caught the following error during render: ";
|
|
259
|
-
const transformError = (err) => {
|
|
260
|
-
const errMsg = err instanceof Error ? err.message : err;
|
|
261
|
-
const originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, "");
|
|
262
|
-
const dataFetchMapKey = getDataFetchIdWithErrorMsgs(originalMsg);
|
|
263
|
-
if (originalMsg.indexOf(DATA_FETCH_ERROR_PREFIX) === 0) {
|
|
264
|
-
return {
|
|
265
|
-
error: new Error(
|
|
266
|
-
originalMsg.replace(DATA_FETCH_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")
|
|
267
|
-
),
|
|
268
|
-
errorType: ERROR_TYPE.DATA_FETCH,
|
|
269
|
-
dataFetchMapKey
|
|
270
|
-
};
|
|
271
|
-
}
|
|
272
|
-
if (originalMsg.indexOf(LOAD_REMOTE_ERROR_PREFIX) === 0) {
|
|
273
|
-
return {
|
|
274
|
-
error: new Error(
|
|
275
|
-
originalMsg.replace(LOAD_REMOTE_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")
|
|
276
|
-
),
|
|
277
|
-
errorType: ERROR_TYPE.LOAD_REMOTE,
|
|
278
|
-
dataFetchMapKey
|
|
279
|
-
};
|
|
280
|
-
}
|
|
281
|
-
return {
|
|
282
|
-
error: new Error(originalMsg.replace(wrapDataFetchId(dataFetchMapKey), "")),
|
|
283
|
-
errorType: ERROR_TYPE.UNKNOWN,
|
|
284
|
-
dataFetchMapKey
|
|
285
|
-
};
|
|
286
|
-
};
|
|
287
|
-
const DefaultLoading = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
|
|
288
|
-
const DefaultErrorElement = (_data) => /* @__PURE__ */ React__default.createElement("div", null, "Error");
|
|
289
|
-
function AwaitDataFetch({
|
|
290
|
-
resolve,
|
|
291
|
-
loading = DefaultLoading,
|
|
292
|
-
errorElement = DefaultErrorElement,
|
|
293
|
-
children,
|
|
294
|
-
params
|
|
295
|
-
}) {
|
|
296
|
-
const dataRef = useRef();
|
|
297
|
-
const data = dataRef.current || resolve;
|
|
298
|
-
const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
|
|
299
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
300
|
-
AwaitSuspense,
|
|
301
|
-
{
|
|
302
|
-
params,
|
|
303
|
-
loading,
|
|
304
|
-
errorElement,
|
|
305
|
-
resolve: getData
|
|
306
|
-
},
|
|
307
|
-
children
|
|
308
|
-
);
|
|
309
|
-
}
|
|
310
|
-
function AwaitSuspense({
|
|
311
|
-
resolve,
|
|
312
|
-
children,
|
|
313
|
-
loading = DefaultLoading,
|
|
314
|
-
errorElement = DefaultErrorElement
|
|
315
|
-
}) {
|
|
316
|
-
return /* @__PURE__ */ React__default.createElement(Suspense, { fallback: loading }, /* @__PURE__ */ React__default.createElement(ResolveAwait, { resolve, errorElement }, children));
|
|
317
|
-
}
|
|
318
|
-
function ResolveAwait({
|
|
319
|
-
children,
|
|
320
|
-
resolve,
|
|
321
|
-
errorElement,
|
|
322
|
-
params
|
|
323
|
-
}) {
|
|
324
|
-
const data = resolve();
|
|
325
|
-
logger.debug("resolve data: ", data);
|
|
326
|
-
if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
|
|
327
|
-
const transformedError = transformError(data);
|
|
328
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof errorElement === "function" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, globalThis.FEDERATION_SSR && /* @__PURE__ */ React__default.createElement(
|
|
329
|
-
"script",
|
|
330
|
-
{
|
|
331
|
-
suppressHydrationWarning: true,
|
|
332
|
-
dangerouslySetInnerHTML: {
|
|
333
|
-
__html: String.raw`
|
|
334
|
-
globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || []
|
|
335
|
-
globalThis['${DATA_FETCH_FUNCTION}'].push([${transformedError.dataFetchMapKey ? `'${transformedError.dataFetchMapKey}'` : ""},${params ? JSON.stringify(params) : null},true]);`
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
), errorElement(transformedError)) : errorElement);
|
|
339
|
-
}
|
|
340
|
-
const toRender = typeof children === "function" ? children(data) : children;
|
|
341
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toRender);
|
|
342
|
-
}
|
|
343
|
-
const fetchData = (promise, ref) => {
|
|
344
|
-
let data;
|
|
345
|
-
let status = "pending";
|
|
346
|
-
const suspender = promise.then((res) => {
|
|
347
|
-
status = "success";
|
|
348
|
-
data = res;
|
|
349
|
-
ref.current = res;
|
|
350
|
-
}).catch((e2) => {
|
|
351
|
-
status = "success";
|
|
352
|
-
console.warn(e2);
|
|
353
|
-
data = AWAIT_ERROR_PREFIX + e2;
|
|
354
|
-
});
|
|
355
|
-
return () => {
|
|
356
|
-
if (status === "pending") {
|
|
357
|
-
throw suspender;
|
|
358
|
-
}
|
|
359
|
-
return data;
|
|
360
|
-
};
|
|
361
|
-
};
|
|
362
|
-
function getTargetModuleInfo(id, instance) {
|
|
363
|
-
if (!instance) {
|
|
364
|
-
return;
|
|
365
|
-
}
|
|
366
|
-
const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
|
|
367
|
-
if (!loadedRemoteInfo) {
|
|
368
|
-
return;
|
|
369
|
-
}
|
|
370
|
-
const snapshot = loadedRemoteInfo.snapshot;
|
|
371
|
-
if (!snapshot) {
|
|
372
|
-
return;
|
|
373
|
-
}
|
|
374
|
-
const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
|
|
375
|
-
if (!publicPath) {
|
|
376
|
-
return;
|
|
377
|
-
}
|
|
378
|
-
const modules = "modules" in snapshot ? snapshot.modules : [];
|
|
379
|
-
const targetModule = modules.find(
|
|
380
|
-
(m) => m.modulePath === loadedRemoteInfo.expose
|
|
381
|
-
);
|
|
382
|
-
if (!targetModule) {
|
|
383
|
-
return;
|
|
384
|
-
}
|
|
385
|
-
const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
|
|
386
|
-
if (!remoteEntry) {
|
|
387
|
-
return;
|
|
388
|
-
}
|
|
389
|
-
return {
|
|
390
|
-
module: targetModule,
|
|
391
|
-
publicPath,
|
|
392
|
-
remoteEntry
|
|
393
|
-
};
|
|
394
|
-
}
|
|
395
|
-
function collectSSRAssets(options) {
|
|
396
|
-
const {
|
|
397
|
-
id,
|
|
398
|
-
injectLink = true,
|
|
399
|
-
injectScript = false
|
|
400
|
-
} = typeof options === "string" ? { id: options } : options;
|
|
401
|
-
const links = [];
|
|
402
|
-
const scripts = [];
|
|
403
|
-
const instance = options.runtime.getInstance();
|
|
404
|
-
if (!instance || !injectLink && !injectScript) {
|
|
405
|
-
return [...scripts, ...links];
|
|
406
|
-
}
|
|
407
|
-
const moduleAndPublicPath = getTargetModuleInfo(id, instance);
|
|
408
|
-
if (!moduleAndPublicPath) {
|
|
409
|
-
return [...scripts, ...links];
|
|
410
|
-
}
|
|
411
|
-
const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
|
|
412
|
-
if (injectLink) {
|
|
413
|
-
[...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
|
|
414
|
-
links.push(
|
|
415
|
-
/* @__PURE__ */ React__default.createElement(
|
|
416
|
-
"link",
|
|
417
|
-
{
|
|
418
|
-
key: `${file.split(".")[0]}_${index}`,
|
|
419
|
-
href: `${publicPath}${file}`,
|
|
420
|
-
rel: "stylesheet",
|
|
421
|
-
type: "text/css"
|
|
422
|
-
}
|
|
423
|
-
)
|
|
424
|
-
);
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
if (injectScript) {
|
|
428
|
-
scripts.push(
|
|
429
|
-
/* @__PURE__ */ React__default.createElement(
|
|
430
|
-
"script",
|
|
431
|
-
{
|
|
432
|
-
async: true,
|
|
433
|
-
key: remoteEntry.split(".")[0],
|
|
434
|
-
src: `${publicPath}${remoteEntry}`,
|
|
435
|
-
crossOrigin: "anonymous"
|
|
436
|
-
}
|
|
437
|
-
)
|
|
438
|
-
);
|
|
439
|
-
[...targetModule.assets.js.sync].sort().forEach((file, index) => {
|
|
440
|
-
scripts.push(
|
|
441
|
-
/* @__PURE__ */ React__default.createElement(
|
|
442
|
-
"script",
|
|
443
|
-
{
|
|
444
|
-
key: `${file.split(".")[0]}_${index}`,
|
|
445
|
-
async: true,
|
|
446
|
-
src: `${publicPath}${file}`,
|
|
447
|
-
crossOrigin: "anonymous"
|
|
448
|
-
}
|
|
449
|
-
)
|
|
450
|
-
);
|
|
451
|
-
});
|
|
452
|
-
}
|
|
453
|
-
return [...scripts, ...links];
|
|
454
|
-
}
|
|
455
|
-
function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
|
|
456
|
-
var _a;
|
|
457
|
-
if (noSSR || typeof window !== "undefined" && window.location.href !== window[FS_HREF]) {
|
|
458
|
-
if (!(loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.version)) {
|
|
459
|
-
throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} version is empty`);
|
|
460
|
-
}
|
|
461
|
-
const { snapshot } = loadedRemoteInfo;
|
|
462
|
-
if (!snapshot) {
|
|
463
|
-
throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} snapshot is empty`);
|
|
464
|
-
}
|
|
465
|
-
const dataFetchItem = getDataFetchItem(id);
|
|
466
|
-
const isFetchServer = ((_a = dataFetchItem == null ? void 0 : dataFetchItem[0]) == null ? void 0 : _a[1]) === MF_DATA_FETCH_TYPE.FETCH_SERVER;
|
|
467
|
-
if (isFetchServer && (!("ssrPublicPath" in snapshot) || !snapshot.ssrPublicPath)) {
|
|
468
|
-
throw new Error(
|
|
469
|
-
`ssrPublicPath is required while fetching ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data in SSR project!`
|
|
470
|
-
);
|
|
471
|
-
}
|
|
472
|
-
if (isFetchServer && (!("ssrRemoteEntry" in snapshot) || !snapshot.ssrRemoteEntry)) {
|
|
473
|
-
throw new Error(
|
|
474
|
-
`ssrRemoteEntry is required while loading ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data loader in SSR project!`
|
|
475
|
-
);
|
|
476
|
-
}
|
|
477
|
-
return {
|
|
478
|
-
name: loadedRemoteInfo.name,
|
|
479
|
-
version: loadedRemoteInfo.version,
|
|
480
|
-
ssrPublicPath: "ssrPublicPath" in snapshot ? snapshot.ssrPublicPath || "" : "",
|
|
481
|
-
ssrRemoteEntry: "ssrRemoteEntry" in snapshot ? snapshot.ssrRemoteEntry || "" : "",
|
|
482
|
-
globalName: loadedRemoteInfo.entryGlobalName
|
|
483
|
-
};
|
|
484
|
-
}
|
|
485
|
-
return;
|
|
486
|
-
}
|
|
487
|
-
function createLazyComponent(options) {
|
|
488
|
-
const { runtime } = options;
|
|
489
|
-
if (!(runtime == null ? void 0 : runtime.getInstance)) {
|
|
490
|
-
throw new Error(
|
|
491
|
-
'runtime is required if used in "@module-federation/bridge-react"!'
|
|
492
|
-
);
|
|
493
|
-
}
|
|
494
|
-
const exportName = (options == null ? void 0 : options.export) || "default";
|
|
495
|
-
const callLoader = async () => {
|
|
496
|
-
logger.debug("callLoader start", Date.now());
|
|
497
|
-
const m = await options.loader();
|
|
498
|
-
logger.debug("callLoader end", Date.now());
|
|
499
|
-
if (!m) {
|
|
500
|
-
throw new Error("load remote failed");
|
|
501
|
-
}
|
|
502
|
-
return m;
|
|
503
|
-
};
|
|
504
|
-
const getData = async (noSSR) => {
|
|
505
|
-
let loadedRemoteInfo;
|
|
506
|
-
let moduleId;
|
|
507
|
-
const instance = runtime.getInstance();
|
|
508
|
-
try {
|
|
509
|
-
const m = await callLoader();
|
|
510
|
-
moduleId = m && m[Symbol.for("mf_module_id")];
|
|
511
|
-
if (!moduleId) {
|
|
512
|
-
throw new Error("moduleId is empty");
|
|
513
|
-
}
|
|
514
|
-
loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
|
|
515
|
-
if (!loadedRemoteInfo) {
|
|
516
|
-
throw new Error(`can not find loaded remote('${moduleId}') info!`);
|
|
517
|
-
}
|
|
518
|
-
} catch (e2) {
|
|
519
|
-
const errMsg = `${LOAD_REMOTE_ERROR_PREFIX}${e2}`;
|
|
520
|
-
logger.debug(e2);
|
|
521
|
-
throw new Error(errMsg);
|
|
522
|
-
}
|
|
523
|
-
let dataFetchMapKey;
|
|
524
|
-
try {
|
|
525
|
-
dataFetchMapKey = getDataFetchMapKey(
|
|
526
|
-
getDataFetchInfo({
|
|
527
|
-
name: loadedRemoteInfo.name,
|
|
528
|
-
alias: loadedRemoteInfo.alias,
|
|
529
|
-
id: moduleId,
|
|
530
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
531
|
-
}),
|
|
532
|
-
{ name: instance.name, version: instance == null ? void 0 : instance.options.version }
|
|
533
|
-
);
|
|
534
|
-
logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
|
|
535
|
-
if (!dataFetchMapKey) {
|
|
536
|
-
return;
|
|
537
|
-
}
|
|
538
|
-
const data = await fetchData$1(
|
|
539
|
-
dataFetchMapKey,
|
|
540
|
-
{
|
|
541
|
-
...options.dataFetchParams,
|
|
542
|
-
isDowngrade: false
|
|
543
|
-
},
|
|
544
|
-
getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR)
|
|
545
|
-
);
|
|
546
|
-
setDataFetchItemLoadedStatus(dataFetchMapKey);
|
|
547
|
-
logger.debug("get data res: \n", data);
|
|
548
|
-
return data;
|
|
549
|
-
} catch (err) {
|
|
550
|
-
const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
|
|
551
|
-
logger.debug(errMsg);
|
|
552
|
-
throw new Error(errMsg);
|
|
553
|
-
}
|
|
554
|
-
};
|
|
555
|
-
const LazyComponent = React__default.lazy(async () => {
|
|
556
|
-
const m = await callLoader();
|
|
557
|
-
const moduleId = m && m[Symbol.for("mf_module_id")];
|
|
558
|
-
const instance = runtime.getInstance();
|
|
559
|
-
const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
|
|
560
|
-
loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.snapshot;
|
|
561
|
-
const dataFetchMapKey = loadedRemoteInfo ? getDataFetchMapKey(
|
|
562
|
-
getDataFetchInfo({
|
|
563
|
-
name: loadedRemoteInfo.name,
|
|
564
|
-
alias: loadedRemoteInfo.alias,
|
|
565
|
-
id: moduleId,
|
|
566
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
567
|
-
}),
|
|
568
|
-
{ name: instance.name, version: instance == null ? void 0 : instance.options.version }
|
|
569
|
-
) : void 0;
|
|
570
|
-
logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
|
|
571
|
-
const assets = collectSSRAssets({
|
|
572
|
-
id: moduleId,
|
|
573
|
-
runtime
|
|
574
|
-
});
|
|
575
|
-
const Com = m[exportName];
|
|
576
|
-
if (exportName in m && typeof Com === "function") {
|
|
577
|
-
return {
|
|
578
|
-
default: (props) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ React__default.createElement(
|
|
579
|
-
"script",
|
|
580
|
-
{
|
|
581
|
-
suppressHydrationWarning: true,
|
|
582
|
-
dangerouslySetInnerHTML: {
|
|
583
|
-
__html: String.raw`
|
|
584
|
-
globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || [];
|
|
585
|
-
globalThis['${DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
|
|
586
|
-
`
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
), globalThis.FEDERATION_SSR && assets, /* @__PURE__ */ React__default.createElement(Com, { ...props }))
|
|
590
|
-
};
|
|
591
|
-
} else {
|
|
592
|
-
throw Error(
|
|
593
|
-
`Make sure that ${moduleId} has the correct export when export is ${String(
|
|
594
|
-
exportName
|
|
595
|
-
)}`
|
|
596
|
-
);
|
|
597
|
-
}
|
|
598
|
-
});
|
|
599
|
-
return (props) => {
|
|
600
|
-
const { key, ...args } = props;
|
|
601
|
-
if (globalThis.FEDERATION_SSR && !options.noSSR) {
|
|
602
|
-
const { key: key2, ...args2 } = props;
|
|
603
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
604
|
-
AwaitDataFetch,
|
|
605
|
-
{
|
|
606
|
-
resolve: getData(options.noSSR),
|
|
607
|
-
loading: options.loading,
|
|
608
|
-
errorElement: options.fallback
|
|
609
|
-
},
|
|
610
|
-
(data) => /* @__PURE__ */ React__default.createElement(LazyComponent, { ...args2, mfData: data })
|
|
611
|
-
);
|
|
612
|
-
} else {
|
|
613
|
-
const [data, setData] = useState(null);
|
|
614
|
-
const [loading, setLoading] = useState(true);
|
|
615
|
-
const [error, setError] = useState(null);
|
|
616
|
-
useEffect(() => {
|
|
617
|
-
let isMounted = true;
|
|
618
|
-
const fetchDataAsync = async () => {
|
|
619
|
-
try {
|
|
620
|
-
setLoading(true);
|
|
621
|
-
const result = await getData(options.noSSR);
|
|
622
|
-
if (isMounted) {
|
|
623
|
-
setData(result);
|
|
624
|
-
}
|
|
625
|
-
} catch (e2) {
|
|
626
|
-
if (isMounted) {
|
|
627
|
-
setError(transformError(e2));
|
|
628
|
-
}
|
|
629
|
-
} finally {
|
|
630
|
-
if (isMounted) {
|
|
631
|
-
setLoading(false);
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
};
|
|
635
|
-
fetchDataAsync();
|
|
636
|
-
return () => {
|
|
637
|
-
isMounted = false;
|
|
638
|
-
};
|
|
639
|
-
}, []);
|
|
640
|
-
if (loading) {
|
|
641
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, options.loading);
|
|
642
|
-
}
|
|
643
|
-
if (error) {
|
|
644
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof options.fallback === "function" ? options.fallback(error) : options.fallback);
|
|
645
|
-
}
|
|
646
|
-
return /* @__PURE__ */ React__default.createElement(LazyComponent, { ...args, mfData: data });
|
|
647
|
-
}
|
|
648
|
-
};
|
|
649
|
-
}
|
|
650
|
-
function wrapNoSSR(createLazyComponentFn) {
|
|
651
|
-
return (options) => {
|
|
652
|
-
return createLazyComponentFn({ ...options, noSSR: true });
|
|
653
|
-
};
|
|
654
|
-
}
|
|
655
245
|
export {
|
|
656
|
-
ERROR_TYPE,
|
|
657
|
-
default2 as autoFetchDataPlugin,
|
|
658
|
-
callDataFetch,
|
|
659
|
-
collectSSRAssets,
|
|
660
246
|
createBridgeComponent,
|
|
661
|
-
|
|
662
|
-
createRemoteAppComponent,
|
|
663
|
-
createRemoteComponent,
|
|
664
|
-
injectDataFetch,
|
|
665
|
-
q as setSSREnv,
|
|
666
|
-
wrapNoSSR
|
|
247
|
+
createRemoteComponent
|
|
667
248
|
};
|
package/dist/router-v5.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ReactRouterDom$1 = require("react-router-dom/index.js");
|
|
5
|
-
const index = require("./index-
|
|
5
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
6
6
|
const ReactRouterDom = require("react-router-dom/index.js");
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
8
8
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
package/dist/router-v5.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React__default, { useContext } from "react";
|
|
2
2
|
import * as ReactRouterDom$1 from "react-router-dom/index.js";
|
|
3
|
-
import { R as RouterContext, L as LoggerInstance } from "./index-
|
|
3
|
+
import { R as RouterContext, L as LoggerInstance } from "./index-D4yt7Udv.js";
|
|
4
4
|
export * from "react-router-dom/index.js";
|
|
5
5
|
function WraperRouter(props) {
|
|
6
6
|
const { basename, ...propsRes } = props;
|
package/dist/router-v6.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
|
|
5
|
-
const index = require("./index-
|
|
5
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
6
6
|
const ReactRouterDom = require("react-router-dom/dist/index.js");
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
8
8
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
package/dist/router-v6.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React__default, { useContext } from "react";
|
|
2
2
|
import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
|
|
3
|
-
import { R as RouterContext, L as LoggerInstance } from "./index-
|
|
3
|
+
import { R as RouterContext, L as LoggerInstance } from "./index-D4yt7Udv.js";
|
|
4
4
|
export * from "react-router-dom/dist/index.js";
|
|
5
5
|
function WraperRouter(props) {
|
|
6
6
|
const { basename, ...propsRes } = props;
|
package/dist/router.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ReactRouterDom = require("react-router-dom/");
|
|
5
|
-
const index = require("./index-
|
|
5
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
6
6
|
function _interopNamespaceDefault(e) {
|
|
7
7
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
8
8
|
if (e) {
|
package/dist/router.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React__default, { useContext } from "react";
|
|
2
2
|
import * as ReactRouterDom from "react-router-dom/";
|
|
3
3
|
export * from "react-router-dom/";
|
|
4
|
-
import { R as RouterContext, L as LoggerInstance } from "./index-
|
|
4
|
+
import { R as RouterContext, L as LoggerInstance } from "./index-D4yt7Udv.js";
|
|
5
5
|
function WrapperRouter(props) {
|
|
6
6
|
const { basename, ...propsRes } = props;
|
|
7
7
|
const routerContextProps = useContext(RouterContext) || {};
|
package/dist/v18.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const client = require("react-dom/client");
|
|
4
|
-
const bridgeBase = require("./bridge-base-
|
|
4
|
+
const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
|
|
5
5
|
function createReact18Root(container, options) {
|
|
6
6
|
return client.createRoot(container, options);
|
|
7
7
|
}
|
package/dist/v18.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createRoot } from "react-dom/client";
|
|
2
|
-
import { c as createBaseBridgeComponent } from "./bridge-base-
|
|
2
|
+
import { c as createBaseBridgeComponent } from "./bridge-base-P6pEjY1q.js";
|
|
3
3
|
function createReact18Root(container, options) {
|
|
4
4
|
return createRoot(container, options);
|
|
5
5
|
}
|
package/dist/v19.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const client = require("react-dom/client");
|
|
4
|
-
const bridgeBase = require("./bridge-base-
|
|
4
|
+
const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
|
|
5
5
|
function createReact19Root(container, options) {
|
|
6
6
|
return client.createRoot(container, options);
|
|
7
7
|
}
|
package/dist/v19.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createRoot } from "react-dom/client";
|
|
2
|
-
import { c as createBaseBridgeComponent } from "./bridge-base-
|
|
2
|
+
import { c as createBaseBridgeComponent } from "./bridge-base-P6pEjY1q.js";
|
|
3
3
|
function createReact19Root(container, options) {
|
|
4
4
|
return createRoot(container, options);
|
|
5
5
|
}
|
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-20250620084158",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"url": "https://github.com/module-federation/core",
|
|
12
12
|
"directory": "packages/bridge-react"
|
|
13
13
|
},
|
|
14
|
+
"type": "module",
|
|
14
15
|
"main": "./dist/index.cjs.js",
|
|
15
16
|
"module": "./dist/index.es.js",
|
|
16
17
|
"types": "./dist/index.d.ts",
|
|
@@ -50,51 +51,12 @@
|
|
|
50
51
|
"import": "./dist/router-v6.es.js",
|
|
51
52
|
"require": "./dist/router-v6.cjs.js"
|
|
52
53
|
},
|
|
53
|
-
"./data-fetch-runtime-plugin": {
|
|
54
|
-
"types": "./dist/data-fetch-runtime-plugin.d.ts",
|
|
55
|
-
"import": "./dist/data-fetch-runtime-plugin.es.js",
|
|
56
|
-
"require": "./dist/data-fetch-runtime-plugin.cjs.js"
|
|
57
|
-
},
|
|
58
|
-
"./lazy-utils": {
|
|
59
|
-
"types": "./dist/lazy-utils.d.ts",
|
|
60
|
-
"import": "./dist/lazy-utils.es.js",
|
|
61
|
-
"require": "./dist/lazy-utils.cjs.js"
|
|
62
|
-
},
|
|
63
|
-
"./data-fetch-utils": {
|
|
64
|
-
"types": "./dist/data-fetch-utils.d.ts",
|
|
65
|
-
"import": "./dist/data-fetch-utils.es.js",
|
|
66
|
-
"require": "./dist/data-fetch-utils.cjs.js"
|
|
67
|
-
},
|
|
68
|
-
"./data-fetch-server-middleware": {
|
|
69
|
-
"types": "./dist/data-fetch-server-middleware.d.ts",
|
|
70
|
-
"import": "./dist/data-fetch-server-middleware.es.js",
|
|
71
|
-
"require": "./dist/data-fetch-server-middleware.cjs.js"
|
|
72
|
-
},
|
|
73
54
|
"./*": "./*"
|
|
74
55
|
},
|
|
75
|
-
"typesVersions": {
|
|
76
|
-
"*": {
|
|
77
|
-
".": [
|
|
78
|
-
"./dist/types/index.d.ts"
|
|
79
|
-
],
|
|
80
|
-
"data-fetch-runtime-plugin": [
|
|
81
|
-
"./dist/lazy-utils.d.ts"
|
|
82
|
-
],
|
|
83
|
-
"lazy-utils": [
|
|
84
|
-
"./dist/lazy-utils.d.ts"
|
|
85
|
-
],
|
|
86
|
-
"data-fetch-utils": [
|
|
87
|
-
"./dist/data-fetch-utils.d.ts"
|
|
88
|
-
],
|
|
89
|
-
"data-fetch-server-middleware": [
|
|
90
|
-
"./dist/data-fetch-server-middleware.d.ts"
|
|
91
|
-
]
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
56
|
"dependencies": {
|
|
95
57
|
"react-error-boundary": "^4.1.2",
|
|
96
|
-
"@module-federation/bridge-shared": "0.0.0-next-
|
|
97
|
-
"@module-federation/sdk": "0.0.0-next-
|
|
58
|
+
"@module-federation/bridge-shared": "0.0.0-next-20250620084158",
|
|
59
|
+
"@module-federation/sdk": "0.0.0-next-20250620084158"
|
|
98
60
|
},
|
|
99
61
|
"peerDependencies": {
|
|
100
62
|
"react": ">=16.9.0",
|
|
@@ -115,8 +77,7 @@
|
|
|
115
77
|
"typescript": "^5.2.2",
|
|
116
78
|
"vite": "^5.4.18",
|
|
117
79
|
"vite-plugin-dts": "^4.3.0",
|
|
118
|
-
"
|
|
119
|
-
"@module-federation/runtime": "0.0.0-next-20250618090118"
|
|
80
|
+
"@module-federation/runtime": "0.0.0-next-20250620084158"
|
|
120
81
|
},
|
|
121
82
|
"scripts": {
|
|
122
83
|
"dev": "vite",
|