@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.cjs.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const bridgeBase = require("./bridge-base-
|
|
3
|
+
const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
|
|
4
4
|
const ReactDOM = require("react-dom");
|
|
5
5
|
const React = require("react");
|
|
6
|
-
const index = require("./index-
|
|
6
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
7
7
|
const ReactRouterDOM = require("react-router-dom");
|
|
8
8
|
const plugin = require("./plugin.cjs.js");
|
|
9
|
-
const dataFetchRuntimePlugin = require("./data-fetch-runtime-plugin.cjs.js");
|
|
10
|
-
const lazyUtils = require("./utils-YoyAVYsh.js");
|
|
11
|
-
const dataFetchUtils = require("./data-fetch-utils.cjs.js");
|
|
12
9
|
function _interopNamespaceDefault(e2) {
|
|
13
10
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
14
11
|
if (e2) {
|
|
@@ -86,7 +83,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
|
|
|
86
83
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
87
84
|
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
88
85
|
index.LoggerInstance.debug(
|
|
89
|
-
`
|
|
86
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
90
87
|
{ moduleName, basename, dom: renderDom.current }
|
|
91
88
|
);
|
|
92
89
|
(_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
|
|
@@ -174,7 +171,7 @@ function withRouterData(WrappedComponent) {
|
|
|
174
171
|
}
|
|
175
172
|
}
|
|
176
173
|
}
|
|
177
|
-
index.LoggerInstance.debug(`
|
|
174
|
+
index.LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
|
|
178
175
|
...props,
|
|
179
176
|
basename,
|
|
180
177
|
routerContextVal,
|
|
@@ -186,7 +183,7 @@ function withRouterData(WrappedComponent) {
|
|
|
186
183
|
React.useEffect(() => {
|
|
187
184
|
if (pathname !== "" && pathname !== location.pathname) {
|
|
188
185
|
index.LoggerInstance.debug(
|
|
189
|
-
`
|
|
186
|
+
`createRemoteComponent dispatchPopstateEnv >>>`,
|
|
190
187
|
{
|
|
191
188
|
name: props.name,
|
|
192
189
|
pathname: location.pathname
|
|
@@ -207,7 +204,7 @@ const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
|
207
204
|
function createLazyRemoteComponent(info) {
|
|
208
205
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
209
206
|
return React.lazy(async () => {
|
|
210
|
-
index.LoggerInstance.debug(`
|
|
207
|
+
index.LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
|
|
211
208
|
lazyComponent: info.loader,
|
|
212
209
|
exportName
|
|
213
210
|
});
|
|
@@ -215,7 +212,7 @@ function createLazyRemoteComponent(info) {
|
|
|
215
212
|
const m = await info.loader();
|
|
216
213
|
const moduleName = m && m[Symbol.for("mf_module_id")];
|
|
217
214
|
index.LoggerInstance.debug(
|
|
218
|
-
`
|
|
215
|
+
`createRemoteComponent LazyComponent loadRemote info >>>`,
|
|
219
216
|
{ name: moduleName, module: m, exportName }
|
|
220
217
|
);
|
|
221
218
|
const exportFn = m[exportName];
|
|
@@ -238,7 +235,7 @@ function createLazyRemoteComponent(info) {
|
|
|
238
235
|
};
|
|
239
236
|
} else {
|
|
240
237
|
index.LoggerInstance.debug(
|
|
241
|
-
`
|
|
238
|
+
`createRemoteComponent LazyComponent module not found >>>`,
|
|
242
239
|
{ name: moduleName, module: m, exportName }
|
|
243
240
|
);
|
|
244
241
|
throw Error(
|
|
@@ -252,7 +249,7 @@ function createLazyRemoteComponent(info) {
|
|
|
252
249
|
}
|
|
253
250
|
});
|
|
254
251
|
}
|
|
255
|
-
function
|
|
252
|
+
function createRemoteComponent(info) {
|
|
256
253
|
const LazyComponent = createLazyRemoteComponent(info);
|
|
257
254
|
return React.forwardRef((props, ref) => {
|
|
258
255
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -264,420 +261,5 @@ function createRemoteAppComponent(info) {
|
|
|
264
261
|
);
|
|
265
262
|
});
|
|
266
263
|
}
|
|
267
|
-
function createRemoteComponent(info) {
|
|
268
|
-
index.LoggerInstance.warn(
|
|
269
|
-
`createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
|
|
270
|
-
);
|
|
271
|
-
return createRemoteAppComponent(info);
|
|
272
|
-
}
|
|
273
|
-
function isPromise(obj) {
|
|
274
|
-
return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
|
|
275
|
-
}
|
|
276
|
-
const AWAIT_ERROR_PREFIX = "<Await /> caught the following error during render: ";
|
|
277
|
-
const transformError = (err) => {
|
|
278
|
-
const errMsg = err instanceof Error ? err.message : err;
|
|
279
|
-
const originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, "");
|
|
280
|
-
const dataFetchMapKey = lazyUtils.getDataFetchIdWithErrorMsgs(originalMsg);
|
|
281
|
-
if (originalMsg.indexOf(lazyUtils.DATA_FETCH_ERROR_PREFIX) === 0) {
|
|
282
|
-
return {
|
|
283
|
-
error: new Error(
|
|
284
|
-
originalMsg.replace(lazyUtils.DATA_FETCH_ERROR_PREFIX, "").replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")
|
|
285
|
-
),
|
|
286
|
-
errorType: lazyUtils.ERROR_TYPE.DATA_FETCH,
|
|
287
|
-
dataFetchMapKey
|
|
288
|
-
};
|
|
289
|
-
}
|
|
290
|
-
if (originalMsg.indexOf(lazyUtils.LOAD_REMOTE_ERROR_PREFIX) === 0) {
|
|
291
|
-
return {
|
|
292
|
-
error: new Error(
|
|
293
|
-
originalMsg.replace(lazyUtils.LOAD_REMOTE_ERROR_PREFIX, "").replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")
|
|
294
|
-
),
|
|
295
|
-
errorType: lazyUtils.ERROR_TYPE.LOAD_REMOTE,
|
|
296
|
-
dataFetchMapKey
|
|
297
|
-
};
|
|
298
|
-
}
|
|
299
|
-
return {
|
|
300
|
-
error: new Error(originalMsg.replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")),
|
|
301
|
-
errorType: lazyUtils.ERROR_TYPE.UNKNOWN,
|
|
302
|
-
dataFetchMapKey
|
|
303
|
-
};
|
|
304
|
-
};
|
|
305
|
-
const DefaultLoading = /* @__PURE__ */ React.createElement(React.Fragment, null);
|
|
306
|
-
const DefaultErrorElement = (_data) => /* @__PURE__ */ React.createElement("div", null, "Error");
|
|
307
|
-
function AwaitDataFetch({
|
|
308
|
-
resolve,
|
|
309
|
-
loading = DefaultLoading,
|
|
310
|
-
errorElement = DefaultErrorElement,
|
|
311
|
-
children,
|
|
312
|
-
params
|
|
313
|
-
}) {
|
|
314
|
-
const dataRef = React.useRef();
|
|
315
|
-
const data = dataRef.current || resolve;
|
|
316
|
-
const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
|
|
317
|
-
return /* @__PURE__ */ React.createElement(
|
|
318
|
-
AwaitSuspense,
|
|
319
|
-
{
|
|
320
|
-
params,
|
|
321
|
-
loading,
|
|
322
|
-
errorElement,
|
|
323
|
-
resolve: getData
|
|
324
|
-
},
|
|
325
|
-
children
|
|
326
|
-
);
|
|
327
|
-
}
|
|
328
|
-
function AwaitSuspense({
|
|
329
|
-
resolve,
|
|
330
|
-
children,
|
|
331
|
-
loading = DefaultLoading,
|
|
332
|
-
errorElement = DefaultErrorElement
|
|
333
|
-
}) {
|
|
334
|
-
return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: loading }, /* @__PURE__ */ React.createElement(ResolveAwait, { resolve, errorElement }, children));
|
|
335
|
-
}
|
|
336
|
-
function ResolveAwait({
|
|
337
|
-
children,
|
|
338
|
-
resolve,
|
|
339
|
-
errorElement,
|
|
340
|
-
params
|
|
341
|
-
}) {
|
|
342
|
-
const data = resolve();
|
|
343
|
-
lazyUtils.logger.debug("resolve data: ", data);
|
|
344
|
-
if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
|
|
345
|
-
const transformedError = transformError(data);
|
|
346
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof errorElement === "function" ? /* @__PURE__ */ React.createElement(React.Fragment, null, globalThis.FEDERATION_SSR && /* @__PURE__ */ React.createElement(
|
|
347
|
-
"script",
|
|
348
|
-
{
|
|
349
|
-
suppressHydrationWarning: true,
|
|
350
|
-
dangerouslySetInnerHTML: {
|
|
351
|
-
__html: String.raw`
|
|
352
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] = globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] || []
|
|
353
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'].push([${transformedError.dataFetchMapKey ? `'${transformedError.dataFetchMapKey}'` : ""},${params ? JSON.stringify(params) : null},true]);`
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
), errorElement(transformedError)) : errorElement);
|
|
357
|
-
}
|
|
358
|
-
const toRender = typeof children === "function" ? children(data) : children;
|
|
359
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, toRender);
|
|
360
|
-
}
|
|
361
|
-
const fetchData = (promise, ref) => {
|
|
362
|
-
let data;
|
|
363
|
-
let status = "pending";
|
|
364
|
-
const suspender = promise.then((res) => {
|
|
365
|
-
status = "success";
|
|
366
|
-
data = res;
|
|
367
|
-
ref.current = res;
|
|
368
|
-
}).catch((e2) => {
|
|
369
|
-
status = "success";
|
|
370
|
-
console.warn(e2);
|
|
371
|
-
data = AWAIT_ERROR_PREFIX + e2;
|
|
372
|
-
});
|
|
373
|
-
return () => {
|
|
374
|
-
if (status === "pending") {
|
|
375
|
-
throw suspender;
|
|
376
|
-
}
|
|
377
|
-
return data;
|
|
378
|
-
};
|
|
379
|
-
};
|
|
380
|
-
function getTargetModuleInfo(id, instance) {
|
|
381
|
-
if (!instance) {
|
|
382
|
-
return;
|
|
383
|
-
}
|
|
384
|
-
const loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(id, instance);
|
|
385
|
-
if (!loadedRemoteInfo) {
|
|
386
|
-
return;
|
|
387
|
-
}
|
|
388
|
-
const snapshot = loadedRemoteInfo.snapshot;
|
|
389
|
-
if (!snapshot) {
|
|
390
|
-
return;
|
|
391
|
-
}
|
|
392
|
-
const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
|
|
393
|
-
if (!publicPath) {
|
|
394
|
-
return;
|
|
395
|
-
}
|
|
396
|
-
const modules = "modules" in snapshot ? snapshot.modules : [];
|
|
397
|
-
const targetModule = modules.find(
|
|
398
|
-
(m) => m.modulePath === loadedRemoteInfo.expose
|
|
399
|
-
);
|
|
400
|
-
if (!targetModule) {
|
|
401
|
-
return;
|
|
402
|
-
}
|
|
403
|
-
const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
|
|
404
|
-
if (!remoteEntry) {
|
|
405
|
-
return;
|
|
406
|
-
}
|
|
407
|
-
return {
|
|
408
|
-
module: targetModule,
|
|
409
|
-
publicPath,
|
|
410
|
-
remoteEntry
|
|
411
|
-
};
|
|
412
|
-
}
|
|
413
|
-
function collectSSRAssets(options) {
|
|
414
|
-
const {
|
|
415
|
-
id,
|
|
416
|
-
injectLink = true,
|
|
417
|
-
injectScript = false
|
|
418
|
-
} = typeof options === "string" ? { id: options } : options;
|
|
419
|
-
const links = [];
|
|
420
|
-
const scripts = [];
|
|
421
|
-
const instance = options.runtime.getInstance();
|
|
422
|
-
if (!instance || !injectLink && !injectScript) {
|
|
423
|
-
return [...scripts, ...links];
|
|
424
|
-
}
|
|
425
|
-
const moduleAndPublicPath = getTargetModuleInfo(id, instance);
|
|
426
|
-
if (!moduleAndPublicPath) {
|
|
427
|
-
return [...scripts, ...links];
|
|
428
|
-
}
|
|
429
|
-
const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
|
|
430
|
-
if (injectLink) {
|
|
431
|
-
[...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index2) => {
|
|
432
|
-
links.push(
|
|
433
|
-
/* @__PURE__ */ React.createElement(
|
|
434
|
-
"link",
|
|
435
|
-
{
|
|
436
|
-
key: `${file.split(".")[0]}_${index2}`,
|
|
437
|
-
href: `${publicPath}${file}`,
|
|
438
|
-
rel: "stylesheet",
|
|
439
|
-
type: "text/css"
|
|
440
|
-
}
|
|
441
|
-
)
|
|
442
|
-
);
|
|
443
|
-
});
|
|
444
|
-
}
|
|
445
|
-
if (injectScript) {
|
|
446
|
-
scripts.push(
|
|
447
|
-
/* @__PURE__ */ React.createElement(
|
|
448
|
-
"script",
|
|
449
|
-
{
|
|
450
|
-
async: true,
|
|
451
|
-
key: remoteEntry.split(".")[0],
|
|
452
|
-
src: `${publicPath}${remoteEntry}`,
|
|
453
|
-
crossOrigin: "anonymous"
|
|
454
|
-
}
|
|
455
|
-
)
|
|
456
|
-
);
|
|
457
|
-
[...targetModule.assets.js.sync].sort().forEach((file, index2) => {
|
|
458
|
-
scripts.push(
|
|
459
|
-
/* @__PURE__ */ React.createElement(
|
|
460
|
-
"script",
|
|
461
|
-
{
|
|
462
|
-
key: `${file.split(".")[0]}_${index2}`,
|
|
463
|
-
async: true,
|
|
464
|
-
src: `${publicPath}${file}`,
|
|
465
|
-
crossOrigin: "anonymous"
|
|
466
|
-
}
|
|
467
|
-
)
|
|
468
|
-
);
|
|
469
|
-
});
|
|
470
|
-
}
|
|
471
|
-
return [...scripts, ...links];
|
|
472
|
-
}
|
|
473
|
-
function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
|
|
474
|
-
var _a;
|
|
475
|
-
if (noSSR || typeof window !== "undefined" && window.location.href !== window[lazyUtils.FS_HREF]) {
|
|
476
|
-
if (!(loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.version)) {
|
|
477
|
-
throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} version is empty`);
|
|
478
|
-
}
|
|
479
|
-
const { snapshot } = loadedRemoteInfo;
|
|
480
|
-
if (!snapshot) {
|
|
481
|
-
throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} snapshot is empty`);
|
|
482
|
-
}
|
|
483
|
-
const dataFetchItem = lazyUtils.getDataFetchItem(id);
|
|
484
|
-
const isFetchServer = ((_a = dataFetchItem == null ? void 0 : dataFetchItem[0]) == null ? void 0 : _a[1]) === lazyUtils.MF_DATA_FETCH_TYPE.FETCH_SERVER;
|
|
485
|
-
if (isFetchServer && (!("ssrPublicPath" in snapshot) || !snapshot.ssrPublicPath)) {
|
|
486
|
-
throw new Error(
|
|
487
|
-
`ssrPublicPath is required while fetching ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data in SSR project!`
|
|
488
|
-
);
|
|
489
|
-
}
|
|
490
|
-
if (isFetchServer && (!("ssrRemoteEntry" in snapshot) || !snapshot.ssrRemoteEntry)) {
|
|
491
|
-
throw new Error(
|
|
492
|
-
`ssrRemoteEntry is required while loading ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data loader in SSR project!`
|
|
493
|
-
);
|
|
494
|
-
}
|
|
495
|
-
return {
|
|
496
|
-
name: loadedRemoteInfo.name,
|
|
497
|
-
version: loadedRemoteInfo.version,
|
|
498
|
-
ssrPublicPath: "ssrPublicPath" in snapshot ? snapshot.ssrPublicPath || "" : "",
|
|
499
|
-
ssrRemoteEntry: "ssrRemoteEntry" in snapshot ? snapshot.ssrRemoteEntry || "" : "",
|
|
500
|
-
globalName: loadedRemoteInfo.entryGlobalName
|
|
501
|
-
};
|
|
502
|
-
}
|
|
503
|
-
return;
|
|
504
|
-
}
|
|
505
|
-
function createLazyComponent(options) {
|
|
506
|
-
const { runtime } = options;
|
|
507
|
-
if (!(runtime == null ? void 0 : runtime.getInstance)) {
|
|
508
|
-
throw new Error(
|
|
509
|
-
'runtime is required if used in "@module-federation/bridge-react"!'
|
|
510
|
-
);
|
|
511
|
-
}
|
|
512
|
-
const exportName = (options == null ? void 0 : options.export) || "default";
|
|
513
|
-
const callLoader = async () => {
|
|
514
|
-
lazyUtils.logger.debug("callLoader start", Date.now());
|
|
515
|
-
const m = await options.loader();
|
|
516
|
-
lazyUtils.logger.debug("callLoader end", Date.now());
|
|
517
|
-
if (!m) {
|
|
518
|
-
throw new Error("load remote failed");
|
|
519
|
-
}
|
|
520
|
-
return m;
|
|
521
|
-
};
|
|
522
|
-
const getData = async (noSSR) => {
|
|
523
|
-
let loadedRemoteInfo;
|
|
524
|
-
let moduleId;
|
|
525
|
-
const instance = runtime.getInstance();
|
|
526
|
-
try {
|
|
527
|
-
const m = await callLoader();
|
|
528
|
-
moduleId = m && m[Symbol.for("mf_module_id")];
|
|
529
|
-
if (!moduleId) {
|
|
530
|
-
throw new Error("moduleId is empty");
|
|
531
|
-
}
|
|
532
|
-
loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
|
|
533
|
-
if (!loadedRemoteInfo) {
|
|
534
|
-
throw new Error(`can not find loaded remote('${moduleId}') info!`);
|
|
535
|
-
}
|
|
536
|
-
} catch (e2) {
|
|
537
|
-
const errMsg = `${lazyUtils.LOAD_REMOTE_ERROR_PREFIX}${e2}`;
|
|
538
|
-
lazyUtils.logger.debug(e2);
|
|
539
|
-
throw new Error(errMsg);
|
|
540
|
-
}
|
|
541
|
-
let dataFetchMapKey;
|
|
542
|
-
try {
|
|
543
|
-
dataFetchMapKey = lazyUtils.getDataFetchMapKey(
|
|
544
|
-
lazyUtils.getDataFetchInfo({
|
|
545
|
-
name: loadedRemoteInfo.name,
|
|
546
|
-
alias: loadedRemoteInfo.alias,
|
|
547
|
-
id: moduleId,
|
|
548
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
549
|
-
}),
|
|
550
|
-
{ name: instance.name, version: instance == null ? void 0 : instance.options.version }
|
|
551
|
-
);
|
|
552
|
-
lazyUtils.logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
|
|
553
|
-
if (!dataFetchMapKey) {
|
|
554
|
-
return;
|
|
555
|
-
}
|
|
556
|
-
const data = await lazyUtils.fetchData(
|
|
557
|
-
dataFetchMapKey,
|
|
558
|
-
{
|
|
559
|
-
...options.dataFetchParams,
|
|
560
|
-
isDowngrade: false
|
|
561
|
-
},
|
|
562
|
-
getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR)
|
|
563
|
-
);
|
|
564
|
-
lazyUtils.setDataFetchItemLoadedStatus(dataFetchMapKey);
|
|
565
|
-
lazyUtils.logger.debug("get data res: \n", data);
|
|
566
|
-
return data;
|
|
567
|
-
} catch (err) {
|
|
568
|
-
const errMsg = `${lazyUtils.DATA_FETCH_ERROR_PREFIX}${lazyUtils.wrapDataFetchId(dataFetchMapKey)}${err}`;
|
|
569
|
-
lazyUtils.logger.debug(errMsg);
|
|
570
|
-
throw new Error(errMsg);
|
|
571
|
-
}
|
|
572
|
-
};
|
|
573
|
-
const LazyComponent = React.lazy(async () => {
|
|
574
|
-
const m = await callLoader();
|
|
575
|
-
const moduleId = m && m[Symbol.for("mf_module_id")];
|
|
576
|
-
const instance = runtime.getInstance();
|
|
577
|
-
const loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
|
|
578
|
-
loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.snapshot;
|
|
579
|
-
const dataFetchMapKey = loadedRemoteInfo ? lazyUtils.getDataFetchMapKey(
|
|
580
|
-
lazyUtils.getDataFetchInfo({
|
|
581
|
-
name: loadedRemoteInfo.name,
|
|
582
|
-
alias: loadedRemoteInfo.alias,
|
|
583
|
-
id: moduleId,
|
|
584
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
585
|
-
}),
|
|
586
|
-
{ name: instance.name, version: instance == null ? void 0 : instance.options.version }
|
|
587
|
-
) : void 0;
|
|
588
|
-
lazyUtils.logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
|
|
589
|
-
const assets = collectSSRAssets({
|
|
590
|
-
id: moduleId,
|
|
591
|
-
runtime
|
|
592
|
-
});
|
|
593
|
-
const Com = m[exportName];
|
|
594
|
-
if (exportName in m && typeof Com === "function") {
|
|
595
|
-
return {
|
|
596
|
-
default: (props) => /* @__PURE__ */ React.createElement(React.Fragment, null, globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ React.createElement(
|
|
597
|
-
"script",
|
|
598
|
-
{
|
|
599
|
-
suppressHydrationWarning: true,
|
|
600
|
-
dangerouslySetInnerHTML: {
|
|
601
|
-
__html: String.raw`
|
|
602
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] = globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] || [];
|
|
603
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
|
|
604
|
-
`
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
), globalThis.FEDERATION_SSR && assets, /* @__PURE__ */ React.createElement(Com, { ...props }))
|
|
608
|
-
};
|
|
609
|
-
} else {
|
|
610
|
-
throw Error(
|
|
611
|
-
`Make sure that ${moduleId} has the correct export when export is ${String(
|
|
612
|
-
exportName
|
|
613
|
-
)}`
|
|
614
|
-
);
|
|
615
|
-
}
|
|
616
|
-
});
|
|
617
|
-
return (props) => {
|
|
618
|
-
const { key, ...args } = props;
|
|
619
|
-
if (globalThis.FEDERATION_SSR && !options.noSSR) {
|
|
620
|
-
const { key: key2, ...args2 } = props;
|
|
621
|
-
return /* @__PURE__ */ React.createElement(
|
|
622
|
-
AwaitDataFetch,
|
|
623
|
-
{
|
|
624
|
-
resolve: getData(options.noSSR),
|
|
625
|
-
loading: options.loading,
|
|
626
|
-
errorElement: options.fallback
|
|
627
|
-
},
|
|
628
|
-
(data) => /* @__PURE__ */ React.createElement(LazyComponent, { ...args2, mfData: data })
|
|
629
|
-
);
|
|
630
|
-
} else {
|
|
631
|
-
const [data, setData] = React.useState(null);
|
|
632
|
-
const [loading, setLoading] = React.useState(true);
|
|
633
|
-
const [error, setError] = React.useState(null);
|
|
634
|
-
React.useEffect(() => {
|
|
635
|
-
let isMounted = true;
|
|
636
|
-
const fetchDataAsync = async () => {
|
|
637
|
-
try {
|
|
638
|
-
setLoading(true);
|
|
639
|
-
const result = await getData(options.noSSR);
|
|
640
|
-
if (isMounted) {
|
|
641
|
-
setData(result);
|
|
642
|
-
}
|
|
643
|
-
} catch (e2) {
|
|
644
|
-
if (isMounted) {
|
|
645
|
-
setError(transformError(e2));
|
|
646
|
-
}
|
|
647
|
-
} finally {
|
|
648
|
-
if (isMounted) {
|
|
649
|
-
setLoading(false);
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
};
|
|
653
|
-
fetchDataAsync();
|
|
654
|
-
return () => {
|
|
655
|
-
isMounted = false;
|
|
656
|
-
};
|
|
657
|
-
}, []);
|
|
658
|
-
if (loading) {
|
|
659
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, options.loading);
|
|
660
|
-
}
|
|
661
|
-
if (error) {
|
|
662
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof options.fallback === "function" ? options.fallback(error) : options.fallback);
|
|
663
|
-
}
|
|
664
|
-
return /* @__PURE__ */ React.createElement(LazyComponent, { ...args, mfData: data });
|
|
665
|
-
}
|
|
666
|
-
};
|
|
667
|
-
}
|
|
668
|
-
function wrapNoSSR(createLazyComponentFn) {
|
|
669
|
-
return (options) => {
|
|
670
|
-
return createLazyComponentFn({ ...options, noSSR: true });
|
|
671
|
-
};
|
|
672
|
-
}
|
|
673
|
-
exports.autoFetchDataPlugin = dataFetchRuntimePlugin;
|
|
674
|
-
exports.ERROR_TYPE = lazyUtils.ERROR_TYPE;
|
|
675
|
-
exports.setSSREnv = lazyUtils.setSSREnv;
|
|
676
|
-
exports.callDataFetch = dataFetchUtils.callDataFetch;
|
|
677
|
-
exports.injectDataFetch = dataFetchUtils.injectDataFetch;
|
|
678
|
-
exports.collectSSRAssets = collectSSRAssets;
|
|
679
264
|
exports.createBridgeComponent = createBridgeComponent;
|
|
680
|
-
exports.createLazyComponent = createLazyComponent;
|
|
681
|
-
exports.createRemoteAppComponent = createRemoteAppComponent;
|
|
682
265
|
exports.createRemoteComponent = createRemoteComponent;
|
|
683
|
-
exports.wrapNoSSR = wrapNoSSR;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,46 +1,11 @@
|
|
|
1
1
|
import { default as default_2 } from 'react';
|
|
2
|
-
import { FederationRuntimePlugin } from '@module-federation/runtime';
|
|
3
|
-
import { JSX as JSX_2 } from 'react';
|
|
4
|
-
import { Key } from 'react';
|
|
5
|
-
import { moduleFederationRuntime } from '@module-federation/runtime';
|
|
6
2
|
import * as React_2 from 'react';
|
|
7
|
-
import { ReactNode } from 'react';
|
|
8
|
-
|
|
9
|
-
export declare const autoFetchDataPlugin: () => FederationRuntimePlugin;
|
|
10
|
-
|
|
11
|
-
export declare function callDataFetch(): Promise<void>;
|
|
12
|
-
|
|
13
|
-
export declare function collectSSRAssets(options: CollectSSRAssetsOptions): default_2.ReactNode[];
|
|
14
|
-
|
|
15
|
-
export declare type CollectSSRAssetsOptions = {
|
|
16
|
-
id: string;
|
|
17
|
-
injectScript?: boolean;
|
|
18
|
-
injectLink?: boolean;
|
|
19
|
-
runtime: moduleFederationRuntime;
|
|
20
|
-
};
|
|
21
3
|
|
|
22
4
|
export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
|
|
23
5
|
render(info: RenderParams): Promise<void>;
|
|
24
6
|
destroy(info: DestroyParams): void;
|
|
25
7
|
};
|
|
26
8
|
|
|
27
|
-
export declare function createLazyComponent<T, E extends keyof T>(options: CreateLazyComponentOptions<T, E>): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? ReactKey : Parameters<T[E]>[0] & ReactKey : ReactKey) => default_2.JSX.Element;
|
|
28
|
-
|
|
29
|
-
export declare type CreateLazyComponentOptions<T, E extends keyof T> = {
|
|
30
|
-
loader: () => Promise<T>;
|
|
31
|
-
loading: default_2.ReactNode;
|
|
32
|
-
fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
|
|
33
|
-
export?: E;
|
|
34
|
-
dataFetchParams?: DataFetchParams;
|
|
35
|
-
noSSR?: boolean;
|
|
36
|
-
runtime: moduleFederationRuntime;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export declare function createRemoteAppComponent<T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
|
|
43
|
-
*/
|
|
44
9
|
export declare function createRemoteComponent<T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
|
|
45
10
|
|
|
46
11
|
export declare interface CreateRootOptions {
|
|
@@ -57,10 +22,6 @@ declare interface CreateRootOptions_2 {
|
|
|
57
22
|
transitionCallbacks?: unknown;
|
|
58
23
|
}
|
|
59
24
|
|
|
60
|
-
export declare type DataFetchParams = {
|
|
61
|
-
isDowngrade: boolean;
|
|
62
|
-
} & Record<string, unknown>;
|
|
63
|
-
|
|
64
25
|
/**
|
|
65
26
|
* Parameters for the destroy function
|
|
66
27
|
*/
|
|
@@ -69,30 +30,8 @@ export declare interface DestroyParams {
|
|
|
69
30
|
dom: HTMLElement;
|
|
70
31
|
}
|
|
71
32
|
|
|
72
|
-
export declare const ERROR_TYPE: {
|
|
73
|
-
DATA_FETCH: number;
|
|
74
|
-
LOAD_REMOTE: number;
|
|
75
|
-
UNKNOWN: number;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
declare type ErrorInfo = {
|
|
79
|
-
error: Error;
|
|
80
|
-
errorType: number;
|
|
81
|
-
dataFetchMapKey?: string;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export declare function injectDataFetch(): void;
|
|
85
|
-
|
|
86
33
|
declare type LazyRemoteComponentInfo<T, E extends keyof T> = RemoteComponentParams<T>;
|
|
87
34
|
|
|
88
|
-
export declare type NoSSRRemoteInfo = {
|
|
89
|
-
name: string;
|
|
90
|
-
version: string;
|
|
91
|
-
ssrPublicPath: string;
|
|
92
|
-
ssrRemoteEntry: string;
|
|
93
|
-
globalName: string;
|
|
94
|
-
};
|
|
95
|
-
|
|
96
35
|
/**
|
|
97
36
|
* Parameters for the provider function
|
|
98
37
|
*/
|
|
@@ -126,10 +65,6 @@ export declare interface ProviderParams {
|
|
|
126
65
|
className?: string;
|
|
127
66
|
}
|
|
128
67
|
|
|
129
|
-
declare type ReactKey = {
|
|
130
|
-
key?: default_2.Key | null;
|
|
131
|
-
};
|
|
132
|
-
|
|
133
68
|
/**
|
|
134
69
|
* Parameters for the remote component loader
|
|
135
70
|
*/
|
|
@@ -196,16 +131,4 @@ declare interface Root_2 {
|
|
|
196
131
|
*/
|
|
197
132
|
export declare type RootType = HTMLElement | Root_2;
|
|
198
133
|
|
|
199
|
-
export declare function setSSREnv({ fetchServerQuery, }: {
|
|
200
|
-
fetchServerQuery?: Record<string, unknown>;
|
|
201
|
-
}): void;
|
|
202
|
-
|
|
203
|
-
export declare function wrapNoSSR<T, E extends keyof T>(createLazyComponentFn: typeof createLazyComponent<T, E>): (options: Omit<CreateLazyComponentOptions<T, E>, "noSSR">) => (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? {
|
|
204
|
-
key?: Key | null;
|
|
205
|
-
} : Parameters<T[E]>[0] & {
|
|
206
|
-
key?: Key | null;
|
|
207
|
-
} : {
|
|
208
|
-
key?: Key | null;
|
|
209
|
-
}) => JSX_2.Element;
|
|
210
|
-
|
|
211
134
|
export { }
|