@qwik.dev/devtools 0.2.1 → 0.2.2

package/dist/ui/lib-types/ui/src/features/RenderTree/formatTreeData.d.ts

@@ -1,148 +1,79 @@
-import { TreeNode } from '../../components/Tree/Tree';
-import { QRL } from '@qwik.dev/core';
-import { ParsedStructure } from '@devtools/kit';
-export type QSeqsList = keyof typeof qSeqs;
-declare const qSeqs: {
-    props: {
-        set: Set<Record<string, any>>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    listens: {
-        set: Set<Record<string, any>>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useStore: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useSignal: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useContext: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useId: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useStyles: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useStylesScoped: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useConstant: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useTask: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useVisibleTask: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useComputed: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useAsyncComputed: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useErrorBoundary: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useServerData: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useSerializer: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useResource: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useContextProvider: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    render: {
-        set: Set<Record<string, any>>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useLocation: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useNavigate: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    usePreventNavigate: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useContent: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    useDocumentHead: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-    customhook: {
-        set: Set<ParsedStructure>;
-        toTree: (value: any) => TreeNode[];
-        display: boolean;
-    };
-};
-type DataType = keyof typeof qSeqs;
-export declare function formatData(type: 'props' | 'listens' | 'render', data: Record<string, any>): void;
-export declare function formatData(type: Exclude<DataType, 'props' | 'listens' | 'render'>, data: ParsedStructure): void;
-export declare function getData(): (TreeNode | null)[];
-export declare function findMatchVarfromScope(item: ParsedStructure): string | never[];
-export declare function buildTree(): (TreeNode | null)[];
-export declare function clearAll(): void;
-export declare function getHookFilterList(): {
-    key: "useAsyncComputed" | "useComputed" | "useConstant" | "useContext" | "useContextProvider" | "useErrorBoundary" | "useId" | "useResource" | "useSerializer" | "useServerData" | "useSignal" | "useStore" | "useStyles" | "useStylesScoped" | "useTask" | "useVisibleTask" | "useLocation" | "useNavigate" | "usePreventNavigate" | "useContent" | "useDocumentHead" | "customhook" | "props" | "listens" | "render";
-    display: boolean;
-}[];
-export declare function updateHookDisplays(map: Partial<Record<keyof typeof qSeqs, boolean>>): void;
-export declare function findAllQrl(): any[];
-export declare function getQrlPath(qrl: QRL): any;
-export declare function getQrlChunkName(qrl: QRL): string;
-export declare function normalizeData(qseq: Record<string, any>[], parsed: ParsedStructure[]): ParsedStructure[];
-export {};
+import type { TreeNode } from '../../components/Tree/Tree';
+import type { ParsedStructure } from '@devtools/kit';
+import { type HookType, type HookFilterItem, type QRLInternal } from './types';
+/**
+ * Manages hook data storage and tree building for the devtools.
+ */
+export declare class HookStore {
+    private store;
+    private treeBuilder;
+    constructor();
+    private createStore;
+    /**
+     * Add data to the store for a specific hook type
+     */
+    add(type: HookType, data: ParsedStructure | {
+        data: Record<string, unknown>;
+    }): void;
+    /**
+     * Clear all stored hook data
+     */
+    clear(): void;
+    /**
+     * Reset the entire store
+     */
+    reset(): void;
+    /**
+     * Get entries for a specific hook type
+     */
+    getEntries(type: HookType): unknown[];
+    /**
+     * Check if a hook type has entries
+     */
+    hasEntries(type: HookType): boolean;
+    /**
+     * Set visibility for a hook type
+     */
+    setVisibility(type: HookType, visible: boolean): void;
+    /**
+     * Check if a hook type is visible
+     */
+    isVisible(type: HookType): boolean;
+    /**
+     * Get filter list for UI
+     */
+    getFilterList(): HookFilterItem[];
+    /**
+     * Build tree nodes from all stored hook data
+     */
+    buildTree(): TreeNode[];
+    private transformEntries;
+    private transformEntry;
+    findScopeVariables(item: Record<string, unknown>): string;
+    /**
+     * Find all QRL paths for code lookup
+     */
+    findAllQrlPaths(): string[];
+    private extractQrlPath;
+}
+/**
+ * Static utilities for working with QRL objects
+ */
+export declare class QrlUtils {
+    /**
+     * Get the file path from a QRL object.
+     * In dev mode, uses dev.file; in production, uses $chunk$.
+     */
+    static getPath(qrl: QRLInternal | null | undefined): string | null;
+    /**
+     * Get the chunk name from a QRL for component identification
+     */
+    static getChunkName(qrl: QRLInternal): string;
+    /**
+     * Normalize raw qseq data with parsed structure metadata
+     */
+    static normalizeData(qseq: Record<string, unknown>[], parsed: ParsedStructure[]): ParsedStructure[];
+}
+/** Get the global hook store instance */
+export declare function getHookStore(): HookStore;
+export type { HookType };

package/dist/ui/lib-types/ui/src/features/RenderTree/index.d.ts

@@ -0,0 +1,6 @@
+export { RenderTree } from './RenderTree';
+export type { HookType, HookCategory, HookConfig, HookEntry, HookFilterItem, HookTreeResult, QRLDev, QRLInternalMethods, QRLInternal, } from './types';
+export { HOOK_TYPES, HOOK_CATEGORIES, HIDDEN_HOOKS, QRL_HOOKS, asQRLInternal, isQRLInternal, } from './types';
+export { TreeBuilder } from './TreeBuilder';
+export { getQwikState, getRenderStats, getAllComponentStates, filterUserDefinedHooks, transformQrlSequenceData } from './data';
+export { HookStore, QrlUtils, getHookStore } from './formatTreeData';

package/dist/ui/lib-types/ui/src/features/RenderTree/types.d.ts

@@ -0,0 +1,116 @@
+import type { TreeNode } from '../../components/Tree/Tree';
+import type { ParsedStructure } from '@devtools/kit';
+import type { QRL } from '@qwik.dev/core';
+export declare const HOOK_CATEGORIES: {
+    readonly VARIABLE_DECLARATION: "variableDeclaration";
+    readonly EXPRESSION_STATEMENT: "expressionStatement";
+    readonly SPECIAL: "special";
+};
+export type HookCategory = (typeof HOOK_CATEGORIES)[keyof typeof HOOK_CATEGORIES];
+/**
+ * All supported hook types in the devtools
+ */
+export declare const HOOK_TYPES: readonly ["useStore", "useSignal", "useContext", "useId", "useStyles", "useStylesScoped", "useConstant", "useComputed", "useAsyncComputed", "useErrorBoundary", "useServerData", "useSerializer", "useLocation", "useNavigate", "useContent", "useDocumentHead", "useTask", "useVisibleTask", "useResource", "useContextProvider", "usePreventNavigate", "props", "listens", "render", "customhook"];
+export type HookType = (typeof HOOK_TYPES)[number];
+/**
+ * Hooks that should be hidden from the filter list by default
+ */
+export declare const HIDDEN_HOOKS: readonly HookType[];
+/**
+ * Hooks that contain QRL references (used for code lookup)
+ */
+export declare const QRL_HOOKS: readonly HookType[];
+/**
+ * QRLDev contains development metadata.
+ * Exists in @qwik.dev/core but not exported as a type.
+ *
+ * @internal Runtime type from Qwik
+ */
+export interface QRLDev {
+    file: string;
+    lo: number;
+    hi: number;
+}
+/**
+ * Internal QRL properties that exist at runtime.
+ * These are part of `QRLInternalMethods` in @qwik.dev/core but NOT exported.
+ *
+ * @see QRLInternalMethods in @qwik.dev/core/dist/core-internal.d.ts (line 2240)
+ * @internal Runtime type from Qwik
+ */
+export interface QRLInternalMethods {
+    readonly $chunk$: string | null;
+    readonly $symbol$: string;
+    readonly $hash$: string;
+    $capture$: string[] | null;
+    $captureRef$: unknown[] | null;
+}
+/**
+ * QRL with internal properties accessible.
+ * Combines public QRL type with internal runtime properties.
+ *
+ * Note: `QRLInternal<T>` exists in Qwik but is NOT exported.
+ * We define our own to access `$chunk$` and `$captureRef$`.
+ */
+export type QRLInternal<T = unknown> = QRL<T> & QRLInternalMethods;
+/**
+ * Configuration for a hook type in the store
+ */
+export interface HookConfig {
+    /** Whether this hook type is visible in the UI filter */
+    visible: boolean;
+    /** Category of the hook for special handling */
+    category: HookCategory;
+}
+/**
+ * Entry stored in the hook data store
+ */
+export interface HookEntry<T = unknown> {
+    type: HookType;
+    data: T;
+    variableName?: string;
+    category?: string;
+}
+/**
+ * Props/Listens/Render entry (simple key-value)
+ */
+export interface SimpleHookEntry {
+    data: Record<string, unknown>;
+}
+/**
+ * Parsed hook entry with full metadata
+ */
+export interface ParsedHookEntry extends ParsedStructure {
+    data: unknown;
+}
+/**
+ * Options for tree node generation
+ */
+export interface TreeNodeOptions {
+    resetIdCounter?: boolean;
+}
+/**
+ * Result of building hook tree data
+ */
+export interface HookTreeResult {
+    nodes: TreeNode[];
+    filters: HookFilterItem[];
+}
+/**
+ * Filter item for the UI
+ */
+export interface HookFilterItem {
+    key: HookType;
+    display: boolean;
+}
+export declare function isSimpleHookEntry(entry: unknown): entry is SimpleHookEntry;
+export declare function isParsedHookEntry(entry: unknown): entry is ParsedHookEntry;
+/**
+ * Type guard to check if a QRL has internal properties accessible
+ */
+export declare function isQRLInternal(qrl: unknown): qrl is QRLInternal;
+/**
+ * Safely cast QRL to QRLInternal for accessing internal properties.
+ * Use this instead of `as unknown as Record<string, unknown>`.
+ */
+export declare function asQRLInternal<T>(qrl: QRL<T>): QRLInternal<T>;

package/dist/ui/lib-types/ui/src/types/state.d.ts

@@ -1,6 +1,6 @@
 import { AssetInfo, NpmInfo, RoutesInfo, Component } from '@devtools/kit';
 import { NoSerialize, Signal } from '@qwik.dev/core';
-export type TabName = 'overview' | 'packages' | 'routes' | 'state' | 'assets' | 'components' | 'inspect' | 'renderTree' | 'codeBreack';
+export type TabName = 'overview' | 'packages' | 'routes' | 'state' | 'assets' | 'components' | 'inspect' | 'renderTree' | 'codeBreack' | 'performance';
 export interface State {
     isOpen: Signal<boolean>;
     activeTab: TabName;

package/dist/ui/lib-types/ui/src/utils/shiki.d.ts

@@ -0,0 +1,2 @@
+import { type Highlighter } from 'shiki';
+export declare const getHighlighter: () => Promise<Highlighter>;

package/dist/ui/node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs

@@ -63,6 +63,24 @@ const HiBoltOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
   width: "1em",
   xmlns: "http://www.w3.org/2000/svg"
 }, 0, "z0_0");
+const HiClockOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
+  ...props,
+  children: /* @__PURE__ */ _jsxQ("path", null, {
+    d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, null, 3, null)
+}, {
+  "aria-hidden": "true",
+  "data-qwikest-icon": true,
+  fill: "none",
+  height: "1em",
+  stroke: "currentColor",
+  "stroke-width": "1.5",
+  viewBox: "0 0 24 24",
+  width: "1em",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 0, "l1_0");
 const HiCubeOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
   ...props,
   children: /* @__PURE__ */ _jsxQ("path", null, {
@@ -138,6 +156,7 @@ const HiSunOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
 export {
   HiBoltOutline,
   HiChevronUpMini,
+  HiClockOutline,
   HiCodeBracketSolid,
   HiCubeOutline,
   HiMegaphoneMini,

package/dist/ui/node_modules/.pnpm/debug@4.4.3_supports-color@5.5.0/node_modules/debug/src/browser.qwik.mjs

@@ -0,0 +1,177 @@
+import { __module as browser } from "../../../../../../_virtual/browser.qwik2.mjs";
+import { __require as requireCommon } from "./common.qwik.mjs";
+var hasRequiredBrowser;
+function requireBrowser() {
+  if (hasRequiredBrowser) return browser.exports;
+  hasRequiredBrowser = 1;
+  (function(module, exports) {
+    exports.formatArgs = formatArgs;
+    exports.save = save;
+    exports.load = load;
+    exports.useColors = useColors;
+    exports.storage = localstorage();
+    exports.destroy = /* @__PURE__ */ (() => {
+      let warned = false;
+      return () => {
+        if (!warned) {
+          warned = true;
+          console.warn("Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.");
+        }
+      };
+    })();
+    exports.colors = [
+      "#0000CC",
+      "#0000FF",
+      "#0033CC",
+      "#0033FF",
+      "#0066CC",
+      "#0066FF",
+      "#0099CC",
+      "#0099FF",
+      "#00CC00",
+      "#00CC33",
+      "#00CC66",
+      "#00CC99",
+      "#00CCCC",
+      "#00CCFF",
+      "#3300CC",
+      "#3300FF",
+      "#3333CC",
+      "#3333FF",
+      "#3366CC",
+      "#3366FF",
+      "#3399CC",
+      "#3399FF",
+      "#33CC00",
+      "#33CC33",
+      "#33CC66",
+      "#33CC99",
+      "#33CCCC",
+      "#33CCFF",
+      "#6600CC",
+      "#6600FF",
+      "#6633CC",
+      "#6633FF",
+      "#66CC00",
+      "#66CC33",
+      "#9900CC",
+      "#9900FF",
+      "#9933CC",
+      "#9933FF",
+      "#99CC00",
+      "#99CC33",
+      "#CC0000",
+      "#CC0033",
+      "#CC0066",
+      "#CC0099",
+      "#CC00CC",
+      "#CC00FF",
+      "#CC3300",
+      "#CC3333",
+      "#CC3366",
+      "#CC3399",
+      "#CC33CC",
+      "#CC33FF",
+      "#CC6600",
+      "#CC6633",
+      "#CC9900",
+      "#CC9933",
+      "#CCCC00",
+      "#CCCC33",
+      "#FF0000",
+      "#FF0033",
+      "#FF0066",
+      "#FF0099",
+      "#FF00CC",
+      "#FF00FF",
+      "#FF3300",
+      "#FF3333",
+      "#FF3366",
+      "#FF3399",
+      "#FF33CC",
+      "#FF33FF",
+      "#FF6600",
+      "#FF6633",
+      "#FF9900",
+      "#FF9933",
+      "#FFCC00",
+      "#FFCC33"
+    ];
+    function useColors() {
+      if (typeof window !== "undefined" && window.process && (window.process.type === "renderer" || window.process.__nwjs)) {
+        return true;
+      }
+      if (typeof navigator !== "undefined" && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
+        return false;
+      }
+      let m;
+      return typeof document !== "undefined" && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || // Is firebug? http://stackoverflow.com/a/398120/376773
+      typeof window !== "undefined" && window.console && (window.console.firebug || window.console.exception && window.console.table) || // Is firefox >= v31?
+      // https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
+      typeof navigator !== "undefined" && navigator.userAgent && (m = navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)) && parseInt(m[1], 10) >= 31 || // Double check webkit in userAgent just in case we are in a worker
+      typeof navigator !== "undefined" && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
+    }
+    function formatArgs(args) {
+      args[0] = (this.useColors ? "%c" : "") + this.namespace + (this.useColors ? " %c" : " ") + args[0] + (this.useColors ? "%c " : " ") + "+" + module.exports.humanize(this.diff);
+      if (!this.useColors) {
+        return;
+      }
+      const c = "color: " + this.color;
+      args.splice(1, 0, c, "color: inherit");
+      let index = 0;
+      let lastC = 0;
+      args[0].replace(/%[a-zA-Z%]/g, (match) => {
+        if (match === "%%") {
+          return;
+        }
+        index++;
+        if (match === "%c") {
+          lastC = index;
+        }
+      });
+      args.splice(lastC, 0, c);
+    }
+    exports.log = console.debug || console.log || (() => {
+    });
+    function save(namespaces) {
+      try {
+        if (namespaces) {
+          exports.storage.setItem("debug", namespaces);
+        } else {
+          exports.storage.removeItem("debug");
+        }
+      } catch (error) {
+      }
+    }
+    function load() {
+      let r;
+      try {
+        r = exports.storage.getItem("debug") || exports.storage.getItem("DEBUG");
+      } catch (error) {
+      }
+      if (!r && typeof process !== "undefined" && "env" in process) {
+        r = process.env.DEBUG;
+      }
+      return r;
+    }
+    function localstorage() {
+      try {
+        return localStorage;
+      } catch (error) {
+      }
+    }
+    module.exports = requireCommon()(exports);
+    const { formatters } = module.exports;
+    formatters.j = function(v) {
+      try {
+        return JSON.stringify(v);
+      } catch (error) {
+        return "[UnexpectedJSONParseError]: " + error.message;
+      }
+    };
+  })(browser, browser.exports);
+  return browser.exports;
+}
+export {
+  requireBrowser as __require
+};