history.batch() is not working at async callback function. about liveblocks HOT 4 CLOSED

I'd recommend going with solution 2, because the undo stack is all local to the current client. You can keep history "paused" as long as you want, even asynchronously, and resume it later. All actions taken between the .pause() and .resume() call will then end up as a single item in your undo stack.

Additionally, it may be a good idea to wrap the code in a try/finally block:

history.pause();
try {
  // your code
} finally {
  history.resume();
}

from liveblocks.

I think your code is good solution in case. Thank you so much for your help so quickly.

from liveblocks.

Unfortunately, batching doesn't work with async functions. This is as-intended. The purpose of a batch is to group one or more sychronous (Presence or Storage) updates that will get combined into a single outgoing message to other clients. (Rather than each getting their own network message.) It will also cause multiple updates to end up as a single item in your undo/stack.

Also please note that, even if your batch function were synchronous, updating Presence twice like in your example, would not have an observable effect in other clients. To other clients, the first presence update { x: 1 } will never be visible to other clients because immediately after the { x: 2 }, part of the same batch, would "win".

So maybe the best way to structure this is to have an async function that will perform two separate batches with updates?

console.log("start updates");

// Batch 1: before the await
room.batch(() => {
  room.updatePresence({ x: 1 }, { addToHistory: true });
  // ... possibly more updates here
});
console.log("second", room.getPresence());
    
await new Promise((resolve) => setTimeout(() => resolve(""), 1000));

// Batch 2: after the await
room.batch(() => {
  room.updatePresence({ x: 2 }, { addToHistory: true });
  // ... possibly more updates here
});
console.log("third", room.getPresence());

console.log("end updates");

We could definitely make this clearer in our documentation, though, so thanks for pointing this out! 🙏

from liveblocks.

the first presence update { x: 1 } will never be visible

Yes right and I want it. I wrote a simple example code(just delay 1 sec) to test async, but I will explain it in more detail with pseudo code.

// it's not work
// node is room Storage data
// room update function in updateNodeSize
room.batch(async () => {
  updateNodeSize(node, newParentSize)
  for (child at node.children) {
    const size = await getNodeSize(child)
    updateNodeSize(child, size * 2)
  }
} 

So maybe the best way to structure this is to have an async function that will perform two separate batches with updates?

I use batch because I want to be able to cancel with a single redo. So I can't separate batches.

I think there seem to be two ways: 1. pre-async functions, 2. using history.pause. Which do you think is the better way to use history?

// 1. pre-async functions
const childrenSizes = await node.children.foreach(getNodeSize)
room.batch(() => {
  updateNodeSize(node, newParentSize)
  for (child, index at node.children) {
    updateNodeSize(child, childrenSizes[index])
  }
}

// 2. using history.pause & history.resume
history.pause()
updateNodeSize(node, newParentSize)
for (child at node.children) {
  const size = await getNodeSize(child)
  updateNodeSize(child, size * 2)
}
history.resume()

from liveblocks.