@module-federation/devtools 0.0.0-next-20240425091022

package/dist/es/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/es/component/Layout/index.js

@@ -0,0 +1,207 @@
+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, useState } from "react";
+import { useDebounceFn, useUpdateEffect } from "ahooks";
+import { Form } from "@arco-design/web-react";
+import {
+  MODULE_DEVTOOL_IDENTIFIER
+} from "@module-federation/sdk";
+import FormComponent from "../Form";
+import Dependency from "../Graph";
+import {
+  getModuleInfo,
+  getScope,
+  injectScript,
+  isObject,
+  separateType,
+  reloadPage,
+  setChromeStorage,
+  mergeStorage,
+  removeStorageKey,
+  removeStorage,
+  setStorage
+} from "../../utils";
+import {
+  defaultModuleData,
+  proxyFormField,
+  FormID,
+  statusInfo,
+  ENABLEHMR,
+  __ENABLE_FAST_REFRESH__,
+  BROWSER_ENV_KEY,
+  __FEDERATION_DEVTOOLS__
+} from "../../template/constant";
+const Layout = (props) => {
+  const {
+    moduleInfo,
+    handleSnapshot,
+    versionList,
+    setVersionList,
+    getVersion
+  } = props;
+  const { producer } = separateType(moduleInfo);
+  const [condition, setCondition] = useState(statusInfo.processing);
+  const [formStatus, setFormStatus] = useState([]);
+  const [snapshot, setSnapshot] = useState(moduleInfo);
+  const [form] = Form.useForm();
+  const [enableHMR, setEnalbeHMR] = useState("disable");
+  const { run } = useDebounceFn(
+    (formData) => __async(void 0, null, function* () {
+      window.__FEDERATION__.moduleInfo = JSON.parse(
+        JSON.stringify(window.__FEDERATION__.originModuleInfo)
+      );
+      const filterFormData = formData[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(statusInfo.processing);
+        if (!filterFormData.length) {
+          yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
+          yield removeStorage(BROWSER_ENV_KEY);
+          yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
+          yield injectScript(reloadPage, false);
+          setCondition(statusInfo.noProxy);
+          setSnapshot(window.__FEDERATION__.originModuleInfo);
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(filterFormData) : yield getModuleInfo(filterFormData);
+        const snapshotJson = JSON.stringify(moduleInfo2);
+        yield setStorage(MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
+        yield setStorage(BROWSER_ENV_KEY);
+        yield mergeStorage(__FEDERATION_DEVTOOLS__, "overrides", overrides);
+        yield injectScript(reloadPage, false);
+        window.__FEDERATION__.moduleInfo = moduleInfo2;
+        setSnapshot(moduleInfo2);
+        setCondition(statusInfo[status]);
+      } catch (e) {
+        console.log(e);
+        setCondition(statusInfo.error);
+      }
+    }),
+    {
+      wait: 700
+    }
+  );
+  useEffect(() => {
+    setSnapshot(moduleInfo);
+  }, [moduleInfo]);
+  useEffect(() => {
+    getScope().then((scope) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const data = yield chrome.storage.sync.get([FormID]);
+      const config = (_a = data == null ? void 0 : data[FormID]) == null ? void 0 : _a[scope];
+      let storeData;
+      if (isObject(config)) {
+        storeData = JSON.parse(JSON.stringify(config));
+        storeData[proxyFormField] = (_b = storeData[proxyFormField]) == null ? void 0 : _b.filter(
+          (item) => producer.includes(item.key)
+        );
+        if (!((_c = storeData[proxyFormField]) == null ? void 0 : _c.length)) {
+          storeData = defaultModuleData;
+        }
+      } else {
+        storeData = defaultModuleData;
+      }
+      form.setFieldsValue(storeData);
+    }));
+  }, []);
+  useEffect(() => {
+    chrome.storage.sync.get([ENABLEHMR]).then((data) => {
+      const enable = data[ENABLEHMR];
+      if (typeof enable === "boolean") {
+        onHMRChange(enable);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    validateForm(form);
+  }, []);
+  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);
+    setChromeStorage(formData);
+    run(formData);
+  };
+  const onHMRChange = (on) => {
+    setEnalbeHMR(on ? "enable" : "disable");
+    chrome.storage.sync.set({
+      [ENABLEHMR]: on
+    });
+    if (on) {
+      mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__, on);
+    } else {
+      removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__);
+    }
+    injectScript(reloadPage, false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Form,
+      {
+        form,
+        onValuesChange: (value, formData) => onValuesChange(value, formData),
+        initialValues: defaultModuleData,
+        children: /* @__PURE__ */ jsx(
+          FormComponent,
+          {
+            form,
+            condition,
+            formStatus,
+            setFormStatus,
+            validateForm: () => validateForm(form),
+            enableHMR,
+            onHMRChange,
+            versionList,
+            setVersionList,
+            getVersion
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Dependency, { snapshot })
+  ] });
+};
+var Layout_default = Layout;
+export {
+  Layout_default as default
+};

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

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

package/dist/es/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/es/init.js

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

package/dist/es/template/constant.js

@@ -0,0 +1,65 @@
+var __defProp = Object.defineProperty;
+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;
+};
+const FormID = "FormID";
+const ENABLEHMR = "enableHMR";
+const proxyFormField = "proxyFormField";
+const defaultDataItem = {
+  key: "",
+  value: "",
+  checked: true
+};
+const defaultModuleData = {
+  proxyFormField: [
+    __spreadValues({}, defaultDataItem)
+  ]
+};
+const statusInfo = {
+  noProxy: {
+    status: "noProxy",
+    message: "Modules are not currently proxied",
+    color: "#698cee"
+  },
+  processing: {
+    status: "processing",
+    message: "Obtaining remote module information",
+    color: "#FF7D00"
+  },
+  success: {
+    status: "success",
+    message: "The proxy configuration has taken effect and the corresponding page has been automatically refreshed.",
+    color: "#50b042"
+  },
+  error: {
+    status: "error",
+    message: "Calculating Snapshot failed, please confirm whether the package information is correct",
+    color: "#F53F3F"
+  }
+};
+const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+const BROWSER_ENV_KEY = "MF_ENV";
+const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
+export {
+  BROWSER_ENV_KEY,
+  ENABLEHMR,
+  FormID,
+  __ENABLE_FAST_REFRESH__,
+  __FEDERATION_DEVTOOLS__,
+  defaultDataItem,
+  defaultModuleData,
+  proxyFormField,
+  statusInfo
+};

package/dist/es/template/index.js

@@ -0,0 +1 @@
+export * from "./constant";

package/dist/es/utils/chrome/fast-refresh-init.js

@@ -0,0 +1,5 @@
+import { getUrl } from "./index";
+const fastRefreshMessageUrl = getUrl("fast-refresh.js");
+const script = document.createElement("script");
+script.src = fastRefreshMessageUrl;
+document.getElementsByTagName("html")[0].appendChild(script);

package/dist/es/utils/chrome/fast-refresh.js

@@ -0,0 +1,113 @@
+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 _a;
+import { loadScript } from "@module-federation/sdk";
+import { isObject, getUnpkgUrl } from "../index";
+import { definePropertyGlobalVal } from "../sdk";
+import { __FEDERATION_DEVTOOLS__ } from "../../template";
+const fastRefreshPlugin = () => {
+  return {
+    name: "mf-fast-refresh-plugin",
+    // @ts-expect-error
+    beforeInit({ origin, userOptions, options, shareInfo }) {
+      let enableFastRefresh;
+      let devtoolsMessage;
+      const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
+      if (devtoolsMessageStr) {
+        try {
+          devtoolsMessage = JSON.parse(devtoolsMessageStr);
+          enableFastRefresh = devtoolsMessage == null ? void 0 : devtoolsMessage.enableFastRefresh;
+        } catch (e) {
+          console.debug("Fast Refresh Plugin Error: ", e);
+        }
+      }
+      if (isObject(shareInfo)) {
+        let orderResolve;
+        const orderPromise = new Promise((resolve) => {
+          orderResolve = resolve;
+        });
+        Object.keys(shareInfo).forEach((share) => __async(this, null, function* () {
+          const sharedArr = Array.isArray(shareInfo[share]) ? shareInfo[share] : [shareInfo[share]];
+          sharedArr.forEach((shared) => {
+            let get;
+            if (share === "react") {
+              get = () => loadScript(getUnpkgUrl(share, shared.version), {
+                attrs: { defer: true, async: false }
+              }).then(() => {
+                orderResolve();
+              });
+            }
+            if (share === "react-dom") {
+              get = () => orderPromise.then(
+                () => loadScript(getUnpkgUrl(share, shared.version), {
+                  attrs: { defer: true, async: false }
+                })
+              );
+            }
+            if (enableFastRefresh && typeof get === "function") {
+              if (share === "react") {
+                shared.get = () => __async(this, null, function* () {
+                  if (!window.React) {
+                    yield get();
+                    console.warn(
+                      "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
+                    );
+                  }
+                  shared.lib = () => window.React;
+                  return () => window.React;
+                });
+              }
+              if (share === "react-dom") {
+                shared.get = () => __async(this, null, function* () {
+                  if (!window.ReactDOM) {
+                    yield get();
+                  }
+                  shared.lib = () => window.ReactDOM;
+                  return () => window.ReactDOM;
+                });
+              }
+            }
+          });
+        }));
+        return {
+          origin,
+          userOptions,
+          options,
+          shareInfo
+        };
+      } else {
+        return {
+          origin,
+          userOptions,
+          options
+        };
+      }
+    }
+  };
+};
+if (!(window == null ? void 0 : window.__FEDERATION__)) {
+  definePropertyGlobalVal(window, "__FEDERATION__", {});
+  definePropertyGlobalVal(window, "__VMOK__", window.__FEDERATION__);
+}
+if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
+  window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
+}
+(_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(fastRefreshPlugin());