@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.
Files changed (75) hide show
  1. package/dist/types/App.css +13 -0
  2. package/dist/types/App.js +519 -0
  3. package/dist/types/App.module.js +24 -0
  4. package/dist/types/App_module.css +307 -0
  5. package/dist/types/component/DependencyGraph/index.js +225 -0
  6. package/dist/types/component/DependencyGraph/index.module.js +24 -0
  7. package/dist/types/component/DependencyGraph/index_module.css +100 -0
  8. package/dist/types/component/DependencyGraphItem/index.js +124 -0
  9. package/dist/types/component/DependencyGraphItem/index.module.js +24 -0
  10. package/dist/types/component/DependencyGraphItem/index_module.css +95 -0
  11. package/dist/types/component/Form/index.js +372 -0
  12. package/dist/types/component/Form/index.module.js +24 -0
  13. package/dist/types/component/Form/index_module.css +198 -0
  14. package/dist/types/component/LanguageSwitch.js +79 -0
  15. package/dist/types/component/Layout/index.js +471 -0
  16. package/dist/types/component/Layout/index.module.js +24 -0
  17. package/dist/types/component/Layout/index_module.css +68 -0
  18. package/dist/types/component/LoadingTrace/index.js +953 -0
  19. package/dist/types/component/LoadingTrace/index.module.js +24 -0
  20. package/dist/types/component/LoadingTrace/index_module.css +876 -0
  21. package/dist/types/component/ModuleInfo/index.js +342 -0
  22. package/dist/types/component/ModuleInfo/index.module.js +24 -0
  23. package/dist/types/component/ModuleInfo/index_module.css +184 -0
  24. package/dist/types/component/SharedDepsExplorer/FocusResultDisplay.js +64 -0
  25. package/dist/types/component/SharedDepsExplorer/FocusResultDisplay.module.js +24 -0
  26. package/dist/types/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
  27. package/dist/types/component/SharedDepsExplorer/index.js +638 -0
  28. package/dist/types/component/SharedDepsExplorer/index.module.js +24 -0
  29. package/dist/types/component/SharedDepsExplorer/index_module.css +467 -0
  30. package/dist/types/component/SharedDepsExplorer/share-utils.js +252 -0
  31. package/dist/types/component/ThemeToggle.js +48 -0
  32. package/dist/types/component/ThemeToggle.module.js +24 -0
  33. package/dist/types/component/ThemeToggle_module.css +12 -0
  34. package/dist/types/hooks/useDevtoolsTheme.js +100 -0
  35. package/dist/types/i18n/index.js +721 -0
  36. package/dist/types/init.js +8 -0
  37. package/dist/types/src/App.d.ts +1 -1
  38. package/dist/types/src/component/DependencyGraph/index.d.ts +1 -1
  39. package/dist/types/src/component/DependencyGraphItem/index.d.ts +1 -1
  40. package/dist/types/src/component/Form/index.d.ts +1 -1
  41. package/dist/types/src/component/LanguageSwitch.d.ts +1 -1
  42. package/dist/types/src/component/Layout/index.d.ts +1 -1
  43. package/dist/types/src/component/LoadingTrace/index.d.ts +1 -1
  44. package/dist/types/src/component/ModuleInfo/index.d.ts +1 -1
  45. package/dist/types/src/component/SharedDepsExplorer/index.d.ts +1 -1
  46. package/dist/types/src/i18n/index.d.ts +1 -1
  47. package/dist/types/src/template/constant.d.ts +1 -1
  48. package/dist/types/src/utils/chrome/observability.d.ts +1 -1
  49. package/dist/types/src/utils/data/index.d.ts +1 -1
  50. package/dist/types/stories/index.stories.d.ts +2 -1
  51. package/dist/types/template/constant.js +84 -0
  52. package/dist/types/template/index.js +21 -0
  53. package/dist/types/utils/chrome/fast-refresh.js +329 -0
  54. package/dist/types/utils/chrome/index.js +321 -0
  55. package/dist/types/utils/chrome/messages.js +39 -0
  56. package/dist/types/utils/chrome/observability-plugin.js +85 -0
  57. package/dist/types/utils/chrome/observability-shared.js +125 -0
  58. package/dist/types/utils/chrome/observability.js +233 -0
  59. package/dist/types/utils/chrome/override-remote.js +17 -0
  60. package/dist/types/utils/chrome/post-message-init.js +5 -0
  61. package/dist/types/utils/chrome/post-message-listener.js +36 -0
  62. package/dist/types/utils/chrome/post-message-start.js +10 -0
  63. package/dist/types/utils/chrome/post-message.js +91 -0
  64. package/dist/types/utils/chrome/safe-post-message.js +147 -0
  65. package/dist/types/utils/chrome/snapshot-plugin.js +17 -0
  66. package/dist/types/utils/chrome/storage.js +71 -0
  67. package/dist/types/utils/data/index.js +83 -0
  68. package/dist/types/utils/index.js +27 -0
  69. package/dist/types/utils/sdk/graph.js +213 -0
  70. package/dist/types/utils/sdk/index.js +104 -0
  71. package/dist/types/utils/types/common.js +15 -0
  72. package/dist/types/utils/types/index.js +21 -0
  73. package/dist/types/vendor/basic-proxy-core.js +147 -0
  74. package/dist/types/worker/index.js +175 -0
  75. 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" };