@module-federation/bridge-react 0.0.0-next-20250630125121 → 0.0.0-next-20250701074404
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 +10 -6
- package/__tests__/bridge.spec.tsx +7 -7
- package/dist/{bridge-base-UGCwcMnG.js → bridge-base-BBH982Tz.cjs} +1 -1
- package/dist/{bridge-base-BoshEggF.mjs → bridge-base-P6pEjY1q.js} +1 -1
- package/dist/index-Cv3p6r66.cjs +235 -0
- package/dist/index-D4yt7Udv.js +236 -0
- package/dist/index.cjs.js +9 -434
- package/dist/index.d.ts +0 -142
- package/dist/index.es.js +11 -437
- 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 -45
- package/src/index.ts +1 -30
- package/src/remote/component.tsx +3 -3
- package/src/remote/create.tsx +4 -17
- package/tsconfig.json +1 -1
- package/vite.config.ts +0 -13
- package/dist/data-fetch-runtime-plugin.cjs.js +0 -73
- package/dist/data-fetch-runtime-plugin.d.ts +0 -6
- package/dist/data-fetch-runtime-plugin.es.js +0 -74
- package/dist/data-fetch-server-middleware.cjs.js +0 -163
- package/dist/data-fetch-server-middleware.d.ts +0 -6
- package/dist/data-fetch-server-middleware.es.js +0 -164
- package/dist/data-fetch-utils.cjs.js +0 -1271
- package/dist/data-fetch-utils.d.ts +0 -77
- package/dist/data-fetch-utils.es.js +0 -1273
- package/dist/index-C0fDZB5b.js +0 -45
- package/dist/index-CqxytsLY.mjs +0 -46
- package/dist/index.esm-BCeUd-x9.mjs +0 -418
- package/dist/index.esm-j_1sIRzg.js +0 -417
- package/dist/inject-data-fetch-CAvi-gSf.js +0 -79
- package/dist/inject-data-fetch-errCdqBS.mjs +0 -80
- package/dist/lazy-utils.cjs.js +0 -24
- package/dist/lazy-utils.d.ts +0 -140
- package/dist/lazy-utils.es.js +0 -24
- package/dist/utils-Bk8hGjjF.mjs +0 -2016
- package/dist/utils-iEVlDmyk.js +0 -2015
- package/src/lazy/AwaitDataFetch.tsx +0 -176
- package/src/lazy/constant.ts +0 -30
- package/src/lazy/createLazyComponent.tsx +0 -393
- package/src/lazy/data-fetch/cache.ts +0 -296
- package/src/lazy/data-fetch/call-data-fetch.ts +0 -13
- package/src/lazy/data-fetch/data-fetch-server-middleware.ts +0 -196
- package/src/lazy/data-fetch/index.ts +0 -15
- package/src/lazy/data-fetch/inject-data-fetch.ts +0 -109
- package/src/lazy/data-fetch/prefetch.ts +0 -102
- package/src/lazy/data-fetch/runtime-plugin.ts +0 -116
- package/src/lazy/index.ts +0 -31
- package/src/lazy/logger.ts +0 -6
- package/src/lazy/types.ts +0 -75
- package/src/lazy/utils.ts +0 -372
- 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-iEVlDmyk.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,427 +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.instance;
|
|
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 void 0;
|
|
504
|
-
}
|
|
505
|
-
function createLazyComponent(options) {
|
|
506
|
-
const { instance, cacheData } = options;
|
|
507
|
-
if (!instance) {
|
|
508
|
-
throw new Error("instance is required for createLazyComponent!");
|
|
509
|
-
}
|
|
510
|
-
let dataCache = null;
|
|
511
|
-
const exportName = (options == null ? void 0 : options.export) || "default";
|
|
512
|
-
const callLoader = async () => {
|
|
513
|
-
lazyUtils.logger.debug("callLoader start", Date.now());
|
|
514
|
-
const m = await options.loader();
|
|
515
|
-
lazyUtils.logger.debug("callLoader end", Date.now());
|
|
516
|
-
if (!m) {
|
|
517
|
-
throw new Error("load remote failed");
|
|
518
|
-
}
|
|
519
|
-
return m;
|
|
520
|
-
};
|
|
521
|
-
const getData = async (noSSR) => {
|
|
522
|
-
let loadedRemoteInfo;
|
|
523
|
-
let moduleId;
|
|
524
|
-
try {
|
|
525
|
-
const m = await callLoader();
|
|
526
|
-
moduleId = m && m[Symbol.for("mf_module_id")];
|
|
527
|
-
if (!moduleId) {
|
|
528
|
-
throw new Error("moduleId is empty");
|
|
529
|
-
}
|
|
530
|
-
loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
|
|
531
|
-
if (!loadedRemoteInfo) {
|
|
532
|
-
throw new Error(`can not find loaded remote('${moduleId}') info!`);
|
|
533
|
-
}
|
|
534
|
-
} catch (e2) {
|
|
535
|
-
const errMsg = `${lazyUtils.LOAD_REMOTE_ERROR_PREFIX}${e2}`;
|
|
536
|
-
lazyUtils.logger.debug(e2);
|
|
537
|
-
throw new Error(errMsg);
|
|
538
|
-
}
|
|
539
|
-
let dataFetchMapKey;
|
|
540
|
-
try {
|
|
541
|
-
dataFetchMapKey = lazyUtils.getDataFetchMapKey(
|
|
542
|
-
lazyUtils.getDataFetchInfo({
|
|
543
|
-
name: loadedRemoteInfo.name,
|
|
544
|
-
alias: loadedRemoteInfo.alias,
|
|
545
|
-
id: moduleId,
|
|
546
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
547
|
-
}),
|
|
548
|
-
{ name: instance.name, version: instance.options.version }
|
|
549
|
-
);
|
|
550
|
-
lazyUtils.logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
|
|
551
|
-
if (!dataFetchMapKey) {
|
|
552
|
-
return;
|
|
553
|
-
}
|
|
554
|
-
const data = await lazyUtils.fetchData(
|
|
555
|
-
dataFetchMapKey,
|
|
556
|
-
{
|
|
557
|
-
...options.dataFetchParams,
|
|
558
|
-
isDowngrade: false
|
|
559
|
-
},
|
|
560
|
-
getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR)
|
|
561
|
-
);
|
|
562
|
-
lazyUtils.setDataFetchItemLoadedStatus(dataFetchMapKey);
|
|
563
|
-
lazyUtils.logger.debug("get data res: \n", data);
|
|
564
|
-
dataCache = data;
|
|
565
|
-
return data;
|
|
566
|
-
} catch (err) {
|
|
567
|
-
const errMsg = `${lazyUtils.DATA_FETCH_ERROR_PREFIX}${lazyUtils.wrapDataFetchId(dataFetchMapKey)}${err}`;
|
|
568
|
-
lazyUtils.logger.debug(errMsg);
|
|
569
|
-
throw new Error(errMsg);
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
const LazyComponent = React.lazy(async () => {
|
|
573
|
-
const m = await callLoader();
|
|
574
|
-
const moduleId = m && m[Symbol.for("mf_module_id")];
|
|
575
|
-
const loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
|
|
576
|
-
loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.snapshot;
|
|
577
|
-
const dataFetchMapKey = loadedRemoteInfo ? lazyUtils.getDataFetchMapKey(
|
|
578
|
-
lazyUtils.getDataFetchInfo({
|
|
579
|
-
name: loadedRemoteInfo.name,
|
|
580
|
-
alias: loadedRemoteInfo.alias,
|
|
581
|
-
id: moduleId,
|
|
582
|
-
remoteSnapshot: loadedRemoteInfo.snapshot
|
|
583
|
-
}),
|
|
584
|
-
{ name: instance.name, version: instance == null ? void 0 : instance.options.version }
|
|
585
|
-
) : void 0;
|
|
586
|
-
lazyUtils.logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
|
|
587
|
-
const assets = collectSSRAssets({
|
|
588
|
-
id: moduleId,
|
|
589
|
-
instance
|
|
590
|
-
});
|
|
591
|
-
const Com = m[exportName];
|
|
592
|
-
if (exportName in m && typeof Com === "function") {
|
|
593
|
-
return {
|
|
594
|
-
default: (props) => /* @__PURE__ */ React.createElement(React.Fragment, null, globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ React.createElement(
|
|
595
|
-
"script",
|
|
596
|
-
{
|
|
597
|
-
suppressHydrationWarning: true,
|
|
598
|
-
dangerouslySetInnerHTML: {
|
|
599
|
-
__html: String.raw`
|
|
600
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] = globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] || [];
|
|
601
|
-
globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
|
|
602
|
-
`
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
), globalThis.FEDERATION_SSR && assets, /* @__PURE__ */ React.createElement(Com, { ...props }))
|
|
606
|
-
};
|
|
607
|
-
} else {
|
|
608
|
-
throw Error(
|
|
609
|
-
`Make sure that ${moduleId} has the correct export when export is ${String(
|
|
610
|
-
exportName
|
|
611
|
-
)}`
|
|
612
|
-
);
|
|
613
|
-
}
|
|
614
|
-
});
|
|
615
|
-
return (props) => {
|
|
616
|
-
const { key, ...args } = props;
|
|
617
|
-
if (cacheData && dataCache) {
|
|
618
|
-
return /* @__PURE__ */ React.createElement(LazyComponent, { ...args, mfData: dataCache });
|
|
619
|
-
}
|
|
620
|
-
if (!options.noSSR) {
|
|
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, { ...args, 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.CacheSize = lazyUtils.CacheSize;
|
|
675
|
-
exports.CacheTime = lazyUtils.CacheTime;
|
|
676
|
-
exports.ERROR_TYPE = lazyUtils.ERROR_TYPE;
|
|
677
|
-
exports.cache = lazyUtils.cache;
|
|
678
|
-
exports.clearStore = lazyUtils.clearStore;
|
|
679
|
-
exports.configureCache = lazyUtils.configureCache;
|
|
680
|
-
exports.generateKey = lazyUtils.generateKey;
|
|
681
|
-
exports.revalidateTag = lazyUtils.revalidateTag;
|
|
682
|
-
exports.setSSREnv = lazyUtils.setSSREnv;
|
|
683
|
-
exports.callDataFetch = dataFetchUtils.callDataFetch;
|
|
684
|
-
exports.prefetch = dataFetchUtils.prefetch;
|
|
685
|
-
exports.collectSSRAssets = collectSSRAssets;
|
|
686
264
|
exports.createBridgeComponent = createBridgeComponent;
|
|
687
|
-
exports.createLazyComponent = createLazyComponent;
|
|
688
|
-
exports.createRemoteAppComponent = createRemoteAppComponent;
|
|
689
265
|
exports.createRemoteComponent = createRemoteComponent;
|
|
690
|
-
exports.wrapNoSSR = wrapNoSSR;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,97 +1,11 @@
|
|
|
1
1
|
import { default as default_2 } from 'react';
|
|
2
|
-
import { FederationRuntimePlugin } from '@module-federation/runtime';
|
|
3
|
-
import { getInstance } from '@module-federation/runtime';
|
|
4
|
-
import { JSX as JSX_2 } from 'react';
|
|
5
|
-
import { Key } from 'react';
|
|
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 cache<T>(fn: DataFetch<T>, options?: CacheOptions): DataFetch<T>;
|
|
12
|
-
|
|
13
|
-
declare interface CacheConfig {
|
|
14
|
-
maxSize?: number;
|
|
15
|
-
unstable_shouldDisable?: ({ request, }: {
|
|
16
|
-
request: Request;
|
|
17
|
-
}) => boolean | Promise<boolean>;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
declare interface CacheOptions {
|
|
21
|
-
tag?: string | string[];
|
|
22
|
-
maxAge?: number;
|
|
23
|
-
revalidate?: number;
|
|
24
|
-
getKey?: <Args extends any[]>(...args: Args) => string;
|
|
25
|
-
customKey?: <Args extends any[]>(options: {
|
|
26
|
-
params: Args;
|
|
27
|
-
fn: (...args: Args) => any;
|
|
28
|
-
generatedKey: string;
|
|
29
|
-
}) => string | symbol;
|
|
30
|
-
onCache?: (info: CacheStatsInfo) => boolean;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export declare const CacheSize: {
|
|
34
|
-
readonly KB: 1024;
|
|
35
|
-
readonly MB: number;
|
|
36
|
-
readonly GB: number;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export declare interface CacheStatsInfo {
|
|
40
|
-
status: CacheStatus;
|
|
41
|
-
key: string | symbol;
|
|
42
|
-
params: DataFetchParams;
|
|
43
|
-
result: any;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export declare type CacheStatus = 'hit' | 'stale' | 'miss';
|
|
47
|
-
|
|
48
|
-
export declare const CacheTime: {
|
|
49
|
-
readonly SECOND: 1000;
|
|
50
|
-
readonly MINUTE: number;
|
|
51
|
-
readonly HOUR: number;
|
|
52
|
-
readonly DAY: number;
|
|
53
|
-
readonly WEEK: number;
|
|
54
|
-
readonly MONTH: number;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export declare function callDataFetch(): Promise<void>;
|
|
58
|
-
|
|
59
|
-
export declare function clearStore(): void;
|
|
60
|
-
|
|
61
|
-
export declare function collectSSRAssets(options: CollectSSRAssetsOptions): default_2.ReactNode[];
|
|
62
|
-
|
|
63
|
-
export declare type CollectSSRAssetsOptions = {
|
|
64
|
-
id: string;
|
|
65
|
-
instance: ReturnType<typeof getInstance>;
|
|
66
|
-
injectScript?: boolean;
|
|
67
|
-
injectLink?: boolean;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export declare function configureCache(config: CacheConfig): void;
|
|
71
3
|
|
|
72
4
|
export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
|
|
73
5
|
render(info: RenderParams): Promise<void>;
|
|
74
6
|
destroy(info: DestroyParams): void;
|
|
75
7
|
};
|
|
76
8
|
|
|
77
|
-
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;
|
|
78
|
-
|
|
79
|
-
export declare type CreateLazyComponentOptions<T, E extends keyof T> = {
|
|
80
|
-
loader: () => Promise<T>;
|
|
81
|
-
instance: ReturnType<typeof getInstance>;
|
|
82
|
-
loading: default_2.ReactNode;
|
|
83
|
-
fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
|
|
84
|
-
export?: E;
|
|
85
|
-
dataFetchParams?: DataFetchParams;
|
|
86
|
-
noSSR?: boolean;
|
|
87
|
-
cacheData?: boolean;
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
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>>;
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
|
|
94
|
-
*/
|
|
95
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>>;
|
|
96
10
|
|
|
97
11
|
export declare interface CreateRootOptions {
|
|
@@ -108,13 +22,6 @@ declare interface CreateRootOptions_2 {
|
|
|
108
22
|
transitionCallbacks?: unknown;
|
|
109
23
|
}
|
|
110
24
|
|
|
111
|
-
declare type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
|
|
112
|
-
|
|
113
|
-
export declare type DataFetchParams = {
|
|
114
|
-
isDowngrade: boolean;
|
|
115
|
-
_id?: string;
|
|
116
|
-
} & Record<string, unknown>;
|
|
117
|
-
|
|
118
25
|
/**
|
|
119
26
|
* Parameters for the destroy function
|
|
120
27
|
*/
|
|
@@ -123,39 +30,8 @@ export declare interface DestroyParams {
|
|
|
123
30
|
dom: HTMLElement;
|
|
124
31
|
}
|
|
125
32
|
|
|
126
|
-
export declare const ERROR_TYPE: {
|
|
127
|
-
DATA_FETCH: number;
|
|
128
|
-
LOAD_REMOTE: number;
|
|
129
|
-
UNKNOWN: number;
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
declare type ErrorInfo = {
|
|
133
|
-
error: Error;
|
|
134
|
-
errorType: number;
|
|
135
|
-
dataFetchMapKey?: string;
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export declare function generateKey(dataFetchOptions: DataFetchParams): string;
|
|
139
|
-
|
|
140
33
|
declare type LazyRemoteComponentInfo<T, E extends keyof T> = RemoteComponentParams<T>;
|
|
141
34
|
|
|
142
|
-
export declare type NoSSRRemoteInfo = {
|
|
143
|
-
name: string;
|
|
144
|
-
version: string;
|
|
145
|
-
ssrPublicPath: string;
|
|
146
|
-
ssrRemoteEntry: string;
|
|
147
|
-
globalName: string;
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
export declare function prefetch(options: PrefetchOptions): Promise<void>;
|
|
151
|
-
|
|
152
|
-
declare type PrefetchOptions = {
|
|
153
|
-
id: string;
|
|
154
|
-
instance: ReturnType<typeof getInstance>;
|
|
155
|
-
dataFetchParams?: DataFetchParams;
|
|
156
|
-
preloadComponentResource?: boolean;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
35
|
/**
|
|
160
36
|
* Parameters for the provider function
|
|
161
37
|
*/
|
|
@@ -189,10 +65,6 @@ export declare interface ProviderParams {
|
|
|
189
65
|
className?: string;
|
|
190
66
|
}
|
|
191
67
|
|
|
192
|
-
declare type ReactKey = {
|
|
193
|
-
key?: default_2.Key | null;
|
|
194
|
-
};
|
|
195
|
-
|
|
196
68
|
/**
|
|
197
69
|
* Parameters for the remote component loader
|
|
198
70
|
*/
|
|
@@ -241,8 +113,6 @@ export declare interface RenderParams {
|
|
|
241
113
|
[key: string]: unknown;
|
|
242
114
|
}
|
|
243
115
|
|
|
244
|
-
export declare function revalidateTag(tag: string): void;
|
|
245
|
-
|
|
246
116
|
export declare interface Root {
|
|
247
117
|
render(children: React.ReactNode): void;
|
|
248
118
|
unmount(): void;
|
|
@@ -261,16 +131,4 @@ declare interface Root_2 {
|
|
|
261
131
|
*/
|
|
262
132
|
export declare type RootType = HTMLElement | Root_2;
|
|
263
133
|
|
|
264
|
-
export declare function setSSREnv({ fetchServerQuery, }: {
|
|
265
|
-
fetchServerQuery?: Record<string, unknown>;
|
|
266
|
-
}): void;
|
|
267
|
-
|
|
268
|
-
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 ? {
|
|
269
|
-
key?: Key | null;
|
|
270
|
-
} : Parameters<T[E]>[0] & {
|
|
271
|
-
key?: Key | null;
|
|
272
|
-
} : {
|
|
273
|
-
key?: Key | null;
|
|
274
|
-
}) => JSX_2.Element;
|
|
275
|
-
|
|
276
134
|
export { }
|