- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 76
feat: Svelte adapter #369
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
base: main
Are you sure you want to change the base?
feat: Svelte adapter #369
Conversation
@@ -28,7 +28,7 @@ | |||
"files.exclude": { | |||
"**/prettier.config.cjs": true, | |||
"**/node_modules/**/dist": false, | |||
"**/{examples,packages}/**/dist": true, | |||
// "**/{examples,packages}/**/dist": true, |
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.
TODO remove this -- it was preventing me from seeing dist so I could debug some setup issues
@@ -0,0 +1,38 @@ | |||
# sv |
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.
TODO easy to update for this example
Thanks, just used this while I figured out how to make sync work with SvelteKit. This is an example repo https://github.com/themixednuts/sveltekit-livestore-cloudflare |
Closes #315
Related to #326
This obviously still has rough edges (I think we need to wire up some OTEL stuff?), but it's a first working version hooked up to Svelte's reactivity system.
The API surface area for Svelte is actually quite small, as I'm not sure how much additional value we can bring:
createStore
is a very thin wrapper aroundcreateStorePromise
. It registers an effect to clean up the store when it's destroyed.createStore
to be called somewhere within an effect root, meaning it can always be cleaned up.createQuery
property to the store that takes a LiveStore query and returns a thunk wrapping the reactive version of that query's response.$derived.by
to unwrap the value (+ allow reactive destructuring if that makes sense for your usecase), or just create the query and then call the result wherever you actually want to use it.I'm not clear on whether there are additional value-adds we can create. I considered a standalone
createQuery
similar to what React has, but I don't really think it's worth it. Unwrapping promises in Svelte is pretty simple and easy (so store creation is easy), and sharing references to an object efficiently is also easy, so the convoluted context stuff React has to do really doesn't add any value. This also makes passing around multiple different store instances easier.One thing I have thought of doing is exporting the
withSvelteApi
provider so that users can attach it to their LiveStore instances that might live outside of a Svelte context (and therefore cannot access effects for automatic cleanup). I'm not sure this is useful though, so it's probably something we could leave off and do later if it's clear there's a need.I'd like feedback on the proposed API prior to investing more time in tests / OTEL / etc.
Checklist
non-exclusive, royalty-free, irrevocable copyright license to reproduce, prepare
derivative works of, publicly display, sublicense, and distribute this
Contribution and such derivative works.
Contribution contains no content requiring a license from any third party.