@module-federation/modern-js 0.0.0-next-20240625070454 → 0.0.0-next-20240701075157
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/README.md +0 -93
- package/dist/cjs/cli/utils.js +21 -4
- package/dist/cjs/cli/utils.spec.js +6 -2
- package/dist/cjs/runtime/createRemoteSSRComponent.js +1 -3
- package/dist/cjs/runtime/index.js +0 -5
- package/dist/cjs/ssr-runtime/plugin.js +17 -0
- package/dist/esm/cli/utils.js +21 -4
- package/dist/esm/cli/utils.spec.js +6 -2
- package/dist/esm/runtime/createRemoteSSRComponent.js +1 -3
- package/dist/esm/runtime/index.js +1 -4
- package/dist/esm/ssr-runtime/plugin.js +19 -0
- package/dist/esm-node/cli/utils.js +21 -4
- package/dist/esm-node/cli/utils.spec.js +6 -2
- package/dist/esm-node/runtime/createRemoteSSRComponent.js +1 -3
- package/dist/esm-node/runtime/index.js +1 -4
- package/dist/esm-node/ssr-runtime/plugin.js +17 -0
- package/dist/types/cli/utils.d.ts +30 -30
- package/dist/types/runtime/createRemoteSSRComponent.d.ts +0 -2
- package/dist/types/runtime/index.d.ts +1 -2
- package/dist/types/{runtime → ssr-runtime}/SSRLiveReload.d.ts +0 -1
- package/package.json +7 -5
- /package/dist/cjs/{runtime → ssr-runtime}/SSRLiveReload.js +0 -0
- /package/dist/esm/{runtime → ssr-runtime}/SSRLiveReload.js +0 -0
- /package/dist/esm-node/{runtime → ssr-runtime}/SSRLiveReload.js +0 -0
package/README.md
CHANGED
|
@@ -92,8 +92,6 @@ type CreateRemoteSSRComponentOptions = {
|
|
|
92
92
|
loader: () => Promise<T>;
|
|
93
93
|
loading: React.ReactNode;
|
|
94
94
|
fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
|
|
95
|
-
injectScript?: boolean;
|
|
96
|
-
injectLink?: boolean;
|
|
97
95
|
export?: E;
|
|
98
96
|
};
|
|
99
97
|
|
|
@@ -167,94 +165,3 @@ Set module loading status.
|
|
|
167
165
|
A fault-tolerant component that is rendered when the component fails to **load** or **render**.
|
|
168
166
|
|
|
169
167
|
Note: This component only renders this fault-tolerant component on the client side when **rendering** fails.
|
|
170
|
-
|
|
171
|
-
#### injectLink
|
|
172
|
-
|
|
173
|
-
- Type:`boolean`
|
|
174
|
-
- Required: No
|
|
175
|
-
- Default value: `true`
|
|
176
|
-
|
|
177
|
-
Whether to inject the style of the corresponding component.
|
|
178
|
-
|
|
179
|
-
#### injectScript
|
|
180
|
-
|
|
181
|
-
- Type:`boolean`
|
|
182
|
-
- Required: No
|
|
183
|
-
- Default value: `true`
|
|
184
|
-
|
|
185
|
-
Whether to inject the script of the corresponding component.
|
|
186
|
-
|
|
187
|
-
### collectSSRAssets
|
|
188
|
-
|
|
189
|
-
```ts
|
|
190
|
-
declare function createRemoteSSRComponent(
|
|
191
|
-
props: CollectSSRAssetsOptions
|
|
192
|
-
): React.ReactNode[];
|
|
193
|
-
|
|
194
|
-
type CollectSSRAssetsOptions = {
|
|
195
|
-
id: string;
|
|
196
|
-
injectScript?: boolean;
|
|
197
|
-
injectLink?: boolean;
|
|
198
|
-
};
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
This function collects producer-related scripts and styles rendered on the server side and returns the script/link tag.
|
|
202
|
-
|
|
203
|
-
#### Example
|
|
204
|
-
|
|
205
|
-
```tsx
|
|
206
|
-
import React from 'react';
|
|
207
|
-
import { collectSSRAssets } from '@modern-js/runtime/mf';
|
|
208
|
-
import Comp from 'remote/Image';
|
|
209
|
-
|
|
210
|
-
export default (): JSX.Element => (
|
|
211
|
-
<div>
|
|
212
|
-
{collectSSRAssets({ id: 'remote/Image' })}
|
|
213
|
-
<Comp />
|
|
214
|
-
</div>
|
|
215
|
-
);
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
#### injectLink
|
|
219
|
-
|
|
220
|
-
- Type:`boolean`
|
|
221
|
-
- Required: No
|
|
222
|
-
- Default value: `true`
|
|
223
|
-
|
|
224
|
-
Whether to inject the style of the corresponding component.
|
|
225
|
-
|
|
226
|
-
#### injectScript
|
|
227
|
-
|
|
228
|
-
- Type:`boolean`
|
|
229
|
-
- Required: No
|
|
230
|
-
- Default value: `true`
|
|
231
|
-
|
|
232
|
-
Whether to inject the script of the corresponding component.
|
|
233
|
-
|
|
234
|
-
### SSRLiveReload
|
|
235
|
-
|
|
236
|
-
:::info
|
|
237
|
-
This component will not take effect in the production environment!
|
|
238
|
-
:::
|
|
239
|
-
|
|
240
|
-
```ts
|
|
241
|
-
declare function SSRLiveReload(): React.JSX.Element | null;
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
When remote components are updated, page reloads occur automatically.
|
|
245
|
-
|
|
246
|
-
#### Example
|
|
247
|
-
|
|
248
|
-
```tsx
|
|
249
|
-
import { Outlet } from '@modern-js/runtime/router';
|
|
250
|
-
import { SSRLiveReload } from '@modern-js/runtime/mf';
|
|
251
|
-
|
|
252
|
-
export default function Layout() {
|
|
253
|
-
return (
|
|
254
|
-
<div>
|
|
255
|
-
<SSRLiveReload />
|
|
256
|
-
<Outlet />
|
|
257
|
-
</div>
|
|
258
|
-
);
|
|
259
|
-
}
|
|
260
|
-
```
|
package/dist/cjs/cli/utils.js
CHANGED
|
@@ -41,6 +41,7 @@ var import_os = __toESM(require("os"));
|
|
|
41
41
|
var import_node_bundle_require = require("@modern-js/node-bundle-require");
|
|
42
42
|
var import_constant = require("../constant");
|
|
43
43
|
const defaultPath = import_path.default.resolve(process.cwd(), "module-federation.config.ts");
|
|
44
|
+
const isDev = process.env.NODE_ENV === "development";
|
|
44
45
|
const getMFConfig = async (userConfig) => {
|
|
45
46
|
const { config, configPath } = userConfig;
|
|
46
47
|
if (config) {
|
|
@@ -53,6 +54,9 @@ const getMFConfig = async (userConfig) => {
|
|
|
53
54
|
if (mfConfig.remoteType === void 0) {
|
|
54
55
|
mfConfig.remoteType = "script";
|
|
55
56
|
}
|
|
57
|
+
if (!mfConfig.name) {
|
|
58
|
+
throw new Error(`${import_constant.PLUGIN_IDENTIFIER} mfConfig.name can not be empty!`);
|
|
59
|
+
}
|
|
56
60
|
return mfConfig;
|
|
57
61
|
};
|
|
58
62
|
const injectRuntimePlugins = (runtimePlugin, runtimePlugins) => {
|
|
@@ -123,7 +127,6 @@ const patchDTSConfig = (mfConfig, isServer) => {
|
|
|
123
127
|
}
|
|
124
128
|
};
|
|
125
129
|
const patchMFConfig = (mfConfig, isServer) => {
|
|
126
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
127
130
|
const runtimePlugins = [
|
|
128
131
|
...mfConfig.runtimePlugins || []
|
|
129
132
|
];
|
|
@@ -175,10 +178,19 @@ function getTargetEnvConfig(mfConfig, isServer) {
|
|
|
175
178
|
return patchedMFConfig;
|
|
176
179
|
}
|
|
177
180
|
function patchWebpackConfig(options) {
|
|
178
|
-
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output;
|
|
181
|
+
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output, _modernjsConfig_deploy;
|
|
179
182
|
const { bundlerConfig, modernjsConfig, isServer, mfConfig } = options;
|
|
180
183
|
const enableSSR = Boolean((_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
|
|
181
184
|
(_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? true : delete _bundlerConfig_optimization.runtimeChunk;
|
|
185
|
+
if (bundlerConfig.output) {
|
|
186
|
+
var _bundlerConfig_output1, _bundlerConfig_output2;
|
|
187
|
+
if (!((_bundlerConfig_output1 = bundlerConfig.output) === null || _bundlerConfig_output1 === void 0 ? void 0 : _bundlerConfig_output1.chunkLoadingGlobal)) {
|
|
188
|
+
bundlerConfig.output.chunkLoadingGlobal = `chunk_${mfConfig.name}`;
|
|
189
|
+
}
|
|
190
|
+
if (!((_bundlerConfig_output2 = bundlerConfig.output) === null || _bundlerConfig_output2 === void 0 ? void 0 : _bundlerConfig_output2.uniqueName)) {
|
|
191
|
+
bundlerConfig.output.uniqueName = mfConfig.name;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
182
194
|
if (!isServer) {
|
|
183
195
|
autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
|
|
184
196
|
}
|
|
@@ -186,7 +198,7 @@ function patchWebpackConfig(options) {
|
|
|
186
198
|
bundlerConfig.optimization.splitChunks.chunks = "async";
|
|
187
199
|
console.warn(`${import_constant.PLUGIN_IDENTIFIER} splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"`);
|
|
188
200
|
}
|
|
189
|
-
if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
201
|
+
if (isDev && ((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
190
202
|
var _modernjsConfig_dev, _modernjsConfig_server1;
|
|
191
203
|
const port = ((_modernjsConfig_dev = modernjsConfig.dev) === null || _modernjsConfig_dev === void 0 ? void 0 : _modernjsConfig_dev.port) || ((_modernjsConfig_server1 = modernjsConfig.server) === null || _modernjsConfig_server1 === void 0 ? void 0 : _modernjsConfig_server1.port) || 8080;
|
|
192
204
|
const publicPath = `http://localhost:${port}/`;
|
|
@@ -201,7 +213,6 @@ function patchWebpackConfig(options) {
|
|
|
201
213
|
output.chunkFilename = chunkFileName.replace(".js", suffix);
|
|
202
214
|
}
|
|
203
215
|
}
|
|
204
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
205
216
|
if (isDev && enableSSR && !isServer) {
|
|
206
217
|
bundlerConfig.resolve.fallback = {
|
|
207
218
|
...bundlerConfig.resolve.fallback,
|
|
@@ -210,6 +221,12 @@ function patchWebpackConfig(options) {
|
|
|
210
221
|
vm: false
|
|
211
222
|
};
|
|
212
223
|
}
|
|
224
|
+
if (((_modernjsConfig_deploy = modernjsConfig.deploy) === null || _modernjsConfig_deploy === void 0 ? void 0 : _modernjsConfig_deploy.microFrontend) && Object.keys(mfConfig.exposes || {}).length) {
|
|
225
|
+
if (!bundlerConfig.optimization) {
|
|
226
|
+
bundlerConfig.optimization = {};
|
|
227
|
+
}
|
|
228
|
+
bundlerConfig.optimization.usedExports = false;
|
|
229
|
+
}
|
|
213
230
|
}
|
|
214
231
|
const localIpv4 = "127.0.0.1";
|
|
215
232
|
const getIpv4Interfaces = () => {
|
|
@@ -124,7 +124,9 @@ const mfConfig = {
|
|
|
124
124
|
});
|
|
125
125
|
(0, import_vitest.expect)(bundlerConfig).toStrictEqual({
|
|
126
126
|
output: {
|
|
127
|
-
|
|
127
|
+
chunkLoadingGlobal: "chunk_host",
|
|
128
|
+
publicPath: "auto",
|
|
129
|
+
uniqueName: "host"
|
|
128
130
|
}
|
|
129
131
|
});
|
|
130
132
|
});
|
|
@@ -148,7 +150,9 @@ const mfConfig = {
|
|
|
148
150
|
});
|
|
149
151
|
(0, import_vitest.expect)(bundlerConfig).toStrictEqual({
|
|
150
152
|
output: {
|
|
151
|
-
|
|
153
|
+
chunkLoadingGlobal: "chunk_host",
|
|
154
|
+
publicPath: "auto",
|
|
155
|
+
uniqueName: "host"
|
|
152
156
|
}
|
|
153
157
|
});
|
|
154
158
|
});
|
|
@@ -149,9 +149,7 @@ function createRemoteSSRComponent(info) {
|
|
|
149
149
|
}
|
|
150
150
|
const moduleId = m && m[Symbol.for("mf_module_id")];
|
|
151
151
|
const assets = collectSSRAssets({
|
|
152
|
-
id: moduleId
|
|
153
|
-
injectLink: info.injectLink,
|
|
154
|
-
injectScript: info.injectScript
|
|
152
|
+
id: moduleId
|
|
155
153
|
});
|
|
156
154
|
const Com = m[exportName];
|
|
157
155
|
if (exportName in m && typeof Com === "function") {
|
|
@@ -19,18 +19,13 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
|
|
|
19
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
20
|
var runtime_exports = {};
|
|
21
21
|
__export(runtime_exports, {
|
|
22
|
-
SSRLiveReload: () => import_SSRLiveReload.SSRLiveReload,
|
|
23
|
-
collectSSRAssets: () => import_createRemoteSSRComponent.collectSSRAssets,
|
|
24
22
|
createRemoteSSRComponent: () => import_createRemoteSSRComponent.createRemoteSSRComponent
|
|
25
23
|
});
|
|
26
24
|
module.exports = __toCommonJS(runtime_exports);
|
|
27
25
|
__reExport(runtime_exports, require("@module-federation/enhanced/runtime"), module.exports);
|
|
28
26
|
var import_createRemoteSSRComponent = require("./createRemoteSSRComponent");
|
|
29
|
-
var import_SSRLiveReload = require("./SSRLiveReload");
|
|
30
27
|
// Annotate the CommonJS export names for ESM import in node:
|
|
31
28
|
0 && (module.exports = {
|
|
32
|
-
SSRLiveReload,
|
|
33
|
-
collectSSRAssets,
|
|
34
29
|
createRemoteSSRComponent,
|
|
35
30
|
...require("@module-federation/enhanced/runtime")
|
|
36
31
|
});
|
|
@@ -31,6 +31,9 @@ __export(plugin_exports, {
|
|
|
31
31
|
mfPluginSSR: () => mfPluginSSR
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(plugin_exports);
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
+
var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
|
|
36
|
+
var import_SSRLiveReload = require("./SSRLiveReload");
|
|
34
37
|
const mfPluginSSR = () => ({
|
|
35
38
|
name: "@module-federation/modern-js",
|
|
36
39
|
setup: () => {
|
|
@@ -52,6 +55,20 @@ const mfPluginSSR = () => ({
|
|
|
52
55
|
return next({
|
|
53
56
|
context
|
|
54
57
|
});
|
|
58
|
+
},
|
|
59
|
+
hoc({ App, config }, next) {
|
|
60
|
+
const AppWrapper = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SSRLiveReload.SSRLiveReload, {}),
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
|
|
64
|
+
...props
|
|
65
|
+
})
|
|
66
|
+
]
|
|
67
|
+
});
|
|
68
|
+
return next({
|
|
69
|
+
App: (0, import_hoist_non_react_statics.default)(AppWrapper, App),
|
|
70
|
+
config
|
|
71
|
+
});
|
|
55
72
|
}
|
|
56
73
|
};
|
|
57
74
|
}
|
package/dist/esm/cli/utils.js
CHANGED
|
@@ -9,6 +9,7 @@ import os from "os";
|
|
|
9
9
|
import { bundle } from "@modern-js/node-bundle-require";
|
|
10
10
|
import { LOCALHOST, PLUGIN_IDENTIFIER } from "../constant";
|
|
11
11
|
var defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
|
|
12
|
+
var isDev = process.env.NODE_ENV === "development";
|
|
12
13
|
var getMFConfig = function() {
|
|
13
14
|
var _ref = _async_to_generator(function(userConfig) {
|
|
14
15
|
var config, configPath, mfConfigPath, preBundlePath, mfConfig;
|
|
@@ -44,6 +45,9 @@ var getMFConfig = function() {
|
|
|
44
45
|
if (mfConfig.remoteType === void 0) {
|
|
45
46
|
mfConfig.remoteType = "script";
|
|
46
47
|
}
|
|
48
|
+
if (!mfConfig.name) {
|
|
49
|
+
throw new Error("".concat(PLUGIN_IDENTIFIER, " mfConfig.name can not be empty!"));
|
|
50
|
+
}
|
|
47
51
|
return [
|
|
48
52
|
2,
|
|
49
53
|
mfConfig
|
|
@@ -136,7 +140,6 @@ var patchDTSConfig = function(mfConfig, isServer) {
|
|
|
136
140
|
}
|
|
137
141
|
};
|
|
138
142
|
var patchMFConfig = function(mfConfig, isServer) {
|
|
139
|
-
var isDev = process.env.NODE_ENV === "development";
|
|
140
143
|
var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
|
|
141
144
|
patchDTSConfig(mfConfig, isServer);
|
|
142
145
|
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
|
|
@@ -181,10 +184,19 @@ function getTargetEnvConfig(mfConfig, isServer) {
|
|
|
181
184
|
return patchedMFConfig;
|
|
182
185
|
}
|
|
183
186
|
function patchWebpackConfig(options) {
|
|
184
|
-
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output;
|
|
187
|
+
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output, _modernjsConfig_deploy;
|
|
185
188
|
var bundlerConfig = options.bundlerConfig, modernjsConfig = options.modernjsConfig, isServer = options.isServer, mfConfig = options.mfConfig;
|
|
186
189
|
var enableSSR = Boolean((_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
|
|
187
190
|
(_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? true : delete _bundlerConfig_optimization.runtimeChunk;
|
|
191
|
+
if (bundlerConfig.output) {
|
|
192
|
+
var _bundlerConfig_output1, _bundlerConfig_output2;
|
|
193
|
+
if (!((_bundlerConfig_output1 = bundlerConfig.output) === null || _bundlerConfig_output1 === void 0 ? void 0 : _bundlerConfig_output1.chunkLoadingGlobal)) {
|
|
194
|
+
bundlerConfig.output.chunkLoadingGlobal = "chunk_".concat(mfConfig.name);
|
|
195
|
+
}
|
|
196
|
+
if (!((_bundlerConfig_output2 = bundlerConfig.output) === null || _bundlerConfig_output2 === void 0 ? void 0 : _bundlerConfig_output2.uniqueName)) {
|
|
197
|
+
bundlerConfig.output.uniqueName = mfConfig.name;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
188
200
|
if (!isServer) {
|
|
189
201
|
autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
|
|
190
202
|
}
|
|
@@ -192,7 +204,7 @@ function patchWebpackConfig(options) {
|
|
|
192
204
|
bundlerConfig.optimization.splitChunks.chunks = "async";
|
|
193
205
|
console.warn("".concat(PLUGIN_IDENTIFIER, ' splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"'));
|
|
194
206
|
}
|
|
195
|
-
if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
207
|
+
if (isDev && ((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
196
208
|
var _modernjsConfig_dev, _modernjsConfig_server1;
|
|
197
209
|
var port = ((_modernjsConfig_dev = modernjsConfig.dev) === null || _modernjsConfig_dev === void 0 ? void 0 : _modernjsConfig_dev.port) || ((_modernjsConfig_server1 = modernjsConfig.server) === null || _modernjsConfig_server1 === void 0 ? void 0 : _modernjsConfig_server1.port) || 8080;
|
|
198
210
|
var publicPath = "http://localhost:".concat(port, "/");
|
|
@@ -207,7 +219,6 @@ function patchWebpackConfig(options) {
|
|
|
207
219
|
output.chunkFilename = chunkFileName.replace(".js", suffix);
|
|
208
220
|
}
|
|
209
221
|
}
|
|
210
|
-
var isDev = process.env.NODE_ENV === "development";
|
|
211
222
|
if (isDev && enableSSR && !isServer) {
|
|
212
223
|
bundlerConfig.resolve.fallback = _object_spread_props(_object_spread({}, bundlerConfig.resolve.fallback), {
|
|
213
224
|
crypto: false,
|
|
@@ -215,6 +226,12 @@ function patchWebpackConfig(options) {
|
|
|
215
226
|
vm: false
|
|
216
227
|
});
|
|
217
228
|
}
|
|
229
|
+
if (((_modernjsConfig_deploy = modernjsConfig.deploy) === null || _modernjsConfig_deploy === void 0 ? void 0 : _modernjsConfig_deploy.microFrontend) && Object.keys(mfConfig.exposes || {}).length) {
|
|
230
|
+
if (!bundlerConfig.optimization) {
|
|
231
|
+
bundlerConfig.optimization = {};
|
|
232
|
+
}
|
|
233
|
+
bundlerConfig.optimization.usedExports = false;
|
|
234
|
+
}
|
|
218
235
|
}
|
|
219
236
|
var localIpv4 = "127.0.0.1";
|
|
220
237
|
var getIpv4Interfaces = function() {
|
|
@@ -123,7 +123,9 @@ describe("patchWebpackConfig", /* @__PURE__ */ _async_to_generator(function() {
|
|
|
123
123
|
});
|
|
124
124
|
expect(bundlerConfig).toStrictEqual({
|
|
125
125
|
output: {
|
|
126
|
-
|
|
126
|
+
chunkLoadingGlobal: "chunk_host",
|
|
127
|
+
publicPath: "auto",
|
|
128
|
+
uniqueName: "host"
|
|
127
129
|
}
|
|
128
130
|
});
|
|
129
131
|
return [
|
|
@@ -153,7 +155,9 @@ describe("patchWebpackConfig", /* @__PURE__ */ _async_to_generator(function() {
|
|
|
153
155
|
});
|
|
154
156
|
expect(bundlerConfig).toStrictEqual({
|
|
155
157
|
output: {
|
|
156
|
-
|
|
158
|
+
chunkLoadingGlobal: "chunk_host",
|
|
159
|
+
publicPath: "auto",
|
|
160
|
+
uniqueName: "host"
|
|
157
161
|
}
|
|
158
162
|
});
|
|
159
163
|
return [
|
|
@@ -121,9 +121,7 @@ function createRemoteSSRComponent(info) {
|
|
|
121
121
|
}
|
|
122
122
|
moduleId = m && m[Symbol.for("mf_module_id")];
|
|
123
123
|
assets = collectSSRAssets({
|
|
124
|
-
id: moduleId
|
|
125
|
-
injectLink: info.injectLink,
|
|
126
|
-
injectScript: info.injectScript
|
|
124
|
+
id: moduleId
|
|
127
125
|
});
|
|
128
126
|
Com = m[exportName];
|
|
129
127
|
if (exportName in m && typeof Com === "function") {
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
export * from "@module-federation/enhanced/runtime";
|
|
2
|
-
import { createRemoteSSRComponent
|
|
3
|
-
import { SSRLiveReload } from "./SSRLiveReload";
|
|
2
|
+
import { createRemoteSSRComponent } from "./createRemoteSSRComponent";
|
|
4
3
|
export {
|
|
5
|
-
SSRLiveReload,
|
|
6
|
-
collectSSRAssets,
|
|
7
4
|
createRemoteSSRComponent
|
|
8
5
|
};
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
|
+
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
3
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
|
+
import hoistNonReactStatics from "hoist-non-react-statics";
|
|
6
|
+
import { SSRLiveReload } from "./SSRLiveReload";
|
|
3
7
|
var mfPluginSSR = function() {
|
|
4
8
|
return {
|
|
5
9
|
name: "@module-federation/modern-js",
|
|
@@ -57,6 +61,21 @@ var mfPluginSSR = function() {
|
|
|
57
61
|
}
|
|
58
62
|
});
|
|
59
63
|
})();
|
|
64
|
+
},
|
|
65
|
+
hoc: function hoc(param, next) {
|
|
66
|
+
var App = param.App, config = param.config;
|
|
67
|
+
var AppWrapper = function(props) {
|
|
68
|
+
return /* @__PURE__ */ _jsxs(_Fragment, {
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ _jsx(SSRLiveReload, {}),
|
|
71
|
+
/* @__PURE__ */ _jsx(App, _object_spread({}, props))
|
|
72
|
+
]
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
return next({
|
|
76
|
+
App: hoistNonReactStatics(AppWrapper, App),
|
|
77
|
+
config
|
|
78
|
+
});
|
|
60
79
|
}
|
|
61
80
|
};
|
|
62
81
|
}
|
|
@@ -4,6 +4,7 @@ import os from "os";
|
|
|
4
4
|
import { bundle } from "@modern-js/node-bundle-require";
|
|
5
5
|
import { LOCALHOST, PLUGIN_IDENTIFIER } from "../constant";
|
|
6
6
|
const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
|
|
7
|
+
const isDev = process.env.NODE_ENV === "development";
|
|
7
8
|
const getMFConfig = async (userConfig) => {
|
|
8
9
|
const { config, configPath } = userConfig;
|
|
9
10
|
if (config) {
|
|
@@ -16,6 +17,9 @@ const getMFConfig = async (userConfig) => {
|
|
|
16
17
|
if (mfConfig.remoteType === void 0) {
|
|
17
18
|
mfConfig.remoteType = "script";
|
|
18
19
|
}
|
|
20
|
+
if (!mfConfig.name) {
|
|
21
|
+
throw new Error(`${PLUGIN_IDENTIFIER} mfConfig.name can not be empty!`);
|
|
22
|
+
}
|
|
19
23
|
return mfConfig;
|
|
20
24
|
};
|
|
21
25
|
const injectRuntimePlugins = (runtimePlugin, runtimePlugins) => {
|
|
@@ -86,7 +90,6 @@ const patchDTSConfig = (mfConfig, isServer) => {
|
|
|
86
90
|
}
|
|
87
91
|
};
|
|
88
92
|
const patchMFConfig = (mfConfig, isServer) => {
|
|
89
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
90
93
|
const runtimePlugins = [
|
|
91
94
|
...mfConfig.runtimePlugins || []
|
|
92
95
|
];
|
|
@@ -138,10 +141,19 @@ function getTargetEnvConfig(mfConfig, isServer) {
|
|
|
138
141
|
return patchedMFConfig;
|
|
139
142
|
}
|
|
140
143
|
function patchWebpackConfig(options) {
|
|
141
|
-
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output;
|
|
144
|
+
var _modernjsConfig_server, _bundlerConfig_optimization, _bundlerConfig_optimization1, _bundlerConfig_output, _modernjsConfig_deploy;
|
|
142
145
|
const { bundlerConfig, modernjsConfig, isServer, mfConfig } = options;
|
|
143
146
|
const enableSSR = Boolean((_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
|
|
144
147
|
(_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? true : delete _bundlerConfig_optimization.runtimeChunk;
|
|
148
|
+
if (bundlerConfig.output) {
|
|
149
|
+
var _bundlerConfig_output1, _bundlerConfig_output2;
|
|
150
|
+
if (!((_bundlerConfig_output1 = bundlerConfig.output) === null || _bundlerConfig_output1 === void 0 ? void 0 : _bundlerConfig_output1.chunkLoadingGlobal)) {
|
|
151
|
+
bundlerConfig.output.chunkLoadingGlobal = `chunk_${mfConfig.name}`;
|
|
152
|
+
}
|
|
153
|
+
if (!((_bundlerConfig_output2 = bundlerConfig.output) === null || _bundlerConfig_output2 === void 0 ? void 0 : _bundlerConfig_output2.uniqueName)) {
|
|
154
|
+
bundlerConfig.output.uniqueName = mfConfig.name;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
145
157
|
if (!isServer) {
|
|
146
158
|
autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
|
|
147
159
|
}
|
|
@@ -149,7 +161,7 @@ function patchWebpackConfig(options) {
|
|
|
149
161
|
bundlerConfig.optimization.splitChunks.chunks = "async";
|
|
150
162
|
console.warn(`${PLUGIN_IDENTIFIER} splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"`);
|
|
151
163
|
}
|
|
152
|
-
if (((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
164
|
+
if (isDev && ((_bundlerConfig_output = bundlerConfig.output) === null || _bundlerConfig_output === void 0 ? void 0 : _bundlerConfig_output.publicPath) === "auto") {
|
|
153
165
|
var _modernjsConfig_dev, _modernjsConfig_server1;
|
|
154
166
|
const port = ((_modernjsConfig_dev = modernjsConfig.dev) === null || _modernjsConfig_dev === void 0 ? void 0 : _modernjsConfig_dev.port) || ((_modernjsConfig_server1 = modernjsConfig.server) === null || _modernjsConfig_server1 === void 0 ? void 0 : _modernjsConfig_server1.port) || 8080;
|
|
155
167
|
const publicPath = `http://localhost:${port}/`;
|
|
@@ -164,7 +176,6 @@ function patchWebpackConfig(options) {
|
|
|
164
176
|
output.chunkFilename = chunkFileName.replace(".js", suffix);
|
|
165
177
|
}
|
|
166
178
|
}
|
|
167
|
-
const isDev = process.env.NODE_ENV === "development";
|
|
168
179
|
if (isDev && enableSSR && !isServer) {
|
|
169
180
|
bundlerConfig.resolve.fallback = {
|
|
170
181
|
...bundlerConfig.resolve.fallback,
|
|
@@ -173,6 +184,12 @@ function patchWebpackConfig(options) {
|
|
|
173
184
|
vm: false
|
|
174
185
|
};
|
|
175
186
|
}
|
|
187
|
+
if (((_modernjsConfig_deploy = modernjsConfig.deploy) === null || _modernjsConfig_deploy === void 0 ? void 0 : _modernjsConfig_deploy.microFrontend) && Object.keys(mfConfig.exposes || {}).length) {
|
|
188
|
+
if (!bundlerConfig.optimization) {
|
|
189
|
+
bundlerConfig.optimization = {};
|
|
190
|
+
}
|
|
191
|
+
bundlerConfig.optimization.usedExports = false;
|
|
192
|
+
}
|
|
176
193
|
}
|
|
177
194
|
const localIpv4 = "127.0.0.1";
|
|
178
195
|
const getIpv4Interfaces = () => {
|
|
@@ -101,7 +101,9 @@ describe("patchWebpackConfig", async () => {
|
|
|
101
101
|
});
|
|
102
102
|
expect(bundlerConfig).toStrictEqual({
|
|
103
103
|
output: {
|
|
104
|
-
|
|
104
|
+
chunkLoadingGlobal: "chunk_host",
|
|
105
|
+
publicPath: "auto",
|
|
106
|
+
uniqueName: "host"
|
|
105
107
|
}
|
|
106
108
|
});
|
|
107
109
|
});
|
|
@@ -125,7 +127,9 @@ describe("patchWebpackConfig", async () => {
|
|
|
125
127
|
});
|
|
126
128
|
expect(bundlerConfig).toStrictEqual({
|
|
127
129
|
output: {
|
|
128
|
-
|
|
130
|
+
chunkLoadingGlobal: "chunk_host",
|
|
131
|
+
publicPath: "auto",
|
|
132
|
+
uniqueName: "host"
|
|
129
133
|
}
|
|
130
134
|
});
|
|
131
135
|
});
|
|
@@ -115,9 +115,7 @@ function createRemoteSSRComponent(info) {
|
|
|
115
115
|
}
|
|
116
116
|
const moduleId = m && m[Symbol.for("mf_module_id")];
|
|
117
117
|
const assets = collectSSRAssets({
|
|
118
|
-
id: moduleId
|
|
119
|
-
injectLink: info.injectLink,
|
|
120
|
-
injectScript: info.injectScript
|
|
118
|
+
id: moduleId
|
|
121
119
|
});
|
|
122
120
|
const Com = m[exportName];
|
|
123
121
|
if (exportName in m && typeof Com === "function") {
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
export * from "@module-federation/enhanced/runtime";
|
|
2
|
-
import { createRemoteSSRComponent
|
|
3
|
-
import { SSRLiveReload } from "./SSRLiveReload";
|
|
2
|
+
import { createRemoteSSRComponent } from "./createRemoteSSRComponent";
|
|
4
3
|
export {
|
|
5
|
-
SSRLiveReload,
|
|
6
|
-
collectSSRAssets,
|
|
7
4
|
createRemoteSSRComponent
|
|
8
5
|
};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import hoistNonReactStatics from "hoist-non-react-statics";
|
|
3
|
+
import { SSRLiveReload } from "./SSRLiveReload";
|
|
1
4
|
const mfPluginSSR = () => ({
|
|
2
5
|
name: "@module-federation/modern-js",
|
|
3
6
|
setup: () => {
|
|
@@ -19,6 +22,20 @@ const mfPluginSSR = () => ({
|
|
|
19
22
|
return next({
|
|
20
23
|
context
|
|
21
24
|
});
|
|
25
|
+
},
|
|
26
|
+
hoc({ App, config }, next) {
|
|
27
|
+
const AppWrapper = (props) => /* @__PURE__ */ _jsxs(_Fragment, {
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ _jsx(SSRLiveReload, {}),
|
|
30
|
+
/* @__PURE__ */ _jsx(App, {
|
|
31
|
+
...props
|
|
32
|
+
})
|
|
33
|
+
]
|
|
34
|
+
});
|
|
35
|
+
return next({
|
|
36
|
+
App: hoistNonReactStatics(AppWrapper, App),
|
|
37
|
+
config
|
|
38
|
+
});
|
|
22
39
|
}
|
|
23
40
|
};
|
|
24
41
|
}
|
|
@@ -5,39 +5,39 @@ 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
|
-
exposes?: moduleFederationPlugin.Exposes
|
|
9
|
-
filename?: string
|
|
10
|
-
library?: moduleFederationPlugin.LibraryOptions
|
|
11
|
-
name?: string
|
|
12
|
-
remoteType?: moduleFederationPlugin.ExternalsType
|
|
13
|
-
remotes?: moduleFederationPlugin.Remotes
|
|
14
|
-
runtime?: moduleFederationPlugin.EntryRuntime
|
|
15
|
-
shareScope?: string
|
|
16
|
-
shared?: moduleFederationPlugin.Shared
|
|
17
|
-
getPublicPath?: string
|
|
18
|
-
implementation?: string
|
|
19
|
-
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions
|
|
20
|
-
dev?: boolean | moduleFederationPlugin.PluginDevOptions
|
|
21
|
-
dts?: boolean | moduleFederationPlugin.PluginDtsOptions
|
|
22
|
-
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions
|
|
8
|
+
exposes?: moduleFederationPlugin.Exposes;
|
|
9
|
+
filename?: string;
|
|
10
|
+
library?: moduleFederationPlugin.LibraryOptions;
|
|
11
|
+
name?: string;
|
|
12
|
+
remoteType?: moduleFederationPlugin.ExternalsType;
|
|
13
|
+
remotes?: moduleFederationPlugin.Remotes;
|
|
14
|
+
runtime?: moduleFederationPlugin.EntryRuntime;
|
|
15
|
+
shareScope?: string;
|
|
16
|
+
shared?: moduleFederationPlugin.Shared;
|
|
17
|
+
getPublicPath?: string;
|
|
18
|
+
implementation?: string;
|
|
19
|
+
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions;
|
|
20
|
+
dev?: boolean | moduleFederationPlugin.PluginDevOptions;
|
|
21
|
+
dts?: boolean | moduleFederationPlugin.PluginDtsOptions;
|
|
22
|
+
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions;
|
|
23
23
|
};
|
|
24
24
|
export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions, isServer: boolean): {
|
|
25
25
|
runtimePlugins: string[];
|
|
26
|
-
exposes?: moduleFederationPlugin.Exposes
|
|
27
|
-
filename?: string
|
|
28
|
-
library?: moduleFederationPlugin.LibraryOptions
|
|
29
|
-
name?: string
|
|
30
|
-
remoteType?: moduleFederationPlugin.ExternalsType
|
|
31
|
-
remotes?: moduleFederationPlugin.Remotes
|
|
32
|
-
runtime?: moduleFederationPlugin.EntryRuntime
|
|
33
|
-
shareScope?: string
|
|
34
|
-
shared?: moduleFederationPlugin.Shared
|
|
35
|
-
getPublicPath?: string
|
|
36
|
-
implementation?: string
|
|
37
|
-
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions
|
|
38
|
-
dev?: boolean | moduleFederationPlugin.PluginDevOptions
|
|
39
|
-
dts?: boolean | moduleFederationPlugin.PluginDtsOptions
|
|
40
|
-
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions
|
|
26
|
+
exposes?: moduleFederationPlugin.Exposes;
|
|
27
|
+
filename?: string;
|
|
28
|
+
library?: moduleFederationPlugin.LibraryOptions;
|
|
29
|
+
name?: string;
|
|
30
|
+
remoteType?: moduleFederationPlugin.ExternalsType;
|
|
31
|
+
remotes?: moduleFederationPlugin.Remotes;
|
|
32
|
+
runtime?: moduleFederationPlugin.EntryRuntime;
|
|
33
|
+
shareScope?: string;
|
|
34
|
+
shared?: moduleFederationPlugin.Shared;
|
|
35
|
+
getPublicPath?: string;
|
|
36
|
+
implementation?: string;
|
|
37
|
+
manifest?: boolean | moduleFederationPlugin.PluginManifestOptions;
|
|
38
|
+
dev?: boolean | moduleFederationPlugin.PluginDevOptions;
|
|
39
|
+
dts?: boolean | moduleFederationPlugin.PluginDtsOptions;
|
|
40
|
+
async?: boolean | moduleFederationPlugin.AsyncBoundaryOptions;
|
|
41
41
|
};
|
|
42
42
|
export declare function patchWebpackConfig<T>(options: {
|
|
43
43
|
bundlerConfig: ConfigType<T>;
|
|
@@ -10,8 +10,6 @@ export declare function createRemoteSSRComponent<T, E extends keyof T>(info: {
|
|
|
10
10
|
loader: () => Promise<T>;
|
|
11
11
|
loading: React.ReactNode;
|
|
12
12
|
fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
|
|
13
|
-
injectScript?: boolean;
|
|
14
|
-
injectLink?: boolean;
|
|
15
13
|
export?: E;
|
|
16
14
|
}): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? Record<string, never> : Parameters<T[E]>[0] : Record<string, never>) => React.JSX.Element;
|
|
17
15
|
export {};
|
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-20240701075157",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist/",
|
|
6
6
|
"types.d.ts",
|
|
@@ -47,17 +47,19 @@
|
|
|
47
47
|
"@modern-js/node-bundle-require": "^2.54.2",
|
|
48
48
|
"node-fetch": "~3.3.0",
|
|
49
49
|
"react-error-boundary": "4.0.13",
|
|
50
|
-
"
|
|
51
|
-
"@module-federation/
|
|
52
|
-
"@module-federation/
|
|
50
|
+
"hoist-non-react-statics": "3.3.2",
|
|
51
|
+
"@module-federation/sdk": "0.0.0-next-20240701075157",
|
|
52
|
+
"@module-federation/enhanced": "0.0.0-next-20240701075157",
|
|
53
|
+
"@module-federation/node": "0.0.0-next-20240701075157"
|
|
53
54
|
},
|
|
54
55
|
"devDependencies": {
|
|
56
|
+
"@types/hoist-non-react-statics": "3.3.2",
|
|
55
57
|
"@modern-js/app-tools": "^2.54.2",
|
|
56
58
|
"@modern-js/core": "^2.54.2",
|
|
57
59
|
"@modern-js/runtime": "^2.54.2",
|
|
58
60
|
"@modern-js/module-tools": "^2.54.2",
|
|
59
61
|
"@modern-js/tsconfig": "^2.54.2",
|
|
60
|
-
"@module-federation/manifest": "0.0.0-next-
|
|
62
|
+
"@module-federation/manifest": "0.0.0-next-20240701075157"
|
|
61
63
|
},
|
|
62
64
|
"peerDependencies": {
|
|
63
65
|
"react": ">=17",
|
|
File without changes
|
|
File without changes
|
|
File without changes
|