-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WIP: Svelte 5 adapter #6981
WIP: Svelte 5 adapter #6981
Conversation
@lachlancollins in case u want to want on this... fyi there are 3 form of Reactivity approach currentlyPass 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 creaetQuerywe 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 |
fd233da
to
4974ba8
Compare
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] .../@[email protected]_@[email protected][email protected]/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 😄 |
@lachlancollins @zhihengGet what is all left to get this working with latest rc? Is the current approach good? |
@lachlancollins @zhihengGet what is all left to get this working with latest rc? Is the current approach good? cc @tannerlinsley |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 07e64e7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution
✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@zhihengGet I'm going to merge this into a svelte-5-adapter
branch.
I hope this will allow more people to contribute and get this over the line - to anybody who has been following this PR, please consider contributing!
4e3325e
into
TanStack:svelte-5-adapter
I'd encourage anyone interested to subscribe to the following discussion: #7413 |
* Updated to svelte5 dep * added link resources * updated client hooks * Commented out legos * removed unused code * added temp tanstack svelte5 adaptor from pr * WIP rework data tables for svelte5 * Updated svelte * Temp impl for svelte persisted store https://twitter.com/puruvjdev/status/1787037268143689894/photo/1 joshnuss/svelte-persisted-store#251 * WIP Runes * More svelte 5 conversion * Updated package json * WIP Svelte 5 work * Upgraded typography components to runes and use new snippets and props * More runes work * More Svelte 5 work * Updated facet filters to runes * Upgraded to @exceptionless/fetchclient * Updated deps * Upgraded to latest fetch client * Updated shad * Upgrade to eslint 9 https://github.com/sveltejs/kit/pull/12268/files * fixed invalid ref * Converted slots * Updated deps * Added some snippets * WIP Dashboard * Updated tailwind * Fixed copy * Fixed slots * Updated deps * Updated data tables and summaries * More conversion * Updated deps * Converted all components to runes * Some dispatch changes * WIP: Dispatch Changes * Updated deps * more dispatch work * Fixed linting errors * Updated svelte * Updated shad * Updated typescript * Updated deps * Fixed fetch client * Fixed svelte errors. * added conditional icon check * Update deps * WIP: Use svelte-query-runes TanStack/query#6981 * WIP - Reworked snippets and some other fixes. * Updated deps * WIP - Svelte 5 work * Updated deps * Updated to latest tanstack table * WIP: Filter runes work. * Fixed more errors. * Updated deps * Use svelte query pkg * Updated svelte and vitest * Fixed svelte query issues, fixed linting issues, fixed eventing. * Fixed web socket events * Updated deps * Fixed some filtering issues * Fixed persisted store * Updated packages * Fixed filter reactivity * Updated deps * Updated deps * fixed svelte query issues * Use runed media query * Update deps * Use runed media query * Fixed svelte issue with state_unsafe_mutation sveltejs/svelte#12571 * Ensure all runes are serialized with toJSON sveltejs/svelte#9639 * Added document visibility store and fixed more upgrades * Updated deps * Updated queries * WIP: Demoting tabs * Updated deps * Updates to tab promotion * Fixed bind warnings * Updated deps * Use new svelte query apis * Updated deps * Fixed stack promotion * Fixed grid issues * Fixed fetch client issues with the login forms * Added custom auth serializer * Force package install due to svelte 5 peer deps * rebuilt lock file * Update Document Visibility helper to match new runed pattern
docs(svelte-5-adapter): force runes mode for all examples (#7800) * docs(examples): force runes mode for all examples * Fix simple example mounting * Fix type feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples fix(svelte-5-adapter): function for `createMutation` options (#7805) * fix(svelte-5-adapter): require function for createMutation options * Fix type errors refactor(svelte-5-adapter): simplify createBaseQuery (#7808) * refactor: simplify createBaseQuery * Don't take snapshot of queryKey chore(svelte-5-adapter): tidy-up functions (#7809) * chore(svelte-5-adapter): tidy-up functions * Fix types * Update svelte Fix import extensions chore: ignore state_snapshot_uncloneable in tests
background: {$todos.isFetching ? 'green' : 'transparent'}; | ||
transition:: {!$todos.isFetching ? 'all .3s ease' : 'none'}; | ||
background: {todos.isFetching ? 'green' : 'transparent'}; | ||
transition:: {!todos.isFetching ? 'all .3s ease' : 'none'}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this double ::
a typo?
docs(svelte-5-adapter): force runes mode for all examples (#7800) * docs(examples): force runes mode for all examples * Fix simple example mounting * Fix type feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples fix(svelte-5-adapter): function for `createMutation` options (#7805) * fix(svelte-5-adapter): require function for createMutation options * Fix type errors refactor(svelte-5-adapter): simplify createBaseQuery (#7808) * refactor: simplify createBaseQuery * Don't take snapshot of queryKey chore(svelte-5-adapter): tidy-up functions (#7809) * chore(svelte-5-adapter): tidy-up functions * Fix types * Update svelte Fix import extensions chore: ignore state_snapshot_uncloneable in tests
docs(svelte-5-adapter): force runes mode for all examples (#7800) * docs(examples): force runes mode for all examples * Fix simple example mounting * Fix type feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples fix(svelte-5-adapter): function for `createMutation` options (#7805) * fix(svelte-5-adapter): require function for createMutation options * Fix type errors refactor(svelte-5-adapter): simplify createBaseQuery (#7808) * refactor: simplify createBaseQuery * Don't take snapshot of queryKey chore(svelte-5-adapter): tidy-up functions (#7809) * chore(svelte-5-adapter): tidy-up functions * Fix types * Update svelte Fix import extensions chore: ignore state_snapshot_uncloneable in tests Fix merge
docs(svelte-5-adapter): force runes mode for all examples (#7800) * docs(examples): force runes mode for all examples * Fix simple example mounting * Fix type feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples fix(svelte-5-adapter): function for `createMutation` options (#7805) * fix(svelte-5-adapter): require function for createMutation options * Fix type errors refactor(svelte-5-adapter): simplify createBaseQuery (#7808) * refactor: simplify createBaseQuery * Don't take snapshot of queryKey chore(svelte-5-adapter): tidy-up functions (#7809) * chore(svelte-5-adapter): tidy-up functions * Fix types * Update svelte Fix import extensions chore: ignore state_snapshot_uncloneable in tests Fix merge
i ported svelte-4 query to svelte 5
Done: (i have used below myself and they seem to work just fine)
TODO:
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