@module-federation/utilities 3.1.83 → 3.1.84
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/dist/cjs/Logger.js +60 -0
- package/dist/cjs/components/ErrorBoundary.js +96 -0
- package/dist/cjs/components/FederationBoundary.js +101 -0
- package/dist/cjs/index.js +170 -0
- package/dist/cjs/plugins/DelegateModulesPlugin.js +130 -0
- package/dist/cjs/types/index.js +33 -0
- package/dist/cjs/utils/common.js +173 -0
- package/dist/cjs/utils/getRuntimeRemotes.js +102 -0
- package/dist/cjs/utils/getRuntimeRemotes.test.js +98 -0
- package/dist/cjs/utils/importDelegateModule.test.js +101 -0
- package/dist/cjs/utils/importDelegatedModule.js +124 -0
- package/dist/cjs/utils/importRemote.js +174 -0
- package/dist/cjs/utils/isEmpty.js +56 -0
- package/dist/cjs/utils/pure.js +212 -0
- package/dist/cjs/utils/react.js +71 -0
- package/dist/esm/Logger.mjs +14 -0
- package/dist/esm/components/ErrorBoundary.mjs +33 -0
- package/dist/esm/components/FederationBoundary.mjs +38 -0
- package/dist/esm/index.mjs +34 -0
- package/dist/esm/plugins/DelegateModulesPlugin.mjs +84 -0
- package/dist/esm/types/index.mjs +6 -0
- package/dist/esm/utils/common.mjs +126 -0
- package/dist/esm/utils/getRuntimeRemotes.mjs +52 -0
- package/dist/esm/utils/getRuntimeRemotes.test.mjs +87 -0
- package/dist/esm/utils/importDelegateModule.test.mjs +90 -0
- package/dist/esm/utils/importDelegatedModule.mjs +74 -0
- package/dist/esm/utils/importRemote.mjs +137 -0
- package/dist/esm/utils/isEmpty.mjs +10 -0
- package/dist/esm/utils/pure.mjs +164 -0
- package/dist/esm/utils/react.mjs +8 -0
- package/package.json +2 -2
- package/dist/index.cjs.js +0 -555
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +0 -543
- /package/dist/{src → types}/Logger.d.ts +0 -0
- /package/dist/{src → types}/components/ErrorBoundary.d.ts +0 -0
- /package/dist/{src → types}/components/FederationBoundary.d.ts +0 -0
- /package/dist/{src → types}/index.d.ts +0 -0
- /package/dist/{src → types}/plugins/DelegateModulesPlugin.d.ts +0 -0
- /package/dist/{src → types}/types/index.d.ts +0 -0
- /package/dist/{src → types}/utils/common.d.ts +0 -0
- /package/dist/{src → types}/utils/getRuntimeRemotes.d.ts +0 -0
- /package/dist/{src → types}/utils/importDelegatedModule.d.ts +0 -0
- /package/dist/{src → types}/utils/importRemote.d.ts +0 -0
- /package/dist/{src → types}/utils/isEmpty.d.ts +0 -0
- /package/dist/{src → types}/utils/pure.d.ts +0 -0
- /package/dist/{src → types}/utils/react.d.ts +0 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
|
|
2
|
+
;// CONCATENATED MODULE: ./src/plugins/DelegateModulesPlugin.ts
|
|
3
|
+
class DelegateModulesPlugin {
|
|
4
|
+
getChunkByName(chunks, name) {
|
|
5
|
+
for (const chunk of chunks){
|
|
6
|
+
if (chunk.name === name) {
|
|
7
|
+
return chunk;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
return undefined;
|
|
11
|
+
}
|
|
12
|
+
addDelegatesToChunks(compilation, chunks) {
|
|
13
|
+
for (const chunk of chunks){
|
|
14
|
+
this._delegateModules.forEach((module)=>{
|
|
15
|
+
this.addModuleAndDependenciesToChunk(module, chunk, compilation);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
addModuleAndDependenciesToChunk(module, chunk, compilation) {
|
|
20
|
+
if (!compilation.chunkGraph.isModuleInChunk(module, chunk)) {
|
|
21
|
+
if (this.options.debug) {
|
|
22
|
+
console.log('adding ', module.identifier(), ' to chunk', chunk.name);
|
|
23
|
+
}
|
|
24
|
+
compilation.chunkGraph.connectChunkAndModule(chunk, module);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
removeDelegatesNonRuntimeChunks(compilation, chunks) {
|
|
28
|
+
for (const chunk of chunks){
|
|
29
|
+
if (!chunk.hasRuntime()) {
|
|
30
|
+
this.options.debug && console.log('non-runtime chunk:', chunk.debugId, chunk.id, chunk.name);
|
|
31
|
+
for (const [id, module] of this._delegateModules){
|
|
32
|
+
compilation.chunkGraph.disconnectChunkAndModule(chunk, module);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
apply(compiler) {
|
|
38
|
+
compiler.hooks.thisCompilation.tap('DelegateModulesPlugin', (compilation)=>{
|
|
39
|
+
compilation.hooks.finishModules.tapAsync('DelegateModulesPlugin', (modules, callback)=>{
|
|
40
|
+
const { remotes } = this.options;
|
|
41
|
+
const knownDelegates = new Set(remotes ? Object.values(remotes).map((remote)=>remote.replace('internal ', '')) : []);
|
|
42
|
+
for (const module of modules){
|
|
43
|
+
const normalModule = module;
|
|
44
|
+
if (normalModule) {
|
|
45
|
+
var _normalModule_userRequest;
|
|
46
|
+
const mid = normalModule.identifier();
|
|
47
|
+
if (normalModule === null || normalModule === void 0 ? void 0 : (_normalModule_userRequest = normalModule.userRequest) === null || _normalModule_userRequest === void 0 ? void 0 : _normalModule_userRequest.startsWith('webpack/container/reference')) {
|
|
48
|
+
this._delegateModules.set(mid, normalModule);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
if (normalModule.resource && knownDelegates.has(normalModule.resource)) {
|
|
52
|
+
this._delegateModules.set(normalModule.resource, normalModule);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
callback();
|
|
56
|
+
});
|
|
57
|
+
compilation.hooks.optimizeChunks.tap('DelegateModulesPlugin', (chunks)=>{
|
|
58
|
+
const { runtime, container } = this.options;
|
|
59
|
+
const runtimeChunk = this.getChunkByName(chunks, runtime);
|
|
60
|
+
if (!runtimeChunk || !runtimeChunk.hasRuntime()) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
// Get the container chunk if specified
|
|
64
|
+
const remoteContainer = container ? this.getChunkByName(chunks, container) : null;
|
|
65
|
+
this.options.debug && console.log(remoteContainer === null || remoteContainer === void 0 ? void 0 : remoteContainer.name, runtimeChunk.name, this._delegateModules.size);
|
|
66
|
+
this.addDelegatesToChunks(compilation, [
|
|
67
|
+
remoteContainer,
|
|
68
|
+
runtimeChunk
|
|
69
|
+
].filter(Boolean));
|
|
70
|
+
this.removeDelegatesNonRuntimeChunks(compilation, chunks);
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
constructor(options){
|
|
75
|
+
this.options = {
|
|
76
|
+
debug: false,
|
|
77
|
+
...options
|
|
78
|
+
};
|
|
79
|
+
this._delegateModules = new Map();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/* ESM default export */ const plugins_DelegateModulesPlugin = (DelegateModulesPlugin);
|
|
83
|
+
|
|
84
|
+
export { plugins_DelegateModulesPlugin as default };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { loadScript } from "./pure.mjs";
|
|
2
|
+
// The require scope
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
|
|
5
|
+
/************************************************************************/
|
|
6
|
+
// webpack/runtime/has_own_property
|
|
7
|
+
(() => {
|
|
8
|
+
__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
9
|
+
})();
|
|
10
|
+
/************************************************************************/
|
|
11
|
+
|
|
12
|
+
;// CONCATENATED MODULE: external "./pure.mjs"
|
|
13
|
+
|
|
14
|
+
;// CONCATENATED MODULE: ./src/utils/common.ts
|
|
15
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
16
|
+
const createContainerSharingScope = (asyncContainer)=>{
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
return asyncContainer.then(function(container) {
|
|
19
|
+
if (!__webpack_require__.S['default']) {
|
|
20
|
+
// not always a promise, so we wrap it in a resolve
|
|
21
|
+
return Promise.resolve(__webpack_require__.I('default')).then(function() {
|
|
22
|
+
return container;
|
|
23
|
+
});
|
|
24
|
+
} else {
|
|
25
|
+
return container;
|
|
26
|
+
}
|
|
27
|
+
}).then(function(container) {
|
|
28
|
+
try {
|
|
29
|
+
// WARNING: here might be a potential BUG.
|
|
30
|
+
// `container.init` does not return a Promise, and here we do not call `then` on it.
|
|
31
|
+
// But according to [docs](https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers)
|
|
32
|
+
// it must be async.
|
|
33
|
+
// The problem may be in Proxy in NextFederationPlugin.js.
|
|
34
|
+
// or maybe a bug in the webpack itself - instead of returning rejected promise it just throws an error.
|
|
35
|
+
// But now everything works properly and we keep this code as is.
|
|
36
|
+
container.init(__webpack_require__.S['default']);
|
|
37
|
+
} catch (e) {
|
|
38
|
+
// maybe container already initialized so nothing to throw
|
|
39
|
+
}
|
|
40
|
+
return container;
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Return initialized remote container by remote's key or its runtime remote item data.
|
|
45
|
+
*
|
|
46
|
+
* `runtimeRemoteItem` might be
|
|
47
|
+
* { global, url } - values obtained from webpack remotes option `global@url`
|
|
48
|
+
* or
|
|
49
|
+
* { asyncContainer } - async container is a promise that resolves to the remote container
|
|
50
|
+
*/ const injectScript = async (keyOrRuntimeRemoteItem)=>{
|
|
51
|
+
const asyncContainer = loadScript(keyOrRuntimeRemoteItem);
|
|
52
|
+
return createContainerSharingScope(asyncContainer);
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Creates runtime variables from the provided remotes.
|
|
56
|
+
* If the value of a remote starts with 'promise ' or 'external ', it is transformed into a function that returns the promise call.
|
|
57
|
+
* Otherwise, the value is stringified.
|
|
58
|
+
* @param {Remotes} remotes - The remotes to create runtime variables from.
|
|
59
|
+
* @returns {Record<string, string>} - The created runtime variables.
|
|
60
|
+
*/ const createRuntimeVariables = (remotes)=>{
|
|
61
|
+
if (!remotes) {
|
|
62
|
+
return {};
|
|
63
|
+
}
|
|
64
|
+
return Object.entries(remotes).reduce((acc, [key, value])=>{
|
|
65
|
+
if (value.startsWith('promise ') || value.startsWith('external ')) {
|
|
66
|
+
const promiseCall = value.split(' ')[1];
|
|
67
|
+
acc[key] = `function() {
|
|
68
|
+
return ${promiseCall}
|
|
69
|
+
}`;
|
|
70
|
+
} else {
|
|
71
|
+
acc[key] = JSON.stringify(value);
|
|
72
|
+
}
|
|
73
|
+
return acc;
|
|
74
|
+
}, {});
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Returns initialized webpack RemoteContainer.
|
|
78
|
+
* If its' script does not loaded - then load & init it firstly.
|
|
79
|
+
*/ const getContainer = async (remoteContainer)=>{
|
|
80
|
+
if (!remoteContainer) {
|
|
81
|
+
throw Error(`Remote container options is empty`);
|
|
82
|
+
}
|
|
83
|
+
const containerScope = typeof window !== 'undefined' ? window : globalThis.__remote_scope__;
|
|
84
|
+
let containerKey;
|
|
85
|
+
if (typeof remoteContainer === 'string') {
|
|
86
|
+
containerKey = remoteContainer;
|
|
87
|
+
} else {
|
|
88
|
+
containerKey = remoteContainer.uniqueKey;
|
|
89
|
+
if (!containerScope[containerKey]) {
|
|
90
|
+
const container = await injectScript({
|
|
91
|
+
global: remoteContainer.global,
|
|
92
|
+
url: remoteContainer.url
|
|
93
|
+
});
|
|
94
|
+
if (!container) {
|
|
95
|
+
throw Error(`Remote container ${remoteContainer.url} is empty`);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return containerScope[containerKey];
|
|
100
|
+
};
|
|
101
|
+
/**
|
|
102
|
+
* Return remote module from container.
|
|
103
|
+
* If you provide `exportName` it automatically return exact property value from module.
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* remote.getModule('./pages/index', 'default')
|
|
107
|
+
*/ const getModule = async ({ remoteContainer, modulePath, exportName })=>{
|
|
108
|
+
const container = await getContainer(remoteContainer);
|
|
109
|
+
try {
|
|
110
|
+
const modFactory = await (container === null || container === void 0 ? void 0 : container.get(modulePath));
|
|
111
|
+
if (!modFactory) {
|
|
112
|
+
return undefined;
|
|
113
|
+
}
|
|
114
|
+
const mod = modFactory();
|
|
115
|
+
if (exportName) {
|
|
116
|
+
return mod && typeof mod === 'object' ? mod[exportName] : undefined;
|
|
117
|
+
} else {
|
|
118
|
+
return mod;
|
|
119
|
+
}
|
|
120
|
+
} catch (error) {
|
|
121
|
+
console.error(error);
|
|
122
|
+
return undefined;
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export { createRuntimeVariables, getContainer, getModule, injectScript };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { extractUrlAndGlobal, remoteVars } from "./pure.mjs";
|
|
2
|
+
|
|
3
|
+
;// CONCATENATED MODULE: external "./pure.mjs"
|
|
4
|
+
|
|
5
|
+
;// CONCATENATED MODULE: ./src/utils/getRuntimeRemotes.ts
|
|
6
|
+
|
|
7
|
+
const getRuntimeRemotes = ()=>{
|
|
8
|
+
try {
|
|
9
|
+
return Object.entries(remoteVars).reduce(function(acc, item) {
|
|
10
|
+
const [key, value] = item;
|
|
11
|
+
// if its an object with a thenable (eagerly executing function)
|
|
12
|
+
if (typeof value === 'object' && typeof value.then === 'function') {
|
|
13
|
+
acc[key] = {
|
|
14
|
+
asyncContainer: value
|
|
15
|
+
};
|
|
16
|
+
} else if (typeof value === 'function') {
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
acc[key] = {
|
|
19
|
+
asyncContainer: value
|
|
20
|
+
};
|
|
21
|
+
} else if (typeof value === 'string' && value.startsWith('internal ')) {
|
|
22
|
+
const [request, query] = value.replace('internal ', '').split('?');
|
|
23
|
+
if (query) {
|
|
24
|
+
const remoteSyntax = new URLSearchParams(query).get('remote');
|
|
25
|
+
if (remoteSyntax) {
|
|
26
|
+
const [url, global] = extractUrlAndGlobal(remoteSyntax);
|
|
27
|
+
acc[key] = {
|
|
28
|
+
global,
|
|
29
|
+
url
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
} else if (typeof value === 'string') {
|
|
34
|
+
const [url, global] = extractUrlAndGlobal(value);
|
|
35
|
+
acc[key] = {
|
|
36
|
+
global,
|
|
37
|
+
url
|
|
38
|
+
};
|
|
39
|
+
} else {
|
|
40
|
+
//@ts-ignore
|
|
41
|
+
console.warn('remotes process', process.env.REMOTES);
|
|
42
|
+
throw new Error(`[mf] Invalid value received for runtime_remote "${key}"`);
|
|
43
|
+
}
|
|
44
|
+
return acc;
|
|
45
|
+
}, {});
|
|
46
|
+
} catch (err) {
|
|
47
|
+
console.warn('Unable to retrieve runtime remotes: ', err);
|
|
48
|
+
}
|
|
49
|
+
return {};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export { getRuntimeRemotes };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { getRuntimeRemotes } from "./getRuntimeRemotes.mjs";
|
|
2
|
+
import { remoteVars } from "./pure.mjs";
|
|
3
|
+
|
|
4
|
+
;// CONCATENATED MODULE: external "./getRuntimeRemotes.mjs"
|
|
5
|
+
|
|
6
|
+
;// CONCATENATED MODULE: external "./pure.mjs"
|
|
7
|
+
|
|
8
|
+
;// CONCATENATED MODULE: ./src/utils/getRuntimeRemotes.test.ts
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
xdescribe('getRuntimeRemotes', ()=>{
|
|
12
|
+
afterEach(()=>{
|
|
13
|
+
Object.keys(remoteVars).forEach((key)=>{
|
|
14
|
+
delete remoteVars[key];
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
test('returns an empty object if REMOTES is not set', ()=>{
|
|
18
|
+
const remotes = getRuntimeRemotes();
|
|
19
|
+
expect(remotes).toEqual({});
|
|
20
|
+
});
|
|
21
|
+
test('parses asyncContainer from thenable object', ()=>{
|
|
22
|
+
const thenable = Promise.resolve({
|
|
23
|
+
get: ()=>true,
|
|
24
|
+
init: ()=>true
|
|
25
|
+
});
|
|
26
|
+
// @ts-ignore
|
|
27
|
+
remoteVars.thenable = thenable;
|
|
28
|
+
const remotes = getRuntimeRemotes();
|
|
29
|
+
expect(remotes).toEqual({
|
|
30
|
+
thenable: {
|
|
31
|
+
asyncContainer: thenable
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
test('parses asyncContainer from lazily executing function', ()=>{
|
|
36
|
+
const lazyFunction = ()=>Promise.resolve({
|
|
37
|
+
get: ()=>true,
|
|
38
|
+
init: ()=>true
|
|
39
|
+
});
|
|
40
|
+
// @ts-ignore
|
|
41
|
+
remoteVars.lazyFunction = lazyFunction;
|
|
42
|
+
const remotes = getRuntimeRemotes();
|
|
43
|
+
expect(remotes).toHaveProperty('lazyFunction.asyncContainer');
|
|
44
|
+
expect(typeof remotes['lazyFunction'].asyncContainer).toBe('function');
|
|
45
|
+
});
|
|
46
|
+
test('parses delegate module', ()=>{
|
|
47
|
+
// @ts-ignore
|
|
48
|
+
Object.assign(remoteVars, {
|
|
49
|
+
delegate: 'internal some_module?remote=remoteGlobal@https://example.com/remoteEntry.js'
|
|
50
|
+
});
|
|
51
|
+
const remotes = getRuntimeRemotes();
|
|
52
|
+
expect(remotes).toEqual({
|
|
53
|
+
delegate: {
|
|
54
|
+
global: 'remoteGlobal',
|
|
55
|
+
url: 'https://example.com/remoteEntry.js'
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
test('parses global@url string', ()=>{
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
remoteVars.remote = 'remoteGlobal@https://example.com/remoteEntry.js';
|
|
62
|
+
const remotes = getRuntimeRemotes();
|
|
63
|
+
expect(remotes).toEqual({
|
|
64
|
+
remote: {
|
|
65
|
+
global: 'remoteGlobal',
|
|
66
|
+
url: 'https://example.com/remoteEntry.js'
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
test('console.warn should be called for unsupported types', ()=>{
|
|
71
|
+
console.warn = jest.fn();
|
|
72
|
+
// @ts-ignore
|
|
73
|
+
remoteVars.unsupported = 42;
|
|
74
|
+
// Call the function that triggers the warning message
|
|
75
|
+
getRuntimeRemotes();
|
|
76
|
+
// Check that console.warn was called with the correct message
|
|
77
|
+
//@ts-ignore
|
|
78
|
+
expect(console.warn.mock.calls[0][0]).toMatch(/Unable to retrieve runtime remotes/);
|
|
79
|
+
//@ts-ignore
|
|
80
|
+
console.log(console.warn.mock.calls[0][1].message);
|
|
81
|
+
//@ts-ignore
|
|
82
|
+
expect(console.warn.mock.calls[0][1].message).toMatch(/runtime_remote/);
|
|
83
|
+
//@ts-ignore
|
|
84
|
+
expect(console.warn.mock.calls[0][1].message).toMatch(/unsupported/);
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { importDelegatedModule } from "./importDelegatedModule.mjs";
|
|
2
|
+
import { loadScript } from "./pure.mjs";
|
|
3
|
+
// The require scope
|
|
4
|
+
var __webpack_require__ = {};
|
|
5
|
+
|
|
6
|
+
/************************************************************************/
|
|
7
|
+
// webpack/runtime/global
|
|
8
|
+
(() => {
|
|
9
|
+
__webpack_require__.g = (() => {
|
|
10
|
+
if (typeof globalThis === 'object') return globalThis;
|
|
11
|
+
try {
|
|
12
|
+
return this || new Function('return this')();
|
|
13
|
+
} catch (e) {
|
|
14
|
+
if (typeof window === 'object') return window;
|
|
15
|
+
}
|
|
16
|
+
})();
|
|
17
|
+
})();
|
|
18
|
+
/************************************************************************/
|
|
19
|
+
|
|
20
|
+
;// CONCATENATED MODULE: external "./importDelegatedModule.mjs"
|
|
21
|
+
|
|
22
|
+
;// CONCATENATED MODULE: external "./pure.mjs"
|
|
23
|
+
|
|
24
|
+
;// CONCATENATED MODULE: ./src/utils/importDelegateModule.test.ts
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
jest.mock('./pure');
|
|
28
|
+
describe('importDelegatedModule', ()=>{
|
|
29
|
+
let mockLoadScript;
|
|
30
|
+
let mockRuntimeRemote;
|
|
31
|
+
beforeEach(()=>{
|
|
32
|
+
mockLoadScript = jest.fn();
|
|
33
|
+
mockRuntimeRemote = {
|
|
34
|
+
get: jest.fn(),
|
|
35
|
+
init: jest.fn()
|
|
36
|
+
};
|
|
37
|
+
loadScript.mockImplementation(()=>Promise.resolve(mockRuntimeRemote));
|
|
38
|
+
});
|
|
39
|
+
afterEach(()=>{
|
|
40
|
+
jest.resetAllMocks();
|
|
41
|
+
});
|
|
42
|
+
it('should successfully import a delegated module', async ()=>{
|
|
43
|
+
const result = await importDelegatedModule('test');
|
|
44
|
+
expect(loadScript).toHaveBeenCalledWith('test');
|
|
45
|
+
expect(result).toBe(mockRuntimeRemote);
|
|
46
|
+
});
|
|
47
|
+
it('should handle the case when globalThis is not defined', async ()=>{
|
|
48
|
+
const result = await importDelegatedModule({
|
|
49
|
+
global: 'test'
|
|
50
|
+
});
|
|
51
|
+
expect(loadScript).toHaveBeenCalledWith({
|
|
52
|
+
global: 'test'
|
|
53
|
+
});
|
|
54
|
+
expect(result).toBe(mockRuntimeRemote);
|
|
55
|
+
});
|
|
56
|
+
// Test case for when the module has a function property
|
|
57
|
+
it('should return a Promise that resolves to the result when the module is a Promise', async ()=>{
|
|
58
|
+
__webpack_require__.g.window = undefined;
|
|
59
|
+
mockRuntimeRemote.get.mockImplementation(()=>Promise.resolve('test'));
|
|
60
|
+
const result = await importDelegatedModule({
|
|
61
|
+
global: 'test'
|
|
62
|
+
});
|
|
63
|
+
expect(await result.get('test')).toBe('test');
|
|
64
|
+
__webpack_require__.g.window = {}; // Reset window object
|
|
65
|
+
});
|
|
66
|
+
// Test case for when the module has a non-function property
|
|
67
|
+
xit('should define a non-function property on the result when the module has a non-function property', async ()=>{
|
|
68
|
+
__webpack_require__.g.window = undefined;
|
|
69
|
+
mockRuntimeRemote.get.mockImplementation(()=>Promise.resolve(()=>({
|
|
70
|
+
testProp: 'test'
|
|
71
|
+
})));
|
|
72
|
+
const result = await importDelegatedModule({
|
|
73
|
+
global: 'test'
|
|
74
|
+
});
|
|
75
|
+
const getterFunction = await result.get('testProp');
|
|
76
|
+
const getter = getterFunction();
|
|
77
|
+
expect(getter).toBe('test');
|
|
78
|
+
});
|
|
79
|
+
// Test case for when the module is a Promise
|
|
80
|
+
it('should return a Promise that resolves to the result when the module is a Promise', async ()=>{
|
|
81
|
+
__webpack_require__.g.window = undefined;
|
|
82
|
+
mockRuntimeRemote.get.mockImplementation(()=>Promise.resolve('test'));
|
|
83
|
+
const result = await importDelegatedModule({
|
|
84
|
+
global: 'test'
|
|
85
|
+
});
|
|
86
|
+
expect(result.get('test')).resolves.toBe('test');
|
|
87
|
+
__webpack_require__.g.window = {}; // Reset window object
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { loadScript } from "./pure.mjs";
|
|
2
|
+
|
|
3
|
+
;// CONCATENATED MODULE: external "./pure.mjs"
|
|
4
|
+
|
|
5
|
+
;// CONCATENATED MODULE: ./src/utils/importDelegatedModule.ts
|
|
6
|
+
|
|
7
|
+
const importDelegatedModule = async (keyOrRuntimeRemoteItem)=>{
|
|
8
|
+
// @ts-ignore
|
|
9
|
+
return loadScript(keyOrRuntimeRemoteItem).then((asyncContainer)=>{
|
|
10
|
+
return asyncContainer;
|
|
11
|
+
}).then((asyncContainer)=>{
|
|
12
|
+
// most of this is only needed because of legacy promise based implementation
|
|
13
|
+
// can remove proxies once we remove promise based implementations
|
|
14
|
+
if (typeof window === 'undefined') {
|
|
15
|
+
if (!Object.hasOwnProperty.call(keyOrRuntimeRemoteItem, 'globalThis')) {
|
|
16
|
+
return asyncContainer;
|
|
17
|
+
}
|
|
18
|
+
// return asyncContainer;
|
|
19
|
+
//TODO: need to solve chunk flushing with delegated modules
|
|
20
|
+
return {
|
|
21
|
+
get: function(arg) {
|
|
22
|
+
//@ts-ignore
|
|
23
|
+
return asyncContainer.get(arg).then((f)=>{
|
|
24
|
+
const m = f();
|
|
25
|
+
const result = {
|
|
26
|
+
__esModule: m.__esModule
|
|
27
|
+
};
|
|
28
|
+
for(const prop in m){
|
|
29
|
+
if (typeof m[prop] === 'function') {
|
|
30
|
+
Object.defineProperty(result, prop, {
|
|
31
|
+
get: function() {
|
|
32
|
+
return function() {
|
|
33
|
+
//@ts-ignore
|
|
34
|
+
if (globalThis.usedChunks) {
|
|
35
|
+
//@ts-ignore
|
|
36
|
+
globalThis.usedChunks.add(//@ts-ignore
|
|
37
|
+
`${keyOrRuntimeRemoteItem.global}->${arg}`);
|
|
38
|
+
}
|
|
39
|
+
//eslint-disable-next-line prefer-rest-params
|
|
40
|
+
return m[prop](...arguments);
|
|
41
|
+
};
|
|
42
|
+
},
|
|
43
|
+
enumerable: true
|
|
44
|
+
});
|
|
45
|
+
} else {
|
|
46
|
+
Object.defineProperty(result, prop, {
|
|
47
|
+
get: ()=>{
|
|
48
|
+
//@ts-ignore
|
|
49
|
+
if (globalThis.usedChunks) {
|
|
50
|
+
//@ts-ignore
|
|
51
|
+
globalThis.usedChunks.add(//@ts-ignore
|
|
52
|
+
`${keyOrRuntimeRemoteItem.global}->${arg}`);
|
|
53
|
+
}
|
|
54
|
+
return m[prop];
|
|
55
|
+
},
|
|
56
|
+
enumerable: true
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
if (m.then) {
|
|
61
|
+
return Promise.resolve(()=>result);
|
|
62
|
+
}
|
|
63
|
+
return ()=>result;
|
|
64
|
+
});
|
|
65
|
+
},
|
|
66
|
+
init: asyncContainer.init
|
|
67
|
+
};
|
|
68
|
+
} else {
|
|
69
|
+
return asyncContainer;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export { importDelegatedModule };
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
var __webpack_modules__ = ({});
|
|
2
|
+
/************************************************************************/
|
|
3
|
+
// The module cache
|
|
4
|
+
var __webpack_module_cache__ = {};
|
|
5
|
+
|
|
6
|
+
// The require function
|
|
7
|
+
function __webpack_require__(moduleId) {
|
|
8
|
+
|
|
9
|
+
// Check if module is in cache
|
|
10
|
+
var cachedModule = __webpack_module_cache__[moduleId];
|
|
11
|
+
if (cachedModule !== undefined) {
|
|
12
|
+
return cachedModule.exports;
|
|
13
|
+
}
|
|
14
|
+
// Create a new module (and put it into the cache)
|
|
15
|
+
var module = (__webpack_module_cache__[moduleId] = {
|
|
16
|
+
exports: {}
|
|
17
|
+
});
|
|
18
|
+
// Execute the module function
|
|
19
|
+
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
20
|
+
|
|
21
|
+
// Return the exports of the module
|
|
22
|
+
return module.exports;
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/************************************************************************/
|
|
27
|
+
// webpack/runtime/has_own_property
|
|
28
|
+
(() => {
|
|
29
|
+
__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
30
|
+
})();
|
|
31
|
+
/************************************************************************/
|
|
32
|
+
|
|
33
|
+
;// CONCATENATED MODULE: ./src/utils/importRemote.ts
|
|
34
|
+
/**
|
|
35
|
+
* Constant for remote entry file
|
|
36
|
+
* @constant {string}
|
|
37
|
+
*/ const REMOTE_ENTRY_FILE = 'remoteEntry.js';
|
|
38
|
+
/**
|
|
39
|
+
* Function to load remote
|
|
40
|
+
* @function
|
|
41
|
+
* @param {ImportRemoteOptions['url']} url - The url of the remote module
|
|
42
|
+
* @param {ImportRemoteOptions['scope']} scope - The scope of the remote module
|
|
43
|
+
* @param {ImportRemoteOptions['bustRemoteEntryCache']} bustRemoteEntryCache - Flag to bust the remote entry cache
|
|
44
|
+
* @returns {Promise<void>} A promise that resolves when the remote is loaded
|
|
45
|
+
*/ const loadRemote = (url, scope, bustRemoteEntryCache)=>new Promise((resolve, reject)=>{
|
|
46
|
+
const timestamp = bustRemoteEntryCache ? `?t=${new Date().getTime()}` : '';
|
|
47
|
+
const webpackRequire = __webpack_require__;
|
|
48
|
+
webpackRequire.l(`${url}${timestamp}`, (event)=>{
|
|
49
|
+
var _event_target;
|
|
50
|
+
if ((event === null || event === void 0 ? void 0 : event.type) === 'load') {
|
|
51
|
+
// Script loaded successfully:
|
|
52
|
+
return resolve();
|
|
53
|
+
}
|
|
54
|
+
const realSrc = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.src;
|
|
55
|
+
const error = new Error();
|
|
56
|
+
error.message = 'Loading script failed.\n(missing: ' + realSrc + ')';
|
|
57
|
+
error.name = 'ScriptExternalLoadError';
|
|
58
|
+
reject(error);
|
|
59
|
+
}, scope);
|
|
60
|
+
});
|
|
61
|
+
const loadEsmRemote = async (url, scope)=>{
|
|
62
|
+
const module = await import(/* webpackIgnore: true */ url);
|
|
63
|
+
if (!module) {
|
|
64
|
+
throw new Error(`Unable to load requested remote from ${url} with scope ${scope}`);
|
|
65
|
+
}
|
|
66
|
+
window[scope] = {
|
|
67
|
+
...module,
|
|
68
|
+
__initializing: false,
|
|
69
|
+
__initialized: false
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* Function to initialize sharing
|
|
74
|
+
* @async
|
|
75
|
+
* @function
|
|
76
|
+
*/ const initSharing = async ()=>{
|
|
77
|
+
const webpackShareScopes = __webpack_require__.S;
|
|
78
|
+
if (!(webpackShareScopes === null || webpackShareScopes === void 0 ? void 0 : webpackShareScopes.default)) {
|
|
79
|
+
await __webpack_require__.I('default');
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
/**
|
|
83
|
+
* Function to initialize container
|
|
84
|
+
* @async
|
|
85
|
+
* @function
|
|
86
|
+
* @param {WebpackRemoteContainer} containerScope - The container scope
|
|
87
|
+
*/ const initContainer = async (containerScope)=>{
|
|
88
|
+
try {
|
|
89
|
+
const webpackShareScopes = __webpack_require__.S;
|
|
90
|
+
if (!containerScope.__initialized && !containerScope.__initializing) {
|
|
91
|
+
containerScope.__initializing = true;
|
|
92
|
+
await containerScope.init(webpackShareScopes.default);
|
|
93
|
+
containerScope.__initialized = true;
|
|
94
|
+
delete containerScope.__initializing;
|
|
95
|
+
}
|
|
96
|
+
} catch (error) {
|
|
97
|
+
console.error(error);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* Function to import remote
|
|
102
|
+
* @async
|
|
103
|
+
* @function
|
|
104
|
+
* @param {ImportRemoteOptions} options - The options for importing the remote
|
|
105
|
+
* @returns {Promise<T>} A promise that resolves with the imported module
|
|
106
|
+
*/ const importRemote = async ({ url, scope, module, remoteEntryFileName = REMOTE_ENTRY_FILE, bustRemoteEntryCache = true, esm = false })=>{
|
|
107
|
+
const remoteScope = scope;
|
|
108
|
+
if (!window[remoteScope]) {
|
|
109
|
+
let remoteUrl = '';
|
|
110
|
+
if (typeof url === 'string') {
|
|
111
|
+
remoteUrl = url;
|
|
112
|
+
} else {
|
|
113
|
+
remoteUrl = await url();
|
|
114
|
+
}
|
|
115
|
+
const remoteUrlWithEntryFile = `${remoteUrl}/${remoteEntryFileName}`;
|
|
116
|
+
const asyncContainer = !esm ? loadRemote(remoteUrlWithEntryFile, scope, bustRemoteEntryCache) : loadEsmRemote(remoteUrlWithEntryFile, scope);
|
|
117
|
+
// Load the remote and initialize the share scope if it's empty
|
|
118
|
+
await Promise.all([
|
|
119
|
+
asyncContainer,
|
|
120
|
+
initSharing()
|
|
121
|
+
]);
|
|
122
|
+
if (!window[remoteScope]) {
|
|
123
|
+
throw new Error(`Remote loaded successfully but ${scope} could not be found! Verify that the name is correct in the Webpack configuration!`);
|
|
124
|
+
}
|
|
125
|
+
// Initialize the container to get shared modules and get the module factory:
|
|
126
|
+
const [, moduleFactory] = await Promise.all([
|
|
127
|
+
initContainer(window[remoteScope]),
|
|
128
|
+
window[remoteScope].get(module === '.' || module.startsWith('./') ? module : `./${module}`)
|
|
129
|
+
]);
|
|
130
|
+
return moduleFactory();
|
|
131
|
+
} else {
|
|
132
|
+
const moduleFactory = await window[remoteScope].get(module === '.' || module.startsWith('./') ? module : `./${module}`);
|
|
133
|
+
return moduleFactory();
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export { importRemote };
|