@module-federation/devtools 0.22.1 → 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 (58) hide show
  1. package/dist/es/App.css +6 -5
  2. package/dist/es/App.js +191 -59
  3. package/dist/es/App.module.js +1 -1
  4. package/dist/es/App_module.css +38 -36
  5. package/dist/es/component/DependencyGraph/index.js +11 -12
  6. package/dist/es/component/DependencyGraph/index_module.css +20 -17
  7. package/dist/es/component/DependencyGraphItem/index.js +5 -3
  8. package/dist/es/component/DependencyGraphItem/index_module.css +7 -7
  9. package/dist/es/component/Form/index.js +24 -31
  10. package/dist/es/component/Form/index.module.js +1 -1
  11. package/dist/es/component/Form/index_module.css +22 -25
  12. package/dist/es/component/LanguageSwitch.js +50 -0
  13. package/dist/es/component/Layout/index.js +6 -10
  14. package/dist/es/component/Layout/index_module.css +7 -7
  15. package/dist/es/component/ModuleInfo/index.js +65 -41
  16. package/dist/es/component/ModuleInfo/index_module.css +12 -11
  17. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js +5 -3
  18. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css +5 -5
  19. package/dist/es/component/SharedDepsExplorer/index.js +223 -93
  20. package/dist/es/component/SharedDepsExplorer/index_module.css +12 -2
  21. package/dist/es/component/SharedDepsExplorer/share-utils.js +21 -5
  22. package/dist/es/component/ThemeToggle.js +19 -0
  23. package/dist/es/component/ThemeToggle.module.js +5 -0
  24. package/dist/es/component/ThemeToggle_module.css +12 -0
  25. package/dist/es/hooks/useDevtoolsTheme.js +77 -0
  26. package/dist/es/i18n/index.js +510 -0
  27. package/dist/lib/App.css +6 -5
  28. package/dist/lib/App.js +189 -59
  29. package/dist/lib/App.module.js +1 -1
  30. package/dist/lib/App_module.css +38 -36
  31. package/dist/lib/component/DependencyGraph/index.js +11 -12
  32. package/dist/lib/component/DependencyGraph/index_module.css +20 -17
  33. package/dist/lib/component/DependencyGraphItem/index.js +5 -3
  34. package/dist/lib/component/DependencyGraphItem/index_module.css +7 -7
  35. package/dist/lib/component/Form/index.js +24 -31
  36. package/dist/lib/component/Form/index.module.js +1 -1
  37. package/dist/lib/component/Form/index_module.css +22 -25
  38. package/dist/lib/component/LanguageSwitch.js +80 -0
  39. package/dist/lib/component/Layout/index.js +6 -10
  40. package/dist/lib/component/Layout/index_module.css +7 -7
  41. package/dist/lib/component/ModuleInfo/index.js +65 -41
  42. package/dist/lib/component/ModuleInfo/index_module.css +12 -11
  43. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.js +5 -3
  44. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay_module.css +5 -5
  45. package/dist/lib/component/SharedDepsExplorer/index.js +217 -91
  46. package/dist/lib/component/SharedDepsExplorer/index_module.css +12 -2
  47. package/dist/lib/component/SharedDepsExplorer/share-utils.js +21 -5
  48. package/dist/lib/component/ThemeToggle.js +49 -0
  49. package/dist/lib/component/ThemeToggle.module.js +25 -0
  50. package/dist/lib/component/ThemeToggle_module.css +12 -0
  51. package/dist/lib/hooks/useDevtoolsTheme.js +101 -0
  52. package/dist/lib/i18n/index.js +544 -0
  53. package/dist/types/src/component/LanguageSwitch.d.ts +2 -0
  54. package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts +2 -1
  55. package/dist/types/src/component/ThemeToggle.d.ts +8 -0
  56. package/dist/types/src/hooks/useDevtoolsTheme.d.ts +2 -0
  57. package/dist/types/src/i18n/index.d.ts +5 -0
  58. package/package.json +26 -12
@@ -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
  }
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var ThemeToggle_exports = {};
30
+ __export(ThemeToggle_exports, {
31
+ default: () => ThemeToggle_default
32
+ });
33
+ module.exports = __toCommonJS(ThemeToggle_exports);
34
+ var import_jsx_runtime = require("react/jsx-runtime");
35
+ var import_web_react = require("@arco-design/web-react");
36
+ var import_icon = require("@arco-design/web-react/icon");
37
+ var import_ThemeToggle = __toESM(require("./ThemeToggle.module"));
38
+ const ThemeToggle = ({ theme, onToggle }) => {
39
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
40
+ import_web_react.Button,
41
+ {
42
+ className: import_ThemeToggle.default.themeToggle,
43
+ size: "default",
44
+ onClick: onToggle,
45
+ icon: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconSun, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconMoon, {})
46
+ }
47
+ );
48
+ };
49
+ var ThemeToggle_default = ThemeToggle;
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var ThemeToggle_module_exports = {};
20
+ __export(ThemeToggle_module_exports, {
21
+ default: () => ThemeToggle_module_default
22
+ });
23
+ module.exports = __toCommonJS(ThemeToggle_module_exports);
24
+ var import_ThemeToggle_module = require("./ThemeToggle_module.css");
25
+ var ThemeToggle_module_default = { "themeToggle": "themeToggle_2452c" };
@@ -0,0 +1,12 @@
1
+ .themeToggle_2452c {
2
+ background-color: transparent !important;
3
+ border-color: transparent !important;
4
+ margin: 0 6px !important;
5
+ padding: 0 !important;
6
+ }
7
+ .themeToggle_2452c:hover {
8
+ background-color: var(--color-fill-3, #fafafa) !important;
9
+ }
10
+ .arco-theme-dark .themeToggle_2452c :hover {
11
+ background-color: var(--color-bg-1) !important;
12
+ }
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var useDevtoolsTheme_exports = {};
20
+ __export(useDevtoolsTheme_exports, {
21
+ useDevtoolsTheme: () => useDevtoolsTheme
22
+ });
23
+ module.exports = __toCommonJS(useDevtoolsTheme_exports);
24
+ var import_react = require("react");
25
+ const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
26
+ function resolveThemeFromDevtools() {
27
+ var _a, _b;
28
+ if (typeof window === "undefined") {
29
+ return null;
30
+ }
31
+ const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
32
+ const themeName = (_b = devtools == null ? void 0 : devtools.panels) == null ? void 0 : _b.themeName;
33
+ if (typeof themeName === "string") {
34
+ return themeName.toLowerCase().includes("dark") ? "dark" : "light";
35
+ }
36
+ return null;
37
+ }
38
+ function resolveThemeFromMedia() {
39
+ if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
40
+ return null;
41
+ }
42
+ return window.matchMedia(DARK_MEDIA_QUERY).matches ? "dark" : "light";
43
+ }
44
+ function getInitialTheme() {
45
+ var _a, _b;
46
+ return (_b = (_a = resolveThemeFromDevtools()) != null ? _a : resolveThemeFromMedia()) != null ? _b : "light";
47
+ }
48
+ const useDevtoolsTheme = () => {
49
+ const [theme, setTheme] = (0, import_react.useState)(() => getInitialTheme());
50
+ (0, import_react.useEffect)(() => {
51
+ var _a;
52
+ if (typeof window === "undefined") {
53
+ return;
54
+ }
55
+ const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
56
+ const panels = devtools == null ? void 0 : devtools.panels;
57
+ const onThemeChanged = panels == null ? void 0 : panels.onThemeChanged;
58
+ const handleThemeChange = (newThemeName) => {
59
+ if (typeof newThemeName !== "string") {
60
+ return;
61
+ }
62
+ const next = newThemeName.toLowerCase().includes("dark") ? "dark" : "light";
63
+ setTheme(next);
64
+ };
65
+ const fromDevtools = resolveThemeFromDevtools();
66
+ if (fromDevtools) {
67
+ setTheme(fromDevtools);
68
+ }
69
+ let mediaQuery = null;
70
+ const handleMediaQueryChange = (event) => {
71
+ setTheme(event.matches ? "dark" : "light");
72
+ };
73
+ if (onThemeChanged && typeof onThemeChanged.addListener === "function") {
74
+ onThemeChanged.addListener(handleThemeChange);
75
+ } else if (typeof window.matchMedia === "function") {
76
+ mediaQuery = window.matchMedia(DARK_MEDIA_QUERY);
77
+ if (typeof mediaQuery.addEventListener === "function") {
78
+ mediaQuery.addEventListener("change", handleMediaQueryChange);
79
+ } else if (typeof mediaQuery.addListener === "function") {
80
+ mediaQuery.addListener(handleMediaQueryChange);
81
+ }
82
+ }
83
+ return () => {
84
+ if (onThemeChanged && typeof onThemeChanged.removeListener === "function") {
85
+ onThemeChanged.removeListener(handleThemeChange);
86
+ }
87
+ if (mediaQuery) {
88
+ if (typeof mediaQuery.removeEventListener === "function") {
89
+ mediaQuery.removeEventListener("change", handleMediaQueryChange);
90
+ } else if (typeof mediaQuery.removeListener === "function") {
91
+ mediaQuery.removeListener(handleMediaQueryChange);
92
+ }
93
+ }
94
+ };
95
+ }, []);
96
+ return theme;
97
+ };
98
+ // Annotate the CommonJS export names for ESM import in node:
99
+ 0 && (module.exports = {
100
+ useDevtoolsTheme
101
+ });