@module-federation/devtools 0.0.0-next-20240425091022

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# Module Federation Chrome Devtools
+
+## Ability
+* Proxy online Module Federation remote module to local
+* Let proxied remote module get hmr
+
+## Setup
+
+```bash
+pnpm install
+```
+
+ ## Run
+
+```bash
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm run build
+```
+
+ ## Test
+
+```bash
+pnpm run test
+```
+

package/dist/es/App.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Layout, Empty } from "@arco-design/web-react";
+import "./init";
+import ProxyLayout from "./component/Layout";
+import { getGlobalModuleInfo } from "./utils";
+import "@arco-design/web-react/dist/css/arco.css";
+import styles from "./App.module";
+const { Content } = Layout;
+const App = (props) => {
+  var _a;
+  const { versionList, setVersionList, getVersion, handleSnapshot } = props;
+  const [module, setModule] = useState(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
+  useEffect(() => {
+    getGlobalModuleInfo(setModule);
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Layout, { className: styles.layout, children: /* @__PURE__ */ jsx(Content, { className: styles.content, children: Object.keys(module).length > 0 || process.env.NODE_ENV === "development" ? /* @__PURE__ */ jsx(
+    ProxyLayout,
+    {
+      moduleInfo: module,
+      versionList,
+      setVersionList,
+      getVersion,
+      handleSnapshot
+    }
+  ) : /* @__PURE__ */ jsx(Empty, { description: "No ModuleInfo Detected" }) }) }) });
+};
+var App_default = App;
+export {
+  App_default as default
+};

package/dist/es/App.module.js

@@ -0,0 +1,5 @@
+import "./App_module.css";
+var App_module_default = { "layout": "layout_ae2ee", "content": "content_ae2ee" };
+export {
+  App_module_default as default
+};

package/dist/es/App_module.css

@@ -0,0 +1,19 @@
+.arco-card-body {
+  padding: 0 !important;
+}
+.arco-form-layout-horizontal {
+  flex: 1 1;
+  margin: 0 1vw 0 0;
+}
+.arco-form-item-wrapper {
+  width: 100%;
+  flex: 1 1;
+}
+
+.layout_ae2ee {
+  width: 100%;
+  height: 100vh;
+}
+.layout_ae2ee .content_ae2ee {
+  margin: 0 0.5vw 0 2vw;
+}

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

@@ -0,0 +1,283 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { flushSync } from "react-dom";
+import {
+  Checkbox,
+  Button,
+  Empty,
+  Tooltip,
+  Badge,
+  Form,
+  Select,
+  Switch
+} from "@arco-design/web-react";
+import {
+  IconDelete,
+  IconPlus,
+  IconInfoCircle
+} from "@arco-design/web-react/icon";
+import { defaultDataItem, proxyFormField } from "../../template/constant";
+import {
+  validateCustom,
+  validateSemver,
+  isObject,
+  separateType
+} from "../../utils";
+import styles from "./index.module";
+const FormItem = Form.Item;
+const FormList = Form.List;
+const { Option } = Select;
+const FormComponent = (props) => {
+  const {
+    form,
+    condition,
+    formStatus,
+    setFormStatus,
+    validateForm,
+    enableHMR,
+    onHMRChange,
+    versionList,
+    setVersionList,
+    getVersion
+  } = props;
+  const { moduleInfo } = window.__FEDERATION__;
+  let { producer } = separateType(moduleInfo);
+  const filterDupMap = /* @__PURE__ */ new Map();
+  producer = producer.filter((t) => {
+    const [typeOrName, name] = t.split(":");
+    const marked = filterDupMap.get(name || typeOrName);
+    filterDupMap.set(name || typeOrName, true);
+    return !marked;
+  });
+  const formatProducer = producer.map((id) => {
+    const hasType = id.includes(":");
+    if (hasType) {
+      return {
+        label: id.split(":")[1],
+        value: id
+      };
+    } else {
+      return {
+        label: id,
+        value: id
+      };
+    }
+  });
+  useEffect(() => {
+    producer.forEach((target) => __async(void 0, null, function* () {
+      const version = yield getVersion == null ? void 0 : getVersion(target);
+      const list = [...versionList || []];
+      if (version) {
+        list.push(version);
+      }
+      setVersionList == null ? void 0 : setVersionList(list);
+    }));
+  }, []);
+  const getCheckStatus = (index) => {
+    const formData = form.getFieldsValue();
+    return formData[proxyFormField][index].checked;
+  };
+  const validateKey = (key, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!isObject(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (key) {
+      statusSet[index].keyStatus = true;
+      flushSync(() => setFormStatus(statusSet));
+      return callback();
+    }
+    statusSet[index].keyStatus = false;
+    flushSync(() => setFormStatus(statusSet));
+    return callback("Module name can not be empty");
+  };
+  const validateValue = (value, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!isObject(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (validateCustom(value) || validateSemver(value)) {
+      statusSet[index].valueStatus = true;
+      flushSync(() => setFormStatus(statusSet));
+      return callback();
+    }
+    statusSet[index].valueStatus = false;
+    flushSync(() => setFormStatus(statusSet));
+    return callback(
+      "The module information format is incorrect, check the format in the upper left corner"
+    );
+  };
+  const onAdd = (add) => {
+    add(defaultDataItem);
+    setVersionList == null ? void 0 : setVersionList([...versionList || [], []]);
+    validateForm();
+  };
+  const onRemove = (remove, index) => {
+    if (Array.isArray(versionList)) {
+      versionList.splice(index, 1);
+      setVersionList == null ? void 0 : setVersionList(versionList);
+    }
+    remove(index);
+  };
+  const hmrChange = (on) => {
+    onHMRChange(on);
+  };
+  const onKeyChange = (key, index) => __async(void 0, null, function* () {
+    const version = yield getVersion == null ? void 0 : getVersion(key);
+    if (version) {
+      const list = [...versionList || []];
+      list.splice(index, 1, version);
+      setVersionList == null ? void 0 : setVersionList(list);
+    }
+  });
+  return /* @__PURE__ */ jsx(FormList, { field: proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx("div", { children: "Example: Customize the remote module address, which should end with 「.json」, for example key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
+          children: /* @__PURE__ */ jsx(IconInfoCircle, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.title, children: "Module Proxy" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(IconPlus, {}),
+          shape: "circle",
+          className: styles.add,
+          onClick: () => onAdd(add),
+          "data-set-e2e": "e2eAdd"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles.status, children: [
+        /* @__PURE__ */ jsx(Badge, { color: condition.color, className: styles.badge }),
+        /* @__PURE__ */ jsx("span", { className: styles.message, children: condition.message }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: enableHMR === "enable",
+            checkedText: "Enable HMR",
+            uncheckedText: "Disable HMR",
+            onChange: hmrChange,
+            className: styles.switch
+          }
+        )
+      ] })
+    ] }),
+    fields.length ? /* @__PURE__ */ jsx(Fragment, { children: fields.map((item, index) => {
+      var _a, _b;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.container,
+          "data-set-e2e": "e2eProxyItem",
+          children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              FormItem,
+              {
+                field: `${item.field}.checked`,
+                triggerPropName: "checked",
+                children: /* @__PURE__ */ jsx(Checkbox, { className: styles.checkBox })
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: styles.input, children: /* @__PURE__ */ jsx(
+              FormItem,
+              {
+                field: `${item.field}.key`,
+                rules: [
+                  {
+                    validator: (value, cb) => validateKey(value, cb, index)
+                  }
+                ],
+                children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    "data-set-e2e": "e2eProxyKey",
+                    placeholder: "Module Name",
+                    onChange: (key) => onKeyChange(key, index),
+                    allowClear: true,
+                    showSearch: true,
+                    children: formatProducer.map((item2) => /* @__PURE__ */ jsx(Option, { value: item2.value, children: item2.label }, item2.value))
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: styles.input, children: /* @__PURE__ */ jsx(
+              FormItem,
+              {
+                field: `${item.field}.value`,
+                rules: [
+                  {
+                    validator: (value, cb) => validateValue(value, cb, index)
+                  }
+                ],
+                children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    "data-set-e2e": "e2eProxyValue",
+                    placeholder: "Custom Manifest URL",
+                    allowClear: true,
+                    showSearch: true,
+                    allowCreate: true,
+                    children: (_b = (_a = versionList || []) == null ? void 0 : _a[index]) == null ? void 0 : _b.map((version) => /* @__PURE__ */ jsx(Option, { value: version, children: version }, version))
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(IconDelete, {}),
+                shape: "circle",
+                status: "danger",
+                className: styles.delete,
+                "data-set-e2e": "e2eDelete",
+                onClick: () => onRemove(remove, index)
+              }
+            )
+          ]
+        },
+        item.field
+      );
+    }) }) : /* @__PURE__ */ jsx(Empty, {})
+  ] }) });
+};
+var Form_default = FormComponent;
+export {
+  Form_default as default
+};

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "container": "container_20b79", "checkBox": "checkBox_20b79", "input": "input_20b79", "delete": "delete_20b79", "header": "header_20b79", "add": "add_20b79", "title": "title_20b79", "status": "status_20b79", "message": "message_20b79", "switch": "switch_20b79", "badge": "badge_20b79" };
+export {
+  index_module_default as default
+};

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

@@ -0,0 +1,43 @@
+.container_20b79 {
+  display: flex;
+  justify-content: center;
+}
+.container_20b79 .checkBox_20b79 {
+  transform: scale(1.25);
+}
+.container_20b79 .input_20b79 {
+  margin: 0 1vw 0 0;
+  flex: 1 1;
+}
+.container_20b79 .delete_20b79 {
+  margin: 0 0 0 1vw;
+}
+
+.header_20b79 {
+  display: flex;
+  align-items: center;
+  margin: 1vh 0;
+}
+.header_20b79 .add_20b79 {
+  margin: 0 0.5vw;
+}
+.header_20b79 .title_20b79 {
+  margin: 0 0.5vw;
+}
+.header_20b79 .status_20b79 {
+  display: flex;
+  flex: 1 1;
+  justify-content: flex-end;
+  align-items: center;
+}
+.header_20b79 .status_20b79 .message_20b79 {
+  flex: 1 1;
+}
+.header_20b79 .status_20b79 .switch_20b79 {
+  margin-left: 0.5vw;
+}
+.header_20b79 .badge_20b79 {
+  display: flex;
+  transform: scale(1.6);
+  margin: 0 0.6vw;
+}

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

@@ -0,0 +1,127 @@
+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 = 300;
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,12 @@
+.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.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Handle, Position } from "reactflow";
+import styles from "./index.module";
+import "reactflow/dist/style.css";
+const GraphItem = (props) => {
+  const [shareds, setShareds] = useState([]);
+  const [exposes, setExposes] = useState([]);
+  let name;
+  let version;
+  const { info = "", color, remote } = props.data;
+  const infoArray = info.split(":");
+  if (info.endsWith(".json") || info.endsWith(".js")) {
+    name = infoArray.shift();
+    version = infoArray.join(":");
+  } else {
+    [name, version] = infoArray;
+  }
+  const isEntryType = (version == null ? void 0 : version.startsWith("http")) || (version == null ? void 0 : version.startsWith("//"));
+  useEffect(() => {
+    var _a, _b;
+    let exposes2;
+    let shareds2;
+    if (isEntryType) {
+      fetch(version).then((response) => response.json()).then((json) => {
+        exposes2 = json.exposes.map((expose) => expose.path) || [];
+        shareds2 = json.shared.map(
+          (share) => `${share.name}:${share.version}`
+        ) || [];
+        setExposes(exposes2);
+        setShareds(shareds2);
+      });
+    } else {
+      exposes2 = ((_a = remote == null ? void 0 : remote.modules) == null ? void 0 : _a.map(
+        (item) => item.modulePath
+      )) || [];
+      shareds2 = ((_b = remote == null ? void 0 : remote.shared) == null ? void 0 : _b.map(
+        (item) => `${item.sharedName}:${item.version}`
+      )) || [];
+      setExposes(exposes2);
+      setShareds(shareds2);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { style: { background: color }, className: styles.Wrapper, children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top }),
+    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.group, children: /* @__PURE__ */ jsx("div", { className: styles.name, children: name }) }),
+      version && /* @__PURE__ */ jsxs("div", { className: styles.info, children: [
+        exposes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: styles["expose-container"], children: [
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: "Expose" }),
+          /* @__PURE__ */ jsx("div", { children: exposes.map((expose, index) => {
+            return /* @__PURE__ */ jsx("span", { className: styles.item, children: expose }, index);
+          }) })
+        ] }) : null,
+        shareds.length > 0 ? /* @__PURE__ */ jsxs("div", { className: styles["expose-container"], children: [
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: "Shared" }),
+          /* @__PURE__ */ jsx("div", { children: shareds.map((shared, index) => {
+            return /* @__PURE__ */ jsx("span", { className: styles.item, children: shared }, index);
+          }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ jsx("span", { className: styles.item, children: version })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, id: "source" })
+  ] });
+};
+var GraphItem_default = GraphItem;
+export {
+  GraphItem_default as default
+};

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

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