@qwik.dev/devtools 0.2.0 → 0.2.1

package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs

@@ -0,0 +1,170 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, $ } from "@qwik.dev/core";
+import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
+const DependencyCard = component$(({ pkg }) => {
+  const handleAuthorClick = $(() => {
+    if (pkg.author?.url) {
+      window.open(pkg.author.url, "_blank");
+    } else if (pkg.author?.email) {
+      window.open(`mailto:${pkg.author.email}`, "_blank");
+    }
+  });
+  const handlePackageClick = $(() => {
+    if (pkg.npmUrl) {
+      window.open(pkg.npmUrl, "_blank");
+    }
+  });
+  const handleHomepageClick = $(() => {
+    if (pkg.homepage) {
+      window.open(pkg.homepage, "_blank");
+    }
+  });
+  const handleRepositoryClick = $(() => {
+    if (pkg.repository) {
+      window.open(pkg.repository, "_blank");
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "bg-card border-border/50 hover:border-primary/30 hover:shadow-primary/5 group relative rounded-xl border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "from-primary/0 via-primary/0 to-primary/5 pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "relative flex flex-col gap-4",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-start gap-4",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "from-primary/10 via-primary/20 to-primary/30 border-primary/20 group-hover:shadow-primary/20 flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border bg-gradient-to-br shadow-md transition-all duration-300 hover:rotate-3 hover:scale-110",
+                onClick$: handlePackageClick,
+                title: `View ${pkg.name} on npm`,
+                children: /* @__PURE__ */ jsx(PackageIcon, {
+                  packageName: pkg.name,
+                  iconUrl: pkg.iconUrl
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "min-w-0 flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    class: "mb-1.5 cursor-pointer truncate text-base font-bold text-foreground transition-colors hover:text-primary",
+                    onClick$: handlePackageClick,
+                    title: pkg.name,
+                    children: pkg.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    class: "bg-primary/10 border-primary/20 inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium text-primary",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", {
+                        class: "h-3 w-3",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+                        })
+                      }),
+                      "v",
+                      pkg.version
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("p", {
+            class: "line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed text-muted-foreground",
+            children: pkg.description || "No description available"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "border-border border-t"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between gap-3",
+            children: [
+              pkg.author ? /* @__PURE__ */ jsxs("div", {
+                class: "flex min-w-0 flex-1 items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "from-accent/20 to-accent/40 border-accent/30 flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border bg-gradient-to-br transition-transform hover:scale-110",
+                    onClick$: handleAuthorClick,
+                    title: `Contact ${pkg.author.name}`,
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "text-[10px] font-semibold text-accent",
+                      children: pkg.author.name.split(" ").map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase()
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "truncate text-xs text-muted-foreground",
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "font-medium text-foreground",
+                      children: pkg.author.name
+                    })
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("div", {
+                class: "flex-1"
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex items-center gap-1.5",
+                children: [
+                  pkg.homepage && /* @__PURE__ */ jsx("button", {
+                    onClick$: handleHomepageClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "Homepage",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                      })
+                    })
+                  }),
+                  pkg.repository && /* @__PURE__ */ jsx("button", {
+                    onClick$: handleRepositoryClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "Repository",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                      })
+                    })
+                  }),
+                  pkg.npmUrl && /* @__PURE__ */ jsx("button", {
+                    onClick$: handlePackageClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "npm",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        d: "M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"
+                      })
+                    })
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  DependencyCard
+};

package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, $ } from "@qwik.dev/core";
+const PackageIcon = component$(({ packageName, iconUrl }) => {
+  const iconError = useSignal(false);
+  const handleIconError = $(() => {
+    iconError.value = true;
+  });
+  const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
+  if (!iconUrl || iconError.value) {
+    return /* @__PURE__ */ jsx("span", {
+      class: "text-sm font-bold text-primary",
+      children: fallbackInitial
+    });
+  }
+  return /* @__PURE__ */ jsx("img", {
+    src: iconUrl,
+    alt: `${packageName} icon`,
+    class: "h-6 w-6 rounded",
+    width: "24",
+    height: "24",
+    onError$: handleIconError,
+    loading: "lazy"
+  });
+});
+export {
+  PackageIcon
+};

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,7 @@ 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 { 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) {
@@ -53,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: [
@@ -71,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";
@@ -123,6 +121,7 @@ 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();
@@ -159,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 text-muted-foreground hover:text-foreground",
+                    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", {
@@ -167,7 +166,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: "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"
                   })
                 ]
@@ -190,7 +189,7 @@ const RenderTree = component$(() => {
                           class: "flex items-center space-x-2",
                           children: [
                             /* @__PURE__ */ jsx("button", {
-                              class: "text-xs text-primary hover:underline px-2 py-1",
+                              class: "px-2 py-1 text-xs text-primary hover:underline",
                               onClick$: $(() => {
                                 hookFilters.value = hookFilters.value.map((item) => {
                                   item.display = true;
@@ -201,7 +200,7 @@ const RenderTree = component$(() => {
                               children: "Select all"
                             }),
                             /* @__PURE__ */ jsx("button", {
-                              class: "text-xs text-muted-foreground hover:text-foreground hover:underline px-2 py-1",
+                              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;
@@ -224,7 +223,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 +233,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: "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)"
                             },
@@ -256,7 +255,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,
@@ -303,22 +302,29 @@ 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] || ""
-                      })
-                    ]
-                  })
-                });
+              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) => {