@qwik.dev/devtools 0.2.0 → 0.2.2

package/dist/ui/features/RenderTree/RenderTree.qwik.cjs

@@ -1,332 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const Tree = require("../../components/Tree/Tree.qwik.cjs");
-const filterVnode = require("../../components/Tree/filterVnode.qwik.cjs");
-const location = require("../../utils/location.qwik.cjs");
-const type$1 = require("../../components/Tree/type.qwik.cjs");
-const vnode = require("../../components/Tree/vnode.qwik.cjs");
-const type = require("../../utils/type.qwik.cjs");
-const formatTreeData = require("./formatTreeData.qwik.cjs");
-const internal = require("@qwik.dev/core/internal");
-require("../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
-const constants = require("../../packages/kit/src/constants.qwik.cjs");
-const context = require("../../packages/kit/src/context.qwik.cjs");
-require("../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
-const data = require("./data.qwik.cjs");
-const hi_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.cjs");
-const bundleFull = require("../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.cjs");
-function getValueColorClass(node, valueText) {
-  switch (node.elementType) {
-    case "string":
-      return "text-red-400";
-    case "number":
-      return "text-green-400";
-    case "boolean":
-      return "text-amber-400";
-    case "function":
-      return "text-purple-400";
-    case "array":
-      return "text-muted-foreground";
-    case "object":
-      return /(Array\[|Object\s\{|Class\s\{)/.test(valueText) ? "text-muted-foreground" : "text-foreground";
-    default:
-      return "text-foreground";
-  }
-}
-const RenderTree = core.component$(() => {
-  core.useStyles$(`
-    pre.shiki {
-      overflow: auto;
-      padding: 10px;
-    }
-  `);
-  const codes = core.useSignal([]);
-  const data$1 = core.useSignal([]);
-  const stateTree = core.useSignal([]);
-  const hookFilters = core.useSignal([]);
-  const hooksOpen = core.useSignal(true);
-  const qwikContainer = core.useComputed$(() => {
-    try {
-      return location.htmlContainer();
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
-  });
-  const highlightedCodes = core.useSignal([]);
-  core.useVisibleTask$(async ({ track }) => {
-    track(() => codes.value);
-    if (!codes.value.length) {
-      highlightedCodes.value = [];
-      return;
-    }
-    const highlighter = await bundleFull.createHighlighter({
-      themes: [
-        "nord"
-      ],
-      langs: [
-        "tsx",
-        "js",
-        "ts",
-        "jsx"
-      ]
-    });
-    highlightedCodes.value = codes.value.map((item) => {
-      let lang = "tsx";
-      if (item.pathId.endsWith(".js")) lang = "js";
-      if (item.pathId.endsWith(".ts")) lang = "ts";
-      if (item.pathId.endsWith(".jsx")) lang = "jsx";
-      if (item.pathId.endsWith(".tsx")) lang = "tsx";
-      return item?.modules?.code ? highlighter.codeToHtml(item.modules.code, {
-        lang,
-        theme: "nord"
-      }) : "";
-    });
-  });
-  core.useVisibleTask$(() => {
-    data$1.value = vnode.removeNodeFromTree(filterVnode.vnode_toObject(qwikContainer.value.rootVNode), (node) => {
-      return node.name === type$1.ISDEVTOOL;
-    });
-  });
-  const onNodeClick = core.$(async (node) => {
-    console.log("current node", node);
-    const rpc = context.getViteClientRpc();
-    let parsed = [];
-    formatTreeData.clearAll();
-    if (node.props?.[constants.QRENDERFN]) {
-      formatTreeData.formatData("render", {
-        data: {
-          render: node.props[constants.QRENDERFN]
-        }
-      });
-      const qrl = formatTreeData.getQrlChunkName(node.props[constants.QRENDERFN]);
-      parsed = data.getQwikState(qrl);
-    }
-    if (Array.isArray(node.props?.[constants.QSEQ]) && parsed.length > 0) {
-      const normalizedData = [
-        ...parsed,
-        ...data.returnQrlData(node.props?.[constants.QSEQ])
-      ];
-      normalizedData.forEach((item) => {
-        formatTreeData.formatData(item.hookType, item);
-      });
-    }
-    if (node.props?.[constants.QPROPS]) {
-      const props = internal.unwrapStore(node.props[constants.QPROPS]);
-      Object.entries(props).forEach(([key, value]) => {
-        formatTreeData.formatData(type.isListen(key) ? "listens" : "props", {
-          data: {
-            [key]: value
-          }
-        });
-      });
-    }
-    codes.value = [];
-    const res = await rpc?.getModulesByPathIds(formatTreeData.findAllQrl());
-    codes.value = res.filter((item) => item.modules);
-    stateTree.value = formatTreeData.buildTree();
-    hookFilters.value = formatTreeData.getHookFilterList();
-  });
-  const currentTab = core.useSignal("state");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: "h-full w-full flex-1 overflow-hidden rounded-md border border-border bg-background",
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      class: "flex h-full w-full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "w-1/2 overflow-hidden p-4",
-          style: {
-            minWidth: "400px"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Tree.Tree, {
-            data: data$1,
-            onNodeClick
-          })
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "border-l border-border"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "border-b border-border",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                class: "flex space-x-4 border-b border-border",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("button", {
-                    onClick$: () => currentTab.value = "state",
-                    style: currentTab.value === "state" ? {
-                      borderBottom: "2px solid var(--color-primary-active)"
-                    } : {},
-                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out text-muted-foreground hover:text-foreground",
-                    children: "State"
-                  }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", {
-                    onClick$: () => currentTab.value = "code",
-                    style: currentTab.value === "code" ? {
-                      borderBottom: "2px solid var(--color-primary-active)"
-                    } : {},
-                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out text-muted-foreground hover:text-foreground",
-                    children: "Code"
-                  })
-                ]
-              })
-            }),
-            currentTab.value === "state" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              class: "mt-5 flex min-h-0 flex-1 flex-col",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                  class: "rounded-lg border border-border bg-card-item-bg shadow-sm",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                      class: "flex items-center justify-between border-b border-border px-2 py-2",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", {
-                          class: "text-xs font-medium text-muted-foreground",
-                          children: "Hooks"
-                        }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                          class: "flex items-center space-x-2",
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("button", {
-                              class: "text-xs text-primary hover:underline px-2 py-1",
-                              onClick$: core.$(() => {
-                                hookFilters.value = hookFilters.value.map((item) => {
-                                  item.display = true;
-                                  return item;
-                                });
-                                stateTree.value = formatTreeData.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
-                              }),
-                              children: "Select all"
-                            }),
-                            /* @__PURE__ */ jsxRuntime.jsx("button", {
-                              class: "text-xs text-muted-foreground hover:text-foreground hover:underline px-2 py-1",
-                              onClick$: core.$(() => {
-                                hookFilters.value = hookFilters.value.map((item) => {
-                                  item.display = false;
-                                  return item;
-                                });
-                                stateTree.value = formatTreeData.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
-                              }),
-                              children: "Clear"
-                            }),
-                            /* @__PURE__ */ jsxRuntime.jsx("button", {
-                              "aria-label": "toggle hooks",
-                              onClick$: core.$(() => hooksOpen.value = !hooksOpen.value),
-                              class: "rounded p-1 text-muted-foreground hover:text-foreground",
-                              children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiChevronUpMini, {
-                                class: `h-4 w-4 transition-transform duration-200 ${hooksOpen.value ? "rotate-180" : "-rotate-90"}`
-                              })
-                            })
-                          ]
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", {
-                      class: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-3 px-3 py-2 text-sm overflow-hidden",
-                      style: {
-                        maxHeight: hooksOpen.value ? "800px" : "0px",
-                        opacity: hooksOpen.value ? "1" : "0",
-                        transition: "max-height 200ms ease, opacity 200ms ease"
-                      },
-                      children: hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
-                        class: "flex items-center",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("input", {
-                            class: "h-4 w-4 rounded-full border-border focus:ring-primary-active focus:ring-offset-0 dark:bg-[#1F2937] dark:border-[#374151]",
-                            style: {
-                              accentColor: "var(--color-primary-active)"
-                            },
-                            type: "checkbox",
-                            checked: item.display,
-                            onChange$: (ev) => {
-                              const target = ev.target;
-                              hookFilters.value[idx].display = target.checked;
-                              stateTree.value = formatTreeData.buildTree().filter((item2) => hookFilters.value.some((hook) => hook.key === item2?.label && hook.display));
-                            }
-                          }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", {
-                            class: "ml-2 select-none",
-                            children: item.key
-                          })
-                        ]
-                      }, idx))
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", {
-                  class: "min-h-0 flex-1 overflow-y-auto p-2 mt-4",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Tree.Tree, {
-                    data: stateTree,
-                    gap: 10,
-                    animate: true,
-                    animationDuration: 200,
-                    isHover: true,
-                    renderNode: core.$((node) => {
-                      const label = node.label || node.name || "";
-                      const parts = label.split(":");
-                      if (node.children && parts.length === 1) {
-                        return /* @__PURE__ */ jsxRuntime.jsx("span", {
-                          class: "font-semibold text-pink-400",
-                          children: label
-                        });
-                      }
-                      if (parts.length > 1) {
-                        const key = parts[0];
-                        const value = parts.slice(1).join(":").trim();
-                        const valueClass = getValueColorClass(node, value);
-                        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", {
-                              class: "text-blue-400",
-                              children: key
-                            }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", {
-                              class: "text-foreground/70",
-                              children: " : "
-                            }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", {
-                              class: valueClass,
-                              children: value
-                            })
-                          ]
-                        });
-                      }
-                      return /* @__PURE__ */ jsxRuntime.jsx("span", {
-                        children: label
-                      });
-                    })
-                  })
-                })
-              ]
-            }),
-            currentTab.value === "code" && /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "mt-5 min-h-0 flex-1 overflow-y-auto rounded-lg border border-border p-2 shadow-sm",
-              children: codes.value.map((item, idx) => {
-                return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                    class: "mb-4 rounded-xl border border-border bg-card-item-bg p-4 shadow-sm hover:bg-card-item-hover-bg transition-colors",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", {
-                        class: "mb-2 break-all text-base font-semibold text-primary",
-                        children: item.pathId
-                      }),
-                      /* @__PURE__ */ jsxRuntime.jsx("pre", {
-                        class: "overflow-hidden",
-                        dangerouslySetInnerHTML: highlightedCodes.value[idx] || ""
-                      })
-                    ]
-                  })
-                });
-              })
-            })
-          ]
-        })
-      ]
-    })
-  });
-});
-exports.RenderTree = RenderTree;

package/dist/ui/features/RenderTree/data.qwik.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
-const constants = require("../../packages/kit/src/constants.qwik.cjs");
-require("../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
-const isInnerHook = (seq) => {
-  return !(seq[constants.QRL_KEY] || seq[constants.COMPUTED_QRL_KEY])?.[constants.CHUNK_KEY].includes(constants.INNER_USE_HOOK);
-};
-const getQwikState = (qrl) => {
-  const stateKeyPath = Object.keys(window.QWIK_DEVTOOLS_GLOBAL_STATE)?.find((key) => key.endsWith(qrl));
-  return (
-    //@ts-ignore
-    window.QWIK_DEVTOOLS_GLOBAL_STATE?.[stateKeyPath]?.filter((item) => !!item.data) || []
-  );
-};
-const returnQrlData = (seqs) => {
-  return seqs.filter(isInnerHook).filter((item) => item[constants.QRL_KEY]).map((item) => {
-    return {
-      category: "expressionStatement",
-      data: item[constants.QRL_KEY],
-      hookType: item[constants.QRL_KEY]?.[constants.CHUNK_KEY]?.includes("useTask") ? "useTask" : "useVisibleTask",
-      returnType: "undefined",
-      variableName: item[constants.QRL_KEY]?.[constants.CHUNK_KEY]?.includes("useTask") ? "useTask" : "useVisibleTask"
-    };
-  });
-};
-exports.getQwikState = getQwikState;
-exports.returnQrlData = returnQrlData;

package/dist/ui/features/RenderTree/formatTreeData.qwik.cjs

@@ -1,247 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const transfromqseq = require("./transfromqseq.qwik.cjs");
-require("../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
-const constants = require("../../packages/kit/src/constants.qwik.cjs");
-require("../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
-const schedule = (value) => {
-  return transfromqseq.objectToTree(value);
-};
-const qSeqs = {
-  props: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  listens: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStore: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useSignal: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useContext: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useId: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStyles: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStylesScoped: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useConstant: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useTask: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useVisibleTask: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useComputed: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useAsyncComputed: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useErrorBoundary: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useServerData: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useSerializer: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useResource: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useContextProvider: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  render: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useLocation: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useNavigate: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  usePreventNavigate: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useContent: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useDocumentHead: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  customhook: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  }
-};
-function formatData(type, data) {
-  qSeqs[type].set.add(data);
-}
-function getData() {
-  return Object.entries(qSeqs).map(([name, { set, toTree, display }]) => {
-    const arr = [
-      ...set
-    ].map((item) => {
-      if (name === "props" || name === "listens" || name === "render") {
-        return toTree(item.data);
-      } else if (name === "useTask" || name === "useVisibleTask") {
-        return toTree({
-          [`let ${item?.variableName} =`]: findMatchVarfromScope(item)
-        });
-      } else if (name === "customhook") {
-        return toTree({
-          [`let ${item?.variableName} = Scope `]: item.data[constants.CAPTURE_REF_KEY]
-        });
-      } else {
-        return toTree({
-          [`let ${item?.variableName} =`]: item.data
-        });
-      }
-    }).flat();
-    if (display === false) return null;
-    return arr.length > 0 ? transfromqseq.createTreeNodeObj(name, arr) : null;
-  }).filter(Boolean);
-}
-function findMatchVarfromScope(item) {
-  const targets = item?.data[constants.CAPTURE_REF_KEY];
-  const variableName = [];
-  if (!targets) return [];
-  for (const { set } of Object.values(qSeqs)) {
-    for (const entry of set) {
-      const data = entry?.data ?? entry;
-      if (!data) continue;
-      const varName = targets.find((target) => target === data);
-      varName && variableName.push(entry?.variableName);
-    }
-  }
-  return `Scope [${variableName.join(", ")}]`;
-}
-function buildTree() {
-  return getData();
-}
-function clearAll() {
-  for (const key of Object.keys(qSeqs)) {
-    qSeqs[key].set.clear();
-  }
-}
-function getHookFilterList() {
-  return Object.keys(qSeqs).filter((usename) => qSeqs[usename].set.size > 0 && qSeqs[usename].display).map((key) => ({
-    key,
-    display: qSeqs[key].display
-  }));
-}
-function getRawDataObj() {
-  const result = {};
-  for (const [name, { set }] of Object.entries(qSeqs)) {
-    result[name] = [
-      ...set
-    ];
-  }
-  return result;
-}
-function findAllQrl() {
-  const list = [
-    "useTask",
-    "useVisibleTask",
-    "useComputed",
-    "useAsyncComputed",
-    "useServerData",
-    "useSerializer",
-    "render",
-    "listens"
-  ];
-  const rawData = getRawDataObj();
-  const result = list.map((item) => {
-    return rawData[item].map((entry) => {
-      if (item === "listens") {
-        return Object.values(entry.data || entry).map((v) => v?.[constants.CHUNK_KEY]);
-      } else if (item === "render") {
-        return getQrlPath(entry.data.render || entry);
-      } else {
-        const qrlObj = (entry.data || entry)[constants.QRL_KEY] || (entry.data || entry)[constants.COMPUTED_QRL_KEY];
-        return getQrlPath(qrlObj);
-      }
-    });
-  });
-  console.log("findAllQrl", result.flat(2).filter(Boolean));
-  return result.flat(2).filter(Boolean);
-}
-function getQrlPath(qrl) {
-  if (qrl?.dev) {
-    return qrl?.dev.filename;
-  }
-  return qrl?.[constants.CHUNK_KEY];
-}
-function getQrlChunkName(qrl) {
-  const splitPoint = "_component";
-  return qrl?.[constants.CHUNK_KEY]?.split(splitPoint)?.[0];
-}
-exports.buildTree = buildTree;
-exports.clearAll = clearAll;
-exports.findAllQrl = findAllQrl;
-exports.findMatchVarfromScope = findMatchVarfromScope;
-exports.formatData = formatData;
-exports.getData = getData;
-exports.getHookFilterList = getHookFilterList;
-exports.getQrlChunkName = getQrlChunkName;
-exports.getQrlPath = getQrlPath;

package/dist/ui/features/RenderTree/transfromqseq.qwik.cjs

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const type = require("../../utils/type.qwik.cjs");
-let nodeIdCounter = 0;
-const objectToTree = (obj, parentPath = "") => {
-  if (!obj || typeof obj !== "object") {
-    return [];
-  }
-  const result = [];
-  if (Array.isArray(obj)) {
-    return obj.map((item, index) => {
-      return createTreeNode(item, `[${index}]`);
-    }).filter(Boolean);
-  }
-  Object.entries(obj).forEach(([key, value]) => {
-    const node = createTreeNode(value, key);
-    if (node) {
-      result.push(node);
-    }
-  });
-  return result;
-};
-function createTreeNode(value, key, path) {
-  const node = createTreeNodeObj(key);
-  if (value === null || value === void 0) {
-    node.label = `${key}: ${value}`;
-    node.elementType = "null";
-    return node;
-  }
-  if (typeof value === "boolean") {
-    node.label = `${key}: ${value}`;
-    node.elementType = "boolean";
-    return node;
-  }
-  if (typeof value === "number") {
-    node.label = `${key}: ${value}`;
-    node.elementType = "number";
-    return node;
-  }
-  if (typeof value === "string") {
-    node.label = `${key}: "${value}"`;
-    node.elementType = "string";
-    return node;
-  }
-  if (typeof value === "function") {
-    node.label = `${key}: ƒ()`;
-    node.elementType = "function";
-    if (value.name) {
-      node.label = `${key}: ƒ ${value.name}()`;
-    }
-    return node;
-  }
-  if (Array.isArray(value)) {
-    node.label = `${key}: Array[${value.length}]`;
-    node.elementType = "array";
-    node.children = value.map((item, index) => {
-      return createTreeNode(item, index.toString());
-    }).filter(Boolean);
-    return node;
-  }
-  if (typeof value === "object") {
-    if (value.constructor.name !== "Object") {
-      node.label = `${key}: Class {${value.constructor.name}}`;
-      node.elementType = "object";
-      if (type.isValue(value)) {
-        node.children = [
-          createTreeNode(value.value, "value")
-        ];
-      }
-    } else {
-      const keys = Object.keys(value);
-      node.label = `${key}: Object {${keys.length}}`;
-      node.elementType = "object";
-      node.children = Object.entries(value).map(([childKey, childValue]) => {
-        return createTreeNode(childValue, childKey);
-      }).filter(Boolean);
-    }
-    return node;
-  }
-  return null;
-}
-const createTreeNodeObj = (label, children = []) => {
-  return {
-    id: `node-${nodeIdCounter++}`,
-    label,
-    props: {},
-    children
-  };
-};
-exports.createTreeNodeObj = createTreeNodeObj;
-exports.objectToTree = objectToTree;