feat: svelte 5 adapter

[zhihengGet]

i ported svelte-4 query to svelte 5

Done: (i have used below myself and they seem to work just fine)

• createQuery
• createMutation
• useQueryClient

TODO:

• createQueries (i did it but based on solid not sure if it works)
• unit tests (pending on svelte 5 on how to test runes)
• isFetching (svelte 4 version should be ok)
• isMutating (svelte 4 version should be ok)
• isRestoring (svelte 4 version should be ok)

i already published this svelte 5 draft version under svelte-query-runes package if people want to try it out ! i personally have been using createQuery and createMutation in my own project it work just fine !

to use it , you can checkout my messy sample code in examples/svelte-melt

if anyone want to take this over please feel free to do so ! i personally only need createQuery and createMutation

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Apr 17, 2024 6:44pm

[zhihengGet]

@lachlancollins in case u want to want on this... fyi

there are 3 form of Reactivity approach currently

Pass Function (recommended)

let a = $state(something)
createQuery( ( )=> {  return { .... }  }   // this will be reactive for both $state and $derived and other edge cases 

Pass Attribute Function (currently, i added this for enabled+queryKey)

let a= $state()  // will work
let b=$derived()
// enabled is a fn 
createQuery({queryKey: [a] , queryFn:()=>{}, enabled:()=>{} } ) 

passing $derived to queryKey does not work i believe, if u change b, query wont update

let a= $state() 
let b=$derived()
// enabled is a fn 
createQuery({queryKey:[b] , queryFn:()=>{}, enabled:()=>{} } )  // BAD

let a= $state()  // will work
let b=$derived(a+1) // wont work if u pass b to queryKey instead of a(u have to pass ()=>b to key), other options require u to pass functions i.e enabled, 
// enabled is a fn 
createQuery({queryKey: ()=>[b] , queryFn:()=>{}, enabled:()=>{} } )  // good

pass $state to queryKey & enabled is fine too(..need to be a proxy value) inside it !

let a= $state()  // will work
createQuery({queryKey: [a] , queryFn:()=>{}, enabled:!a // if a.a is a number then enabled won't work 
} ) // queryKey can be something that has $state in it 

output of creaetQuery

we can return function or return a proxy runes , i choose the 2nd one since it has better DX , im not sure if theres some edges cases tho

[max-got]

One additional thing i encountered, would be nice to fix this small formatting error in Devtools.svelte:

-<div class="tsqd-parent-container" bind:this={ref} />
+<div class="tsqd-parent-container" bind:this={ref} ></div>

Because of breaking: warn on self-closing non-void HTML tags #11114 it spams the console:

10:55:32 AM [vite-plugin-svelte] .../@tanstack+svelte-query-devtools@5.32.0_@tanstack+svelte-query@5.32.0_svelte@5.0.0-next.120/node_modules/@tanstack/svelte-query-devtools/dist/Devtools.svelte:46:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`

I can open a separate pr for this, but it's not that bad, it's just annoying 😄

[niemyjski]

@lachlancollins @zhihengGet what is all left to get this working with latest rc? Is the current approach good?