@qwik.dev/devtools 0.2.0 → 0.2.2

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

@@ -1,20 +1,22 @@
 import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
-import { component$, useStyles$, useSignal, useComputed$, useVisibleTask$, $ } from "@qwik.dev/core";
+import { component$, useSignal, useStyles$, useComputed$, useResource$, useVisibleTask$, $, Resource } 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 debug from "../../_virtual/browser.qwik.mjs";
+import { getHookStore, QrlUtils } 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 { getHighlighter } from "../../utils/shiki.qwik.mjs";
 import { getQwikState, returnQrlData } from "./data.qwik.mjs";
-import { HiChevronUpMini } from "../../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.mjs";
-import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+import { HiChevronUpMini } from "../../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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+const log = debug("qwik:devtools:renderTree");
 function getValueColorClass(node, valueText) {
   switch (node.elementType) {
     case "string":
@@ -34,6 +36,7 @@ function getValueColorClass(node, valueText) {
   }
 }
 const RenderTree = component$(() => {
+  const hookStore = useSignal(getHookStore());
   useStyles$(`
     pre.shiki {
       overflow: auto;
@@ -49,29 +52,17 @@ const RenderTree = component$(() => {
     try {
       return htmlContainer();
     } catch (error) {
-      console.error(error);
+      log("get html container failed: %O", error);
       return null;
     }
   });
-  const highlightedCodes = useSignal([]);
-  useVisibleTask$(async ({ track }) => {
+  const highlightedCodesResource = useResource$(async ({ track }) => {
     track(() => codes.value);
     if (!codes.value.length) {
-      highlightedCodes.value = [];
-      return;
+      return [];
     }
-    const highlighter = await createHighlighter({
-      themes: [
-        "nord"
-      ],
-      langs: [
-        "tsx",
-        "js",
-        "ts",
-        "jsx"
-      ]
-    });
-    highlightedCodes.value = codes.value.map((item) => {
+    const highlighter = await getHighlighter();
+    return codes.value.map((item) => {
       let lang = "tsx";
       if (item.pathId.endsWith(".js")) lang = "js";
       if (item.pathId.endsWith(".ts")) lang = "ts";
@@ -89,17 +80,17 @@ const RenderTree = component$(() => {
     });
   });
   const onNodeClick = $(async (node) => {
-    console.log("current node", node);
+    log(" current node clicked: %O", node);
     const rpc = getViteClientRpc();
     let parsed = [];
-    clearAll();
+    hookStore.value.clear();
     if (node.props?.[QRENDERFN]) {
-      formatData("render", {
+      hookStore.value.add("render", {
         data: {
           render: node.props[QRENDERFN]
         }
       });
-      const qrl = getQrlChunkName(node.props[QRENDERFN]);
+      const qrl = QrlUtils.getChunkName(node.props[QRENDERFN]);
       parsed = getQwikState(qrl);
     }
     if (Array.isArray(node.props?.[QSEQ]) && parsed.length > 0) {
@@ -108,13 +99,13 @@ const RenderTree = component$(() => {
         ...returnQrlData(node.props?.[QSEQ])
       ];
       normalizedData.forEach((item) => {
-        formatData(item.hookType, item);
+        hookStore.value.add(item.hookType, item);
       });
     }
     if (node.props?.[QPROPS]) {
       const props = unwrapStore(node.props[QPROPS]);
       Object.entries(props).forEach(([key, value]) => {
-        formatData(isListen(key) ? "listens" : "props", {
+        hookStore.value.add(isListen(key) ? "listens" : "props", {
           data: {
             [key]: value
           }
@@ -122,14 +113,15 @@ const RenderTree = component$(() => {
       });
     }
     codes.value = [];
-    const res = await rpc?.getModulesByPathIds(findAllQrl());
+    const res = await rpc?.getModulesByPathIds(hookStore.value.findAllQrlPaths()) ?? [];
+    log("getModulesByPathIds return: %O", res);
     codes.value = res.filter((item) => item.modules);
-    stateTree.value = buildTree();
-    hookFilters.value = getHookFilterList();
+    stateTree.value = hookStore.value.buildTree();
+    hookFilters.value = hookStore.value.getFilterList();
   });
   const currentTab = useSignal("state");
   return /* @__PURE__ */ jsx("div", {
-    class: "h-full w-full flex-1 overflow-hidden rounded-md border border-border bg-background",
+    class: "border-border bg-background h-full w-full flex-1 overflow-hidden rounded-md border",
     children: /* @__PURE__ */ jsxs("div", {
       class: "flex h-full w-full",
       children: [
@@ -144,22 +136,22 @@ const RenderTree = component$(() => {
           })
         }),
         /* @__PURE__ */ jsx("div", {
-          class: "border-l border-border"
+          class: "border-border border-l"
         }),
         /* @__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",
+              class: "border-border border-b",
               children: /* @__PURE__ */ jsxs("div", {
-                class: "flex space-x-4 border-b border-border",
+                class: "border-border flex space-x-4 border-b",
                 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 text-muted-foreground hover:text-foreground",
+                    class: "text-muted-foreground hover:text-foreground 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", {
@@ -167,7 +159,7 @@ const RenderTree = component$(() => {
                     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",
+                    class: "text-muted-foreground hover:text-foreground border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out",
                     children: "Code"
                   })
                 ]
@@ -177,44 +169,44 @@ const RenderTree = component$(() => {
               class: "mt-5 flex min-h-0 flex-1 flex-col",
               children: [
                 /* @__PURE__ */ jsxs("div", {
-                  class: "rounded-lg border border-border bg-card-item-bg shadow-sm",
+                  class: "border-border bg-card-item-bg rounded-lg border shadow-sm",
                   children: [
                     /* @__PURE__ */ jsxs("div", {
-                      class: "flex items-center justify-between border-b border-border px-2 py-2",
+                      class: "border-border flex items-center justify-between border-b px-2 py-2",
                       children: [
                         /* @__PURE__ */ jsx("span", {
-                          class: "text-xs font-medium text-muted-foreground",
+                          class: "text-muted-foreground text-xs font-medium",
                           children: "Hooks"
                         }),
                         /* @__PURE__ */ jsxs("div", {
                           class: "flex items-center space-x-2",
                           children: [
                             /* @__PURE__ */ jsx("button", {
-                              class: "text-xs text-primary hover:underline px-2 py-1",
+                              class: "text-primary px-2 py-1 text-xs hover:underline",
                               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));
+                                stateTree.value = hookStore.value.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
                               }),
                               children: "Select all"
                             }),
                             /* @__PURE__ */ jsx("button", {
-                              class: "text-xs text-muted-foreground hover:text-foreground hover:underline px-2 py-1",
+                              class: "text-muted-foreground hover:text-foreground px-2 py-1 text-xs hover:underline",
                               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));
+                                stateTree.value = hookStore.value.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
                               }),
                               children: "Clear"
                             }),
                             /* @__PURE__ */ jsx("button", {
                               "aria-label": "toggle hooks",
                               onClick$: $(() => hooksOpen.value = !hooksOpen.value),
-                              class: "rounded p-1 text-muted-foreground hover:text-foreground",
+                              class: "text-muted-foreground hover:text-foreground rounded p-1",
                               children: /* @__PURE__ */ jsx(HiChevronUpMini, {
                                 class: `h-4 w-4 transition-transform duration-200 ${hooksOpen.value ? "rotate-180" : "-rotate-90"}`
                               })
@@ -224,7 +216,7 @@ const RenderTree = component$(() => {
                       ]
                     }),
                     /* @__PURE__ */ 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",
+                      class: "grid grid-cols-2 gap-x-6 gap-y-3 overflow-hidden px-3 py-2 text-sm sm:grid-cols-3 lg:grid-cols-4",
                       style: {
                         maxHeight: hooksOpen.value ? "800px" : "0px",
                         opacity: hooksOpen.value ? "1" : "0",
@@ -234,7 +226,7 @@ const RenderTree = component$(() => {
                         class: "flex items-center",
                         children: [
                           /* @__PURE__ */ 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]",
+                            class: "border-border focus:ring-primary-active h-4 w-4 rounded-full focus:ring-offset-0 dark:border-[#374151] dark:bg-[#1F2937]",
                             style: {
                               accentColor: "var(--color-primary-active)"
                             },
@@ -243,7 +235,7 @@ const RenderTree = component$(() => {
                             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));
+                              stateTree.value = hookStore.value.buildTree().filter((item2) => hookFilters.value.some((hook) => hook.key === item2?.label && hook.display));
                             }
                           }),
                           /* @__PURE__ */ jsx("span", {
@@ -256,7 +248,7 @@ const RenderTree = component$(() => {
                   ]
                 }),
                 /* @__PURE__ */ jsx("div", {
-                  class: "min-h-0 flex-1 overflow-y-auto p-2 mt-4",
+                  class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2",
                   children: /* @__PURE__ */ jsx(Tree, {
                     data: stateTree,
                     gap: 10,
@@ -302,23 +294,30 @@ const RenderTree = component$(() => {
               ]
             }),
             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-card-item-bg p-4 shadow-sm hover:bg-card-item-hover-bg transition-colors",
-                    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] || ""
-                      })
-                    ]
-                  })
-                });
+              class: "border-border mt-5 min-h-0 flex-1 overflow-y-auto rounded-lg border p-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(Resource, {
+                value: highlightedCodesResource,
+                onPending: () => /* @__PURE__ */ jsx("div", {
+                  class: "text-muted-foreground p-2 text-sm",
+                  children: "Loading code highlights…"
+                }),
+                onResolved: (highlighted) => /* @__PURE__ */ jsx(Fragment, {
+                  children: codes.value.map((item, idx) => /* @__PURE__ */ jsx(Fragment, {
+                    children: /* @__PURE__ */ jsxs("div", {
+                      class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg mb-4 rounded-xl border p-4 shadow-sm transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx("div", {
+                          class: "text-primary mb-2 break-all text-base font-semibold",
+                          children: item.pathId
+                        }),
+                        /* @__PURE__ */ jsx("pre", {
+                          class: "overflow-hidden",
+                          dangerouslySetInnerHTML: highlighted[idx] || ""
+                        })
+                      ]
+                    })
+                  }))
+                })
               })
             })
           ]

package/dist/ui/features/RenderTree/TreeBuilder.qwik.mjs

@@ -0,0 +1,181 @@
+import { isValue } from "../../utils/type.qwik.mjs";
+class TreeBuilder {
+  constructor() {
+    this.idCounter = 0;
+  }
+  /**
+  * Generate a unique ID for a tree node
+  */
+  generateId() {
+    return `node-${this.idCounter++}`;
+  }
+  /**
+  * Reset the ID counter (useful for testing)
+  */
+  resetIdCounter() {
+    this.idCounter = 0;
+  }
+  /**
+  * Create a group node (parent node with children)
+  */
+  createGroupNode(label, children = []) {
+    return {
+      id: this.generateId(),
+      label,
+      props: {},
+      children
+    };
+  }
+  /**
+  * Convert any object to TreeNode array
+  */
+  objectToTree(obj, parentPath = "") {
+    if (!obj || typeof obj !== "object") {
+      return [];
+    }
+    if (Array.isArray(obj)) {
+      return this.arrayToTree(obj, parentPath);
+    }
+    return this.objectPropertiesToTree(obj, parentPath);
+  }
+  /**
+  * Convert array to TreeNode array
+  */
+  arrayToTree(arr, parentPath) {
+    return arr.map((item, index) => {
+      const path = parentPath ? `${parentPath}[${index}]` : `[${index}]`;
+      return this.createNode(item, `[${index}]`, path);
+    }).filter((node) => node !== null);
+  }
+  /**
+  * Convert object properties to TreeNode array
+  */
+  objectPropertiesToTree(obj, parentPath) {
+    const result = [];
+    for (const [key, value] of Object.entries(obj)) {
+      const path = parentPath ? `${parentPath}.${key}` : key;
+      const node = this.createNode(value, key, path);
+      if (node) {
+        result.push(node);
+      }
+    }
+    return result;
+  }
+  /**
+  * Create a single TreeNode from a value
+  */
+  createNode(value, key, path) {
+    if (value === null || value === void 0) {
+      return this.createPrimitiveNode(key, value, "null");
+    }
+    const primitiveNode = this.tryCreatePrimitiveNode(key, value);
+    if (primitiveNode) {
+      return primitiveNode;
+    }
+    if (Array.isArray(value)) {
+      return this.createArrayNode(key, value, path);
+    }
+    if (typeof value === "object") {
+      return this.createObjectNode(key, value, path);
+    }
+    return null;
+  }
+  /**
+  * Try to create a primitive node (boolean, number, string, function)
+  */
+  tryCreatePrimitiveNode(key, value) {
+    switch (typeof value) {
+      case "boolean":
+        return this.createPrimitiveNode(key, value, "boolean");
+      case "number":
+        return this.createPrimitiveNode(key, value, "number");
+      case "string":
+        return this.createPrimitiveNode(key, `"${value}"`, "string");
+      case "function":
+        return this.createFunctionNode(key, value);
+      default:
+        return null;
+    }
+  }
+  /**
+  * Create a node for primitive values
+  */
+  createPrimitiveNode(key, value, elementType) {
+    return {
+      id: this.generateId(),
+      label: `${key}: ${value}`,
+      props: {},
+      elementType
+    };
+  }
+  /**
+  * Create a node for function values
+  */
+  createFunctionNode(key, fn) {
+    const fnName = fn.name ? `ƒ ${fn.name}()` : "ƒ()";
+    return {
+      id: this.generateId(),
+      label: `${key}: ${fnName}`,
+      props: {},
+      elementType: "function"
+    };
+  }
+  /**
+  * Create a node for array values
+  */
+  createArrayNode(key, arr, path) {
+    const children = arr.map((item, index) => {
+      const childPath = `${path}[${index}]`;
+      return this.createNode(item, index.toString(), childPath);
+    }).filter((node) => node !== null);
+    return {
+      id: this.generateId(),
+      label: `${key}: Array[${arr.length}]`,
+      props: {},
+      elementType: "array",
+      children
+    };
+  }
+  /**
+  * Create a node for object values
+  */
+  createObjectNode(key, obj, path) {
+    const constructorName = obj.constructor?.name;
+    const isPlainObject = constructorName === "Object";
+    if (!isPlainObject) {
+      return this.createClassInstanceNode(key, obj, constructorName);
+    }
+    const keys = Object.keys(obj);
+    const children = Object.entries(obj).map(([childKey, childValue]) => {
+      const childPath = `${path}.${childKey}`;
+      return this.createNode(childValue, childKey, childPath);
+    }).filter((node) => node !== null);
+    return {
+      id: this.generateId(),
+      label: `${key}: Object {${keys.length}}`,
+      props: {},
+      elementType: "object",
+      children
+    };
+  }
+  /**
+  * Create a node for class instances (non-plain objects)
+  */
+  createClassInstanceNode(key, obj, className) {
+    const node = {
+      id: this.generateId(),
+      label: `${key}: Class {${className}}`,
+      props: {},
+      elementType: "object"
+    };
+    if (isValue(obj)) {
+      node.children = [
+        this.createNode(obj.value, "value", "value")
+      ].filter((n) => n !== null);
+    }
+    return node;
+  }
+}
+export {
+  TreeBuilder
+};

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

@@ -1,28 +1,39 @@
 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 { QRL_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) => {
+function isUserDefinedHook(seq) {
+  const qrl = seq[QRL_KEY] ?? seq[COMPUTED_QRL_KEY];
+  const chunkPath = qrl?.$chunk$ ?? "";
+  return !chunkPath.includes(INNER_USE_HOOK);
+}
+function getQwikState(qrlChunkName) {
+  const globalState = window.QWIK_DEVTOOLS_GLOBAL_STATE ?? {};
+  const matchingKey = Object.keys(globalState).find((key) => key.endsWith(qrlChunkName));
+  if (!matchingKey) return [];
+  const componentState = globalState[matchingKey];
+  if (!componentState) return [];
+  const entries = componentState.hooks ?? [];
+  return entries.filter((item) => item.data !== void 0);
+}
+function getHookTypeFromChunk(chunkPath) {
+  return chunkPath.includes("useTask") ? "useTask" : "useVisibleTask";
+}
+function transformQrlSequenceData(seqs) {
+  return seqs.filter(isUserDefinedHook).filter((item) => item[QRL_KEY]).map((item) => {
+    const qrl = item[QRL_KEY];
+    const chunkPath = qrl.$chunk$ ?? "";
+    const hookType = getHookTypeFromChunk(chunkPath);
     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"
+      data: qrl,
+      hookType,
+      variableName: hookType
     };
   });
-};
+}
+const returnQrlData = transformQrlSequenceData;
 export {
   getQwikState,
-  returnQrlData
+  returnQrlData,
+  transformQrlSequenceData
 };