@module-federation/devtools 0.0.0-next-20240425091022

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

@@ -0,0 +1,149 @@
+"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 = 300;
+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.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./index_module.css");
+var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };

package/dist/lib/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/lib/component/GraphItem/index.js

@@ -0,0 +1,103 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 GraphItem_exports = {};
+__export(GraphItem_exports, {
+  default: () => GraphItem_default
+});
+module.exports = __toCommonJS(GraphItem_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_reactflow = require("reactflow");
+var import_index = __toESM(require("./index.module"));
+var import_style = require("reactflow/dist/style.css");
+const GraphItem = (props) => {
+  const [shareds, setShareds] = (0, import_react.useState)([]);
+  const [exposes, setExposes] = (0, import_react.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("//"));
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { background: color }, className: import_index.default.Wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Handle, { type: "target", position: import_reactflow.Position.Top }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.group, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.name, children: name }) }),
+      version && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.info, children: [
+        exposes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Expose" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: exposes.map((expose, index) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: expose }, index);
+          }) })
+        ] }) : null,
+        shareds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default["expose-container"], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: "Shared" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shareds.map((shared, index) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: shared }, index);
+          }) })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.type, children: isEntryType ? "Entry" : "Version" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.item, children: version })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Handle, { type: "source", position: import_reactflow.Position.Bottom, id: "source" })
+  ] });
+};
+var GraphItem_default = GraphItem;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./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" };

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

@@ -0,0 +1,56 @@
+.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;
+}

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

@@ -0,0 +1,214 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __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());
+  });
+};
+var Layout_exports = {};
+__export(Layout_exports, {
+  default: () => Layout_default
+});
+module.exports = __toCommonJS(Layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+var import_web_react = require("@arco-design/web-react");
+var import_sdk = require("@module-federation/sdk");
+var import_Form = __toESM(require("../Form"));
+var import_Graph = __toESM(require("../Graph"));
+var import_utils = require("../../utils");
+var import_constant = require("../../template/constant");
+const Layout = (props) => {
+  const {
+    moduleInfo,
+    handleSnapshot,
+    versionList,
+    setVersionList,
+    getVersion
+  } = props;
+  const { producer } = (0, import_utils.separateType)(moduleInfo);
+  const [condition, setCondition] = (0, import_react.useState)(import_constant.statusInfo.processing);
+  const [formStatus, setFormStatus] = (0, import_react.useState)([]);
+  const [snapshot, setSnapshot] = (0, import_react.useState)(moduleInfo);
+  const [form] = import_web_react.Form.useForm();
+  const [enableHMR, setEnalbeHMR] = (0, import_react.useState)("disable");
+  const { run } = (0, import_ahooks.useDebounceFn)(
+    (formData) => __async(void 0, null, function* () {
+      window.__FEDERATION__.moduleInfo = JSON.parse(
+        JSON.stringify(window.__FEDERATION__.originModuleInfo)
+      );
+      const filterFormData = formData[import_constant.proxyFormField].reduce(
+        (memo, current, idx) => {
+          if (!formStatus[idx]) {
+            return memo;
+          }
+          const { keyStatus, valueStatus } = formStatus[idx];
+          if (!keyStatus || !valueStatus || !current.checked) {
+            return memo;
+          }
+          const duplicate = JSON.parse(JSON.stringify(current));
+          return [...memo, duplicate];
+        },
+        []
+      );
+      try {
+        setCondition(import_constant.statusInfo.processing);
+        if (!filterFormData.length) {
+          yield (0, import_utils.removeStorage)(import_sdk.MODULE_DEVTOOL_IDENTIFIER);
+          yield (0, import_utils.removeStorage)(import_constant.BROWSER_ENV_KEY);
+          yield (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, "overrides");
+          yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
+          setCondition(import_constant.statusInfo.noProxy);
+          setSnapshot(window.__FEDERATION__.originModuleInfo);
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(filterFormData) : yield (0, import_utils.getModuleInfo)(filterFormData);
+        const snapshotJson = JSON.stringify(moduleInfo2);
+        yield (0, import_utils.setStorage)(import_sdk.MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
+        yield (0, import_utils.setStorage)(import_constant.BROWSER_ENV_KEY);
+        yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, "overrides", overrides);
+        yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
+        window.__FEDERATION__.moduleInfo = moduleInfo2;
+        setSnapshot(moduleInfo2);
+        setCondition(import_constant.statusInfo[status]);
+      } catch (e) {
+        console.log(e);
+        setCondition(import_constant.statusInfo.error);
+      }
+    }),
+    {
+      wait: 700
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    setSnapshot(moduleInfo);
+  }, [moduleInfo]);
+  (0, import_react.useEffect)(() => {
+    (0, import_utils.getScope)().then((scope) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const data = yield chrome.storage.sync.get([import_constant.FormID]);
+      const config = (_a = data == null ? void 0 : data[import_constant.FormID]) == null ? void 0 : _a[scope];
+      let storeData;
+      if ((0, import_utils.isObject)(config)) {
+        storeData = JSON.parse(JSON.stringify(config));
+        storeData[import_constant.proxyFormField] = (_b = storeData[import_constant.proxyFormField]) == null ? void 0 : _b.filter(
+          (item) => producer.includes(item.key)
+        );
+        if (!((_c = storeData[import_constant.proxyFormField]) == null ? void 0 : _c.length)) {
+          storeData = import_constant.defaultModuleData;
+        }
+      } else {
+        storeData = import_constant.defaultModuleData;
+      }
+      form.setFieldsValue(storeData);
+    }));
+  }, []);
+  (0, import_react.useEffect)(() => {
+    chrome.storage.sync.get([import_constant.ENABLEHMR]).then((data) => {
+      const enable = data[import_constant.ENABLEHMR];
+      if (typeof enable === "boolean") {
+        onHMRChange(enable);
+      }
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    validateForm(form);
+  }, []);
+  (0, import_ahooks.useUpdateEffect)(() => {
+    const formData = form.getFieldsValue();
+    run(formData);
+  }, []);
+  const validateForm = (form2) => {
+    setTimeout(() => {
+      form2.validate().catch(() => {
+        console.log("Invalid proxy rules");
+      });
+    }, 50);
+  };
+  const onValuesChange = (target, formData) => {
+    validateForm(form);
+    (0, import_utils.setChromeStorage)(formData);
+    run(formData);
+  };
+  const onHMRChange = (on) => {
+    setEnalbeHMR(on ? "enable" : "disable");
+    chrome.storage.sync.set({
+      [import_constant.ENABLEHMR]: on
+    });
+    if (on) {
+      (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__, on);
+    } else {
+      (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__);
+    }
+    (0, import_utils.injectScript)(import_utils.reloadPage, false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_web_react.Form,
+      {
+        form,
+        onValuesChange: (value, formData) => onValuesChange(value, formData),
+        initialValues: import_constant.defaultModuleData,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Form.default,
+          {
+            form,
+            condition,
+            formStatus,
+            setFormStatus,
+            validateForm: () => validateForm(form),
+            enableHMR,
+            onHMRChange,
+            versionList,
+            setVersionList,
+            getVersion
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Graph.default, { snapshot })
+  ] });
+};
+var Layout_default = Layout;

package/dist/lib/component/Layout/index.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./index_module.css");
+var index_module_default = { "select": "select_084ab", "card": "card_084ab", "appName": "appName_084ab", "tagContainer": "tagContainer_084ab", "tag": "tag_084ab", "header": "header_084ab", "add": "add_084ab", "title": "title_084ab", "status": "status_084ab", "switch": "switch_084ab", "badge": "badge_084ab" };

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

@@ -0,0 +1,48 @@
+.select_084ab {
+  margin-top: 1vh;
+}
+
+.card_084ab {
+  display: flex;
+  height: 4vh;
+  align-items: center;
+}
+.card_084ab .appName_084ab {
+  margin: 1vh 0;
+}
+
+.tagContainer_084ab {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1vh;
+  color: rgb(78, 89, 105);
+}
+.tagContainer_084ab .tag_084ab {
+  margin-left: 1vw;
+}
+
+.header_084ab {
+  display: flex;
+  align-items: center;
+  margin: 1vh 0;
+}
+.header_084ab .add_084ab {
+  margin: 0 0.5vw;
+}
+.header_084ab .title_084ab {
+  margin: 0 0.5vw;
+}
+.header_084ab .status_084ab {
+  display: flex;
+  flex: 1 1;
+  justify-content: flex-end;
+  align-items: center;
+}
+.header_084ab .status_084ab .switch_084ab {
+  margin-left: 0.5vw;
+}
+.header_084ab .badge_084ab {
+  display: flex;
+  transform: scale(1.6);
+  margin: 0 0.6vw;
+}

package/dist/lib/init.js

@@ -0,0 +1,9 @@
+"use strict";
+if (process.env.NODE_ENV === "development") {
+  const createProxy = () => new Proxy(() => Promise.resolve({}), {
+    get: () => {
+      return createProxy();
+    }
+  });
+  window.chrome = createProxy();
+}