zustand-middleware-yjs

import React from "react"; import { render } from "react-dom"; import * as Y from "yjs"; import create from "zustand"; import yjs from "zustand-middleware-yjs"; // Create a Y Doc to place our store in. const ydoc = new Y.Doc(); // Create the Zustand store. const useSharedStore = create( // Wrap the store creator with the Yjs middleware. yjs( // Provide the Y Doc and the name of the shared type that will be used // to hold the store. ydoc, "shared", // Create the store as you would normally. (set) => ({ count: 0, increment: () => set( (state) => ({ count: state.count + 1, }) ), }) ) ); // Use the shared store like you normally would any other Zustand store. const App = () => { const { count, increment } = useSharedStore((state) => ({ count: state.count, increment: state.increment })); return ( <> <p>count: {count}</p> <button onClick={() => increment()}>+</button> </> ); }; // Assuming an HTML element with id 'app-root' exists // e.g., <div id="app-root"></div> // render( // <App />, // document.getElementById("app-root") // ); // For a runnable example without DOM, we can log the state const unsub = useSharedStore.subscribe(state => console.log('Current state:', state)); useSharedStore.getState().increment(); useSharedStore.getState().increment(); console.log('Final state after increments:', useSharedStore.getState()); unsub(); // You would typically connect ydoc to a provider (e.g., websocket) for collaboration // import { WebsocketProvider } from 'y-websocket'; // const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', ydoc);