svelteSyncedStore not synced across tabs

[Kyle Johnsen]

Maybe I'm missing something, but I tried to follow the examples and it's just not working. I tried a brand new Svelte kit app, installed dependencies, and set up a bare bones store

npm create svelte@latest ss-svelte && cd ss-svelte
npm i --save @syncedstore/core yjs @syncedstore/svelte
npm run dev

Then just src/routes/+page.svelte and src/lib/stores.js as follows:

<script>
    import {store} from '$lib/stores.js'

    function setVal(val) {
        return () => {
            $store.data.val = val
        }
    }
</script>

<p>Current value of $store.data.val is {$store.data.val}</p> 
<p>$store.todos.length is {$store.todos.length}</p> 

<h1 on:click="{setVal(1)}">1</h1>
<h1 on:click="{setVal(2)}">2</h1>
<h1 on:click="{setVal(3)}">3</h1>

import { syncedStore } from "@syncedstore/core";
import { svelteSyncedStore } from "@syncedstore/svelte";

// Create your SyncedStore store
const sStore = syncedStore({ data: {}, todos: [] });

// Create Svelte Store for use in your components.
// You can treat this like any other store, including `bind`.
export const store = svelteSyncedStore(sStore);

The store is not kept up to date between tabs:

[Graham Leach-Krouse]

Is it possible that you need a sync provider here? The minimal svelte example uses the WebRTC provider, this bit:

// Create a document that syncs automatically using Y-WebRTC
const doc = getYjsValue(store);
export const webrtcProvider = new WebrtcProvider("syncedstore-todos", doc);

from this example in the docs:

import { syncedStore, getYjsValue } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";
import { svelteSyncedStore } from "@syncedstore/svelte";

// Create your SyncedStore store
export const store = syncedStore({ todos: [], fragment: "xml" });
export const svelteStore = svelteSyncedStore(store);

// Create a document that syncs automatically using Y-WebRTC
const doc = getYjsValue(store);
export const webrtcProvider = new WebrtcProvider("syncedstore-todos", doc);

export const disconnect = () => webrtcProvider.disconnect();
export const connect = () => webrtcProvider.connect();

[Yousef]

@kjohnsen have you tried the suggestion by @gleachkr ?

If it still doesn't work, could you provide a reproducible CodeSandbox or similar? For now, I'll mark the issue as closed