feat(svelte-query): Svelte 5 adapter

examples/svelte/svelte-melt/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/svelte/svelte-melt/.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+}

examples/svelte/svelte-melt/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/svelte/svelte-melt/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/svelte/svelte-melt/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/svelte/svelte-melt/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

examples/svelte/svelte-melt/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

examples/svelte/svelte-melt/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "svelte-melt",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@tanstack/svelte-query-devtools": "workspace:^",
+		"@tanstack/svelte-query-runes": "workspace:*"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.1.1",
+		"@sveltejs/kit": "^2.5.2",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@types/eslint": "8.56.5",
+		"@typescript-eslint/eslint-plugin": "^7.1.1",
+		"@typescript-eslint/parser": "^7.1.1",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.39.0",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"svelte": "5.0.0-next.80",
+		"svelte-check": "^3.7.1",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
+		"vite": "^5.1.5"
+	}
+}

examples/svelte/svelte-melt/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {}

examples/svelte/svelte-melt/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

examples/svelte/svelte-melt/src/routes/+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query-runes/dev';
+	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
+
+	const queryClient = new QueryClient();
+</script>
+
+<QueryClientProvider client={queryClient}>
+	<SvelteQueryDevtools />
+	<main>
+		<slot />
+	</main>
+</QueryClientProvider>

examples/svelte/svelte-melt/src/routes/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Simple from './paginate.svelte'
+	import Cache from './cacheUpdate.svelte'
+	import Simple1 from './test.svelte'
+	import DerivedQuery from './derivedQuery.svelte'
+</script>
+
+<!-- <h1>testing list query cache update</h1>
+<Simple />
+<h1>testing DerivedQuery cache update</h1> -->
+<DerivedQuery />
+<!-- <h1>testing pagination with createQuery</h1>
+<Simple />
+<hr />
+
+<h1>testing cache update</h1>
+<Cache />
+<hr />
+-------------
+
+<Simple1 />
+ -->

examples/svelte/svelte-melt/src/routes/cacheUpdate.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import {
+		createMutation,
+		createQuery,
+		hashKey,
+		useQueryClient
+	} from '@tanstack/svelte-query-runes/dev';
+	import { bookFilterStore } from './store.svelte';
+	let a = { a: 1 };
+	let b = ['cache update tester', bookFilterStore];
+
+	const data = createQuery(() => {
+		return {
+			queryKey: b,
+			queryFn: async () => {
+				const s = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'].map((v) => {
+					return { title: v };
+				});
+				if (Math.abs(bookFilterStore.paginate.page % 2) == 1) {
+					return s.slice(0, 5);
+				}
+				return s.slice(5, 6);
+			},
+			staleTime: 5000000
+		};
+	});
+	const client = useQueryClient();
+	const update = createMutation({
+		mutationFn: () => {
+			return ['a new list of items', 'a'];
+		},
+		onSuccess: (v) => {
+			const k = b.map((v) => $state.snapshot(v));
+			client.setQueryData(k, (v) => {
+				debugger;
+				v[0].title = 'faker';
+				return v;
+			});
+		}
+	});
+	/* 	const querycache = useQueryClient().getQueryCache();
+	$effect(() => {
+		if (data.fetchStatus) {
+			console.log(data.fetchStatus);
+		}
+		const ret = querycache.find({ queryKey: b, exact: false });
+		//console.log('find  in query cache', ret);
+	}); */
+</script>
+
+<button
+	onclick={() => {
+		update.mutate();
+	}}>update cache</button
+>
+
+{data.fetchStatus}
+{data.isLoading}
+{data.isFetching}
+{data.isRefetching}
+<button
+	onclick={() => {
+		console.log('click +1');
+		bookFilterStore.paginate.page += 1;
+	}}>next</button
+>
+<button
+	onclick={() => {
+		console.log('click -1');
+		bookFilterStore.paginate.page -= 1;
+	}}>prev</button
+>
+{bookFilterStore.paginate.page}
+<pre>{JSON.stringify(data.data, null, 1)}</pre>
+{#each data?.data ?? [] as item}
+	<div>{item.title}</div>
+{/each}

examples/svelte/svelte-melt/src/routes/derivedQuery.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { createQuery, useQueryClient } from '@tanstack/svelte-query-runes/dev';
+	import { bookFilterStore } from './store.svelte';
+	import { useQuery } from './external';
+	import { useSvelteExtensionQuery } from './external.svelte';
+	let a = { a: 1 };
+	let b = ['hi', bookFilterStore];
+	let p = $derived({ derived_state: bookFilterStore.paginate.page + 1 });
+	function query(p) {
+		const data = createQuery({
+			queryKey: () => ['paginate', p()],
+			queryFn: async () => {
+				const s = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'].map((v) => {
+					return { title: v };
+				});
+				if (Math.abs(bookFilterStore.paginate.page % 2) == 1) {
+					return s.slice(0, 5);
+				}
+				return s.slice(5, 6);
+			},
+			staleTime: 5000
+		});
+		return data;
+	}
+	let data = query(() => p);
+</script>
+
+<h2>testing derived query with list</h2>
+{data.fetchStatus}
+{data.isLoading}
+{data.isFetching}
+{data.isRefetching}
+<button
+	onclick={() => {
+		console.log('click +1');
+		bookFilterStore.paginate.page += 1;
+		//	p += 1;
+	}}>next</button
+>
+<button
+	onclick={() => {
+		console.log('click -1');
+		bookFilterStore.paginate.page -= 1;
+		//	p += 1;
+	}}>prev</button
+>
+{bookFilterStore.paginate.page}
+{p.derived_state}
+{#each data?.data ?? [] as item}
+	<div>{item.title}</div>
+{/each}

examples/svelte/svelte-melt/src/routes/external.svelte.ts

@@ -0,0 +1,11 @@
+import { createQuery } from '@tanstack/svelte-query-runes/dev';
+export function useSvelteExtensionQuery(props) {
+	const enabled = $derived({
+		queryKey: ['sv-externel', props],
+		queryFn: () => {
+			return Date.now();
+		},
+		enabled: () => props.paginate.page > 0
+	});
+	return createQuery(enabled);
+}

examples/svelte/svelte-melt/src/routes/external.ts

@@ -0,0 +1,11 @@
+import { createQuery } from '@tanstack/svelte-query-runes/dev';
+
+export function useQuery(props) {
+	return createQuery({
+		queryKey: ['eternal', props],
+		queryFn: () => {
+			return Date.now();
+		},
+		enabled: props.paginate.page > 0
+	});
+}