Svelte: support bind:value

[SkaterDad]

Firstly, thanks for this library! yjs had me interested, but you've made it so much simpler to use.

The combination of SyncedStore and the WebRTC & IndexedDb providers blew me away. Collaborative, offline-capable data in less than 5 minutes of work?

🤯

Description

This PR adds support for Svelte's bind:value syntax. The Svelte compiler expects there to be a set method on the store.

    function input_input_handler(each_value, item_index) {
        each_value[item_index].title = this.value;
        theStore.set($theStore);
    }

Since we're editing the underlying reactive objects directly, the set method can just be a simple () => {} stub.

Example

Same code, but with the types removed. https://codesandbox.io/s/svelte-syncedstore-example-lb1g7?file=/App.svelte

[YousefED]

Great, thanks @SkaterDad and glad to hear about your experience :)!

Would you be interested in helping out by adding a Svelte example to https://syncedstore.org/docs/? (similar to the React / Vue examples?). This would definitely be useful and maybe we can then share it in the Svelte community to get more people excited

[coveralls]

Pull Request Test Coverage Report for Build 1734034517

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 82.309%

---

Totals
Change from base Build 1646514965:	0.0%
Covered Lines:	497
Relevant Lines:	584

---

💛 - Coveralls

[SkaterDad]

Would you be interested in helping out by adding a Svelte example to https://syncedstore.org/docs/? (similar to the React / Vue examples?). This would definitely be useful and maybe we can then share it in the Svelte community to get more people excited

Yes, I should be able to help with that. Same Todo app?

I'm hoping to do more experimentation with complex data, as well. Is this library able to handle nested object updates (trees)? I read it's possible with yjs, but you'd have to define each nested object as a y map?

[YousefED]

Yes, I should be able to help with that. Same Todo app?

Yes I think that would be cool! I think most work would be getting the live example (using sandpack) to work. Most of this code is in https://github.com/YousefED/SyncedStore/tree/main/docs/src/theme/CodeBlock. Let me know if you need help to figure this out! (I'm also available on Discord)

The latest version of Sandpack (the live code editor) has a Svelte theme (they just added that), so that should be helpful:

https://github.com/codesandbox/sandpack/blob/2d0c85c5ef4fa856c83e539e2c9e2ffd804fa366/sandpack-react/src/templates/svelte.ts.

I'm hoping to do more experimentation with complex data, as well. Is this library able to handle nested object updates (trees)? I read it's possible with yjs, but you'd have to define each nested object as a y map?

Yes, this is definitely possible with Yjs. Yjs provides data structures such as Y.Map and Y.Array for this. However, SyncedStore was designed exactly to make this easier; so with SyncedStore you can pass any JSON structure, and it maintains underlying Y.Map (for objects) and Y.Array (for arrays) automatically.

[SkaterDad]

Hi, would you be able to push an updated package to npm for use in the examples?

I spent some time working on the sandpack examples but kept running into strange errors. Was going to give it another try this weekend, though.

[YousefED]

Done! Svelte package has been updated: https://www.npmjs.com/package/@syncedstore/svelte

[SkaterDad]

Thanks! Feels like Codesandbox isn't playing well with Svelte. Running into an error just like this one: https://github.com/EmilTholin/svelte-routing/issues/92

The code is all fine, but it doesn't work unless you open the Codesandbox and reinstall the Svelte dependency. Super weird and not a great user experience.

For now I'll just make a PR with some example code, and maybe a Svelte REPL.