From c06c8135edb20c1b000976353c85f8bf1da64b54 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 29 Nov 2025 03:44:59 -0800 Subject: [PATCH] feat: add TanStack Query devtools for development added @tanstack/svelte-query-devtools (dev only) - shows in dev mode only, tree-shaken from production - provides visual debugging of queries, cache, and mutations - accessible via floating icon in bottom-right corner --- package.json | 1 + pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++---- src/routes/+layout.svelte | 6 +++++- 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index c25ca315..e01535b6 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@sveltejs/adapter-node": "^5.2.12", "@sveltejs/kit": "^2.22.0", "@sveltejs/vite-plugin-svelte": "^6.0.0", + "@tanstack/svelte-query-devtools": "^6.0.2", "@types/node": "^22", "@vitest/browser": "^3.2.3", "eslint": "^9.18.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ca5841c..e4b9e280 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -87,6 +87,9 @@ importers: '@sveltejs/vite-plugin-svelte': specifier: ^6.0.0 version: 6.1.4(svelte@5.38.7)(vite@7.1.5(@types/node@22.18.1)(sass@1.92.1)) + '@tanstack/svelte-query-devtools': + specifier: ^6.0.2 + version: 6.0.2(@tanstack/svelte-query@6.0.9(svelte@5.38.7))(svelte@5.38.7) '@types/node': specifier: ^22 version: 22.18.1 @@ -840,6 +843,15 @@ packages: '@tanstack/query-core@5.90.11': resolution: {integrity: sha512-f9z/nXhCgWDF4lHqgIE30jxLe4sYv15QodfdPDKYAk7nAEjNcndy4dHz3ezhdUaR23BpWa4I2EH4/DZ0//Uf8A==} + '@tanstack/query-devtools@5.91.1': + resolution: {integrity: sha512-l8bxjk6BMsCaVQH6NzQEE/bEgFy1hAs5qbgXl0xhzezlaQbPk6Mgz9BqEg2vTLPOHD8N4k+w/gdgCbEzecGyNg==} + + '@tanstack/svelte-query-devtools@6.0.2': + resolution: {integrity: sha512-UQdtAPsdJQ2HijMVy+W+/CHyrUZmCkubfAi/sqWsx+1fdY+g7ONa5xroBLiaebC+5jJxvk9kij61QMUHzzJgQA==} + peerDependencies: + '@tanstack/svelte-query': ^6.0.8 + svelte: ^5.25.0 + '@tanstack/svelte-query@6.0.9': resolution: {integrity: sha512-ezawzencc07h61M+p8R9Opp2CmpgGwrM05IsIGJiPkr1SrBPW8gDZ9sTdaQbEpzLNXMXaZUkq0MS+61Rw2EfSg==} peerDependencies: @@ -2827,8 +2839,8 @@ snapshots: '@friendofsvelte/tipex@0.0.9(highlight.js@11.8.0)(svelte@5.38.7)': dependencies: '@tiptap/core': 2.26.2(@tiptap/pm@2.26.2) - '@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2) - '@tiptap/extension-code-block-lowlight': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0) + '@tiptap/extension-code-block': 2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1) + '@tiptap/extension-code-block-lowlight': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0) '@tiptap/extension-floating-menu': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2) '@tiptap/extension-image': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2)) '@tiptap/extension-link': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2) @@ -3280,6 +3292,15 @@ snapshots: '@tanstack/query-core@5.90.11': {} + '@tanstack/query-devtools@5.91.1': {} + + '@tanstack/svelte-query-devtools@6.0.2(@tanstack/svelte-query@6.0.9(svelte@5.38.7))(svelte@5.38.7)': + dependencies: + '@tanstack/query-devtools': 5.91.1 + '@tanstack/svelte-query': 6.0.9(svelte@5.38.7) + esm-env: 1.2.2 + svelte: 5.38.7 + '@tanstack/svelte-query@6.0.9(svelte@5.38.7)': dependencies: '@tanstack/query-core': 5.90.11 @@ -3341,10 +3362,10 @@ snapshots: dependencies: '@tiptap/extension-list': 3.5.1(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1) - '@tiptap/extension-code-block-lowlight@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)': + '@tiptap/extension-code-block-lowlight@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)(highlight.js@11.8.0)(lowlight@2.9.0)': dependencies: '@tiptap/core': 2.26.2(@tiptap/pm@2.26.2) - '@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2) + '@tiptap/extension-code-block': 2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1) '@tiptap/pm': 2.26.2 highlight.js: 11.8.0 lowlight: 2.9.0 @@ -3354,6 +3375,11 @@ snapshots: '@tiptap/core': 2.26.2(@tiptap/pm@2.26.2) '@tiptap/pm': 2.26.2 + '@tiptap/extension-code-block@2.26.2(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)': + dependencies: + '@tiptap/core': 3.5.1(@tiptap/pm@3.5.1) + '@tiptap/pm': 3.5.1 + '@tiptap/extension-code-block@3.5.1(@tiptap/core@3.5.1(@tiptap/pm@3.5.1))(@tiptap/pm@3.5.1)': dependencies: '@tiptap/core': 3.5.1(@tiptap/pm@3.5.1) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b09c94fc..08850b36 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -9,8 +9,9 @@ import { Tooltip } from 'bits-ui' import { beforeNavigate, afterNavigate } from '$app/navigation' import { authStore } from '$lib/stores/auth.store' - import { browser } from '$app/environment' + import { browser, dev } from '$app/environment' import { QueryClientProvider } from '@tanstack/svelte-query' + import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools' import type { LayoutData } from './$types' // Get `data` and `children` from the router via $props() @@ -109,6 +110,9 @@ + {#if dev} + + {/if}