feat(svelte-query-devtools): Svelte Adapter for new Devtools (#5362)

* Implement working devtools component

* Fix pnpm-lock.yaml

* Update workspace config

* Always a prettier error

* Fix eslint error

* Fix test:types

* Add svelte-query to deps

* Use esm-env to block loading in prod

* Remove example changes

* Simpler export

* Allow dynamically editing props

* Run prettier

packages/query-devtools/package.json

@@ -10,15 +10,17 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
-  "types": "./build/types/index.d.ts",
-  "main": "./build/umd/index.js",
-  "module": "./build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "main": "build/umd/index.js",
+  "module": "build/esm/index.js",
   "exports": {
     ".": {
+      "types": "./build/types/index.d.ts",
       "import": "./build/esm/index.js",
       "require": "./build/umd/index.js",
       "default": "./build/umd/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
     "clean": "rimraf ./build",

packages/svelte-query-devtools/.eslintrc.cjs

@@ -0,0 +1,28 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+    sourceType: 'module',
+    extraFileExtensions: ['.svelte'],
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'off',
+  },
+  extends: ['plugin:svelte/recommended', '../../.eslintrc'],
+  ignorePatterns: ['*.config.*', '**/build/*', '**/.svelte-kit/*'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+}
+
+module.exports = config

packages/svelte-query-devtools/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/svelte-query-devtools",
+  "version": "5.0.0-alpha.27",
+  "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
+  "author": "Lachlan Collins",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "build/lib/index.d.ts",
+  "module": "build/lib/index.js",
+  "svelte": "build/lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.js",
+      "svelte": "./build/lib/index.js",
+      "default": "./build/lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "build/lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:eslint": "eslint --ext .svelte,.ts ./src",
+    "build": "svelte-package --input ./src --output ./build/lib"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@testing-library/svelte": "^3.2.2",
+    "eslint-plugin-svelte": "^2.14.1",
+    "jsdom": "^20.0.3",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.7.4",
+    "vite": "^4.0.0"
+  },
+  "dependencies": {
+    "@tanstack/query-devtools": "workspace:*",
+    "@tanstack/svelte-query": "workspace:*",
+    "esm-env": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@tanstack/svelte-query": "workspace:*",
+    "svelte": "^3.54.0"
+  }
+}

packages/svelte-query-devtools/src/Devtools.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { DEV, BROWSER } from 'esm-env'
+  import type { QueryClient } from '@tanstack/svelte-query'
+  import { useQueryClient, onlineManager } from '@tanstack/svelte-query'
+  import type {
+    TanstackQueryDevtools,
+    DevtoolsButtonPosition,
+    DevtoolsPosition,
+    DevToolsErrorType,
+  } from '@tanstack/query-devtools'
+
+  export let initialIsOpen = false
+  export let buttonPosition: DevtoolsButtonPosition = 'bottom-left'
+  export let position: DevtoolsPosition = 'bottom'
+  export let client: QueryClient = useQueryClient()
+  export let errorTypes: DevToolsErrorType[] = []
+
+  let ref: HTMLDivElement
+  let devtools: TanstackQueryDevtools
+
+  if (DEV && BROWSER) {
+    onMount(async () => {
+      const QueryDevtools = (await import('@tanstack/query-devtools'))
+        .TanstackQueryDevtools
+      devtools = new QueryDevtools({
+        client,
+        queryFlavor: 'Svelte Query',
+        version: '5',
+        onlineManager,
+        buttonPosition,
+        position,
+        initialIsOpen,
+        errorTypes,
+      })
+
+      devtools.mount(ref)
+
+      return () => {
+        devtools.unmount()
+      }
+    })
+  }
+
+  $: {
+    if (devtools) {
+      devtools.setButtonPosition(buttonPosition)
+      devtools.setPosition(position)
+      devtools.setInitialIsOpen(initialIsOpen)
+      devtools.setErrorTypes(errorTypes)
+    }
+  }
+</script>
+
+<div bind:this={ref} />

packages/svelte-query-devtools/src/index.ts

@@ -0,0 +1 @@
+export { default as SvelteQueryDevtools } from './Devtools.svelte'

packages/svelte-query-devtools/tsconfig.eslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.svelte", "./.eslintrc.cjs"]
+}

packages/svelte-query-devtools/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "checkJs": true,
+    "composite": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "preserveValueImports": true,
+    "lib": ["esnext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "rootDir": "./src",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "target": "esnext",
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src", "src/**/*.svelte"],
+  "paths": {
+    "@tanstack/query-core": ["../query-core/src"],
+    "@tanstack/query-devtools": ["../query-devtools/src"],
+    "@tanstack/svelte-query": ["../svelte-query/src"],
+  },
+  "references": [
+    { "path": "../query-core" },
+    { "path": "../query-devtools" },
+    { "path": "../svelte-query" }
+  ]
+}

packages/svelte-query-devtools/vite.config.ts

@@ -0,0 +1,16 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import path from 'path';
+import type { UserConfig } from 'vite';
+
+const config: UserConfig = {
+  plugins: [svelte()],
+  resolve: {
+    alias: {
+      "@tanstack/query-core": path.resolve(__dirname, '..', 'query-core', 'src'),
+      "@tanstack/query-devtools": path.resolve(__dirname, '..', 'query-devtools', 'src'),
+      "@tanstack/svelte-query": path.resolve(__dirname, '..', 'svelte-query', 'src'),
+    }
+  }
+};
+
+export default config;