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

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

@@ -0,0 +1,188 @@
+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"
+];
+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
+    }
+  }));
+}
+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
+    }
+  }));
+}
+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)
+  ];
+}
+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;
+}
+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 {
+  }
+}
+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;
+}
+export {
+  addRecentId,
+  buildPaletteSources,
+  filterResults,
+  getActionResults,
+  groupResults,
+  loadRecentIds,
+  resolveRecents,
+  saveRecentIds
+};

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

@@ -0,0 +1,61 @@
+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();
+function getPageDataSource() {
+  const source = isBrowser ? getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.pageDataSource] : void 0;
+  if (source) {
+    return source;
+  }
+  return defaultSource;
+}
+export {
+  getPageDataSource
+};

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

@@ -0,0 +1,91 @@
+import { getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL, RouteType, setViteClientContext, createClientRpc, getViteClientRpc } from "@qwik.dev/devtools/kit";
+import { noSerialize } from "@qwik.dev/core";
+import debug from "../../../../../_virtual/browser.qwik.mjs";
+import { tryCreateHotContext } from "../../../../../node_modules/.pnpm/vite-hot-client@2.1.0_vite@7.3.5_@types_node@24.10.0_jiti@2.6.1_lightningcss@1.33.0_terser@5.46.0_tsx@4.21.0_yaml@2.8.3_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+const log = debug("qwik:devtools:devtools");
+function getClientRpcFunctions() {
+  return {
+    healthCheck: () => true
+  };
+}
+function toDevtoolsRoutes(routes) {
+  const children = routes?.children || [];
+  const directories = children.filter((child) => child.type === RouteType.DIRECTORY);
+  return [
+    {
+      relativePath: "",
+      name: "index",
+      type: RouteType.DIRECTORY,
+      path: "",
+      isSymbolicLink: false,
+      children: void 0
+    },
+    ...directories
+  ];
+}
+async function connectRpc() {
+  const hot = await tryCreateHotContext(void 0, [
+    "/",
+    "/"
+  ]);
+  if (!hot) {
+    throw new Error("Vite Hot Context not connected");
+  }
+  setViteClientContext(hot);
+  createClientRpc(getClientRpcFunctions());
+  return getViteClientRpc();
+}
+let rpcPromise;
+function getDevtoolsRpc() {
+  rpcPromise ?? (rpcPromise = connectRpc());
+  return rpcPromise;
+}
+const viteDataProvider = {
+  async loadData(state) {
+    const rpc = await getDevtoolsRpc();
+    const primaryDataPromise = Promise.allSettled([
+      rpc.getAssetsFromPublicDir(),
+      rpc.getComponents(),
+      rpc.getRoutes(),
+      rpc.getQwikPackages()
+    ]);
+    state.isLoadingDependencies = true;
+    const dependenciesPromise = rpc.getAllDependencies().then((allDependencies) => {
+      state.allDependencies = allDependencies;
+    }).catch((error) => {
+      log("Failed to load all dependencies:", error);
+    }).finally(() => {
+      state.isLoadingDependencies = false;
+    });
+    const [assetsResult, componentsResult, routesResult, packagesResult] = await primaryDataPromise;
+    if (assetsResult.status === "fulfilled") {
+      state.assets = assetsResult.value;
+    } else {
+      log("Failed to load assets:", assetsResult.reason);
+    }
+    if (componentsResult.status === "fulfilled") {
+      state.components = componentsResult.value;
+    } else {
+      log("Failed to load components:", componentsResult.reason);
+    }
+    if (routesResult.status === "fulfilled") {
+      state.routes = noSerialize(toDevtoolsRoutes(routesResult.value));
+    } else {
+      log("Failed to load routes:", routesResult.reason);
+    }
+    if (packagesResult.status === "fulfilled") {
+      state.npmPackages = packagesResult.value;
+    } else {
+      log("Failed to load Qwik packages:", packagesResult.reason);
+    }
+    await dependenciesPromise;
+  }
+};
+async function loadDevtoolsData(state) {
+  const provider = getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider] ?? viteDataProvider;
+  await provider.loadData(state);
+}
+export {
+  getDevtoolsRpc,
+  loadDevtoolsData
+};

package/dist/ui/packages/devtools/ui/src/devtools/sidebar-tabs.qwik.mjs

@@ -0,0 +1,97 @@
+import { devtoolsTabs } from "./tabs.qwik.mjs";
+const STORAGE_KEY = "qwik-devtools:visible-tabs";
+const tabsById = new Map(devtoolsTabs.map((tab) => [
+  tab.id,
+  tab
+]));
+const KNOWN_TAB_IDS = new Set(devtoolsTabs.map((tab) => tab.id));
+function isDevtoolsTabId(id) {
+  return KNOWN_TAB_IDS.has(id);
+}
+function getDefaultVisibleTabIds() {
+  return devtoolsTabs.map((tab) => tab.id);
+}
+function getAvailableTabIds(visibleTabIds) {
+  const visible = new Set(visibleTabIds);
+  return devtoolsTabs.map((tab) => tab.id).filter((id) => !visible.has(id));
+}
+function reorderVisibleTabs(visibleTabIds, draggedId, targetId) {
+  if (draggedId === targetId) {
+    return visibleTabIds;
+  }
+  const without = visibleTabIds.filter((id) => id !== draggedId);
+  const targetIndex = without.indexOf(targetId);
+  if (targetIndex < 0) {
+    return visibleTabIds;
+  }
+  without.splice(targetIndex, 0, draggedId);
+  return without;
+}
+function setTabVisible(visibleTabIds, id, visible) {
+  if (visible) {
+    return visibleTabIds.includes(id) ? visibleTabIds : [
+      ...visibleTabIds,
+      id
+    ];
+  }
+  return visibleTabIds.filter((tabId) => tabId !== id);
+}
+function normalizeVisibleTabIds(ids) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const id of ids) {
+    if (isDevtoolsTabId(id) && !seen.has(id)) {
+      seen.add(id);
+      result.push(id);
+    }
+  }
+  return result;
+}
+function loadVisibleTabIds() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return null;
+    }
+    return normalizeVisibleTabIds(parsed.filter((value) => typeof value === "string"));
+  } catch {
+    return null;
+  }
+}
+function saveVisibleTabIds(visibleTabIds) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleTabIds));
+  } catch {
+  }
+}
+function resolveTabs(ids) {
+  const tabs = [];
+  for (const id of ids) {
+    const tab = tabsById.get(id);
+    if (tab) {
+      tabs.push(tab);
+    }
+  }
+  return tabs;
+}
+function getAvailableTabs(visibleTabIds) {
+  return resolveTabs(getAvailableTabIds(visibleTabIds));
+}
+function getVisibleTabs(visibleTabIds, isExtension) {
+  return resolveTabs(visibleTabIds).filter((tab) => !(isExtension && tab.viteOnly));
+}
+export {
+  getAvailableTabIds,
+  getAvailableTabs,
+  getDefaultVisibleTabIds,
+  getVisibleTabs,
+  loadVisibleTabIds,
+  reorderVisibleTabs,
+  resolveTabs,
+  saveVisibleTabIds,
+  setTabVisible
+};

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

@@ -0,0 +1,30 @@
+import { getDefaultVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
+function createDevtoolsState(opts) {
+  return {
+    isOpen: false,
+    isPanelFullscreen: false,
+    activeTab: "overview",
+    npmPackages: [],
+    assets: [],
+    components: [],
+    routes: void 0,
+    allDependencies: [],
+    isLoadingDependencies: false,
+    panelBounds: {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    },
+    lastPanelBounds: null,
+    visibleTabIds: getDefaultVisibleTabIds(),
+    isCustomizeOpen: false,
+    isPaletteOpen: false,
+    componentReveal: null,
+    clearPerformanceRequested: false,
+    isExtension: opts?.isExtension ?? false
+  };
+}
+export {
+  createDevtoolsState
+};

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

@@ -0,0 +1,82 @@
+import { _jsxSorted } from "@qwik.dev/core";
+import { IconBoltOutline, IconCubeOutline, IconDiagram3, IconFolderTree, IconPhotoOutline, IconMegaphoneMini, IconCodeBracketSolid, IconClockOutline, IconArrowDownTray, IconChartBarOutline } from "../components/Icons/Icons.qwik.mjs";
+const devtoolsTabs = [
+  {
+    id: "overview",
+    title: "Overview",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconBoltOutline, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_0")
+  },
+  {
+    id: "packages",
+    title: "Packages",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconCubeOutline, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_1"),
+    viteOnly: true
+  },
+  {
+    id: "renderTree",
+    title: "Render Tree",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconDiagram3, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_2")
+  },
+  {
+    id: "routes",
+    title: "Routes",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconFolderTree, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_3"),
+    viteOnly: true
+  },
+  {
+    id: "assets",
+    title: "Assets",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconPhotoOutline, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_4"),
+    viteOnly: true
+  },
+  {
+    id: "inspect",
+    title: "Inspect",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconMegaphoneMini, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_5"),
+    viteOnly: true
+  },
+  {
+    id: "codeBreak",
+    title: "Code Break",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconCodeBracketSolid, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_6")
+  },
+  {
+    id: "performance",
+    title: "Performance",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconClockOutline, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_7")
+  },
+  {
+    id: "preloads",
+    title: "Preloads",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconArrowDownTray, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_8")
+  },
+  {
+    id: "buildAnalysis",
+    title: "Build Analysis",
+    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconChartBarOutline, null, {
+      class: "h-6 w-6"
+    }, null, 3, "0V_9"),
+    viteOnly: true
+  }
+];
+export {
+  devtoolsTabs
+};

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

@@ -0,0 +1,50 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
+const Assets = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+  }, _rawProps.state.assets?.map((asset) => {
+    const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+    const fileExt = asset.path.split(".").pop()?.toUpperCase();
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg overflow-hidden rounded-xl border transition-all duration-200"
+    }, [
+      isImage ? /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "bg-foreground/5 aspect-square overflow-hidden"
+      }, /* @__PURE__ */ _jsxSorted("img", {
+        alt: _wrapProp(asset, "path"),
+        src: _wrapProp(asset, "publicPath")
+      }, {
+        width: 176,
+        height: 176,
+        class: "h-full w-full object-cover"
+      }, null, 3, null), 1, "LV_0") : /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "bg-foreground/5 flex aspect-square items-center justify-center"
+      }, /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-muted-foreground font-mono text-2xl"
+      }, fileExt, 1, null), 1, "LV_1"),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "space-y-2 p-4"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", {
+          title: _wrapProp(asset, "path")
+        }, {
+          class: "truncate text-sm"
+        }, asset.path.split("/").pop(), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground flex items-center justify-between text-xs"
+        }, [
+          /* @__PURE__ */ _jsxSorted("span", null, null, [
+            (asset.size / 1024).toFixed(2),
+            " KB"
+          ], 1, null),
+          /* @__PURE__ */ _jsxSorted("span", null, {
+            class: "bg-foreground/5 rounded-full px-2 py-1"
+          }, fileExt, 1, null)
+        ], 1, null)
+      ], 1, null)
+    ], 1, asset.filePath);
+  }), 1, "LV_2");
+}, "Assets_component_3McbsijSMd8"));
+export {
+  Assets
+};