@qwik.dev/devtools 0.1.2 → 0.2.1

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
-import { component$, useStyles$, useSignal, useComputed$, useVisibleTask$, $ } from "@qwik.dev/core";
+import { component$, useStyles$, useSignal, 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";
@@ -13,7 +13,26 @@ import { QRENDERFN, QSEQ, QPROPS } from "../../packages/kit/src/constants.qwik.m
 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 { 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";
 import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+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 = component$(() => {
   useStyles$(`
     pre.shiki {
@@ -25,6 +44,7 @@ const RenderTree = component$(() => {
   const data = useSignal([]);
   const stateTree = useSignal([]);
   const hookFilters = useSignal([]);
+  const hooksOpen = useSignal(true);
   const qwikContainer = useComputed$(() => {
     try {
       return htmlContainer();
@@ -33,12 +53,10 @@ const RenderTree = component$(() => {
       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: [
@@ -51,7 +69,7 @@ const RenderTree = component$(() => {
         "jsx"
       ]
     });
-    highlightedCodes.value = codes.value.map((item) => {
+    return codes.value.map((item) => {
       let lang = "tsx";
       if (item.pathId.endsWith(".js")) lang = "js";
       if (item.pathId.endsWith(".ts")) lang = "ts";
@@ -103,13 +121,14 @@ const RenderTree = component$(() => {
     }
     codes.value = [];
     const res = await rpc?.getModulesByPathIds(findAllQrl());
+    console.log("res", res);
     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",
+    class: "h-full w-full flex-1 overflow-hidden rounded-md border border-border bg-background",
     children: /* @__PURE__ */ jsxs("div", {
       class: "flex h-full w-full",
       children: [
@@ -139,7 +158,7 @@ const RenderTree = component$(() => {
                     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",
+                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium text-muted-foreground transition-all duration-300 ease-in-out hover:text-foreground",
                     children: "State"
                   }),
                   /* @__PURE__ */ jsx("button", {
@@ -147,65 +166,96 @@ 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",
+                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium text-muted-foreground transition-all duration-300 ease-in-out hover:text-foreground",
                     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",
+              class: "mt-5 flex min-h-0 flex-1 flex-col",
               children: [
                 /* @__PURE__ */ jsxs("div", {
-                  class: "flex flex-wrap items-center gap-2 border-b border-border px-2 py-2",
+                  class: "rounded-lg border border-border bg-card-item-bg shadow-sm",
                   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",
+                    /* @__PURE__ */ jsxs("div", {
+                      class: "flex items-center justify-between border-b border-border px-2 py-2",
                       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
+                          class: "text-xs font-medium text-muted-foreground",
+                          children: "Hooks"
+                        }),
+                        /* @__PURE__ */ jsxs("div", {
+                          class: "flex items-center space-x-2",
+                          children: [
+                            /* @__PURE__ */ jsx("button", {
+                              class: "px-2 py-1 text-xs text-primary 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));
+                              }),
+                              children: "Select all"
+                            }),
+                            /* @__PURE__ */ jsx("button", {
+                              class: "px-2 py-1 text-xs text-muted-foreground hover:text-foreground 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));
+                              }),
+                              children: "Clear"
+                            }),
+                            /* @__PURE__ */ jsx("button", {
+                              "aria-label": "toggle hooks",
+                              onClick$: $(() => hooksOpen.value = !hooksOpen.value),
+                              class: "rounded p-1 text-muted-foreground hover:text-foreground",
+                              children: /* @__PURE__ */ jsx(HiChevronUpMini, {
+                                class: `h-4 w-4 transition-transform duration-200 ${hooksOpen.value ? "rotate-180" : "-rotate-90"}`
+                              })
+                            })
+                          ]
                         })
                       ]
-                    }, 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: "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",
+                        transition: "max-height 200ms ease, opacity 200ms ease"
+                      },
+                      children: hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxs("label", {
+                        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:border-[#374151] dark:bg-[#1F2937]",
+                            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 = buildTree().filter((item2) => hookFilters.value.some((hook) => hook.key === item2?.label && hook.display));
+                            }
+                          }),
+                          /* @__PURE__ */ jsx("span", {
+                            class: "ml-2 select-none",
+                            children: item.key
+                          })
+                        ]
+                      }, idx))
                     })
                   ]
                 }),
                 /* @__PURE__ */ jsx("div", {
-                  class: "min-h-0 flex-1 overflow-y-auto p-2",
+                  class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2",
                   children: /* @__PURE__ */ jsx(Tree, {
                     data: stateTree,
                     gap: 10,
@@ -214,23 +264,35 @@ const RenderTree = component$(() => {
                     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", {
+                      const parts = label.split(":");
+                      if (node.children && parts.length === 1) {
+                        return /* @__PURE__ */ 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__ */ jsxs(Fragment, {
+                          children: [
+                            /* @__PURE__ */ jsx("span", {
+                              class: "text-blue-400",
+                              children: key
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                              class: "text-foreground/70",
+                              children: " : "
+                            }),
+                            /* @__PURE__ */ jsx("span", {
+                              class: valueClass,
+                              children: value
+                            })
+                          ]
+                        });
+                      }
+                      return /* @__PURE__ */ jsx("span", {
                         children: label
                       });
                     })
@@ -239,23 +301,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-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] || ""
-                      })
-                    ]
-                  })
-                });
+              class: "mt-5 min-h-0 flex-1 overflow-y-auto rounded-lg border border-border p-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(Resource, {
+                value: highlightedCodesResource,
+                onPending: () => /* @__PURE__ */ jsx("div", {
+                  class: "p-2 text-sm text-muted-foreground",
+                  children: "Loading code highlights…"
+                }),
+                onResolved: (highlighted) => /* @__PURE__ */ jsx(Fragment, {
+                  children: codes.value.map((item, idx) => /* @__PURE__ */ jsx(Fragment, {
+                    children: /* @__PURE__ */ jsxs("div", {
+                      class: "mb-4 rounded-xl border border-border bg-card-item-bg p-4 shadow-sm transition-colors hover:bg-card-item-hover-bg",
+                      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: highlighted[idx] || ""
+                        })
+                      ]
+                    })
+                  }))
+                })
               })
             })
           ]

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

@@ -5,11 +5,8 @@ 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 stateKeyPath = Object.keys(window.QWIK_DEVTOOLS_GLOBAL_STATE || {})?.find((key) => key.endsWith(qrl));
+  return stateKeyPath ? window.QWIK_DEVTOOLS_GLOBAL_STATE?.[stateKeyPath]?.filter((item) => !!item.data) || [] : [];
 };
 const returnQrlData = (seqs) => {
   return seqs.filter(isInnerHook).filter((item) => item[QRL_KEY]).map((item) => {

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

@@ -225,6 +225,9 @@ function findAllQrl() {
   return result.flat(2).filter(Boolean);
 }
 function getQrlPath(qrl) {
+  if (qrl?.dev) {
+    return qrl?.dev.filename;
+  }
   return qrl?.[CHUNK_KEY];
 }
 function getQrlChunkName(qrl) {