@module-federation/devtools 0.22.0 → 0.23.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 (116) hide show
  1. package/dist/es/App.css +13 -0
  2. package/dist/es/App.js +461 -21
  3. package/dist/es/App.module.js +1 -1
  4. package/dist/es/App_module.css +293 -5
  5. package/dist/es/component/DependencyGraph/index.js +204 -0
  6. package/dist/es/component/DependencyGraph/index.module.js +5 -0
  7. package/dist/es/component/DependencyGraph/index_module.css +100 -0
  8. package/dist/es/component/{GraphItem → DependencyGraphItem}/index.js +20 -9
  9. package/dist/es/component/DependencyGraphItem/index.module.js +5 -0
  10. package/dist/es/component/DependencyGraphItem/index_module.css +95 -0
  11. package/dist/es/component/Form/index.js +192 -117
  12. package/dist/es/component/Form/index.module.js +1 -1
  13. package/dist/es/component/Form/index_module.css +176 -25
  14. package/dist/es/component/LanguageSwitch.js +50 -0
  15. package/dist/es/component/Layout/index.js +296 -49
  16. package/dist/es/component/Layout/index.module.js +1 -1
  17. package/dist/es/component/Layout/index_module.css +52 -32
  18. package/dist/es/component/ModuleInfo/index.js +313 -0
  19. package/dist/es/component/ModuleInfo/index.module.js +5 -0
  20. package/dist/es/component/ModuleInfo/index_module.css +184 -0
  21. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js +35 -0
  22. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.module.js +5 -0
  23. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
  24. package/dist/es/component/SharedDepsExplorer/index.js +495 -0
  25. package/dist/es/component/SharedDepsExplorer/index.module.js +5 -0
  26. package/dist/es/component/SharedDepsExplorer/index_module.css +467 -0
  27. package/dist/es/component/SharedDepsExplorer/share-utils.js +206 -0
  28. package/dist/es/component/ThemeToggle.js +19 -0
  29. package/dist/es/component/ThemeToggle.module.js +5 -0
  30. package/dist/es/component/ThemeToggle_module.css +12 -0
  31. package/dist/es/hooks/useDevtoolsTheme.js +77 -0
  32. package/dist/es/i18n/index.js +506 -0
  33. package/dist/es/template/constant.js +3 -19
  34. package/dist/es/utils/chrome/index.js +91 -38
  35. package/dist/es/utils/chrome/messages.js +6 -0
  36. package/dist/es/utils/chrome/override-remote.js +42 -0
  37. package/dist/es/utils/chrome/post-message-listener.js +2 -1
  38. package/dist/es/utils/chrome/post-message-start.js +10 -2
  39. package/dist/es/utils/chrome/storage.js +6 -1
  40. package/dist/es/utils/sdk/graph.js +25 -4
  41. package/dist/es/utils/sdk/index.js +9 -0
  42. package/dist/es/worker/index.js +168 -1
  43. package/dist/lib/App.css +13 -0
  44. package/dist/lib/App.js +451 -18
  45. package/dist/lib/App.module.js +1 -1
  46. package/dist/lib/App_module.css +293 -5
  47. package/dist/lib/component/DependencyGraph/index.js +226 -0
  48. package/dist/lib/component/{GraphItem → DependencyGraph}/index.module.js +1 -1
  49. package/dist/lib/component/DependencyGraph/index_module.css +100 -0
  50. package/dist/lib/component/{GraphItem → DependencyGraphItem}/index.js +23 -12
  51. package/dist/lib/component/{Graph → DependencyGraphItem}/index.module.js +1 -1
  52. package/dist/lib/component/DependencyGraphItem/index_module.css +95 -0
  53. package/dist/lib/component/Form/index.js +189 -115
  54. package/dist/lib/component/Form/index.module.js +1 -1
  55. package/dist/lib/component/Form/index_module.css +176 -25
  56. package/dist/lib/component/LanguageSwitch.js +80 -0
  57. package/dist/lib/component/Layout/index.js +290 -47
  58. package/dist/lib/component/Layout/index.module.js +1 -1
  59. package/dist/lib/component/Layout/index_module.css +52 -32
  60. package/dist/lib/component/ModuleInfo/index.js +343 -0
  61. package/dist/lib/component/ModuleInfo/index.module.js +25 -0
  62. package/dist/lib/component/ModuleInfo/index_module.css +184 -0
  63. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.js +65 -0
  64. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.module.js +25 -0
  65. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
  66. package/dist/lib/component/SharedDepsExplorer/index.js +502 -0
  67. package/dist/lib/component/SharedDepsExplorer/index.module.js +25 -0
  68. package/dist/lib/component/SharedDepsExplorer/index_module.css +467 -0
  69. package/dist/lib/component/SharedDepsExplorer/share-utils.js +237 -0
  70. package/dist/lib/component/ThemeToggle.js +49 -0
  71. package/dist/lib/component/ThemeToggle.module.js +25 -0
  72. package/dist/lib/component/ThemeToggle_module.css +12 -0
  73. package/dist/lib/hooks/useDevtoolsTheme.js +101 -0
  74. package/dist/lib/i18n/index.js +540 -0
  75. package/dist/lib/template/constant.js +4 -17
  76. package/dist/lib/utils/chrome/index.js +94 -38
  77. package/dist/lib/utils/chrome/messages.js +31 -0
  78. package/dist/lib/utils/chrome/override-remote.js +65 -0
  79. package/dist/lib/utils/chrome/post-message-listener.js +2 -1
  80. package/dist/lib/utils/chrome/post-message-start.js +10 -2
  81. package/dist/lib/utils/chrome/storage.js +5 -0
  82. package/dist/lib/utils/sdk/graph.js +25 -4
  83. package/dist/lib/utils/sdk/index.js +10 -0
  84. package/dist/lib/worker/index.js +156 -1
  85. package/dist/types/src/App.d.ts +2 -1
  86. package/dist/types/src/component/{Graph → DependencyGraph}/index.d.ts +0 -1
  87. package/dist/types/src/component/{GraphItem → DependencyGraphItem}/index.d.ts +0 -1
  88. package/dist/types/src/component/Form/index.d.ts +2 -0
  89. package/dist/types/src/component/LanguageSwitch.d.ts +2 -0
  90. package/dist/types/src/component/Layout/index.d.ts +0 -1
  91. package/dist/types/src/component/ModuleInfo/index.d.ts +8 -0
  92. package/dist/types/src/component/SharedDepsExplorer/FocusResultDisplay.d.ts +15 -0
  93. package/dist/types/src/component/SharedDepsExplorer/index.d.ts +6 -0
  94. package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts +44 -0
  95. package/dist/types/src/component/ThemeToggle.d.ts +8 -0
  96. package/dist/types/src/hooks/useDevtoolsTheme.d.ts +2 -0
  97. package/dist/types/src/i18n/index.d.ts +5 -0
  98. package/dist/types/src/init.d.ts +0 -1
  99. package/dist/types/src/template/constant.d.ts +2 -5
  100. package/dist/types/src/utils/chrome/index.d.ts +5 -3
  101. package/dist/types/src/utils/chrome/messages.d.ts +2 -0
  102. package/dist/types/src/utils/chrome/override-remote.d.ts +1 -0
  103. package/dist/types/src/utils/chrome/storage.d.ts +5 -4
  104. package/dist/types/src/utils/sdk/graph.d.ts +2 -1
  105. package/dist/types/src/utils/sdk/index.d.ts +1 -0
  106. package/dist/types/src/utils/types/common.d.ts +4 -0
  107. package/dist/types/src/worker/index.d.ts +1 -0
  108. package/package.json +18 -14
  109. package/dist/es/component/Graph/index.js +0 -127
  110. package/dist/es/component/Graph/index.module.js +0 -5
  111. package/dist/es/component/Graph/index_module.css +0 -12
  112. package/dist/es/component/GraphItem/index.module.js +0 -5
  113. package/dist/es/component/GraphItem/index_module.css +0 -61
  114. package/dist/lib/component/Graph/index.js +0 -149
  115. package/dist/lib/component/Graph/index_module.css +0 -12
  116. package/dist/lib/component/GraphItem/index_module.css +0 -61
@@ -0,0 +1,44 @@
1
+ import { GlobalShareScopeMap, Shared, SharedConfig } from '@module-federation/runtime/types';
2
+ export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded';
3
+ export type ReuseStatus = boolean;
4
+ export interface ShareStats {
5
+ totalProviders: number;
6
+ totalScopes: number;
7
+ totalPackages: number;
8
+ totalVersions: number;
9
+ loadedCount: number;
10
+ reusedCount: number;
11
+ }
12
+ export interface NormalizedSharedVersion {
13
+ id: string;
14
+ provider: string;
15
+ scope: string;
16
+ packageName: string;
17
+ version: string;
18
+ from: string;
19
+ useIn: string[];
20
+ shareConfig: SharedConfig;
21
+ strategy?: string;
22
+ loaded?: boolean;
23
+ loading?: unknown;
24
+ loadedStatus: LoadedStatus;
25
+ reuseStatus: ReuseStatus;
26
+ }
27
+ export declare function computeLoadedStatus(entry: Shared): LoadedStatus;
28
+ export declare function computeReuseStatus(entry: Shared): ReuseStatus;
29
+ export declare function normalizeShareData(raw: GlobalShareScopeMap | null | undefined): NormalizedSharedVersion[];
30
+ export declare function computeShareStats(versions: NormalizedSharedVersion[]): ShareStats;
31
+ export declare function groupByProviderScopePackage(versions: NormalizedSharedVersion[]): Record<string, Record<string, Record<string, NormalizedSharedVersion[]>>>;
32
+ export declare function getFilterOptions(versions: NormalizedSharedVersion[]): {
33
+ providers: string[];
34
+ scopes: string[];
35
+ packages: string[];
36
+ versions: string[];
37
+ };
38
+ export declare function findPackageProvider(versions: NormalizedSharedVersion[], packageName: string, version?: string): {
39
+ packageName: string;
40
+ version: string;
41
+ providers: string[];
42
+ status: LoadedStatus;
43
+ } | null;
44
+ export declare function getReusedVersions(versions: NormalizedSharedVersion[]): NormalizedSharedVersion[];
@@ -0,0 +1,8 @@
1
+ import type { FC } from 'react';
2
+ import type { DevtoolsTheme } from '../hooks/useDevtoolsTheme';
3
+ interface ThemeToggleProps {
4
+ theme: DevtoolsTheme;
5
+ onToggle: () => void;
6
+ }
7
+ declare const ThemeToggle: FC<ThemeToggleProps>;
8
+ export default ThemeToggle;
@@ -0,0 +1,2 @@
1
+ export type DevtoolsTheme = 'light' | 'dark';
2
+ export declare const useDevtoolsTheme: () => DevtoolsTheme;
@@ -0,0 +1,5 @@
1
+ import i18n from 'i18next';
2
+ export declare const LANGUAGE_STORAGE_KEY = "mf-devtools-language";
3
+ declare const supportedLanguages: readonly ["zh-CN", "en"];
4
+ export type SupportedLanguage = (typeof supportedLanguages)[number];
5
+ export default i18n;
@@ -1,4 +1,3 @@
1
- /// <reference types="chrome" />
2
1
  import { GlobalModuleInfo } from '@module-federation/sdk';
3
2
  declare global {
4
3
  interface Window {
@@ -1,5 +1,6 @@
1
1
  export declare const FormID = "FormID";
2
2
  export declare const ENABLEHMR = "enableHMR";
3
+ export declare const ENABLE_CLIP = "enableClip";
3
4
  export declare const proxyFormField = "proxyFormField";
4
5
  export declare const defaultDataItem: {
5
6
  key: string;
@@ -7,11 +8,7 @@ export declare const defaultDataItem: {
7
8
  checked: boolean;
8
9
  };
9
10
  export declare const defaultModuleData: {
10
- proxyFormField: {
11
- key: string;
12
- value: string;
13
- checked: boolean;
14
- }[];
11
+ proxyFormField: never[];
15
12
  };
16
13
  export declare const statusInfo: Record<string, {
17
14
  status: string;
@@ -1,16 +1,18 @@
1
- /// <reference types="chrome" />
2
1
  import { GlobalModuleInfo } from '@module-federation/sdk';
3
2
  export * from './storage';
4
3
  export declare const injectPostMessage: (postMessageUrl: string) => void;
5
4
  export declare const TabInfo: {
6
5
  currentTabId: number;
7
6
  };
7
+ export declare const setTargetTab: (tab?: chrome.tabs.Tab | null) => void;
8
+ export declare const syncActiveTab: (tabId?: number) => Promise<chrome.tabs.Tab | undefined>;
8
9
  export declare function getCurrentTabId(): number;
9
10
  export declare function getInspectWindowTabId(): Promise<unknown>;
10
- export declare const getGlobalModuleInfo: (callback: React.Dispatch<React.SetStateAction<GlobalModuleInfo>>) => Promise<void>;
11
+ export declare const refreshModuleInfo: () => Promise<void>;
12
+ export declare const getGlobalModuleInfo: (callback: (moduleInfo: GlobalModuleInfo) => void) => Promise<() => void>;
11
13
  export declare const getTabs: (queryOptions?: {}) => Promise<chrome.tabs.Tab[]>;
12
14
  export declare const getScope: () => Promise<string>;
13
- export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<void>;
15
+ export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<any>;
14
16
  export declare const getUrl: (file: string) => string;
15
17
  export declare const injectToast: (toastUtilUrl: string, e2eFlag: string) => void;
16
18
  export declare const setChromeStorage: (formData: Record<string, any>) => void;
@@ -0,0 +1,2 @@
1
+ export declare const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
2
+ export declare const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";
@@ -0,0 +1 @@
1
+ export {};
@@ -1,4 +1,5 @@
1
- export declare const mergeStorage: (...args: any[]) => Promise<void>;
2
- export declare const removeStorageKey: (...args: any[]) => Promise<void>;
3
- export declare const removeStorage: (...args: any[]) => Promise<void>;
4
- export declare const setStorage: (...args: any[]) => Promise<void>;
1
+ export declare const mergeStorage: (...args: any[]) => Promise<any>;
2
+ export declare const removeStorageKey: (...args: any[]) => Promise<any>;
3
+ export declare const removeStorage: (...args: any[]) => Promise<any>;
4
+ export declare const setStorage: (...args: any[]) => Promise<any>;
5
+ export declare const getStorageValue: (...args: any[]) => Promise<any>;
@@ -40,6 +40,7 @@ export declare class DependencyGraph {
40
40
  createGraph(target?: string): void;
41
41
  addNode(id: string, type: string, x: number, y: number, nodeData: NodeCustomData): void;
42
42
  addEdge(id: string, source: string, target: string, type?: Edge): void;
43
- run(targetGraph: any, target: string | undefined, type: string, id?: string): void;
43
+ run(targetGraph: any, target: string | undefined, type: string, id?: string, depth?: number, maxDepth?: number): void;
44
44
  identify(): string;
45
+ calculateDepth(target?: string, visited?: Set<string>): number;
45
46
  }
@@ -1,5 +1,6 @@
1
1
  export * from './graph';
2
2
  export declare const setLocalStorage: (key: string, value: any) => void;
3
+ export declare const getLocalStorage: (key: string) => string | null;
3
4
  export declare const removeLocalStorage: (key: string) => void;
4
5
  export declare const mergeLocalStorage: (target: string, key: string, value: any) => void;
5
6
  export declare const removeLocalStorageKey: (target: string, key: string) => void;
@@ -1,4 +1,5 @@
1
1
  import type { ReactNode } from 'react';
2
+ import type { GlobalModuleInfo } from '@module-federation/sdk';
2
3
  import { getModuleInfo } from '../index';
3
4
  export interface FormItemStatus {
4
5
  keyStatus: boolean;
@@ -14,5 +15,8 @@ export interface RootComponentProps {
14
15
  handleProxyAddress?: (address: string) => string;
15
16
  customValueValidate?: (schema: string) => boolean;
16
17
  headerSlot?: ReactNode;
18
+ onModuleInfoChange?: (moduleInfo: GlobalModuleInfo) => void;
19
+ onModuleInfoReset?: () => void;
20
+ tabId?: number;
17
21
  }
18
22
  export {};
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@module-federation/devtools",
3
- "version": "0.22.0",
3
+ "version": "0.23.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -37,35 +37,39 @@
37
37
  "access": "public"
38
38
  },
39
39
  "dependencies": {
40
- "@arco-design/web-react": "^2.64.1",
41
- "@modern-js/runtime": "2.69.3",
40
+ "@modern-js/runtime": "2.70.2",
41
+ "@arco-design/web-react": "2.66.7",
42
42
  "ahooks": "^3.7.10",
43
43
  "dagre": "^0.8.5",
44
- "react": "~18.3.1",
45
- "react-dom": "~18.3.1",
44
+ "react": "^19.2.0",
45
+ "react-dom": "^19.2.0",
46
46
  "reactflow": "11.11.4",
47
- "@module-federation/sdk": "0.22.0"
47
+ "echarts": "^6.0.0",
48
+ "lucide-react": "^0.364.0",
49
+ "echarts-for-react": "^3.0.5",
50
+ "i18next": "^23.0.0",
51
+ "react-i18next": "^15.0.0",
52
+ "@module-federation/sdk": "0.23.0"
48
53
  },
49
54
  "devDependencies": {
50
55
  "@modern-js-app/eslint-config": "2.59.0",
51
- "@modern-js/app-tools": "2.69.3",
56
+ "@modern-js/app-tools": "2.70.2",
52
57
  "@modern-js/eslint-config": "2.59.0",
53
- "@modern-js/module-tools": "2.69.3",
54
- "@modern-js/storybook": "2.69.3",
55
- "@modern-js/tsconfig": "2.69.3",
58
+ "@modern-js/module-tools": "2.70.2",
59
+ "@modern-js/storybook": "2.70.2",
60
+ "@modern-js/tsconfig": "2.70.2",
56
61
  "@playwright/test": "1.49.1",
57
62
  "@types/chrome": "^0.0.272",
58
63
  "@types/dagre": "^0.7.52",
59
64
  "@types/jest": "~29.2.4",
60
65
  "@types/node": "~20.12.12",
61
- "@types/react": "~18.2.0",
62
- "@types/react-dom": "~18.3.0",
66
+ "@types/react": "^19.2.2",
67
+ "@types/react-dom": "^19.2.2",
63
68
  "lint-staged": "~13.1.0",
64
69
  "prettier": "~3.3.3",
65
70
  "rimraf": "~6.0.1",
66
- "typescript": "~5.0.4",
67
71
  "vitest": "1.2.2",
68
- "@module-federation/runtime": "0.22.0"
72
+ "@module-federation/runtime": "0.23.0"
69
73
  },
70
74
  "scripts": {
71
75
  "build:storybook": "storybook build",
@@ -1,127 +0,0 @@
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
- import { jsx } from "react/jsx-runtime";
21
- import { useCallback, useEffect } from "react";
22
- import ReactFlow, {
23
- addEdge,
24
- ConnectionLineType,
25
- useNodesState,
26
- useEdgesState,
27
- Controls
28
- } from "reactflow";
29
- import dagre from "dagre";
30
- import { DependencyGraph } from "../../utils/sdk/graph";
31
- import GraphItem from "../GraphItem";
32
- import { separateType } from "../../utils";
33
- import styles from "./index.module";
34
- import "reactflow/dist/style.css";
35
- const nodeWidth = 400;
36
- const nodeHeight = 600;
37
- const nodeTypes = { graphItem: GraphItem };
38
- const Graph = (props) => {
39
- const [nodes, setNodes, onNodesChange] = useNodesState([]);
40
- const [edges, setEdges, onEdgesChange] = useEdgesState([]);
41
- const { snapshot } = props;
42
- const { moduleInfo } = window.__FEDERATION__;
43
- const { consumers } = separateType(moduleInfo);
44
- useEffect(() => {
45
- const dagreGraph = new dagre.graphlib.Graph();
46
- dagreGraph.setDefaultEdgeLabel(() => ({}));
47
- const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
48
- dagreGraph.setGraph({ rankdir: direction });
49
- nodes2.forEach((node) => {
50
- dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
51
- });
52
- edges2.forEach((edge) => {
53
- dagreGraph.setEdge(edge.source, edge.target);
54
- });
55
- dagre.layout(dagreGraph);
56
- nodes2.forEach((node) => {
57
- const nodeWithPosition = dagreGraph.node(node.id);
58
- node.position = {
59
- x: nodeWithPosition.x - nodeWidth / 2,
60
- y: nodeWithPosition.y - nodeHeight / 2
61
- };
62
- });
63
- return { nodes: nodes2, edges: edges2 };
64
- };
65
- let nodeSet = [];
66
- let edgeSet = [];
67
- for (const consumer in consumers) {
68
- const moduleGraph = new DependencyGraph(snapshot, consumer);
69
- moduleGraph.createGraph();
70
- moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
71
- nodeSet = [...nodeSet, ...moduleGraph.node];
72
- edgeSet = [...edgeSet, ...moduleGraph.edge];
73
- }
74
- if (!nodeSet.length) {
75
- nodeSet.push({
76
- id: "1",
77
- type: "graphItem",
78
- position: {
79
- x: 0,
80
- y: 0
81
- },
82
- data: {
83
- color: "lightgreen"
84
- }
85
- });
86
- }
87
- const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
88
- nodeSet,
89
- edgeSet
90
- );
91
- setNodes(layoutedNodes);
92
- setEdges(layoutedEdges);
93
- setTimeout(() => {
94
- const element = document.getElementsByClassName(
95
- "react-flow__controls-fitview"
96
- )[0];
97
- element == null ? void 0 : element.click();
98
- }, 50);
99
- }, [snapshot]);
100
- const onConnect = useCallback(
101
- (params) => setEdges(
102
- (eds) => addEdge(
103
- __spreadProps(__spreadValues({}, params), { type: ConnectionLineType.SmoothStep, animated: true }),
104
- eds
105
- )
106
- ),
107
- []
108
- );
109
- return /* @__PURE__ */ jsx("div", { className: styles.depWrapper, children: /* @__PURE__ */ jsx(
110
- ReactFlow,
111
- {
112
- className: styles.graph,
113
- nodes,
114
- edges,
115
- onNodesChange,
116
- onEdgesChange,
117
- onConnect,
118
- nodeTypes,
119
- fitView: true,
120
- children: /* @__PURE__ */ jsx(Controls, {})
121
- }
122
- ) });
123
- };
124
- var Graph_default = Graph;
125
- export {
126
- Graph_default as default
127
- };
@@ -1,5 +0,0 @@
1
- import "./index_module.css";
2
- var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };
3
- export {
4
- index_module_default as default
5
- };
@@ -1,12 +0,0 @@
1
- .depWrapper_613b1 {
2
- border: 1px solid #e5e6ec;
3
- margin-top: 16px;
4
- padding-top: 14px;
5
- border-radius: 8px;
6
- }
7
- .depWrapper_613b1 .table_613b1 {
8
- margin: 8px 0 20px;
9
- }
10
- .depWrapper_613b1 .graph_613b1 {
11
- height: 80vh !important;
12
- }
@@ -1,5 +0,0 @@
1
- import "./index_module.css";
2
- var index_module_default = { "Wrapper": "Wrapper_2fa4f", "container": "container_2fa4f", "group": "group_2fa4f", "name": "name_2fa4f", "info": "info_2fa4f", "expose-container": "expose-container_2fa4f", "type": "type_2fa4f", "item": "item_2fa4f", "message": "message_2fa4f" };
3
- export {
4
- index_module_default as default
5
- };
@@ -1,61 +0,0 @@
1
- .Wrapper_2fa4f {
2
- display: flex;
3
- box-sizing: border-box;
4
- border-radius: 10px;
5
- margin: 0;
6
- padding: 0;
7
- width: 300px;
8
- overflow: hidden;
9
- }
10
- .Wrapper_2fa4f .container_2fa4f {
11
- display: flex;
12
- flex-direction: column;
13
- width: 100%;
14
- height: 100%;
15
- margin: 0;
16
- padding: 0;
17
- }
18
- .Wrapper_2fa4f .container_2fa4f .group_2fa4f {
19
- display: flex;
20
- align-items: center;
21
- margin-bottom: 3px;
22
- width: 100%;
23
- padding: 5px 0;
24
- }
25
- .Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
26
- color: white;
27
- text-align: center;
28
- margin: 0 auto;
29
- }
30
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f {
31
- display: flex;
32
- flex-direction: column;
33
- background-color: white;
34
- margin: 0 4px 4px 4px;
35
- padding: 10px;
36
- border-radius: 0 0 5px 5px;
37
- font-size: 12px;
38
- }
39
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
40
- display: flex;
41
- margin-bottom: 5px;
42
- }
43
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
44
- font-weight: bold;
45
- margin-right: 10px;
46
- }
47
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
48
- display: inline-block;
49
- padding: 5px;
50
- background: lightgray;
51
- border-radius: 15px;
52
- font-size: 8px;
53
- margin-right: 5px;
54
- margin-bottom: 5px;
55
- font-weight: 300;
56
- text-overflow: ellipsis;
57
- overflow: hidden;
58
- }
59
- .Wrapper_2fa4f .container_2fa4f .message_2fa4f {
60
- display: flex;
61
- }
@@ -1,149 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
- var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
- var __getProtoOf = Object.getPrototypeOf;
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 __export = (target, all) => {
26
- for (var name in all)
27
- __defProp(target, name, { get: all[name], enumerable: true });
28
- };
29
- var __copyProps = (to, from, except, desc) => {
30
- if (from && typeof from === "object" || typeof from === "function") {
31
- for (let key of __getOwnPropNames(from))
32
- if (!__hasOwnProp.call(to, key) && key !== except)
33
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
34
- }
35
- return to;
36
- };
37
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
38
- // If the importer is in node compatibility mode or this is not an ESM
39
- // file that has been converted to a CommonJS file using a Babel-
40
- // compatible transform (i.e. "__esModule" has not been set), then set
41
- // "default" to the CommonJS "module.exports" for node compatibility.
42
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
43
- mod
44
- ));
45
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
46
- var Graph_exports = {};
47
- __export(Graph_exports, {
48
- default: () => Graph_default
49
- });
50
- module.exports = __toCommonJS(Graph_exports);
51
- var import_jsx_runtime = require("react/jsx-runtime");
52
- var import_react = require("react");
53
- var import_reactflow = __toESM(require("reactflow"));
54
- var import_dagre = __toESM(require("dagre"));
55
- var import_graph = require("../../utils/sdk/graph");
56
- var import_GraphItem = __toESM(require("../GraphItem"));
57
- var import_utils = require("../../utils");
58
- var import_index = __toESM(require("./index.module"));
59
- var import_style = require("reactflow/dist/style.css");
60
- const nodeWidth = 400;
61
- const nodeHeight = 600;
62
- const nodeTypes = { graphItem: import_GraphItem.default };
63
- const Graph = (props) => {
64
- const [nodes, setNodes, onNodesChange] = (0, import_reactflow.useNodesState)([]);
65
- const [edges, setEdges, onEdgesChange] = (0, import_reactflow.useEdgesState)([]);
66
- const { snapshot } = props;
67
- const { moduleInfo } = window.__FEDERATION__;
68
- const { consumers } = (0, import_utils.separateType)(moduleInfo);
69
- (0, import_react.useEffect)(() => {
70
- const dagreGraph = new import_dagre.default.graphlib.Graph();
71
- dagreGraph.setDefaultEdgeLabel(() => ({}));
72
- const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
73
- dagreGraph.setGraph({ rankdir: direction });
74
- nodes2.forEach((node) => {
75
- dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
76
- });
77
- edges2.forEach((edge) => {
78
- dagreGraph.setEdge(edge.source, edge.target);
79
- });
80
- import_dagre.default.layout(dagreGraph);
81
- nodes2.forEach((node) => {
82
- const nodeWithPosition = dagreGraph.node(node.id);
83
- node.position = {
84
- x: nodeWithPosition.x - nodeWidth / 2,
85
- y: nodeWithPosition.y - nodeHeight / 2
86
- };
87
- });
88
- return { nodes: nodes2, edges: edges2 };
89
- };
90
- let nodeSet = [];
91
- let edgeSet = [];
92
- for (const consumer in consumers) {
93
- const moduleGraph = new import_graph.DependencyGraph(snapshot, consumer);
94
- moduleGraph.createGraph();
95
- moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
96
- nodeSet = [...nodeSet, ...moduleGraph.node];
97
- edgeSet = [...edgeSet, ...moduleGraph.edge];
98
- }
99
- if (!nodeSet.length) {
100
- nodeSet.push({
101
- id: "1",
102
- type: "graphItem",
103
- position: {
104
- x: 0,
105
- y: 0
106
- },
107
- data: {
108
- color: "lightgreen"
109
- }
110
- });
111
- }
112
- const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
113
- nodeSet,
114
- edgeSet
115
- );
116
- setNodes(layoutedNodes);
117
- setEdges(layoutedEdges);
118
- setTimeout(() => {
119
- const element = document.getElementsByClassName(
120
- "react-flow__controls-fitview"
121
- )[0];
122
- element == null ? void 0 : element.click();
123
- }, 50);
124
- }, [snapshot]);
125
- const onConnect = (0, import_react.useCallback)(
126
- (params) => setEdges(
127
- (eds) => (0, import_reactflow.addEdge)(
128
- __spreadProps(__spreadValues({}, params), { type: import_reactflow.ConnectionLineType.SmoothStep, animated: true }),
129
- eds
130
- )
131
- ),
132
- []
133
- );
134
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.depWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
- import_reactflow.default,
136
- {
137
- className: import_index.default.graph,
138
- nodes,
139
- edges,
140
- onNodesChange,
141
- onEdgesChange,
142
- onConnect,
143
- nodeTypes,
144
- fitView: true,
145
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Controls, {})
146
- }
147
- ) });
148
- };
149
- var Graph_default = Graph;
@@ -1,12 +0,0 @@
1
- .depWrapper_613b1 {
2
- border: 1px solid #e5e6ec;
3
- margin-top: 16px;
4
- padding-top: 14px;
5
- border-radius: 8px;
6
- }
7
- .depWrapper_613b1 .table_613b1 {
8
- margin: 8px 0 20px;
9
- }
10
- .depWrapper_613b1 .graph_613b1 {
11
- height: 80vh !important;
12
- }
@@ -1,61 +0,0 @@
1
- .Wrapper_2fa4f {
2
- display: flex;
3
- box-sizing: border-box;
4
- border-radius: 10px;
5
- margin: 0;
6
- padding: 0;
7
- width: 300px;
8
- overflow: hidden;
9
- }
10
- .Wrapper_2fa4f .container_2fa4f {
11
- display: flex;
12
- flex-direction: column;
13
- width: 100%;
14
- height: 100%;
15
- margin: 0;
16
- padding: 0;
17
- }
18
- .Wrapper_2fa4f .container_2fa4f .group_2fa4f {
19
- display: flex;
20
- align-items: center;
21
- margin-bottom: 3px;
22
- width: 100%;
23
- padding: 5px 0;
24
- }
25
- .Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
26
- color: white;
27
- text-align: center;
28
- margin: 0 auto;
29
- }
30
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f {
31
- display: flex;
32
- flex-direction: column;
33
- background-color: white;
34
- margin: 0 4px 4px 4px;
35
- padding: 10px;
36
- border-radius: 0 0 5px 5px;
37
- font-size: 12px;
38
- }
39
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
40
- display: flex;
41
- margin-bottom: 5px;
42
- }
43
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
44
- font-weight: bold;
45
- margin-right: 10px;
46
- }
47
- .Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
48
- display: inline-block;
49
- padding: 5px;
50
- background: lightgray;
51
- border-radius: 15px;
52
- font-size: 8px;
53
- margin-right: 5px;
54
- margin-bottom: 5px;
55
- font-weight: 300;
56
- text-overflow: ellipsis;
57
- overflow: hidden;
58
- }
59
- .Wrapper_2fa4f .container_2fa4f .message_2fa4f {
60
- display: flex;
61
- }