@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.
- package/dist/es/App.css +13 -0
- package/dist/es/App.js +461 -21
- package/dist/es/App.module.js +1 -1
- package/dist/es/App_module.css +293 -5
- package/dist/es/component/DependencyGraph/index.js +204 -0
- package/dist/es/component/DependencyGraph/index.module.js +5 -0
- package/dist/es/component/DependencyGraph/index_module.css +100 -0
- package/dist/es/component/{GraphItem → DependencyGraphItem}/index.js +20 -9
- package/dist/es/component/DependencyGraphItem/index.module.js +5 -0
- package/dist/es/component/DependencyGraphItem/index_module.css +95 -0
- package/dist/es/component/Form/index.js +192 -117
- package/dist/es/component/Form/index.module.js +1 -1
- package/dist/es/component/Form/index_module.css +176 -25
- package/dist/es/component/LanguageSwitch.js +50 -0
- package/dist/es/component/Layout/index.js +296 -49
- package/dist/es/component/Layout/index.module.js +1 -1
- package/dist/es/component/Layout/index_module.css +52 -32
- package/dist/es/component/ModuleInfo/index.js +313 -0
- package/dist/es/component/ModuleInfo/index.module.js +5 -0
- package/dist/es/component/ModuleInfo/index_module.css +184 -0
- package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js +35 -0
- package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.module.js +5 -0
- package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
- package/dist/es/component/SharedDepsExplorer/index.js +495 -0
- package/dist/es/component/SharedDepsExplorer/index.module.js +5 -0
- package/dist/es/component/SharedDepsExplorer/index_module.css +467 -0
- package/dist/es/component/SharedDepsExplorer/share-utils.js +206 -0
- package/dist/es/component/ThemeToggle.js +19 -0
- package/dist/es/component/ThemeToggle.module.js +5 -0
- package/dist/es/component/ThemeToggle_module.css +12 -0
- package/dist/es/hooks/useDevtoolsTheme.js +77 -0
- package/dist/es/i18n/index.js +506 -0
- package/dist/es/template/constant.js +3 -19
- package/dist/es/utils/chrome/index.js +91 -38
- package/dist/es/utils/chrome/messages.js +6 -0
- package/dist/es/utils/chrome/override-remote.js +42 -0
- package/dist/es/utils/chrome/post-message-listener.js +2 -1
- package/dist/es/utils/chrome/post-message-start.js +10 -2
- package/dist/es/utils/chrome/storage.js +6 -1
- package/dist/es/utils/sdk/graph.js +25 -4
- package/dist/es/utils/sdk/index.js +9 -0
- package/dist/es/worker/index.js +168 -1
- package/dist/lib/App.css +13 -0
- package/dist/lib/App.js +451 -18
- package/dist/lib/App.module.js +1 -1
- package/dist/lib/App_module.css +293 -5
- package/dist/lib/component/DependencyGraph/index.js +226 -0
- package/dist/lib/component/{GraphItem → DependencyGraph}/index.module.js +1 -1
- package/dist/lib/component/DependencyGraph/index_module.css +100 -0
- package/dist/lib/component/{GraphItem → DependencyGraphItem}/index.js +23 -12
- package/dist/lib/component/{Graph → DependencyGraphItem}/index.module.js +1 -1
- package/dist/lib/component/DependencyGraphItem/index_module.css +95 -0
- package/dist/lib/component/Form/index.js +189 -115
- package/dist/lib/component/Form/index.module.js +1 -1
- package/dist/lib/component/Form/index_module.css +176 -25
- package/dist/lib/component/LanguageSwitch.js +80 -0
- package/dist/lib/component/Layout/index.js +290 -47
- package/dist/lib/component/Layout/index.module.js +1 -1
- package/dist/lib/component/Layout/index_module.css +52 -32
- package/dist/lib/component/ModuleInfo/index.js +343 -0
- package/dist/lib/component/ModuleInfo/index.module.js +25 -0
- package/dist/lib/component/ModuleInfo/index_module.css +184 -0
- package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.js +65 -0
- package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.module.js +25 -0
- package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
- package/dist/lib/component/SharedDepsExplorer/index.js +502 -0
- package/dist/lib/component/SharedDepsExplorer/index.module.js +25 -0
- package/dist/lib/component/SharedDepsExplorer/index_module.css +467 -0
- package/dist/lib/component/SharedDepsExplorer/share-utils.js +237 -0
- package/dist/lib/component/ThemeToggle.js +49 -0
- package/dist/lib/component/ThemeToggle.module.js +25 -0
- package/dist/lib/component/ThemeToggle_module.css +12 -0
- package/dist/lib/hooks/useDevtoolsTheme.js +101 -0
- package/dist/lib/i18n/index.js +540 -0
- package/dist/lib/template/constant.js +4 -17
- package/dist/lib/utils/chrome/index.js +94 -38
- package/dist/lib/utils/chrome/messages.js +31 -0
- package/dist/lib/utils/chrome/override-remote.js +65 -0
- package/dist/lib/utils/chrome/post-message-listener.js +2 -1
- package/dist/lib/utils/chrome/post-message-start.js +10 -2
- package/dist/lib/utils/chrome/storage.js +5 -0
- package/dist/lib/utils/sdk/graph.js +25 -4
- package/dist/lib/utils/sdk/index.js +10 -0
- package/dist/lib/worker/index.js +156 -1
- package/dist/types/src/App.d.ts +2 -1
- package/dist/types/src/component/{Graph → DependencyGraph}/index.d.ts +0 -1
- package/dist/types/src/component/{GraphItem → DependencyGraphItem}/index.d.ts +0 -1
- package/dist/types/src/component/Form/index.d.ts +2 -0
- package/dist/types/src/component/LanguageSwitch.d.ts +2 -0
- package/dist/types/src/component/Layout/index.d.ts +0 -1
- package/dist/types/src/component/ModuleInfo/index.d.ts +8 -0
- package/dist/types/src/component/SharedDepsExplorer/FocusResultDisplay.d.ts +15 -0
- package/dist/types/src/component/SharedDepsExplorer/index.d.ts +6 -0
- package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts +44 -0
- package/dist/types/src/component/ThemeToggle.d.ts +8 -0
- package/dist/types/src/hooks/useDevtoolsTheme.d.ts +2 -0
- package/dist/types/src/i18n/index.d.ts +5 -0
- package/dist/types/src/init.d.ts +0 -1
- package/dist/types/src/template/constant.d.ts +2 -5
- package/dist/types/src/utils/chrome/index.d.ts +5 -3
- package/dist/types/src/utils/chrome/messages.d.ts +2 -0
- package/dist/types/src/utils/chrome/override-remote.d.ts +1 -0
- package/dist/types/src/utils/chrome/storage.d.ts +5 -4
- package/dist/types/src/utils/sdk/graph.d.ts +2 -1
- package/dist/types/src/utils/sdk/index.d.ts +1 -0
- package/dist/types/src/utils/types/common.d.ts +4 -0
- package/dist/types/src/worker/index.d.ts +1 -0
- package/package.json +18 -14
- package/dist/es/component/Graph/index.js +0 -127
- package/dist/es/component/Graph/index.module.js +0 -5
- package/dist/es/component/Graph/index_module.css +0 -12
- package/dist/es/component/GraphItem/index.module.js +0 -5
- package/dist/es/component/GraphItem/index_module.css +0 -61
- package/dist/lib/component/Graph/index.js +0 -149
- package/dist/lib/component/Graph/index_module.css +0 -12
- 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[];
|
package/dist/types/src/init.d.ts
CHANGED
|
@@ -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
|
|
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<
|
|
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 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export declare const mergeStorage: (...args: any[]) => Promise<
|
|
2
|
-
export declare const removeStorageKey: (...args: any[]) => Promise<
|
|
3
|
-
export declare const removeStorage: (...args: any[]) => Promise<
|
|
4
|
-
export declare const setStorage: (...args: any[]) => Promise<
|
|
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.
|
|
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
|
-
"@
|
|
41
|
-
"@
|
|
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": "
|
|
45
|
-
"react-dom": "
|
|
44
|
+
"react": "^19.2.0",
|
|
45
|
+
"react-dom": "^19.2.0",
|
|
46
46
|
"reactflow": "11.11.4",
|
|
47
|
-
"
|
|
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.
|
|
56
|
+
"@modern-js/app-tools": "2.70.2",
|
|
52
57
|
"@modern-js/eslint-config": "2.59.0",
|
|
53
|
-
"@modern-js/module-tools": "2.
|
|
54
|
-
"@modern-js/storybook": "2.
|
|
55
|
-
"@modern-js/tsconfig": "2.
|
|
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": "
|
|
62
|
-
"@types/react-dom": "
|
|
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.
|
|
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 = { "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,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
|
-
}
|