wip examples

Author: zhihengGet

examples/svelte/svelte-melt/package.json

@@ -13,21 +13,21 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.1.1",
-		"@sveltejs/kit": "^2.5.0",
+		"@sveltejs/kit": "^2.5.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@types/eslint": "8.56.2",
-		"@typescript-eslint/eslint-plugin": "^5.62.0",
-		"@typescript-eslint/parser": "^5.62.0",
-		"eslint": "^8.56.0",
+		"@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.35.1",
 		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.1",
-		"svelte": "5.0.0-next.68",
-		"svelte-check": "^3.6.4",
+		"prettier-plugin-svelte": "^3.2.2",
+		"svelte": "5.0.0-next.80",
+		"svelte-check": "^3.6.6",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^5.1.2"
+		"vite": "^5.1.5"
 	},
 	"type": "module",
 	"dependencies": {

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

@@ -2,8 +2,13 @@
 	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 />

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

@@ -1,3 +1 @@
-export const csr = true;
 
-export const ssr = false;

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { createQuery, useQueryClient } from 'svelte-query/dev';
+	import { bookFilterStore } from './store.svelte';
+	import { unstate } from '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', 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: 5000,
+			enabled: bookFilterStore.paginate.page % 2 == 1
+		});
+		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}
+{#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 'svelte-query/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,10 @@
+import { createQuery } from 'svelte-query';
+export function useQuery(props) {
+	return createQuery({
+		queryKey: ['eternal', props],
+		queryFn: () => {
+			return Date.now();
+		},
+		enabled: props.paginate.page > 0
+	});
+}

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

@@ -50,14 +50,16 @@
 	onclick={() => {
 		console.log('click -1');
 		bookFilterStore.paginate.page -= 1;
+		//p += 1;
 	}}>prev</button
 >
 {bookFilterStore.paginate.page}
 {#each data?.data ?? [] as item}
 	<div>{item.title}</div>
 {/each}
 
--------------
+<!-- -------------
 {external.data}
 -------------
 {externalsv.data}
+ -->

packages/svelte-query-runes/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "svelte-query-runes",
-  "version": "5.14.2-beta.18.1",
+  "name": "svelte-query",
+  "version": "5.14.2-beta.18.4",
   "private": false,
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Svelte",
   "author": "zhiheng",
@@ -19,13 +19,12 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./src/index",
       "svelte": "./dist/index.js"
     },
     "./dev": {
       "types": "./dist/index.d.ts",
-      "default": "./src/index",
-      "svelte": "./dist/index.js"
+      "default": "./src/index.ts",
+      "svelte": "./src/index.ts"
     }
   },
   "files": [

packages/svelte-query-runes/src/createBaseQuery.svelte.ts

@@ -34,15 +34,18 @@ export function createBaseQuery<
 
   /** Creates a store that has the default options applied */
   function updateOptions() {
-    const queryKey = optionsStore().queryKey?.map((v) => unstate(v))
+    const key = optionsStore().queryKey
+    const keyFn = typeof key === 'function' ? key : () => key //alow query-key and enable to be a function
+    const queryKey = JSON.parse(JSON.stringify(keyFn())) // remove proxy
 
     const defaultedOptions = client.defaultQueryOptions({
       ...optionsStore(),
       //@ts-ignore
       queryKey: queryKey, // prevent reactive query  in devTools,
       enabled:
         typeof optionsStore().enabled == 'function'
-          ? optionsStore().enabled()
+          ? //@ts-ignore
+            optionsStore().enabled()
           : optionsStore().enabled,
     })
 

packages/svelte-query-runes/src/types.ts

@@ -10,8 +10,14 @@ import type {
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core'
-
+type Identity<T> = { [P in keyof T]: T[P] }
+type Replace<T, K extends keyof T, TReplace> = Identity<
+  Pick<T, Exclude<keyof T, K>> & {
+    [P in K]: TReplace
+  }
+>
 export type FnOrVal<T> = (() => T) | T // can be a fn that returns reactive statement or $state or $derived deep states
+
 /** Options for createBaseQuery */
 export type CreateBaseQueryOptions<
   TQueryFnData = unknown,
@@ -20,7 +26,15 @@ export type CreateBaseQueryOptions<
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 > = FnOrVal<
-  QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  Replace<
+    Replace<
+      QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+      'queryKey',
+      FnOrVal<QueryKey>
+    >,
+    'enabled',
+    FnOrVal<boolean>
+  >
 >
 
 /** Result from createBaseQuery */