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

package/dist/ui/packages/devtools/ui/src/devtools/QwikDevtoolsExtension.qwik.mjs

@@ -1,36 +1,32 @@
-import { componentQrl, inlinedQrl, useStore, useVisibleTaskQrl, _captures, _jsxSorted } from "@qwik.dev/core";
 /* empty css                  */
-import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
 import { loadDevtoolsData } from "./rpc.qwik.mjs";
+import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
 import { createDevtoolsState } from "./state.qwik.mjs";
 import { DevtoolsSidebar } from "./DevtoolsSidebar.qwik.mjs";
-const QwikDevtoolsExtension = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-  const state = useStore(createDevtoolsState({
-    isExtension: true
-  }));
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
-    const state2 = _captures[0];
-    await loadDevtoolsData(state2);
-  }, "QwikDevtoolsExtension_component_useVisibleTask_uLhNm8VeHHc", [
-    state
-  ]));
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "qwik-devtools",
-    style: "position: absolute; inset: 0;"
-  }, /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "flex overflow-hidden",
-    style: "height: 100%; width: 100%;"
-  }, [
-    /* @__PURE__ */ _jsxSorted(DevtoolsSidebar, null, {
-      state
-    }, null, 3, "Nl_0"),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "custom-scrollbar min-h-0 flex-1 overflow-y-auto p-4"
-    }, /* @__PURE__ */ _jsxSorted(DevtoolsContent, null, {
-      state
-    }, null, 3, "Nl_1"), 1, null)
-  ], 1, null), 1, "Nl_2");
+import { _captures, _jsxSorted, componentQrl, inlinedQrl, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
+/**
+* Extension-only devtools layout.
+*
+* Renders the sidebar and content directly without the overlay chrome (floating button, draggable
+* panel, backdrop). Mounted inside the browser extension DevTools panel via
+* {@link entry.extension.tsx}.
+*
+* The outer `.qwik-devtools` wrapper is required because the Tailwind utilities are scoped under
+* `.qwik-devtools .{class}` in the CSS build. It must be a separate element so descendant selectors
+* match.
+*/
+var QwikDevtoolsExtension = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	const state = useStore(createDevtoolsState({ isExtension: true }));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const state = _captures[0];
+		await loadDevtoolsData(state);
+	}, "QwikDevtoolsExtension_component_useVisibleTask_uLhNm8VeHHc", [state]));
+	return /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "qwik-devtools",
+		style: "position: absolute; inset: 0;"
+	}, /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "flex overflow-hidden",
+		style: "height: 100%; width: 100%;"
+	}, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "jJ_0"), /*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar min-h-0 flex-1 overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "jJ_1"), 1, null)], 1, null), 1, "jJ_2");
 }, "QwikDevtoolsExtension_component_EdZTDUSLNrE"));
-export {
-  QwikDevtoolsExtension
-};
+export { QwikDevtoolsExtension };

package/dist/ui/packages/devtools/ui/src/devtools/command-palette.qwik.mjs

@@ -1,188 +1,169 @@
 import { devtoolsTabs } from "./tabs.qwik.mjs";
-const RECENTS_STORAGE_KEY = "qwik-devtools:palette-recents";
-const MAX_RECENTS = 5;
-const CATEGORY_ORDER = [
-  "Tabs",
-  "Components",
-  "Routes",
-  "Packages",
-  "Actions"
+var RECENTS_STORAGE_KEY = "qwik-devtools:palette-recents";
+var MAX_RECENTS = 5;
+/** Categories always render in this order. */
+var CATEGORY_ORDER = [
+	"Tabs",
+	"Components",
+	"Routes",
+	"Packages",
+	"Actions"
 ];
+/** Tabs reachable in the current context (Vite-only tabs are hidden in the extension). */
 function getTabResults(state) {
-  return devtoolsTabs.filter((tab) => !(state.isExtension && tab.viteOnly)).map((tab) => ({
-    id: `tab:${tab.id}`,
-    category: "Tabs",
-    label: tab.title,
-    target: {
-      kind: "tab",
-      tabId: tab.id
-    }
-  }));
+	return devtoolsTabs.filter((tab) => !(state.isExtension && tab.viteOnly)).map((tab) => ({
+		id: `tab:${tab.id}`,
+		category: "Tabs",
+		label: tab.title,
+		target: {
+			kind: "tab",
+			tabId: tab.id
+		}
+	}));
 }
 function getComponentResults(state) {
-  return state.components.map((component) => ({
-    id: `component:${component.file || component.name}`,
-    category: "Components",
-    label: component.name,
-    hint: component.fileName,
-    target: {
-      kind: "component",
-      name: component.name
-    }
-  }));
+	return state.components.map((component) => ({
+		id: `component:${component.file || component.name}`,
+		category: "Components",
+		label: component.name,
+		hint: component.fileName,
+		target: {
+			kind: "component",
+			name: component.name
+		}
+	}));
 }
+/** Routes live behind the Vite-only Routes tab, so they are excluded in the extension. */
 function getRouteResults(state) {
-  if (state.isExtension || !state.routes) {
-    return [];
-  }
-  return state.routes.map((route) => ({
-    id: `route:${route.relativePath}`,
-    category: "Routes",
-    label: route.relativePath === "" ? "/" : `/${route.relativePath}/`,
-    hint: route.name,
-    target: {
-      kind: "route",
-      path: route.relativePath
-    }
-  }));
+	if (state.isExtension || !state.routes) return [];
+	return state.routes.map((route) => ({
+		id: `route:${route.relativePath}`,
+		category: "Routes",
+		label: route.relativePath === "" ? "/" : `/${route.relativePath}/`,
+		hint: route.name,
+		target: {
+			kind: "route",
+			path: route.relativePath
+		}
+	}));
 }
+/** Packages live behind the Vite-only Packages tab, so they are excluded in the extension. */
 function getPackageResults(state) {
-  if (state.isExtension) {
-    return [];
-  }
-  return state.npmPackages.map(([name, version]) => ({
-    id: `package:${name}`,
-    category: "Packages",
-    label: name,
-    hint: version,
-    target: {
-      kind: "package",
-      name
-    }
-  }));
+	if (state.isExtension) return [];
+	return state.npmPackages.map(([name, version]) => ({
+		id: `package:${name}`,
+		category: "Packages",
+		label: name,
+		hint: version,
+		target: {
+			kind: "package",
+			name
+		}
+	}));
 }
+/** Common quick actions available in the current context. */
 function getActionResults(state) {
-  const actions = [
-    {
-      id: "action:toggleTheme",
-      category: "Actions",
-      label: "Toggle theme",
-      target: {
-        kind: "action",
-        action: "toggleTheme"
-      }
-    },
-    {
-      id: "action:clearPerformance",
-      category: "Actions",
-      label: "Clear performance",
-      target: {
-        kind: "action",
-        action: "clearPerformance"
-      }
-    },
-    {
-      id: "action:clearRecents",
-      category: "Actions",
-      label: "Clear recent searches",
-      target: {
-        kind: "action",
-        action: "clearRecents"
-      }
-    }
-  ];
-  if (!state.isExtension) {
-    actions.push({
-      id: "action:customizeTabs",
-      category: "Actions",
-      label: "Customize tabs",
-      target: {
-        kind: "action",
-        action: "customizeTabs"
-      }
-    });
-  }
-  return actions;
+	const actions = [
+		{
+			id: "action:toggleTheme",
+			category: "Actions",
+			label: "Toggle theme",
+			target: {
+				kind: "action",
+				action: "toggleTheme"
+			}
+		},
+		{
+			id: "action:clearPerformance",
+			category: "Actions",
+			label: "Clear performance",
+			target: {
+				kind: "action",
+				action: "clearPerformance"
+			}
+		},
+		{
+			id: "action:clearRecents",
+			category: "Actions",
+			label: "Clear recent searches",
+			target: {
+				kind: "action",
+				action: "clearRecents"
+			}
+		}
+	];
+	if (!state.isExtension) actions.push({
+		id: "action:customizeTabs",
+		category: "Actions",
+		label: "Customize tabs",
+		target: {
+			kind: "action",
+			action: "customizeTabs"
+		}
+	});
+	return actions;
 }
+/** Every searchable result for the current context (tabs, components, routes, packages). */
 function buildPaletteSources(state) {
-  return [
-    ...getTabResults(state),
-    ...getComponentResults(state),
-    ...getRouteResults(state),
-    ...getPackageResults(state)
-  ];
+	return [
+		...getTabResults(state),
+		...getComponentResults(state),
+		...getRouteResults(state),
+		...getPackageResults(state)
+	];
 }
+/** Filters results by a substring match against label and hint; an empty query returns nothing. */
 function filterResults(results, query) {
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return [];
-  }
-  return results.filter((result) => result.label.toLowerCase().includes(normalized) || (result.hint?.toLowerCase().includes(normalized) ?? false));
+	const normalized = query.trim().toLowerCase();
+	if (!normalized) return [];
+	return results.filter((result) => result.label.toLowerCase().includes(normalized) || (result.hint?.toLowerCase().includes(normalized) ?? false));
 }
+/** Groups results by category, preserving the fixed category order and dropping empty groups. */
 function groupResults(results) {
-  const groups = [];
-  for (const category of CATEGORY_ORDER) {
-    const inCategory = results.filter((result) => result.category === category);
-    if (inCategory.length > 0) {
-      groups.push({
-        category,
-        results: inCategory
-      });
-    }
-  }
-  return groups;
+	const groups = [];
+	for (const category of CATEGORY_ORDER) {
+		const inCategory = results.filter((result) => result.category === category);
+		if (inCategory.length > 0) groups.push({
+			category,
+			results: inCategory
+		});
+	}
+	return groups;
 }
+/** Reads the persisted recent-selection ids, newest first; empty when nothing valid is stored. */
 function loadRecentIds() {
-  try {
-    const raw = localStorage.getItem(RECENTS_STORAGE_KEY);
-    if (!raw) {
-      return [];
-    }
-    const parsed = JSON.parse(raw);
-    if (!Array.isArray(parsed)) {
-      return [];
-    }
-    return parsed.filter((value) => typeof value === "string");
-  } catch {
-    return [];
-  }
+	try {
+		const raw = localStorage.getItem(RECENTS_STORAGE_KEY);
+		if (!raw) return [];
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return [];
+		return parsed.filter((value) => typeof value === "string");
+	} catch {
+		return [];
+	}
 }
+/** Persists the recent-selection ids. Storage failures (private mode, quota) are ignored. */
 function saveRecentIds(ids) {
-  try {
-    localStorage.setItem(RECENTS_STORAGE_KEY, JSON.stringify(ids));
-  } catch {
-  }
+	try {
+		localStorage.setItem(RECENTS_STORAGE_KEY, JSON.stringify(ids));
+	} catch {}
 }
+/** Returns a new list with `id` moved to the front, de-duped and capped at MAX_RECENTS. */
 function addRecentId(recentIds, id) {
-  return [
-    id,
-    ...recentIds.filter((existing) => existing !== id)
-  ].slice(0, MAX_RECENTS);
+	return [id, ...recentIds.filter((existing) => existing !== id)].slice(0, MAX_RECENTS);
 }
+/**
+* Resolves persisted recent ids to their current results, dropping entries that no longer exist
+* (e.g. a component that unmounted or a package that was removed). Actions are resolvable too.
+*/
 function resolveRecents(recentIds, state) {
-  const byId = /* @__PURE__ */ new Map();
-  for (const result of [
-    ...buildPaletteSources(state),
-    ...getActionResults(state)
-  ]) {
-    byId.set(result.id, result);
-  }
-  const resolved = [];
-  for (const id of recentIds) {
-    const result = byId.get(id);
-    if (result) {
-      resolved.push(result);
-    }
-  }
-  return resolved;
+	const byId = /* @__PURE__ */ new Map();
+	for (const result of [...buildPaletteSources(state), ...getActionResults(state)]) byId.set(result.id, result);
+	const resolved = [];
+	for (const id of recentIds) {
+		const result = byId.get(id);
+		if (result) resolved.push(result);
+	}
+	return resolved;
 }
-export {
-  addRecentId,
-  buildPaletteSources,
-  filterResults,
-  getActionResults,
-  groupResults,
-  loadRecentIds,
-  resolveRecents,
-  saveRecentIds
-};
+export { addRecentId, buildPaletteSources, filterResults, getActionResults, groupResults, loadRecentIds, resolveRecents, saveRecentIds };

package/dist/ui/packages/devtools/ui/src/devtools/page-data-source.qwik.mjs

@@ -1,61 +1,62 @@
-import { createInPageBridge, getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL } from "@qwik.dev/devtools/kit";
 import { isBrowser } from "@qwik.dev/core";
-class InPageDataSource {
-  constructor() {
-    this.bridge = createInPageBridge({
-      isBrowser
-    });
-  }
-  async readPerfData() {
-    return this.bridge.readPerfData();
-  }
-  async readPreloadStore() {
-    return this.bridge.readPreloadStore();
-  }
-  async clearPreloadStore() {
-    return this.bridge.clearPreloadStore();
-  }
-  subscribePreloadUpdates(cb) {
-    return this.bridge.subscribePreloadUpdates(cb);
-  }
-  async readComponentTree() {
-    return this.bridge.readComponentTree();
-  }
-  async readSignals() {
-    return this.bridge.readSignals();
-  }
-  async readVNodeTree() {
-    return this.bridge.readVNodeTree();
-  }
-  subscribeTreeUpdates(cb) {
-    return this.bridge.subscribeTreeUpdates(cb);
-  }
-  async readNodeProps(nodeId) {
-    return this.bridge.readNodeProps(nodeId);
-  }
-  async readComponentDetail(componentName, qrlChunk) {
-    return this.bridge.readComponentDetail(componentName, qrlChunk);
-  }
-  async setSignalValue(componentName, qrlChunk, variableName, newValue) {
-    return this.bridge.setSignalValue(componentName, qrlChunk, variableName, newValue);
-  }
-  // No-ops in overlay mode (highlight is handled by the extension's eval)
-  async highlightElement() {
-  }
-  async unhighlightElement() {
-  }
-  subscribeRenderEvents(cb) {
-    return this.bridge.subscribeRenderEvents(cb);
-  }
-}
-const defaultSource = new InPageDataSource();
+import { QWIK_DEVTOOLS_GLOBAL, createInPageBridge, getQwikDevtoolsGlobal } from "@qwik.dev/devtools/kit";
+/**
+* Default implementation that reads directly from `window` globals. Used when the devtools UI runs
+* as an in-app overlay (same document).
+*/
+var InPageDataSource = class {
+	constructor() {
+		this.bridge = createInPageBridge({ isBrowser });
+	}
+	async readPerfData() {
+		return this.bridge.readPerfData();
+	}
+	async readPreloadStore() {
+		return this.bridge.readPreloadStore();
+	}
+	async clearPreloadStore() {
+		return this.bridge.clearPreloadStore();
+	}
+	subscribePreloadUpdates(cb) {
+		return this.bridge.subscribePreloadUpdates(cb);
+	}
+	async readComponentTree() {
+		return this.bridge.readComponentTree();
+	}
+	async readSignals() {
+		return this.bridge.readSignals();
+	}
+	async readVNodeTree() {
+		return this.bridge.readVNodeTree();
+	}
+	subscribeTreeUpdates(cb) {
+		return this.bridge.subscribeTreeUpdates(cb);
+	}
+	async readNodeProps(nodeId) {
+		return this.bridge.readNodeProps(nodeId);
+	}
+	async readComponentDetail(componentName, qrlChunk) {
+		return this.bridge.readComponentDetail(componentName, qrlChunk);
+	}
+	async setSignalValue(componentName, qrlChunk, variableName, newValue) {
+		return this.bridge.setSignalValue(componentName, qrlChunk, variableName, newValue);
+	}
+	async highlightElement() {}
+	async unhighlightElement() {}
+	subscribeRenderEvents(cb) {
+		return this.bridge.subscribeRenderEvents(cb);
+	}
+};
+var defaultSource = new InPageDataSource();
+/**
+* Return the active page data source.
+*
+* When the Qwik DevTools root has a `pageDataSource` (by the browser extension entry point), that
+* source is used. Otherwise the default in-page source is returned.
+*/
 function getPageDataSource() {
-  const source = isBrowser ? getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.pageDataSource] : void 0;
-  if (source) {
-    return source;
-  }
-  return defaultSource;
+	const source = isBrowser ? getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.pageDataSource] : void 0;
+	if (source) return source;
+	return defaultSource;
 }
-export {
-  getPageDataSource
-};
+export { getPageDataSource };