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

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

@@ -1,105 +1,58 @@
-import { componentQrl, inlinedQrl, useStore, useSignal, useVisibleTaskQrl, _captures, _jsxSorted } from "@qwik.dev/core";
-import { getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL } from "@qwik.dev/devtools/kit";
 import { DevtoolsButton } from "../components/DevtoolsButton/DevtoolsButton.qwik.mjs";
 import { DevtoolsContainer } from "../components/DevtoolsContainer/DevtoolsContainer.qwik.mjs";
 import { DevtoolsPanel } from "../components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
 import { ThemeScript } from "../components/ThemeToggle/theme-script.qwik.mjs";
 /* empty css                  */
-import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
 import { loadDevtoolsData } from "./rpc.qwik.mjs";
+import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
+import { loadVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
 import { createDevtoolsState } from "./state.qwik.mjs";
 import { DevtoolsSidebar } from "./DevtoolsSidebar.qwik.mjs";
 import { CustomizeTabsPanel } from "./CustomizeTabsPanel.qwik.mjs";
 import { CommandPalette } from "./CommandPalette.qwik.mjs";
-import { loadVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
 import { ensurePreloadRuntime } from "../runtime/preloads.qwik.mjs";
-import { normalizeExcludePathnames, isExcludedPathname } from "../../../kit/src/overlay-paths.qwik.mjs";
-const QwikDevtools = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const state = useStore(createDevtoolsState());
-  const excludePathnames = normalizeExcludePathnames(props.excludePathnames);
-  const shouldRender = useSignal(excludePathnames.length === 0);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
-    const excludePathnames2 = _captures[0], shouldRender2 = _captures[1], state2 = _captures[2];
-    if (isExcludedPathname(location.pathname, excludePathnames2)) {
-      shouldRender2.value = false;
-      return;
-    }
-    shouldRender2.value = true;
-    if (!state2.isExtension) {
-      const storedVisibleTabIds = loadVisibleTabIds();
-      if (storedVisibleTabIds) {
-        state2.visibleTabIds = storedVisibleTabIds;
-      }
-    }
-    if (!getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider]) {
-      ensurePreloadRuntime();
-    }
-    await loadDevtoolsData(state2);
-  }, "QwikDevtools_component_useVisibleTask_uC3JSfARmqs", [
-    excludePathnames,
-    shouldRender,
-    state
-  ]), {
-    strategy: "document-ready"
-  });
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const state2 = _captures[0];
-    const handleShortcut = (event) => {
-      if ((event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K")) {
-        if (!state2.isOpen) {
-          return;
-        }
-        event.preventDefault();
-        state2.isPaletteOpen = !state2.isPaletteOpen;
-      }
-    };
-    window.addEventListener("keydown", handleShortcut);
-    cleanup(() => window.removeEventListener("keydown", handleShortcut));
-  }, "QwikDevtools_component_useVisibleTask_1_Q0Inlj2aFY8", [
-    state
-  ]), {
-    strategy: "document-ready"
-  });
-  if (!shouldRender.value) {
-    return /* @__PURE__ */ _jsxSorted("span", null, {
-      style: {
-        display: "contents"
-      }
-    }, null, 3, "lm_0");
-  }
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "qwik-devtools"
-  }, [
-    /* @__PURE__ */ _jsxSorted(ThemeScript, null, null, null, 3, "lm_1"),
-    /* @__PURE__ */ _jsxSorted(DevtoolsContainer, null, null, [
-      /* @__PURE__ */ _jsxSorted(DevtoolsButton, null, {
-        state
-      }, null, 3, "lm_2"),
-      state.isOpen && /* @__PURE__ */ _jsxSorted(DevtoolsPanel, null, {
-        state
-      }, [
-        /* @__PURE__ */ _jsxSorted(DevtoolsSidebar, null, {
-          state
-        }, null, 3, "lm_3"),
-        /* @__PURE__ */ _jsxSorted("div", null, {
-          class: "relative min-h-0 flex-1"
-        }, [
-          /* @__PURE__ */ _jsxSorted("div", null, {
-            class: "custom-scrollbar h-full overflow-y-auto p-4"
-          }, /* @__PURE__ */ _jsxSorted(DevtoolsContent, null, {
-            state
-          }, null, 3, "lm_4"), 1, null),
-          !state.isExtension && state.isCustomizeOpen && /* @__PURE__ */ _jsxSorted(CustomizeTabsPanel, null, {
-            state
-          }, null, 3, "lm_5"),
-          state.isPaletteOpen && /* @__PURE__ */ _jsxSorted(CommandPalette, null, {
-            state
-          }, null, 3, "lm_6")
-        ], 1, null)
-      ], 1, "lm_7")
-    ], 1, "lm_8")
-  ], 1, "lm_9");
+import { isExcludedPathname, normalizeExcludePathnames } from "../../../kit/src/overlay-paths.qwik.mjs";
+import { _captures, _jsxSorted, componentQrl, inlinedQrl, useSignal, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
+import { QWIK_DEVTOOLS_GLOBAL, getQwikDevtoolsGlobal } from "@qwik.dev/devtools/kit";
+var QwikDevtools = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const state = useStore(createDevtoolsState());
+	const excludePathnames = normalizeExcludePathnames(props.excludePathnames);
+	const shouldRender = useSignal(excludePathnames.length === 0);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const excludePathnames = _captures[0], shouldRender = _captures[1], state = _captures[2];
+		if (isExcludedPathname(location.pathname, excludePathnames)) {
+			shouldRender.value = false;
+			return;
+		}
+		shouldRender.value = true;
+		if (!state.isExtension) {
+			const storedVisibleTabIds = loadVisibleTabIds();
+			if (storedVisibleTabIds) state.visibleTabIds = storedVisibleTabIds;
+		}
+		if (!getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider]) ensurePreloadRuntime();
+		await loadDevtoolsData(state);
+	}, "QwikDevtools_component_useVisibleTask_uC3JSfARmqs", [
+		excludePathnames,
+		shouldRender,
+		state
+	]), { strategy: "document-ready" });
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
+		const state = _captures[0];
+		const handleShortcut = (event) => {
+			if ((event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K")) {
+				if (!state.isOpen) return;
+				event.preventDefault();
+				state.isPaletteOpen = !state.isPaletteOpen;
+			}
+		};
+		window.addEventListener("keydown", handleShortcut);
+		cleanup(() => window.removeEventListener("keydown", handleShortcut));
+	}, "QwikDevtools_component_useVisibleTask_1_Q0Inlj2aFY8", [state]), { strategy: "document-ready" });
+	if (!shouldRender.value) return /*#__PURE__*/ _jsxSorted("span", null, { style: { display: "contents" } }, null, 3, "lm_0");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "qwik-devtools" }, [/*#__PURE__*/ _jsxSorted(ThemeScript, null, null, null, 3, "lm_1"), /*#__PURE__*/ _jsxSorted(DevtoolsContainer, null, null, [/*#__PURE__*/ _jsxSorted(DevtoolsButton, null, { state }, null, 3, "lm_2"), state.isOpen && /*#__PURE__*/ _jsxSorted(DevtoolsPanel, null, { state }, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "lm_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "relative min-h-0 flex-1" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar h-full overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "lm_4"), 1, null),
+		!state.isExtension && state.isCustomizeOpen && /*#__PURE__*/ _jsxSorted(CustomizeTabsPanel, null, { state }, null, 3, "lm_5"),
+		state.isPaletteOpen && /*#__PURE__*/ _jsxSorted(CommandPalette, null, { state }, null, 3, "lm_6")
+	], 1, null)], 1, "lm_7")], 1, "lm_8")], 1, "lm_9");
 }, "QwikDevtools_component_Jxy3rMAzQPw"));
-export {
-  QwikDevtools
-};
+export { QwikDevtools };

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

@@ -1,36 +1,31 @@
-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, "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");
 }, "QwikDevtoolsExtension_component_EdZTDUSLNrE"));
-export {
-  QwikDevtoolsExtension
-};
+export { QwikDevtoolsExtension };

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

@@ -1,188 +1,157 @@
 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"
 ];
-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
-    }
-  }));
+/** 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
+		}
+	}));
 }
 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
+		}
+	}));
 }
-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
-    }
-  }));
+/** 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
+		}
+	}));
 }
-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
-    }
-  }));
+/** 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
+		}
+	}));
 }
-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;
+/** 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;
 }
-function buildPaletteSources(state) {
-  return [
-    ...getTabResults(state),
-    ...getComponentResults(state),
-    ...getRouteResults(state),
-    ...getPackageResults(state)
-  ];
+/** Every searchable result for the current context (tabs, components, routes, packages). */ function buildPaletteSources(state) {
+	return [
+		...getTabResults(state),
+		...getComponentResults(state),
+		...getRouteResults(state),
+		...getPackageResults(state)
+	];
 }
-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));
+/** 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));
 }
-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;
+/** 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;
 }
-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 [];
-  }
+/** 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 [];
+	}
 }
-function saveRecentIds(ids) {
-  try {
-    localStorage.setItem(RECENTS_STORAGE_KEY, JSON.stringify(ids));
-  } catch {
-  }
+/** 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 {}
 }
-function addRecentId(recentIds, id) {
-  return [
-    id,
-    ...recentIds.filter((existing) => existing !== id)
-  ].slice(0, MAX_RECENTS);
+/** 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);
 }
-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;
+/**
+* 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;
 }
-export {
-  addRecentId,
-  buildPaletteSources,
-  filterResults,
-  getActionResults,
-  groupResults,
-  loadRecentIds,
-  resolveRecents,
-  saveRecentIds
-};
+export { addRecentId, buildPaletteSources, filterResults, getActionResults, groupResults, loadRecentIds, resolveRecents, saveRecentIds };