@qwik.dev/devtools 0.2.8 → 0.3.0-beta.3

package/dist/ui/packages/devtools/ui/src/features/HookTree/hookTreeHelpers.qwik.mjs

@@ -0,0 +1,184 @@
+function toTreeNodes(vnodes) {
+  return vnodes.map((v) => ({
+    id: v.id,
+    name: v.name,
+    label: v.name,
+    props: v.props,
+    children: v.children ? toTreeNodes(v.children) : void 0
+  }));
+}
+function treeIdFingerprint(nodes) {
+  const ids = [];
+  const walk = (list) => {
+    for (const n of list) {
+      ids.push(n.id);
+      if (n.children) {
+        walk(n.children);
+      }
+    }
+  };
+  walk(nodes);
+  return ids.join(",");
+}
+function findNodeById(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function findNodeByDomAttr(nodes, qId, colonId) {
+  for (const node of nodes) {
+    const props = node.props;
+    if (qId && props?.["q:id"] === qId) {
+      return node;
+    }
+    if (colonId && props?.__colonId === colonId) {
+      return node;
+    }
+    if (node.children) {
+      const found = findNodeByDomAttr(node.children, qId, colonId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+let _nodeId = 0;
+function resetNodeId() {
+  _nodeId = 0;
+}
+function nextId() {
+  return `detail-${_nodeId++}`;
+}
+function getElementType(val) {
+  if (val === null) {
+    return "null";
+  }
+  if (Array.isArray(val)) {
+    return "array";
+  }
+  const t = typeof val;
+  if (t === "boolean") {
+    return "boolean";
+  }
+  if (t === "number") {
+    return "number";
+  }
+  if (t === "string") {
+    return "string";
+  }
+  if (t === "function") {
+    return "function";
+  }
+  if (t === "object") {
+    return "object";
+  }
+  return "string";
+}
+function isSerializedFunction(val) {
+  return typeof val === "object" && val !== null && val.__type === "function";
+}
+function valueToTree(key, val, depth) {
+  if (depth > 8) {
+    return null;
+  }
+  if (val === null || val === void 0) {
+    return {
+      id: nextId(),
+      label: `${key}: ${val}`,
+      elementType: "null"
+    };
+  }
+  if (isSerializedFunction(val)) {
+    const name = val.__name || "anonymous";
+    return {
+      id: nextId(),
+      label: `${key}: fn ${name}()`,
+      elementType: "function"
+    };
+  }
+  const t = typeof val;
+  if (t === "string" || t === "number" || t === "boolean") {
+    return {
+      id: nextId(),
+      name: key,
+      label: `${key}: ${JSON.stringify(val)}`,
+      elementType: getElementType(val)
+    };
+  }
+  if (Array.isArray(val)) {
+    const children = val.map((item, i) => valueToTree(`[${i}]`, item, depth + 1)).filter((n) => n !== null);
+    return {
+      id: nextId(),
+      name: key,
+      label: `${key} (${val.length})`,
+      elementType: "array",
+      children: children.length > 0 ? children : void 0
+    };
+  }
+  if (t === "object") {
+    const obj = val;
+    const className = obj.__className;
+    const entries = Object.keys(obj).filter((k) => k !== "__className" && k !== "__display");
+    const children = entries.map((k) => valueToTree(k, obj[k], depth + 1)).filter((n) => n !== null);
+    const displayLabel = className ? `${key}: ${className}` : key;
+    return {
+      id: nextId(),
+      name: key,
+      label: displayLabel,
+      elementType: "object",
+      children: children.length > 0 ? children : void 0
+    };
+  }
+  return {
+    id: nextId(),
+    label: `${key}: ${String(val)}`,
+    elementType: "string"
+  };
+}
+function buildDetailTree(entries) {
+  _nodeId = 0;
+  const byType = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    const group = byType.get(e.hookType) || [];
+    group.push(e);
+    byType.set(e.hookType, group);
+  }
+  const result = [];
+  for (const [hookType, items] of byType) {
+    const children = [];
+    for (const item of items) {
+      const child = valueToTree(item.variableName, item.data, 0);
+      if (child) {
+        children.push(child);
+      }
+    }
+    result.push({
+      id: nextId(),
+      name: hookType,
+      label: hookType,
+      children: children.length > 0 ? children : void 0
+    });
+  }
+  return result;
+}
+export {
+  buildDetailTree,
+  findNodeByDomAttr,
+  findNodeById,
+  getElementType,
+  nextId,
+  resetNodeId,
+  toTreeNodes,
+  treeIdFingerprint,
+  valueToTree
+};

package/dist/ui/packages/devtools/ui/src/features/Inspect/Inspect.qwik.mjs

@@ -0,0 +1,32 @@
+import { componentQrl, inlinedQrl, _jsxSorted, isBrowser } from "@qwik.dev/core";
+import { inspectorLink } from "./constant.qwik.mjs";
+import { setupIframeThemeSync } from "./iframe-theme.qwik.mjs";
+function getInspectIframeSrc() {
+  if (!isBrowser) {
+    return "";
+  }
+  const base = new URL("/", location.origin);
+  return new URL(inspectorLink, base).href;
+}
+const Inspect = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-glass-border bg-card-item-bg h-full w-full flex-1 overflow-hidden rounded-2xl border"
+  }, /* @__PURE__ */ _jsxSorted("iframe", {
+    "q-e:load": /* @__PURE__ */ inlinedQrl((_, el) => {
+      try {
+        setupIframeThemeSync(el);
+      } catch (err) {
+        console.error("Failed to inject theme into inspect iframe:", err);
+      }
+    }, "Inspect_component_div_iframe_q_e_load_yjJo1Bx5M0w")
+  }, {
+    src: getInspectIframeSrc(),
+    width: "100%",
+    height: "100%",
+    id: "inspect_qwik",
+    class: "h-full w-full rounded-xl"
+  }, null, 2, null), 1, "XI_0");
+}, "Inspect_component_domPlQHzbck"));
+export {
+  Inspect
+};

package/dist/ui/packages/devtools/ui/src/features/Inspect/constant.qwik.mjs

@@ -0,0 +1,4 @@
+const inspectorLink = "__inspect/";
+export {
+  inspectorLink
+};

package/dist/ui/packages/devtools/ui/src/features/Inspect/iframe-theme.qwik.mjs

@@ -0,0 +1,74 @@
+const STYLE_ID = "qwik-inspect-custom-style";
+const GLASSMORPHISM_CSS = `
+  :root {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
+  }
+  html.dark {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
+  }
+  /* 仅针对主视图容器做透明处理，不再暴力让所有 div/section 变透明 */
+  html, body, #app, main, header, nav, footer { background-color: transparent !important; }
+  .bg-active, .hover\\\\:bg-active:hover, tr:hover, li:hover,
+  .hover\\\\:bg-gray-400\\\\/10:hover, a:hover { background-color: var(--iframe-hover) !important; }
+  input, button, select, [role="button"] { background-color: var(--iframe-hover) !important; }
+  .border-base, [class*="border-b"], [class*="border-r"],
+  [class*="border-t"], [class*="border-l"], .border { border-color: var(--iframe-border) !important; }
+  html.dark { color: #fafafa !important; }
+  html, body, #app { overflow-x: hidden !important; max-width: 100vw !important; }
+`;
+function setupIframeThemeSync(iframe) {
+  const doc = iframe.contentDocument;
+  const win = iframe.contentWindow;
+  if (!doc || !win) {
+    return;
+  }
+  const syncTheme = () => {
+    const dark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark";
+    win.localStorage.setItem("vueuse-color-scheme", dark ? "dark" : "light");
+    if (dark) {
+      doc.documentElement.classList.add("dark");
+    } else {
+      doc.documentElement.classList.remove("dark");
+    }
+  };
+  const ensureStyle = () => {
+    if (!doc.getElementById(STYLE_ID)) {
+      const s = doc.createElement("style");
+      s.id = STYLE_ID;
+      s.textContent = GLASSMORPHISM_CSS;
+      doc.head.appendChild(s);
+    }
+  };
+  syncTheme();
+  ensureStyle();
+  const themeObs = new MutationObserver(syncTheme);
+  themeObs.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [
+      "class",
+      "data-theme"
+    ]
+  });
+  const styleObs = new MutationObserver(ensureStyle);
+  styleObs.observe(doc.body || doc.documentElement, {
+    childList: true,
+    subtree: true
+  });
+  doc.defaultView?.addEventListener("unload", () => {
+    themeObs.disconnect();
+    styleObs.disconnect();
+  });
+}
+export {
+  setupIframeThemeSync
+};

package/dist/ui/packages/devtools/ui/src/features/Overview/Overview.qwik.mjs

@@ -0,0 +1,199 @@
+import { componentQrl, inlinedQrl, _qrlSync, _jsxSorted, _captures, _fnSignal } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { IconFolderTree, IconCubeOutline, IconPhotoOutline } from "../../components/Icons/Icons.qwik.mjs";
+import { InfoBanner } from "../../components/InfoBanner/InfoBanner.qwik.mjs";
+const _hf0 = (p0) => p0.state.routes?.length;
+const _hf1 = (p0) => p0.state.components.length;
+const _hf2 = (p0) => p0.state.assets.length || 0;
+const Overview = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const pageJump = /* @__PURE__ */ inlinedQrl((pageName) => {
+    const _rawProps2 = _captures[0];
+    _rawProps2.state.activeTab = pageName;
+  }, "Overview_component_pageJump_0Fqlp0MwWqk", [
+    _rawProps
+  ]);
+  const stopPropagation = _qrlSync((e) => {
+    e.preventDefault();
+  }, "e=>{e.preventDefault();}");
+  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
+    _rawProps.state.isExtension && _rawProps.state.vitePluginDetected && /* @__PURE__ */ _jsxSorted(InfoBanner, null, {
+      class: "mb-5"
+    }, [
+      /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-foreground font-medium"
+      }, "Vite plugin detected", 3, null),
+      /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-muted-foreground"
+      }, [
+        " ",
+        "- the in-app overlay has additional features (routes, assets, packages, code inspection)"
+      ], 3, null)
+    ], 3, "G0_0"),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "grid grid-cols-1 gap-5 md:grid-cols-3"
+    }, [
+      !_rawProps.state.isExtension && /* @__PURE__ */ _jsxSorted("div", {
+        "q-e:click": [
+          /* @__PURE__ */ inlinedQrl(() => {
+            const pageJump2 = _captures[0];
+            return pageJump2("routes");
+          }, "Overview_component_Fragment_div_div_q_e_click_qb0eJJi67Us", [
+            pageJump
+          ]),
+          stopPropagation
+        ]
+      }, {
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "bg-foreground/5 border-border rounded-lg border p-3.5"
+        }, /* @__PURE__ */ _jsxSorted(IconFolderTree, null, {
+          class: "text-accent h-6 w-6"
+        }, null, 3, "G0_1"), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, null, [
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-3xl font-semibold"
+          }, _fnSignal(_hf0, [
+            _rawProps
+          ]), 1, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-muted-foreground text-sm"
+          }, "pages", 3, null)
+        ], 1, null)
+      ], 0, "G0_2"),
+      /* @__PURE__ */ _jsxSorted("div", {
+        "q-e:click": [
+          /* @__PURE__ */ inlinedQrl(() => {
+            const pageJump2 = _captures[0];
+            return pageJump2("renderTree");
+          }, "Overview_component_Fragment_div_div_q_e_click_1_B7lsWRRqMVk", [
+            pageJump
+          ]),
+          stopPropagation
+        ]
+      }, {
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "bg-foreground/5 border-border rounded-lg border p-3.5"
+        }, /* @__PURE__ */ _jsxSorted(IconCubeOutline, null, {
+          class: "text-accent h-6 w-6"
+        }, null, 3, "G0_3"), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, null, [
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-3xl font-semibold"
+          }, _fnSignal(_hf1, [
+            _rawProps
+          ]), 1, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-muted-foreground text-sm"
+          }, "components", 3, null)
+        ], 1, null)
+      ], 0, null),
+      !_rawProps.state.isExtension && /* @__PURE__ */ _jsxSorted("div", {
+        "q-e:click": [
+          /* @__PURE__ */ inlinedQrl(() => {
+            const pageJump2 = _captures[0];
+            return pageJump2("assets");
+          }, "Overview_component_Fragment_div_div_q_e_click_2_ZsZbMuPvZFo", [
+            pageJump
+          ]),
+          stopPropagation
+        ]
+      }, {
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "bg-foreground/5 border-border rounded-lg border p-3.5"
+        }, /* @__PURE__ */ _jsxSorted(IconPhotoOutline, null, {
+          class: "text-accent h-6 w-6"
+        }, null, 3, "G0_4"), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, null, [
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-3xl font-semibold"
+          }, _fnSignal(_hf2, [
+            _rawProps
+          ]), 1, null),
+          /* @__PURE__ */ _jsxSorted("div", null, {
+            class: "text-muted-foreground text-sm"
+          }, "assets", 3, null)
+        ], 1, null)
+      ], 0, "G0_5")
+    ], 1, null),
+    _rawProps.state.npmPackages.length > 0 && /* @__PURE__ */ _jsxSorted("div", {
+      class: [
+        "border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6",
+        !_rawProps.state.isExtension && "hover:bg-card-item-hover-bg cursor-pointer hover:-translate-y-0.5"
+      ],
+      "q-e:click": _rawProps.state.isExtension ? void 0 : [
+        /* @__PURE__ */ inlinedQrl(() => {
+          const pageJump2 = _captures[0];
+          return pageJump2("packages");
+        }, "Overview_component_Fragment_div_q_e_click_vcC0WjWKJuE", [
+          pageJump
+        ]),
+        stopPropagation
+      ]
+    }, null, [
+      /* @__PURE__ */ _jsxSorted("h3", null, {
+        class: "text-lg font-semibold"
+      }, "Installed Packages", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "grid grid-cols-1 gap-3 md:grid-cols-2"
+      }, _rawProps.state.npmPackages.map(([name, version]) => /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "bg-foreground/5 flex items-center justify-between rounded-lg p-3"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-sm"
+        }, name, 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "bg-foreground/5 border-border text-muted-foreground rounded-full border px-2 py-1 text-xs"
+        }, version, 1, null)
+      ], 1, name)), 1, null)
+    ], 0, "G0_6"),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6"
+    }, [
+      /* @__PURE__ */ _jsxSorted("h3", null, {
+        class: "text-lg font-semibold"
+      }, "Performance", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "space-y-3"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "border-border flex justify-between border-b py-2"
+        }, [
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "text-muted-foreground"
+          }, "SSR to full load", 3, null),
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "font-medium"
+          }, "-", 3, null)
+        ], 3, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "border-border flex justify-between border-b py-2"
+        }, [
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "text-muted-foreground"
+          }, "Page load", 3, null),
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "font-medium"
+          }, "-", 3, null)
+        ], 3, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "flex justify-between py-2"
+        }, [
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "text-muted-foreground"
+          }, "Navigation", 3, null),
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "font-medium"
+          }, "-", 3, null)
+        ], 3, null)
+      ], 3, null)
+    ], 3, null)
+  ], 1, "G0_7");
+}, "Overview_component_05j1MjtAwR0"));
+export {
+  Overview
+};