Skip to content

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

elliott-with-the-longest-name-on-github
Copy link

@elliott-with-the-longest-name-on-github elliott-with-the-longest-name-on-github commented Jun 9, 2025

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 around createStorePromise. It registers an effect to clean up the store when it's destroyed.
    • This has the side effect (ha ha) of forcing createStore to be called somewhere within an effect root, meaning it can always be cleaned up.
  • We add a createQuery property to the store that takes a LiveStore query and returns a thunk wrapping the reactive version of that query's response.
    • I tried a few different versions of this API, and this was the best one I could find. This allows you to use $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

  • I grant to recipients of this Project distribution a perpetual,
    non-exclusive, royalty-free, irrevocable copyright license to reproduce, prepare
    derivative works of, publicly display, sublicense, and distribute this
    Contribution and such derivative works.
  • I certify that I am legally entitled to grant this license, and that this
    Contribution contains no content requiring a license from any third party.

Sorry, something went wrong.

@CLAassistant
Copy link

CLAassistant commented Jun 9, 2025

CLA assistant check
All committers have signed the CLA.

@@ -28,7 +28,7 @@
"files.exclude": {
"**/prettier.config.cjs": true,
"**/node_modules/**/dist": false,
"**/{examples,packages}/**/dist": true,
// "**/{examples,packages}/**/dist": true,

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

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

@themixednuts
Copy link
Contributor

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Svelte framework integration (similar to React/Solid)
4 participants