@qwik.dev/devtools 0.2.0 → 0.2.2

package/dist/ui/lib-types/kit/src/globals.d.ts

@@ -1,5 +1,5 @@
 import { ViteDevServer } from 'vite';
-import { ClientRpc, ServerRpc } from './types';
+import { ParsedStructure } from './types';
 interface EventEmitter {
     on: (name: string, handler: (data: any) => void) => void;
     send: (name: string, ...args: any[]) => void;
@@ -11,10 +11,61 @@ export declare const CLIENT_CTX = "__qwik_client_ctx__";
 export declare const SERVER_CTX = "__qwik_server_ctx__";
 export declare const SERVER_RPC = "__qwik_server_rpc__";
 export declare const CLIENT_RPC = "__qwik_client_rpc__";
+export type QwikPerfPhaseRemembered = 'ssr' | 'csr';
+export interface QwikPerfErrorRemembered {
+    name: string;
+    message: string;
+}
+export interface QwikPerfEntryRemembered {
+    id: number;
+    component: string;
+    phase: QwikPerfPhaseRemembered;
+    duration: number;
+    start: number;
+    end: number;
+    error?: QwikPerfErrorRemembered;
+    /**
+     * Present for wrapped `_component_` render-function modules; helps de-dupe.
+     */
+    viteId?: string;
+    /**
+     * Present for wrapped `_component_` render-function modules.
+     */
+    renderCount?: number;
+}
+export interface QwikPerfStoreRemembered {
+    ssr: QwikPerfEntryRemembered[];
+    csr: QwikPerfEntryRemembered[];
+}
+export interface DevtoolsRenderStats {
+    /**
+     * In-memory performance store written by devtools instrumentation.
+     * (Populated at runtime; optional in types.)
+     */
+    perf?: QwikPerfStoreRemembered;
+}
+export interface ComponentDevtoolsState {
+    hooks: ParsedStructure[];
+    stats: DevtoolsRenderStats;
+}
+declare global {
+    interface Window {
+        QWIK_DEVTOOLS_GLOBAL_STATE?: Record<string, ComponentDevtoolsState>;
+        /**
+         * Performance store (CSR + injected SSR snapshot).
+         * Written by `@devtools/plugin` instrumentation.
+         */
+        __QWIK_PERF__?: QwikPerfStoreRemembered;
+    }
+}
 declare global {
-    var __qwik_client_ctx__: ViteClientContext;
-    var __qwik_server_ctx__: ViteServerContext;
-    var __qwik_server_rpc__: ServerRpc;
-    var __qwik_client_rpc__: ClientRpc;
+    namespace NodeJS {
+        interface Process {
+            __QWIK_SSR_PERF__?: QwikPerfEntryRemembered[];
+            __QWIK_SSR_PERF_SET__?: Set<string>;
+            __QWIK_SSR_PERF_ID__?: number;
+            __QWIK_SSR_PERF_INDEX__?: Record<string, number>;
+        }
+    }
 }
 export {};

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

@@ -3,3 +3,4 @@ export * from './server';
 export * from './context';
 export * from './types';
 export * from './constants';
+export * from './globals';

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

@@ -11,6 +11,7 @@ export interface ServerFunctions {
     getComponents: () => Promise<Component[]>;
     getRoutes: () => any;
     getQwikPackages: () => Promise<[string, string][]>;
+    getAllDependencies: () => Promise<any[]>;
     installPackage: (packageName: string, isDev?: boolean) => Promise<{
         success: boolean;
         error?: string;

package/dist/ui/lib-types/ui/src/components/ThemeToggle/{ThemeToggle.d.ts → QwikThemeToggle.d.ts}

@@ -1,5 +1,5 @@
 type ThemeName = 'dark' | 'light' | 'auto';
 export declare const getTheme: () => ThemeName;
 export declare const setTheme: (theme: ThemeName) => void;
-export declare const ThemeToggle: import("@qwik.dev/core").Component<unknown>;
+export declare const QwikThemeToggle: import("@qwik.dev/core").Component<unknown>;
 export {};

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

@@ -0,0 +1 @@
+export declare const CodeBreack: import("@qwik.dev/core").Component<unknown>;

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

@@ -0,0 +1 @@
+export declare const HtmlParser: import("@qwik.dev/core").Component<unknown>;

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

@@ -0,0 +1 @@
+export declare const StateParser: import("@qwik.dev/core").Component<unknown>;

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

@@ -1 +1,6 @@
-export declare const Packages: import("@qwik.dev/core").Component<unknown>;
+import { State } from '../../types/state';
+interface PackagesProps {
+    state: State;
+}
+export declare const Packages: import("@qwik.dev/core").Component<PackagesProps>;
+export {};

package/dist/ui/lib-types/ui/src/features/Packages/components/DependencyCard/DependencyCard.d.ts

@@ -0,0 +1,4 @@
+import { Package } from '../../types';
+export declare const DependencyCard: import("@qwik.dev/core").Component<{
+    pkg: Package;
+}>;

package/dist/ui/lib-types/ui/src/features/Packages/components/DependencyCard/index.d.ts

@@ -0,0 +1 @@
+export { DependencyCard } from './DependencyCard';

package/dist/ui/lib-types/ui/src/features/Packages/components/PackageIcon/PackageIcon.d.ts

@@ -0,0 +1,6 @@
+interface PackageIconProps {
+    packageName: string;
+    iconUrl?: string | null;
+}
+export declare const PackageIcon: import("@qwik.dev/core").Component<PackageIconProps>;
+export {};

package/dist/ui/lib-types/ui/src/features/Packages/components/PackageIcon/index.d.ts

@@ -0,0 +1 @@
+export { PackageIcon } from './PackageIcon';

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

@@ -2,4 +2,15 @@ export interface Package {
     name: string;
     version: string;
     description: string;
+    author?: {
+        name: string;
+        email?: string;
+        url?: string;
+    };
+    authorAvatar?: string;
+    packageAvatar?: string;
+    homepage?: string;
+    repository?: string;
+    npmUrl?: string;
+    iconUrl?: string | null;
 }

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

@@ -0,0 +1 @@
+export declare const Performance: import("@qwik.dev/core").Component<unknown>;

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

@@ -0,0 +1,33 @@
+import type { QwikPerfStoreRemembered } from '@devtools/kit';
+import { type PerfGroupedCsrItem, type PerfSsrItem } from './transformPerformanceData';
+export type PerfPayload = QwikPerfStoreRemembered;
+export interface PerfOverviewVm {
+    totalRenderTime: number;
+    totalCalls: number;
+    avgTime: number;
+    slowestComponent?: {
+        componentName: string;
+        avgTime: number;
+        totalTime: number;
+        calls: number;
+    };
+}
+export interface PerfComponentVm {
+    componentName: string;
+    totalTime: number;
+    calls: number;
+    avgTime: number;
+    ssr?: PerfSsrItem;
+    csrItems: PerfGroupedCsrItem[];
+}
+export interface PerfEventVm {
+    eventName: string;
+    time: number;
+    calls: number;
+}
+export interface PerfViewModel {
+    overview: PerfOverviewVm;
+    components: PerfComponentVm[];
+}
+export declare function computeEventRows(csrItems: PerfGroupedCsrItem[]): PerfEventVm[];
+export declare function computePerfViewModel(perf: PerfPayload | undefined | null): PerfViewModel;

package/dist/ui/lib-types/ui/src/features/Performance/computePerfViewModel.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+import type { QwikPerfEntryRemembered, QwikPerfStoreRemembered } from '@devtools/kit';
+export type PerfPayload = QwikPerfStoreRemembered;
+export type PerfSsrItem = QwikPerfEntryRemembered & {
+    phase: 'ssr';
+    ssrCount?: number;
+};
+export type PerfCsrItem = QwikPerfEntryRemembered & {
+    phase: 'csr';
+};
+export interface PerfParsedNames {
+    componentName: string;
+    eventName?: string;
+}
+export declare function parseComponentAndEventName(component: string): PerfParsedNames;
+/**
+ * Groups CSR records by SSR component name (split by `_component_`).
+ * - key: the SSR item object reference (WeakMap key)
+ * - value: CSR list belonging to that SSR component
+ * - unmatched CSR items: dropped
+ */
+export type PerfGroupedCsrItem = PerfCsrItem & PerfParsedNames;
+export declare function groupCsrBySsr(data: PerfPayload): WeakMap<PerfSsrItem, PerfGroupedCsrItem[]>;

package/dist/ui/lib-types/ui/src/features/Performance/transformPerformanceData.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,60 @@
+import type { TreeNode } from '../../components/Tree/Tree';
+/**
+ * Builder class for creating TreeNode structures from objects.
+ * Handles all types of data transformation to tree format.
+ */
+export declare class TreeBuilder {
+    private idCounter;
+    /**
+     * Generate a unique ID for a tree node
+     */
+    private generateId;
+    /**
+     * Reset the ID counter (useful for testing)
+     */
+    resetIdCounter(): void;
+    /**
+     * Create a group node (parent node with children)
+     */
+    createGroupNode(label: string, children?: TreeNode[]): TreeNode;
+    /**
+     * Convert any object to TreeNode array
+     */
+    objectToTree(obj: unknown, parentPath?: string): TreeNode[];
+    /**
+     * Convert array to TreeNode array
+     */
+    private arrayToTree;
+    /**
+     * Convert object properties to TreeNode array
+     */
+    private objectPropertiesToTree;
+    /**
+     * Create a single TreeNode from a value
+     */
+    private createNode;
+    /**
+     * Try to create a primitive node (boolean, number, string, function)
+     */
+    private tryCreatePrimitiveNode;
+    /**
+     * Create a node for primitive values
+     */
+    private createPrimitiveNode;
+    /**
+     * Create a node for function values
+     */
+    private createFunctionNode;
+    /**
+     * Create a node for array values
+     */
+    private createArrayNode;
+    /**
+     * Create a node for object values
+     */
+    private createObjectNode;
+    /**
+     * Create a node for class instances (non-plain objects)
+     */
+    private createClassInstanceNode;
+}

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

@@ -1,4 +1,35 @@
-import { ParsedStructure } from '@devtools/kit';
-export declare const findInnerHook: (allSeq: Record<any, any>[]) => Record<any, any>[];
-export declare const getQwikState: (qrl: string) => ParsedStructure[];
-export declare const returnQrlData: (seqs: Record<any, any>) => any;
+import { COMPUTED_QRL_KEY, QRL_KEY } from '@devtools/kit';
+import type { ParsedStructure, ComponentDevtoolsState, DevtoolsRenderStats } from '@devtools/kit';
+import type { QRLInternal } from './types';
+/**
+ * Sequence entry from Qwik's q:seq containing QRL references.
+ * Can have either $qrl$ (for tasks) or $computeQrl$ (for computed).
+ */
+interface QSeqEntry {
+    [QRL_KEY]?: QRLInternal;
+    [COMPUTED_QRL_KEY]?: QRLInternal;
+}
+/**
+ * Filter sequence data to only include user-defined hooks
+ * (excludes internal devtools hooks like useCollectHooks)
+ */
+export declare function filterUserDefinedHooks(allSeq: QSeqEntry[]): QSeqEntry[];
+/**
+ * Get parsed structure from global devtools state by QRL chunk name
+ */
+export declare function getQwikState(qrlChunkName: string): ParsedStructure[];
+/**
+ * Get render stats from global devtools state by QRL chunk name
+ */
+export declare function getRenderStats(qrlChunkName: string): DevtoolsRenderStats | null;
+/**
+ * Get all component states from global devtools state
+ */
+export declare function getAllComponentStates(): Record<string, ComponentDevtoolsState>;
+/**
+ * Transform QRL sequence data to normalized parsed structure format
+ */
+export declare function transformQrlSequenceData(seqs: QSeqEntry[]): ParsedStructure[];
+export declare const findInnerHook: typeof filterUserDefinedHooks;
+export declare const returnQrlData: typeof transformQrlSequenceData;
+export {};

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';