@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.43

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

@@ -1,184 +1,139 @@
-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
-  }));
+/** VNodeTreeNode -> TreeNode conversion */ 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(",");
+/** Quick structural fingerprint from node IDs. */ 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;
+/** Tree search helpers */ 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;
+	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;
+var _nodeId = 0;
 function resetNodeId() {
-  _nodeId = 0;
+	_nodeId = 0;
 }
 function nextId() {
-  return `detail-${_nodeId++}`;
+	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";
+	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";
+	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"
-  };
+	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 children = Object.keys(obj).filter((k) => k !== "__className" && k !== "__display").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;
+	_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
-};
+export { buildDetailTree, findNodeByDomAttr, findNodeById, getElementType, nextId, resetNodeId, toTreeNodes, treeIdFingerprint, valueToTree };

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

@@ -1,32 +1,28 @@
-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;
+import { _jsxSorted, componentQrl, inlinedQrl, isBrowser } from "@qwik.dev/core";
+/**
+* Inspect iframe must load under app root (Vite `BASE_URL` + origin), not `location.pathname`, so
+* deep routes do not produce `.../nested/route__inspect/`. SSR: no `location` — return empty until
+* the client runs.
+*/ 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");
+var 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
-};
+export { Inspect };

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

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

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

@@ -1,5 +1,5 @@
-const STYLE_ID = "qwik-inspect-custom-style";
-const GLASSMORPHISM_CSS = `
+var STYLE_ID = "qwik-inspect-custom-style";
+var GLASSMORPHISM_CSS = `
   :root {
     --c-bg-base: transparent !important;
     --c-bg-nav: transparent !important;
@@ -26,49 +26,39 @@ const GLASSMORPHISM_CSS = `
   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();
-  });
+/** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */ 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
-};
+export { setupIframeThemeSync };