@module-federation/modern-js 0.0.0-next-20240909092952 → 0.0.0-next-20240910102933
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/dataLoader/patchMFConfig.js +15 -7
- package/dist/cjs/cli/dataLoader/plugin.js +6 -1
- package/dist/cjs/cli/mfRuntimePlugins/{inject-node-fetch.js → node-fetch.js} +14 -11
- package/dist/cjs/cli/mfRuntimePlugins/node.js +7 -10
- package/dist/cjs/cli/utils.js +4 -3
- package/dist/cjs/cli/utils.spec.js +5 -6
- package/dist/cjs/runtime/dataLoader/plugin-inject-assets.js +84 -0
- package/dist/cjs/runtime/dataLoader/plugin.js +1 -0
- package/dist/cjs/runtime/dataLoader/utils.js +22 -5
- package/dist/esm/cli/dataLoader/patchMFConfig.js +15 -7
- package/dist/esm/cli/dataLoader/plugin.js +6 -1
- package/dist/esm/cli/mfRuntimePlugins/node-fetch.js +16 -0
- package/dist/esm/cli/mfRuntimePlugins/node.js +7 -10
- package/dist/esm/cli/utils.js +4 -3
- package/dist/esm/cli/utils.spec.js +5 -6
- package/dist/esm/runtime/dataLoader/plugin-inject-assets.js +63 -0
- package/dist/esm/runtime/dataLoader/plugin.js +1 -0
- package/dist/esm/runtime/dataLoader/utils.js +18 -4
- package/dist/esm-node/cli/dataLoader/patchMFConfig.js +15 -7
- package/dist/esm-node/cli/dataLoader/plugin.js +6 -1
- package/dist/esm-node/cli/mfRuntimePlugins/node-fetch.js +14 -0
- package/dist/esm-node/cli/mfRuntimePlugins/node.js +7 -10
- package/dist/esm-node/cli/utils.js +4 -3
- package/dist/esm-node/cli/utils.spec.js +5 -6
- package/dist/esm-node/runtime/dataLoader/plugin-inject-assets.js +60 -0
- package/dist/esm-node/runtime/dataLoader/plugin.js +1 -0
- package/dist/esm-node/runtime/dataLoader/utils.js +18 -4
- package/dist/types/cli/mfRuntimePlugins/node-fetch.d.ts +3 -0
- package/dist/types/cli/mfRuntimePlugins/node.d.ts +2 -2
- package/dist/types/runtime/dataLoader/plugin-inject-assets.d.ts +2 -0
- package/dist/types/runtime/dataLoader/utils.d.ts +3 -0
- package/package.json +13 -5
- package/dist/cjs/cli/mfRuntimePlugins/shared-strategy.js +0 -43
- package/dist/cjs/runtime/utils.js +0 -38
- package/dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js +0 -13
- package/dist/esm/cli/mfRuntimePlugins/shared-strategy.js +0 -25
- package/dist/esm/runtime/utils.js +0 -13
- package/dist/esm-node/cli/mfRuntimePlugins/inject-node-fetch.js +0 -11
- package/dist/esm-node/cli/mfRuntimePlugins/shared-strategy.js +0 -23
- package/dist/esm-node/runtime/utils.js +0 -13
- package/dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts +0 -3
- package/dist/types/cli/mfRuntimePlugins/shared-strategy.d.ts +0 -3
- package/dist/types/runtime/utils.d.ts +0 -2
|
@@ -60,16 +60,20 @@ function generateExtraExposeFiles(options) {
|
|
|
60
60
|
});
|
|
61
61
|
const routeServerLoaderPath = import_path.default.resolve(sourceDir, `${import_constant.MODERN_JS_ROUTE_SERVER_LOADER}.js`);
|
|
62
62
|
const outputRouteServerLoaderPath = import_path.default.resolve(outputEntryDir, `${import_constant.MODERN_JS_ROUTE_SERVER_LOADER}.js`);
|
|
63
|
+
const clientRouteServerLoaderPath = outputRouteServerLoaderPath.replace(import_constant.MODERN_JS_ROUTE_SERVER_LOADER, `${import_constant.MODERN_JS_ROUTE_SERVER_LOADER}-client`);
|
|
63
64
|
if (isServer) {
|
|
64
65
|
const routeServerLoaderContent = import_utils.fs.readFileSync(routeServerLoaderPath, "utf-8");
|
|
65
66
|
(0, import_ast.generateRoutes)({
|
|
66
67
|
sourceCode: routeServerLoaderContent,
|
|
67
68
|
filePath: outputRouteServerLoaderPath
|
|
68
69
|
});
|
|
70
|
+
} else {
|
|
71
|
+
import_utils.fs.writeFileSync(clientRouteServerLoaderPath, `export const routes = []`);
|
|
69
72
|
}
|
|
70
73
|
entryMap[entry] = {
|
|
71
74
|
routesPath: outputFullRoutesPath,
|
|
72
|
-
routeServerLoaderPath: outputRouteServerLoaderPath
|
|
75
|
+
routeServerLoaderPath: outputRouteServerLoaderPath,
|
|
76
|
+
clientRouteServerLoaderPath
|
|
73
77
|
};
|
|
74
78
|
};
|
|
75
79
|
entries.forEach((entry) => {
|
|
@@ -82,10 +86,10 @@ function generateExtraExposeFiles(options) {
|
|
|
82
86
|
function addExpose(options) {
|
|
83
87
|
const { mfConfig, isServer } = options;
|
|
84
88
|
if (mfConfig.remotes && mfConfig.exposes) {
|
|
85
|
-
throw new Error(`dataLoader only support for pure provider/consumer
|
|
89
|
+
throw new Error(`dataLoader only support for pure provider/consumer!`);
|
|
86
90
|
}
|
|
87
91
|
const { entryMap } = generateExtraExposeFiles(options);
|
|
88
|
-
const addExposeByEntry = (entry, routesPath, routeServerLoaderPath) => {
|
|
92
|
+
const addExposeByEntry = (entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath) => {
|
|
89
93
|
if (!mfConfig.exposes) {
|
|
90
94
|
mfConfig.exposes = {};
|
|
91
95
|
}
|
|
@@ -94,13 +98,17 @@ function addExpose(options) {
|
|
|
94
98
|
mfConfig.exposes[routesKey] = routesPath;
|
|
95
99
|
}
|
|
96
100
|
const routeServerLoaderKey = `./${entry}/${import_constant.MODERN_JS_ROUTE_SERVER_LOADER}`;
|
|
97
|
-
if (
|
|
98
|
-
|
|
101
|
+
if (!mfConfig.exposes[routeServerLoaderKey]) {
|
|
102
|
+
if (isServer) {
|
|
103
|
+
mfConfig.exposes[routeServerLoaderKey] = routeServerLoaderPath;
|
|
104
|
+
} else {
|
|
105
|
+
mfConfig.exposes[routeServerLoaderKey] = clientRouteServerLoaderPath;
|
|
106
|
+
}
|
|
99
107
|
}
|
|
100
108
|
};
|
|
101
109
|
Object.keys(entryMap).forEach((entry) => {
|
|
102
|
-
const { routesPath, routeServerLoaderPath } = entryMap[entry];
|
|
103
|
-
addExposeByEntry(entry, routesPath, routeServerLoaderPath);
|
|
110
|
+
const { routesPath, routeServerLoaderPath, clientRouteServerLoaderPath } = entryMap[entry];
|
|
111
|
+
addExposeByEntry(entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath);
|
|
104
112
|
});
|
|
105
113
|
}
|
|
106
114
|
function addShared(options) {
|
|
@@ -33,7 +33,7 @@ __export(plugin_exports, {
|
|
|
33
33
|
moduleFederationDataLoaderPlugin: () => moduleFederationDataLoaderPlugin
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(plugin_exports);
|
|
36
|
-
var import_utils = require("../../runtime/utils");
|
|
36
|
+
var import_utils = require("../../runtime/dataLoader/utils");
|
|
37
37
|
var import_constant = require("../../constant");
|
|
38
38
|
var import_constant2 = require("../../constant");
|
|
39
39
|
var import_ast = require("./ast");
|
|
@@ -105,6 +105,11 @@ const moduleFederationDataLoaderPlugin = (enable, internalOptions, userConfig) =
|
|
|
105
105
|
path: "@module-federation/modern-js/data-loader",
|
|
106
106
|
config: {}
|
|
107
107
|
});
|
|
108
|
+
plugins.push({
|
|
109
|
+
name: "ssrDataLoaderInjectAssets",
|
|
110
|
+
path: "@module-federation/modern-js/data-loader-inject-assets",
|
|
111
|
+
config: {}
|
|
112
|
+
});
|
|
108
113
|
return {
|
|
109
114
|
entrypoint,
|
|
110
115
|
plugins
|
|
@@ -26,16 +26,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
31
|
-
default: () =>
|
|
29
|
+
var node_fetch_exports = {};
|
|
30
|
+
__export(node_fetch_exports, {
|
|
31
|
+
default: () => node_fetch_default
|
|
32
32
|
});
|
|
33
|
-
module.exports = __toCommonJS(
|
|
34
|
-
var
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
module.exports = __toCommonJS(node_fetch_exports);
|
|
34
|
+
var import_node_fetch = __toESM(require("node-fetch"));
|
|
35
|
+
const injectNodeFetchPlugin = () => ({
|
|
36
|
+
name: "node-fetch-plugin",
|
|
37
|
+
beforeInit(args) {
|
|
38
|
+
if (!globalThis.fetch) {
|
|
39
|
+
globalThis.fetch = import_node_fetch.default;
|
|
40
|
+
}
|
|
41
|
+
return args;
|
|
42
|
+
}
|
|
40
43
|
});
|
|
41
|
-
var
|
|
44
|
+
var node_fetch_default = injectNodeFetchPlugin;
|
|
@@ -31,14 +31,11 @@ __export(node_exports, {
|
|
|
31
31
|
default: () => node_default
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(node_exports);
|
|
34
|
-
var
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
return args;
|
|
42
|
-
}
|
|
34
|
+
var import_runtimePlugin = __toESM(require("@module-federation/node/runtimePlugin"));
|
|
35
|
+
const isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
|
|
36
|
+
const pluginName = `node-plugin-${isContainer}`;
|
|
37
|
+
const nodePlugin = () => ({
|
|
38
|
+
name: pluginName,
|
|
39
|
+
beforeInit: (0, import_runtimePlugin.default)().beforeInit
|
|
43
40
|
});
|
|
44
|
-
var node_default =
|
|
41
|
+
var node_default = nodePlugin;
|
package/dist/cjs/cli/utils.js
CHANGED
|
@@ -136,17 +136,18 @@ const patchMFConfig = (mfConfig, isServer, remoteIpStrategy) => {
|
|
|
136
136
|
const runtimePlugins = [
|
|
137
137
|
...mfConfig.runtimePlugins || []
|
|
138
138
|
];
|
|
139
|
+
var _mfConfig_shareStrategy;
|
|
140
|
+
mfConfig.shareStrategy = (_mfConfig_shareStrategy = mfConfig.shareStrategy) !== null && _mfConfig_shareStrategy !== void 0 ? _mfConfig_shareStrategy : "loaded-first";
|
|
139
141
|
patchDTSConfig(mfConfig, isServer);
|
|
140
|
-
injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
|
|
141
142
|
if (isDev) {
|
|
142
143
|
injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
|
|
143
144
|
}
|
|
144
145
|
if (isServer) {
|
|
145
|
-
injectRuntimePlugins(
|
|
146
|
+
injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/node.js"), runtimePlugins);
|
|
146
147
|
if (isDev) {
|
|
147
148
|
injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
|
|
148
149
|
}
|
|
149
|
-
injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/
|
|
150
|
+
injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js"), runtimePlugins);
|
|
150
151
|
if (!mfConfig.library) {
|
|
151
152
|
mfConfig.library = {
|
|
152
153
|
type: "commonjs-module",
|
|
@@ -59,10 +59,10 @@ const mfConfig = {
|
|
|
59
59
|
remote: `http://${ipv4}:3000/remoteEntry.js`
|
|
60
60
|
},
|
|
61
61
|
remoteType: "script",
|
|
62
|
+
shareStrategy: "loaded-first",
|
|
62
63
|
runtimePlugins: [
|
|
63
|
-
import_path.default.resolve(__dirname, "./mfRuntimePlugins/
|
|
64
|
-
|
|
65
|
-
import_path.default.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js")
|
|
64
|
+
import_path.default.resolve(__dirname, "./mfRuntimePlugins/node.js"),
|
|
65
|
+
import_path.default.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js")
|
|
66
66
|
],
|
|
67
67
|
shared: {
|
|
68
68
|
react: {
|
|
@@ -87,9 +87,8 @@ const mfConfig = {
|
|
|
87
87
|
remote: `http://${ipv4}:3000/remoteEntry.js`
|
|
88
88
|
},
|
|
89
89
|
remoteType: "script",
|
|
90
|
-
runtimePlugins: [
|
|
91
|
-
|
|
92
|
-
],
|
|
90
|
+
runtimePlugins: [],
|
|
91
|
+
shareStrategy: "loaded-first",
|
|
93
92
|
shared: {
|
|
94
93
|
react: {
|
|
95
94
|
eager: true,
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var plugin_inject_assets_exports = {};
|
|
20
|
+
__export(plugin_inject_assets_exports, {
|
|
21
|
+
ssrDataLoaderInjectAssetsPlugin: () => ssrDataLoaderInjectAssetsPlugin
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(plugin_inject_assets_exports);
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var import_runtime = require("@module-federation/enhanced/runtime");
|
|
27
|
+
var import_createRemoteSSRComponent = require("../createRemoteSSRComponent");
|
|
28
|
+
var import_runtime2 = require("@meta/runtime");
|
|
29
|
+
var import_utils = require("./utils");
|
|
30
|
+
const ssrDataLoaderInjectAssetsPlugin = () => {
|
|
31
|
+
return {
|
|
32
|
+
name: "@modern-js/plugin-mf-data-loader-inject-assets",
|
|
33
|
+
pre: [
|
|
34
|
+
"@modern-js/plugin-router",
|
|
35
|
+
"@modern-js/plugin-mf-data-loader"
|
|
36
|
+
],
|
|
37
|
+
setup: () => {
|
|
38
|
+
return {
|
|
39
|
+
wrapRoot(App) {
|
|
40
|
+
const AppWrapper = (props) => {
|
|
41
|
+
var _context_routerContext;
|
|
42
|
+
const instance = (0, import_runtime.getInstance)();
|
|
43
|
+
if (!instance || !instance.options.remotes.length) {
|
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
45
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
|
|
46
|
+
...props
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
const context = (0, import_react.useContext)(import_runtime2.RuntimeReactContext);
|
|
51
|
+
const { remotes } = instance.options;
|
|
52
|
+
const remoteNames = ((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.matches.map((match) => (0, import_utils.decodeId)(match.route.id))) || [];
|
|
53
|
+
const remoteIds = remoteNames.reduce((sum, cur) => {
|
|
54
|
+
const matchRemote = remotes.find((r) => r.name === cur);
|
|
55
|
+
if (matchRemote) {
|
|
56
|
+
sum.add((0, import_utils.getRemoteId)(cur));
|
|
57
|
+
}
|
|
58
|
+
return sum;
|
|
59
|
+
}, /* @__PURE__ */ new Set());
|
|
60
|
+
const assets = [];
|
|
61
|
+
remoteIds.forEach((remoteId) => {
|
|
62
|
+
assets.push(...(0, import_createRemoteSSRComponent.collectSSRAssets)({
|
|
63
|
+
id: remoteId
|
|
64
|
+
}));
|
|
65
|
+
});
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
67
|
+
children: [
|
|
68
|
+
assets,
|
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
|
|
70
|
+
...props
|
|
71
|
+
})
|
|
72
|
+
]
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
return AppWrapper;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
82
|
+
0 && (module.exports = {
|
|
83
|
+
ssrDataLoaderInjectAssetsPlugin
|
|
84
|
+
});
|
|
@@ -18,18 +18,29 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var utils_exports = {};
|
|
20
20
|
__export(utils_exports, {
|
|
21
|
+
decodeId: () => decodeId,
|
|
22
|
+
getRemoteId: () => getRemoteId,
|
|
21
23
|
getRemoteLayoutId: () => getRemoteLayoutId,
|
|
22
24
|
getRemoteRoutesInfos: () => getRemoteRoutesInfos,
|
|
23
|
-
injectRemoteRoutes: () => injectRemoteRoutes
|
|
25
|
+
injectRemoteRoutes: () => injectRemoteRoutes,
|
|
26
|
+
transformName2Prefix: () => transformName2Prefix
|
|
24
27
|
});
|
|
25
28
|
module.exports = __toCommonJS(utils_exports);
|
|
29
|
+
var import_sdk = require("@module-federation/sdk");
|
|
26
30
|
var import_constant = require("../../constant");
|
|
27
|
-
|
|
31
|
+
const SPLIT_SYMBOL = "@";
|
|
32
|
+
function transformName2Prefix(name) {
|
|
33
|
+
return `${(0, import_sdk.encodeName)(name, "", false)}${SPLIT_SYMBOL}`;
|
|
34
|
+
}
|
|
35
|
+
function decodeId(prefix) {
|
|
36
|
+
const realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
37
|
+
return (0, import_sdk.decodeName)(realPrefix, "", false);
|
|
38
|
+
}
|
|
28
39
|
function getRemoteRoutesInfos(route, remoteRoutesMap) {
|
|
29
40
|
if (!route.id) {
|
|
30
41
|
return;
|
|
31
42
|
}
|
|
32
|
-
const remoteName = (
|
|
43
|
+
const remoteName = decodeId(route.id);
|
|
33
44
|
const remoteRouteObj = remoteRoutesMap[remoteName];
|
|
34
45
|
if (!remoteRouteObj) {
|
|
35
46
|
return;
|
|
@@ -42,9 +53,12 @@ function getRemoteRoutesInfos(route, remoteRoutesMap) {
|
|
|
42
53
|
};
|
|
43
54
|
}
|
|
44
55
|
function getRemoteLayoutId(remoteName) {
|
|
45
|
-
const prefix =
|
|
56
|
+
const prefix = transformName2Prefix(remoteName);
|
|
46
57
|
return `${prefix}${import_constant.DEFAULT_LAYOUT}`;
|
|
47
58
|
}
|
|
59
|
+
function getRemoteId(remoteName) {
|
|
60
|
+
return `${remoteName}/${import_constant.DEFAULT_ENTRY}/${import_constant.MF_ROUTES}`;
|
|
61
|
+
}
|
|
48
62
|
function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
49
63
|
const traverse = (route) => {
|
|
50
64
|
var _route_children;
|
|
@@ -83,7 +97,10 @@ function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
|
83
97
|
}
|
|
84
98
|
// Annotate the CommonJS export names for ESM import in node:
|
|
85
99
|
0 && (module.exports = {
|
|
100
|
+
decodeId,
|
|
101
|
+
getRemoteId,
|
|
86
102
|
getRemoteLayoutId,
|
|
87
103
|
getRemoteRoutesInfos,
|
|
88
|
-
injectRemoteRoutes
|
|
104
|
+
injectRemoteRoutes,
|
|
105
|
+
transformName2Prefix
|
|
89
106
|
});
|
|
@@ -29,16 +29,20 @@ function generateExtraExposeFiles(options) {
|
|
|
29
29
|
});
|
|
30
30
|
var routeServerLoaderPath = path.resolve(sourceDir, "".concat(MODERN_JS_ROUTE_SERVER_LOADER, ".js"));
|
|
31
31
|
var outputRouteServerLoaderPath = path.resolve(outputEntryDir, "".concat(MODERN_JS_ROUTE_SERVER_LOADER, ".js"));
|
|
32
|
+
var clientRouteServerLoaderPath = outputRouteServerLoaderPath.replace(MODERN_JS_ROUTE_SERVER_LOADER, "".concat(MODERN_JS_ROUTE_SERVER_LOADER, "-client"));
|
|
32
33
|
if (isServer) {
|
|
33
34
|
var routeServerLoaderContent = fs.readFileSync(routeServerLoaderPath, "utf-8");
|
|
34
35
|
generateRoutes({
|
|
35
36
|
sourceCode: routeServerLoaderContent,
|
|
36
37
|
filePath: outputRouteServerLoaderPath
|
|
37
38
|
});
|
|
39
|
+
} else {
|
|
40
|
+
fs.writeFileSync(clientRouteServerLoaderPath, "export const routes = []");
|
|
38
41
|
}
|
|
39
42
|
entryMap[entry] = {
|
|
40
43
|
routesPath: outputFullRoutesPath,
|
|
41
|
-
routeServerLoaderPath: outputRouteServerLoaderPath
|
|
44
|
+
routeServerLoaderPath: outputRouteServerLoaderPath,
|
|
45
|
+
clientRouteServerLoaderPath
|
|
42
46
|
};
|
|
43
47
|
};
|
|
44
48
|
entries.forEach(function(entry) {
|
|
@@ -51,10 +55,10 @@ function generateExtraExposeFiles(options) {
|
|
|
51
55
|
function addExpose(options) {
|
|
52
56
|
var mfConfig = options.mfConfig, isServer = options.isServer;
|
|
53
57
|
if (mfConfig.remotes && mfConfig.exposes) {
|
|
54
|
-
throw new Error("dataLoader only support for pure provider/consumer
|
|
58
|
+
throw new Error("dataLoader only support for pure provider/consumer!");
|
|
55
59
|
}
|
|
56
60
|
var entryMap = generateExtraExposeFiles(options).entryMap;
|
|
57
|
-
var addExposeByEntry = function(entry, routesPath, routeServerLoaderPath) {
|
|
61
|
+
var addExposeByEntry = function(entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath) {
|
|
58
62
|
if (!mfConfig.exposes) {
|
|
59
63
|
mfConfig.exposes = {};
|
|
60
64
|
}
|
|
@@ -63,13 +67,17 @@ function addExpose(options) {
|
|
|
63
67
|
mfConfig.exposes[routesKey] = routesPath;
|
|
64
68
|
}
|
|
65
69
|
var routeServerLoaderKey = "./".concat(entry, "/").concat(MODERN_JS_ROUTE_SERVER_LOADER);
|
|
66
|
-
if (
|
|
67
|
-
|
|
70
|
+
if (!mfConfig.exposes[routeServerLoaderKey]) {
|
|
71
|
+
if (isServer) {
|
|
72
|
+
mfConfig.exposes[routeServerLoaderKey] = routeServerLoaderPath;
|
|
73
|
+
} else {
|
|
74
|
+
mfConfig.exposes[routeServerLoaderKey] = clientRouteServerLoaderPath;
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
};
|
|
70
78
|
Object.keys(entryMap).forEach(function(entry) {
|
|
71
|
-
var _entryMap_entry = entryMap[entry], routesPath = _entryMap_entry.routesPath, routeServerLoaderPath = _entryMap_entry.routeServerLoaderPath;
|
|
72
|
-
addExposeByEntry(entry, routesPath, routeServerLoaderPath);
|
|
79
|
+
var _entryMap_entry = entryMap[entry], routesPath = _entryMap_entry.routesPath, routeServerLoaderPath = _entryMap_entry.routeServerLoaderPath, clientRouteServerLoaderPath = _entryMap_entry.clientRouteServerLoaderPath;
|
|
80
|
+
addExposeByEntry(entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath);
|
|
73
81
|
});
|
|
74
82
|
}
|
|
75
83
|
function addShared(options) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
2
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
3
3
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
4
|
-
import { transformName2Prefix } from "../../runtime/utils";
|
|
4
|
+
import { transformName2Prefix } from "../../runtime/dataLoader/utils";
|
|
5
5
|
import { DEFAULT_ENTRY } from "../../constant";
|
|
6
6
|
import { META_NAME } from "../../constant";
|
|
7
7
|
import { generateRoutes } from "./ast";
|
|
@@ -96,6 +96,11 @@ var moduleFederationDataLoaderPlugin = function(enable, internalOptions, userCon
|
|
|
96
96
|
path: "@module-federation/modern-js/data-loader",
|
|
97
97
|
config: {}
|
|
98
98
|
});
|
|
99
|
+
plugins.push({
|
|
100
|
+
name: "ssrDataLoaderInjectAssets",
|
|
101
|
+
path: "@module-federation/modern-js/data-loader-inject-assets",
|
|
102
|
+
config: {}
|
|
103
|
+
});
|
|
99
104
|
return {
|
|
100
105
|
entrypoint,
|
|
101
106
|
plugins
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import nodeFetch from "node-fetch";
|
|
2
|
+
var injectNodeFetchPlugin = function() {
|
|
3
|
+
return {
|
|
4
|
+
name: "node-fetch-plugin",
|
|
5
|
+
beforeInit: function beforeInit(args) {
|
|
6
|
+
if (!globalThis.fetch) {
|
|
7
|
+
globalThis.fetch = nodeFetch;
|
|
8
|
+
}
|
|
9
|
+
return args;
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
var node_fetch_default = injectNodeFetchPlugin;
|
|
14
|
+
export {
|
|
15
|
+
node_fetch_default as default
|
|
16
|
+
};
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
var
|
|
1
|
+
import nodeRuntimePlugin from "@module-federation/node/runtimePlugin";
|
|
2
|
+
var isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
|
|
3
|
+
var pluginName = "node-plugin-".concat(isContainer);
|
|
4
|
+
var nodePlugin = function() {
|
|
3
5
|
return {
|
|
4
|
-
name:
|
|
5
|
-
beforeInit:
|
|
6
|
-
if (!globalThis.fetch) {
|
|
7
|
-
globalThis.fetch = nodeFetch;
|
|
8
|
-
}
|
|
9
|
-
return args;
|
|
10
|
-
}
|
|
6
|
+
name: pluginName,
|
|
7
|
+
beforeInit: nodeRuntimePlugin().beforeInit
|
|
11
8
|
};
|
|
12
9
|
};
|
|
13
|
-
var node_default =
|
|
10
|
+
var node_default = nodePlugin;
|
|
14
11
|
export {
|
|
15
12
|
node_default as default
|
|
16
13
|
};
|
package/dist/esm/cli/utils.js
CHANGED
|
@@ -128,17 +128,18 @@ var patchMFConfig = function(mfConfig, isServer, remoteIpStrategy) {
|
|
|
128
128
|
throw new Error("".concat(PLUGIN_IDENTIFIER, " mfConfig.name can not be empty!"));
|
|
129
129
|
}
|
|
130
130
|
var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
|
|
131
|
+
var _mfConfig_shareStrategy;
|
|
132
|
+
mfConfig.shareStrategy = (_mfConfig_shareStrategy = mfConfig.shareStrategy) !== null && _mfConfig_shareStrategy !== void 0 ? _mfConfig_shareStrategy : "loaded-first";
|
|
131
133
|
patchDTSConfig(mfConfig, isServer);
|
|
132
|
-
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
|
|
133
134
|
if (isDev) {
|
|
134
135
|
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
|
|
135
136
|
}
|
|
136
137
|
if (isServer) {
|
|
137
|
-
injectRuntimePlugins(
|
|
138
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/node.js"), runtimePlugins);
|
|
138
139
|
if (isDev) {
|
|
139
140
|
injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
|
|
140
141
|
}
|
|
141
|
-
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/
|
|
142
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js"), runtimePlugins);
|
|
142
143
|
if (!mfConfig.library) {
|
|
143
144
|
mfConfig.library = {
|
|
144
145
|
type: "commonjs-module",
|
|
@@ -41,10 +41,10 @@ describe("patchMFConfig", /* @__PURE__ */ _async_to_generator(function() {
|
|
|
41
41
|
remote: "http://".concat(ipv4, ":3000/remoteEntry.js")
|
|
42
42
|
},
|
|
43
43
|
remoteType: "script",
|
|
44
|
+
shareStrategy: "loaded-first",
|
|
44
45
|
runtimePlugins: [
|
|
45
|
-
path.resolve(__dirname, "./mfRuntimePlugins/
|
|
46
|
-
|
|
47
|
-
path.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js")
|
|
46
|
+
path.resolve(__dirname, "./mfRuntimePlugins/node.js"),
|
|
47
|
+
path.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js")
|
|
48
48
|
],
|
|
49
49
|
shared: {
|
|
50
50
|
react: {
|
|
@@ -75,9 +75,8 @@ describe("patchMFConfig", /* @__PURE__ */ _async_to_generator(function() {
|
|
|
75
75
|
remote: "http://".concat(ipv4, ":3000/remoteEntry.js")
|
|
76
76
|
},
|
|
77
77
|
remoteType: "script",
|
|
78
|
-
runtimePlugins: [
|
|
79
|
-
|
|
80
|
-
],
|
|
78
|
+
runtimePlugins: [],
|
|
79
|
+
shareStrategy: "loaded-first",
|
|
81
80
|
shared: {
|
|
82
81
|
react: {
|
|
83
82
|
eager: true,
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
|
+
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
|
+
import { useContext } from "react";
|
|
5
|
+
import { getInstance } from "@module-federation/enhanced/runtime";
|
|
6
|
+
import { collectSSRAssets } from "../createRemoteSSRComponent";
|
|
7
|
+
import { RuntimeReactContext } from "@meta/runtime";
|
|
8
|
+
import { decodeId, getRemoteId } from "./utils";
|
|
9
|
+
var ssrDataLoaderInjectAssetsPlugin = function() {
|
|
10
|
+
return {
|
|
11
|
+
name: "@modern-js/plugin-mf-data-loader-inject-assets",
|
|
12
|
+
pre: [
|
|
13
|
+
"@modern-js/plugin-router",
|
|
14
|
+
"@modern-js/plugin-mf-data-loader"
|
|
15
|
+
],
|
|
16
|
+
setup: function() {
|
|
17
|
+
return {
|
|
18
|
+
wrapRoot: function wrapRoot(App) {
|
|
19
|
+
var AppWrapper = function(props) {
|
|
20
|
+
var _context_routerContext;
|
|
21
|
+
var instance = getInstance();
|
|
22
|
+
if (!instance || !instance.options.remotes.length) {
|
|
23
|
+
return /* @__PURE__ */ _jsx(_Fragment, {
|
|
24
|
+
children: /* @__PURE__ */ _jsx(App, _object_spread({}, props))
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
var context = useContext(RuntimeReactContext);
|
|
28
|
+
var remotes = instance.options.remotes;
|
|
29
|
+
var remoteNames = ((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.matches.map(function(match) {
|
|
30
|
+
return decodeId(match.route.id);
|
|
31
|
+
})) || [];
|
|
32
|
+
var remoteIds = remoteNames.reduce(function(sum, cur) {
|
|
33
|
+
var matchRemote = remotes.find(function(r) {
|
|
34
|
+
return r.name === cur;
|
|
35
|
+
});
|
|
36
|
+
if (matchRemote) {
|
|
37
|
+
sum.add(getRemoteId(cur));
|
|
38
|
+
}
|
|
39
|
+
return sum;
|
|
40
|
+
}, /* @__PURE__ */ new Set());
|
|
41
|
+
var assets = [];
|
|
42
|
+
remoteIds.forEach(function(remoteId) {
|
|
43
|
+
var _assets;
|
|
44
|
+
(_assets = assets).push.apply(_assets, _to_consumable_array(collectSSRAssets({
|
|
45
|
+
id: remoteId
|
|
46
|
+
})));
|
|
47
|
+
});
|
|
48
|
+
return /* @__PURE__ */ _jsxs(_Fragment, {
|
|
49
|
+
children: [
|
|
50
|
+
assets,
|
|
51
|
+
/* @__PURE__ */ _jsx(App, _object_spread({}, props))
|
|
52
|
+
]
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
return AppWrapper;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
export {
|
|
62
|
+
ssrDataLoaderInjectAssetsPlugin
|
|
63
|
+
};
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { encodeName, decodeName } from "@module-federation/sdk";
|
|
2
|
+
import { DEFAULT_ENTRY, DEFAULT_LAYOUT, MF_ROUTES } from "../../constant";
|
|
3
|
+
var SPLIT_SYMBOL = "@";
|
|
4
|
+
function transformName2Prefix(name) {
|
|
5
|
+
return "".concat(encodeName(name, "", false)).concat(SPLIT_SYMBOL);
|
|
6
|
+
}
|
|
7
|
+
function decodeId(prefix) {
|
|
8
|
+
var realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
9
|
+
return decodeName(realPrefix, "", false);
|
|
10
|
+
}
|
|
3
11
|
function getRemoteRoutesInfos(route, remoteRoutesMap) {
|
|
4
12
|
if (!route.id) {
|
|
5
13
|
return;
|
|
6
14
|
}
|
|
7
|
-
var remoteName =
|
|
15
|
+
var remoteName = decodeId(route.id);
|
|
8
16
|
var remoteRouteObj = remoteRoutesMap[remoteName];
|
|
9
17
|
if (!remoteRouteObj) {
|
|
10
18
|
return;
|
|
@@ -20,6 +28,9 @@ function getRemoteLayoutId(remoteName) {
|
|
|
20
28
|
var prefix = transformName2Prefix(remoteName);
|
|
21
29
|
return "".concat(prefix).concat(DEFAULT_LAYOUT);
|
|
22
30
|
}
|
|
31
|
+
function getRemoteId(remoteName) {
|
|
32
|
+
return "".concat(remoteName, "/").concat(DEFAULT_ENTRY, "/").concat(MF_ROUTES);
|
|
33
|
+
}
|
|
23
34
|
function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
24
35
|
var traverse = function(route) {
|
|
25
36
|
var _route_children;
|
|
@@ -57,7 +68,10 @@ function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
|
57
68
|
});
|
|
58
69
|
}
|
|
59
70
|
export {
|
|
71
|
+
decodeId,
|
|
72
|
+
getRemoteId,
|
|
60
73
|
getRemoteLayoutId,
|
|
61
74
|
getRemoteRoutesInfos,
|
|
62
|
-
injectRemoteRoutes
|
|
75
|
+
injectRemoteRoutes,
|
|
76
|
+
transformName2Prefix
|
|
63
77
|
};
|
|
@@ -27,16 +27,20 @@ function generateExtraExposeFiles(options) {
|
|
|
27
27
|
});
|
|
28
28
|
const routeServerLoaderPath = path.resolve(sourceDir, `${MODERN_JS_ROUTE_SERVER_LOADER}.js`);
|
|
29
29
|
const outputRouteServerLoaderPath = path.resolve(outputEntryDir, `${MODERN_JS_ROUTE_SERVER_LOADER}.js`);
|
|
30
|
+
const clientRouteServerLoaderPath = outputRouteServerLoaderPath.replace(MODERN_JS_ROUTE_SERVER_LOADER, `${MODERN_JS_ROUTE_SERVER_LOADER}-client`);
|
|
30
31
|
if (isServer) {
|
|
31
32
|
const routeServerLoaderContent = fs.readFileSync(routeServerLoaderPath, "utf-8");
|
|
32
33
|
generateRoutes({
|
|
33
34
|
sourceCode: routeServerLoaderContent,
|
|
34
35
|
filePath: outputRouteServerLoaderPath
|
|
35
36
|
});
|
|
37
|
+
} else {
|
|
38
|
+
fs.writeFileSync(clientRouteServerLoaderPath, `export const routes = []`);
|
|
36
39
|
}
|
|
37
40
|
entryMap[entry] = {
|
|
38
41
|
routesPath: outputFullRoutesPath,
|
|
39
|
-
routeServerLoaderPath: outputRouteServerLoaderPath
|
|
42
|
+
routeServerLoaderPath: outputRouteServerLoaderPath,
|
|
43
|
+
clientRouteServerLoaderPath
|
|
40
44
|
};
|
|
41
45
|
};
|
|
42
46
|
entries.forEach((entry) => {
|
|
@@ -49,10 +53,10 @@ function generateExtraExposeFiles(options) {
|
|
|
49
53
|
function addExpose(options) {
|
|
50
54
|
const { mfConfig, isServer } = options;
|
|
51
55
|
if (mfConfig.remotes && mfConfig.exposes) {
|
|
52
|
-
throw new Error(`dataLoader only support for pure provider/consumer
|
|
56
|
+
throw new Error(`dataLoader only support for pure provider/consumer!`);
|
|
53
57
|
}
|
|
54
58
|
const { entryMap } = generateExtraExposeFiles(options);
|
|
55
|
-
const addExposeByEntry = (entry, routesPath, routeServerLoaderPath) => {
|
|
59
|
+
const addExposeByEntry = (entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath) => {
|
|
56
60
|
if (!mfConfig.exposes) {
|
|
57
61
|
mfConfig.exposes = {};
|
|
58
62
|
}
|
|
@@ -61,13 +65,17 @@ function addExpose(options) {
|
|
|
61
65
|
mfConfig.exposes[routesKey] = routesPath;
|
|
62
66
|
}
|
|
63
67
|
const routeServerLoaderKey = `./${entry}/${MODERN_JS_ROUTE_SERVER_LOADER}`;
|
|
64
|
-
if (
|
|
65
|
-
|
|
68
|
+
if (!mfConfig.exposes[routeServerLoaderKey]) {
|
|
69
|
+
if (isServer) {
|
|
70
|
+
mfConfig.exposes[routeServerLoaderKey] = routeServerLoaderPath;
|
|
71
|
+
} else {
|
|
72
|
+
mfConfig.exposes[routeServerLoaderKey] = clientRouteServerLoaderPath;
|
|
73
|
+
}
|
|
66
74
|
}
|
|
67
75
|
};
|
|
68
76
|
Object.keys(entryMap).forEach((entry) => {
|
|
69
|
-
const { routesPath, routeServerLoaderPath } = entryMap[entry];
|
|
70
|
-
addExposeByEntry(entry, routesPath, routeServerLoaderPath);
|
|
77
|
+
const { routesPath, routeServerLoaderPath, clientRouteServerLoaderPath } = entryMap[entry];
|
|
78
|
+
addExposeByEntry(entry, routesPath, routeServerLoaderPath, clientRouteServerLoaderPath);
|
|
71
79
|
});
|
|
72
80
|
}
|
|
73
81
|
function addShared(options) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { transformName2Prefix } from "../../runtime/utils";
|
|
1
|
+
import { transformName2Prefix } from "../../runtime/dataLoader/utils";
|
|
2
2
|
import { DEFAULT_ENTRY } from "../../constant";
|
|
3
3
|
import { META_NAME } from "../../constant";
|
|
4
4
|
import { generateRoutes } from "./ast";
|
|
@@ -70,6 +70,11 @@ const moduleFederationDataLoaderPlugin = (enable, internalOptions, userConfig) =
|
|
|
70
70
|
path: "@module-federation/modern-js/data-loader",
|
|
71
71
|
config: {}
|
|
72
72
|
});
|
|
73
|
+
plugins.push({
|
|
74
|
+
name: "ssrDataLoaderInjectAssets",
|
|
75
|
+
path: "@module-federation/modern-js/data-loader-inject-assets",
|
|
76
|
+
config: {}
|
|
77
|
+
});
|
|
73
78
|
return {
|
|
74
79
|
entrypoint,
|
|
75
80
|
plugins
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import nodeFetch from "node-fetch";
|
|
2
|
+
const injectNodeFetchPlugin = () => ({
|
|
3
|
+
name: "node-fetch-plugin",
|
|
4
|
+
beforeInit(args) {
|
|
5
|
+
if (!globalThis.fetch) {
|
|
6
|
+
globalThis.fetch = nodeFetch;
|
|
7
|
+
}
|
|
8
|
+
return args;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var node_fetch_default = injectNodeFetchPlugin;
|
|
12
|
+
export {
|
|
13
|
+
node_fetch_default as default
|
|
14
|
+
};
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
return args;
|
|
9
|
-
}
|
|
1
|
+
import nodeRuntimePlugin from "@module-federation/node/runtimePlugin";
|
|
2
|
+
const isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
|
|
3
|
+
const pluginName = `node-plugin-${isContainer}`;
|
|
4
|
+
const nodePlugin = () => ({
|
|
5
|
+
name: pluginName,
|
|
6
|
+
beforeInit: nodeRuntimePlugin().beforeInit
|
|
10
7
|
});
|
|
11
|
-
var node_default =
|
|
8
|
+
var node_default = nodePlugin;
|
|
12
9
|
export {
|
|
13
10
|
node_default as default
|
|
14
11
|
};
|
|
@@ -98,17 +98,18 @@ const patchMFConfig = (mfConfig, isServer, remoteIpStrategy) => {
|
|
|
98
98
|
const runtimePlugins = [
|
|
99
99
|
...mfConfig.runtimePlugins || []
|
|
100
100
|
];
|
|
101
|
+
var _mfConfig_shareStrategy;
|
|
102
|
+
mfConfig.shareStrategy = (_mfConfig_shareStrategy = mfConfig.shareStrategy) !== null && _mfConfig_shareStrategy !== void 0 ? _mfConfig_shareStrategy : "loaded-first";
|
|
101
103
|
patchDTSConfig(mfConfig, isServer);
|
|
102
|
-
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
|
|
103
104
|
if (isDev) {
|
|
104
105
|
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
|
|
105
106
|
}
|
|
106
107
|
if (isServer) {
|
|
107
|
-
injectRuntimePlugins(
|
|
108
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/node.js"), runtimePlugins);
|
|
108
109
|
if (isDev) {
|
|
109
110
|
injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
|
|
110
111
|
}
|
|
111
|
-
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/
|
|
112
|
+
injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js"), runtimePlugins);
|
|
112
113
|
if (!mfConfig.library) {
|
|
113
114
|
mfConfig.library = {
|
|
114
115
|
type: "commonjs-module",
|
|
@@ -36,10 +36,10 @@ describe("patchMFConfig", async () => {
|
|
|
36
36
|
remote: `http://${ipv4}:3000/remoteEntry.js`
|
|
37
37
|
},
|
|
38
38
|
remoteType: "script",
|
|
39
|
+
shareStrategy: "loaded-first",
|
|
39
40
|
runtimePlugins: [
|
|
40
|
-
path.resolve(__dirname, "./mfRuntimePlugins/
|
|
41
|
-
|
|
42
|
-
path.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js")
|
|
41
|
+
path.resolve(__dirname, "./mfRuntimePlugins/node.js"),
|
|
42
|
+
path.resolve(__dirname, "./mfRuntimePlugins/node-fetch.js")
|
|
43
43
|
],
|
|
44
44
|
shared: {
|
|
45
45
|
react: {
|
|
@@ -64,9 +64,8 @@ describe("patchMFConfig", async () => {
|
|
|
64
64
|
remote: `http://${ipv4}:3000/remoteEntry.js`
|
|
65
65
|
},
|
|
66
66
|
remoteType: "script",
|
|
67
|
-
runtimePlugins: [
|
|
68
|
-
|
|
69
|
-
],
|
|
67
|
+
runtimePlugins: [],
|
|
68
|
+
shareStrategy: "loaded-first",
|
|
70
69
|
shared: {
|
|
71
70
|
react: {
|
|
72
71
|
eager: true,
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { getInstance } from "@module-federation/enhanced/runtime";
|
|
4
|
+
import { collectSSRAssets } from "../createRemoteSSRComponent";
|
|
5
|
+
import { RuntimeReactContext } from "@meta/runtime";
|
|
6
|
+
import { decodeId, getRemoteId } from "./utils";
|
|
7
|
+
const ssrDataLoaderInjectAssetsPlugin = () => {
|
|
8
|
+
return {
|
|
9
|
+
name: "@modern-js/plugin-mf-data-loader-inject-assets",
|
|
10
|
+
pre: [
|
|
11
|
+
"@modern-js/plugin-router",
|
|
12
|
+
"@modern-js/plugin-mf-data-loader"
|
|
13
|
+
],
|
|
14
|
+
setup: () => {
|
|
15
|
+
return {
|
|
16
|
+
wrapRoot(App) {
|
|
17
|
+
const AppWrapper = (props) => {
|
|
18
|
+
var _context_routerContext;
|
|
19
|
+
const instance = getInstance();
|
|
20
|
+
if (!instance || !instance.options.remotes.length) {
|
|
21
|
+
return /* @__PURE__ */ _jsx(_Fragment, {
|
|
22
|
+
children: /* @__PURE__ */ _jsx(App, {
|
|
23
|
+
...props
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
const context = useContext(RuntimeReactContext);
|
|
28
|
+
const { remotes } = instance.options;
|
|
29
|
+
const remoteNames = ((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.matches.map((match) => decodeId(match.route.id))) || [];
|
|
30
|
+
const remoteIds = remoteNames.reduce((sum, cur) => {
|
|
31
|
+
const matchRemote = remotes.find((r) => r.name === cur);
|
|
32
|
+
if (matchRemote) {
|
|
33
|
+
sum.add(getRemoteId(cur));
|
|
34
|
+
}
|
|
35
|
+
return sum;
|
|
36
|
+
}, /* @__PURE__ */ new Set());
|
|
37
|
+
const assets = [];
|
|
38
|
+
remoteIds.forEach((remoteId) => {
|
|
39
|
+
assets.push(...collectSSRAssets({
|
|
40
|
+
id: remoteId
|
|
41
|
+
}));
|
|
42
|
+
});
|
|
43
|
+
return /* @__PURE__ */ _jsxs(_Fragment, {
|
|
44
|
+
children: [
|
|
45
|
+
assets,
|
|
46
|
+
/* @__PURE__ */ _jsx(App, {
|
|
47
|
+
...props
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
return AppWrapper;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
ssrDataLoaderInjectAssetsPlugin
|
|
60
|
+
};
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { encodeName, decodeName } from "@module-federation/sdk";
|
|
2
|
+
import { DEFAULT_ENTRY, DEFAULT_LAYOUT, MF_ROUTES } from "../../constant";
|
|
3
|
+
const SPLIT_SYMBOL = "@";
|
|
4
|
+
function transformName2Prefix(name) {
|
|
5
|
+
return `${encodeName(name, "", false)}${SPLIT_SYMBOL}`;
|
|
6
|
+
}
|
|
7
|
+
function decodeId(prefix) {
|
|
8
|
+
const realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
9
|
+
return decodeName(realPrefix, "", false);
|
|
10
|
+
}
|
|
3
11
|
function getRemoteRoutesInfos(route, remoteRoutesMap) {
|
|
4
12
|
if (!route.id) {
|
|
5
13
|
return;
|
|
6
14
|
}
|
|
7
|
-
const remoteName =
|
|
15
|
+
const remoteName = decodeId(route.id);
|
|
8
16
|
const remoteRouteObj = remoteRoutesMap[remoteName];
|
|
9
17
|
if (!remoteRouteObj) {
|
|
10
18
|
return;
|
|
@@ -20,6 +28,9 @@ function getRemoteLayoutId(remoteName) {
|
|
|
20
28
|
const prefix = transformName2Prefix(remoteName);
|
|
21
29
|
return `${prefix}${DEFAULT_LAYOUT}`;
|
|
22
30
|
}
|
|
31
|
+
function getRemoteId(remoteName) {
|
|
32
|
+
return `${remoteName}/${DEFAULT_ENTRY}/${MF_ROUTES}`;
|
|
33
|
+
}
|
|
23
34
|
function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
24
35
|
const traverse = (route) => {
|
|
25
36
|
var _route_children;
|
|
@@ -57,7 +68,10 @@ function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
|
|
|
57
68
|
});
|
|
58
69
|
}
|
|
59
70
|
export {
|
|
71
|
+
decodeId,
|
|
72
|
+
getRemoteId,
|
|
60
73
|
getRemoteLayoutId,
|
|
61
74
|
getRemoteRoutesInfos,
|
|
62
|
-
injectRemoteRoutes
|
|
75
|
+
injectRemoteRoutes,
|
|
76
|
+
transformName2Prefix
|
|
63
77
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
|
|
2
|
-
declare const
|
|
3
|
-
export default
|
|
2
|
+
declare const nodePlugin: () => FederationRuntimePlugin;
|
|
3
|
+
export default nodePlugin;
|
|
@@ -10,10 +10,13 @@ export type LoaderBundlesRoutes = {
|
|
|
10
10
|
export type NestedRoutes = {
|
|
11
11
|
[entryName: string]: RouteObject[];
|
|
12
12
|
};
|
|
13
|
+
export declare function transformName2Prefix(name: string): string;
|
|
14
|
+
export declare function decodeId(prefix: string): string;
|
|
13
15
|
export declare function getRemoteRoutesInfos(route: RouteObject, remoteRoutesMap: RemoteRoutesMap): {
|
|
14
16
|
routes: RouteObject;
|
|
15
17
|
name: string;
|
|
16
18
|
pathName: string | undefined;
|
|
17
19
|
} | undefined;
|
|
18
20
|
export declare function getRemoteLayoutId(remoteName: string): string;
|
|
21
|
+
export declare function getRemoteId(remoteName: string): string;
|
|
19
22
|
export declare function injectRemoteRoutes(initialRoutes: LoaderBundlesRoutes | NestedRoutes, remoteRoutesMap: RemoteRoutesMap): void;
|
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-20240910102933",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist/",
|
|
6
6
|
"types.d.ts",
|
|
@@ -27,6 +27,10 @@
|
|
|
27
27
|
"types": "./dist/types/runtime/dataLoader/plugin.d.ts",
|
|
28
28
|
"default": "./dist/esm/runtime/dataLoader/plugin.js"
|
|
29
29
|
},
|
|
30
|
+
"./data-loader-inject-assets": {
|
|
31
|
+
"types": "./dist/types/runtime/dataLoader/plugin-inject-assets.d.ts",
|
|
32
|
+
"default": "./dist/esm/runtime/dataLoader/plugin-inject-assets.js"
|
|
33
|
+
},
|
|
30
34
|
"./data-loader-server": {
|
|
31
35
|
"types": "./dist/types/cli/server/dataLoaderPlugin.d.ts",
|
|
32
36
|
"default": "./dist/cjs/cli/server/dataLoaderPlugin.js"
|
|
@@ -67,6 +71,9 @@
|
|
|
67
71
|
"data-loader": [
|
|
68
72
|
"./dist/types/runtime/dataLoader/plugin.d.ts"
|
|
69
73
|
],
|
|
74
|
+
"data-loader-inject-assets": [
|
|
75
|
+
"./dist/types/runtime/dataLoader/plugin-inject-assets.d.ts"
|
|
76
|
+
],
|
|
70
77
|
"data-loader-server": [
|
|
71
78
|
"./dist/types/cli/server/dataLoaderPlugin.d.ts"
|
|
72
79
|
]
|
|
@@ -87,9 +94,9 @@
|
|
|
87
94
|
"@babel/parser": "7.25.3",
|
|
88
95
|
"@babel/traverse": "7.25.3",
|
|
89
96
|
"@babel/types": "7.25.2",
|
|
90
|
-
"@module-federation/sdk": "0.0.0-next-
|
|
91
|
-
"@module-federation/enhanced": "0.0.0-next-
|
|
92
|
-
"@module-federation/node": "0.0.0-next-
|
|
97
|
+
"@module-federation/sdk": "0.0.0-next-20240910102933",
|
|
98
|
+
"@module-federation/enhanced": "0.0.0-next-20240910102933",
|
|
99
|
+
"@module-federation/node": "0.0.0-next-20240910102933"
|
|
93
100
|
},
|
|
94
101
|
"devDependencies": {
|
|
95
102
|
"@types/babel__traverse": "7.20.6",
|
|
@@ -101,9 +108,10 @@
|
|
|
101
108
|
"@modern-js/runtime": "^2.59.0",
|
|
102
109
|
"@modern-js/module-tools": "^2.59.0",
|
|
103
110
|
"@modern-js/tsconfig": "^2.59.0",
|
|
104
|
-
"@module-federation/manifest": "0.0.0-next-
|
|
111
|
+
"@module-federation/manifest": "0.0.0-next-20240910102933"
|
|
105
112
|
},
|
|
106
113
|
"peerDependencies": {
|
|
114
|
+
"@modern-js/runtime": "^2.59.0",
|
|
107
115
|
"react": ">=17",
|
|
108
116
|
"react-dom": ">=17",
|
|
109
117
|
"typescript": "^4.9.0 || ^5.0.0",
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var shared_strategy_exports = {};
|
|
20
|
-
__export(shared_strategy_exports, {
|
|
21
|
-
default: () => shared_strategy_default
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(shared_strategy_exports);
|
|
24
|
-
const sharedStrategy = () => ({
|
|
25
|
-
name: "shared-strategy-plugin",
|
|
26
|
-
beforeInit(args) {
|
|
27
|
-
const { userOptions } = args;
|
|
28
|
-
const shared = userOptions.shared;
|
|
29
|
-
if (shared) {
|
|
30
|
-
Object.keys(shared).forEach((sharedKey) => {
|
|
31
|
-
const sharedConfigs = shared[sharedKey];
|
|
32
|
-
const arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
33
|
-
sharedConfigs
|
|
34
|
-
];
|
|
35
|
-
arraySharedConfigs.forEach((s) => {
|
|
36
|
-
s.strategy = "loaded-first";
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
return args;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
var shared_strategy_default = sharedStrategy;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var utils_exports = {};
|
|
20
|
-
__export(utils_exports, {
|
|
21
|
-
transformName2Prefix: () => transformName2Prefix,
|
|
22
|
-
transformPrefix2Name: () => transformPrefix2Name
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(utils_exports);
|
|
25
|
-
var import_sdk = require("@module-federation/sdk");
|
|
26
|
-
const SPLIT_SYMBOL = "@";
|
|
27
|
-
function transformName2Prefix(name) {
|
|
28
|
-
return `${(0, import_sdk.encodeName)(name, "", false)}${SPLIT_SYMBOL}`;
|
|
29
|
-
}
|
|
30
|
-
function transformPrefix2Name(prefix) {
|
|
31
|
-
const realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
32
|
-
return (0, import_sdk.decodeName)(realPrefix, "", false);
|
|
33
|
-
}
|
|
34
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
35
|
-
0 && (module.exports = {
|
|
36
|
-
transformName2Prefix,
|
|
37
|
-
transformPrefix2Name
|
|
38
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import nodeRuntimePlugin from "@module-federation/node/runtimePlugin";
|
|
2
|
-
var isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
|
|
3
|
-
var pluginName = "node-plugin-".concat(isContainer);
|
|
4
|
-
var nodePlugin = function() {
|
|
5
|
-
return {
|
|
6
|
-
name: pluginName,
|
|
7
|
-
beforeInit: nodeRuntimePlugin().beforeInit
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
var inject_node_fetch_default = nodePlugin;
|
|
11
|
-
export {
|
|
12
|
-
inject_node_fetch_default as default
|
|
13
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
var sharedStrategy = function() {
|
|
2
|
-
return {
|
|
3
|
-
name: "shared-strategy-plugin",
|
|
4
|
-
beforeInit: function beforeInit(args) {
|
|
5
|
-
var userOptions = args.userOptions;
|
|
6
|
-
var shared = userOptions.shared;
|
|
7
|
-
if (shared) {
|
|
8
|
-
Object.keys(shared).forEach(function(sharedKey) {
|
|
9
|
-
var sharedConfigs = shared[sharedKey];
|
|
10
|
-
var arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
11
|
-
sharedConfigs
|
|
12
|
-
];
|
|
13
|
-
arraySharedConfigs.forEach(function(s) {
|
|
14
|
-
s.strategy = "loaded-first";
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
return args;
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
var shared_strategy_default = sharedStrategy;
|
|
23
|
-
export {
|
|
24
|
-
shared_strategy_default as default
|
|
25
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { encodeName, decodeName } from "@module-federation/sdk";
|
|
2
|
-
var SPLIT_SYMBOL = "@";
|
|
3
|
-
function transformName2Prefix(name) {
|
|
4
|
-
return "".concat(encodeName(name, "", false)).concat(SPLIT_SYMBOL);
|
|
5
|
-
}
|
|
6
|
-
function transformPrefix2Name(prefix) {
|
|
7
|
-
var realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
8
|
-
return decodeName(realPrefix, "", false);
|
|
9
|
-
}
|
|
10
|
-
export {
|
|
11
|
-
transformName2Prefix,
|
|
12
|
-
transformPrefix2Name
|
|
13
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import nodeRuntimePlugin from "@module-federation/node/runtimePlugin";
|
|
2
|
-
const isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
|
|
3
|
-
const pluginName = `node-plugin-${isContainer}`;
|
|
4
|
-
const nodePlugin = () => ({
|
|
5
|
-
name: pluginName,
|
|
6
|
-
beforeInit: nodeRuntimePlugin().beforeInit
|
|
7
|
-
});
|
|
8
|
-
var inject_node_fetch_default = nodePlugin;
|
|
9
|
-
export {
|
|
10
|
-
inject_node_fetch_default as default
|
|
11
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
const sharedStrategy = () => ({
|
|
2
|
-
name: "shared-strategy-plugin",
|
|
3
|
-
beforeInit(args) {
|
|
4
|
-
const { userOptions } = args;
|
|
5
|
-
const shared = userOptions.shared;
|
|
6
|
-
if (shared) {
|
|
7
|
-
Object.keys(shared).forEach((sharedKey) => {
|
|
8
|
-
const sharedConfigs = shared[sharedKey];
|
|
9
|
-
const arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
|
|
10
|
-
sharedConfigs
|
|
11
|
-
];
|
|
12
|
-
arraySharedConfigs.forEach((s) => {
|
|
13
|
-
s.strategy = "loaded-first";
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
return args;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
var shared_strategy_default = sharedStrategy;
|
|
21
|
-
export {
|
|
22
|
-
shared_strategy_default as default
|
|
23
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { encodeName, decodeName } from "@module-federation/sdk";
|
|
2
|
-
const SPLIT_SYMBOL = "@";
|
|
3
|
-
function transformName2Prefix(name) {
|
|
4
|
-
return `${encodeName(name, "", false)}${SPLIT_SYMBOL}`;
|
|
5
|
-
}
|
|
6
|
-
function transformPrefix2Name(prefix) {
|
|
7
|
-
const realPrefix = prefix.split(SPLIT_SYMBOL)[0];
|
|
8
|
-
return decodeName(realPrefix, "", false);
|
|
9
|
-
}
|
|
10
|
-
export {
|
|
11
|
-
transformName2Prefix,
|
|
12
|
-
transformPrefix2Name
|
|
13
|
-
};
|