npm - @qwik.dev/devtools - Versions diffs - 0.2.5 → 0.2.7 - Mend

@@ -0,0 +1,66 @@
+//#region src/features/inspect/iframe-theme.ts
+var STYLE_ID = "qwik-inspect-custom-style";
+var GLASSMORPHISM_CSS = `
+  :root {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
+  }
+  html.dark {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(255, 255, 255, 0.08) !important;
+    --iframe-hover: rgba(255, 255, 255, 0.06) !important;
+    color-scheme: dark;
+  }
+  /* 仅针对主视图容器做透明处理，不再暴力让所有 div/section 变透明 */
+  html, body, #app, main, header, nav, footer { background-color: transparent !important; }
+  .bg-active, .hover\\\\:bg-active:hover, tr:hover, li:hover,
+  .hover\\\\:bg-gray-400\\\\/10:hover, a:hover { background-color: var(--iframe-hover) !important; }
+  input, button, select, [role="button"] { background-color: var(--iframe-hover) !important; }
+  .border-base, [class*="border-b"], [class*="border-r"],
+  [class*="border-t"], [class*="border-l"], .border { border-color: var(--iframe-border) !important; }
+  html.dark { color: #fafafa !important; }
+  html, body, #app { overflow-x: hidden !important; max-width: 100vw !important; }
+`;
+/** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */ function setupIframeThemeSync(iframe) {
+	const doc = iframe.contentDocument;
+	const win = iframe.contentWindow;
+	if (!doc || !win) return;
+	const syncTheme = () => {
+		const dark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark";
+		win.localStorage.setItem("vueuse-color-scheme", dark ? "dark" : "light");
+		if (dark) doc.documentElement.classList.add("dark");
+		else doc.documentElement.classList.remove("dark");
+	};
+	const ensureStyle = () => {
+		if (!doc.getElementById(STYLE_ID)) {
+			const s = doc.createElement("style");
+			s.id = STYLE_ID;
+			s.textContent = GLASSMORPHISM_CSS;
+			doc.head.appendChild(s);
+		}
+	};
+	syncTheme();
+	ensureStyle();
+	const themeObs = new MutationObserver(syncTheme);
+	themeObs.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"]
+	});
+	const styleObs = new MutationObserver(ensureStyle);
+	styleObs.observe(doc.body || doc.documentElement, {
+		childList: true,
+		subtree: true
+	});
+	doc.defaultView?.addEventListener("unload", () => {
+		themeObs.disconnect();
+		styleObs.disconnect();
+	});
+}
+//#endregion
+export { setupIframeThemeSync };

@@ -1,4 +1,2 @@
 import { QwikDevtools } from "./devtools.qwik.mjs";
-export {
-  QwikDevtools
-};
+export { QwikDevtools };

@@ -2,7 +2,7 @@ import { ViteClientContext, ViteServerContext } from './globals';
 import { ServerRpc, ClientRpc } from './types';
 export declare function getViteClientContext(): ViteClientContext;
 export declare function setViteClientContext(ctx: ViteClientContext): void;
-export declare function getViteServerContext(): import("vite").ViteDevServer;
+export declare function getViteServerContext(): ViteServerContext;
 export declare function setViteServerContext(ctx: ViteServerContext): void;
 export declare function getViteServerRpc(): ServerRpc;
 export declare function setViteServerRpc(rpc: ServerRpc): void;

@@ -0,0 +1,19 @@
+type IconProps = {
+    class?: string;
+    style?: Record<string, string>;
+    title?: string;
+};
+export declare const IconSunOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconMoonOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconSparkles: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconChevronUpMini: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconBoltOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconCubeOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconDiagram3: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconFolderTree: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconPhotoOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconMegaphoneMini: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconCodeBracketSolid: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconClockOutline: import("@qwik.dev/core").Component<IconProps>;
+export declare const IconXMark: import("@qwik.dev/core").Component<IconProps>;
+export {};

@@ -1,3 +1,4 @@
+import './themToggle.css';
 type ThemeName = 'dark' | 'light' | 'auto';
 export declare const getTheme: () => ThemeName;
 export declare const setTheme: (theme: ThemeName) => void;

@@ -1,22 +1,14 @@
-import { QRL } from '@qwik.dev/core';
+import { type QRL } from '@qwik.dev/core';
 import type { JSXOutput, Signal } from '@qwik.dev/core';
-export interface TreeNode {
-    name?: string | 'text';
-    props?: Record<string, any>;
-    element?: Record<string, any>;
-    children?: TreeNode[];
-    elementType?: string;
-    label?: string;
+import type { TreeNode } from './type';
+export interface TreeProps {
+    data: Signal<TreeNode[]>;
+    onNodeClick?: QRL<(node: TreeNode) => void>;
+    renderNode?: QRL<(node: TreeNode) => JSXOutput>;
+    gap?: number;
     isHover?: boolean;
-    id: string;
+    animate?: boolean;
+    animationDuration?: number;
+    expandLevel?: number;
 }
-export declare const Tree: import("@qwik.dev/core").Component<{
-    data: Signal<TreeNode[]>;
-    onNodeClick?: QRL<(node: TreeNode) => void> | undefined;
-    renderNode?: QRL<(node: TreeNode) => JSXOutput> | undefined;
-    gap?: number | undefined;
-    isHover?: boolean | undefined;
-    animate?: boolean | undefined;
-    animationDuration?: number | undefined;
-    expandLevel?: number | undefined;
-}>;
+export declare const Tree: import("@qwik.dev/core").Component<TreeProps>;

@@ -1,3 +1,3 @@
 import { _VNode } from '@qwik.dev/core/internal';
-import { TreeNode } from './Tree';
+import { TreeNode } from './type';
 export declare function vnode_toObject(vnodeItem: _VNode | null): TreeNode[] | null;

@@ -1,3 +1,21 @@
 export declare const ISDEVTOOL = "Qwikdevtools";
 export declare const QContainerAttr = "q:container";
-export type StoreTarget = Record<string | symbol, any>;
+/**
+ * A value stored inside a Qwik reactive store proxy.
+ * We intentionally keep a narrow union so that `Record<string | symbol, StoreValue>`
+ * is assignable without falling back to `any`.
+ */
+export type StoreValue = string | number | boolean | null | undefined | object;
+export type StoreTarget = Record<string | symbol, StoreValue>;
+/** Value types that a Qwik VNode prop can hold. */
+export type TreeNodePropValue = string | number | boolean | null | undefined | object;
+export type ElementType = 'null' | 'boolean' | 'number' | 'string' | 'function' | 'array' | 'object';
+export interface TreeNode {
+    name?: string;
+    props?: Record<string, TreeNodePropValue>;
+    children?: TreeNode[];
+    elementType?: ElementType;
+    label?: string;
+    isHover?: boolean;
+    id: string;
+}

	@@ -1 +1,2 @@
1	+ import './global.css';
1 2	export declare const QwikDevtools: import("@qwik.dev/core").Component<unknown>;

@@ -1,4 +1,4 @@
-import type { TreeNode } from '../../components/Tree/Tree';
+import type { TreeNode } from '../../components/Tree/type';
 /**
  * Builder class for creating TreeNode structures from objects.
  * Handles all types of data transformation to tree format.

@@ -1,6 +1,6 @@
-import type { TreeNode } from '../../components/Tree/Tree';
+import type { TreeNode } from '../../components/Tree/type';
 import type { ParsedStructure } from '@devtools/kit';
-import { type HookType, type HookFilterItem, type QRLInternal } from './types';
+import { type HookType, type HookFilterItem, type QRLInternal, type HookDataEntry } from './types';
 /**
  * Manages hook data storage and tree building for the devtools.
  */
@@ -12,9 +12,7 @@ export declare class HookStore {
     /**
      * Add data to the store for a specific hook type
      */
-    add(type: HookType, data: ParsedStructure | {
-        data: Record<string, unknown>;
-    }): void;
+    add(type: HookType, data: HookDataEntry): void;
     /**
      * Clear all stored hook data
      */
@@ -26,7 +24,7 @@ export declare class HookStore {
     /**
      * Get entries for a specific hook type
      */
-    getEntries(type: HookType): unknown[];
+    getEntries(type: HookType): HookDataEntry[];
     /**
      * Check if a hook type has entries
      */
@@ -49,7 +47,7 @@ export declare class HookStore {
     buildTree(): TreeNode[];
     private transformEntries;
     private transformEntry;
-    findScopeVariables(item: Record<string, unknown>): string;
+    findScopeVariables(item: HookDataEntry): string;
     /**
      * Find all QRL paths for code lookup
      */

@@ -1,4 +1,4 @@
-import type { TreeNode } from '../../components/Tree/Tree';
+import type { TreeNode } from '../../components/Tree/type';
 import type { ParsedStructure } from '@devtools/kit';
 import type { QRL } from '@qwik.dev/core';
 export declare const HOOK_CATEGORIES: {
@@ -42,8 +42,11 @@ export interface QRLInternalMethods {
     readonly $chunk$: string | null;
     readonly $symbol$: string;
     readonly $hash$: string;
-    $capture$: string[] | null;
-    $captureRef$: unknown[] | null;
+    $captures$: Readonly<unknown[]> | string | null;
+    dev?: QRLDev | null;
+    getSymbol(): string;
+    getHash(): string;
+    getCaptured(): unknown[] | null;
 }
 /**
  * QRL with internal properties accessible.
@@ -83,6 +86,7 @@ export interface SimpleHookEntry {
 export interface ParsedHookEntry extends ParsedStructure {
     data: unknown;
 }
+export type HookDataEntry = SimpleHookEntry | ParsedHookEntry;
 /**
  * Options for tree node generation
  */

	@@ -0,0 +1,2 @@
1	+ /** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */
2	+ export declare function setupIframeThemeSync(iframe: HTMLIFrameElement): void;

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

@@ -1,2 +1,2 @@
-export declare function getVnodeById(id: string | number): unknown;
+export declare function getVnodeById(id: string | number): {} | null;
 export declare function getIndexByObject(obj: unknown): number | null;

@@ -1,2 +1,5 @@
 export declare const isListen: (str: string) => boolean;
-export declare const isValue: (value: any) => boolean;
+export declare const isValue: (value: object) => value is {
+    untrackedValue: unknown;
+    value: unknown;
+};

@qwik.dev/devtools 0.2.5 → 0.2.7