Y-pojo: Synchronize a complex plain JS object to a shared Y.Doc

1

I have a weird use-case where I need to be able to convert my shared YJS doc to/from a POJO (plain old javascript object). Converting from YJS to pojo is simple with toJSON but there was no solution to compare a YJS doc with a POJO, and apply whatever changes to the YJS doc are necessary to make it equivalent to the POJO. So I wrote y-pojo.

disclaimer: this is still experimental, and should only be used when you have code that NEEDS a pojo, and cannot use ES6 proxies for maintaining the state. If you are in control of all the client code I would strongly recommend you just use native YJS objects to maintain the state directly.

       const first = {
            inner: {
                foo: "bar"
            },
            second: 123
        }
        const target = {
            second: 123
        }

        const doc = new Y.Doc()
        const root = doc.getMap("root")

        let changed = syncronize(root, first)
        // root would now be equivalent to POJO `first`

        changed = syncronize(root, target)
        // changes have been applied to root to be equivalent to `target`

One of the cooler features in here is that it intelligently detects when an item is removed from or added to an array, treating that as a single remove or insert operation, instead of a cascading “rewrite index 0’s content to match old index 1”, “rewrite index 1 to match old index 2”, etc.

See the examples on how to use it.

1 Like
2

Thank you for sharing, this looks pretty useful!

My feedback, because I really like this extension: I just had to dig a bit deeper to find out what a POJO is. Initially, I thought this had to do with a standardized Java format. Maybe you could describe the term POJO a bit better for people who never heard this term.

1 Like
3

Thanks Kevin! Good point on the explainer, I will add more to the README.

1 Like