proxyMap breaks when bind(state, ymap) runs

[hobo1618]

Hello! I'm creating a NextJS app using valtio-yjs and tiptap collab's beta WS server. Everything works fine until I try to create a new proxyMap in the store.

I created minimal version of the issue with three scenarios:

1. todos stored as a Map of key value pairs using Valtio's proxyMap --> this works
2. todos stored as a Map and bound to a ymap using valtio-yjs's bind() --> this results in an error: TypeError: snap.myMap.keys is not a function or its return value is not iterable
3. todos stored as an Array and bound to a ymap --> this works fine.

To see for yourself, go to this vercel deployment, open up an incognito window, and try adding some todos. Valtio-YJS works fine for collaborative arrays and for local maps.

But this deployment (when I bind the proxyMap to the YDoc) crashes immediately.

Any idea why this is happening and how to fix it?

Thanks so much.

[dai-shi]

@stephenarra Can you help?

[stephenarra]

@dai-shi Happy to take a look.

@hobo1618 Are you able to reproduce without the @hocuspocus/provider dependency? I'm not familiar with the map that's being output and whether it'll map to an object.

[hobo1618]

@stephenarra thanks I appreciate it!
Here's a minimal version using a vanilla ymap as in the valtio basic usage example, and without even connecting to a ws server:
https://github.com/hobo1618/valtio-yjs-map
In this case the state and ui update but I get a warning in the console:
unsupported p type, which seems to come from line 184 in src/index.ts. I also get a TS warning in my IDE:
Argument of type 'Map<string, string>' is not assignable to parameter of type 'Record<string, unknown> | unknown[]'
Is that helpful? I can also try connecting the ymap to y-webSocketProvider to see if it actually breaks.

[stephenarra]

I think you should be able to throw the proxyMap into a proxy and it would work.

eg.

const myMap: Map<string, string> = proxyMap();
const state = proxy({ myMap });

bind(state, ymap);

...

const snap = useSnapshot(state.myMap);

[hobo1618]

Ok so this fixed the warning, but the larger problem's still there when I try to connect to the tiptap server. I think the problem is with the tiptap provider, because valtio-yjs proxyMaps work fine when the binding is with a vanilla ymap. I'll post the question in the tiptap discord and see if they can help. Thanks for the help!

[dai-shi]

closing. let us know if there's an issue in valtio-yjs.

[kkharji]

Hey there, facing the same issue. tried both passing proxy to bind and passing proxyMap, all result in same issue ... warnings but doesn't seems to sync. Perhaps shouldn't be used like so? Passing proxyMap results in more warnings

const unbindEntities = bind(this.config.projectState.entities, this.entitiesChannel)
const unbindInfo = bind(this.config.projectState.info, this.infoChannel)
this.unbindState = () => {
    unbindEntities()
    unbindInfo()
}

// ....

export class ProjectState {
  info: ProjectInfo
  entities: Map<EntityID, Entity>

  constructor(
    info: Partial<ProjectInfo> = {},
    entities: Record<EntityID, Entity> = {},
  ) {
    const now = new Date()
    this.info = {
      id: info.id || idGenerator.project(),
      name: info.name || 'Untitled Project',
      version: info.version || '1.0.0',
      metadata: {
        createdAt: now,
        updatedAt: now,
        ...(info.metadata ?? {}),
      },
    }
    this.entities = proxyMap(Object.entries(entities) as any)
  }
}

this.config.projectState = proxy(new ProjectState)

Any thoughts. Thanks

[dai-shi]

Can anyone help?