@module-federation/bridge-react 0.0.0-next-20250708134245 → 0.0.0-next-20250709075526
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/CHANGELOG.md +4 -8
- package/__tests__/bridge.spec.tsx +7 -7
- package/dist/{bridge-base-UGCwcMnG.js → bridge-base-BBH982Tz.cjs} +1 -1
- package/dist/{bridge-base-BoshEggF.mjs → bridge-base-P6pEjY1q.js} +1 -1
- package/dist/index-Cv3p6r66.cjs +235 -0
- package/dist/index-D4yt7Udv.js +236 -0
- package/dist/index.cjs.js +9 -35
- package/dist/index.d.ts +0 -144
- package/dist/index.es.js +12 -38
- package/dist/plugin.d.ts +0 -9
- package/dist/router-v5.cjs.js +1 -1
- package/dist/router-v5.d.ts +0 -9
- package/dist/router-v5.es.js +1 -1
- package/dist/router-v6.cjs.js +1 -1
- package/dist/router-v6.d.ts +0 -9
- package/dist/router-v6.es.js +1 -1
- package/dist/router.cjs.js +1 -1
- package/dist/router.d.ts +0 -9
- package/dist/router.es.js +1 -1
- package/dist/v18.cjs.js +1 -1
- package/dist/v18.d.ts +0 -9
- package/dist/v18.es.js +1 -1
- package/dist/v19.cjs.js +1 -1
- package/dist/v19.d.ts +0 -9
- package/dist/v19.es.js +1 -1
- package/package.json +5 -46
- package/src/.eslintrc.js +9 -0
- package/src/index.ts +1 -32
- package/src/remote/component.tsx +3 -3
- package/src/remote/create.tsx +4 -17
- package/tsconfig.json +1 -1
- package/vite.config.ts +0 -13
- package/dist/data-fetch-server-middleware.cjs.js +0 -163
- package/dist/data-fetch-server-middleware.d.ts +0 -15
- package/dist/data-fetch-server-middleware.es.js +0 -164
- package/dist/data-fetch-utils.cjs.js +0 -24
- package/dist/data-fetch-utils.d.ts +0 -86
- package/dist/data-fetch-utils.es.js +0 -26
- package/dist/index-C0fDZB5b.js +0 -45
- package/dist/index-CqxytsLY.mjs +0 -46
- package/dist/index.esm-BCeUd-x9.mjs +0 -418
- package/dist/index.esm-j_1sIRzg.js +0 -417
- package/dist/lazy-load-component-plugin-Bobxn-VP.js +0 -524
- package/dist/lazy-load-component-plugin-Dvi5dnb7.mjs +0 -525
- package/dist/lazy-load-component-plugin.cjs.js +0 -6
- package/dist/lazy-load-component-plugin.d.ts +0 -16
- package/dist/lazy-load-component-plugin.es.js +0 -6
- package/dist/lazy-utils.cjs.js +0 -24
- package/dist/lazy-utils.d.ts +0 -149
- package/dist/lazy-utils.es.js +0 -24
- package/dist/prefetch-BWabXlKU.js +0 -1332
- package/dist/prefetch-Dq-ZhN17.mjs +0 -1333
- package/dist/utils-Cy-amYU5.mjs +0 -2016
- package/dist/utils-iEVlDmyk.js +0 -2015
- package/src/lazy/AwaitDataFetch.tsx +0 -215
- package/src/lazy/constant.ts +0 -30
- package/src/lazy/createLazyComponent.tsx +0 -414
- package/src/lazy/data-fetch/cache.ts +0 -296
- package/src/lazy/data-fetch/call-data-fetch.ts +0 -13
- package/src/lazy/data-fetch/data-fetch-server-middleware.ts +0 -196
- package/src/lazy/data-fetch/index.ts +0 -16
- package/src/lazy/data-fetch/inject-data-fetch.ts +0 -109
- package/src/lazy/data-fetch/prefetch.ts +0 -106
- package/src/lazy/data-fetch/runtime-plugin.ts +0 -115
- package/src/lazy/index.ts +0 -35
- package/src/lazy/logger.ts +0 -6
- package/src/lazy/types.ts +0 -75
- package/src/lazy/utils.ts +0 -372
- package/src/lazy/wrapNoSSR.tsx +0 -10
- package/src/plugins/lazy-load-component-plugin.ts +0 -62
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
# @module-federation/bridge-react
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
4
|
-
|
|
5
|
-
### Minor Changes
|
|
6
|
-
|
|
7
|
-
- eb0d1dc: refactor(bridge-react): rename createRemoteComponent as createRemoteAppComponent
|
|
3
|
+
## 0.0.0-next-20250709075526
|
|
8
4
|
|
|
9
5
|
### Patch Changes
|
|
10
6
|
|
|
11
|
-
-
|
|
12
|
-
- @module-federation/sdk@0.0.0-next-
|
|
13
|
-
- @module-federation/bridge-shared@0.0.0-next-
|
|
7
|
+
- Updated dependencies [4a1f88f]
|
|
8
|
+
- @module-federation/sdk@0.0.0-next-20250709075526
|
|
9
|
+
- @module-federation/bridge-shared@0.0.0-next-20250709075526
|
|
14
10
|
|
|
15
11
|
## 0.16.0
|
|
16
12
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { assert, describe, it } from 'vitest';
|
|
3
|
-
import { createBridgeComponent,
|
|
3
|
+
import { createBridgeComponent, createRemoteComponent } from '../src';
|
|
4
4
|
import {
|
|
5
5
|
act,
|
|
6
6
|
fireEvent,
|
|
@@ -44,14 +44,14 @@ describe('bridge', () => {
|
|
|
44
44
|
expect(document.querySelector('#container')!.innerHTML).toContain('');
|
|
45
45
|
});
|
|
46
46
|
|
|
47
|
-
it('
|
|
47
|
+
it('createRemoteComponent', async () => {
|
|
48
48
|
function Component({ props }: { props?: Record<string, any> }) {
|
|
49
49
|
return <div>life cycle render {props?.msg}</div>;
|
|
50
50
|
}
|
|
51
51
|
const BridgeComponent = createBridgeComponent({
|
|
52
52
|
rootComponent: Component,
|
|
53
53
|
});
|
|
54
|
-
const RemoteComponent =
|
|
54
|
+
const RemoteComponent = createRemoteComponent({
|
|
55
55
|
loader: async () => {
|
|
56
56
|
return {
|
|
57
57
|
default: BridgeComponent,
|
|
@@ -71,7 +71,7 @@ describe('bridge', () => {
|
|
|
71
71
|
expect(getHtml(container)).toMatch('hello world');
|
|
72
72
|
});
|
|
73
73
|
|
|
74
|
-
it('
|
|
74
|
+
it('createRemoteComponent and obtain ref property', async () => {
|
|
75
75
|
const ref = {
|
|
76
76
|
current: null,
|
|
77
77
|
};
|
|
@@ -82,7 +82,7 @@ describe('bridge', () => {
|
|
|
82
82
|
const BridgeComponent = createBridgeComponent({
|
|
83
83
|
rootComponent: Component,
|
|
84
84
|
});
|
|
85
|
-
const RemoteComponent =
|
|
85
|
+
const RemoteComponent = createRemoteComponent({
|
|
86
86
|
loader: async () => {
|
|
87
87
|
return {
|
|
88
88
|
default: BridgeComponent,
|
|
@@ -103,7 +103,7 @@ describe('bridge', () => {
|
|
|
103
103
|
expect(ref.current).not.toBeNull();
|
|
104
104
|
});
|
|
105
105
|
|
|
106
|
-
it('
|
|
106
|
+
it('createRemoteComponent with custom createRoot prop', async () => {
|
|
107
107
|
const renderMock = vi.fn();
|
|
108
108
|
|
|
109
109
|
function Component({ props }: { props?: Record<string, any> }) {
|
|
@@ -118,7 +118,7 @@ describe('bridge', () => {
|
|
|
118
118
|
};
|
|
119
119
|
},
|
|
120
120
|
});
|
|
121
|
-
const RemoteComponent =
|
|
121
|
+
const RemoteComponent = createRemoteComponent({
|
|
122
122
|
loader: async () => {
|
|
123
123
|
return {
|
|
124
124
|
default: BridgeComponent,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const React = require("react");
|
|
3
|
-
const index = require("./index-
|
|
3
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
4
4
|
const plugin = require("./plugin.cjs.js");
|
|
5
5
|
function _interopNamespaceDefault(e) {
|
|
6
6
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Component, createElement, createContext } from "react";
|
|
3
|
-
import { L as LoggerInstance, R as RouterContext } from "./index-
|
|
3
|
+
import { L as LoggerInstance, R as RouterContext } from "./index-D4yt7Udv.js";
|
|
4
4
|
import { federationRuntime } from "./plugin.es.js";
|
|
5
5
|
const ErrorBoundaryContext = createContext(null);
|
|
6
6
|
const initialState = {
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const React = require("react");
|
|
3
|
+
const RouterContext = React.createContext(null);
|
|
4
|
+
const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
|
|
5
|
+
function isBrowserEnv() {
|
|
6
|
+
return typeof window !== "undefined" && typeof window.document !== "undefined";
|
|
7
|
+
}
|
|
8
|
+
function isBrowserDebug() {
|
|
9
|
+
try {
|
|
10
|
+
if (isBrowserEnv() && window.localStorage) {
|
|
11
|
+
return Boolean(localStorage.getItem(BROWSER_LOG_KEY));
|
|
12
|
+
}
|
|
13
|
+
} catch (error) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
function isDebugMode() {
|
|
19
|
+
if (typeof process !== "undefined" && process.env && process.env["FEDERATION_DEBUG"]) {
|
|
20
|
+
return Boolean(process.env["FEDERATION_DEBUG"]);
|
|
21
|
+
}
|
|
22
|
+
if (typeof FEDERATION_DEBUG !== "undefined" && Boolean(FEDERATION_DEBUG)) {
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
return isBrowserDebug();
|
|
26
|
+
}
|
|
27
|
+
let Logger = class Logger2 {
|
|
28
|
+
setPrefix(prefix) {
|
|
29
|
+
this.prefix = prefix;
|
|
30
|
+
}
|
|
31
|
+
log(...args) {
|
|
32
|
+
console.log(this.prefix, ...args);
|
|
33
|
+
}
|
|
34
|
+
warn(...args) {
|
|
35
|
+
console.log(this.prefix, ...args);
|
|
36
|
+
}
|
|
37
|
+
error(...args) {
|
|
38
|
+
console.log(this.prefix, ...args);
|
|
39
|
+
}
|
|
40
|
+
success(...args) {
|
|
41
|
+
console.log(this.prefix, ...args);
|
|
42
|
+
}
|
|
43
|
+
info(...args) {
|
|
44
|
+
console.log(this.prefix, ...args);
|
|
45
|
+
}
|
|
46
|
+
ready(...args) {
|
|
47
|
+
console.log(this.prefix, ...args);
|
|
48
|
+
}
|
|
49
|
+
debug(...args) {
|
|
50
|
+
if (isDebugMode()) {
|
|
51
|
+
console.log(this.prefix, ...args);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
constructor(prefix) {
|
|
55
|
+
this.prefix = prefix;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
function createLogger(prefix) {
|
|
59
|
+
return new Logger(prefix);
|
|
60
|
+
}
|
|
61
|
+
function importNodeModule(name) {
|
|
62
|
+
if (!name) {
|
|
63
|
+
throw new Error("import specifier is required");
|
|
64
|
+
}
|
|
65
|
+
const importModule = new Function("name", `return import(name)`);
|
|
66
|
+
return importModule(name).then((res2) => res2).catch((error) => {
|
|
67
|
+
console.error(`Error importing module ${name}:`, error);
|
|
68
|
+
throw error;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
const loadNodeFetch = async () => {
|
|
72
|
+
const fetchModule = await importNodeModule("node-fetch");
|
|
73
|
+
return fetchModule.default || fetchModule;
|
|
74
|
+
};
|
|
75
|
+
const lazyLoaderHookFetch = async (input, init, loaderHook2) => {
|
|
76
|
+
const hook = (url2, init2) => {
|
|
77
|
+
return loaderHook2.lifecycle.fetch.emit(url2, init2);
|
|
78
|
+
};
|
|
79
|
+
const res2 = await hook(input, init || {});
|
|
80
|
+
if (!res2 || !(res2 instanceof Response)) {
|
|
81
|
+
const fetchFunction = typeof fetch === "undefined" ? await loadNodeFetch() : fetch;
|
|
82
|
+
return fetchFunction(input, init || {});
|
|
83
|
+
}
|
|
84
|
+
return res2;
|
|
85
|
+
};
|
|
86
|
+
const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url, cb, attrs, loaderHook) => {
|
|
87
|
+
if (loaderHook == null ? void 0 : loaderHook.createScriptHook) {
|
|
88
|
+
const hookResult = loaderHook.createScriptHook(url);
|
|
89
|
+
if (hookResult && typeof hookResult === "object" && "url" in hookResult) {
|
|
90
|
+
url = hookResult.url;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
let urlObj;
|
|
94
|
+
try {
|
|
95
|
+
urlObj = new URL(url);
|
|
96
|
+
} catch (e) {
|
|
97
|
+
console.error("Error constructing URL:", e);
|
|
98
|
+
cb(new Error(`Invalid URL: ${e}`));
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
const getFetch = async () => {
|
|
102
|
+
if (loaderHook == null ? void 0 : loaderHook.fetch) {
|
|
103
|
+
return (input, init) => lazyLoaderHookFetch(input, init, loaderHook);
|
|
104
|
+
}
|
|
105
|
+
return typeof fetch === "undefined" ? loadNodeFetch() : fetch;
|
|
106
|
+
};
|
|
107
|
+
const handleScriptFetch = async (f, urlObj) => {
|
|
108
|
+
try {
|
|
109
|
+
var _vm_constants;
|
|
110
|
+
const res = await f(urlObj.href);
|
|
111
|
+
const data = await res.text();
|
|
112
|
+
const [path, vm] = await Promise.all([
|
|
113
|
+
importNodeModule("path"),
|
|
114
|
+
importNodeModule("vm")
|
|
115
|
+
]);
|
|
116
|
+
const scriptContext = {
|
|
117
|
+
exports: {},
|
|
118
|
+
module: {
|
|
119
|
+
exports: {}
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
const urlDirname = urlObj.pathname.split("/").slice(0, -1).join("/");
|
|
123
|
+
const filename = path.basename(urlObj.pathname);
|
|
124
|
+
var _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER;
|
|
125
|
+
const script = new vm.Script(`(function(exports, module, require, __dirname, __filename) {${data}
|
|
126
|
+
})`, {
|
|
127
|
+
filename,
|
|
128
|
+
importModuleDynamically: (_vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER = (_vm_constants = vm.constants) == null ? void 0 : _vm_constants.USE_MAIN_CONTEXT_DEFAULT_LOADER) != null ? _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER : importNodeModule
|
|
129
|
+
});
|
|
130
|
+
script.runInThisContext()(scriptContext.exports, scriptContext.module, eval("require"), urlDirname, filename);
|
|
131
|
+
const exportedInterface = scriptContext.module.exports || scriptContext.exports;
|
|
132
|
+
if (attrs && exportedInterface && attrs["globalName"]) {
|
|
133
|
+
const container = exportedInterface[attrs["globalName"]] || exportedInterface;
|
|
134
|
+
cb(void 0, container);
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
cb(void 0, exportedInterface);
|
|
138
|
+
} catch (e) {
|
|
139
|
+
cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
getFetch().then(async (f2) => {
|
|
143
|
+
if ((attrs == null ? void 0 : attrs["type"]) === "esm" || (attrs == null ? void 0 : attrs["type"]) === "module") {
|
|
144
|
+
return loadModule(urlObj.href, {
|
|
145
|
+
fetch: f2,
|
|
146
|
+
vm: await importNodeModule("vm")
|
|
147
|
+
}).then(async (module2) => {
|
|
148
|
+
await module2.evaluate();
|
|
149
|
+
cb(void 0, module2.namespace);
|
|
150
|
+
}).catch((e) => {
|
|
151
|
+
cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
handleScriptFetch(f2, urlObj);
|
|
155
|
+
}).catch((err) => {
|
|
156
|
+
cb(err);
|
|
157
|
+
});
|
|
158
|
+
} : (url2, cb2, attrs2, loaderHook2) => {
|
|
159
|
+
cb2(new Error("createScriptNode is disabled in non-Node.js environment"));
|
|
160
|
+
};
|
|
161
|
+
typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url2, info) => {
|
|
162
|
+
return new Promise((resolve, reject) => {
|
|
163
|
+
createScriptNode(url2, (error, scriptContext2) => {
|
|
164
|
+
if (error) {
|
|
165
|
+
reject(error);
|
|
166
|
+
} else {
|
|
167
|
+
var _info_attrs, _info_attrs1;
|
|
168
|
+
const remoteEntryKey = (info == null ? void 0 : (_info_attrs = info.attrs) == null ? void 0 : _info_attrs["globalName"]) || `__FEDERATION_${info == null ? void 0 : (_info_attrs1 = info.attrs) == null ? void 0 : _info_attrs1["name"]}:custom__`;
|
|
169
|
+
const entryExports = globalThis[remoteEntryKey] = scriptContext2;
|
|
170
|
+
resolve(entryExports);
|
|
171
|
+
}
|
|
172
|
+
}, info.attrs, info.loaderHook);
|
|
173
|
+
});
|
|
174
|
+
} : (url2, info) => {
|
|
175
|
+
throw new Error("loadScriptNode is disabled in non-Node.js environment");
|
|
176
|
+
};
|
|
177
|
+
async function loadModule(url2, options) {
|
|
178
|
+
const { fetch: fetch1, vm: vm2 } = options;
|
|
179
|
+
const response = await fetch1(url2);
|
|
180
|
+
const code = await response.text();
|
|
181
|
+
const module2 = new vm2.SourceTextModule(code, {
|
|
182
|
+
// @ts-ignore
|
|
183
|
+
importModuleDynamically: async (specifier, script2) => {
|
|
184
|
+
const resolvedUrl = new URL(specifier, url2).href;
|
|
185
|
+
return loadModule(resolvedUrl, options);
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
await module2.link(async (specifier) => {
|
|
189
|
+
const resolvedUrl = new URL(specifier, url2).href;
|
|
190
|
+
const module3 = await loadModule(resolvedUrl, options);
|
|
191
|
+
return module3;
|
|
192
|
+
});
|
|
193
|
+
return module2;
|
|
194
|
+
}
|
|
195
|
+
const LoggerInstance = createLogger(
|
|
196
|
+
"[ Module Federation Bridge React ]"
|
|
197
|
+
);
|
|
198
|
+
function pathJoin(...args) {
|
|
199
|
+
const res2 = args.reduce((res22, path2) => {
|
|
200
|
+
let nPath = path2;
|
|
201
|
+
if (!nPath || typeof nPath !== "string") {
|
|
202
|
+
return res22;
|
|
203
|
+
}
|
|
204
|
+
if (nPath[0] !== "/") {
|
|
205
|
+
nPath = `/${nPath}`;
|
|
206
|
+
}
|
|
207
|
+
const lastIndex = nPath.length - 1;
|
|
208
|
+
if (nPath[lastIndex] === "/") {
|
|
209
|
+
nPath = nPath.substring(0, lastIndex);
|
|
210
|
+
}
|
|
211
|
+
return res22 + nPath;
|
|
212
|
+
}, "");
|
|
213
|
+
return res2 || "/";
|
|
214
|
+
}
|
|
215
|
+
const getModuleName = (id) => {
|
|
216
|
+
if (!id) {
|
|
217
|
+
return id;
|
|
218
|
+
}
|
|
219
|
+
const idArray = id.split("/");
|
|
220
|
+
if (idArray.length < 2) {
|
|
221
|
+
return id;
|
|
222
|
+
}
|
|
223
|
+
return idArray[0] + "/" + idArray[1];
|
|
224
|
+
};
|
|
225
|
+
const getRootDomDefaultClassName = (moduleName) => {
|
|
226
|
+
if (!moduleName) {
|
|
227
|
+
return "";
|
|
228
|
+
}
|
|
229
|
+
const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
|
|
230
|
+
return `bridge-root-component-${name}`;
|
|
231
|
+
};
|
|
232
|
+
exports.LoggerInstance = LoggerInstance;
|
|
233
|
+
exports.RouterContext = RouterContext;
|
|
234
|
+
exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
|
|
235
|
+
exports.pathJoin = pathJoin;
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import React__default from "react";
|
|
2
|
+
const RouterContext = React__default.createContext(null);
|
|
3
|
+
const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
|
|
4
|
+
function isBrowserEnv() {
|
|
5
|
+
return typeof window !== "undefined" && typeof window.document !== "undefined";
|
|
6
|
+
}
|
|
7
|
+
function isBrowserDebug() {
|
|
8
|
+
try {
|
|
9
|
+
if (isBrowserEnv() && window.localStorage) {
|
|
10
|
+
return Boolean(localStorage.getItem(BROWSER_LOG_KEY));
|
|
11
|
+
}
|
|
12
|
+
} catch (error) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
function isDebugMode() {
|
|
18
|
+
if (typeof process !== "undefined" && process.env && process.env["FEDERATION_DEBUG"]) {
|
|
19
|
+
return Boolean(process.env["FEDERATION_DEBUG"]);
|
|
20
|
+
}
|
|
21
|
+
if (typeof FEDERATION_DEBUG !== "undefined" && Boolean(FEDERATION_DEBUG)) {
|
|
22
|
+
return true;
|
|
23
|
+
}
|
|
24
|
+
return isBrowserDebug();
|
|
25
|
+
}
|
|
26
|
+
let Logger = class Logger2 {
|
|
27
|
+
setPrefix(prefix) {
|
|
28
|
+
this.prefix = prefix;
|
|
29
|
+
}
|
|
30
|
+
log(...args) {
|
|
31
|
+
console.log(this.prefix, ...args);
|
|
32
|
+
}
|
|
33
|
+
warn(...args) {
|
|
34
|
+
console.log(this.prefix, ...args);
|
|
35
|
+
}
|
|
36
|
+
error(...args) {
|
|
37
|
+
console.log(this.prefix, ...args);
|
|
38
|
+
}
|
|
39
|
+
success(...args) {
|
|
40
|
+
console.log(this.prefix, ...args);
|
|
41
|
+
}
|
|
42
|
+
info(...args) {
|
|
43
|
+
console.log(this.prefix, ...args);
|
|
44
|
+
}
|
|
45
|
+
ready(...args) {
|
|
46
|
+
console.log(this.prefix, ...args);
|
|
47
|
+
}
|
|
48
|
+
debug(...args) {
|
|
49
|
+
if (isDebugMode()) {
|
|
50
|
+
console.log(this.prefix, ...args);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
constructor(prefix) {
|
|
54
|
+
this.prefix = prefix;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
function createLogger(prefix) {
|
|
58
|
+
return new Logger(prefix);
|
|
59
|
+
}
|
|
60
|
+
function importNodeModule(name) {
|
|
61
|
+
if (!name) {
|
|
62
|
+
throw new Error("import specifier is required");
|
|
63
|
+
}
|
|
64
|
+
const importModule = new Function("name", `return import(name)`);
|
|
65
|
+
return importModule(name).then((res2) => res2).catch((error) => {
|
|
66
|
+
console.error(`Error importing module ${name}:`, error);
|
|
67
|
+
throw error;
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
const loadNodeFetch = async () => {
|
|
71
|
+
const fetchModule = await importNodeModule("node-fetch");
|
|
72
|
+
return fetchModule.default || fetchModule;
|
|
73
|
+
};
|
|
74
|
+
const lazyLoaderHookFetch = async (input, init, loaderHook2) => {
|
|
75
|
+
const hook = (url2, init2) => {
|
|
76
|
+
return loaderHook2.lifecycle.fetch.emit(url2, init2);
|
|
77
|
+
};
|
|
78
|
+
const res2 = await hook(input, init || {});
|
|
79
|
+
if (!res2 || !(res2 instanceof Response)) {
|
|
80
|
+
const fetchFunction = typeof fetch === "undefined" ? await loadNodeFetch() : fetch;
|
|
81
|
+
return fetchFunction(input, init || {});
|
|
82
|
+
}
|
|
83
|
+
return res2;
|
|
84
|
+
};
|
|
85
|
+
const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url, cb, attrs, loaderHook) => {
|
|
86
|
+
if (loaderHook == null ? void 0 : loaderHook.createScriptHook) {
|
|
87
|
+
const hookResult = loaderHook.createScriptHook(url);
|
|
88
|
+
if (hookResult && typeof hookResult === "object" && "url" in hookResult) {
|
|
89
|
+
url = hookResult.url;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
let urlObj;
|
|
93
|
+
try {
|
|
94
|
+
urlObj = new URL(url);
|
|
95
|
+
} catch (e) {
|
|
96
|
+
console.error("Error constructing URL:", e);
|
|
97
|
+
cb(new Error(`Invalid URL: ${e}`));
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
const getFetch = async () => {
|
|
101
|
+
if (loaderHook == null ? void 0 : loaderHook.fetch) {
|
|
102
|
+
return (input, init) => lazyLoaderHookFetch(input, init, loaderHook);
|
|
103
|
+
}
|
|
104
|
+
return typeof fetch === "undefined" ? loadNodeFetch() : fetch;
|
|
105
|
+
};
|
|
106
|
+
const handleScriptFetch = async (f, urlObj) => {
|
|
107
|
+
try {
|
|
108
|
+
var _vm_constants;
|
|
109
|
+
const res = await f(urlObj.href);
|
|
110
|
+
const data = await res.text();
|
|
111
|
+
const [path, vm] = await Promise.all([
|
|
112
|
+
importNodeModule("path"),
|
|
113
|
+
importNodeModule("vm")
|
|
114
|
+
]);
|
|
115
|
+
const scriptContext = {
|
|
116
|
+
exports: {},
|
|
117
|
+
module: {
|
|
118
|
+
exports: {}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
const urlDirname = urlObj.pathname.split("/").slice(0, -1).join("/");
|
|
122
|
+
const filename = path.basename(urlObj.pathname);
|
|
123
|
+
var _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER;
|
|
124
|
+
const script = new vm.Script(`(function(exports, module, require, __dirname, __filename) {${data}
|
|
125
|
+
})`, {
|
|
126
|
+
filename,
|
|
127
|
+
importModuleDynamically: (_vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER = (_vm_constants = vm.constants) == null ? void 0 : _vm_constants.USE_MAIN_CONTEXT_DEFAULT_LOADER) != null ? _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER : importNodeModule
|
|
128
|
+
});
|
|
129
|
+
script.runInThisContext()(scriptContext.exports, scriptContext.module, eval("require"), urlDirname, filename);
|
|
130
|
+
const exportedInterface = scriptContext.module.exports || scriptContext.exports;
|
|
131
|
+
if (attrs && exportedInterface && attrs["globalName"]) {
|
|
132
|
+
const container = exportedInterface[attrs["globalName"]] || exportedInterface;
|
|
133
|
+
cb(void 0, container);
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
cb(void 0, exportedInterface);
|
|
137
|
+
} catch (e) {
|
|
138
|
+
cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
getFetch().then(async (f2) => {
|
|
142
|
+
if ((attrs == null ? void 0 : attrs["type"]) === "esm" || (attrs == null ? void 0 : attrs["type"]) === "module") {
|
|
143
|
+
return loadModule(urlObj.href, {
|
|
144
|
+
fetch: f2,
|
|
145
|
+
vm: await importNodeModule("vm")
|
|
146
|
+
}).then(async (module) => {
|
|
147
|
+
await module.evaluate();
|
|
148
|
+
cb(void 0, module.namespace);
|
|
149
|
+
}).catch((e) => {
|
|
150
|
+
cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
handleScriptFetch(f2, urlObj);
|
|
154
|
+
}).catch((err) => {
|
|
155
|
+
cb(err);
|
|
156
|
+
});
|
|
157
|
+
} : (url2, cb2, attrs2, loaderHook2) => {
|
|
158
|
+
cb2(new Error("createScriptNode is disabled in non-Node.js environment"));
|
|
159
|
+
};
|
|
160
|
+
typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url2, info) => {
|
|
161
|
+
return new Promise((resolve, reject) => {
|
|
162
|
+
createScriptNode(url2, (error, scriptContext2) => {
|
|
163
|
+
if (error) {
|
|
164
|
+
reject(error);
|
|
165
|
+
} else {
|
|
166
|
+
var _info_attrs, _info_attrs1;
|
|
167
|
+
const remoteEntryKey = (info == null ? void 0 : (_info_attrs = info.attrs) == null ? void 0 : _info_attrs["globalName"]) || `__FEDERATION_${info == null ? void 0 : (_info_attrs1 = info.attrs) == null ? void 0 : _info_attrs1["name"]}:custom__`;
|
|
168
|
+
const entryExports = globalThis[remoteEntryKey] = scriptContext2;
|
|
169
|
+
resolve(entryExports);
|
|
170
|
+
}
|
|
171
|
+
}, info.attrs, info.loaderHook);
|
|
172
|
+
});
|
|
173
|
+
} : (url2, info) => {
|
|
174
|
+
throw new Error("loadScriptNode is disabled in non-Node.js environment");
|
|
175
|
+
};
|
|
176
|
+
async function loadModule(url2, options) {
|
|
177
|
+
const { fetch: fetch1, vm: vm2 } = options;
|
|
178
|
+
const response = await fetch1(url2);
|
|
179
|
+
const code = await response.text();
|
|
180
|
+
const module = new vm2.SourceTextModule(code, {
|
|
181
|
+
// @ts-ignore
|
|
182
|
+
importModuleDynamically: async (specifier, script2) => {
|
|
183
|
+
const resolvedUrl = new URL(specifier, url2).href;
|
|
184
|
+
return loadModule(resolvedUrl, options);
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
await module.link(async (specifier) => {
|
|
188
|
+
const resolvedUrl = new URL(specifier, url2).href;
|
|
189
|
+
const module2 = await loadModule(resolvedUrl, options);
|
|
190
|
+
return module2;
|
|
191
|
+
});
|
|
192
|
+
return module;
|
|
193
|
+
}
|
|
194
|
+
const LoggerInstance = createLogger(
|
|
195
|
+
"[ Module Federation Bridge React ]"
|
|
196
|
+
);
|
|
197
|
+
function pathJoin(...args) {
|
|
198
|
+
const res2 = args.reduce((res22, path2) => {
|
|
199
|
+
let nPath = path2;
|
|
200
|
+
if (!nPath || typeof nPath !== "string") {
|
|
201
|
+
return res22;
|
|
202
|
+
}
|
|
203
|
+
if (nPath[0] !== "/") {
|
|
204
|
+
nPath = `/${nPath}`;
|
|
205
|
+
}
|
|
206
|
+
const lastIndex = nPath.length - 1;
|
|
207
|
+
if (nPath[lastIndex] === "/") {
|
|
208
|
+
nPath = nPath.substring(0, lastIndex);
|
|
209
|
+
}
|
|
210
|
+
return res22 + nPath;
|
|
211
|
+
}, "");
|
|
212
|
+
return res2 || "/";
|
|
213
|
+
}
|
|
214
|
+
const getModuleName = (id) => {
|
|
215
|
+
if (!id) {
|
|
216
|
+
return id;
|
|
217
|
+
}
|
|
218
|
+
const idArray = id.split("/");
|
|
219
|
+
if (idArray.length < 2) {
|
|
220
|
+
return id;
|
|
221
|
+
}
|
|
222
|
+
return idArray[0] + "/" + idArray[1];
|
|
223
|
+
};
|
|
224
|
+
const getRootDomDefaultClassName = (moduleName) => {
|
|
225
|
+
if (!moduleName) {
|
|
226
|
+
return "";
|
|
227
|
+
}
|
|
228
|
+
const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
|
|
229
|
+
return `bridge-root-component-${name}`;
|
|
230
|
+
};
|
|
231
|
+
export {
|
|
232
|
+
LoggerInstance as L,
|
|
233
|
+
RouterContext as R,
|
|
234
|
+
getRootDomDefaultClassName as g,
|
|
235
|
+
pathJoin as p
|
|
236
|
+
};
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const bridgeBase = require("./bridge-base-
|
|
3
|
+
const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
|
|
4
4
|
const ReactDOM = require("react-dom");
|
|
5
5
|
const React = require("react");
|
|
6
|
-
const index = require("./index-
|
|
6
|
+
const index = require("./index-Cv3p6r66.cjs");
|
|
7
7
|
const ReactRouterDOM = require("react-router-dom");
|
|
8
8
|
const plugin = require("./plugin.cjs.js");
|
|
9
|
-
const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-Bobxn-VP.js");
|
|
10
|
-
const lazyUtils = require("./utils-iEVlDmyk.js");
|
|
11
|
-
const dataFetchUtils = require("./data-fetch-utils.cjs.js");
|
|
12
|
-
const prefetch = require("./prefetch-BWabXlKU.js");
|
|
13
9
|
function _interopNamespaceDefault(e2) {
|
|
14
10
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
15
11
|
if (e2) {
|
|
@@ -87,7 +83,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
|
|
|
87
83
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
88
84
|
if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
|
|
89
85
|
index.LoggerInstance.debug(
|
|
90
|
-
`
|
|
86
|
+
`createRemoteComponent LazyComponent destroy >>>`,
|
|
91
87
|
{ moduleName, basename, dom: renderDom.current }
|
|
92
88
|
);
|
|
93
89
|
(_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
|
|
@@ -175,7 +171,7 @@ function withRouterData(WrappedComponent) {
|
|
|
175
171
|
}
|
|
176
172
|
}
|
|
177
173
|
}
|
|
178
|
-
index.LoggerInstance.debug(`
|
|
174
|
+
index.LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
|
|
179
175
|
...props,
|
|
180
176
|
basename,
|
|
181
177
|
routerContextVal,
|
|
@@ -187,7 +183,7 @@ function withRouterData(WrappedComponent) {
|
|
|
187
183
|
React.useEffect(() => {
|
|
188
184
|
if (pathname !== "" && pathname !== location.pathname) {
|
|
189
185
|
index.LoggerInstance.debug(
|
|
190
|
-
`
|
|
186
|
+
`createRemoteComponent dispatchPopstateEnv >>>`,
|
|
191
187
|
{
|
|
192
188
|
name: props.name,
|
|
193
189
|
pathname: location.pathname
|
|
@@ -208,7 +204,7 @@ const RemoteApp = withRouterData(RemoteAppWrapper);
|
|
|
208
204
|
function createLazyRemoteComponent(info) {
|
|
209
205
|
const exportName = (info == null ? void 0 : info.export) || "default";
|
|
210
206
|
return React.lazy(async () => {
|
|
211
|
-
index.LoggerInstance.debug(`
|
|
207
|
+
index.LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
|
|
212
208
|
lazyComponent: info.loader,
|
|
213
209
|
exportName
|
|
214
210
|
});
|
|
@@ -216,7 +212,7 @@ function createLazyRemoteComponent(info) {
|
|
|
216
212
|
const m = await info.loader();
|
|
217
213
|
const moduleName = m && m[Symbol.for("mf_module_id")];
|
|
218
214
|
index.LoggerInstance.debug(
|
|
219
|
-
`
|
|
215
|
+
`createRemoteComponent LazyComponent loadRemote info >>>`,
|
|
220
216
|
{ name: moduleName, module: m, exportName }
|
|
221
217
|
);
|
|
222
218
|
const exportFn = m[exportName];
|
|
@@ -239,7 +235,7 @@ function createLazyRemoteComponent(info) {
|
|
|
239
235
|
};
|
|
240
236
|
} else {
|
|
241
237
|
index.LoggerInstance.debug(
|
|
242
|
-
`
|
|
238
|
+
`createRemoteComponent LazyComponent module not found >>>`,
|
|
243
239
|
{ name: moduleName, module: m, exportName }
|
|
244
240
|
);
|
|
245
241
|
throw Error(
|
|
@@ -253,7 +249,7 @@ function createLazyRemoteComponent(info) {
|
|
|
253
249
|
}
|
|
254
250
|
});
|
|
255
251
|
}
|
|
256
|
-
function
|
|
252
|
+
function createRemoteComponent(info) {
|
|
257
253
|
const LazyComponent = createLazyRemoteComponent(info);
|
|
258
254
|
return React.forwardRef((props, ref) => {
|
|
259
255
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -265,27 +261,5 @@ function createRemoteAppComponent(info) {
|
|
|
265
261
|
);
|
|
266
262
|
});
|
|
267
263
|
}
|
|
268
|
-
function createRemoteComponent(info) {
|
|
269
|
-
index.LoggerInstance.warn(
|
|
270
|
-
`createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
|
|
271
|
-
);
|
|
272
|
-
return createRemoteAppComponent(info);
|
|
273
|
-
}
|
|
274
|
-
exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
|
|
275
|
-
exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
|
|
276
|
-
exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;
|
|
277
|
-
exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
|
|
278
|
-
exports.CacheSize = lazyUtils.CacheSize;
|
|
279
|
-
exports.CacheTime = lazyUtils.CacheTime;
|
|
280
|
-
exports.ERROR_TYPE = lazyUtils.ERROR_TYPE;
|
|
281
|
-
exports.cache = lazyUtils.cache;
|
|
282
|
-
exports.clearStore = lazyUtils.clearStore;
|
|
283
|
-
exports.configureCache = lazyUtils.configureCache;
|
|
284
|
-
exports.generateKey = lazyUtils.generateKey;
|
|
285
|
-
exports.revalidateTag = lazyUtils.revalidateTag;
|
|
286
|
-
exports.setSSREnv = lazyUtils.setSSREnv;
|
|
287
|
-
exports.callDataFetch = dataFetchUtils.callDataFetch;
|
|
288
|
-
exports.prefetch = prefetch.prefetch;
|
|
289
264
|
exports.createBridgeComponent = createBridgeComponent;
|
|
290
|
-
exports.createRemoteAppComponent = createRemoteAppComponent;
|
|
291
265
|
exports.createRemoteComponent = createRemoteComponent;
|