Skip to content

Commit 45a810c

Browse files
lachlancollinslachlancollins
authored
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
1 parent 95de69d commit 45a810c

File tree

11 files changed

+648
-266
lines changed

11 files changed

+648
-266
lines changed

‎packages/query-devtools/package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@
1010
"type": "github",
1111
"url": "https://github.com/sponsors/tannerlinsley"
1212
},
13-
"types": "./build/types/index.d.ts",
14-
"main": "./build/umd/index.js",
15-
"module": "./build/esm/index.js",
13+
"types": "build/types/index.d.ts",
14+
"main": "build/umd/index.js",
15+
"module": "build/esm/index.js",
1616
"exports": {
1717
".": {
18+
"types": "./build/types/index.d.ts",
1819
"import": "./build/esm/index.js",
1920
"require": "./build/umd/index.js",
2021
"default": "./build/umd/index.js"
21-
}
22+
},
23+
"./package.json": "./package.json"
2224
},
2325
"scripts": {
2426
"clean": "rimraf ./build",

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {
5+
parser: '@typescript-eslint/parser',
6+
parserOptions: {
7+
tsconfigRootDir: __dirname,
8+
project: './tsconfig.eslint.json',
9+
sourceType: 'module',
10+
extraFileExtensions: ['.svelte'],
11+
},
12+
rules: {
13+
'react-hooks/rules-of-hooks': 'off',
14+
},
15+
extends: ['plugin:svelte/recommended', '../../.eslintrc'],
16+
ignorePatterns: ['*.config.*', '**/build/*', '**/.svelte-kit/*'],
17+
overrides: [
18+
{
19+
files: ['*.svelte'],
20+
parser: 'svelte-eslint-parser',
21+
parserOptions: {
22+
parser: '@typescript-eslint/parser',
23+
},
24+
},
25+
],
26+
}
27+
28+
module.exports = config

‎packages/svelte-query-devtools/package.json

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "@tanstack/svelte-query-devtools",
3+
"version": "5.0.0-alpha.27",
4+
"description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
5+
"author": "Lachlan Collins",
6+
"license": "MIT",
7+
"repository": "tanstack/query",
8+
"homepage": "https://tanstack.com/query",
9+
"funding": {
10+
"type": "github",
11+
"url": "https://github.com/sponsors/tannerlinsley"
12+
},
13+
"type": "module",
14+
"types": "build/lib/index.d.ts",
15+
"module": "build/lib/index.js",
16+
"svelte": "build/lib/index.js",
17+
"exports": {
18+
".": {
19+
"types": "./build/lib/index.d.ts",
20+
"import": "./build/lib/index.js",
21+
"svelte": "./build/lib/index.js",
22+
"default": "./build/lib/index.js"
23+
},
24+
"./package.json": "./package.json"
25+
},
26+
"files": [
27+
"build/lib",
28+
"src"
29+
],
30+
"scripts": {
31+
"clean": "rimraf ./build",
32+
"test:types": "svelte-check --tsconfig ./tsconfig.json",
33+
"test:eslint": "eslint --ext .svelte,.ts ./src",
34+
"build": "svelte-package --input ./src --output ./build/lib"
35+
},
36+
"devDependencies": {
37+
"@sveltejs/package": "^2.0.2",
38+
"@sveltejs/vite-plugin-svelte": "^2.0.2",
39+
"@testing-library/svelte": "^3.2.2",
40+
"eslint-plugin-svelte": "^2.14.1",
41+
"jsdom": "^20.0.3",
42+
"svelte": "^3.54.0",
43+
"svelte-check": "^2.9.2",
44+
"tslib": "^2.4.1",
45+
"typescript": "^4.7.4",
46+
"vite": "^4.0.0"
47+
},
48+
"dependencies": {
49+
"@tanstack/query-devtools": "workspace:*",
50+
"@tanstack/svelte-query": "workspace:*",
51+
"esm-env": "^1.0.0"
52+
},
53+
"peerDependencies": {
54+
"@tanstack/svelte-query": "workspace:*",
55+
"svelte": "^3.54.0"
56+
}
57+
}

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte'
3+
import { DEV, BROWSER } from 'esm-env'
4+
import type { QueryClient } from '@tanstack/svelte-query'
5+
import { useQueryClient, onlineManager } from '@tanstack/svelte-query'
6+
import type {
7+
TanstackQueryDevtools,
8+
DevtoolsButtonPosition,
9+
DevtoolsPosition,
10+
DevToolsErrorType,
11+
} from '@tanstack/query-devtools'
12+
13+
export let initialIsOpen = false
14+
export let buttonPosition: DevtoolsButtonPosition = 'bottom-left'
15+
export let position: DevtoolsPosition = 'bottom'
16+
export let client: QueryClient = useQueryClient()
17+
export let errorTypes: DevToolsErrorType[] = []
18+
19+
let ref: HTMLDivElement
20+
let devtools: TanstackQueryDevtools
21+
22+
if (DEV && BROWSER) {
23+
onMount(async () => {
24+
const QueryDevtools = (await import('@tanstack/query-devtools'))
25+
.TanstackQueryDevtools
26+
devtools = new QueryDevtools({
27+
client,
28+
queryFlavor: 'Svelte Query',
29+
version: '5',
30+
onlineManager,
31+
buttonPosition,
32+
position,
33+
initialIsOpen,
34+
errorTypes,
35+
})
36+
37+
devtools.mount(ref)
38+
39+
return () => {
40+
devtools.unmount()
41+
}
42+
})
43+
}
44+
45+
$: {
46+
if (devtools) {
47+
devtools.setButtonPosition(buttonPosition)
48+
devtools.setPosition(position)
49+
devtools.setInitialIsOpen(initialIsOpen)
50+
devtools.setErrorTypes(errorTypes)
51+
}
52+
}
53+
</script>
54+
55+
<div bind:this={ref} />

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as SvelteQueryDevtools } from './Devtools.svelte'

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"noEmit": true
5+
},
6+
"include": ["**/*.ts", "**/*.tsx", "**/*.svelte", "./.eslintrc.cjs"]
7+
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"allowSyntheticDefaultImports": true,
5+
"checkJs": true,
6+
"composite": true,
7+
"esModuleInterop": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"importsNotUsedAsValues": "error",
10+
"isolatedModules": true,
11+
"preserveValueImports": true,
12+
"lib": ["esnext", "DOM", "DOM.Iterable"],
13+
"moduleResolution": "node",
14+
"module": "esnext",
15+
"noEmit": true,
16+
"noImplicitAny": true,
17+
"noImplicitReturns": true,
18+
"noImplicitThis": true,
19+
"noUncheckedIndexedAccess": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"resolveJsonModule": true,
23+
"rootDir": "./src",
24+
"skipLibCheck": true,
25+
"sourceMap": true,
26+
"strict": true,
27+
"strictNullChecks": true,
28+
"target": "esnext",
29+
"tsBuildInfoFile": "./build/.tsbuildinfo",
30+
"types": ["vitest/globals", "@testing-library/jest-dom"]
31+
},
32+
"include": ["src", "src/**/*.svelte"],
33+
"paths": {
34+
"@tanstack/query-core": ["../query-core/src"],
35+
"@tanstack/query-devtools": ["../query-devtools/src"],
36+
"@tanstack/svelte-query": ["../svelte-query/src"],
37+
},
38+
"references": [
39+
{ "path": "../query-core" },
40+
{ "path": "../query-devtools" },
41+
{ "path": "../svelte-query" }
42+
]
43+
}

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { svelte } from '@sveltejs/vite-plugin-svelte';
2+
import path from 'path';
3+
import type { UserConfig } from 'vite';
4+
5+
const config: UserConfig = {
6+
plugins: [svelte()],
7+
resolve: {
8+
alias: {
9+
"@tanstack/query-core": path.resolve(__dirname, '..', 'query-core', 'src'),
10+
"@tanstack/query-devtools": path.resolve(__dirname, '..', 'query-devtools', 'src'),
11+
"@tanstack/svelte-query": path.resolve(__dirname, '..', 'svelte-query', 'src'),
12+
}
13+
}
14+
};
15+
16+
export default config;

0 commit comments

Comments
 (0)