@module-federation/devtools 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

package/dist/es/component/Graph/index.js

@@ -1,127 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
-import ReactFlow, {
-  addEdge,
-  ConnectionLineType,
-  useNodesState,
-  useEdgesState,
-  Controls
-} from "reactflow";
-import dagre from "dagre";
-import { DependencyGraph } from "../../utils/sdk/graph";
-import GraphItem from "../GraphItem";
-import { separateType } from "../../utils";
-import styles from "./index.module";
-import "reactflow/dist/style.css";
-const nodeWidth = 400;
-const nodeHeight = 600;
-const nodeTypes = { graphItem: GraphItem };
-const Graph = (props) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const { snapshot } = props;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = separateType(moduleInfo);
-  useEffect(() => {
-    const dagreGraph = new dagre.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
-      dagreGraph.setGraph({ rankdir: direction });
-      nodes2.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-      edges2.forEach((edge) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-      dagre.layout(dagreGraph);
-      nodes2.forEach((node) => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2
-        };
-      });
-      return { nodes: nodes2, edges: edges2 };
-    };
-    let nodeSet = [];
-    let edgeSet = [];
-    for (const consumer in consumers) {
-      const moduleGraph = new DependencyGraph(snapshot, consumer);
-      moduleGraph.createGraph();
-      moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
-      nodeSet = [...nodeSet, ...moduleGraph.node];
-      edgeSet = [...edgeSet, ...moduleGraph.edge];
-    }
-    if (!nodeSet.length) {
-      nodeSet.push({
-        id: "1",
-        type: "graphItem",
-        position: {
-          x: 0,
-          y: 0
-        },
-        data: {
-          color: "lightgreen"
-        }
-      });
-    }
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      nodeSet,
-      edgeSet
-    );
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-    setTimeout(() => {
-      const element = document.getElementsByClassName(
-        "react-flow__controls-fitview"
-      )[0];
-      element == null ? void 0 : element.click();
-    }, 50);
-  }, [snapshot]);
-  const onConnect = useCallback(
-    (params) => setEdges(
-      (eds) => addEdge(
-        __spreadProps(__spreadValues({}, params), { type: ConnectionLineType.SmoothStep, animated: true }),
-        eds
-      )
-    ),
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { className: styles.depWrapper, children: /* @__PURE__ */ jsx(
-    ReactFlow,
-    {
-      className: styles.graph,
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onConnect,
-      nodeTypes,
-      fitView: true,
-      children: /* @__PURE__ */ jsx(Controls, {})
-    }
-  ) });
-};
-var Graph_default = Graph;
-export {
-  Graph_default as default
-};

package/dist/es/component/Graph/index.module.js

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };
-export {
-  index_module_default as default
-};

package/dist/es/component/Graph/index_module.css

@@ -1,12 +0,0 @@
-.depWrapper_613b1 {
-  border: 1px solid #e5e6ec;
-  margin-top: 16px;
-  padding-top: 14px;
-  border-radius: 8px;
-}
-.depWrapper_613b1 .table_613b1 {
-  margin: 8px 0 20px;
-}
-.depWrapper_613b1 .graph_613b1 {
-  height: 80vh !important;
-}

package/dist/es/component/GraphItem/index.module.js

@@ -1,5 +0,0 @@
-import "./index_module.css";
-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" };
-export {
-  index_module_default as default
-};

package/dist/es/component/GraphItem/index_module.css

@@ -1,61 +0,0 @@
-.Wrapper_2fa4f {
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0;
-  padding: 0;
-  width: 300px;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f {
-  display: flex;
-  align-items: center;
-  margin-bottom: 3px;
-  width: 100%;
-  padding: 5px 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
-  color: white;
-  text-align: center;
-  margin: 0 auto;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f {
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  margin: 0 4px 4px 4px;
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
-  font-size: 12px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
-  display: flex;
-  margin-bottom: 5px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
-  font-weight: bold;
-  margin-right: 10px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
-  display: inline-block;
-  padding: 5px;
-  background: lightgray;
-  border-radius: 15px;
-  font-size: 8px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-weight: 300;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f .message_2fa4f {
-  display: flex;
-}

package/dist/lib/component/Graph/index.js

@@ -1,149 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Graph_exports = {};
-__export(Graph_exports, {
-  default: () => Graph_default
-});
-module.exports = __toCommonJS(Graph_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_reactflow = __toESM(require("reactflow"));
-var import_dagre = __toESM(require("dagre"));
-var import_graph = require("../../utils/sdk/graph");
-var import_GraphItem = __toESM(require("../GraphItem"));
-var import_utils = require("../../utils");
-var import_index = __toESM(require("./index.module"));
-var import_style = require("reactflow/dist/style.css");
-const nodeWidth = 400;
-const nodeHeight = 600;
-const nodeTypes = { graphItem: import_GraphItem.default };
-const Graph = (props) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_reactflow.useNodesState)([]);
-  const [edges, setEdges, onEdgesChange] = (0, import_reactflow.useEdgesState)([]);
-  const { snapshot } = props;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = (0, import_utils.separateType)(moduleInfo);
-  (0, import_react.useEffect)(() => {
-    const dagreGraph = new import_dagre.default.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
-      dagreGraph.setGraph({ rankdir: direction });
-      nodes2.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-      edges2.forEach((edge) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-      import_dagre.default.layout(dagreGraph);
-      nodes2.forEach((node) => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2
-        };
-      });
-      return { nodes: nodes2, edges: edges2 };
-    };
-    let nodeSet = [];
-    let edgeSet = [];
-    for (const consumer in consumers) {
-      const moduleGraph = new import_graph.DependencyGraph(snapshot, consumer);
-      moduleGraph.createGraph();
-      moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
-      nodeSet = [...nodeSet, ...moduleGraph.node];
-      edgeSet = [...edgeSet, ...moduleGraph.edge];
-    }
-    if (!nodeSet.length) {
-      nodeSet.push({
-        id: "1",
-        type: "graphItem",
-        position: {
-          x: 0,
-          y: 0
-        },
-        data: {
-          color: "lightgreen"
-        }
-      });
-    }
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      nodeSet,
-      edgeSet
-    );
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-    setTimeout(() => {
-      const element = document.getElementsByClassName(
-        "react-flow__controls-fitview"
-      )[0];
-      element == null ? void 0 : element.click();
-    }, 50);
-  }, [snapshot]);
-  const onConnect = (0, import_react.useCallback)(
-    (params) => setEdges(
-      (eds) => (0, import_reactflow.addEdge)(
-        __spreadProps(__spreadValues({}, params), { type: import_reactflow.ConnectionLineType.SmoothStep, animated: true }),
-        eds
-      )
-    ),
-    []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.depWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_reactflow.default,
-    {
-      className: import_index.default.graph,
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onConnect,
-      nodeTypes,
-      fitView: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Controls, {})
-    }
-  ) });
-};
-var Graph_default = Graph;

package/dist/lib/component/Graph/index_module.css

@@ -1,12 +0,0 @@
-.depWrapper_613b1 {
-  border: 1px solid #e5e6ec;
-  margin-top: 16px;
-  padding-top: 14px;
-  border-radius: 8px;
-}
-.depWrapper_613b1 .table_613b1 {
-  margin: 8px 0 20px;
-}
-.depWrapper_613b1 .graph_613b1 {
-  height: 80vh !important;
-}

package/dist/lib/component/GraphItem/index_module.css

@@ -1,61 +0,0 @@
-.Wrapper_2fa4f {
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0;
-  padding: 0;
-  width: 300px;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f {
-  display: flex;
-  align-items: center;
-  margin-bottom: 3px;
-  width: 100%;
-  padding: 5px 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
-  color: white;
-  text-align: center;
-  margin: 0 auto;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f {
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  margin: 0 4px 4px 4px;
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
-  font-size: 12px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
-  display: flex;
-  margin-bottom: 5px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
-  font-weight: bold;
-  margin-right: 10px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
-  display: inline-block;
-  padding: 5px;
-  background: lightgray;
-  border-radius: 15px;
-  font-size: 8px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-weight: 300;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f .message_2fa4f {
-  display: flex;
-}