Merge branch 'QwikDev:main' into main

Author: JerryWu1234

.changeset/hungry-stingrays-attack.md

@@ -0,0 +1,44 @@
+<!--
+The Qwik Team and Community appreciate all PRs. Thank you for your effort! Not all PRs can be merged, but those that meet the following criteria will be prioritized:
+
+a) Core fixes, and
+
+b) Framework functionality achievable only by the core.
+
+If this PR can be done as a 3rd-Party Community Add-On, we encourage that for quicker adoption.
+
+If you believe your functionality is valuable to the entire Qwik Community, discuss it in the Qwik Discord channels for potential inclusion in the core.
+
+First of all, make sure your PR title is descriptive and matches our commit title guidelines.
+
+Also make sure your PR follows all the guidelines in the [CONTRIBUTING.md](./CONTRIBUTING.md) document.
+
+-->
+
+# What is it?
+
+<!-- pick one and remove the others -->
+
+- Feature / enhancement
+- Bug
+- Docs / tests / types / typos
+- Infra
+
+# Description
+
+<!--
+* Include a summary of the motivation and context for this PR
+* Is it related to any opened issues? (please add them here)
+-->
+
+# Checklist
+
+<!--
+* delete the items that are not relevant, so it's easy to tell if the PR is ready to be merged
+* add items that are relevant and need to be done before merging
+-->
+
+- [ ] My code follows the [developer guidelines of this project](https://github.com/QwikDev/devtools/blob/main/CONTRIBUTING.md)
+- [ ] I performed a self-review of my own code
+- [ ] I added a changeset with `pnpm change`
+- [ ] I added new tests to cover the fix / functionality

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,7 +3,6 @@
   "license": "MIT",
   "description": "Qwik devtools monorepo",
   "scripts": {
-    "dev": "pnpm --filter plugin build && MODE=dev pnpm --parallel dev",
     "playground": "MODE=dev DEBUG=qwik:devtools:* pnpm --filter playground dev",
     "build": "tsx scripts/build-devtools.ts",
     "change": "changeset",

package.json

@@ -1,5 +1,12 @@
 # @qwik.dev/devtools
 
+## 0.2.2
+
+### Patch Changes
+
+- 64805a3: CHORE: add debug log and format
+- 394278e: feat: add performance tab
+
 ## 0.2.1
 
 ### Patch Changes

packages/devtools/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",
@@ -24,8 +24,8 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "vite": "7.1.3",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",

packages/devtools/package.json

@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "7.16.1",
     "cpy-cli": "^5.0.0",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-beta.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "np": "^8.0.4",
     "prettier": "3.3.3",
     "typescript": "5.4.5",

packages/kit/package.json

@@ -9,34 +9,37 @@ import {
 } from './globals';
 import { ServerRpc, ClientRpc } from './types';
 
+type GlobalTarget = Record<string, unknown>;
+const t = target as unknown as GlobalTarget;
+
 export function getViteClientContext(): ViteClientContext {
-  return target[CLIENT_CTX];
+  return t[CLIENT_CTX] as ViteClientContext;
 }
 
 export function setViteClientContext(ctx: ViteClientContext) {
-  target[CLIENT_CTX] = ctx;
+  t[CLIENT_CTX] = ctx;
 }
 
 export function getViteServerContext() {
-  return target[SERVER_CTX];
+  return t[SERVER_CTX] as ViteServerContext;
 }
 
 export function setViteServerContext(ctx: ViteServerContext) {
-  target[SERVER_CTX] = ctx;
+  t[SERVER_CTX] = ctx;
 }
 
 export function getViteServerRpc() {
-  return target[SERVER_RPC];
+  return t[SERVER_RPC] as ServerRpc;
 }
 
 export function setViteServerRpc(rpc: ServerRpc) {
-  target[SERVER_RPC] = rpc;
+  t[SERVER_RPC] = rpc;
 }
 
 export function getViteClientRpc() {
-  return target[CLIENT_RPC];
+  return t[CLIENT_RPC] as ClientRpc;
 }
 
 export function setViteClientRpc(rpc: ClientRpc) {
-  target[CLIENT_RPC] = rpc;
+  t[CLIENT_RPC] = rpc;
 }

packages/kit/src/context.ts

@@ -1,5 +1,5 @@
 import { ViteDevServer } from 'vite';
-import { ClientRpc, ServerRpc } from './types';
+import { ClientRpc, ParsedStructure, ServerRpc } from './types';
 
 interface EventEmitter {
   on: (name: string, handler: (data: any) => void) => void;
@@ -14,9 +14,71 @@ export const SERVER_CTX = '__qwik_server_ctx__';
 export const SERVER_RPC = '__qwik_server_rpc__';
 export const CLIENT_RPC = '__qwik_client_rpc__';
 
+// Devtools global state types
+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;
+  // SSR collector lives on `process` (preferred) or `globalThis` via dynamic properties.
+  // We type the `process` case here to avoid `any` in plugin code.
+  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>;
+    }
+  }
 }

packages/kit/src/globals.ts

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

packages/kit/src/index.ts

@@ -17,7 +17,7 @@
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.types": "tsc --incremental --noEmit",
     "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
-    "dev": "MODE=dev  vite --mode ssr",
+    "dev": "MODE=dev  vite --mode ssr --port 5174",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
@@ -29,14 +29,14 @@
   "devDependencies": {
     "@devtools/plugin": "workspace:*",
     "@devtools/ui": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-beta.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
     "vite": "7.1.3",