A synced store based Y.js. More information see: API

Install

pnpm install synced-store

Usage

import { SyncedStorage, Storage } from "synced-store";

type ClassroomStorageState = {
    ban: boolean;
    raiseHandUsers: string[];
    shareScreen: boolean;
};

const roomUUID = "exampleRoom";

// replace to your own websocket server
const hostUrl = "ws://localhost:1234";

const syncedStorage = new SyncedStorage(roomUUID, hostUrl);
const classroomStorage: Storage<ClassroomStorageState> =
    syncedStorage.connectStorage<ClassroomStorageState>("classroom", {
        ban: false,
        raiseHandUsers: [],
        shareScreen: false,
    });

console.log(classroomStorage.state); // { ban: false, raiseHand: [] }

classroomStorage.setState({
    raiseHandUsers: ["user1", "user2"],
});

console.log(classroomStorage.state); // { ban: false, raiseHandUsers: [ 'user1', 'user2' ] }

// you can call disposer to remove listener or add it to your disposer manager
const disposer = classroomStorage.on("stateChanged", (diff: Partial<ClassroomStorageState>) => {
    console.log(diff); // the updated value
});

classroomStorage.resetState();

console.log(classroomStorage.state); // { ban: false, raiseHand: [] }

If you want to host in local, you can use y-websocket. More detail see this test

Usage in tldraw

import { useMemo } from "react";
import { TLRecord } from "@tldraw/tldraw";
import { TlDrawSyncedStorage } from "synced-store"

const roomUUID = "exampleRoom"
const hostUrl = "ws://localhost:1234" // replace to your host url

const { syncedStorage, room } = useMemo(() => {
    const syncedStorage = new TlDrawSyncedStorage<TLRecord>(
        roomUUID,
        { id: `tl_${roomUUID}` } as TLRecord,
        hostUrl,
    );

    return {
        syncedStorage,
        room: syncedStorage.provider,
    };
}, [hostUrl, roomUUID]);

License

MIT @Openflat