@module-federation/devtools 2.7.0 → 2.8.0
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/types/App.css +13 -0
- package/dist/types/App.js +519 -0
- package/dist/types/App.module.js +24 -0
- package/dist/types/App_module.css +307 -0
- package/dist/types/component/DependencyGraph/index.js +225 -0
- package/dist/types/component/DependencyGraph/index.module.js +24 -0
- package/dist/types/component/DependencyGraph/index_module.css +100 -0
- package/dist/types/component/DependencyGraphItem/index.js +124 -0
- package/dist/types/component/DependencyGraphItem/index.module.js +24 -0
- package/dist/types/component/DependencyGraphItem/index_module.css +95 -0
- package/dist/types/component/Form/index.js +372 -0
- package/dist/types/component/Form/index.module.js +24 -0
- package/dist/types/component/Form/index_module.css +198 -0
- package/dist/types/component/LanguageSwitch.js +79 -0
- package/dist/types/component/Layout/index.js +471 -0
- package/dist/types/component/Layout/index.module.js +24 -0
- package/dist/types/component/Layout/index_module.css +68 -0
- package/dist/types/component/LoadingTrace/index.js +953 -0
- package/dist/types/component/LoadingTrace/index.module.js +24 -0
- package/dist/types/component/LoadingTrace/index_module.css +876 -0
- package/dist/types/component/ModuleInfo/index.js +342 -0
- package/dist/types/component/ModuleInfo/index.module.js +24 -0
- package/dist/types/component/ModuleInfo/index_module.css +184 -0
- package/dist/types/component/SharedDepsExplorer/FocusResultDisplay.js +64 -0
- package/dist/types/component/SharedDepsExplorer/FocusResultDisplay.module.js +24 -0
- package/dist/types/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
- package/dist/types/component/SharedDepsExplorer/index.js +638 -0
- package/dist/types/component/SharedDepsExplorer/index.module.js +24 -0
- package/dist/types/component/SharedDepsExplorer/index_module.css +467 -0
- package/dist/types/component/SharedDepsExplorer/share-utils.js +252 -0
- package/dist/types/component/ThemeToggle.js +48 -0
- package/dist/types/component/ThemeToggle.module.js +24 -0
- package/dist/types/component/ThemeToggle_module.css +12 -0
- package/dist/types/hooks/useDevtoolsTheme.js +100 -0
- package/dist/types/i18n/index.js +721 -0
- package/dist/types/init.js +8 -0
- package/dist/types/src/App.d.ts +1 -1
- package/dist/types/src/component/DependencyGraph/index.d.ts +1 -1
- package/dist/types/src/component/DependencyGraphItem/index.d.ts +1 -1
- package/dist/types/src/component/Form/index.d.ts +1 -1
- package/dist/types/src/component/LanguageSwitch.d.ts +1 -1
- package/dist/types/src/component/Layout/index.d.ts +1 -1
- package/dist/types/src/component/LoadingTrace/index.d.ts +1 -1
- package/dist/types/src/component/ModuleInfo/index.d.ts +1 -1
- package/dist/types/src/component/SharedDepsExplorer/index.d.ts +1 -1
- package/dist/types/src/i18n/index.d.ts +1 -1
- package/dist/types/src/template/constant.d.ts +1 -1
- package/dist/types/src/utils/chrome/observability.d.ts +1 -1
- package/dist/types/src/utils/data/index.d.ts +1 -1
- package/dist/types/stories/index.stories.d.ts +2 -1
- package/dist/types/template/constant.js +84 -0
- package/dist/types/template/index.js +21 -0
- package/dist/types/utils/chrome/fast-refresh.js +329 -0
- package/dist/types/utils/chrome/index.js +321 -0
- package/dist/types/utils/chrome/messages.js +39 -0
- package/dist/types/utils/chrome/observability-plugin.js +85 -0
- package/dist/types/utils/chrome/observability-shared.js +125 -0
- package/dist/types/utils/chrome/observability.js +233 -0
- package/dist/types/utils/chrome/override-remote.js +17 -0
- package/dist/types/utils/chrome/post-message-init.js +5 -0
- package/dist/types/utils/chrome/post-message-listener.js +36 -0
- package/dist/types/utils/chrome/post-message-start.js +10 -0
- package/dist/types/utils/chrome/post-message.js +91 -0
- package/dist/types/utils/chrome/safe-post-message.js +147 -0
- package/dist/types/utils/chrome/snapshot-plugin.js +17 -0
- package/dist/types/utils/chrome/storage.js +71 -0
- package/dist/types/utils/data/index.js +83 -0
- package/dist/types/utils/index.js +27 -0
- package/dist/types/utils/sdk/graph.js +213 -0
- package/dist/types/utils/sdk/index.js +104 -0
- package/dist/types/utils/types/common.js +15 -0
- package/dist/types/utils/types/index.js +21 -0
- package/dist/types/vendor/basic-proxy-core.js +147 -0
- package/dist/types/worker/index.js +175 -0
- package/package.json +6 -6
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.loaded-status-tag {
|
|
2
|
+
color: var(--color-bg-1, white) !important;
|
|
3
|
+
background-color: var(--color-neutral-10, black) !important;
|
|
4
|
+
}
|
|
5
|
+
.reused-status-tag {
|
|
6
|
+
background-color: greenyellow !important;
|
|
7
|
+
color: black !important;
|
|
8
|
+
}
|
|
9
|
+
.common-tag {
|
|
10
|
+
color: var(--color-text-2, #71717a) !important;
|
|
11
|
+
background-color: var(--color-bg-1, #ffffff) !important;
|
|
12
|
+
border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
|
|
13
|
+
}
|
|
@@ -0,0 +1,519 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __export = (target, all) => {
|
|
22
|
+
for (var name in all)
|
|
23
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
24
|
+
};
|
|
25
|
+
var __copyProps = (to, from, except, desc) => {
|
|
26
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
27
|
+
for (let key of __getOwnPropNames(from))
|
|
28
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
29
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
30
|
+
}
|
|
31
|
+
return to;
|
|
32
|
+
};
|
|
33
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
34
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
35
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
36
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
37
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
38
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
39
|
+
mod
|
|
40
|
+
));
|
|
41
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
42
|
+
var __async = (__this, __arguments, generator) => {
|
|
43
|
+
return new Promise((resolve, reject) => {
|
|
44
|
+
var fulfilled = (value) => {
|
|
45
|
+
try {
|
|
46
|
+
step(generator.next(value));
|
|
47
|
+
} catch (e) {
|
|
48
|
+
reject(e);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var rejected = (value) => {
|
|
52
|
+
try {
|
|
53
|
+
step(generator.throw(value));
|
|
54
|
+
} catch (e) {
|
|
55
|
+
reject(e);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
59
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
var App_exports = {};
|
|
63
|
+
__export(App_exports, {
|
|
64
|
+
default: () => App_default
|
|
65
|
+
});
|
|
66
|
+
module.exports = __toCommonJS(App_exports);
|
|
67
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
68
|
+
var import_react = require("react");
|
|
69
|
+
var import_react_19_adapter = require("@arco-design/web-react/es/_util/react-19-adapter");
|
|
70
|
+
var import_App = require("./App.css");
|
|
71
|
+
var import_web_react = require("@arco-design/web-react");
|
|
72
|
+
var import_react_i18next = require("react-i18next");
|
|
73
|
+
var import_init = require("./init");
|
|
74
|
+
var import_icon = require("@arco-design/web-react/icon");
|
|
75
|
+
var import_Layout = __toESM(require("./component/Layout"));
|
|
76
|
+
var import_DependencyGraph = __toESM(require("./component/DependencyGraph"));
|
|
77
|
+
var import_ModuleInfo = __toESM(require("./component/ModuleInfo"));
|
|
78
|
+
var import_SharedDepsExplorer = __toESM(require("./component/SharedDepsExplorer"));
|
|
79
|
+
var import_LoadingTrace = __toESM(require("./component/LoadingTrace"));
|
|
80
|
+
var import_LanguageSwitch = __toESM(require("./component/LanguageSwitch"));
|
|
81
|
+
var import_ThemeToggle = __toESM(require("./component/ThemeToggle"));
|
|
82
|
+
var import_utils = require("./utils");
|
|
83
|
+
var import_messages = require("./utils/chrome/messages");
|
|
84
|
+
var import_useDevtoolsTheme = require("./hooks/useDevtoolsTheme");
|
|
85
|
+
var import_i18n = __toESM(require("./i18n"));
|
|
86
|
+
var import_arco = require("@arco-design/web-react/dist/css/arco.css");
|
|
87
|
+
var import_App2 = __toESM(require("./App.module"));
|
|
88
|
+
var import_ThemeToggle2 = __toESM(require("./component/ThemeToggle.module"));
|
|
89
|
+
const cloneModuleInfo = (info) => {
|
|
90
|
+
try {
|
|
91
|
+
return (0, import_utils.normalizeModuleInfoPayload)(info);
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.warn("[MF Devtools] cloneModuleInfo failed", error);
|
|
94
|
+
return {};
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const normalizeShareValue = (target, seen = /* @__PURE__ */ new WeakSet()) => {
|
|
98
|
+
if (typeof target === "function") {
|
|
99
|
+
const name = target.name ? `: ${target.name}` : "";
|
|
100
|
+
return `[Function${name}]`;
|
|
101
|
+
}
|
|
102
|
+
if (!target || typeof target !== "object") {
|
|
103
|
+
return target;
|
|
104
|
+
}
|
|
105
|
+
if (seen.has(target)) {
|
|
106
|
+
return "[Circular]";
|
|
107
|
+
}
|
|
108
|
+
seen.add(target);
|
|
109
|
+
if (target instanceof Map) {
|
|
110
|
+
const mapped = {};
|
|
111
|
+
target.forEach((value, key) => {
|
|
112
|
+
mapped[String(key)] = normalizeShareValue(value, seen);
|
|
113
|
+
});
|
|
114
|
+
return mapped;
|
|
115
|
+
}
|
|
116
|
+
if (target instanceof Set) {
|
|
117
|
+
const setItems = [];
|
|
118
|
+
target.forEach((value) => {
|
|
119
|
+
setItems.push(normalizeShareValue(value, seen));
|
|
120
|
+
});
|
|
121
|
+
return setItems;
|
|
122
|
+
}
|
|
123
|
+
if (Array.isArray(target)) {
|
|
124
|
+
return target.map((item) => normalizeShareValue(item, seen));
|
|
125
|
+
}
|
|
126
|
+
return Object.keys(target).reduce((memo, key) => {
|
|
127
|
+
memo[key] = normalizeShareValue(target[key], seen);
|
|
128
|
+
return memo;
|
|
129
|
+
}, {});
|
|
130
|
+
};
|
|
131
|
+
const buildShareSnapshot = (share) => {
|
|
132
|
+
const normalize = (value) => {
|
|
133
|
+
try {
|
|
134
|
+
return normalizeShareValue(value);
|
|
135
|
+
} catch (error) {
|
|
136
|
+
console.warn("[MF Devtools] normalize share snapshot failed", error);
|
|
137
|
+
return normalizeShareValue(value);
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const scopes = normalize(share || {});
|
|
141
|
+
return scopes;
|
|
142
|
+
};
|
|
143
|
+
const NAV_ITEMS = [
|
|
144
|
+
{ key: "moduleInfo", i18nKey: "app.nav.moduleInfo" },
|
|
145
|
+
{ key: "proxy", i18nKey: "app.nav.proxy" },
|
|
146
|
+
{ key: "dependency", i18nKey: "app.nav.dependency" },
|
|
147
|
+
{ key: "share", i18nKey: "app.nav.share" },
|
|
148
|
+
{ key: "loadingTrace", i18nKey: "app.nav.loadingTrace" },
|
|
149
|
+
{ key: "performance", i18nKey: "app.nav.performance" }
|
|
150
|
+
];
|
|
151
|
+
const THEME_STORAGE_KEY = "mf-devtools-theme";
|
|
152
|
+
const InnerApp = (props) => {
|
|
153
|
+
const {
|
|
154
|
+
versionList,
|
|
155
|
+
setVersionList,
|
|
156
|
+
getVersion,
|
|
157
|
+
handleSnapshot,
|
|
158
|
+
handleProxyAddress,
|
|
159
|
+
customValueValidate,
|
|
160
|
+
headerSlot
|
|
161
|
+
} = props;
|
|
162
|
+
const autoTheme = (0, import_useDevtoolsTheme.useDevtoolsTheme)();
|
|
163
|
+
const [userTheme, setUserTheme] = (0, import_react.useState)(null);
|
|
164
|
+
const effectiveTheme = userTheme != null ? userTheme : autoTheme;
|
|
165
|
+
const { t } = (0, import_react_i18next.useTranslation)();
|
|
166
|
+
const [moduleInfo, setModuleInfo] = (0, import_react.useState)(
|
|
167
|
+
() => {
|
|
168
|
+
var _a;
|
|
169
|
+
return cloneModuleInfo(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
const [shareInfo, setShareInfo] = (0, import_react.useState)(
|
|
173
|
+
() => {
|
|
174
|
+
var _a;
|
|
175
|
+
return buildShareSnapshot((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__);
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
const [inspectedTab, setInspectedTab] = (0, import_react.useState)(
|
|
179
|
+
window.targetTab
|
|
180
|
+
);
|
|
181
|
+
const [inspectedTabRefreshKey, setInspectedTabRefreshKey] = (0, import_react.useState)(0);
|
|
182
|
+
const [activePanel, setActivePanel] = (0, import_react.useState)("proxy");
|
|
183
|
+
const [selectedModuleId, setSelectedModuleId] = (0, import_react.useState)(null);
|
|
184
|
+
const [refreshing, setRefreshing] = (0, import_react.useState)(false);
|
|
185
|
+
const panelSyncReadyRef = (0, import_react.useRef)(false);
|
|
186
|
+
const applyModuleUpdate = (0, import_react.useCallback)((info) => {
|
|
187
|
+
var _a;
|
|
188
|
+
setModuleInfo(cloneModuleInfo(info));
|
|
189
|
+
const shareSnapshot = buildShareSnapshot(
|
|
190
|
+
(_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__
|
|
191
|
+
);
|
|
192
|
+
setShareInfo(shareSnapshot);
|
|
193
|
+
panelSyncReadyRef.current = true;
|
|
194
|
+
}, []);
|
|
195
|
+
const { producer, consumers } = (0, import_react.useMemo)(
|
|
196
|
+
() => (0, import_utils.separateType)(moduleInfo),
|
|
197
|
+
[moduleInfo]
|
|
198
|
+
);
|
|
199
|
+
const moduleKeys = (0, import_react.useMemo)(() => Object.keys(moduleInfo || {}), [moduleInfo]);
|
|
200
|
+
const moduleCount = moduleKeys.length;
|
|
201
|
+
const consumerCount = (0, import_react.useMemo)(
|
|
202
|
+
() => Object.keys(consumers || {}).length,
|
|
203
|
+
[consumers]
|
|
204
|
+
);
|
|
205
|
+
const hasModule = moduleCount > 0 || process.env.NODE_ENV === "development";
|
|
206
|
+
(0, import_react.useEffect)(() => {
|
|
207
|
+
var _a;
|
|
208
|
+
if (typeof window === "undefined") {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
let cancelled = false;
|
|
212
|
+
const applyTheme = (value) => {
|
|
213
|
+
if (cancelled) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
if (value === "light" || value === "dark") {
|
|
217
|
+
setUserTheme(value);
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
try {
|
|
221
|
+
const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
|
|
222
|
+
if (stored === "light" || stored === "dark") {
|
|
223
|
+
applyTheme(stored);
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
} catch (error) {
|
|
227
|
+
console.warn("[MF Devtools] read theme from localStorage failed", error);
|
|
228
|
+
}
|
|
229
|
+
try {
|
|
230
|
+
const chromeObj = window.chrome;
|
|
231
|
+
const storage = (_a = chromeObj == null ? void 0 : chromeObj.storage) == null ? void 0 : _a.sync;
|
|
232
|
+
if (storage && typeof storage.get === "function") {
|
|
233
|
+
storage.get([THEME_STORAGE_KEY], (result) => {
|
|
234
|
+
applyTheme(result == null ? void 0 : result[THEME_STORAGE_KEY]);
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
} catch (error) {
|
|
238
|
+
console.warn(
|
|
239
|
+
"[MF Devtools] read theme from chrome.storage.sync failed",
|
|
240
|
+
error
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
return () => {
|
|
244
|
+
cancelled = true;
|
|
245
|
+
};
|
|
246
|
+
}, []);
|
|
247
|
+
(0, import_react.useEffect)(() => {
|
|
248
|
+
if (typeof document === "undefined") {
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
const { body } = document;
|
|
252
|
+
if (!body) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
if (effectiveTheme === "dark") {
|
|
256
|
+
body.setAttribute("arco-theme", "dark");
|
|
257
|
+
} else {
|
|
258
|
+
body.removeAttribute("arco-theme");
|
|
259
|
+
}
|
|
260
|
+
return () => {
|
|
261
|
+
body.removeAttribute("arco-theme");
|
|
262
|
+
};
|
|
263
|
+
}, [effectiveTheme]);
|
|
264
|
+
(0, import_react.useEffect)(() => {
|
|
265
|
+
if (!moduleKeys.length) {
|
|
266
|
+
setSelectedModuleId(null);
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
if (!selectedModuleId || !moduleKeys.includes(selectedModuleId)) {
|
|
270
|
+
setSelectedModuleId(moduleKeys[0]);
|
|
271
|
+
}
|
|
272
|
+
}, [moduleKeys, selectedModuleId]);
|
|
273
|
+
(0, import_react.useEffect)(() => {
|
|
274
|
+
const bootstrap = () => __async(void 0, null, function* () {
|
|
275
|
+
const tab = yield (0, import_utils.syncActiveTab)();
|
|
276
|
+
setInspectedTab(tab || void 0);
|
|
277
|
+
const detach = yield (0, import_utils.getGlobalModuleInfo)(
|
|
278
|
+
(info) => applyModuleUpdate(info)
|
|
279
|
+
);
|
|
280
|
+
panelSyncReadyRef.current = true;
|
|
281
|
+
return detach;
|
|
282
|
+
});
|
|
283
|
+
const cleanupPromise = bootstrap();
|
|
284
|
+
return () => {
|
|
285
|
+
cleanupPromise.then((cleanup) => cleanup == null ? void 0 : cleanup());
|
|
286
|
+
};
|
|
287
|
+
}, [applyModuleUpdate]);
|
|
288
|
+
(0, import_react.useEffect)(() => {
|
|
289
|
+
const updateActiveTab = (tabId, options) => __async(void 0, null, function* () {
|
|
290
|
+
var _a, _b;
|
|
291
|
+
const tab = yield (0, import_utils.syncActiveTab)(tabId);
|
|
292
|
+
setInspectedTab(tab || void 0);
|
|
293
|
+
if ((options == null ? void 0 : options.status) === "loading") {
|
|
294
|
+
setInspectedTabRefreshKey((key) => key + 1);
|
|
295
|
+
return;
|
|
296
|
+
}
|
|
297
|
+
if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
|
|
298
|
+
applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
|
|
299
|
+
}
|
|
300
|
+
yield (0, import_utils.refreshModuleInfo)();
|
|
301
|
+
});
|
|
302
|
+
const onMessage = (message, _sender, _sendResponse) => {
|
|
303
|
+
if ((message == null ? void 0 : message.type) === import_messages.MESSAGE_ACTIVE_TAB_CHANGED) {
|
|
304
|
+
updateActiveTab(message.tabId, { status: message.status });
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
chrome.runtime.onMessage.addListener(onMessage);
|
|
308
|
+
const onActivated = (activeInfo) => {
|
|
309
|
+
updateActiveTab(activeInfo.tabId);
|
|
310
|
+
};
|
|
311
|
+
chrome.tabs.onActivated.addListener(onActivated);
|
|
312
|
+
return () => {
|
|
313
|
+
chrome.runtime.onMessage.removeListener(onMessage);
|
|
314
|
+
chrome.tabs.onActivated.removeListener(onActivated);
|
|
315
|
+
};
|
|
316
|
+
}, [applyModuleUpdate]);
|
|
317
|
+
const handleRefresh = () => __async(void 0, null, function* () {
|
|
318
|
+
var _a, _b;
|
|
319
|
+
if (refreshing) {
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
setRefreshing(true);
|
|
323
|
+
try {
|
|
324
|
+
yield (0, import_utils.refreshModuleInfo)();
|
|
325
|
+
if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
|
|
326
|
+
applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
|
|
327
|
+
}
|
|
328
|
+
} finally {
|
|
329
|
+
setRefreshing(false);
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
const handleThemeToggle = () => {
|
|
333
|
+
var _a;
|
|
334
|
+
const current = effectiveTheme;
|
|
335
|
+
const next = current === "dark" ? "light" : "dark";
|
|
336
|
+
setUserTheme(next);
|
|
337
|
+
if (typeof window !== "undefined") {
|
|
338
|
+
try {
|
|
339
|
+
window.localStorage.setItem(THEME_STORAGE_KEY, next);
|
|
340
|
+
} catch (error) {
|
|
341
|
+
console.warn(
|
|
342
|
+
"[MF Devtools] persist theme to localStorage failed",
|
|
343
|
+
error
|
|
344
|
+
);
|
|
345
|
+
}
|
|
346
|
+
try {
|
|
347
|
+
const chromeObj = window.chrome;
|
|
348
|
+
const storage = (_a = chromeObj == null ? void 0 : chromeObj.storage) == null ? void 0 : _a.sync;
|
|
349
|
+
if (storage && typeof storage.set === "function") {
|
|
350
|
+
storage.set({ [THEME_STORAGE_KEY]: next });
|
|
351
|
+
}
|
|
352
|
+
} catch (error) {
|
|
353
|
+
console.warn(
|
|
354
|
+
"[MF Devtools] persist theme to chrome.storage.sync failed",
|
|
355
|
+
error
|
|
356
|
+
);
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
const resetModuleInfo = (0, import_react.useCallback)(() => {
|
|
361
|
+
var _a;
|
|
362
|
+
const origin = ((_a = window.__FEDERATION__) == null ? void 0 : _a.originModuleInfo) || {};
|
|
363
|
+
applyModuleUpdate(cloneModuleInfo(origin));
|
|
364
|
+
}, [applyModuleUpdate]);
|
|
365
|
+
(0, import_react.useEffect)(() => {
|
|
366
|
+
const shouldAutoSync = activePanel === "proxy" || activePanel === "dependency" || activePanel === "share";
|
|
367
|
+
if (!shouldAutoSync || !panelSyncReadyRef.current) {
|
|
368
|
+
return;
|
|
369
|
+
}
|
|
370
|
+
let cancelled = false;
|
|
371
|
+
const syncPanelData = () => __async(void 0, null, function* () {
|
|
372
|
+
var _a, _b;
|
|
373
|
+
yield (0, import_utils.refreshModuleInfo)();
|
|
374
|
+
if (cancelled) {
|
|
375
|
+
return;
|
|
376
|
+
}
|
|
377
|
+
if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
|
|
378
|
+
applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
|
|
379
|
+
}
|
|
380
|
+
});
|
|
381
|
+
void syncPanelData();
|
|
382
|
+
return () => {
|
|
383
|
+
cancelled = true;
|
|
384
|
+
};
|
|
385
|
+
}, [activePanel, applyModuleUpdate]);
|
|
386
|
+
const renderContent = () => {
|
|
387
|
+
var _a;
|
|
388
|
+
switch (activePanel) {
|
|
389
|
+
case "moduleInfo":
|
|
390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
391
|
+
import_ModuleInfo.default,
|
|
392
|
+
{
|
|
393
|
+
moduleInfo,
|
|
394
|
+
selectedModuleId,
|
|
395
|
+
onSelectModule: (id) => setSelectedModuleId(id)
|
|
396
|
+
}
|
|
397
|
+
);
|
|
398
|
+
case "proxy":
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
400
|
+
import_Layout.default,
|
|
401
|
+
{
|
|
402
|
+
moduleInfo,
|
|
403
|
+
versionList,
|
|
404
|
+
setVersionList,
|
|
405
|
+
getVersion,
|
|
406
|
+
handleSnapshot,
|
|
407
|
+
handleProxyAddress,
|
|
408
|
+
customValueValidate,
|
|
409
|
+
headerSlot,
|
|
410
|
+
onModuleInfoChange: applyModuleUpdate,
|
|
411
|
+
onModuleInfoReset: resetModuleInfo,
|
|
412
|
+
tabId: inspectedTab == null ? void 0 : inspectedTab.id
|
|
413
|
+
}
|
|
414
|
+
);
|
|
415
|
+
case "dependency":
|
|
416
|
+
return hasModule ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DependencyGraph.default, { snapshot: moduleInfo }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
417
|
+
import_web_react.Empty,
|
|
418
|
+
{
|
|
419
|
+
description: t("common.empty.noModuleInfo"),
|
|
420
|
+
className: import_App2.default.empty
|
|
421
|
+
}
|
|
422
|
+
) });
|
|
423
|
+
case "share":
|
|
424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
425
|
+
import_SharedDepsExplorer.default,
|
|
426
|
+
{
|
|
427
|
+
shareData: JSON.parse(
|
|
428
|
+
JSON.stringify((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__)
|
|
429
|
+
)
|
|
430
|
+
}
|
|
431
|
+
);
|
|
432
|
+
case "loadingTrace":
|
|
433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
434
|
+
import_LoadingTrace.default,
|
|
435
|
+
{
|
|
436
|
+
tabId: inspectedTab == null ? void 0 : inspectedTab.id,
|
|
437
|
+
resetKey: inspectedTabRefreshKey
|
|
438
|
+
}
|
|
439
|
+
);
|
|
440
|
+
case "performance":
|
|
441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: t("app.performance.placeholder") });
|
|
442
|
+
default:
|
|
443
|
+
return null;
|
|
444
|
+
}
|
|
445
|
+
};
|
|
446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
447
|
+
"div",
|
|
448
|
+
{
|
|
449
|
+
className: `${import_App2.default.shell} ${import_App2.default.overrideArco} ${effectiveTheme === "dark" ? "arco-theme-dark" : ""}`,
|
|
450
|
+
children: [
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App2.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
452
|
+
"button",
|
|
453
|
+
{
|
|
454
|
+
type: "button",
|
|
455
|
+
className: `${import_App2.default.tabItem} ${activePanel === item.key ? import_App2.default.activeTab : ""}`,
|
|
456
|
+
onClick: () => setActivePanel(item.key),
|
|
457
|
+
children: t(item.i18nKey)
|
|
458
|
+
},
|
|
459
|
+
item.key
|
|
460
|
+
)) }),
|
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App2.default.panel, children: [
|
|
462
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App2.default.header, children: [
|
|
463
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerTop, children: [
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.branding, children: [
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.logo, children: t("app.header.title") }),
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.subtitle, children: t("app.header.subtitle") })
|
|
467
|
+
] }),
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerActions, children: [
|
|
469
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LanguageSwitch.default, {}),
|
|
470
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
471
|
+
import_ThemeToggle.default,
|
|
472
|
+
{
|
|
473
|
+
theme: effectiveTheme,
|
|
474
|
+
onToggle: handleThemeToggle
|
|
475
|
+
}
|
|
476
|
+
),
|
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: t("app.header.refresh.tooltip"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
478
|
+
import_web_react.Button,
|
|
479
|
+
{
|
|
480
|
+
size: "default",
|
|
481
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconRefresh, {}),
|
|
482
|
+
loading: refreshing,
|
|
483
|
+
onClick: handleRefresh,
|
|
484
|
+
className: import_ThemeToggle2.default.themeToggle
|
|
485
|
+
}
|
|
486
|
+
) })
|
|
487
|
+
] })
|
|
488
|
+
] }),
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.meta, children: [
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.scope, children: [
|
|
491
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.scopeLabel, children: t("app.header.scope.label") }),
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: "common-tag", children: (inspectedTab == null ? void 0 : inspectedTab.title) || t("app.header.scope.waiting") })
|
|
493
|
+
] }),
|
|
494
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.stats, children: [
|
|
495
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: moduleCount }),
|
|
497
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.modules") })
|
|
498
|
+
] }),
|
|
499
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
|
|
500
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: producer.length }),
|
|
501
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.remotes") })
|
|
502
|
+
] }),
|
|
503
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
|
|
504
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: consumerCount }),
|
|
505
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.consumers") })
|
|
506
|
+
] })
|
|
507
|
+
] })
|
|
508
|
+
] })
|
|
509
|
+
] }),
|
|
510
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.content, children: renderContent() }) })
|
|
511
|
+
] })
|
|
512
|
+
]
|
|
513
|
+
}
|
|
514
|
+
);
|
|
515
|
+
};
|
|
516
|
+
const App = (props) => {
|
|
517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_i18next.I18nextProvider, { i18n: import_i18n.default, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerApp, __spreadValues({}, props)) });
|
|
518
|
+
};
|
|
519
|
+
var App_default = App;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var App_module_exports = {};
|
|
19
|
+
__export(App_module_exports, {
|
|
20
|
+
default: () => App_module_default
|
|
21
|
+
});
|
|
22
|
+
module.exports = __toCommonJS(App_module_exports);
|
|
23
|
+
var import_App_module = require("./App_module.css");
|
|
24
|
+
var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee" };
|