@module-federation/devtools 0.0.0-next-20240425091022

package/dist/es/utils/sdk/graph.js

@@ -0,0 +1,148 @@
+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;
+};
+import { MarkerType } from "reactflow";
+const validateSemver = (schema) => {
+  const reg = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(\.(0|[1-9]\d*))?(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/gm;
+  return reg.test(schema);
+};
+const splitModuleId = (target) => {
+  const array = target.split(":");
+  const { length } = array;
+  if (length === 1) {
+    return target;
+  } else if (length >= 3) {
+    if (array[length - 1].endsWith(".json") || array[length - 1].endsWith(".js")) {
+      const idx = array.findIndex((t) => t.startsWith("http"));
+      return array[idx - 1];
+    } else {
+      return array[1];
+    }
+  } else {
+    const nameOrVersion = array[length - 1];
+    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion)) {
+      return array[0];
+    } else {
+      return nameOrVersion;
+    }
+  }
+};
+class DependencyGraph {
+  constructor(snapshot, initTarget) {
+    this.snapshot = snapshot;
+    this.initTarget = initTarget;
+    this.node = [];
+    this.edge = [];
+    this.graph = {};
+    this.identifyMap = /* @__PURE__ */ new Map();
+    this.handledModuleMap = /* @__PURE__ */ new Map();
+  }
+  createGraph(target = this.initTarget) {
+    const { snapshot } = this;
+    let remotesInfo;
+    const snapshotWithoutType = snapshot[target];
+    const snapshotWithType = snapshot[target];
+    if (snapshotWithoutType && "remotesInfo" in snapshotWithoutType) {
+      remotesInfo = snapshotWithoutType == null ? void 0 : snapshotWithoutType.remotesInfo;
+    }
+    if (snapshotWithType && "remotesInfo" in snapshotWithType) {
+      remotesInfo = snapshotWithType == null ? void 0 : snapshotWithType.remotesInfo;
+    }
+    if (!remotesInfo) {
+      return;
+    }
+    Object.keys(remotesInfo).forEach((dep) => {
+      const { matchedVersion } = remotesInfo[dep];
+      let childId = dep;
+      if (matchedVersion && matchedVersion !== "") {
+        childId = `${childId}:${matchedVersion}`;
+      }
+      if (!this.graph[target]) {
+        this.graph[target] = {};
+      }
+      this.graph[childId] = {};
+      this.graph[target][childId] = this.graph[childId];
+      const handled = this.handledModuleMap.get(childId);
+      if (!handled) {
+        this.handledModuleMap.set(childId, true);
+        this.createGraph(childId);
+      }
+    });
+  }
+  addNode(id, type, x, y, nodeData) {
+    this.node.push({
+      id,
+      type,
+      position: {
+        x,
+        y
+      },
+      data: __spreadValues({}, nodeData)
+    });
+  }
+  addEdge(id, source, target, type = "default") {
+    this.edge.push({
+      id,
+      source,
+      target,
+      markerEnd: {
+        type: MarkerType.Arrow,
+        width: 30,
+        height: 30
+      },
+      type
+    });
+  }
+  run(targetGraph, target = this.initTarget, type, id = this.initTarget) {
+    var _a;
+    if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
+      return;
+    }
+    const name = splitModuleId(target);
+    const targetWithoutType = name;
+    let info = name;
+    const remote = this.snapshot[target];
+    if (remote && ("version" in remote || "remoteEntry" in remote)) {
+      info += `:${remote.version || remote.remoteEntry}`;
+    }
+    if (!this.identifyMap.has(targetWithoutType)) {
+      this.identifyMap.set(targetWithoutType, this.identify());
+    }
+    this.addNode(id, type, 0, 0, {
+      info,
+      remote,
+      color: this.identifyMap.get(targetWithoutType)
+    });
+    const graphChilden = Object.keys(
+      targetGraph[targetWithoutType] || targetGraph[target] || {}
+    );
+    graphChilden.forEach((dep) => {
+      this.addEdge(id + dep, id, id + dep);
+      this.run(targetGraph[targetWithoutType], dep, type, id + dep);
+    });
+  }
+  identify() {
+    const r = Math.floor(Math.random() * 255);
+    const g = Math.floor(Math.random() * 255);
+    const b = Math.floor(Math.random() * 255);
+    const color = `rgba(${r},${g},${b},0.8)`;
+    return color;
+  }
+}
+export {
+  DependencyGraph,
+  validateSemver
+};

package/dist/es/utils/sdk/index.js

@@ -0,0 +1,55 @@
+export * from "./graph";
+const setLocalStorage = (key, value) => {
+  localStorage.setItem(key, value);
+};
+const removeLocalStorage = (key) => {
+  const data = localStorage.getItem(key);
+  if (data) {
+    localStorage.removeItem(key);
+  }
+};
+const mergeLocalStorage = (target, key, value) => {
+  const str = localStorage.getItem(target);
+  const obj = JSON.parse(str || "{}");
+  obj[key] = value;
+  localStorage.setItem(target, JSON.stringify(obj));
+};
+const removeLocalStorageKey = (target, key) => {
+  const str = localStorage.getItem(target);
+  if (str) {
+    const obj = JSON.parse(str || "{}");
+    delete obj[key];
+    localStorage.setItem(target, JSON.stringify(obj));
+  }
+};
+const isObject = (target) => Object.prototype.toString.call(target) === "[object Object]";
+const reloadPage = () => {
+  var _a;
+  (_a = globalThis == null ? void 0 : globalThis.location) == null ? void 0 : _a.reload();
+};
+const validateCustom = (schema) => schema == null ? void 0 : schema.endsWith(".json");
+const getUnpkgUrl = (pkg, version) => {
+  if (pkg === "react") {
+    return `https://unpkg.com/react@${version}/umd/react.development.js`;
+  } else if (pkg === "react-dom") {
+    return `https://unpkg.com/react-dom@${version}/umd/react-dom.development.js`;
+  }
+};
+const definePropertyGlobalVal = (target, key, val) => {
+  Object.defineProperty(target, key, {
+    value: val,
+    configurable: false,
+    writable: true
+  });
+};
+export {
+  definePropertyGlobalVal,
+  getUnpkgUrl,
+  isObject,
+  mergeLocalStorage,
+  reloadPage,
+  removeLocalStorage,
+  removeLocalStorageKey,
+  setLocalStorage,
+  validateCustom
+};

package/dist/es/utils/types/index.js

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

package/dist/es/worker/index.js

@@ -0,0 +1 @@
+console.log("Module Federation Worker");

package/dist/lib/App.js

@@ -0,0 +1,61 @@
+"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 App_exports = {};
+__export(App_exports, {
+  default: () => App_default
+});
+module.exports = __toCommonJS(App_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_web_react = require("@arco-design/web-react");
+var import_init = require("./init");
+var import_Layout = __toESM(require("./component/Layout"));
+var import_utils = require("./utils");
+var import_arco = require("@arco-design/web-react/dist/css/arco.css");
+var import_App = __toESM(require("./App.module"));
+const { Content } = import_web_react.Layout;
+const App = (props) => {
+  var _a;
+  const { versionList, setVersionList, getVersion, handleSnapshot } = props;
+  const [module2, setModule] = (0, import_react.useState)(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
+  (0, import_react.useEffect)(() => {
+    (0, import_utils.getGlobalModuleInfo)(setModule);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Layout, { className: import_App.default.layout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { className: import_App.default.content, children: Object.keys(module2).length > 0 || process.env.NODE_ENV === "development" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Layout.default,
+    {
+      moduleInfo: module2,
+      versionList,
+      setVersionList,
+      getVersion,
+      handleSnapshot
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Empty, { description: "No ModuleInfo Detected" }) }) }) });
+};
+var App_default = App;

package/dist/lib/App.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 App_module_exports = {};
+__export(App_module_exports, {
+  default: () => App_module_default
+});
+module.exports = __toCommonJS(App_module_exports);
+var import_App_module = require("./App_module.css");
+var App_module_default = { "layout": "layout_ae2ee", "content": "content_ae2ee" };

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

@@ -0,0 +1,295 @@
+"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 Form_exports = {};
+__export(Form_exports, {
+  default: () => Form_default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_web_react = require("@arco-design/web-react");
+var import_icon = require("@arco-design/web-react/icon");
+var import_constant = require("../../template/constant");
+var import_utils = require("../../utils");
+var import_index = __toESM(require("./index.module"));
+const FormItem = import_web_react.Form.Item;
+const FormList = import_web_react.Form.List;
+const { Option } = import_web_react.Select;
+const FormComponent = (props) => {
+  const {
+    form,
+    condition,
+    formStatus,
+    setFormStatus,
+    validateForm,
+    enableHMR,
+    onHMRChange,
+    versionList,
+    setVersionList,
+    getVersion
+  } = props;
+  const { moduleInfo } = window.__FEDERATION__;
+  let { producer } = (0, import_utils.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
+      };
+    }
+  });
+  (0, import_react.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[import_constant.proxyFormField][index].checked;
+  };
+  const validateKey = (key, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!(0, import_utils.isObject)(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (key) {
+      statusSet[index].keyStatus = true;
+      (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
+      return callback();
+    }
+    statusSet[index].keyStatus = false;
+    (0, import_react_dom.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 (!(0, import_utils.isObject)(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if ((0, import_utils.validateCustom)(value) || (0, import_utils.validateSemver)(value)) {
+      statusSet[index].valueStatus = true;
+      (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
+      return callback();
+    }
+    statusSet[index].valueStatus = false;
+    (0, import_react_dom.flushSync)(() => setFormStatus(statusSet));
+    return callback(
+      "The module information format is incorrect, check the format in the upper left corner"
+    );
+  };
+  const onAdd = (add) => {
+    add(import_constant.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__ */ (0, import_jsx_runtime.jsx)(FormList, { field: import_constant.proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_web_react.Tooltip,
+        {
+          content: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_icon.IconInfoCircle, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.title, children: "Module Proxy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_web_react.Button,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconPlus, {}),
+          shape: "circle",
+          className: import_index.default.add,
+          onClick: () => onAdd(add),
+          "data-set-e2e": "e2eAdd"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.status, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Badge, { color: condition.color, className: import_index.default.badge }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.message, children: condition.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_web_react.Switch,
+          {
+            checked: enableHMR === "enable",
+            checkedText: "Enable HMR",
+            uncheckedText: "Disable HMR",
+            onChange: hmrChange,
+            className: import_index.default.switch
+          }
+        )
+      ] })
+    ] }),
+    fields.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fields.map((item, index) => {
+      var _a, _b;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: import_index.default.container,
+          "data-set-e2e": "e2eProxyItem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              FormItem,
+              {
+                field: `${item.field}.checked`,
+                triggerPropName: "checked",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Checkbox, { className: import_index.default.checkBox })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.input, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              FormItem,
+              {
+                field: `${item.field}.key`,
+                rules: [
+                  {
+                    validator: (value, cb) => validateKey(value, cb, index)
+                  }
+                ],
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_web_react.Select,
+                  {
+                    "data-set-e2e": "e2eProxyKey",
+                    placeholder: "Module Name",
+                    onChange: (key) => onKeyChange(key, index),
+                    allowClear: true,
+                    showSearch: true,
+                    children: formatProducer.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: item2.value, children: item2.label }, item2.value))
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.input, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              FormItem,
+              {
+                field: `${item.field}.value`,
+                rules: [
+                  {
+                    validator: (value, cb) => validateValue(value, cb, index)
+                  }
+                ],
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_web_react.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__ */ (0, import_jsx_runtime.jsx)(Option, { value: version, children: version }, version))
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_web_react.Button,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconDelete, {}),
+                shape: "circle",
+                status: "danger",
+                className: import_index.default.delete,
+                "data-set-e2e": "e2eDelete",
+                onClick: () => onRemove(remove, index)
+              }
+            )
+          ]
+        },
+        item.field
+      );
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Empty, {})
+  ] }) });
+};
+var Form_default = FormComponent;

package/dist/lib/component/Form/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 = { "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" };

package/dist/lib/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;
+}