Nacho Printing Machine

    zustand-yjs
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    All Contributors

    Zustand-Yjs

    Disclaimer: This is a work in progress. Do not use this library in production, breaking change will happens before arriving to the first stable version.

    Create zustand's store with Y.Array or Y.Doc types. We include typescript definitions.

    Getting started

    Install yjs, zustand and zustand-yjs.

    yarn add zustand-yjs yjs zustand
    

    Zustand-yjs manage a store of Y.Doc, allowing you to connect and disconnect easily.

    import * as Y from 'yjs'
    import { useYDoc } from 'zustand-yjs'
    
    const connectDoc = (doc: Y.Doc) => {
      console.log('connect to a provider with room', doc.guid)
      return () => console.log('disconnect', doc.guid)
    }
    
    const App = () => {
      const yDoc = useYDoc('myDocGuid', connectDoc)
      return <div></div>
    }

    From this, you can use the docs with Y.Array, Y.Map. Other Y-types are coming.

    import * as Y from 'yjs'
    import { useYDoc } from 'zustand-yjs'
    
    const connectDoc = (doc: Y.Doc) => {
      console.log('connect to a provider with room', doc.guid)
      return () => console.log('disconnect', doc.guid)
    }
    
    const App = () => {
      const yDoc = useYDoc('myDocGuid', connectDoc)
      const { data, push } = useYArray<string>(yDoc.getArray('usernames'))
      return (
        <div>
          <button onClick={() => push([`username #${data.length}`])}>
            New Username
          </button>
          <ul>
            {data.map((username, index) => (
              <li key={index}>{username}</li>
            ))}
          </ul>
        </div>
      )
    }

    Here you are, you have a reactive store!

    API

    useYDoc(guid: string, connect: (doc: Y.Doc) => () => void)

    params

    • string guid: The Y.Doc#guid
    • (doc: Y.Doc) => () => void) connect: The connect function triggered on the first mount of the Y.Doc. Should return an unconnect function triggered on unmount.
      • params
        • Y.Doc doc: The mounted doc, with a Y.Doc#guid
      • returns
        • () => void : disconnect function that will be called on unmount.

    returns

    • Y.Doc: The created Y.Doc

    useYArray(doc: Y.Array)

    params

    • Y.Array<T> doc: A Y.Array to use inside your component

    returns

    • T[] data: The current data of the Y.Array used
    • forEach: See Y.Array#forEach
    • map: See Y.Array#map
    • slice: See Y.Array#slice
    • get: See Y.Array#get
    • delete: See Y.Array#delete
    • unshift: See Y.Array#unshift
    • push: See Y.Array#push
    • insert: See Y.Array#insert

    useYMap(doc: Y.Array)

    params

    • Y.Map<T, U extends Record<string, T>> doc: A Y.Map to use inside your component. T is the type of the record values, U is the type of the return data.

    returns

    • U data: The current data of the Y.Map used
    • set: See Y.Map#set
    • get: See Y.Map#get
    • has: See Y.Map#has
    • delete: See Y.Map#delete
    • forEach: See Y.Map#forEach
    • entries: See Y.Map#entries
    • values: See Y.Map#values
    • keys: See Y.Map#keys

    Run the example

    1. Clone the Repository
    2. yarn install
    3. cd example; yarn
    4. yarn start

    The example doesn't mount any connector for Y.Doc (yet). So don't expect syncing. To do some sync, you can edit example/src/organizationDoc.ts and add some provider to the main document.

    Special Thanks

    • Relm, svelt-yjs, the repo we started with, many thanks for publishing.
    • YJS – CRDT framework that deserve love and support
    • Zustand – A small, fast and scaleable bearbones state-management solution. Our build system is taken from there.

    Roadmap

    1. Online demo
    2. Add tests

    License

    See the LICENSE file for license rights and limitations (MIT).

    Contribution

    See the CONTRIBUTE file for contribution guidelines

    Contributors

    Thanks goes to these wonderful people (emoji key):


    felipenovaes

    💻

    Neftaly Hernandez

    💻 🐛

    Nicolas Schmidt

    🤔 👀

    hfroger

    🤔 👀 💻 🚧

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i zustand-yjs

    DownloadsWeekly Downloads

    4

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    43 kB

    Total Files

    13

    Last publish

    Collaborators

    • hfroger