Reactivity with vanX

[HEAVYPOLY]

Hi,
I'm trying to redesign my syncing system to take advantage of vanX reactivity.

Why aren't determineSyncAction
and performSync getting fired after updateCanvas > vanX.replace(localCanvases[id], { ...canvases[id], ...updatedCanvas }) (the canvas data is different)?

function updateCanvas(id, canvas, updateData) {
const updatedCanvas = { ...canvas, ...updateData }
prnt('UPDATE LOCAL CANVAS', id, updatedCanvas.dateDeleted)
vanX.replace(localCanvases[id], { ...canvases[id], ...updatedCanvas })
}
const determineSyncAction = van.derive(async () => {
  prnt('DETERMINE SYNC')
  const compositeCanvases = {}
  for (const [id, canvas] of Object.entries(localCanvases)) {
    if (!compositeCanvases[id]) {
      compositeCanvases[id] = canvas
      canvas.syncState = 'Synced'
    }
  }
  if (!syncing.val) {
    for (const [id, remoteCanvas] of Object.entries(remoteCanvases)) {
      const localCanvas = localCanvases[id]
      if (localCanvas) {
        if (new Date(remoteCanvas.dateModified) > new Date(localCanvas.dateModified)) {
          remoteCanvas.syncState = 'NeedsDownload'
          compositeCanvases[id] = remoteCanvas
        } else if (new Date(localCanvas.dateModified) > new Date(remoteCanvas.dateModified)) {
          prnt('DETERMINED NEEDS UP UPDATE', id)
          compositeCanvases[id] = localCanvas
          compositeCanvases[id].syncState = 'Needs Upload Update'
        } else {
          compositeCanvases[id].syncState = 'Synced'
        }
      } else {
        compositeCanvases[id] = remoteCanvas
        compositeCanvases[id].syncState = 'NeedsDownload'
      }
    }
    for (const [id, canvas] of Object.entries(localCanvases)) {
      if (!remoteCanvases[id]) { compositeCanvases[id].syncState = 'Needs Upload Create' }
    }
    vanX.replace(canvases, compositeCanvases)
  }
})
const performSync = van.derive(async () => {
  prnt('PERFORM SYNC', needsSync.val)
  for (const [id, canvas] of Object.entries(canvases)) {
    if (canvas.skipSync) continue
    switch (canvas.syncState) {
      case 'Local':
        break
      case 'NeedsDownload':
        canvas.syncState = 'Downloading'
        await downloadCanvasAndSave(id)
        canvas.syncState = 'Synced'
        break
      case 'Needs Upload Update':
      case 'Needs Upload Create':
        const syncStateTemp = canvas.syncState
        prnt('needs', syncStateTemp, id)
        canvas.syncState = 'Uploading'
        await uploadCanvas(id, syncStateTemp)
        canvas.syncState = 'Synced'
        break
    }
  }
})

[Tao-VanJS]

performSync should be bound with canvases, but I'm not seeing how canvases is defined.

[HEAVYPOLY]

const canvases = vanX.reactive({})
const localCanvases = vanX.reactive({})
const remoteCanvases = vanX.reactive({})

canvases are replaced in determine sync vanX.replace(canvases, compositeCanvases)

[sirenkovladd]

Could you just do a minimal reproduction so we can open and see the problem?

[Tao-VanJS]

I suspect this is due to a protection mechanism we introduced in VanJS 1.3.0 for circular dependencies. Specifically, if you set a state while reading the value of the state in the same binding function, the updates of the state won't trigger the binding function (protect us from circular dependency). The logic of determineSyncAction is quite complex, but I think it's possible that you're setting some fields of localCanvases, while at the same time, reading the values of these fields. Specifically, in this line:

      compositeCanvases[id] = canvas

Note that canvas is from localCanvases, thus the values of localCanvases is now the values of compositeCanvases.

And lines like:

compositeCanvases[id].syncState = 'Needs Upload Update'

are setting the fields of compositeCanvases, thus setting the fields of localCanvases.

I would suggest to simply the binding functions a little bit so that they can be easy to reason about. Ideally, the state propagation defined in functions should be in one single direction.

[HEAVYPOLY]

Thank you, simplifying worked