remote-reload-utils 0.0.13 → 0.0.16
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 +27 -0
- package/dist/index.d.ts +0 -2
- package/dist/main.cjs +176 -367
- package/dist/main.js +169 -323
- package/dist/plugins/register-shared-react.d.ts +6 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +39 -5
- package/dist/components/ErrorBoundary.d.ts +0 -34
- package/dist/components/RemoteModuleProvider.d.ts +0 -95
- package/dist/components/SuspenseLoader.d.ts +0 -131
- package/dist/components/index.d.ts +0 -6
package/dist/main.cjs
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.n = (module)=>{
|
|
5
|
-
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
-
__webpack_require__.d(getter, {
|
|
7
|
-
a: getter
|
|
8
|
-
});
|
|
9
|
-
return getter;
|
|
10
|
-
};
|
|
11
|
-
})();
|
|
12
3
|
(()=>{
|
|
13
4
|
__webpack_require__.d = (exports1, definition)=>{
|
|
14
5
|
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
@@ -36,39 +27,31 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
36
27
|
compareVersions: ()=>compareVersions,
|
|
37
28
|
fetchAvailableVersions: ()=>fetchAvailableVersions,
|
|
38
29
|
sortVersions: ()=>sortVersions,
|
|
39
|
-
useRemoteModuleHook: ()=>useRemoteModuleHook,
|
|
40
30
|
registerRemoteInstance: ()=>registerRemoteInstance,
|
|
41
31
|
fallbackPlugin: ()=>fallbackPlugin,
|
|
42
32
|
createEventBus: ()=>createEventBus,
|
|
43
|
-
withRemote: ()=>withRemote,
|
|
44
33
|
getPreloadStatus: ()=>getPreloadStatus,
|
|
45
34
|
parseVersion: ()=>parseVersion,
|
|
46
35
|
resolveFinalVersion: ()=>resolveFinalVersion,
|
|
47
36
|
buildFinalUrls: ()=>buildFinalUrls,
|
|
48
37
|
fetchLatestVersion: ()=>fetchLatestVersion,
|
|
49
|
-
ErrorBoundary: ()=>ErrorBoundary,
|
|
50
|
-
getFinalSharedConfig: ()=>getFinalSharedConfig,
|
|
51
38
|
isRemoteLoaded: ()=>isRemoteLoaded,
|
|
39
|
+
getFinalSharedConfig: ()=>getFinalSharedConfig,
|
|
52
40
|
tryLoadRemote: ()=>tryLoadRemote,
|
|
53
41
|
getVersionCache: ()=>getVersionCache,
|
|
54
42
|
eventBus: ()=>eventBus,
|
|
55
|
-
RemoteModuleRenderer: ()=>RemoteModuleRenderer,
|
|
56
|
-
clearPreloadCache: ()=>clearPreloadCache,
|
|
57
43
|
loadRemoteMultiVersion: ()=>loadRemoteMultiVersion,
|
|
44
|
+
clearPreloadCache: ()=>clearPreloadCache,
|
|
45
|
+
loadReactVersion: ()=>loadReactVersion,
|
|
58
46
|
getRemoteHealthReport: ()=>getRemoteHealthReport,
|
|
59
|
-
checkModuleLoadable: ()=>checkModuleLoadable,
|
|
60
47
|
getStableVersions: ()=>getStableVersions,
|
|
61
|
-
|
|
48
|
+
checkModuleLoadable: ()=>checkModuleLoadable,
|
|
62
49
|
buildCdnUrls: ()=>buildCdnUrls,
|
|
63
|
-
|
|
50
|
+
extractMajorVersion: ()=>extractMajorVersion,
|
|
64
51
|
preloadRemoteList: ()=>preloadRemoteList,
|
|
65
|
-
SuspenseRemoteLoader: ()=>SuspenseRemoteLoader,
|
|
66
52
|
registerLoadedModule: ()=>registerLoadedModule,
|
|
67
|
-
getCompatibleReactVersions: ()=>getCompatibleReactVersions,
|
|
68
|
-
SuspenseRemote: ()=>SuspenseRemote,
|
|
69
53
|
unloadRemote: ()=>unloadRemote,
|
|
70
|
-
|
|
71
|
-
RemoteModuleProvider: ()=>RemoteModuleProvider,
|
|
54
|
+
getCompatibleReactVersions: ()=>getCompatibleReactVersions,
|
|
72
55
|
cancelPreload: ()=>cancelPreload,
|
|
73
56
|
findCompatibleVersion: ()=>findCompatibleVersion,
|
|
74
57
|
getLoadedRemotes: ()=>getLoadedRemotes,
|
|
@@ -78,9 +61,8 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
78
61
|
formatHealthStatus: ()=>formatHealthStatus,
|
|
79
62
|
unloadAll: ()=>unloadAll,
|
|
80
63
|
setVersionCache: ()=>setVersionCache,
|
|
81
|
-
lazyRemote: ()=>lazyRemote,
|
|
82
|
-
checkRemoteHealth: ()=>checkRemoteHealth,
|
|
83
64
|
isPrerelease: ()=>isPrerelease,
|
|
65
|
+
checkRemoteHealth: ()=>checkRemoteHealth,
|
|
84
66
|
checkVersionCompatibility: ()=>checkVersionCompatibility
|
|
85
67
|
});
|
|
86
68
|
const runtime_namespaceObject = require("@module-federation/enhanced/runtime");
|
|
@@ -265,15 +247,46 @@ const DEFAULT_SHARED_CONFIG = {
|
|
|
265
247
|
shareConfig: {
|
|
266
248
|
singleton: true,
|
|
267
249
|
eager: true,
|
|
268
|
-
requiredVersion: false
|
|
269
|
-
|
|
250
|
+
requiredVersion: false,
|
|
251
|
+
strictVersion: false
|
|
252
|
+
},
|
|
253
|
+
strategy: 'loaded-first'
|
|
270
254
|
},
|
|
271
255
|
'react-dom': {
|
|
272
256
|
shareConfig: {
|
|
273
257
|
singleton: true,
|
|
274
258
|
eager: true,
|
|
275
|
-
requiredVersion: false
|
|
276
|
-
|
|
259
|
+
requiredVersion: false,
|
|
260
|
+
strictVersion: false
|
|
261
|
+
},
|
|
262
|
+
strategy: 'loaded-first'
|
|
263
|
+
},
|
|
264
|
+
'react-dom/client': {
|
|
265
|
+
shareConfig: {
|
|
266
|
+
singleton: true,
|
|
267
|
+
eager: true,
|
|
268
|
+
requiredVersion: false,
|
|
269
|
+
strictVersion: false
|
|
270
|
+
},
|
|
271
|
+
strategy: 'loaded-first'
|
|
272
|
+
},
|
|
273
|
+
'react/jsx-runtime': {
|
|
274
|
+
shareConfig: {
|
|
275
|
+
singleton: true,
|
|
276
|
+
eager: true,
|
|
277
|
+
requiredVersion: false,
|
|
278
|
+
strictVersion: false
|
|
279
|
+
},
|
|
280
|
+
strategy: 'loaded-first'
|
|
281
|
+
},
|
|
282
|
+
'react/jsx-dev-runtime': {
|
|
283
|
+
shareConfig: {
|
|
284
|
+
singleton: true,
|
|
285
|
+
eager: true,
|
|
286
|
+
requiredVersion: false,
|
|
287
|
+
strictVersion: false
|
|
288
|
+
},
|
|
289
|
+
strategy: 'loaded-first'
|
|
277
290
|
}
|
|
278
291
|
};
|
|
279
292
|
async function fetchLatestVersion(pkg) {
|
|
@@ -308,41 +321,146 @@ function setVersionCache(pkg, version) {
|
|
|
308
321
|
function buildCdnUrls(pkg, version) {
|
|
309
322
|
return DEFAULT_CDN_TEMPLATES.map((template)=>template.replace('{pkg}', pkg).replace('{version}', version));
|
|
310
323
|
}
|
|
324
|
+
const mfInstanceCache = new Map();
|
|
325
|
+
const mfInstanceLoadingCache = new Map();
|
|
311
326
|
async function tryLoadRemote(scopeName, url, retries, delay, sharedConfig, plugins) {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
+
const cacheKey = `${scopeName}::${url}`;
|
|
328
|
+
const cachedMfs = mfInstanceCache.get(cacheKey);
|
|
329
|
+
if (cachedMfs) return {
|
|
330
|
+
scopeName,
|
|
331
|
+
mf: cachedMfs
|
|
332
|
+
};
|
|
333
|
+
const loadingMfs = mfInstanceLoadingCache.get(cacheKey);
|
|
334
|
+
if (loadingMfs) return loadingMfs;
|
|
335
|
+
const createProcess = (async ()=>{
|
|
336
|
+
let lastError;
|
|
337
|
+
for(let i = 0; i < retries; i++)try {
|
|
338
|
+
const mf = (0, runtime_namespaceObject.createInstance)({
|
|
339
|
+
name: 'host',
|
|
340
|
+
remotes: [
|
|
341
|
+
{
|
|
342
|
+
name: scopeName,
|
|
343
|
+
entry: url
|
|
344
|
+
}
|
|
345
|
+
],
|
|
346
|
+
shared: sharedConfig,
|
|
347
|
+
plugins: [
|
|
348
|
+
...plugins,
|
|
349
|
+
fallbackPlugin()
|
|
350
|
+
]
|
|
351
|
+
});
|
|
352
|
+
const result = {
|
|
353
|
+
scopeName,
|
|
354
|
+
mf
|
|
355
|
+
};
|
|
356
|
+
mfInstanceCache.set(cacheKey, mf);
|
|
357
|
+
return result;
|
|
358
|
+
} catch (e) {
|
|
359
|
+
lastError = e;
|
|
360
|
+
console.warn(`[MF] URL ${url} 加载失败,第 ${i + 1} 次重试...`);
|
|
361
|
+
if (i < retries - 1) await new Promise((res)=>setTimeout(res, delay));
|
|
362
|
+
}
|
|
363
|
+
throw new Error(`[MF] URL ${url} 经过 ${retries} 次重试仍加载失败。`, {
|
|
364
|
+
cause: lastError
|
|
327
365
|
});
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
console.warn(`[MF] URL ${url} 加载失败,第 ${i + 1} 次重试...`);
|
|
335
|
-
if (i < retries - 1) await new Promise((res)=>setTimeout(res, delay));
|
|
366
|
+
})();
|
|
367
|
+
mfInstanceLoadingCache.set(cacheKey, createProcess);
|
|
368
|
+
try {
|
|
369
|
+
return await createProcess;
|
|
370
|
+
} finally{
|
|
371
|
+
mfInstanceLoadingCache.delete(cacheKey);
|
|
336
372
|
}
|
|
337
|
-
throw new Error(`[MF] URL ${url} 经过 ${retries} 次重试仍加载失败。`, {
|
|
338
|
-
cause: lastError
|
|
339
|
-
});
|
|
340
373
|
}
|
|
341
374
|
function getFinalSharedConfig(customShared) {
|
|
342
|
-
|
|
375
|
+
const globalReact = window.React;
|
|
376
|
+
const globalReactDOM = window.ReactDOM;
|
|
377
|
+
const globalShared = {};
|
|
378
|
+
if (globalReact && globalReactDOM) {
|
|
379
|
+
const isValidReact = 'object' == typeof globalReact && 'function' == typeof globalReact.useCallback;
|
|
380
|
+
if (isValidReact) {
|
|
381
|
+
globalShared.react = {
|
|
382
|
+
version: globalReact.version || '18.0.0',
|
|
383
|
+
lib: ()=>globalReact,
|
|
384
|
+
shareConfig: {
|
|
385
|
+
singleton: true,
|
|
386
|
+
eager: true,
|
|
387
|
+
requiredVersion: false,
|
|
388
|
+
strictVersion: false
|
|
389
|
+
},
|
|
390
|
+
strategy: 'loaded-first'
|
|
391
|
+
};
|
|
392
|
+
globalShared['react-dom'] = {
|
|
393
|
+
version: globalReactDOM.version || '18.0.0',
|
|
394
|
+
lib: ()=>globalReactDOM,
|
|
395
|
+
shareConfig: {
|
|
396
|
+
singleton: true,
|
|
397
|
+
eager: true,
|
|
398
|
+
requiredVersion: false,
|
|
399
|
+
strictVersion: false
|
|
400
|
+
},
|
|
401
|
+
strategy: 'loaded-first'
|
|
402
|
+
};
|
|
403
|
+
globalShared['react-dom/client'] = {
|
|
404
|
+
version: globalReactDOM.version || '18.0.0',
|
|
405
|
+
lib: ()=>globalReactDOM,
|
|
406
|
+
shareConfig: {
|
|
407
|
+
singleton: true,
|
|
408
|
+
eager: true,
|
|
409
|
+
requiredVersion: false,
|
|
410
|
+
strictVersion: false
|
|
411
|
+
},
|
|
412
|
+
strategy: 'loaded-first'
|
|
413
|
+
};
|
|
414
|
+
console.log('[getFinalSharedConfig] Using global React instance', {
|
|
415
|
+
version: globalReact.version
|
|
416
|
+
});
|
|
417
|
+
} else console.warn('[getFinalSharedConfig] Global React found but is invalid', {
|
|
418
|
+
type: typeof globalReact,
|
|
419
|
+
useCallback: typeof globalReact?.useCallback
|
|
420
|
+
});
|
|
421
|
+
} else console.log('[getFinalSharedConfig] No global React found, using default shared config');
|
|
422
|
+
const mergedShared = {
|
|
343
423
|
...DEFAULT_SHARED_CONFIG,
|
|
424
|
+
...globalShared,
|
|
344
425
|
...customShared || {}
|
|
345
426
|
};
|
|
427
|
+
const keepSingletonPackages = [
|
|
428
|
+
'react',
|
|
429
|
+
'react-dom',
|
|
430
|
+
'react-dom/client',
|
|
431
|
+
'react/jsx-runtime',
|
|
432
|
+
'react/jsx-dev-runtime'
|
|
433
|
+
];
|
|
434
|
+
for (const pkgName of keepSingletonPackages){
|
|
435
|
+
const base = mergedShared[pkgName] || {};
|
|
436
|
+
mergedShared[pkgName] = {
|
|
437
|
+
...base,
|
|
438
|
+
strategy: 'loaded-first',
|
|
439
|
+
shareConfig: {
|
|
440
|
+
singleton: true,
|
|
441
|
+
eager: true,
|
|
442
|
+
requiredVersion: false,
|
|
443
|
+
strictVersion: false,
|
|
444
|
+
...base.shareConfig || {}
|
|
445
|
+
}
|
|
446
|
+
};
|
|
447
|
+
}
|
|
448
|
+
if ('function' == typeof globalShared.react?.lib) mergedShared.react = {
|
|
449
|
+
...mergedShared.react || {},
|
|
450
|
+
lib: globalShared.react.lib,
|
|
451
|
+
version: globalShared.react.version
|
|
452
|
+
};
|
|
453
|
+
if ('function' == typeof globalShared['react-dom']?.lib) mergedShared['react-dom'] = {
|
|
454
|
+
...mergedShared['react-dom'] || {},
|
|
455
|
+
lib: globalShared['react-dom'].lib,
|
|
456
|
+
version: globalShared['react-dom'].version
|
|
457
|
+
};
|
|
458
|
+
if ('function' == typeof globalShared['react-dom/client']?.lib) mergedShared['react-dom/client'] = {
|
|
459
|
+
...mergedShared['react-dom/client'] || {},
|
|
460
|
+
lib: globalShared['react-dom/client'].lib,
|
|
461
|
+
version: globalShared['react-dom/client'].version
|
|
462
|
+
};
|
|
463
|
+
return mergedShared;
|
|
346
464
|
}
|
|
347
465
|
async function resolveFinalVersion(pkg, version, cacheTTL, revalidate) {
|
|
348
466
|
let finalVersion = version;
|
|
@@ -376,6 +494,7 @@ async function loadRemoteMultiVersion(options, plugins) {
|
|
|
376
494
|
const scopeName = `${name}`;
|
|
377
495
|
const urls = buildFinalUrls(pkg, finalVersion, localFallback);
|
|
378
496
|
const finalSharedConfig = getFinalSharedConfig(customShared);
|
|
497
|
+
console.log(finalSharedConfig, 'finalSharedConfig');
|
|
379
498
|
for (const url of urls)try {
|
|
380
499
|
return await tryLoadRemote(scopeName, url, retries, delay, finalSharedConfig, plugins);
|
|
381
500
|
} catch (e) {
|
|
@@ -769,303 +888,6 @@ const eventBus = EventBusClass.create();
|
|
|
769
888
|
function createEventBus() {
|
|
770
889
|
return EventBusClass.create();
|
|
771
890
|
}
|
|
772
|
-
const external_react_namespaceObject = require("react");
|
|
773
|
-
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
|
|
774
|
-
class ErrorBoundary extends external_react_default().Component {
|
|
775
|
-
constructor(props){
|
|
776
|
-
super(props);
|
|
777
|
-
this.state = {
|
|
778
|
-
hasError: false,
|
|
779
|
-
error: null,
|
|
780
|
-
errorInfo: null
|
|
781
|
-
};
|
|
782
|
-
}
|
|
783
|
-
static getDerivedStateFromError(error) {
|
|
784
|
-
return {
|
|
785
|
-
hasError: true,
|
|
786
|
-
error,
|
|
787
|
-
errorInfo: null
|
|
788
|
-
};
|
|
789
|
-
}
|
|
790
|
-
componentDidCatch(error, errorInfo) {
|
|
791
|
-
this.setState({
|
|
792
|
-
errorInfo
|
|
793
|
-
});
|
|
794
|
-
this.props.onError?.(error, errorInfo);
|
|
795
|
-
console.error('[RemoteReloadUtils] ErrorBoundary caught error:', error, errorInfo);
|
|
796
|
-
}
|
|
797
|
-
handleReset = ()=>{
|
|
798
|
-
this.setState({
|
|
799
|
-
hasError: false,
|
|
800
|
-
error: null,
|
|
801
|
-
errorInfo: null
|
|
802
|
-
});
|
|
803
|
-
this.props.onReset?.();
|
|
804
|
-
};
|
|
805
|
-
render() {
|
|
806
|
-
if (this.state.hasError && this.state.error) {
|
|
807
|
-
if ('function' == typeof this.props.fallback) return this.props.fallback(this.state.error, this.handleReset);
|
|
808
|
-
if (void 0 !== this.props.fallback) return this.props.fallback;
|
|
809
|
-
return /*#__PURE__*/ external_react_default().createElement("div", {
|
|
810
|
-
role: "alert",
|
|
811
|
-
style: {
|
|
812
|
-
padding: '16px',
|
|
813
|
-
border: '1px solid #ffcccc',
|
|
814
|
-
backgroundColor: '#fff5f5',
|
|
815
|
-
borderRadius: '4px'
|
|
816
|
-
}
|
|
817
|
-
}, /*#__PURE__*/ external_react_default().createElement("h3", null, "Something went wrong"), /*#__PURE__*/ external_react_default().createElement("p", null, this.state.error.message), /*#__PURE__*/ external_react_default().createElement("button", {
|
|
818
|
-
onClick: this.handleReset,
|
|
819
|
-
style: {
|
|
820
|
-
marginTop: '8px',
|
|
821
|
-
padding: '8px 16px',
|
|
822
|
-
cursor: 'pointer'
|
|
823
|
-
}
|
|
824
|
-
}, "Try again"));
|
|
825
|
-
}
|
|
826
|
-
return this.props.children;
|
|
827
|
-
}
|
|
828
|
-
}
|
|
829
|
-
function useRemoteModule({ pkg, version, moduleName, scopeName, onError, onLoad, retryKey = 0 }) {
|
|
830
|
-
const [moduleState, setModuleState] = (0, external_react_namespaceObject.useState)({
|
|
831
|
-
loading: true,
|
|
832
|
-
error: null,
|
|
833
|
-
component: null
|
|
834
|
-
});
|
|
835
|
-
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
836
|
-
let mounted = true;
|
|
837
|
-
async function loadModule() {
|
|
838
|
-
try {
|
|
839
|
-
setModuleState((prev)=>({
|
|
840
|
-
...prev,
|
|
841
|
-
loading: true,
|
|
842
|
-
error: null
|
|
843
|
-
}));
|
|
844
|
-
const { mf } = await loadRemoteMultiVersion({
|
|
845
|
-
name: scopeName,
|
|
846
|
-
pkg,
|
|
847
|
-
version
|
|
848
|
-
}, []);
|
|
849
|
-
if (!mf || !mounted) return;
|
|
850
|
-
const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
|
|
851
|
-
if (!mounted) return;
|
|
852
|
-
if (mod && 'object' == typeof mod && 'default' in mod) {
|
|
853
|
-
const Component = mod.default;
|
|
854
|
-
setModuleState({
|
|
855
|
-
loading: false,
|
|
856
|
-
error: null,
|
|
857
|
-
component: Component
|
|
858
|
-
});
|
|
859
|
-
onLoad?.(Component);
|
|
860
|
-
} else throw new Error(`Module "${scopeName}/${moduleName}" does not export a default component`);
|
|
861
|
-
} catch (err) {
|
|
862
|
-
if (mounted) {
|
|
863
|
-
const error = err instanceof Error ? err : new Error(String(err));
|
|
864
|
-
setModuleState({
|
|
865
|
-
loading: false,
|
|
866
|
-
error,
|
|
867
|
-
component: null
|
|
868
|
-
});
|
|
869
|
-
onError?.(error);
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
|
-
}
|
|
873
|
-
loadModule();
|
|
874
|
-
return ()=>{
|
|
875
|
-
mounted = false;
|
|
876
|
-
};
|
|
877
|
-
}, [
|
|
878
|
-
pkg,
|
|
879
|
-
version,
|
|
880
|
-
moduleName,
|
|
881
|
-
scopeName,
|
|
882
|
-
onError,
|
|
883
|
-
onLoad,
|
|
884
|
-
retryKey
|
|
885
|
-
]);
|
|
886
|
-
return moduleState;
|
|
887
|
-
}
|
|
888
|
-
function RemoteModuleRenderer({ pkg, version, moduleName, scopeName, loadingFallback, errorFallback, componentProps, className, style, onError, onLoad }) {
|
|
889
|
-
const moduleState = useRemoteModule({
|
|
890
|
-
pkg,
|
|
891
|
-
version,
|
|
892
|
-
moduleName,
|
|
893
|
-
scopeName,
|
|
894
|
-
onError,
|
|
895
|
-
onLoad
|
|
896
|
-
});
|
|
897
|
-
const [retryKey, setRetryKey] = (0, external_react_namespaceObject.useState)(0);
|
|
898
|
-
const handleRetry = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
899
|
-
setRetryKey((prev)=>prev + 1);
|
|
900
|
-
}, []);
|
|
901
|
-
(0, external_react_namespaceObject.useEffect)(()=>{}, [
|
|
902
|
-
retryKey
|
|
903
|
-
]);
|
|
904
|
-
if (moduleState.loading) return /*#__PURE__*/ external_react_default().createElement("div", {
|
|
905
|
-
className: className,
|
|
906
|
-
style: style,
|
|
907
|
-
role: "status",
|
|
908
|
-
"aria-live": "polite"
|
|
909
|
-
}, loadingFallback || /*#__PURE__*/ external_react_default().createElement("div", {
|
|
910
|
-
className: "module-card module-card--loading"
|
|
911
|
-
}, /*#__PURE__*/ external_react_default().createElement("div", {
|
|
912
|
-
className: "loading-spinner",
|
|
913
|
-
"aria-hidden": "true"
|
|
914
|
-
}), /*#__PURE__*/ external_react_default().createElement("span", null, "Loading ", moduleName, "...")));
|
|
915
|
-
if (moduleState.error) {
|
|
916
|
-
if ('function' == typeof errorFallback) return /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, errorFallback(moduleState.error, handleRetry));
|
|
917
|
-
if (void 0 !== errorFallback) return /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, errorFallback);
|
|
918
|
-
return /*#__PURE__*/ external_react_default().createElement("div", {
|
|
919
|
-
className: className,
|
|
920
|
-
style: style,
|
|
921
|
-
role: "alert"
|
|
922
|
-
}, /*#__PURE__*/ external_react_default().createElement("div", {
|
|
923
|
-
className: "module-card module-card--error"
|
|
924
|
-
}, /*#__PURE__*/ external_react_default().createElement("span", {
|
|
925
|
-
className: "error-icon",
|
|
926
|
-
"aria-hidden": "true"
|
|
927
|
-
}, "!"), /*#__PURE__*/ external_react_default().createElement("span", null, "Failed to load ", moduleName), /*#__PURE__*/ external_react_default().createElement("p", {
|
|
928
|
-
className: "error-message"
|
|
929
|
-
}, moduleState.error.message), /*#__PURE__*/ external_react_default().createElement("button", {
|
|
930
|
-
onClick: handleRetry,
|
|
931
|
-
className: "retry-button",
|
|
932
|
-
type: "button"
|
|
933
|
-
}, "Retry")));
|
|
934
|
-
}
|
|
935
|
-
if (!moduleState.component) return null;
|
|
936
|
-
const Component = moduleState.component;
|
|
937
|
-
return /*#__PURE__*/ external_react_default().createElement("div", {
|
|
938
|
-
className: className,
|
|
939
|
-
style: style
|
|
940
|
-
}, /*#__PURE__*/ external_react_default().createElement(Component, componentProps));
|
|
941
|
-
}
|
|
942
|
-
function RemoteModuleProvider(props) {
|
|
943
|
-
const { disableErrorBoundary, errorFallback, loadingFallback, errorBoundaryOptions } = props;
|
|
944
|
-
if (disableErrorBoundary) return /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
945
|
-
fallback: loadingFallback || /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
946
|
-
}, /*#__PURE__*/ external_react_default().createElement(RemoteModuleRenderer, props));
|
|
947
|
-
return /*#__PURE__*/ external_react_default().createElement(ErrorBoundary, {
|
|
948
|
-
fallback: errorFallback,
|
|
949
|
-
onError: errorBoundaryOptions?.onError,
|
|
950
|
-
onReset: errorBoundaryOptions?.onReset
|
|
951
|
-
}, /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
952
|
-
fallback: loadingFallback || /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
953
|
-
}, /*#__PURE__*/ external_react_default().createElement(RemoteModuleRenderer, props)));
|
|
954
|
-
}
|
|
955
|
-
function lazyRemote(options) {
|
|
956
|
-
const { pkg, version = 'latest', moduleName, scopeName, maxRetries = 3, retryDelay = 1000 } = options;
|
|
957
|
-
let retryCount = 0;
|
|
958
|
-
const loadComponent = async ()=>{
|
|
959
|
-
try {
|
|
960
|
-
const { mf } = await loadRemoteMultiVersion({
|
|
961
|
-
name: scopeName,
|
|
962
|
-
pkg,
|
|
963
|
-
version
|
|
964
|
-
}, []);
|
|
965
|
-
if (!mf) throw new Error(`[RemoteReloadUtils] Failed to get Module Federation instance for ${scopeName}`);
|
|
966
|
-
const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
|
|
967
|
-
if (!mod || 'object' != typeof mod || !('default' in mod)) throw new Error(`[RemoteReloadUtils] Module "${scopeName}/${moduleName}" does not export a default component`);
|
|
968
|
-
return {
|
|
969
|
-
default: mod.default
|
|
970
|
-
};
|
|
971
|
-
} catch (error) {
|
|
972
|
-
if (retryCount < maxRetries) {
|
|
973
|
-
retryCount++;
|
|
974
|
-
await new Promise((resolve)=>setTimeout(resolve, retryDelay * retryCount));
|
|
975
|
-
return loadComponent();
|
|
976
|
-
}
|
|
977
|
-
throw error;
|
|
978
|
-
}
|
|
979
|
-
};
|
|
980
|
-
return /*#__PURE__*/ (0, external_react_namespaceObject.lazy)(loadComponent);
|
|
981
|
-
}
|
|
982
|
-
function SuspenseRemote({ fallback, children }) {
|
|
983
|
-
return /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
984
|
-
fallback: fallback || /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
985
|
-
}, children);
|
|
986
|
-
}
|
|
987
|
-
function SuspenseRemoteLoader({ pkg, version = 'latest', moduleName, scopeName, fallback, errorFallback, componentProps }) {
|
|
988
|
-
const RemoteComponent = lazyRemote({
|
|
989
|
-
pkg,
|
|
990
|
-
version,
|
|
991
|
-
moduleName,
|
|
992
|
-
scopeName
|
|
993
|
-
});
|
|
994
|
-
if (errorFallback) return /*#__PURE__*/ external_react_default().createElement(ErrorBoundary, {
|
|
995
|
-
fallback: errorFallback
|
|
996
|
-
}, /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
997
|
-
fallback: fallback || /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
998
|
-
}, /*#__PURE__*/ external_react_default().createElement(RemoteComponent, componentProps)));
|
|
999
|
-
return /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
1000
|
-
fallback: fallback || /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
1001
|
-
}, /*#__PURE__*/ external_react_default().createElement(RemoteComponent, componentProps));
|
|
1002
|
-
}
|
|
1003
|
-
function withRemote(WrappedComponent, options) {
|
|
1004
|
-
const RemoteComponent = lazyRemote(options);
|
|
1005
|
-
return function(props) {
|
|
1006
|
-
return /*#__PURE__*/ external_react_default().createElement(external_react_namespaceObject.Suspense, {
|
|
1007
|
-
fallback: /*#__PURE__*/ external_react_default().createElement("div", null, "Loading...")
|
|
1008
|
-
}, /*#__PURE__*/ external_react_default().createElement(RemoteComponent, props));
|
|
1009
|
-
};
|
|
1010
|
-
}
|
|
1011
|
-
function useRemoteModuleHook(options) {
|
|
1012
|
-
const { pkg, version = 'latest', moduleName, scopeName } = options;
|
|
1013
|
-
const [state, setState] = (0, external_react_namespaceObject.useState)({
|
|
1014
|
-
component: null,
|
|
1015
|
-
loading: true,
|
|
1016
|
-
error: null
|
|
1017
|
-
});
|
|
1018
|
-
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
1019
|
-
let mounted = true;
|
|
1020
|
-
async function load() {
|
|
1021
|
-
try {
|
|
1022
|
-
setState((prev)=>({
|
|
1023
|
-
...prev,
|
|
1024
|
-
loading: true,
|
|
1025
|
-
error: null
|
|
1026
|
-
}));
|
|
1027
|
-
const { mf } = await loadRemoteMultiVersion({
|
|
1028
|
-
name: scopeName,
|
|
1029
|
-
pkg,
|
|
1030
|
-
version
|
|
1031
|
-
}, []);
|
|
1032
|
-
if (!mf) throw new Error(`[RemoteReloadUtils] Failed to get Module Federation instance for ${scopeName}`);
|
|
1033
|
-
const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
|
|
1034
|
-
if (mounted) if (mod && 'object' == typeof mod && 'default' in mod) setState({
|
|
1035
|
-
component: mod.default,
|
|
1036
|
-
loading: false,
|
|
1037
|
-
error: null
|
|
1038
|
-
});
|
|
1039
|
-
else throw new Error(`[RemoteReloadUtils] Module "${scopeName}/${moduleName}" does not export a default component`);
|
|
1040
|
-
} catch (err) {
|
|
1041
|
-
if (mounted) setState({
|
|
1042
|
-
component: null,
|
|
1043
|
-
loading: false,
|
|
1044
|
-
error: err instanceof Error ? err : new Error(String(err))
|
|
1045
|
-
});
|
|
1046
|
-
}
|
|
1047
|
-
}
|
|
1048
|
-
load();
|
|
1049
|
-
return ()=>{
|
|
1050
|
-
mounted = false;
|
|
1051
|
-
};
|
|
1052
|
-
}, [
|
|
1053
|
-
pkg,
|
|
1054
|
-
version,
|
|
1055
|
-
moduleName,
|
|
1056
|
-
scopeName
|
|
1057
|
-
]);
|
|
1058
|
-
return {
|
|
1059
|
-
component: state.component,
|
|
1060
|
-
loading: state.loading,
|
|
1061
|
-
error: state.error
|
|
1062
|
-
};
|
|
1063
|
-
}
|
|
1064
|
-
exports.ErrorBoundary = __webpack_exports__.ErrorBoundary;
|
|
1065
|
-
exports.RemoteModuleProvider = __webpack_exports__.RemoteModuleProvider;
|
|
1066
|
-
exports.RemoteModuleRenderer = __webpack_exports__.RemoteModuleRenderer;
|
|
1067
|
-
exports.SuspenseRemote = __webpack_exports__.SuspenseRemote;
|
|
1068
|
-
exports.SuspenseRemoteLoader = __webpack_exports__.SuspenseRemoteLoader;
|
|
1069
891
|
exports.buildCdnUrls = __webpack_exports__.buildCdnUrls;
|
|
1070
892
|
exports.buildFinalUrls = __webpack_exports__.buildFinalUrls;
|
|
1071
893
|
exports.cancelPreload = __webpack_exports__.cancelPreload;
|
|
@@ -1092,7 +914,6 @@ exports.getStableVersions = __webpack_exports__.getStableVersions;
|
|
|
1092
914
|
exports.getVersionCache = __webpack_exports__.getVersionCache;
|
|
1093
915
|
exports.isPrerelease = __webpack_exports__.isPrerelease;
|
|
1094
916
|
exports.isRemoteLoaded = __webpack_exports__.isRemoteLoaded;
|
|
1095
|
-
exports.lazyRemote = __webpack_exports__.lazyRemote;
|
|
1096
917
|
exports.loadReactVersion = __webpack_exports__.loadReactVersion;
|
|
1097
918
|
exports.loadRemoteMultiVersion = __webpack_exports__.loadRemoteMultiVersion;
|
|
1098
919
|
exports.parseVersion = __webpack_exports__.parseVersion;
|
|
@@ -1107,15 +928,7 @@ exports.sortVersions = __webpack_exports__.sortVersions;
|
|
|
1107
928
|
exports.tryLoadRemote = __webpack_exports__.tryLoadRemote;
|
|
1108
929
|
exports.unloadAll = __webpack_exports__.unloadAll;
|
|
1109
930
|
exports.unloadRemote = __webpack_exports__.unloadRemote;
|
|
1110
|
-
exports.useRemoteModule = __webpack_exports__.useRemoteModule;
|
|
1111
|
-
exports.useRemoteModuleHook = __webpack_exports__.useRemoteModuleHook;
|
|
1112
|
-
exports.withRemote = __webpack_exports__.withRemote;
|
|
1113
931
|
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
1114
|
-
"ErrorBoundary",
|
|
1115
|
-
"RemoteModuleProvider",
|
|
1116
|
-
"RemoteModuleRenderer",
|
|
1117
|
-
"SuspenseRemote",
|
|
1118
|
-
"SuspenseRemoteLoader",
|
|
1119
932
|
"buildCdnUrls",
|
|
1120
933
|
"buildFinalUrls",
|
|
1121
934
|
"cancelPreload",
|
|
@@ -1142,7 +955,6 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
|
1142
955
|
"getVersionCache",
|
|
1143
956
|
"isPrerelease",
|
|
1144
957
|
"isRemoteLoaded",
|
|
1145
|
-
"lazyRemote",
|
|
1146
958
|
"loadReactVersion",
|
|
1147
959
|
"loadRemoteMultiVersion",
|
|
1148
960
|
"parseVersion",
|
|
@@ -1156,10 +968,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
|
1156
968
|
"sortVersions",
|
|
1157
969
|
"tryLoadRemote",
|
|
1158
970
|
"unloadAll",
|
|
1159
|
-
"unloadRemote"
|
|
1160
|
-
"useRemoteModule",
|
|
1161
|
-
"useRemoteModuleHook",
|
|
1162
|
-
"withRemote"
|
|
971
|
+
"unloadRemote"
|
|
1163
972
|
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
1164
973
|
Object.defineProperty(exports, '__esModule', {
|
|
1165
974
|
value: true
|