@qwik.dev/devtools 0.1.2 → 0.2.0

package/dist/ui/features/RenderTree/RenderTree.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.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";
+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();
@@ -109,7 +129,7 @@ const RenderTree = component$(() => {
   });
   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 +159,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 transition-all duration-300 ease-in-out text-muted-foreground hover:text-foreground",
                     children: "State"
                   }),
                   /* @__PURE__ */ jsx("button", {
@@ -147,65 +167,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 transition-all duration-300 ease-in-out text-muted-foreground 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: "text-xs text-primary hover:underline px-2 py-1",
+                              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: "text-xs text-muted-foreground hover:text-foreground hover:underline px-2 py-1",
+                              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 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__ */ 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: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 = 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: "min-h-0 flex-1 overflow-y-auto p-2 mt-4",
                   children: /* @__PURE__ */ jsx(Tree, {
                     data: stateTree,
                     gap: 10,
@@ -214,23 +265,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,11 +302,11 @@ 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",
+              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",
+                    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",

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

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

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) {

package/dist/ui/global.css.qwik.cjs

@@ -513,8 +513,8 @@ video {
 .mb-4 {
   margin-bottom: 1rem;
 }
-.ml-auto {
-  margin-left: auto;
+.ml-2 {
+  margin-left: 0.5rem;
 }
 .mr-2 {
   margin-right: 0.5rem;
@@ -522,6 +522,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -540,6 +543,9 @@ video {
 .flex {
   display: flex;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .grid {
   display: grid;
 }
@@ -619,6 +625,10 @@ video {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-rotate-90 {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -650,15 +660,15 @@ video {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .flex-col {
   flex-direction: column;
 }
-.flex-wrap {
-  flex-wrap: wrap;
-}
 .place-items-center {
   place-items: center;
 }
@@ -686,10 +696,17 @@ video {
 .gap-5 {
   gap: 1.25rem;
 }
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
@@ -778,6 +795,10 @@ video {
 .border-current {
   border-color: currentColor;
 }
+.border-emerald-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
+}
 .border-b-transparent {
   border-bottom-color: transparent;
 }
@@ -796,15 +817,13 @@ video {
 .bg-card-item-bg {
   background-color: var(--color-card-item-bg);
 }
+.bg-emerald-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
+}
 .bg-input {
   background-color: var(--color-input);
 }
-.bg-primary {
-  background-color: var(--color-primary);
-}
-.bg-transparent {
-  background-color: transparent;
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -834,6 +853,10 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -887,9 +910,6 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.font-bold {
-  font-weight: 700;
-}
 .font-medium {
   font-weight: 500;
 }
@@ -899,27 +919,47 @@ video {
 .text-accent {
   color: var(--color-accent);
 }
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+}
 .text-foreground {
   color: var(--color-foreground);
 }
-.text-gray-700 {
+.text-green-400 {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
 .text-muted-foreground {
   color: var(--color-muted-foreground);
 }
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
+}
 .text-primary {
   color: var(--color-primary);
 }
-.text-red-300 {
+.text-purple-400 {
   --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
 }
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
+.text-violet-400 {
+  --tw-text-opacity: 1;
+  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -986,9 +1026,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-150 {
-  transition-duration: 150ms;
-}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1130,6 +1167,10 @@ video {
   color: var(--color-foreground);
 }
 
+.hover\\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .hover\\:opacity-60:hover {
   opacity: 0.6;
 }
@@ -1138,6 +1179,14 @@ video {
   border-color: var(--color-ring);
 }
 
+.focus\\:ring-primary-active:focus {
+  --tw-ring-color: var(--color-primary-active);
+}
+
+.focus\\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
 .group:hover .group-hover\\:scale-110 {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -1150,20 +1199,41 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.dark\\:text-red-500:is(html[data-theme="dark"] *) {
+.dark\\:border-\\[\\#374151\\]:is(html[data-theme="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
+.dark\\:border-emerald-700\\/40:is(html[data-theme="dark"] *) {
+  border-color: rgb(4 120 87 / 0.4);
+}
+
+.dark\\:bg-\\[\\#1F2937\\]:is(html[data-theme="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+
+.dark\\:bg-emerald-900\\/30:is(html[data-theme="dark"] *) {
+  background-color: rgb(6 78 59 / 0.3);
+}
+
+.dark\\:text-emerald-300:is(html[data-theme="dark"] *) {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
 }
 
-.dark\\:text-white:is(html[data-theme="dark"] *) {
+.dark\\:text-violet-300:is(html[data-theme="dark"] *) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
 }
 
 @media (min-width: 640px) {
   .sm\\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .sm\\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 768px) {
@@ -1179,6 +1249,9 @@ video {
   .lg\\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .lg\\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 `;
 module.exports = globalCss;