Is there a way to track the full path of the event while using observeDeep?

1

Hi, I am building a SolidJS (which is similar to React) web application that edits complex hierarchical objects simultaneously.

To store the information, I used Y.Map in the root with nested Y.Maps and Y.Arrays.

I first tried observeDeep function to observe the changes in the root Y.Map and synchronize it with SolidJS Store.

It works correctly when adding new values, but it does not work at all for the case of removing items because we should know the key to remove from the SolidJS Store.

However, because the event in observeDeep only shows the last key, not the full path to the object, so I cannot figure out which key inside our hierarchy is removed.

To solve this problem, I think there are two naive solutions. The first one is using for loop to check all keys in the hierarchy and find the key to remove. The other way is finding a method to track the full path of the key, which seems to be more efficient if it is available.

So, here is the qusetion. Can I find the full path of the key in the nested hierarchy? If it couldn’t, is there any solution for my case?

1 Like
2

Are you sure the full path is not available through some combination of e.path, e.keysChanged, or e.changes? It seems like it should be exposed somewhere on the event object.

3 
import * as Y from 'yjs'

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

const parent = new Y.Map()
root.set('parent', parent)

const child = new Y.Map()
parent.set('child', child)

root.observeDeep((events) => {
  events.forEach((e) => {
    console.log(e.path, e.changes.keys)
  })
})

// [ 'parent', 'child' ] Map(1) { 'a' => { action: 'add', oldValue: undefined } }
child.set('a', 1)

// [ 'parent', 'child' ] Map(1) { 'a' => { action: 'delete', oldValue: 1 } }
child.delete('a')
2 Likes
4

Oh you’re right. I found the full path from the e.path. Thanks a lot!!

1 Like