@module-federation/modern-js 0.0.0-next-20240605083609 → 0.0.0-next-20240620090145
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 +10 -7
- package/dist/cjs/cli/mfRuntimePlugins/resolve-entry-ipv4.js +60 -0
- package/dist/cjs/cli/mfRuntimePlugins/shared-strategy.js +5 -4
- package/dist/cjs/cli/utils.js +101 -24
- package/dist/cjs/constant.js +3 -0
- package/dist/cjs/runtime/LiveReload.js +43 -0
- package/dist/cjs/runtime/MFReactComponent.js +6 -2
- package/dist/cjs/runtime/index.js +3 -0
- package/dist/cjs/ssr-runtime/plugin.js +3 -17
- package/dist/esm/cli/index.js +123 -107
- package/dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js +54 -0
- package/dist/esm/cli/mfRuntimePlugins/shared-strategy.js +5 -4
- package/dist/esm/cli/utils.js +174 -22
- package/dist/esm/constant.js +2 -0
- package/dist/esm/runtime/LiveReload.js +26 -0
- package/dist/esm/runtime/MFReactComponent.js +6 -2
- package/dist/esm/runtime/index.js +2 -0
- package/dist/esm/ssr-runtime/plugin.js +12 -37
- package/dist/esm-node/cli/index.js +11 -8
- package/dist/esm-node/cli/mfRuntimePlugins/resolve-entry-ipv4.js +40 -0
- package/dist/esm-node/cli/mfRuntimePlugins/shared-strategy.js +5 -4
- package/dist/esm-node/cli/utils.js +100 -24
- package/dist/esm-node/constant.js +2 -0
- package/dist/esm-node/runtime/LiveReload.js +19 -0
- package/dist/esm-node/runtime/MFReactComponent.js +6 -2
- package/dist/esm-node/runtime/index.js +2 -0
- package/dist/esm-node/ssr-runtime/plugin.js +3 -17
- package/dist/types/cli/mfRuntimePlugins/resolve-entry-ipv4.d.ts +3 -0
- package/dist/types/cli/utils.d.ts +5 -24
- package/dist/types/constant.d.ts +1 -0
- package/dist/types/runtime/LiveReload.d.ts +2 -0
- package/dist/types/runtime/MFReactComponent.d.ts +4 -3
- package/dist/types/runtime/index.d.ts +1 -0
- package/dist/types/ssr-runtime/plugin.d.ts +1 -3
- package/package.json +5 -6
|
@@ -1,16 +1,14 @@
|
|
|
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(
|
|
4
|
-
var name = param.name;
|
|
3
|
+
var mfPluginSSR = function() {
|
|
5
4
|
return {
|
|
6
5
|
name: "@module-federation/modern-js",
|
|
7
6
|
setup: function() {
|
|
8
|
-
var mfDevServer;
|
|
9
7
|
return {
|
|
10
|
-
init: function init(
|
|
11
|
-
var context =
|
|
8
|
+
init: function init(param, next) {
|
|
9
|
+
var context = param.context;
|
|
12
10
|
return _async_to_generator(function() {
|
|
13
|
-
var
|
|
11
|
+
var nodeUtils, shouldUpdate;
|
|
14
12
|
return _ts_generator(this, function(_state) {
|
|
15
13
|
switch (_state.label) {
|
|
16
14
|
case 0:
|
|
@@ -22,57 +20,34 @@ var mfPluginSSR = function(param) {
|
|
|
22
20
|
})
|
|
23
21
|
];
|
|
24
22
|
}
|
|
25
|
-
|
|
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
|
-
}
|
|
23
|
+
globalThis.shouldUpdate = false;
|
|
45
24
|
return [
|
|
46
25
|
4,
|
|
47
26
|
import("@module-federation/node/utils")
|
|
48
27
|
];
|
|
49
|
-
case
|
|
28
|
+
case 1:
|
|
50
29
|
nodeUtils = _state.sent();
|
|
51
30
|
return [
|
|
52
31
|
4,
|
|
53
32
|
nodeUtils.revalidate()
|
|
54
33
|
];
|
|
55
|
-
case
|
|
34
|
+
case 2:
|
|
56
35
|
shouldUpdate = _state.sent();
|
|
57
36
|
if (!shouldUpdate)
|
|
58
37
|
return [
|
|
59
38
|
3,
|
|
60
|
-
|
|
39
|
+
4
|
|
61
40
|
];
|
|
62
41
|
console.log("should RELOAD", shouldUpdate);
|
|
63
42
|
return [
|
|
64
43
|
4,
|
|
65
44
|
nodeUtils.flushChunks()
|
|
66
45
|
];
|
|
67
|
-
case
|
|
46
|
+
case 3:
|
|
68
47
|
_state.sent();
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
clientName: name
|
|
73
|
-
});
|
|
74
|
-
_state.label = 5;
|
|
75
|
-
case 5:
|
|
48
|
+
globalThis.shouldUpdate = true;
|
|
49
|
+
_state.label = 4;
|
|
50
|
+
case 4:
|
|
76
51
|
return [
|
|
77
52
|
2,
|
|
78
53
|
next({
|
|
@@ -3,7 +3,7 @@ import { fs } from "@modern-js/utils";
|
|
|
3
3
|
import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
|
|
4
4
|
import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
|
|
5
5
|
import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
|
|
6
|
-
import { getMFConfig, getTargetEnvConfig, patchWebpackConfig } from "./utils";
|
|
6
|
+
import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, lookupIpv4 } from "./utils";
|
|
7
7
|
import { updateStatsAndManifest } from "./manifest";
|
|
8
8
|
import { MODERN_JS_SERVER_DIR } from "../constant";
|
|
9
9
|
const SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
|
|
@@ -19,7 +19,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
19
19
|
let browserPlugin;
|
|
20
20
|
let nodePlugin;
|
|
21
21
|
return {
|
|
22
|
-
config: () => {
|
|
22
|
+
config: async () => {
|
|
23
23
|
var _modernjsConfig_dev;
|
|
24
24
|
const bundlerType = useAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
|
|
25
25
|
const WebpackPluginConstructor = userConfig.webpackPluginImplementation || WebpackModuleFederationPlugin;
|
|
@@ -53,6 +53,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
53
53
|
mfConfig: envConfig
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
|
+
const ipv4 = await lookupIpv4();
|
|
56
57
|
return {
|
|
57
58
|
tools: {
|
|
58
59
|
rspack(config) {
|
|
@@ -97,7 +98,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
97
98
|
next();
|
|
98
99
|
}
|
|
99
100
|
} catch (err) {
|
|
100
|
-
|
|
101
|
+
if (process.env.FEDERATION_DEBUG) {
|
|
102
|
+
console.error(err);
|
|
103
|
+
}
|
|
101
104
|
next();
|
|
102
105
|
}
|
|
103
106
|
}
|
|
@@ -106,8 +109,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
106
109
|
bundlerChain(chain, { isServer }) {
|
|
107
110
|
if (isDev && !isServer) {
|
|
108
111
|
chain.externals({
|
|
109
|
-
"@module-federation/node/utils": "NOT_USED_IN_BROWSER"
|
|
110
|
-
"@module-federation/dts-plugin/server": "NOT_USED_IN_BROWSER"
|
|
112
|
+
"@module-federation/node/utils": "NOT_USED_IN_BROWSER"
|
|
111
113
|
});
|
|
112
114
|
}
|
|
113
115
|
}
|
|
@@ -115,6 +117,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
115
117
|
source: {
|
|
116
118
|
alias: {
|
|
117
119
|
"@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
|
|
120
|
+
},
|
|
121
|
+
define: {
|
|
122
|
+
FEDERATION_IPV4: JSON.stringify(ipv4)
|
|
118
123
|
}
|
|
119
124
|
},
|
|
120
125
|
dev: {
|
|
@@ -151,9 +156,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
|
|
|
151
156
|
}
|
|
152
157
|
plugins.unshift({
|
|
153
158
|
name: SSR_PLUGIN_IDENTIFIER,
|
|
154
|
-
options: JSON.stringify({
|
|
155
|
-
name: mfConfig.name
|
|
156
|
-
})
|
|
159
|
+
options: JSON.stringify({})
|
|
157
160
|
});
|
|
158
161
|
return {
|
|
159
162
|
entrypoint,
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { LOCALHOST } from "../../constant";
|
|
2
|
+
const ipv4 = typeof FEDERATION_IPV4 !== "undefined" ? FEDERATION_IPV4 : "127.0.0.1";
|
|
3
|
+
function replaceLocalhost(url) {
|
|
4
|
+
return url.replace(LOCALHOST, ipv4);
|
|
5
|
+
}
|
|
6
|
+
const resolveEntryIpv4Plugin = () => ({
|
|
7
|
+
name: "resolve-entry-ipv4",
|
|
8
|
+
beforeRegisterRemote(args) {
|
|
9
|
+
const { remote } = args;
|
|
10
|
+
if ("entry" in remote && remote.entry.includes(LOCALHOST)) {
|
|
11
|
+
remote.entry = replaceLocalhost(remote.entry);
|
|
12
|
+
}
|
|
13
|
+
return args;
|
|
14
|
+
},
|
|
15
|
+
// async fetch(manifestUrl) {
|
|
16
|
+
// const ipv4ManifestUrl = manifestUrl.replace(LOCALHOST, ipv4);
|
|
17
|
+
// return globalThis.fetch(ipv4ManifestUrl);
|
|
18
|
+
// },
|
|
19
|
+
async afterResolve(args) {
|
|
20
|
+
const { remoteInfo } = args;
|
|
21
|
+
if (remoteInfo.entry.includes(LOCALHOST)) {
|
|
22
|
+
remoteInfo.entry = replaceLocalhost(remoteInfo.entry);
|
|
23
|
+
}
|
|
24
|
+
return args;
|
|
25
|
+
},
|
|
26
|
+
loadRemoteSnapshot(args) {
|
|
27
|
+
const { remoteSnapshot } = args;
|
|
28
|
+
if ("publicPath" in remoteSnapshot && remoteSnapshot.publicPath.includes(LOCALHOST)) {
|
|
29
|
+
remoteSnapshot.publicPath = replaceLocalhost(remoteSnapshot.publicPath);
|
|
30
|
+
}
|
|
31
|
+
if ("getPublicPath" in remoteSnapshot && remoteSnapshot.getPublicPath.includes(LOCALHOST)) {
|
|
32
|
+
remoteSnapshot.getPublicPath = replaceLocalhost(remoteSnapshot.getPublicPath);
|
|
33
|
+
}
|
|
34
|
+
return args;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
var resolve_entry_ipv4_default = resolveEntryIpv4Plugin;
|
|
38
|
+
export {
|
|
39
|
+
resolve_entry_ipv4_default as default
|
|
40
|
+
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
const sharedStrategy = () => ({
|
|
2
2
|
name: "shared-strategy-plugin",
|
|
3
3
|
beforeInit(args) {
|
|
4
|
-
const {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const { userOptions } = args;
|
|
5
|
+
const shared = userOptions.shared;
|
|
6
|
+
if (shared) {
|
|
7
|
+
Object.keys(shared).forEach((sharedKey) => {
|
|
8
|
+
const sharedConfigs = shared[sharedKey];
|
|
8
9
|
const arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
9
10
|
sharedConfigs
|
|
10
11
|
];
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { encodeName } from "@module-federation/sdk";
|
|
2
2
|
import path from "path";
|
|
3
3
|
import { bundle } from "@modern-js/node-bundle-require";
|
|
4
|
+
import dns from "dns";
|
|
5
|
+
import { LOCALHOST } from "../constant";
|
|
4
6
|
const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
|
|
5
7
|
const getMFConfig = async (userConfig) => {
|
|
6
8
|
const { config, configPath } = userConfig;
|
|
@@ -10,28 +12,58 @@ const getMFConfig = async (userConfig) => {
|
|
|
10
12
|
const mfConfigPath = configPath ? configPath : defaultPath;
|
|
11
13
|
const preBundlePath = await bundle(mfConfigPath);
|
|
12
14
|
const mfConfig = (await import(preBundlePath)).default;
|
|
15
|
+
await replaceRemoteUrl(mfConfig);
|
|
13
16
|
return mfConfig;
|
|
14
17
|
};
|
|
18
|
+
const injectRuntimePlugins = (runtimePlugin, runtimePlugins) => {
|
|
19
|
+
if (!runtimePlugins.includes(runtimePlugin)) {
|
|
20
|
+
runtimePlugins.push(runtimePlugin);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const replaceRemoteUrl = async (mfConfig) => {
|
|
24
|
+
if (!mfConfig.remotes) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const ipv4 = await lookupIpv4();
|
|
28
|
+
const handleRemoteObject = (remoteObject) => {
|
|
29
|
+
Object.keys(remoteObject).forEach((remoteKey) => {
|
|
30
|
+
const remote = remoteObject[remoteKey];
|
|
31
|
+
if (Array.isArray(remote)) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (typeof remote === "string" && remote.includes(LOCALHOST)) {
|
|
35
|
+
remoteObject[remoteKey] = remote.replace(LOCALHOST, ipv4);
|
|
36
|
+
}
|
|
37
|
+
if (typeof remote === "object" && !Array.isArray(remote.external) && remote.external.includes(LOCALHOST)) {
|
|
38
|
+
remote.external = remote.external.replace(LOCALHOST, ipv4);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
if (Array.isArray(mfConfig.remotes)) {
|
|
43
|
+
mfConfig.remotes.forEach((remoteObject) => {
|
|
44
|
+
if (typeof remoteObject === "string") {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
handleRemoteObject(remoteObject);
|
|
48
|
+
});
|
|
49
|
+
} else if (typeof mfConfig.remotes !== "string") {
|
|
50
|
+
handleRemoteObject(mfConfig.remotes);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
15
53
|
const patchMFConfig = (mfConfig, isServer) => {
|
|
54
|
+
const isDev = process.env.NODE_ENV === "development";
|
|
16
55
|
const runtimePlugins = [
|
|
17
56
|
...mfConfig.runtimePlugins || []
|
|
18
57
|
];
|
|
19
|
-
|
|
20
|
-
if (
|
|
21
|
-
|
|
58
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
|
|
59
|
+
if (isDev) {
|
|
60
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
|
|
22
61
|
}
|
|
23
62
|
if (isServer) {
|
|
24
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
25
63
|
if (isDev) {
|
|
26
|
-
|
|
27
|
-
if (!runtimePlugins.includes(nodeHmrPluginPath)) {
|
|
28
|
-
runtimePlugins.push(nodeHmrPluginPath);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
const injectNodeFetchRuntimePluginPath = path.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js");
|
|
32
|
-
if (!runtimePlugins.includes(injectNodeFetchRuntimePluginPath)) {
|
|
33
|
-
runtimePlugins.push(injectNodeFetchRuntimePluginPath);
|
|
64
|
+
injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
|
|
34
65
|
}
|
|
66
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js"), runtimePlugins);
|
|
35
67
|
}
|
|
36
68
|
if (typeof mfConfig.async === "undefined") {
|
|
37
69
|
mfConfig.async = true;
|
|
@@ -39,18 +71,7 @@ const patchMFConfig = (mfConfig, isServer) => {
|
|
|
39
71
|
if (!isServer) {
|
|
40
72
|
return {
|
|
41
73
|
...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
|
-
}
|
|
74
|
+
runtimePlugins
|
|
54
75
|
};
|
|
55
76
|
}
|
|
56
77
|
return {
|
|
@@ -88,6 +109,9 @@ function patchWebpackConfig(options) {
|
|
|
88
109
|
const { bundlerConfig, modernjsConfig, isServer, mfConfig } = options;
|
|
89
110
|
const enableSSR = Boolean((_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
|
|
90
111
|
(_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? true : delete _bundlerConfig_optimization.runtimeChunk;
|
|
112
|
+
if (!isServer) {
|
|
113
|
+
autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
|
|
114
|
+
}
|
|
91
115
|
if (!isServer && enableSSR && typeof ((_bundlerConfig_optimization1 = bundlerConfig.optimization) === null || _bundlerConfig_optimization1 === void 0 ? void 0 : _bundlerConfig_optimization1.splitChunks) === "object" && bundlerConfig.optimization.splitChunks.cacheGroups) {
|
|
92
116
|
bundlerConfig.optimization.splitChunks.chunks = "async";
|
|
93
117
|
console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
|
|
@@ -117,9 +141,61 @@ function patchWebpackConfig(options) {
|
|
|
117
141
|
};
|
|
118
142
|
}
|
|
119
143
|
}
|
|
144
|
+
const lookupIpv4 = async () => {
|
|
145
|
+
try {
|
|
146
|
+
const res = await dns.promises.lookup(LOCALHOST, {
|
|
147
|
+
family: 4
|
|
148
|
+
});
|
|
149
|
+
return res.address;
|
|
150
|
+
} catch (err) {
|
|
151
|
+
return "127.0.0.1";
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
const SPLIT_CHUNK_MAP = {
|
|
155
|
+
REACT: "lib-react",
|
|
156
|
+
ROUTER: "lib-router",
|
|
157
|
+
LODASH: "lib-lodash",
|
|
158
|
+
ANTD: "lib-antd",
|
|
159
|
+
ARCO: "lib-arco",
|
|
160
|
+
SEMI: "lib-semi",
|
|
161
|
+
AXIOS: "lib-axios"
|
|
162
|
+
};
|
|
163
|
+
const SHARED_SPLIT_CHUNK_MAP = {
|
|
164
|
+
react: SPLIT_CHUNK_MAP.REACT,
|
|
165
|
+
"react-dom": SPLIT_CHUNK_MAP.REACT,
|
|
166
|
+
"react-router": SPLIT_CHUNK_MAP.ROUTER,
|
|
167
|
+
"react-router-dom": SPLIT_CHUNK_MAP.ROUTER,
|
|
168
|
+
"@remix-run/router": SPLIT_CHUNK_MAP.ROUTER,
|
|
169
|
+
lodash: SPLIT_CHUNK_MAP.LODASH,
|
|
170
|
+
"lodash-es": SPLIT_CHUNK_MAP.LODASH,
|
|
171
|
+
antd: SPLIT_CHUNK_MAP.ANTD,
|
|
172
|
+
"@arco-design/web-react": SPLIT_CHUNK_MAP.ARCO,
|
|
173
|
+
"@douyinfe/semi-ui": SPLIT_CHUNK_MAP.SEMI,
|
|
174
|
+
axios: SPLIT_CHUNK_MAP.AXIOS
|
|
175
|
+
};
|
|
176
|
+
function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
|
|
177
|
+
var _bundlerConfig_optimization;
|
|
178
|
+
if (!mfConfig.shared) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
if (!((_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? void 0 : _bundlerConfig_optimization.splitChunks) || !bundlerConfig.optimization.splitChunks.cacheGroups) {
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
const arrayShared = Array.isArray(mfConfig.shared) ? mfConfig.shared : Object.keys(mfConfig.shared);
|
|
185
|
+
for (const shared of arrayShared) {
|
|
186
|
+
const splitChunkKey = SHARED_SPLIT_CHUNK_MAP[shared];
|
|
187
|
+
if (!splitChunkKey) {
|
|
188
|
+
continue;
|
|
189
|
+
}
|
|
190
|
+
if (bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey]) {
|
|
191
|
+
delete bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey];
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
120
195
|
export {
|
|
121
196
|
getMFConfig,
|
|
122
197
|
getTargetEnvConfig,
|
|
198
|
+
lookupIpv4,
|
|
123
199
|
patchMFConfig,
|
|
124
200
|
patchWebpackConfig
|
|
125
201
|
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
function LiveReload() {
|
|
3
|
+
if (process.env.NODE_ENV !== "development") {
|
|
4
|
+
return null;
|
|
5
|
+
}
|
|
6
|
+
return /* @__PURE__ */ _jsx("script", {
|
|
7
|
+
suppressHydrationWarning: true,
|
|
8
|
+
dangerouslySetInnerHTML: {
|
|
9
|
+
__html: String.raw`
|
|
10
|
+
if(${globalThis.shouldUpdate}){
|
|
11
|
+
location.reload();
|
|
12
|
+
}
|
|
13
|
+
`
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
LiveReload
|
|
19
|
+
};
|
|
@@ -50,7 +50,9 @@ function getTargetModuleInfo(id) {
|
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
function collectAssets(options) {
|
|
53
|
-
const { id, injectLink = true, injectScript = true } = options
|
|
53
|
+
const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
|
|
54
|
+
id: options
|
|
55
|
+
} : options;
|
|
54
56
|
const links = [];
|
|
55
57
|
const scripts = [];
|
|
56
58
|
const instance = getInstance();
|
|
@@ -102,7 +104,9 @@ function collectAssets(options) {
|
|
|
102
104
|
];
|
|
103
105
|
}
|
|
104
106
|
function MFReactComponent(props) {
|
|
105
|
-
const { loading = "loading...", id, fallback } = props
|
|
107
|
+
const { loading = "loading...", id, fallback = void 0 } = typeof props === "string" ? {
|
|
108
|
+
id: props
|
|
109
|
+
} : props;
|
|
106
110
|
const Component = /* @__PURE__ */ React.lazy(() => loadRemote(id).then((mod) => {
|
|
107
111
|
const assets = collectAssets(props);
|
|
108
112
|
if (!mod) {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
const mfPluginSSR = (
|
|
1
|
+
const mfPluginSSR = () => ({
|
|
2
2
|
name: "@module-federation/modern-js",
|
|
3
3
|
setup: () => {
|
|
4
|
-
let mfDevServer;
|
|
5
4
|
return {
|
|
6
5
|
async init({ context }, next) {
|
|
7
6
|
if (typeof window !== "undefined") {
|
|
@@ -9,26 +8,13 @@ const mfPluginSSR = ({ name }) => ({
|
|
|
9
8
|
context
|
|
10
9
|
});
|
|
11
10
|
}
|
|
12
|
-
|
|
13
|
-
if (name) {
|
|
14
|
-
mfDevServer = new devServer.ModuleFederationDevServer({
|
|
15
|
-
name: `${name}-server`,
|
|
16
|
-
remotes: [],
|
|
17
|
-
updateCallback: async () => {
|
|
18
|
-
},
|
|
19
|
-
remoteTypeTarPath: ""
|
|
20
|
-
});
|
|
21
|
-
}
|
|
11
|
+
globalThis.shouldUpdate = false;
|
|
22
12
|
const nodeUtils = await import("@module-federation/node/utils");
|
|
23
13
|
const shouldUpdate = await nodeUtils.revalidate();
|
|
24
14
|
if (shouldUpdate) {
|
|
25
15
|
console.log("should RELOAD", shouldUpdate);
|
|
26
16
|
await nodeUtils.flushChunks();
|
|
27
|
-
|
|
28
|
-
updateKind: devServer.UpdateKind.RELOAD_PAGE,
|
|
29
|
-
updateMode: devServer.UpdateMode.POSITIVE,
|
|
30
|
-
clientName: name
|
|
31
|
-
});
|
|
17
|
+
globalThis.shouldUpdate = true;
|
|
32
18
|
}
|
|
33
19
|
return next({
|
|
34
20
|
context
|
|
@@ -5,18 +5,6 @@ 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
|
-
};
|
|
20
8
|
exposes?: moduleFederationPlugin.Exposes | undefined;
|
|
21
9
|
filename?: string | undefined;
|
|
22
10
|
library?: moduleFederationPlugin.LibraryOptions | undefined;
|
|
@@ -28,22 +16,12 @@ export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFede
|
|
|
28
16
|
shared?: moduleFederationPlugin.Shared | undefined;
|
|
29
17
|
implementation?: string | undefined;
|
|
30
18
|
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
|
|
19
|
+
dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
|
|
20
|
+
dts?: boolean | moduleFederationPlugin.PluginDtsOptions | undefined;
|
|
31
21
|
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions | undefined;
|
|
32
22
|
};
|
|
33
23
|
export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions, isServer: boolean): {
|
|
34
24
|
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
|
-
};
|
|
47
25
|
exposes?: moduleFederationPlugin.Exposes | undefined;
|
|
48
26
|
filename?: string | undefined;
|
|
49
27
|
library?: moduleFederationPlugin.LibraryOptions | undefined;
|
|
@@ -55,6 +33,8 @@ export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.Modu
|
|
|
55
33
|
shared?: moduleFederationPlugin.Shared | undefined;
|
|
56
34
|
implementation?: string | undefined;
|
|
57
35
|
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
|
|
36
|
+
dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
|
|
37
|
+
dts?: boolean | moduleFederationPlugin.PluginDtsOptions | undefined;
|
|
58
38
|
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions | undefined;
|
|
59
39
|
};
|
|
60
40
|
export declare function patchWebpackConfig<T>(options: {
|
|
@@ -63,3 +43,4 @@ export declare function patchWebpackConfig<T>(options: {
|
|
|
63
43
|
modernjsConfig: UserConfig<AppTools>;
|
|
64
44
|
mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;
|
|
65
45
|
}): void;
|
|
46
|
+
export declare const lookupIpv4: () => Promise<string>;
|
package/dist/types/constant.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Id = string;
|
|
3
|
+
type IProps = {
|
|
4
|
+
id: Id;
|
|
4
5
|
injectScript?: boolean;
|
|
5
6
|
injectLink?: boolean;
|
|
6
7
|
loading?: React.ReactNode;
|
|
7
8
|
fallback?: ((err: Error) => React.FC | React.ReactElement) | React.FC | React.ReactElement;
|
|
8
|
-
}
|
|
9
|
+
} | Id;
|
|
9
10
|
declare function collectAssets(options: IProps): React.ReactNode[];
|
|
10
11
|
declare function MFReactComponent(props: IProps): React.JSX.Element;
|
|
11
12
|
export { MFReactComponent, collectAssets };
|
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-20240620090145",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist/",
|
|
6
6
|
"types.d.ts",
|
|
@@ -46,10 +46,9 @@
|
|
|
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-
|
|
52
|
-
"@module-federation/dts-plugin": "0.0.0-next-20240605083609"
|
|
49
|
+
"@module-federation/sdk": "0.0.0-next-20240620090145",
|
|
50
|
+
"@module-federation/enhanced": "0.0.0-next-20240620090145",
|
|
51
|
+
"@module-federation/node": "0.0.0-next-20240620090145"
|
|
53
52
|
},
|
|
54
53
|
"devDependencies": {
|
|
55
54
|
"@modern-js/app-tools": "^2.49.2",
|
|
@@ -57,7 +56,7 @@
|
|
|
57
56
|
"@modern-js/runtime": "^2.49.2",
|
|
58
57
|
"@modern-js/module-tools": "^2.35.0",
|
|
59
58
|
"@modern-js/tsconfig": "^2.35.0",
|
|
60
|
-
"@module-federation/manifest": "0.0.0-next-
|
|
59
|
+
"@module-federation/manifest": "0.0.0-next-20240620090145"
|
|
61
60
|
},
|
|
62
61
|
"peerDependencies": {
|
|
63
62
|
"react": ">=17",
|