@module-federation/devtools 0.23.0 → 0.24.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 (10) hide show
  1. package/dist/es/component/DependencyGraph/index.js +1 -1
  2. package/dist/es/component/SharedDepsExplorer/index.js +163 -22
  3. package/dist/es/component/SharedDepsExplorer/share-utils.js +21 -5
  4. package/dist/es/i18n/index.js +6 -2
  5. package/dist/lib/component/DependencyGraph/index.js +1 -1
  6. package/dist/lib/component/SharedDepsExplorer/index.js +157 -20
  7. package/dist/lib/component/SharedDepsExplorer/share-utils.js +21 -5
  8. package/dist/lib/i18n/index.js +6 -2
  9. package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts +2 -1
  10. package/package.json +19 -7
package/dist/es/component/DependencyGraph/index.js CHANGED
@@ -166,7 +166,7 @@ const Graph = (props) => {
166
166
  placeholder: t("dependencyGraph.filters.depthPlaceholder"),
167
167
  style: { width: 120 },
168
168
  value: maxDepth === Infinity ? "All" : maxDepth,
169
- onChange: (val) => setMaxDepth(val === "All" ? Infinity : val),
169
+ onChange: (val) => setMaxDepth(val === "All" ? Infinity : Number(val)),
170
170
  children: [
171
171
  /* @__PURE__ */ jsx(Option, { value: "All", children: t("dependencyGraph.filters.depthAll") }),
172
172
  Array.from({ length: availableDepth }, (_, i) => i + 1).map(
package/dist/es/component/SharedDepsExplorer/index.js CHANGED
@@ -1,3 +1,34 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
1
32
  var __async = (__this, __arguments, generator) => {
2
33
  return new Promise((resolve, reject) => {
3
34
  var fulfilled = (value) => {
@@ -27,7 +58,8 @@ import {
27
58
  Package2,
28
59
  Repeat,
29
60
  Search,
30
- Server
61
+ Server,
62
+ Info
31
63
  } from "lucide-react";
32
64
  import {
33
65
  Card,
@@ -37,7 +69,8 @@ import {
37
69
  Select,
38
70
  Collapse,
39
71
  Popover,
40
- Button
72
+ Button,
73
+ Tooltip
41
74
  } from "@arco-design/web-react";
42
75
  import { useTranslation } from "react-i18next";
43
76
  import {
@@ -50,6 +83,10 @@ import {
50
83
  import FocusResultDisplay from "./FocusResultDisplay";
51
84
  import styles from "./index.module";
52
85
  const ALL_VALUE = "__all__";
86
+ function HoverTag(_a) {
87
+ var _b = _a, { tooltip, children } = _b, tagProps = __objRest(_b, ["tooltip", "children"]);
88
+ return /* @__PURE__ */ jsx(Popover, { trigger: "hover", position: "top", content: tooltip != null ? tooltip : children, children: /* @__PURE__ */ jsx(Tag, __spreadProps(__spreadValues({}, tagProps), { children })) });
89
+ }
53
90
  function SharedDepsExplorer({
54
91
  shareData: shareDataProp
55
92
  }) {
@@ -64,11 +101,18 @@ function SharedDepsExplorer({
64
101
  if (status === "loading") {
65
102
  return t("sharedDeps.status.loading");
66
103
  }
104
+ if (status === "t-loaded") {
105
+ return t("sharedDeps.status.tLoaded");
106
+ }
107
+ if (status === "t-loading") {
108
+ return t("sharedDeps.status.tLoading");
109
+ }
67
110
  return t("sharedDeps.status.notLoaded");
68
111
  };
69
112
  const [selectedProvider, setSelectedProvider] = useState("");
70
113
  const [selectedPackage, setSelectedPackage] = useState("");
71
114
  const [selectedVersion, setSelectedVersion] = useState("");
115
+ const [selectedMode, setSelectedMode] = useState("");
72
116
  const [searchText, setSearchText] = useState("");
73
117
  const [chartScope, setChartScope] = useState("default");
74
118
  const [focusPackage, setFocusPackage] = useState("react");
@@ -127,6 +171,9 @@ function SharedDepsExplorer({
127
171
  if (selectedVersion && v.version !== selectedVersion) {
128
172
  return false;
129
173
  }
174
+ if (selectedMode && v.treeShakingMode !== selectedMode) {
175
+ return false;
176
+ }
130
177
  if (keyword && !v.packageName.toLowerCase().includes(keyword)) {
131
178
  return false;
132
179
  }
@@ -137,6 +184,7 @@ function SharedDepsExplorer({
137
184
  selectedProvider,
138
185
  selectedPackage,
139
186
  selectedVersion,
187
+ selectedMode,
140
188
  searchText
141
189
  ]);
142
190
  const tree = useMemo(
@@ -155,6 +203,18 @@ function SharedDepsExplorer({
155
203
  });
156
204
  return Array.from(set).sort();
157
205
  }, [normalized, selectedPackage]);
206
+ const modesForSelectedPackage = useMemo(() => {
207
+ if (!selectedPackage) {
208
+ return [];
209
+ }
210
+ const set = /* @__PURE__ */ new Set();
211
+ normalized.forEach((v) => {
212
+ if (v.packageName === selectedPackage && v.treeShakingMode) {
213
+ set.add(v.treeShakingMode);
214
+ }
215
+ });
216
+ return Array.from(set).sort();
217
+ }, [normalized, selectedPackage]);
158
218
  const focusVersionsForPackage = useMemo(() => {
159
219
  if (!focusPackage) {
160
220
  return [];
@@ -202,22 +262,58 @@ function SharedDepsExplorer({
202
262
  title: t("sharedDeps.table.columns.status"),
203
263
  width: "22%",
204
264
  render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
205
- ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ jsx(
206
- Tag,
265
+ ["loaded", "loading", "t-loaded", "t-loading"].includes(
266
+ item.loadedStatus
267
+ ) ? /* @__PURE__ */ jsx(
268
+ HoverTag,
207
269
  {
208
270
  size: "small",
209
271
  className: `${styles.tagContainer} loaded-status-tag`,
272
+ tooltip: loadedStatusLabelLocal(item.loadedStatus),
210
273
  children: loadedStatusLabelLocal(item.loadedStatus)
211
274
  }
212
275
  ) : null,
276
+ item.treeShakingMode ? /* @__PURE__ */ jsx(
277
+ HoverTag,
278
+ {
279
+ size: "small",
280
+ className: styles.tagContainer,
281
+ tooltip: item.treeShakingMode,
282
+ children: item.treeShakingMode
283
+ }
284
+ ) : null,
213
285
  /* @__PURE__ */ jsxs("div", { className: styles.configTags, children: [
214
- item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "singleton" }),
215
- item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "eager" }),
216
- item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "strictVersion" }),
217
- item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: styles.scale90, children: [
218
- "req: ",
219
- item.shareConfig.requiredVersion
220
- ] })
286
+ item.shareConfig.singleton && /* @__PURE__ */ jsx(
287
+ HoverTag,
288
+ {
289
+ size: "small",
290
+ className: styles.scale90,
291
+ tooltip: "singleton",
292
+ children: "singleton"
293
+ }
294
+ ),
295
+ item.shareConfig.eager && /* @__PURE__ */ jsx(HoverTag, { size: "small", className: styles.scale90, tooltip: "eager", children: "eager" }),
296
+ item.shareConfig.strictVersion && /* @__PURE__ */ jsx(
297
+ HoverTag,
298
+ {
299
+ size: "small",
300
+ className: styles.scale90,
301
+ tooltip: "strictVersion",
302
+ children: "strictVersion"
303
+ }
304
+ ),
305
+ item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(
306
+ HoverTag,
307
+ {
308
+ size: "small",
309
+ className: styles.scale90,
310
+ tooltip: `requiredVersion: ${item.shareConfig.requiredVersion}`,
311
+ children: [
312
+ "requiredVersion: ",
313
+ item.shareConfig.requiredVersion
314
+ ]
315
+ }
316
+ )
221
317
  ] })
222
318
  ] })
223
319
  },
@@ -250,7 +346,7 @@ function SharedDepsExplorer({
250
346
  width: "12%",
251
347
  render: (_, item) => {
252
348
  var _a;
253
- return /* @__PURE__ */ jsx(Tag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
349
+ return /* @__PURE__ */ jsx(HoverTag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
254
350
  }
255
351
  }
256
352
  ];
@@ -301,16 +397,30 @@ function SharedDepsExplorer({
301
397
  ] })
302
398
  ] }) }),
303
399
  /* @__PURE__ */ jsx("div", { className: styles.statusTags, children: /* @__PURE__ */ jsxs("div", { className: styles.tagRow, children: [
304
- /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} loaded-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
305
- /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
306
- /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
307
- /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
308
- ] }) }),
309
- /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} reused-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
310
- /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
311
- /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
312
- /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
313
- ] }) })
400
+ /* @__PURE__ */ jsx(
401
+ HoverTag,
402
+ {
403
+ className: `${styles.tagContent} loaded-status-tag`,
404
+ tooltip: `Loaded: ${stats.loadedCount}`,
405
+ children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
406
+ /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
407
+ /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
408
+ /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
409
+ ] })
410
+ }
411
+ ),
412
+ /* @__PURE__ */ jsx(
413
+ HoverTag,
414
+ {
415
+ className: `${styles.tagContent} reused-status-tag`,
416
+ tooltip: `Reused: ${stats.reusedCount}`,
417
+ children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
418
+ /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
419
+ /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
420
+ /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
421
+ ] })
422
+ }
423
+ )
314
424
  ] }) })
315
425
  ] })
316
426
  ] }) }),
@@ -422,6 +532,37 @@ function SharedDepsExplorer({
422
532
  children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
423
533
  }
424
534
  )
535
+ ] }),
536
+ /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
537
+ /* @__PURE__ */ jsxs(
538
+ "div",
539
+ {
540
+ className: styles.inputLabel,
541
+ style: { display: "flex", alignItems: "center", gap: 4 },
542
+ children: [
543
+ "Mode",
544
+ /* @__PURE__ */ jsx(Tooltip, { content: "Shared Tree Shaking Mode, options: server-calc | runtime-infer", children: /* @__PURE__ */ jsx(
545
+ Info,
546
+ {
547
+ size: 14,
548
+ style: { cursor: "help", color: "#86909c" }
549
+ }
550
+ ) })
551
+ ]
552
+ }
553
+ ),
554
+ /* @__PURE__ */ jsx(
555
+ Select,
556
+ {
557
+ value: selectedMode || void 0,
558
+ onChange: (value) => setSelectedMode(value === ALL_VALUE ? "" : value),
559
+ placeholder: "All Modes",
560
+ className: styles.fullWidth,
561
+ disabled: !selectedPackage || modesForSelectedPackage.length === 0,
562
+ allowClear: true,
563
+ children: modesForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
564
+ }
565
+ )
425
566
  ] })
426
567
  ] }),
427
568
  /* @__PURE__ */ jsxs("div", { className: styles.searchGrid, children: [
package/dist/es/component/SharedDepsExplorer/share-utils.js CHANGED
@@ -2,6 +2,13 @@ function isRecord(value) {
2
2
  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
3
3
  }
4
4
  function computeLoadedStatus(entry) {
5
+ var _a, _b;
6
+ if (((_a = entry.treeShaking) == null ? void 0 : _a.loaded) === true) {
7
+ return "t-loaded";
8
+ }
9
+ if ((_b = entry.treeShaking) == null ? void 0 : _b.loading) {
10
+ return "t-loading";
11
+ }
5
12
  if (entry.loaded === true) {
6
13
  return "loaded";
7
14
  }
@@ -23,7 +30,7 @@ function normalizeEntry({
23
30
  versionKey,
24
31
  entry
25
32
  }) {
26
- var _a;
33
+ var _a, _b;
27
34
  if (!isRecord(entry)) {
28
35
  return null;
29
36
  }
@@ -40,6 +47,7 @@ function normalizeEntry({
40
47
  from: sharedEntry.from,
41
48
  useIn,
42
49
  shareConfig: (_a = sharedEntry.shareConfig) != null ? _a : {},
50
+ treeShakingMode: (_b = sharedEntry.treeShaking) == null ? void 0 : _b.mode,
43
51
  strategy: sharedEntry.strategy,
44
52
  loaded: sharedEntry.loaded,
45
53
  loading: sharedEntry.loading,
@@ -117,7 +125,7 @@ function computeShareStats(versions) {
117
125
  providerSet.add(v.provider);
118
126
  scopeSet.add(v.scope);
119
127
  packageSet.add(v.packageName);
120
- if (v.loadedStatus === "loaded") {
128
+ if (v.loadedStatus === "loaded" || v.loadedStatus === "t-loaded") {
121
129
  loadedCount += 1;
122
130
  }
123
131
  if (v.reuseStatus) {
@@ -176,11 +184,19 @@ function findPackageProvider(versions, packageName, version) {
176
184
  return null;
177
185
  }
178
186
  const providers = Array.from(new Set(candidates.map((v) => v.from))).sort();
179
- const hasLoaded = candidates.some((v) => v.loadedStatus === "loaded");
180
- const hasLoading = !hasLoaded && candidates.some((v) => v.loadedStatus === "loading");
187
+ const hasTreeShakingLoaded = candidates.some(
188
+ (v) => v.loadedStatus === "t-loaded"
189
+ );
190
+ const hasLoaded = !hasTreeShakingLoaded && candidates.some((v) => v.loadedStatus === "loaded");
191
+ const hasTreeShakingLoading = !hasTreeShakingLoaded && !hasLoaded && candidates.some((v) => v.loadedStatus === "t-loading");
192
+ const hasLoading = !hasTreeShakingLoaded && !hasLoaded && !hasTreeShakingLoading && candidates.some((v) => v.loadedStatus === "loading");
181
193
  let status = "not-loaded";
182
- if (hasLoaded) {
194
+ if (hasTreeShakingLoaded) {
195
+ status = "t-loaded";
196
+ } else if (hasLoaded) {
183
197
  status = "loaded";
198
+ } else if (hasTreeShakingLoading) {
199
+ status = "t-loading";
184
200
  } else if (hasLoading) {
185
201
  status = "loading";
186
202
  }
package/dist/es/i18n/index.js CHANGED
@@ -85,7 +85,9 @@ const resources = {
85
85
  status: {
86
86
  loaded: "Loaded",
87
87
  loading: "Loading",
88
- notLoaded: "Not Loaded"
88
+ notLoaded: "Not Loaded",
89
+ tLoaded: "Tree Shaking Loaded",
90
+ tLoading: "Tree Shaking Loading"
89
91
  },
90
92
  focusResult: {
91
93
  providerLabel: "Provider: "
@@ -312,7 +314,9 @@ const resources = {
312
314
  status: {
313
315
  loaded: "已加载",
314
316
  loading: "加载中",
315
- notLoaded: "未加载"
317
+ notLoaded: "未加载",
318
+ tLoaded: "TreeShaking 已加载",
319
+ tLoading: "TreeShaking 加载中"
316
320
  },
317
321
  focusResult: {
318
322
  providerLabel: "提供方："
package/dist/lib/component/DependencyGraph/index.js CHANGED
@@ -191,7 +191,7 @@ const Graph = (props) => {
191
191
  placeholder: t("dependencyGraph.filters.depthPlaceholder"),
192
192
  style: { width: 120 },
193
193
  value: maxDepth === Infinity ? "All" : maxDepth,
194
- onChange: (val) => setMaxDepth(val === "All" ? Infinity : val),
194
+ onChange: (val) => setMaxDepth(val === "All" ? Infinity : Number(val)),
195
195
  children: [
196
196
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: t("dependencyGraph.filters.depthAll") }),
197
197
  Array.from({ length: availableDepth }, (_, i) => i + 1).map(
package/dist/lib/component/SharedDepsExplorer/index.js CHANGED
@@ -1,10 +1,39 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
9
  var __getProtoOf = Object.getPrototypeOf;
7
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
8
37
  var __export = (target, all) => {
9
38
  for (var name in all)
10
39
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,6 +89,10 @@ var import_share_utils = require("./share-utils");
60
89
  var import_FocusResultDisplay = __toESM(require("./FocusResultDisplay"));
61
90
  var import_index = __toESM(require("./index.module"));
62
91
  const ALL_VALUE = "__all__";
92
+ function HoverTag(_a) {
93
+ var _b = _a, { tooltip, children } = _b, tagProps = __objRest(_b, ["tooltip", "children"]);
94
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Popover, { trigger: "hover", position: "top", content: tooltip != null ? tooltip : children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, __spreadProps(__spreadValues({}, tagProps), { children })) });
95
+ }
63
96
  function SharedDepsExplorer({
64
97
  shareData: shareDataProp
65
98
  }) {
@@ -74,11 +107,18 @@ function SharedDepsExplorer({
74
107
  if (status === "loading") {
75
108
  return t("sharedDeps.status.loading");
76
109
  }
110
+ if (status === "t-loaded") {
111
+ return t("sharedDeps.status.tLoaded");
112
+ }
113
+ if (status === "t-loading") {
114
+ return t("sharedDeps.status.tLoading");
115
+ }
77
116
  return t("sharedDeps.status.notLoaded");
78
117
  };
79
118
  const [selectedProvider, setSelectedProvider] = (0, import_react.useState)("");
80
119
  const [selectedPackage, setSelectedPackage] = (0, import_react.useState)("");
81
120
  const [selectedVersion, setSelectedVersion] = (0, import_react.useState)("");
121
+ const [selectedMode, setSelectedMode] = (0, import_react.useState)("");
82
122
  const [searchText, setSearchText] = (0, import_react.useState)("");
83
123
  const [chartScope, setChartScope] = (0, import_react.useState)("default");
84
124
  const [focusPackage, setFocusPackage] = (0, import_react.useState)("react");
@@ -137,6 +177,9 @@ function SharedDepsExplorer({
137
177
  if (selectedVersion && v.version !== selectedVersion) {
138
178
  return false;
139
179
  }
180
+ if (selectedMode && v.treeShakingMode !== selectedMode) {
181
+ return false;
182
+ }
140
183
  if (keyword && !v.packageName.toLowerCase().includes(keyword)) {
141
184
  return false;
142
185
  }
@@ -147,6 +190,7 @@ function SharedDepsExplorer({
147
190
  selectedProvider,
148
191
  selectedPackage,
149
192
  selectedVersion,
193
+ selectedMode,
150
194
  searchText
151
195
  ]);
152
196
  const tree = (0, import_react.useMemo)(
@@ -165,6 +209,18 @@ function SharedDepsExplorer({
165
209
  });
166
210
  return Array.from(set).sort();
167
211
  }, [normalized, selectedPackage]);
212
+ const modesForSelectedPackage = (0, import_react.useMemo)(() => {
213
+ if (!selectedPackage) {
214
+ return [];
215
+ }
216
+ const set = /* @__PURE__ */ new Set();
217
+ normalized.forEach((v) => {
218
+ if (v.packageName === selectedPackage && v.treeShakingMode) {
219
+ set.add(v.treeShakingMode);
220
+ }
221
+ });
222
+ return Array.from(set).sort();
223
+ }, [normalized, selectedPackage]);
168
224
  const focusVersionsForPackage = (0, import_react.useMemo)(() => {
169
225
  if (!focusPackage) {
170
226
  return [];
@@ -212,22 +268,58 @@ function SharedDepsExplorer({
212
268
  title: t("sharedDeps.table.columns.status"),
213
269
  width: "22%",
214
270
  render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cellColGap, children: [
215
- ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
- import_web_react.Tag,
271
+ ["loaded", "loading", "t-loaded", "t-loading"].includes(
272
+ item.loadedStatus
273
+ ) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
274
+ HoverTag,
217
275
  {
218
276
  size: "small",
219
277
  className: `${import_index.default.tagContainer} loaded-status-tag`,
278
+ tooltip: loadedStatusLabelLocal(item.loadedStatus),
220
279
  children: loadedStatusLabelLocal(item.loadedStatus)
221
280
  }
222
281
  ) : null,
282
+ item.treeShakingMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
283
+ HoverTag,
284
+ {
285
+ size: "small",
286
+ className: import_index.default.tagContainer,
287
+ tooltip: item.treeShakingMode,
288
+ children: item.treeShakingMode
289
+ }
290
+ ) : null,
223
291
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.configTags, children: [
224
- item.shareConfig.singleton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { size: "small", className: import_index.default.scale90, children: "singleton" }),
225
- item.shareConfig.eager && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { size: "small", className: import_index.default.scale90, children: "eager" }),
226
- item.shareConfig.strictVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { size: "small", className: import_index.default.scale90, children: "strictVersion" }),
227
- item.shareConfig.requiredVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_web_react.Tag, { size: "small", className: import_index.default.scale90, children: [
228
- "req: ",
229
- item.shareConfig.requiredVersion
230
- ] })
292
+ item.shareConfig.singleton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
293
+ HoverTag,
294
+ {
295
+ size: "small",
296
+ className: import_index.default.scale90,
297
+ tooltip: "singleton",
298
+ children: "singleton"
299
+ }
300
+ ),
301
+ item.shareConfig.eager && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HoverTag, { size: "small", className: import_index.default.scale90, tooltip: "eager", children: "eager" }),
302
+ item.shareConfig.strictVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
303
+ HoverTag,
304
+ {
305
+ size: "small",
306
+ className: import_index.default.scale90,
307
+ tooltip: "strictVersion",
308
+ children: "strictVersion"
309
+ }
310
+ ),
311
+ item.shareConfig.requiredVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
312
+ HoverTag,
313
+ {
314
+ size: "small",
315
+ className: import_index.default.scale90,
316
+ tooltip: `requiredVersion: ${item.shareConfig.requiredVersion}`,
317
+ children: [
318
+ "requiredVersion: ",
319
+ item.shareConfig.requiredVersion
320
+ ]
321
+ }
322
+ )
231
323
  ] })
232
324
  ] })
233
325
  },
@@ -260,7 +352,7 @@ function SharedDepsExplorer({
260
352
  width: "12%",
261
353
  render: (_, item) => {
262
354
  var _a;
263
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
355
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HoverTag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
264
356
  }
265
357
  }
266
358
  ];
@@ -311,16 +403,30 @@ function SharedDepsExplorer({
311
403
  ] })
312
404
  ] }) }),
313
405
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.statusTags, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagRow, children: [
314
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: `${import_index.default.tagContent} loaded-status-tag`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
315
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Network, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
316
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
317
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.loadedCount })
318
- ] }) }),
319
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: `${import_index.default.tagContent} reused-status-tag`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
320
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Repeat, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
321
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
322
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.reusedCount })
323
- ] }) })
406
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
407
+ HoverTag,
408
+ {
409
+ className: `${import_index.default.tagContent} loaded-status-tag`,
410
+ tooltip: `Loaded: ${stats.loadedCount}`,
411
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
412
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Network, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
413
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
414
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.loadedCount })
415
+ ] })
416
+ }
417
+ ),
418
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
419
+ HoverTag,
420
+ {
421
+ className: `${import_index.default.tagContent} reused-status-tag`,
422
+ tooltip: `Reused: ${stats.reusedCount}`,
423
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
424
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Repeat, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
425
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
426
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.reusedCount })
427
+ ] })
428
+ }
429
+ )
324
430
  ] }) })
325
431
  ] })
326
432
  ] }) }),
@@ -432,6 +538,37 @@ function SharedDepsExplorer({
432
538
  children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: v, children: v }, v))
433
539
  }
434
540
  )
541
+ ] }),
542
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_index.default.inputGroup} ${import_index.default.padding2}`, children: [
543
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
544
+ "div",
545
+ {
546
+ className: import_index.default.inputLabel,
547
+ style: { display: "flex", alignItems: "center", gap: 4 },
548
+ children: [
549
+ "Mode",
550
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "Shared Tree Shaking Mode, options: server-calc | runtime-infer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
551
+ import_lucide_react.Info,
552
+ {
553
+ size: 14,
554
+ style: { cursor: "help", color: "#86909c" }
555
+ }
556
+ ) })
557
+ ]
558
+ }
559
+ ),
560
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
561
+ import_web_react.Select,
562
+ {
563
+ value: selectedMode || void 0,
564
+ onChange: (value) => setSelectedMode(value === ALL_VALUE ? "" : value),
565
+ placeholder: "All Modes",
566
+ className: import_index.default.fullWidth,
567
+ disabled: !selectedPackage || modesForSelectedPackage.length === 0,
568
+ allowClear: true,
569
+ children: modesForSelectedPackage.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: v, children: v }, v))
570
+ }
571
+ )
435
572
  ] })
436
573
  ] }),
437
574
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.searchGrid, children: [
package/dist/lib/component/SharedDepsExplorer/share-utils.js CHANGED
@@ -32,6 +32,13 @@ function isRecord(value) {
32
32
  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
33
33
  }
34
34
  function computeLoadedStatus(entry) {
35
+ var _a, _b;
36
+ if (((_a = entry.treeShaking) == null ? void 0 : _a.loaded) === true) {
37
+ return "t-loaded";
38
+ }
39
+ if ((_b = entry.treeShaking) == null ? void 0 : _b.loading) {
40
+ return "t-loading";
41
+ }
35
42
  if (entry.loaded === true) {
36
43
  return "loaded";
37
44
  }
@@ -53,7 +60,7 @@ function normalizeEntry({
53
60
  versionKey,
54
61
  entry
55
62
  }) {
56
- var _a;
63
+ var _a, _b;
57
64
  if (!isRecord(entry)) {
58
65
  return null;
59
66
  }
@@ -70,6 +77,7 @@ function normalizeEntry({
70
77
  from: sharedEntry.from,
71
78
  useIn,
72
79
  shareConfig: (_a = sharedEntry.shareConfig) != null ? _a : {},
80
+ treeShakingMode: (_b = sharedEntry.treeShaking) == null ? void 0 : _b.mode,
73
81
  strategy: sharedEntry.strategy,
74
82
  loaded: sharedEntry.loaded,
75
83
  loading: sharedEntry.loading,
@@ -147,7 +155,7 @@ function computeShareStats(versions) {
147
155
  providerSet.add(v.provider);
148
156
  scopeSet.add(v.scope);
149
157
  packageSet.add(v.packageName);
150
- if (v.loadedStatus === "loaded") {
158
+ if (v.loadedStatus === "loaded" || v.loadedStatus === "t-loaded") {
151
159
  loadedCount += 1;
152
160
  }
153
161
  if (v.reuseStatus) {
@@ -206,11 +214,19 @@ function findPackageProvider(versions, packageName, version) {
206
214
  return null;
207
215
  }
208
216
  const providers = Array.from(new Set(candidates.map((v) => v.from))).sort();
209
- const hasLoaded = candidates.some((v) => v.loadedStatus === "loaded");
210
- const hasLoading = !hasLoaded && candidates.some((v) => v.loadedStatus === "loading");
217
+ const hasTreeShakingLoaded = candidates.some(
218
+ (v) => v.loadedStatus === "t-loaded"
219
+ );
220
+ const hasLoaded = !hasTreeShakingLoaded && candidates.some((v) => v.loadedStatus === "loaded");
221
+ const hasTreeShakingLoading = !hasTreeShakingLoaded && !hasLoaded && candidates.some((v) => v.loadedStatus === "t-loading");
222
+ const hasLoading = !hasTreeShakingLoaded && !hasLoaded && !hasTreeShakingLoading && candidates.some((v) => v.loadedStatus === "loading");
211
223
  let status = "not-loaded";
212
- if (hasLoaded) {
224
+ if (hasTreeShakingLoaded) {
225
+ status = "t-loaded";
226
+ } else if (hasLoaded) {
213
227
  status = "loaded";
228
+ } else if (hasTreeShakingLoading) {
229
+ status = "t-loading";
214
230
  } else if (hasLoading) {
215
231
  status = "loading";
216
232
  }
package/dist/lib/i18n/index.js CHANGED
@@ -119,7 +119,9 @@ const resources = {
119
119
  status: {
120
120
  loaded: "Loaded",
121
121
  loading: "Loading",
122
- notLoaded: "Not Loaded"
122
+ notLoaded: "Not Loaded",
123
+ tLoaded: "Tree Shaking Loaded",
124
+ tLoading: "Tree Shaking Loading"
123
125
  },
124
126
  focusResult: {
125
127
  providerLabel: "Provider: "
@@ -346,7 +348,9 @@ const resources = {
346
348
  status: {
347
349
  loaded: "已加载",
348
350
  loading: "加载中",
349
- notLoaded: "未加载"
351
+ notLoaded: "未加载",
352
+ tLoaded: "TreeShaking 已加载",
353
+ tLoading: "TreeShaking 加载中"
350
354
  },
351
355
  focusResult: {
352
356
  providerLabel: "提供方："
package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { GlobalShareScopeMap, Shared, SharedConfig } from '@module-federation/runtime/types';
2
- export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded';
2
+ export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded' | 't-loaded' | 't-loading';
3
3
  export type ReuseStatus = boolean;
4
4
  export interface ShareStats {
5
5
  totalProviders: number;
@@ -18,6 +18,7 @@ export interface NormalizedSharedVersion {
18
18
  from: string;
19
19
  useIn: string[];
20
20
  shareConfig: SharedConfig;
21
+ treeShakingMode?: string;
21
22
  strategy?: string;
22
23
  loaded?: boolean;
23
24
  loading?: unknown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@module-federation/devtools",
3
- "version": "0.23.0",
3
+ "version": "0.24.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,35 +41,47 @@
41
41
  "@arco-design/web-react": "2.66.7",
42
42
  "ahooks": "^3.7.10",
43
43
  "dagre": "^0.8.5",
44
- "react": "^19.2.0",
45
- "react-dom": "^19.2.0",
46
44
  "reactflow": "11.11.4",
47
45
  "echarts": "^6.0.0",
48
46
  "lucide-react": "^0.364.0",
49
47
  "echarts-for-react": "^3.0.5",
50
48
  "i18next": "^23.0.0",
51
49
  "react-i18next": "^15.0.0",
52
- "@module-federation/sdk": "0.23.0"
50
+ "@module-federation/sdk": "0.24.0"
51
+ },
52
+ "peerDependencies": {
53
+ "react": "^18 || ^19",
54
+ "react-dom": "^18 || ^19"
55
+ },
56
+ "peerDependenciesMeta": {
57
+ "react": {
58
+ "optional": true
59
+ },
60
+ "react-dom": {
61
+ "optional": true
62
+ }
53
63
  },
54
64
  "devDependencies": {
65
+ "react": "^19.2.0",
66
+ "react-dom": "^19.2.0",
55
67
  "@modern-js-app/eslint-config": "2.59.0",
56
68
  "@modern-js/app-tools": "2.70.2",
57
69
  "@modern-js/eslint-config": "2.59.0",
58
70
  "@modern-js/module-tools": "2.70.2",
59
71
  "@modern-js/storybook": "2.70.2",
60
72
  "@modern-js/tsconfig": "2.70.2",
61
- "@playwright/test": "1.49.1",
73
+ "@playwright/test": "1.51.1",
62
74
  "@types/chrome": "^0.0.272",
63
75
  "@types/dagre": "^0.7.52",
64
76
  "@types/jest": "~29.2.4",
65
- "@types/node": "~20.12.12",
77
+ "@types/node": "^20.19.5",
66
78
  "@types/react": "^19.2.2",
67
79
  "@types/react-dom": "^19.2.2",
68
80
  "lint-staged": "~13.1.0",
69
81
  "prettier": "~3.3.3",
70
82
  "rimraf": "~6.0.1",
71
83
  "vitest": "1.2.2",
72
- "@module-federation/runtime": "0.23.0"
84
+ "@module-federation/runtime": "0.24.0"
73
85
  },
74
86
  "scripts": {
75
87
  "build:storybook": "storybook build",