@module-federation/modern-js 0.0.0-next-20240521125425 → 0.0.0-next-20240523121007
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/cli/index.js +13 -3
- package/dist/cjs/cli/utils.js +20 -1
- package/dist/cjs/runtime/MFReactComponent.js +24 -15
- package/dist/cjs/ssr-runtime/plugin.js +33 -16
- package/dist/esm/cli/index.js +14 -3
- package/dist/esm/cli/utils.js +17 -1
- package/dist/esm/runtime/MFReactComponent.js +23 -12
- package/dist/esm/ssr-runtime/plugin.js +73 -39
- package/dist/esm-node/cli/index.js +13 -3
- package/dist/esm-node/cli/utils.js +20 -1
- package/dist/esm-node/runtime/MFReactComponent.js +24 -15
- package/dist/esm-node/ssr-runtime/plugin.js +33 -16
- package/dist/types/cli/utils.d.ts +24 -4
- package/dist/types/ssr-runtime/plugin.d.ts +3 -1
- package/package.json +6 -5
package/dist/cjs/cli/index.js
CHANGED
|
@@ -120,9 +120,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
120
120
|
return;
|
|
121
121
|
}
|
|
122
122
|
try {
|
|
123
|
-
var _req_url, _req_url1;
|
|
123
|
+
var _req_url, _req_url1, _req_url2;
|
|
124
124
|
const SERVER_PREFIX = `/${import_constant.MODERN_JS_SERVER_DIR}`;
|
|
125
|
-
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(".json"))) {
|
|
125
|
+
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(".json")) && !((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes("hot-update"))) {
|
|
126
126
|
const filepath = import_path.default.join(process.cwd(), `dist${req.url}`);
|
|
127
127
|
import_utils.fs.statSync(filepath);
|
|
128
128
|
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
@@ -138,6 +138,14 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
]
|
|
141
|
+
},
|
|
142
|
+
bundlerChain(chain, { isServer }) {
|
|
143
|
+
if (isDev && !isServer) {
|
|
144
|
+
chain.externals({
|
|
145
|
+
"@module-federation/node/utils": "NOT_USED_IN_BROWSER",
|
|
146
|
+
"@module-federation/dts-plugin/server": "NOT_USED_IN_BROWSER"
|
|
147
|
+
});
|
|
148
|
+
}
|
|
141
149
|
}
|
|
142
150
|
},
|
|
143
151
|
source: {
|
|
@@ -179,7 +187,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
179
187
|
}
|
|
180
188
|
plugins.unshift({
|
|
181
189
|
name: SSR_PLUGIN_IDENTIFIER,
|
|
182
|
-
options: JSON.stringify({
|
|
190
|
+
options: JSON.stringify({
|
|
191
|
+
name: mfConfig.name
|
|
192
|
+
})
|
|
183
193
|
});
|
|
184
194
|
return {
|
|
185
195
|
entrypoint,
|
package/dist/cjs/cli/utils.js
CHANGED
|
@@ -72,9 +72,28 @@ const patchMFConfig = (mfConfig, isServer) => {
|
|
|
72
72
|
if (typeof mfConfig.async === "undefined") {
|
|
73
73
|
mfConfig.async = true;
|
|
74
74
|
}
|
|
75
|
+
if (!isServer) {
|
|
76
|
+
return {
|
|
77
|
+
...mfConfig,
|
|
78
|
+
runtimePlugins,
|
|
79
|
+
dts: mfConfig.dts === false ? false : {
|
|
80
|
+
generateTypes: false,
|
|
81
|
+
consumeTypes: false,
|
|
82
|
+
...typeof mfConfig.dts === "object" ? mfConfig.dts : {}
|
|
83
|
+
},
|
|
84
|
+
dev: mfConfig.dev === false ? false : {
|
|
85
|
+
disableHotTypesReload: true,
|
|
86
|
+
disableLiveReload: false,
|
|
87
|
+
injectWebClient: true,
|
|
88
|
+
...typeof mfConfig.dev === "object" ? mfConfig.dev : {}
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
}
|
|
75
92
|
return {
|
|
76
93
|
...mfConfig,
|
|
77
|
-
runtimePlugins
|
|
94
|
+
runtimePlugins,
|
|
95
|
+
dts: false,
|
|
96
|
+
dev: false
|
|
78
97
|
};
|
|
79
98
|
};
|
|
80
99
|
function getTargetEnvConfig(mfConfig, isServer) {
|
|
@@ -36,18 +36,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_runtime = require("@module-federation/enhanced/runtime");
|
|
38
38
|
function getLoadedRemoteInfos(instance, id) {
|
|
39
|
-
const
|
|
40
|
-
if (!
|
|
39
|
+
const { name, expose } = instance.remoteHandler.idToRemoteMap[id];
|
|
40
|
+
if (!name) {
|
|
41
41
|
return;
|
|
42
42
|
}
|
|
43
|
-
const module2 = instance.moduleCache.get(
|
|
43
|
+
const module2 = instance.moduleCache.get(name);
|
|
44
44
|
if (!module2) {
|
|
45
45
|
return;
|
|
46
46
|
}
|
|
47
47
|
const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(module2.remoteInfo);
|
|
48
48
|
return {
|
|
49
49
|
...module2.remoteInfo,
|
|
50
|
-
snapshot: remoteSnapshot
|
|
50
|
+
snapshot: remoteSnapshot,
|
|
51
|
+
expose
|
|
51
52
|
};
|
|
52
53
|
}
|
|
53
54
|
function collectLinks(id) {
|
|
@@ -68,19 +69,27 @@ function collectLinks(id) {
|
|
|
68
69
|
if (!publicPath) {
|
|
69
70
|
return links;
|
|
70
71
|
}
|
|
72
|
+
const addProtocol = (url) => {
|
|
73
|
+
if (url.startsWith("//")) {
|
|
74
|
+
return `https:${url}`;
|
|
75
|
+
}
|
|
76
|
+
return url;
|
|
77
|
+
};
|
|
71
78
|
const modules = "modules" in snapshot ? snapshot.modules : [];
|
|
72
79
|
if (modules) {
|
|
73
|
-
modules.
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
|
|
81
|
+
if (!targetModule) {
|
|
82
|
+
return links;
|
|
83
|
+
}
|
|
84
|
+
[
|
|
85
|
+
...targetModule.assets.css.sync,
|
|
86
|
+
...targetModule.assets.css.async
|
|
87
|
+
].forEach((file, index) => {
|
|
88
|
+
links.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", {
|
|
89
|
+
href: `${addProtocol(publicPath)}${file}`,
|
|
90
|
+
rel: "stylesheet",
|
|
91
|
+
type: "text/css"
|
|
92
|
+
}, index));
|
|
84
93
|
});
|
|
85
94
|
}
|
|
86
95
|
return links;
|
|
@@ -31,27 +31,44 @@ __export(plugin_exports, {
|
|
|
31
31
|
mfPluginSSR: () => mfPluginSSR
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(plugin_exports);
|
|
34
|
-
const mfPluginSSR = () => ({
|
|
34
|
+
const mfPluginSSR = ({ name }) => ({
|
|
35
35
|
name: "@module-federation/modern-js",
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
setup: () => {
|
|
37
|
+
let mfDevServer;
|
|
38
|
+
return {
|
|
39
|
+
async init({ context }, next) {
|
|
40
|
+
if (typeof window !== "undefined") {
|
|
41
|
+
return next({
|
|
42
|
+
context
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
const devServer = await Promise.resolve().then(() => __toESM(require("@module-federation/dts-plugin/server")));
|
|
46
|
+
if (name) {
|
|
47
|
+
mfDevServer = new devServer.ModuleFederationDevServer({
|
|
48
|
+
name: `${name}-server`,
|
|
49
|
+
remotes: [],
|
|
50
|
+
updateCallback: async () => {
|
|
51
|
+
},
|
|
52
|
+
remoteTypeTarPath: ""
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
const nodeUtils = await Promise.resolve().then(() => __toESM(require("@module-federation/node/utils")));
|
|
56
|
+
const shouldUpdate = await nodeUtils.revalidate();
|
|
57
|
+
if (shouldUpdate) {
|
|
58
|
+
console.log("should RELOAD", shouldUpdate);
|
|
59
|
+
await nodeUtils.flushChunks();
|
|
60
|
+
mfDevServer && mfDevServer.update({
|
|
61
|
+
updateKind: devServer.UpdateKind.RELOAD_PAGE,
|
|
62
|
+
updateMode: devServer.UpdateMode.POSITIVE,
|
|
63
|
+
clientName: name
|
|
64
|
+
});
|
|
65
|
+
}
|
|
41
66
|
return next({
|
|
42
67
|
context
|
|
43
68
|
});
|
|
44
69
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (shouldUpdate) {
|
|
48
|
-
console.log("should HMR", shouldUpdate);
|
|
49
|
-
}
|
|
50
|
-
return next({
|
|
51
|
-
context
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
})
|
|
70
|
+
};
|
|
71
|
+
}
|
|
55
72
|
});
|
|
56
73
|
// Annotate the CommonJS export names for ESM import in node:
|
|
57
74
|
0 && (module.exports = {
|
package/dist/esm/cli/index.js
CHANGED
|
@@ -103,9 +103,9 @@ var moduleFederationPlugin = function() {
|
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
105
|
try {
|
|
106
|
-
var _req_url, _req_url1;
|
|
106
|
+
var _req_url, _req_url1, _req_url2;
|
|
107
107
|
var SERVER_PREFIX = "/".concat(MODERN_JS_SERVER_DIR);
|
|
108
|
-
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(".json"))) {
|
|
108
|
+
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(".json")) && !((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes("hot-update"))) {
|
|
109
109
|
var filepath = path.join(process.cwd(), "dist".concat(req.url));
|
|
110
110
|
fs.statSync(filepath);
|
|
111
111
|
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
@@ -121,6 +121,15 @@ var moduleFederationPlugin = function() {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
]
|
|
124
|
+
},
|
|
125
|
+
bundlerChain: function bundlerChain(chain, param2) {
|
|
126
|
+
var isServer = param2.isServer;
|
|
127
|
+
if (isDev && !isServer) {
|
|
128
|
+
chain.externals({
|
|
129
|
+
"@module-federation/node/utils": "NOT_USED_IN_BROWSER",
|
|
130
|
+
"@module-federation/dts-plugin/server": "NOT_USED_IN_BROWSER"
|
|
131
|
+
});
|
|
132
|
+
}
|
|
124
133
|
}
|
|
125
134
|
},
|
|
126
135
|
source: {
|
|
@@ -164,7 +173,9 @@ var moduleFederationPlugin = function() {
|
|
|
164
173
|
}
|
|
165
174
|
plugins.unshift({
|
|
166
175
|
name: SSR_PLUGIN_IDENTIFIER,
|
|
167
|
-
options: JSON.stringify({
|
|
176
|
+
options: JSON.stringify({
|
|
177
|
+
name: mfConfig.name
|
|
178
|
+
})
|
|
168
179
|
});
|
|
169
180
|
return {
|
|
170
181
|
entrypoint,
|
package/dist/esm/cli/utils.js
CHANGED
|
@@ -66,8 +66,24 @@ var patchMFConfig = function(mfConfig, isServer) {
|
|
|
66
66
|
if (typeof mfConfig.async === "undefined") {
|
|
67
67
|
mfConfig.async = true;
|
|
68
68
|
}
|
|
69
|
+
if (!isServer) {
|
|
70
|
+
return _object_spread_props(_object_spread({}, mfConfig), {
|
|
71
|
+
runtimePlugins,
|
|
72
|
+
dts: mfConfig.dts === false ? false : _object_spread({
|
|
73
|
+
generateTypes: false,
|
|
74
|
+
consumeTypes: false
|
|
75
|
+
}, typeof mfConfig.dts === "object" ? mfConfig.dts : {}),
|
|
76
|
+
dev: mfConfig.dev === false ? false : _object_spread({
|
|
77
|
+
disableHotTypesReload: true,
|
|
78
|
+
disableLiveReload: false,
|
|
79
|
+
injectWebClient: true
|
|
80
|
+
}, typeof mfConfig.dev === "object" ? mfConfig.dev : {})
|
|
81
|
+
});
|
|
82
|
+
}
|
|
69
83
|
return _object_spread_props(_object_spread({}, mfConfig), {
|
|
70
|
-
runtimePlugins
|
|
84
|
+
runtimePlugins,
|
|
85
|
+
dts: false,
|
|
86
|
+
dev: false
|
|
71
87
|
});
|
|
72
88
|
};
|
|
73
89
|
function getTargetEnvConfig(mfConfig, isServer) {
|
|
@@ -5,17 +5,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
import React from "react";
|
|
6
6
|
import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
|
|
7
7
|
function getLoadedRemoteInfos(instance, id) {
|
|
8
|
-
var
|
|
9
|
-
if (!
|
|
8
|
+
var _instance_remoteHandler_idToRemoteMap_id = instance.remoteHandler.idToRemoteMap[id], name = _instance_remoteHandler_idToRemoteMap_id.name, expose = _instance_remoteHandler_idToRemoteMap_id.expose;
|
|
9
|
+
if (!name) {
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
|
-
var module = instance.moduleCache.get(
|
|
12
|
+
var module = instance.moduleCache.get(name);
|
|
13
13
|
if (!module) {
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
16
|
var remoteSnapshot = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo).remoteSnapshot;
|
|
17
17
|
return _object_spread_props(_object_spread({}, module.remoteInfo), {
|
|
18
|
-
snapshot: remoteSnapshot
|
|
18
|
+
snapshot: remoteSnapshot,
|
|
19
|
+
expose
|
|
19
20
|
});
|
|
20
21
|
}
|
|
21
22
|
function collectLinks(id) {
|
|
@@ -36,16 +37,26 @@ function collectLinks(id) {
|
|
|
36
37
|
if (!publicPath) {
|
|
37
38
|
return links;
|
|
38
39
|
}
|
|
40
|
+
var addProtocol = function(url) {
|
|
41
|
+
if (url.startsWith("//")) {
|
|
42
|
+
return "https:".concat(url);
|
|
43
|
+
}
|
|
44
|
+
return url;
|
|
45
|
+
};
|
|
39
46
|
var modules = "modules" in snapshot ? snapshot.modules : [];
|
|
40
47
|
if (modules) {
|
|
41
|
-
modules.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
var targetModule = modules.find(function(m) {
|
|
49
|
+
return m.modulePath === loadedRemoteInfo.expose;
|
|
50
|
+
});
|
|
51
|
+
if (!targetModule) {
|
|
52
|
+
return links;
|
|
53
|
+
}
|
|
54
|
+
_to_consumable_array(targetModule.assets.css.sync).concat(_to_consumable_array(targetModule.assets.css.async)).forEach(function(file, index) {
|
|
55
|
+
links.push(/* @__PURE__ */ _jsx("link", {
|
|
56
|
+
href: "".concat(addProtocol(publicPath)).concat(file),
|
|
57
|
+
rel: "stylesheet",
|
|
58
|
+
type: "text/css"
|
|
59
|
+
}, index));
|
|
49
60
|
});
|
|
50
61
|
}
|
|
51
62
|
return links;
|
|
@@ -1,54 +1,88 @@
|
|
|
1
1
|
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
2
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
3
|
-
var mfPluginSSR = function() {
|
|
3
|
+
var mfPluginSSR = function(param) {
|
|
4
|
+
var name = param.name;
|
|
4
5
|
return {
|
|
5
6
|
name: "@module-federation/modern-js",
|
|
6
|
-
// eslint-disable-next-line max-lines-per-function
|
|
7
7
|
setup: function() {
|
|
8
|
+
var mfDevServer;
|
|
8
9
|
return {
|
|
9
|
-
init: (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
case 0:
|
|
18
|
-
if (typeof window !== "undefined") {
|
|
19
|
-
return [
|
|
20
|
-
2,
|
|
21
|
-
next({
|
|
22
|
-
context
|
|
23
|
-
})
|
|
24
|
-
];
|
|
25
|
-
}
|
|
26
|
-
return [
|
|
27
|
-
4,
|
|
28
|
-
import("@module-federation/node/utils")
|
|
29
|
-
];
|
|
30
|
-
case 1:
|
|
31
|
-
nodeUtils = _state.sent();
|
|
32
|
-
return [
|
|
33
|
-
4,
|
|
34
|
-
nodeUtils.revalidate()
|
|
35
|
-
];
|
|
36
|
-
case 2:
|
|
37
|
-
shouldUpdate = _state.sent();
|
|
38
|
-
if (shouldUpdate) {
|
|
39
|
-
console.log("should HMR", shouldUpdate);
|
|
40
|
-
}
|
|
10
|
+
init: function init(param2, next) {
|
|
11
|
+
var context = param2.context;
|
|
12
|
+
return _async_to_generator(function() {
|
|
13
|
+
var devServer, nodeUtils, shouldUpdate;
|
|
14
|
+
return _ts_generator(this, function(_state) {
|
|
15
|
+
switch (_state.label) {
|
|
16
|
+
case 0:
|
|
17
|
+
if (typeof window !== "undefined") {
|
|
41
18
|
return [
|
|
42
19
|
2,
|
|
43
20
|
next({
|
|
44
21
|
context
|
|
45
22
|
})
|
|
46
23
|
];
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
24
|
+
}
|
|
25
|
+
return [
|
|
26
|
+
4,
|
|
27
|
+
import("@module-federation/dts-plugin/server")
|
|
28
|
+
];
|
|
29
|
+
case 1:
|
|
30
|
+
devServer = _state.sent();
|
|
31
|
+
if (name) {
|
|
32
|
+
mfDevServer = new devServer.ModuleFederationDevServer({
|
|
33
|
+
name: "".concat(name, "-server"),
|
|
34
|
+
remotes: [],
|
|
35
|
+
updateCallback: /* @__PURE__ */ _async_to_generator(function() {
|
|
36
|
+
return _ts_generator(this, function(_state2) {
|
|
37
|
+
return [
|
|
38
|
+
2
|
|
39
|
+
];
|
|
40
|
+
});
|
|
41
|
+
}),
|
|
42
|
+
remoteTypeTarPath: ""
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
return [
|
|
46
|
+
4,
|
|
47
|
+
import("@module-federation/node/utils")
|
|
48
|
+
];
|
|
49
|
+
case 2:
|
|
50
|
+
nodeUtils = _state.sent();
|
|
51
|
+
return [
|
|
52
|
+
4,
|
|
53
|
+
nodeUtils.revalidate()
|
|
54
|
+
];
|
|
55
|
+
case 3:
|
|
56
|
+
shouldUpdate = _state.sent();
|
|
57
|
+
if (!shouldUpdate)
|
|
58
|
+
return [
|
|
59
|
+
3,
|
|
60
|
+
5
|
|
61
|
+
];
|
|
62
|
+
console.log("should RELOAD", shouldUpdate);
|
|
63
|
+
return [
|
|
64
|
+
4,
|
|
65
|
+
nodeUtils.flushChunks()
|
|
66
|
+
];
|
|
67
|
+
case 4:
|
|
68
|
+
_state.sent();
|
|
69
|
+
mfDevServer && mfDevServer.update({
|
|
70
|
+
updateKind: devServer.UpdateKind.RELOAD_PAGE,
|
|
71
|
+
updateMode: devServer.UpdateMode.POSITIVE,
|
|
72
|
+
clientName: name
|
|
73
|
+
});
|
|
74
|
+
_state.label = 5;
|
|
75
|
+
case 5:
|
|
76
|
+
return [
|
|
77
|
+
2,
|
|
78
|
+
next({
|
|
79
|
+
context
|
|
80
|
+
})
|
|
81
|
+
];
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
})();
|
|
85
|
+
}
|
|
52
86
|
};
|
|
53
87
|
}
|
|
54
88
|
};
|
|
@@ -84,9 +84,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
84
84
|
return;
|
|
85
85
|
}
|
|
86
86
|
try {
|
|
87
|
-
var _req_url, _req_url1;
|
|
87
|
+
var _req_url, _req_url1, _req_url2;
|
|
88
88
|
const SERVER_PREFIX = `/${MODERN_JS_SERVER_DIR}`;
|
|
89
|
-
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(".json"))) {
|
|
89
|
+
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(".json")) && !((_req_url2 = req.url) === null || _req_url2 === void 0 ? void 0 : _req_url2.includes("hot-update"))) {
|
|
90
90
|
const filepath = path.join(process.cwd(), `dist${req.url}`);
|
|
91
91
|
fs.statSync(filepath);
|
|
92
92
|
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
@@ -102,6 +102,14 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
]
|
|
105
|
+
},
|
|
106
|
+
bundlerChain(chain, { isServer }) {
|
|
107
|
+
if (isDev && !isServer) {
|
|
108
|
+
chain.externals({
|
|
109
|
+
"@module-federation/node/utils": "NOT_USED_IN_BROWSER",
|
|
110
|
+
"@module-federation/dts-plugin/server": "NOT_USED_IN_BROWSER"
|
|
111
|
+
});
|
|
112
|
+
}
|
|
105
113
|
}
|
|
106
114
|
},
|
|
107
115
|
source: {
|
|
@@ -143,7 +151,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
143
151
|
}
|
|
144
152
|
plugins.unshift({
|
|
145
153
|
name: SSR_PLUGIN_IDENTIFIER,
|
|
146
|
-
options: JSON.stringify({
|
|
154
|
+
options: JSON.stringify({
|
|
155
|
+
name: mfConfig.name
|
|
156
|
+
})
|
|
147
157
|
});
|
|
148
158
|
return {
|
|
149
159
|
entrypoint,
|
|
@@ -36,9 +36,28 @@ const patchMFConfig = (mfConfig, isServer) => {
|
|
|
36
36
|
if (typeof mfConfig.async === "undefined") {
|
|
37
37
|
mfConfig.async = true;
|
|
38
38
|
}
|
|
39
|
+
if (!isServer) {
|
|
40
|
+
return {
|
|
41
|
+
...mfConfig,
|
|
42
|
+
runtimePlugins,
|
|
43
|
+
dts: mfConfig.dts === false ? false : {
|
|
44
|
+
generateTypes: false,
|
|
45
|
+
consumeTypes: false,
|
|
46
|
+
...typeof mfConfig.dts === "object" ? mfConfig.dts : {}
|
|
47
|
+
},
|
|
48
|
+
dev: mfConfig.dev === false ? false : {
|
|
49
|
+
disableHotTypesReload: true,
|
|
50
|
+
disableLiveReload: false,
|
|
51
|
+
injectWebClient: true,
|
|
52
|
+
...typeof mfConfig.dev === "object" ? mfConfig.dev : {}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
39
56
|
return {
|
|
40
57
|
...mfConfig,
|
|
41
|
-
runtimePlugins
|
|
58
|
+
runtimePlugins,
|
|
59
|
+
dts: false,
|
|
60
|
+
dev: false
|
|
42
61
|
};
|
|
43
62
|
};
|
|
44
63
|
function getTargetEnvConfig(mfConfig, isServer) {
|
|
@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
|
|
4
4
|
function getLoadedRemoteInfos(instance, id) {
|
|
5
|
-
const
|
|
6
|
-
if (!
|
|
5
|
+
const { name, expose } = instance.remoteHandler.idToRemoteMap[id];
|
|
6
|
+
if (!name) {
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
|
-
const module = instance.moduleCache.get(
|
|
9
|
+
const module = instance.moduleCache.get(name);
|
|
10
10
|
if (!module) {
|
|
11
11
|
return;
|
|
12
12
|
}
|
|
13
13
|
const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo);
|
|
14
14
|
return {
|
|
15
15
|
...module.remoteInfo,
|
|
16
|
-
snapshot: remoteSnapshot
|
|
16
|
+
snapshot: remoteSnapshot,
|
|
17
|
+
expose
|
|
17
18
|
};
|
|
18
19
|
}
|
|
19
20
|
function collectLinks(id) {
|
|
@@ -34,19 +35,27 @@ function collectLinks(id) {
|
|
|
34
35
|
if (!publicPath) {
|
|
35
36
|
return links;
|
|
36
37
|
}
|
|
38
|
+
const addProtocol = (url) => {
|
|
39
|
+
if (url.startsWith("//")) {
|
|
40
|
+
return `https:${url}`;
|
|
41
|
+
}
|
|
42
|
+
return url;
|
|
43
|
+
};
|
|
37
44
|
const modules = "modules" in snapshot ? snapshot.modules : [];
|
|
38
45
|
if (modules) {
|
|
39
|
-
modules.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
|
|
47
|
+
if (!targetModule) {
|
|
48
|
+
return links;
|
|
49
|
+
}
|
|
50
|
+
[
|
|
51
|
+
...targetModule.assets.css.sync,
|
|
52
|
+
...targetModule.assets.css.async
|
|
53
|
+
].forEach((file, index) => {
|
|
54
|
+
links.push(/* @__PURE__ */ _jsx("link", {
|
|
55
|
+
href: `${addProtocol(publicPath)}${file}`,
|
|
56
|
+
rel: "stylesheet",
|
|
57
|
+
type: "text/css"
|
|
58
|
+
}, index));
|
|
50
59
|
});
|
|
51
60
|
}
|
|
52
61
|
return links;
|
|
@@ -1,24 +1,41 @@
|
|
|
1
|
-
const mfPluginSSR = () => ({
|
|
1
|
+
const mfPluginSSR = ({ name }) => ({
|
|
2
2
|
name: "@module-federation/modern-js",
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
setup: () => {
|
|
4
|
+
let mfDevServer;
|
|
5
|
+
return {
|
|
6
|
+
async init({ context }, next) {
|
|
7
|
+
if (typeof window !== "undefined") {
|
|
8
|
+
return next({
|
|
9
|
+
context
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
const devServer = await import("@module-federation/dts-plugin/server");
|
|
13
|
+
if (name) {
|
|
14
|
+
mfDevServer = new devServer.ModuleFederationDevServer({
|
|
15
|
+
name: `${name}-server`,
|
|
16
|
+
remotes: [],
|
|
17
|
+
updateCallback: async () => {
|
|
18
|
+
},
|
|
19
|
+
remoteTypeTarPath: ""
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
const nodeUtils = await import("@module-federation/node/utils");
|
|
23
|
+
const shouldUpdate = await nodeUtils.revalidate();
|
|
24
|
+
if (shouldUpdate) {
|
|
25
|
+
console.log("should RELOAD", shouldUpdate);
|
|
26
|
+
await nodeUtils.flushChunks();
|
|
27
|
+
mfDevServer && mfDevServer.update({
|
|
28
|
+
updateKind: devServer.UpdateKind.RELOAD_PAGE,
|
|
29
|
+
updateMode: devServer.UpdateMode.POSITIVE,
|
|
30
|
+
clientName: name
|
|
31
|
+
});
|
|
32
|
+
}
|
|
8
33
|
return next({
|
|
9
34
|
context
|
|
10
35
|
});
|
|
11
36
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if (shouldUpdate) {
|
|
15
|
-
console.log("should HMR", shouldUpdate);
|
|
16
|
-
}
|
|
17
|
-
return next({
|
|
18
|
-
context
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
})
|
|
37
|
+
};
|
|
38
|
+
}
|
|
22
39
|
});
|
|
23
40
|
export {
|
|
24
41
|
mfPluginSSR
|
|
@@ -5,6 +5,18 @@ export type ConfigType<T> = T extends 'webpack' ? webpack.Configuration : T exte
|
|
|
5
5
|
export declare const getMFConfig: (userConfig: PluginOptions) => Promise<moduleFederationPlugin.ModuleFederationPluginOptions>;
|
|
6
6
|
export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions, isServer: boolean) => {
|
|
7
7
|
runtimePlugins: string[];
|
|
8
|
+
dts: boolean | {
|
|
9
|
+
generateTypes: boolean | moduleFederationPlugin.DtsRemoteOptions;
|
|
10
|
+
consumeTypes: boolean | moduleFederationPlugin.DtsHostOptions;
|
|
11
|
+
tsConfigPath?: string | undefined;
|
|
12
|
+
extraOptions?: Record<string, any> | undefined;
|
|
13
|
+
implementation?: string | undefined;
|
|
14
|
+
};
|
|
15
|
+
dev: boolean | {
|
|
16
|
+
disableLiveReload: boolean;
|
|
17
|
+
disableHotTypesReload: boolean;
|
|
18
|
+
injectWebClient: boolean;
|
|
19
|
+
};
|
|
8
20
|
exposes?: moduleFederationPlugin.Exposes | undefined;
|
|
9
21
|
filename?: string | undefined;
|
|
10
22
|
library?: moduleFederationPlugin.LibraryOptions | undefined;
|
|
@@ -16,12 +28,22 @@ export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFede
|
|
|
16
28
|
shared?: moduleFederationPlugin.Shared | undefined;
|
|
17
29
|
implementation?: string | undefined;
|
|
18
30
|
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
|
|
19
|
-
dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
|
|
20
|
-
dts?: boolean | moduleFederationPlugin.PluginDtsOptions | undefined;
|
|
21
31
|
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions | undefined;
|
|
22
32
|
};
|
|
23
33
|
export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions, isServer: boolean): {
|
|
24
34
|
runtimePlugins: string[];
|
|
35
|
+
dts: boolean | {
|
|
36
|
+
generateTypes: boolean | moduleFederationPlugin.DtsRemoteOptions;
|
|
37
|
+
consumeTypes: boolean | moduleFederationPlugin.DtsHostOptions;
|
|
38
|
+
tsConfigPath?: string | undefined;
|
|
39
|
+
extraOptions?: Record<string, any> | undefined;
|
|
40
|
+
implementation?: string | undefined;
|
|
41
|
+
};
|
|
42
|
+
dev: boolean | {
|
|
43
|
+
disableLiveReload: boolean;
|
|
44
|
+
disableHotTypesReload: boolean;
|
|
45
|
+
injectWebClient: boolean;
|
|
46
|
+
};
|
|
25
47
|
exposes?: moduleFederationPlugin.Exposes | undefined;
|
|
26
48
|
filename?: string | undefined;
|
|
27
49
|
library?: moduleFederationPlugin.LibraryOptions | undefined;
|
|
@@ -33,8 +55,6 @@ export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.Modu
|
|
|
33
55
|
shared?: moduleFederationPlugin.Shared | undefined;
|
|
34
56
|
implementation?: string | undefined;
|
|
35
57
|
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
|
|
36
|
-
dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
|
|
37
|
-
dts?: boolean | moduleFederationPlugin.PluginDtsOptions | undefined;
|
|
38
58
|
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions | undefined;
|
|
39
59
|
};
|
|
40
60
|
export declare function patchWebpackConfig<T>(options: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@module-federation/modern-js",
|
|
3
|
-
"version": "0.0.0-next-
|
|
3
|
+
"version": "0.0.0-next-20240523121007",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist/",
|
|
6
6
|
"types.d.ts",
|
|
@@ -46,9 +46,10 @@
|
|
|
46
46
|
"@modern-js/utils": "^2.49.2",
|
|
47
47
|
"@modern-js/node-bundle-require": "^2.49.2",
|
|
48
48
|
"node-fetch": "~3.3.0",
|
|
49
|
-
"@module-federation/sdk": "0.0.0-next-
|
|
50
|
-
"@module-federation/enhanced": "0.0.0-next-
|
|
51
|
-
"@module-federation/node": "0.0.0-next-
|
|
49
|
+
"@module-federation/sdk": "0.0.0-next-20240523121007",
|
|
50
|
+
"@module-federation/enhanced": "0.0.0-next-20240523121007",
|
|
51
|
+
"@module-federation/node": "0.0.0-next-20240523121007",
|
|
52
|
+
"@module-federation/dts-plugin": "0.0.0-next-20240523121007"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@modern-js/app-tools": "^2.49.2",
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"@modern-js/runtime": "^2.49.2",
|
|
57
58
|
"@modern-js/module-tools": "^2.35.0",
|
|
58
59
|
"@modern-js/tsconfig": "^2.35.0",
|
|
59
|
-
"@module-federation/manifest": "0.0.0-next-
|
|
60
|
+
"@module-federation/manifest": "0.0.0-next-20240523121007"
|
|
60
61
|
},
|
|
61
62
|
"peerDependencies": {
|
|
62
63
|
"react": ">=17",
|