@loro-extended/change 5.3.0 → 5.4.0

package/src/replay-diff.test.ts

@@ -0,0 +1,389 @@
+import { LoroDoc, LoroList, UndoManager } from "loro-crdt"
+import { describe, expect, it } from "vitest"
+import { replayDiff } from "./replay-diff.js"
+
+describe("replayDiff", () => {
+  it("should fire subscribeLocalUpdates for text changes", () => {
+    // Create source doc with text changes
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceText = sourceDoc.getText("text")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceText.insert(0, "Hello World")
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc and track local updates
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.getText("text") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the text was applied
+    expect(targetDoc.getText("text").toString()).toBe("Hello World")
+  })
+
+  it("should fire subscribeLocalUpdates for map changes", () => {
+    // Create source doc with map changes
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceMap = sourceDoc.getMap("map")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceMap.set("name", "Alice")
+    sourceMap.set("age", 30)
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc and track local updates
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.getMap("map") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the map was applied
+    const targetMap = targetDoc.getMap("map")
+    expect(targetMap.get("name")).toBe("Alice")
+    expect(targetMap.get("age")).toBe(30)
+  })
+
+  it("should fire subscribeLocalUpdates for list changes", () => {
+    // Create source doc with list changes
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceList = sourceDoc.getList("list")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceList.insert(0, "first")
+    sourceList.insert(1, "second")
+    sourceList.insert(2, "third")
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc and track local updates
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.getList("list") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the list was applied
+    const targetList = targetDoc.getList("list")
+    expect(targetList.toJSON()).toEqual(["first", "second", "third"])
+  })
+
+  it("should fire subscribeLocalUpdates for counter changes", () => {
+    // Create source doc with counter changes
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceCounter = sourceDoc.getCounter("counter")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceCounter.increment(5)
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc and track local updates
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.getCounter("counter") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the counter was applied
+    expect(targetDoc.getCounter("counter").toJSON()).toBe(5)
+  })
+
+  it("should work with UndoManager", () => {
+    // Create source doc with changes
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceText = sourceDoc.getText("text")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceText.insert(0, "Hello")
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc with UndoManager
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    const targetText = targetDoc.getText("text")
+
+    const undoManager = new UndoManager(targetDoc, {})
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit()
+
+    // Verify the text was applied
+    expect(targetText.toString()).toBe("Hello")
+
+    // Undo should work
+    const canUndo = undoManager.canUndo()
+    expect(canUndo).toBe(true)
+
+    undoManager.undo()
+    expect(targetText.toString()).toBe("")
+  })
+
+  it("should handle nested containers", () => {
+    // Create source doc with nested containers
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceMap = sourceDoc.getMap("root")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    // Create a nested structure: map -> list -> text
+    const nestedList = sourceMap.setContainer("items", new LoroList())
+    nestedList.insert(0, "item1")
+    nestedList.insert(1, "item2")
+
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc and track local updates
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.getMap("root") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the nested structure was applied
+    const targetMap = targetDoc.getMap("root")
+    const items = targetMap.get("items") as LoroList
+    expect(items).toBeDefined()
+    expect(items.toJSON()).toEqual(["item1", "item2"])
+  })
+
+  it("should handle map deletions", () => {
+    // Create source doc with initial state
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceMap = sourceDoc.getMap("map")
+    sourceMap.set("keep", "value1")
+    sourceMap.set("remove", "value2")
+
+    const beforeFrontier = sourceDoc.frontiers()
+
+    // Delete a key
+    sourceMap.delete("remove")
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc with same initial state
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    const targetMap = targetDoc.getMap("map")
+    targetMap.set("keep", "value1")
+    targetMap.set("remove", "value2")
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the deletion was applied
+    expect(targetMap.get("keep")).toBe("value1")
+    expect(targetMap.get("remove")).toBeUndefined()
+  })
+
+  it("should handle list deletions", () => {
+    // Create source doc with initial state
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceList = sourceDoc.getList("list")
+    sourceList.insert(0, "a")
+    sourceList.insert(1, "b")
+    sourceList.insert(2, "c")
+
+    const beforeFrontier = sourceDoc.frontiers()
+
+    // Delete middle element
+    sourceList.delete(1, 1)
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc with same initial state
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    const targetList = targetDoc.getList("list")
+    targetList.insert(0, "a")
+    targetList.insert(1, "b")
+    targetList.insert(2, "c")
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the deletion was applied
+    expect(targetList.toJSON()).toEqual(["a", "c"])
+  })
+
+  it("should handle counter decrement", () => {
+    // Create source doc with initial counter value
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    const sourceCounter = sourceDoc.getCounter("counter")
+    sourceCounter.increment(10)
+
+    const beforeFrontier = sourceDoc.frontiers()
+
+    // Decrement
+    sourceCounter.decrement(3)
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc with same initial state
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    const targetCounter = targetDoc.getCounter("counter")
+    targetCounter.increment(10)
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the decrement was applied
+    expect(targetCounter.toJSON()).toBe(7)
+  })
+
+  it("should handle text with attributes", () => {
+    // Create source doc with rich text
+    const sourceDoc = new LoroDoc()
+    sourceDoc.setPeerId("1")
+    sourceDoc.configTextStyle({ bold: { expand: "after" } })
+    const sourceText = sourceDoc.getText("text")
+    const beforeFrontier = sourceDoc.frontiers()
+
+    sourceText.insert(0, "Hello World")
+    sourceText.mark({ start: 0, end: 5 }, "bold", true)
+    const afterFrontier = sourceDoc.frontiers()
+
+    // Get the diff
+    const diff = sourceDoc.diff(beforeFrontier, afterFrontier, false)
+
+    // Create target doc
+    const targetDoc = new LoroDoc()
+    targetDoc.setPeerId("2")
+    targetDoc.configTextStyle({ bold: { expand: "after" } })
+    targetDoc.getText("text") // Ensure container exists
+
+    const localUpdates: Uint8Array[] = []
+    targetDoc.subscribeLocalUpdates(update => {
+      localUpdates.push(update)
+    })
+
+    // Replay the diff
+    replayDiff(targetDoc, diff)
+    targetDoc.commit() // Commit to trigger subscribeLocalUpdates
+
+    // Verify local updates were fired
+    expect(localUpdates.length).toBeGreaterThan(0)
+
+    // Verify the text was applied
+    const targetText = targetDoc.getText("text")
+    expect(targetText.toString()).toBe("Hello World")
+
+    // Verify the delta includes the bold attribute
+    const delta = targetText.toDelta()
+    expect(delta[0]).toMatchObject({
+      insert: "Hello",
+      attributes: { bold: true },
+    })
+  })
+})

package/src/replay-diff.ts

@@ -0,0 +1,229 @@
+import type {
+  Container,
+  ContainerID,
+  CounterDiff,
+  Diff,
+  ListDiff,
+  LoroCounter,
+  LoroDoc,
+  LoroList,
+  LoroMap,
+  LoroMovableList,
+  LoroText,
+  LoroTree,
+  MapDiff,
+  TextDiff,
+  TreeDiff,
+  TreeDiffItem,
+  Value,
+} from "loro-crdt"
+
+/**
+ * Replay a diff as local operations on a document.
+ *
+ * Unlike doc.import() which creates import events, this creates LOCAL events
+ * that are captured by subscribeLocalUpdates() and UndoManager.
+ *
+ * @param doc - The target document to apply changes to
+ * @param diff - The diff from doc.diff(from, to, false)
+ */
+export function replayDiff(doc: LoroDoc, diff: [ContainerID, Diff][]): void {
+  // Map from source container IDs to target containers
+  // This is needed because when we create new containers, they get different IDs
+  const containerMap = new Map<ContainerID, Container>()
+
+  for (const [containerId, containerDiff] of diff) {
+    // First, try to get the container from our map (for newly created containers)
+    let container = containerMap.get(containerId)
+
+    // If not in map, try to get it from the doc (for existing containers)
+    if (!container) {
+      container = doc.getContainerById(containerId)
+    }
+
+    if (!container) {
+      // Container doesn't exist yet - this can happen for newly created containers
+      // that haven't been mapped yet. Skip for now, it will be created when
+      // processing the parent container's diff.
+      continue
+    }
+
+    switch (containerDiff.type) {
+      case "text":
+        replayTextDiff(container as LoroText, containerDiff)
+        break
+      case "list":
+        replayListDiff(
+          container as LoroList | LoroMovableList,
+          containerDiff,
+          containerMap,
+        )
+        break
+      case "map":
+        replayMapDiff(container as LoroMap, containerDiff, containerMap)
+        break
+      case "tree":
+        replayTreeDiff(container as LoroTree, containerDiff)
+        break
+      case "counter":
+        replayCounterDiff(container as LoroCounter, containerDiff)
+        break
+    }
+  }
+}
+
+/**
+ * Replay text diff operations
+ */
+function replayTextDiff(text: LoroText, diff: TextDiff): void {
+  // LoroText has applyDelta which handles the delta format directly
+  text.applyDelta(diff.diff)
+}
+
+/**
+ * Replay list diff operations
+ */
+function replayListDiff(
+  list: LoroList | LoroMovableList,
+  diff: ListDiff,
+  containerMap: Map<ContainerID, Container>,
+): void {
+  let index = 0
+
+  for (const delta of diff.diff) {
+    if (delta.retain !== undefined) {
+      // Retain: skip over existing elements
+      index += delta.retain
+    } else if (delta.delete !== undefined) {
+      // Delete: remove elements at current position
+      list.delete(index, delta.delete)
+      // Don't advance index - next operation is at same position
+    } else if (delta.insert !== undefined) {
+      // Insert: add elements at current position
+      const values = delta.insert
+      for (let i = 0; i < values.length; i++) {
+        const value = values[i]
+        if (isContainer(value)) {
+          // For containers, we need to insert a new container of the same type
+          // The container's contents will be handled by its own diff entry
+          const newContainer = createContainerOfSameType(value)
+          const insertedContainer = (list as LoroList).insertContainer(
+            index + i,
+            newContainer,
+          )
+          // Map the source container ID to the newly created container
+          containerMap.set(value.id, insertedContainer)
+        } else {
+          ;(list as LoroList).insert(
+            index + i,
+            value as Exclude<Value, Container>,
+          )
+        }
+      }
+      index += values.length
+    }
+  }
+}
+
+/**
+ * Replay map diff operations
+ */
+function replayMapDiff(
+  map: LoroMap,
+  diff: MapDiff,
+  containerMap: Map<ContainerID, Container>,
+): void {
+  for (const [key, value] of Object.entries(diff.updated)) {
+    if (value === undefined) {
+      // Delete the key
+      map.delete(key)
+    } else if (isContainer(value)) {
+      // Set a container - create a new one of the same type
+      const newContainer = createContainerOfSameType(value)
+      const insertedContainer = map.setContainer(key, newContainer)
+      // Map the source container ID to the newly created container
+      containerMap.set(value.id, insertedContainer)
+    } else {
+      // Set a primitive value
+      map.set(key, value as Exclude<Value, Container>)
+    }
+  }
+}
+
+/**
+ * Replay tree diff operations
+ */
+function replayTreeDiff(tree: LoroTree, diff: TreeDiff): void {
+  for (const item of diff.diff) {
+    replayTreeDiffItem(tree, item)
+  }
+}
+
+/**
+ * Replay a single tree diff item
+ */
+function replayTreeDiffItem(tree: LoroTree, item: TreeDiffItem): void {
+  switch (item.action) {
+    case "create":
+      // Create a new node under the specified parent
+      // Note: The node ID is determined by the CRDT, we can't specify it
+      // This means we're creating a NEW node, not recreating the exact same one
+      tree.createNode(item.parent, item.index)
+      break
+    case "delete":
+      // Delete the node
+      tree.delete(item.target)
+      break
+    case "move":
+      // Move the node to a new parent/position
+      tree.move(item.target, item.parent, item.index)
+      break
+  }
+}
+
+/**
+ * Replay counter diff operations
+ */
+function replayCounterDiff(counter: LoroCounter, diff: CounterDiff): void {
+  if (diff.increment > 0) {
+    counter.increment(diff.increment)
+  } else if (diff.increment < 0) {
+    counter.decrement(-diff.increment)
+  }
+  // If increment is 0, no operation needed
+}
+
+/**
+ * Check if a value is a Container
+ */
+function isContainer(value: Value | Container): value is Container {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "kind" in value &&
+    typeof (value as Container).kind === "function"
+  )
+}
+
+/**
+ * Create a new detached container of the same type as the given container
+ */
+function createContainerOfSameType(container: Container): Container {
+  const kind = container.kind()
+  switch (kind) {
+    case "List":
+      return new (container.constructor as new () => LoroList)()
+    case "Map":
+      return new (container.constructor as new () => LoroMap)()
+    case "Text":
+      return new (container.constructor as new () => LoroText)()
+    case "Tree":
+      return new (container.constructor as new () => LoroTree)()
+    case "Counter":
+      return new (container.constructor as new () => LoroCounter)()
+    case "MovableList":
+      return new (container.constructor as new () => LoroMovableList)()
+    default:
+      throw new Error(`Unknown container kind: ${kind}`)
+  }
+}