@qwik.dev/devtools 0.1.1 → 0.1.2

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

@@ -0,0 +1,269 @@
+"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 bundleFull = require("../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.cjs");
+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 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",
+    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",
+                    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",
+                    children: "Code"
+                  })
+                ]
+              })
+            }),
+            currentTab.value === "state" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: "mt-5 flex min-h-0 flex-1 flex-col rounded-lg border border-border bg-card-item-bg shadow-sm",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  class: "flex flex-wrap items-center gap-2 border-b border-border px-2 py-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      class: "text-xs text-muted-foreground",
+                      children: "Hooks:"
+                    }),
+                    hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
+                      class: "flex items-center space-x-1 rounded border border-border px-2 py-1 text-xs",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("input", {
+                          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", {
+                          children: item.key
+                        })
+                      ]
+                    }, idx)),
+                    /* @__PURE__ */ jsxRuntime.jsx("button", {
+                      class: "ml-auto rounded border border-border px-2 py-1 text-xs",
+                      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: "rounded border border-border px-2 py-1 text-xs",
+                      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("div", {
+                  class: "min-h-0 flex-1 overflow-y-auto p-2",
+                  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 isProperty = label.split(":");
+                      return isProperty.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", {
+                            class: "text-red-300 dark:text-red-500",
+                            children: isProperty[0]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                            class: "text-gray-700 dark:text-white",
+                            children: [
+                              " ",
+                              ": ",
+                              isProperty[1]
+                            ]
+                          })
+                        ]
+                      }) : /* @__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-background p-4 shadow-lg",
+                    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/RenderTree.qwik.mjs

@@ -0,0 +1,269 @@
+import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, useComputed$, useVisibleTask$, $ } from "@qwik.dev/core";
+import { Tree } from "../../components/Tree/Tree.qwik.mjs";
+import { vnode_toObject } from "../../components/Tree/filterVnode.qwik.mjs";
+import { htmlContainer } from "../../utils/location.qwik.mjs";
+import { ISDEVTOOL } from "../../components/Tree/type.qwik.mjs";
+import { removeNodeFromTree } from "../../components/Tree/vnode.qwik.mjs";
+import { isListen } from "../../utils/type.qwik.mjs";
+import { clearAll, formatData, getQrlChunkName, findAllQrl, buildTree, getHookFilterList } from "./formatTreeData.qwik.mjs";
+import { unwrapStore } from "@qwik.dev/core/internal";
+import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
+import { QRENDERFN, QSEQ, QPROPS } from "../../packages/kit/src/constants.qwik.mjs";
+import { getViteClientRpc } from "../../packages/kit/src/context.qwik.mjs";
+import "../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.mjs";
+import { getQwikState, returnQrlData } from "./data.qwik.mjs";
+import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+const RenderTree = component$(() => {
+  useStyles$(`
+    pre.shiki {
+      overflow: auto;
+      padding: 10px;
+    }
+  `);
+  const codes = useSignal([]);
+  const data = useSignal([]);
+  const stateTree = useSignal([]);
+  const hookFilters = useSignal([]);
+  const qwikContainer = useComputed$(() => {
+    try {
+      return htmlContainer();
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  });
+  const highlightedCodes = useSignal([]);
+  useVisibleTask$(async ({ track }) => {
+    track(() => codes.value);
+    if (!codes.value.length) {
+      highlightedCodes.value = [];
+      return;
+    }
+    const highlighter = await 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"
+      }) : "";
+    });
+  });
+  useVisibleTask$(() => {
+    data.value = removeNodeFromTree(vnode_toObject(qwikContainer.value.rootVNode), (node) => {
+      return node.name === ISDEVTOOL;
+    });
+  });
+  const onNodeClick = $(async (node) => {
+    console.log("current node", node);
+    const rpc = getViteClientRpc();
+    let parsed = [];
+    clearAll();
+    if (node.props?.[QRENDERFN]) {
+      formatData("render", {
+        data: {
+          render: node.props[QRENDERFN]
+        }
+      });
+      const qrl = getQrlChunkName(node.props[QRENDERFN]);
+      parsed = getQwikState(qrl);
+    }
+    if (Array.isArray(node.props?.[QSEQ]) && parsed.length > 0) {
+      const normalizedData = [
+        ...parsed,
+        ...returnQrlData(node.props?.[QSEQ])
+      ];
+      normalizedData.forEach((item) => {
+        formatData(item.hookType, item);
+      });
+    }
+    if (node.props?.[QPROPS]) {
+      const props = unwrapStore(node.props[QPROPS]);
+      Object.entries(props).forEach(([key, value]) => {
+        formatData(isListen(key) ? "listens" : "props", {
+          data: {
+            [key]: value
+          }
+        });
+      });
+    }
+    codes.value = [];
+    const res = await rpc?.getModulesByPathIds(findAllQrl());
+    codes.value = res.filter((item) => item.modules);
+    stateTree.value = buildTree();
+    hookFilters.value = getHookFilterList();
+  });
+  const currentTab = useSignal("state");
+  return /* @__PURE__ */ jsx("div", {
+    class: "h-full w-full flex-1 overflow-hidden rounded-md border  border-border",
+    children: /* @__PURE__ */ jsxs("div", {
+      class: "flex h-full w-full",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          class: "w-1/2 overflow-hidden p-4",
+          style: {
+            minWidth: "400px"
+          },
+          children: /* @__PURE__ */ jsx(Tree, {
+            data,
+            onNodeClick
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "border-l border-border"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: "border-b border-border",
+              children: /* @__PURE__ */ jsxs("div", {
+                class: "flex space-x-4 border-b border-border",
+                children: [
+                  /* @__PURE__ */ 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",
+                    children: "State"
+                  }),
+                  /* @__PURE__ */ 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",
+                    children: "Code"
+                  })
+                ]
+              })
+            }),
+            currentTab.value === "state" && /* @__PURE__ */ jsxs("div", {
+              class: "mt-5 flex min-h-0 flex-1 flex-col rounded-lg border border-border bg-card-item-bg shadow-sm",
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  class: "flex flex-wrap items-center gap-2 border-b border-border px-2 py-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      class: "text-xs text-muted-foreground",
+                      children: "Hooks:"
+                    }),
+                    hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxs("label", {
+                      class: "flex items-center space-x-1 rounded border border-border px-2 py-1 text-xs",
+                      children: [
+                        /* @__PURE__ */ jsx("input", {
+                          type: "checkbox",
+                          checked: item.display,
+                          onChange$: (ev) => {
+                            const target = ev.target;
+                            hookFilters.value[idx].display = target.checked;
+                            stateTree.value = buildTree().filter((item2) => hookFilters.value.some((hook) => hook.key === item2?.label && hook.display));
+                          }
+                        }),
+                        /* @__PURE__ */ jsx("span", {
+                          children: item.key
+                        })
+                      ]
+                    }, idx)),
+                    /* @__PURE__ */ jsx("button", {
+                      class: "ml-auto rounded border border-border px-2 py-1 text-xs",
+                      onClick$: $(() => {
+                        hookFilters.value = hookFilters.value.map((item) => {
+                          item.display = true;
+                          return item;
+                        });
+                        stateTree.value = buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
+                      }),
+                      children: "Select all"
+                    }),
+                    /* @__PURE__ */ jsx("button", {
+                      class: "rounded border border-border px-2 py-1 text-xs",
+                      onClick$: $(() => {
+                        hookFilters.value = hookFilters.value.map((item) => {
+                          item.display = false;
+                          return item;
+                        });
+                        stateTree.value = buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
+                      }),
+                      children: "Clear"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx("div", {
+                  class: "min-h-0 flex-1 overflow-y-auto p-2",
+                  children: /* @__PURE__ */ jsx(Tree, {
+                    data: stateTree,
+                    gap: 10,
+                    animate: true,
+                    animationDuration: 200,
+                    isHover: true,
+                    renderNode: $((node) => {
+                      const label = node.label || node.name || "";
+                      const isProperty = label.split(":");
+                      return isProperty.length > 1 ? /* @__PURE__ */ jsxs(Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsx("span", {
+                            class: "text-red-300 dark:text-red-500",
+                            children: isProperty[0]
+                          }),
+                          /* @__PURE__ */ jsxs("span", {
+                            class: "text-gray-700 dark:text-white",
+                            children: [
+                              " ",
+                              ": ",
+                              isProperty[1]
+                            ]
+                          })
+                        ]
+                      }) : /* @__PURE__ */ jsx("span", {
+                        children: label
+                      });
+                    })
+                  })
+                })
+              ]
+            }),
+            currentTab.value === "code" && /* @__PURE__ */ 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__ */ jsx(Fragment, {
+                  children: /* @__PURE__ */ jsxs("div", {
+                    class: "mb-4 rounded-xl border border-border bg-background p-4 shadow-lg",
+                    children: [
+                      /* @__PURE__ */ jsx("div", {
+                        class: "mb-2 break-all text-base font-semibold text-primary",
+                        children: item.pathId
+                      }),
+                      /* @__PURE__ */ jsx("pre", {
+                        class: "overflow-hidden",
+                        dangerouslySetInnerHTML: highlightedCodes.value[idx] || ""
+                      })
+                    ]
+                  })
+                });
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+export {
+  RenderTree
+};

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

@@ -0,0 +1,28 @@
+"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/data.qwik.mjs

@@ -0,0 +1,28 @@
+import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
+import { QRL_KEY, CHUNK_KEY, COMPUTED_QRL_KEY, INNER_USE_HOOK } from "../../packages/kit/src/constants.qwik.mjs";
+import "../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.mjs";
+const isInnerHook = (seq) => {
+  return !(seq[QRL_KEY] || seq[COMPUTED_QRL_KEY])?.[CHUNK_KEY].includes(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[QRL_KEY]).map((item) => {
+    return {
+      category: "expressionStatement",
+      data: item[QRL_KEY],
+      hookType: item[QRL_KEY]?.[CHUNK_KEY]?.includes("useTask") ? "useTask" : "useVisibleTask",
+      returnType: "undefined",
+      variableName: item[QRL_KEY]?.[CHUNK_KEY]?.includes("useTask") ? "useTask" : "useVisibleTask"
+    };
+  });
+};
+export {
+  getQwikState,
+  returnQrlData
+};