diff --git a/.changeset/hungry-stingrays-attack.md b/.changeset/hungry-stingrays-attack.md new file mode 100644 index 0000000..5084503 --- /dev/null +++ b/.changeset/hungry-stingrays-attack.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/devtools': patch +--- + +CHORE: add debug log and format diff --git a/package.json b/package.json index adbddd3..ac498e6 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Qwik devtools monorepo", "scripts": { "dev": "pnpm --filter plugin build && MODE=dev pnpm --parallel dev", - "playground": "MODE=dev pnpm --filter playground dev", + "playground": "MODE=dev DEBUG=qwik:devtools:* pnpm --filter playground dev", "build": "tsx scripts/build-devtools.ts", "change": "changeset", "release": "changeset publish", @@ -17,7 +17,9 @@ "@types/node": "^22.10.5", "tsdown": "^0.9.6", "tsx": "^4.19.2", - "vitest": "^3.2.4" + "vitest": "^3.2.4", + "debug": "4.4.3", + "@types/debug": "4.1.12" }, "private": true, "keywords": [ diff --git a/packages/playgrounds/src/root.tsx b/packages/playgrounds/src/root.tsx index e9b2724..55dce1c 100644 --- a/packages/playgrounds/src/root.tsx +++ b/packages/playgrounds/src/root.tsx @@ -7,7 +7,6 @@ import { } from '@qwik.dev/router'; import { RouterHead } from './components/router-head/router-head'; import './global.css'; -import '../../devtools/dist/ui/style.css'; export default component$(() => { /** * The root of a QwikRouter site always start with the component, diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts index 4ce84b7..b29fd1b 100644 --- a/packages/plugin/src/index.ts +++ b/packages/plugin/src/index.ts @@ -6,8 +6,9 @@ import useCollectHooksSource from './utils/useCollectHooks' import { parseQwikCode } from './parse/parse'; import { startPreloading } from './npm/index'; import updateConf from './utils/updateConf'; +import {debug} from 'debug' - +const log = debug('qwik:devtools:plugin'); export function qwikDevtools(): Plugin[] { let _config: ResolvedConfig; const qwikData = new Map(); @@ -47,7 +48,7 @@ export function qwikDevtools(): Plugin[] { if (!preloadStarted) { preloadStarted = true; startPreloading({ config: _config }).catch((err) => { - console.error('[Qwik DevTools] Failed to start preloading:', err); + log('[Qwik DevTools] Failed to start preloading:', err); }); } }, @@ -62,7 +63,7 @@ export function qwikDevtools(): Plugin[] { const importLine = `import { ${INNER_USE_HOOK} } from '${VIRTUAL_QWIK_DEVTOOLS_KEY}';\n` code = importLine + code }else { - console.log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code); + log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code); } code = parseQwikCode(code, {path: id}) } diff --git a/packages/plugin/src/inspect/index.ts b/packages/plugin/src/inspect/index.ts index d21b169..894091c 100644 --- a/packages/plugin/src/inspect/index.ts +++ b/packages/plugin/src/inspect/index.ts @@ -1,6 +1,9 @@ import fs from 'node:fs/promises' import { parseQwikCode } from "../parse/parse"; import { ServerContext } from "../types"; +import {debug} from 'debug' + +const log = debug('qwik:devtools:inspect'); const codeStringCache = new Map>() function parseCodeWithCache(code: string) { @@ -41,7 +44,7 @@ export function getModulesContent(ctx: ServerContext) { modules }; } catch (error) { - console.log(`Failed to transform request for ${pathId}:`, error); + log(`Failed to transform request for ${pathId}:`, error); return { pathId, modules: null, @@ -98,7 +101,7 @@ export function getModulesContent(ctx: ServerContext) { return [] } catch (error) { - console.error(`Failed to parse qwik code for ${pathId}:`, error); + log(`Failed to parse qwik code for ${pathId}:`, error); return [] } diff --git a/packages/plugin/src/npm/index.ts b/packages/plugin/src/npm/index.ts index e053fbf..c348a01 100644 --- a/packages/plugin/src/npm/index.ts +++ b/packages/plugin/src/npm/index.ts @@ -3,7 +3,9 @@ import fsp from 'node:fs/promises'; import { NpmInfo } from '@devtools/kit'; import { execSync } from 'child_process'; import path from 'path'; +import {debug} from 'debug' +const log = debug('qwik:devtools:npm'); // In-memory cache for npm package information interface CacheEntry { data: any; @@ -100,17 +102,17 @@ export async function detectPackageManager( // Preload dependencies function - moved to module scope const preloadDependencies = async (config: any): Promise => { if (preloadedDependencies) { - console.log('[Qwik DevTools] Dependencies already preloaded'); + log('[Qwik DevTools] Dependencies already preloaded'); return preloadedDependencies; } if (isPreloading && preloadPromise) { - console.log('[Qwik DevTools] Preloading already in progress...'); + log('[Qwik DevTools] Preloading already in progress...'); return preloadPromise; } isPreloading = true; - console.log('[Qwik DevTools] Starting to preload dependencies...'); + log('[Qwik DevTools] Starting to preload dependencies...'); preloadPromise = (async () => { const startDir = getProjectStartDirFromConfig(config); @@ -119,7 +121,7 @@ const preloadDependencies = async (config: any): Promise => { if (!pathToPackageJson) { preloadedDependencies = []; isPreloading = false; - console.log('[Qwik DevTools] No package.json found'); + log('[Qwik DevTools] No package.json found'); return []; } @@ -163,7 +165,7 @@ const preloadDependencies = async (config: any): Promise => { const fetchedPackages: any[] = []; - console.log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`); + log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`); const allBatchPromises = batches.map(async (batch) => { const batchPromises = batch.map(async ([name, version]) => { @@ -253,11 +255,11 @@ const preloadDependencies = async (config: any): Promise => { preloadedDependencies = allPackages; isPreloading = false; - console.log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`); + log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`); return allPackages; } catch (error) { - console.error('[Qwik DevTools] ✗ Failed to preload dependencies:', error); + log('[Qwik DevTools] ✗ Failed to preload dependencies:', error); preloadedDependencies = []; isPreloading = false; return []; @@ -270,14 +272,14 @@ const preloadDependencies = async (config: any): Promise => { // Export function to start preloading from plugin initialization export async function startPreloading({ config }: { config: any }) { const startTime = Date.now(); - console.log('[Qwik DevTools] 🚀 Initiating dependency preload (background)...'); + log('[Qwik DevTools] 🚀 Initiating dependency preload (background)...'); // Start preloading in background, don't wait for it preloadDependencies(config).then(() => { const duration = ((Date.now() - startTime) / 1000).toFixed(2); - console.log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`); + log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`); }).catch((err) => { - console.error('[Qwik DevTools] ✗ Preload failed:', err); + log('[Qwik DevTools] ✗ Preload failed:', err); }); // Return immediately, don't block @@ -305,18 +307,18 @@ export function getNpmFunctions({ config }: ServerContext) { async getAllDependencies(): Promise { // Return preloaded data immediately if available if (preloadedDependencies) { - console.log('[Qwik DevTools] Returning preloaded dependencies'); + log('[Qwik DevTools] Returning preloaded dependencies'); return preloadedDependencies; } // If preloading is in progress, wait for it if (isPreloading && preloadPromise) { - console.log('[Qwik DevTools] Waiting for preload to complete...'); + log('[Qwik DevTools] Waiting for preload to complete...'); return preloadPromise; } // If preloading hasn't started (shouldn't happen), start it now - console.log('[Qwik DevTools] Warning: Preload not started, starting now...'); + log('[Qwik DevTools] Warning: Preload not started, starting now...'); return preloadDependencies(config); }, diff --git a/packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx b/packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx index 47aafbb..63291aa 100644 --- a/packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx +++ b/packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx @@ -88,7 +88,7 @@ export const DevtoolsButton = component$(({ state }: DevtoolsButtonProps) => {
{ return (
diff --git a/packages/ui/src/components/Tab/Tab.tsx b/packages/ui/src/components/Tab/Tab.tsx index 2319134..fcdb1ae 100644 --- a/packages/ui/src/components/Tab/Tab.tsx +++ b/packages/ui/src/components/Tab/Tab.tsx @@ -15,7 +15,7 @@ export const Tab = component$(({ state, id, title }) => { class={{ 'flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200': true, - 'bg-transparent hover:bg-foreground/5 text-muted-foreground hover:text-foreground': + 'hover:bg-foreground/5 text-muted-foreground hover:text-foreground bg-transparent': state.activeTab !== id, 'shadow-accent/35 bg-accent text-white shadow-lg': state.activeTab === id, diff --git a/packages/ui/src/components/TabContent/TabContent.tsx b/packages/ui/src/components/TabContent/TabContent.tsx index 1f873cc..33e10c3 100644 --- a/packages/ui/src/components/TabContent/TabContent.tsx +++ b/packages/ui/src/components/TabContent/TabContent.tsx @@ -3,7 +3,7 @@ import { component$, Slot } from '@qwik.dev/core'; export const TabContent = component$(() => { return (
-
+
diff --git a/packages/ui/src/components/ThemeToggle/QwikThemeToggle.tsx b/packages/ui/src/components/ThemeToggle/QwikThemeToggle.tsx index 51e806b..d16882a 100644 --- a/packages/ui/src/components/ThemeToggle/QwikThemeToggle.tsx +++ b/packages/ui/src/components/ThemeToggle/QwikThemeToggle.tsx @@ -47,7 +47,7 @@ export const QwikThemeToggle = component$(() => { <>