@module-federation/modern-js 0.0.0-next-20240515062211
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/LICENSE +21 -0
- package/README.md +1 -0
- package/dist/CHANGELOG.md +1 -0
- package/dist/LICENSE +21 -0
- package/dist/README.md +1 -0
- package/dist/cjs/cli/index.js +165 -0
- package/dist/cjs/cli/manifest.js +72 -0
- package/dist/cjs/cli/mfRuntimePlugins/shared-strategy.js +42 -0
- package/dist/cjs/cli/utils.js +62 -0
- package/dist/cjs/constant.js +28 -0
- package/dist/cjs/runtime/MFReactComponent.js +108 -0
- package/dist/cjs/runtime/index.js +31 -0
- package/dist/cjs/types/index.js +16 -0
- package/dist/esm/cli/index.js +157 -0
- package/dist/esm/cli/manifest.js +38 -0
- package/dist/esm/cli/mfRuntimePlugins/shared-strategy.js +24 -0
- package/dist/esm/cli/utils.js +56 -0
- package/dist/esm/constant.js +4 -0
- package/dist/esm/runtime/MFReactComponent.js +77 -0
- package/dist/esm/runtime/index.js +5 -0
- package/dist/esm/types/index.js +0 -0
- package/dist/esm-node/cli/index.js +130 -0
- package/dist/esm-node/cli/manifest.js +38 -0
- package/dist/esm-node/cli/mfRuntimePlugins/shared-strategy.js +22 -0
- package/dist/esm-node/cli/utils.js +27 -0
- package/dist/esm-node/constant.js +4 -0
- package/dist/esm-node/runtime/MFReactComponent.js +74 -0
- package/dist/esm-node/runtime/index.js +5 -0
- package/dist/esm-node/types/index.js +0 -0
- package/dist/types/cli/index.d.ts +5 -0
- package/dist/types/cli/manifest.d.ts +2 -0
- package/dist/types/cli/mfRuntimePlugins/shared-strategy.d.ts +3 -0
- package/dist/types/cli/utils.d.ts +4 -0
- package/dist/types/constant.d.ts +1 -0
- package/dist/types/runtime/MFReactComponent.d.ts +7 -0
- package/dist/types/runtime/index.d.ts +2 -0
- package/dist/types/types/index.d.ts +5 -0
- package/package.json +56 -0
- package/types.d.ts +5 -0
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
|
+
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
3
|
+
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
4
|
+
import path from "path";
|
|
5
|
+
import { fs } from "@modern-js/utils";
|
|
6
|
+
import { ModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
|
|
7
|
+
import { StreamingTargetPlugin } from "@module-federation/node";
|
|
8
|
+
import { getMFConfig, patchMFConfig } from "./utils";
|
|
9
|
+
import { updateStatsAndManifest } from "./manifest";
|
|
10
|
+
import { MODERN_JS_SERVER_DIR } from "../constant";
|
|
11
|
+
var moduleFederationPlugin = function() {
|
|
12
|
+
var userConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
13
|
+
return {
|
|
14
|
+
name: "@modern-js/plugin-module-federation",
|
|
15
|
+
setup: function() {
|
|
16
|
+
var _ref = _async_to_generator(function(param) {
|
|
17
|
+
var useConfigContext, _useConfig_server, _useConfig_server1, _useConfig_server_ssr, _useConfig_server2, useConfig, enableSSR, isStreamSSR, mfConfig, outputDir, browserPlugin, nodePlugin;
|
|
18
|
+
return _ts_generator(this, function(_state) {
|
|
19
|
+
switch (_state.label) {
|
|
20
|
+
case 0:
|
|
21
|
+
useConfigContext = param.useConfigContext;
|
|
22
|
+
useConfig = useConfigContext();
|
|
23
|
+
enableSSR = Boolean(useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server = useConfig.server) === null || _useConfig_server === void 0 ? void 0 : _useConfig_server.ssr);
|
|
24
|
+
isStreamSSR = typeof (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server1 = useConfig.server) === null || _useConfig_server1 === void 0 ? void 0 : _useConfig_server1.ssr) === "object" ? (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server2 = useConfig.server) === null || _useConfig_server2 === void 0 ? void 0 : (_useConfig_server_ssr = _useConfig_server2.ssr) === null || _useConfig_server_ssr === void 0 ? void 0 : _useConfig_server_ssr.mode) === "stream" : false;
|
|
25
|
+
return [
|
|
26
|
+
4,
|
|
27
|
+
getMFConfig(userConfig)
|
|
28
|
+
];
|
|
29
|
+
case 1:
|
|
30
|
+
mfConfig = _state.sent();
|
|
31
|
+
outputDir = "";
|
|
32
|
+
return [
|
|
33
|
+
2,
|
|
34
|
+
{
|
|
35
|
+
config: function() {
|
|
36
|
+
var _useConfig_dev;
|
|
37
|
+
if (enableSSR) {
|
|
38
|
+
process.env["MF_DISABLE_EMIT_STATS"] = "true";
|
|
39
|
+
}
|
|
40
|
+
return {
|
|
41
|
+
tools: {
|
|
42
|
+
webpack: function webpack(config, param2) {
|
|
43
|
+
var isServer = param2.isServer;
|
|
44
|
+
var _config_optimization, _useConfig_source, _config_output;
|
|
45
|
+
(_config_optimization = config.optimization) === null || _config_optimization === void 0 ? true : delete _config_optimization.runtimeChunk;
|
|
46
|
+
patchMFConfig(mfConfig);
|
|
47
|
+
if (isServer) {
|
|
48
|
+
var _config_plugins, _config_plugins1;
|
|
49
|
+
nodePlugin = new ModuleFederationPlugin(_object_spread({
|
|
50
|
+
library: {
|
|
51
|
+
type: "commonjs-module",
|
|
52
|
+
name: mfConfig.name
|
|
53
|
+
}
|
|
54
|
+
}, mfConfig));
|
|
55
|
+
(_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(nodePlugin);
|
|
56
|
+
(_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(new StreamingTargetPlugin(mfConfig));
|
|
57
|
+
} else {
|
|
58
|
+
var _config_output1, _config_plugins2, _config_optimization1;
|
|
59
|
+
outputDir = ((_config_output1 = config.output) === null || _config_output1 === void 0 ? void 0 : _config_output1.path) || path.resolve(process.cwd(), "dist");
|
|
60
|
+
browserPlugin = new ModuleFederationPlugin(mfConfig);
|
|
61
|
+
(_config_plugins2 = config.plugins) === null || _config_plugins2 === void 0 ? void 0 : _config_plugins2.push(browserPlugin);
|
|
62
|
+
if (enableSSR && isStreamSSR && typeof ((_config_optimization1 = config.optimization) === null || _config_optimization1 === void 0 ? void 0 : _config_optimization1.splitChunks) === "object" && config.optimization.splitChunks.cacheGroups) {
|
|
63
|
+
config.optimization.splitChunks.chunks = "async";
|
|
64
|
+
console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
var enableAsyncEntry = (_useConfig_source = useConfig.source) === null || _useConfig_source === void 0 ? void 0 : _useConfig_source.enableAsyncEntry;
|
|
68
|
+
if (!enableAsyncEntry && mfConfig.async) {
|
|
69
|
+
var _config_plugins3;
|
|
70
|
+
var asyncBoundaryPluginOptions = {
|
|
71
|
+
eager: function(module) {
|
|
72
|
+
return module && /\.federation/.test((module === null || module === void 0 ? void 0 : module.request) || "");
|
|
73
|
+
},
|
|
74
|
+
excludeChunk: function(chunk) {
|
|
75
|
+
return chunk.name === mfConfig.name;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
(_config_plugins3 = config.plugins) === null || _config_plugins3 === void 0 ? void 0 : _config_plugins3.push(new AsyncBoundaryPlugin(asyncBoundaryPluginOptions));
|
|
79
|
+
}
|
|
80
|
+
if (((_config_output = config.output) === null || _config_output === void 0 ? void 0 : _config_output.publicPath) === "auto") {
|
|
81
|
+
var _useConfig_dev2, _useConfig_server3;
|
|
82
|
+
var port = ((_useConfig_dev2 = useConfig.dev) === null || _useConfig_dev2 === void 0 ? void 0 : _useConfig_dev2.port) || ((_useConfig_server3 = useConfig.server) === null || _useConfig_server3 === void 0 ? void 0 : _useConfig_server3.port) || 8080;
|
|
83
|
+
var publicPath = "http://localhost:".concat(port, "/");
|
|
84
|
+
config.output.publicPath = publicPath;
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
devServer: {
|
|
88
|
+
headers: {
|
|
89
|
+
"Access-Control-Allow-Origin": "*",
|
|
90
|
+
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
|
|
91
|
+
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
|
|
92
|
+
},
|
|
93
|
+
before: [
|
|
94
|
+
function(req, res, next) {
|
|
95
|
+
if (!enableSSR) {
|
|
96
|
+
next();
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
try {
|
|
100
|
+
var _req_url, _req_url1, _req_url2;
|
|
101
|
+
var SERVER_PREFIX = "/".concat(MODERN_JS_SERVER_DIR);
|
|
102
|
+
if (((_req_url = req.url) === null || _req_url === void 0 ? void 0 : _req_url.startsWith(SERVER_PREFIX)) || ((_req_url1 = req.url) === null || _req_url1 === void 0 ? void 0 : _req_url1.includes("remoteEntry.js")) || ((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes(".json"))) {
|
|
103
|
+
var filepath = path.join(process.cwd(), "dist".concat(req.url));
|
|
104
|
+
fs.statSync(filepath);
|
|
105
|
+
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
106
|
+
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
|
|
107
|
+
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, content-type, Authorization");
|
|
108
|
+
fs.createReadStream(filepath).pipe(res);
|
|
109
|
+
} else {
|
|
110
|
+
next();
|
|
111
|
+
}
|
|
112
|
+
} catch (err) {
|
|
113
|
+
console.error(err);
|
|
114
|
+
next();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
source: {
|
|
121
|
+
alias: {
|
|
122
|
+
"@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
dev: {
|
|
126
|
+
assetPrefix: (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_dev = useConfig.dev) === null || _useConfig_dev === void 0 ? void 0 : _useConfig_dev.assetPrefix) ? useConfig.dev.assetPrefix : true
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
},
|
|
130
|
+
afterBuild: function() {
|
|
131
|
+
if (enableSSR) {
|
|
132
|
+
updateStatsAndManifest(nodePlugin, browserPlugin, outputDir);
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
afterDev: function() {
|
|
136
|
+
if (enableSSR) {
|
|
137
|
+
updateStatsAndManifest(nodePlugin, browserPlugin, outputDir);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
];
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
return function(_) {
|
|
146
|
+
return _ref.apply(this, arguments);
|
|
147
|
+
};
|
|
148
|
+
}()
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
var cli_default = moduleFederationPlugin;
|
|
152
|
+
import { createModuleFederationConfig } from "@module-federation/enhanced";
|
|
153
|
+
export {
|
|
154
|
+
createModuleFederationConfig,
|
|
155
|
+
cli_default as default,
|
|
156
|
+
moduleFederationPlugin
|
|
157
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import path from "path";
|
|
2
|
+
import { fs } from "@modern-js/utils";
|
|
3
|
+
import { MODERN_JS_SERVER_DIR } from "../constant";
|
|
4
|
+
function mergeStats(browserStats, nodeStats) {
|
|
5
|
+
var ssrRemoteEntry = nodeStats.metaData.remoteEntry;
|
|
6
|
+
ssrRemoteEntry.path = MODERN_JS_SERVER_DIR;
|
|
7
|
+
browserStats.metaData.ssrRemoteEntry = ssrRemoteEntry;
|
|
8
|
+
return browserStats;
|
|
9
|
+
}
|
|
10
|
+
function mergeManifest(browserManifest, nodeManifest) {
|
|
11
|
+
var ssrRemoteEntry = nodeManifest.metaData.remoteEntry;
|
|
12
|
+
ssrRemoteEntry.path = MODERN_JS_SERVER_DIR;
|
|
13
|
+
browserManifest.metaData.ssrRemoteEntry = ssrRemoteEntry;
|
|
14
|
+
return browserManifest;
|
|
15
|
+
}
|
|
16
|
+
function mergeStatsAndManifest(nodePlugin, browserPlugin) {
|
|
17
|
+
var nodeResourceInfo = nodePlugin.statsResourceInfo;
|
|
18
|
+
var browserResourceInfo = browserPlugin.statsResourceInfo;
|
|
19
|
+
if (!browserResourceInfo || !nodeResourceInfo || !browserResourceInfo.stats || !nodeResourceInfo.stats || !browserResourceInfo.manifest || !nodeResourceInfo.manifest) {
|
|
20
|
+
throw new Error("can not get browserResourceInfo or nodeResourceInfo");
|
|
21
|
+
}
|
|
22
|
+
var mergedStats = mergeStats(browserResourceInfo.stats.stats, nodeResourceInfo.stats.stats);
|
|
23
|
+
var mergedManifest = mergeManifest(browserResourceInfo.manifest.manifest, nodeResourceInfo.manifest.manifest);
|
|
24
|
+
return {
|
|
25
|
+
mergedStats,
|
|
26
|
+
mergedStatsFilePath: browserResourceInfo.stats.filename,
|
|
27
|
+
mergedManifest,
|
|
28
|
+
mergedManifestFilePath: browserResourceInfo.manifest.filename
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function updateStatsAndManifest(nodePlugin, browserPlugin, outputDir) {
|
|
32
|
+
var _mergeStatsAndManifest = mergeStatsAndManifest(nodePlugin, browserPlugin), mergedStats = _mergeStatsAndManifest.mergedStats, mergedStatsFilePath = _mergeStatsAndManifest.mergedStatsFilePath, mergedManifest = _mergeStatsAndManifest.mergedManifest, mergedManifestFilePath = _mergeStatsAndManifest.mergedManifestFilePath;
|
|
33
|
+
fs.writeFileSync(path.resolve(outputDir, mergedStatsFilePath), JSON.stringify(mergedStats, null, 2));
|
|
34
|
+
fs.writeFileSync(path.resolve(outputDir, mergedManifestFilePath), JSON.stringify(mergedManifest, null, 2));
|
|
35
|
+
}
|
|
36
|
+
export {
|
|
37
|
+
updateStatsAndManifest
|
|
38
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var sharedStrategy = function() {
|
|
2
|
+
return {
|
|
3
|
+
name: "shared-strategy",
|
|
4
|
+
beforeInit: function beforeInit(args) {
|
|
5
|
+
var shareInfo = args.shareInfo;
|
|
6
|
+
if (shareInfo) {
|
|
7
|
+
Object.keys(shareInfo || {}).forEach(function(sharedKey) {
|
|
8
|
+
var sharedConfigs = shareInfo[sharedKey];
|
|
9
|
+
var arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
10
|
+
sharedConfigs
|
|
11
|
+
];
|
|
12
|
+
arraySharedConfigs.forEach(function(s) {
|
|
13
|
+
s.strategy = "loaded-first";
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return args;
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
var shared_strategy_default = sharedStrategy;
|
|
22
|
+
export {
|
|
23
|
+
shared_strategy_default as default
|
|
24
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
|
+
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
3
|
+
import path from "path";
|
|
4
|
+
import { bundle } from "@modern-js/node-bundle-require";
|
|
5
|
+
var defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
|
|
6
|
+
var getMFConfig = function() {
|
|
7
|
+
var _ref = _async_to_generator(function(userConfig) {
|
|
8
|
+
var config, configPath, mfConfigPath, preBundlePath, mfConfig;
|
|
9
|
+
return _ts_generator(this, function(_state) {
|
|
10
|
+
switch (_state.label) {
|
|
11
|
+
case 0:
|
|
12
|
+
config = userConfig.config, configPath = userConfig.configPath;
|
|
13
|
+
if (config) {
|
|
14
|
+
return [
|
|
15
|
+
2,
|
|
16
|
+
config
|
|
17
|
+
];
|
|
18
|
+
}
|
|
19
|
+
mfConfigPath = configPath ? configPath : defaultPath;
|
|
20
|
+
return [
|
|
21
|
+
4,
|
|
22
|
+
bundle(mfConfigPath)
|
|
23
|
+
];
|
|
24
|
+
case 1:
|
|
25
|
+
preBundlePath = _state.sent();
|
|
26
|
+
return [
|
|
27
|
+
4,
|
|
28
|
+
import(preBundlePath)
|
|
29
|
+
];
|
|
30
|
+
case 2:
|
|
31
|
+
mfConfig = _state.sent().default;
|
|
32
|
+
return [
|
|
33
|
+
2,
|
|
34
|
+
mfConfig
|
|
35
|
+
];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
return function getMFConfig2(userConfig) {
|
|
40
|
+
return _ref.apply(this, arguments);
|
|
41
|
+
};
|
|
42
|
+
}();
|
|
43
|
+
var patchMFConfig = function(mfConfig) {
|
|
44
|
+
mfConfig.runtimePlugins = mfConfig.runtimePlugins || [];
|
|
45
|
+
var runtimePluginPath = path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js");
|
|
46
|
+
if (!mfConfig.runtimePlugins.includes(runtimePluginPath)) {
|
|
47
|
+
mfConfig.runtimePlugins.push(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"));
|
|
48
|
+
}
|
|
49
|
+
if (typeof mfConfig.async === "undefined") {
|
|
50
|
+
mfConfig.async = true;
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
export {
|
|
54
|
+
getMFConfig,
|
|
55
|
+
patchMFConfig
|
|
56
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
|
+
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
|
+
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
|
|
7
|
+
function getLoadedRemoteInfos(instance, id) {
|
|
8
|
+
var moduleName = instance.remoteHandler.idToModuleNameMap[id];
|
|
9
|
+
if (!moduleName) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
var module = instance.moduleCache.get(moduleName);
|
|
13
|
+
if (!module) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
var remoteSnapshot = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo).remoteSnapshot;
|
|
17
|
+
return _object_spread_props(_object_spread({}, module.remoteInfo), {
|
|
18
|
+
snapshot: remoteSnapshot
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function collectLinks(id) {
|
|
22
|
+
var links = [];
|
|
23
|
+
var instance = getInstance();
|
|
24
|
+
if (!instance) {
|
|
25
|
+
return links;
|
|
26
|
+
}
|
|
27
|
+
var loadedRemoteInfo = getLoadedRemoteInfos(instance, id);
|
|
28
|
+
if (!loadedRemoteInfo) {
|
|
29
|
+
return links;
|
|
30
|
+
}
|
|
31
|
+
var snapshot = loadedRemoteInfo.snapshot;
|
|
32
|
+
if (!snapshot) {
|
|
33
|
+
return links;
|
|
34
|
+
}
|
|
35
|
+
var publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
|
|
36
|
+
if (!publicPath) {
|
|
37
|
+
return links;
|
|
38
|
+
}
|
|
39
|
+
var modules = "modules" in snapshot ? snapshot.modules : [];
|
|
40
|
+
if (modules) {
|
|
41
|
+
modules.forEach(function(module) {
|
|
42
|
+
_to_consumable_array(module.assets.css.sync).concat(_to_consumable_array(module.assets.css.async)).forEach(function(file, index) {
|
|
43
|
+
links.push(/* @__PURE__ */ _jsx("link", {
|
|
44
|
+
href: "".concat(publicPath).concat(file),
|
|
45
|
+
rel: "stylesheet",
|
|
46
|
+
type: "text/css"
|
|
47
|
+
}, index));
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return links;
|
|
52
|
+
}
|
|
53
|
+
function MFReactComponent(props) {
|
|
54
|
+
var _props_loading = props.loading, loading = _props_loading === void 0 ? "loading..." : _props_loading, id = props.id;
|
|
55
|
+
var Component = /* @__PURE__ */ React.lazy(function() {
|
|
56
|
+
return loadRemote(id).then(function(mod) {
|
|
57
|
+
var links = collectLinks(id);
|
|
58
|
+
return {
|
|
59
|
+
default: function() {
|
|
60
|
+
return /* @__PURE__ */ _jsxs("div", {
|
|
61
|
+
children: [
|
|
62
|
+
links,
|
|
63
|
+
/* @__PURE__ */ _jsx(mod.default, {})
|
|
64
|
+
]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
return /* @__PURE__ */ _jsx(React.Suspense, {
|
|
71
|
+
fallback: loading,
|
|
72
|
+
children: /* @__PURE__ */ _jsx(Component, {})
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
export {
|
|
76
|
+
MFReactComponent
|
|
77
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import path from "path";
|
|
2
|
+
import { fs } from "@modern-js/utils";
|
|
3
|
+
import { ModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
|
|
4
|
+
import { StreamingTargetPlugin } from "@module-federation/node";
|
|
5
|
+
import { getMFConfig, patchMFConfig } from "./utils";
|
|
6
|
+
import { updateStatsAndManifest } from "./manifest";
|
|
7
|
+
import { MODERN_JS_SERVER_DIR } from "../constant";
|
|
8
|
+
const moduleFederationPlugin = (userConfig = {}) => ({
|
|
9
|
+
name: "@modern-js/plugin-module-federation",
|
|
10
|
+
setup: async ({ useConfigContext }) => {
|
|
11
|
+
var _useConfig_server, _useConfig_server1, _useConfig_server_ssr, _useConfig_server2;
|
|
12
|
+
const useConfig = useConfigContext();
|
|
13
|
+
const enableSSR = Boolean(useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server = useConfig.server) === null || _useConfig_server === void 0 ? void 0 : _useConfig_server.ssr);
|
|
14
|
+
const isStreamSSR = typeof (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server1 = useConfig.server) === null || _useConfig_server1 === void 0 ? void 0 : _useConfig_server1.ssr) === "object" ? (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_server2 = useConfig.server) === null || _useConfig_server2 === void 0 ? void 0 : (_useConfig_server_ssr = _useConfig_server2.ssr) === null || _useConfig_server_ssr === void 0 ? void 0 : _useConfig_server_ssr.mode) === "stream" : false;
|
|
15
|
+
const mfConfig = await getMFConfig(userConfig);
|
|
16
|
+
let outputDir = "";
|
|
17
|
+
let browserPlugin;
|
|
18
|
+
let nodePlugin;
|
|
19
|
+
return {
|
|
20
|
+
config: () => {
|
|
21
|
+
var _useConfig_dev;
|
|
22
|
+
if (enableSSR) {
|
|
23
|
+
process.env["MF_DISABLE_EMIT_STATS"] = "true";
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
tools: {
|
|
27
|
+
webpack(config, { isServer }) {
|
|
28
|
+
var _config_optimization, _useConfig_source, _config_output;
|
|
29
|
+
(_config_optimization = config.optimization) === null || _config_optimization === void 0 ? true : delete _config_optimization.runtimeChunk;
|
|
30
|
+
patchMFConfig(mfConfig);
|
|
31
|
+
if (isServer) {
|
|
32
|
+
var _config_plugins, _config_plugins1;
|
|
33
|
+
nodePlugin = new ModuleFederationPlugin({
|
|
34
|
+
library: {
|
|
35
|
+
type: "commonjs-module",
|
|
36
|
+
name: mfConfig.name
|
|
37
|
+
},
|
|
38
|
+
...mfConfig
|
|
39
|
+
});
|
|
40
|
+
(_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(nodePlugin);
|
|
41
|
+
(_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(new StreamingTargetPlugin(mfConfig));
|
|
42
|
+
} else {
|
|
43
|
+
var _config_output1, _config_plugins2, _config_optimization1;
|
|
44
|
+
outputDir = ((_config_output1 = config.output) === null || _config_output1 === void 0 ? void 0 : _config_output1.path) || path.resolve(process.cwd(), "dist");
|
|
45
|
+
browserPlugin = new ModuleFederationPlugin(mfConfig);
|
|
46
|
+
(_config_plugins2 = config.plugins) === null || _config_plugins2 === void 0 ? void 0 : _config_plugins2.push(browserPlugin);
|
|
47
|
+
if (enableSSR && isStreamSSR && typeof ((_config_optimization1 = config.optimization) === null || _config_optimization1 === void 0 ? void 0 : _config_optimization1.splitChunks) === "object" && config.optimization.splitChunks.cacheGroups) {
|
|
48
|
+
config.optimization.splitChunks.chunks = "async";
|
|
49
|
+
console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
const enableAsyncEntry = (_useConfig_source = useConfig.source) === null || _useConfig_source === void 0 ? void 0 : _useConfig_source.enableAsyncEntry;
|
|
53
|
+
if (!enableAsyncEntry && mfConfig.async) {
|
|
54
|
+
var _config_plugins3;
|
|
55
|
+
const asyncBoundaryPluginOptions = {
|
|
56
|
+
eager: (module) => module && /\.federation/.test((module === null || module === void 0 ? void 0 : module.request) || ""),
|
|
57
|
+
excludeChunk: (chunk) => chunk.name === mfConfig.name
|
|
58
|
+
};
|
|
59
|
+
(_config_plugins3 = config.plugins) === null || _config_plugins3 === void 0 ? void 0 : _config_plugins3.push(new AsyncBoundaryPlugin(asyncBoundaryPluginOptions));
|
|
60
|
+
}
|
|
61
|
+
if (((_config_output = config.output) === null || _config_output === void 0 ? void 0 : _config_output.publicPath) === "auto") {
|
|
62
|
+
var _useConfig_dev2, _useConfig_server3;
|
|
63
|
+
const port = ((_useConfig_dev2 = useConfig.dev) === null || _useConfig_dev2 === void 0 ? void 0 : _useConfig_dev2.port) || ((_useConfig_server3 = useConfig.server) === null || _useConfig_server3 === void 0 ? void 0 : _useConfig_server3.port) || 8080;
|
|
64
|
+
const publicPath = `http://localhost:${port}/`;
|
|
65
|
+
config.output.publicPath = publicPath;
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
devServer: {
|
|
69
|
+
headers: {
|
|
70
|
+
"Access-Control-Allow-Origin": "*",
|
|
71
|
+
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
|
|
72
|
+
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
|
|
73
|
+
},
|
|
74
|
+
before: [
|
|
75
|
+
(req, res, next) => {
|
|
76
|
+
if (!enableSSR) {
|
|
77
|
+
next();
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
try {
|
|
81
|
+
var _req_url, _req_url1, _req_url2;
|
|
82
|
+
const SERVER_PREFIX = `/${MODERN_JS_SERVER_DIR}`;
|
|
83
|
+
if (((_req_url = req.url) === null || _req_url === void 0 ? void 0 : _req_url.startsWith(SERVER_PREFIX)) || ((_req_url1 = req.url) === null || _req_url1 === void 0 ? void 0 : _req_url1.includes("remoteEntry.js")) || ((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes(".json"))) {
|
|
84
|
+
const filepath = path.join(process.cwd(), `dist${req.url}`);
|
|
85
|
+
fs.statSync(filepath);
|
|
86
|
+
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
87
|
+
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
|
|
88
|
+
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, content-type, Authorization");
|
|
89
|
+
fs.createReadStream(filepath).pipe(res);
|
|
90
|
+
} else {
|
|
91
|
+
next();
|
|
92
|
+
}
|
|
93
|
+
} catch (err) {
|
|
94
|
+
console.error(err);
|
|
95
|
+
next();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
source: {
|
|
102
|
+
alias: {
|
|
103
|
+
"@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
dev: {
|
|
107
|
+
assetPrefix: (useConfig === null || useConfig === void 0 ? void 0 : (_useConfig_dev = useConfig.dev) === null || _useConfig_dev === void 0 ? void 0 : _useConfig_dev.assetPrefix) ? useConfig.dev.assetPrefix : true
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
},
|
|
111
|
+
afterBuild: () => {
|
|
112
|
+
if (enableSSR) {
|
|
113
|
+
updateStatsAndManifest(nodePlugin, browserPlugin, outputDir);
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
afterDev: () => {
|
|
117
|
+
if (enableSSR) {
|
|
118
|
+
updateStatsAndManifest(nodePlugin, browserPlugin, outputDir);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
var cli_default = moduleFederationPlugin;
|
|
125
|
+
import { createModuleFederationConfig } from "@module-federation/enhanced";
|
|
126
|
+
export {
|
|
127
|
+
createModuleFederationConfig,
|
|
128
|
+
cli_default as default,
|
|
129
|
+
moduleFederationPlugin
|
|
130
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import path from "path";
|
|
2
|
+
import { fs } from "@modern-js/utils";
|
|
3
|
+
import { MODERN_JS_SERVER_DIR } from "../constant";
|
|
4
|
+
function mergeStats(browserStats, nodeStats) {
|
|
5
|
+
const ssrRemoteEntry = nodeStats.metaData.remoteEntry;
|
|
6
|
+
ssrRemoteEntry.path = MODERN_JS_SERVER_DIR;
|
|
7
|
+
browserStats.metaData.ssrRemoteEntry = ssrRemoteEntry;
|
|
8
|
+
return browserStats;
|
|
9
|
+
}
|
|
10
|
+
function mergeManifest(browserManifest, nodeManifest) {
|
|
11
|
+
const ssrRemoteEntry = nodeManifest.metaData.remoteEntry;
|
|
12
|
+
ssrRemoteEntry.path = MODERN_JS_SERVER_DIR;
|
|
13
|
+
browserManifest.metaData.ssrRemoteEntry = ssrRemoteEntry;
|
|
14
|
+
return browserManifest;
|
|
15
|
+
}
|
|
16
|
+
function mergeStatsAndManifest(nodePlugin, browserPlugin) {
|
|
17
|
+
const nodeResourceInfo = nodePlugin.statsResourceInfo;
|
|
18
|
+
const browserResourceInfo = browserPlugin.statsResourceInfo;
|
|
19
|
+
if (!browserResourceInfo || !nodeResourceInfo || !browserResourceInfo.stats || !nodeResourceInfo.stats || !browserResourceInfo.manifest || !nodeResourceInfo.manifest) {
|
|
20
|
+
throw new Error("can not get browserResourceInfo or nodeResourceInfo");
|
|
21
|
+
}
|
|
22
|
+
const mergedStats = mergeStats(browserResourceInfo.stats.stats, nodeResourceInfo.stats.stats);
|
|
23
|
+
const mergedManifest = mergeManifest(browserResourceInfo.manifest.manifest, nodeResourceInfo.manifest.manifest);
|
|
24
|
+
return {
|
|
25
|
+
mergedStats,
|
|
26
|
+
mergedStatsFilePath: browserResourceInfo.stats.filename,
|
|
27
|
+
mergedManifest,
|
|
28
|
+
mergedManifestFilePath: browserResourceInfo.manifest.filename
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function updateStatsAndManifest(nodePlugin, browserPlugin, outputDir) {
|
|
32
|
+
const { mergedStats, mergedStatsFilePath, mergedManifest, mergedManifestFilePath } = mergeStatsAndManifest(nodePlugin, browserPlugin);
|
|
33
|
+
fs.writeFileSync(path.resolve(outputDir, mergedStatsFilePath), JSON.stringify(mergedStats, null, 2));
|
|
34
|
+
fs.writeFileSync(path.resolve(outputDir, mergedManifestFilePath), JSON.stringify(mergedManifest, null, 2));
|
|
35
|
+
}
|
|
36
|
+
export {
|
|
37
|
+
updateStatsAndManifest
|
|
38
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const sharedStrategy = () => ({
|
|
2
|
+
name: "shared-strategy",
|
|
3
|
+
beforeInit(args) {
|
|
4
|
+
const { shareInfo } = args;
|
|
5
|
+
if (shareInfo) {
|
|
6
|
+
Object.keys(shareInfo || {}).forEach((sharedKey) => {
|
|
7
|
+
const sharedConfigs = shareInfo[sharedKey];
|
|
8
|
+
const arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
9
|
+
sharedConfigs
|
|
10
|
+
];
|
|
11
|
+
arraySharedConfigs.forEach((s) => {
|
|
12
|
+
s.strategy = "loaded-first";
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return args;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
var shared_strategy_default = sharedStrategy;
|
|
20
|
+
export {
|
|
21
|
+
shared_strategy_default as default
|
|
22
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import path from "path";
|
|
2
|
+
import { bundle } from "@modern-js/node-bundle-require";
|
|
3
|
+
const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
|
|
4
|
+
const getMFConfig = async (userConfig) => {
|
|
5
|
+
const { config, configPath } = userConfig;
|
|
6
|
+
if (config) {
|
|
7
|
+
return config;
|
|
8
|
+
}
|
|
9
|
+
const mfConfigPath = configPath ? configPath : defaultPath;
|
|
10
|
+
const preBundlePath = await bundle(mfConfigPath);
|
|
11
|
+
const mfConfig = (await import(preBundlePath)).default;
|
|
12
|
+
return mfConfig;
|
|
13
|
+
};
|
|
14
|
+
const patchMFConfig = (mfConfig) => {
|
|
15
|
+
mfConfig.runtimePlugins = mfConfig.runtimePlugins || [];
|
|
16
|
+
const runtimePluginPath = path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js");
|
|
17
|
+
if (!mfConfig.runtimePlugins.includes(runtimePluginPath)) {
|
|
18
|
+
mfConfig.runtimePlugins.push(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"));
|
|
19
|
+
}
|
|
20
|
+
if (typeof mfConfig.async === "undefined") {
|
|
21
|
+
mfConfig.async = true;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
export {
|
|
25
|
+
getMFConfig,
|
|
26
|
+
patchMFConfig
|
|
27
|
+
};
|