@loro-extended/change 5.3.0 → 5.4.1

package/src/typed-refs/counter-ref-internals.ts

@@ -1,4 +1,10 @@
-import type { LoroCounter, LoroDoc, Subscription } from "loro-crdt"
+import type {
+  CounterDiff,
+  LoroCounter,
+  LoroDoc,
+  LoroEventBatch,
+  Subscription,
+} from "loro-crdt"
 import type { LoroCounterRef } from "../loro.js"
 import type { CounterContainerShape } from "../shape.js"
 import { BaseRefInternals } from "./base.js"
@@ -28,6 +34,14 @@ export class CounterRefInternals extends BaseRefInternals<CounterContainerShape>
   getValue(): number {
     const container = this.getContainer() as LoroCounter
     const containerValue = container.value
+    const overlay = this.getOverlay()
+    if (overlay) {
+      const diff = overlay.get((container as any).id)
+      if (diff && diff.type === "counter") {
+        const counterDiff = diff as CounterDiff
+        return containerValue + counterDiff.increment
+      }
+    }
     if (containerValue !== 0 || this.materialized) {
       return containerValue
     }
@@ -54,7 +68,7 @@ export class CounterRefInternals extends BaseRefInternals<CounterContainerShape>
       get container(): LoroCounter {
         return self.getContainer() as LoroCounter
       },
-      subscribe(callback: (event: unknown) => void): Subscription {
+      subscribe(callback: (event: LoroEventBatch) => void): Subscription {
         return (self.getContainer() as LoroCounter).subscribe(callback)
       },
     }

package/src/typed-refs/doc-ref-internals.ts

@@ -74,6 +74,7 @@ export class DocRefInternals<
       autoCommit: this.getAutoCommit(),
       batchedMutation: this.getBatchedMutation(),
       getDoc: () => this.doc,
+      overlay: this.getOverlay(),
     }
   }
 

package/src/typed-refs/doc-ref-ownkeys.test.ts

@@ -0,0 +1,78 @@
+import { LoroDoc } from "loro-crdt"
+import { describe, expect, it } from "vitest"
+import { derivePlaceholder } from "../derive-placeholder.js"
+import { Shape } from "../index.js"
+import { DocRef } from "./doc-ref.js"
+
+/**
+ * Tests for DocRef class ownKeys behavior.
+ *
+ * Issue: DocRef extends TypedRef which has Symbol properties:
+ * - [INTERNAL_SYMBOL]: DocRefInternals<Shape>
+ * - [LORO_SYMBOL]: getter for loro() access
+ *
+ * When Reflect.ownKeys() is called on a DocRef instance, it returns these
+ * Symbol properties along with the schema keys.
+ *
+ * This is the underlying cause of the TypedDoc proxy issue - the proxy
+ * delegates ownKeys to the DocRef target.
+ *
+ * Note: DocRef is not a proxy, it's a class. The fix for this is in the
+ * TypedDoc proxy's ownKeys trap, which should filter out Symbols.
+ */
+describe("DocRef ownKeys", () => {
+  const schema = Shape.doc({
+    title: Shape.text(),
+    count: Shape.counter(),
+  })
+
+  function createDocRef() {
+    const loroDoc = new LoroDoc()
+    const placeholder = derivePlaceholder(schema)
+    return new DocRef({
+      shape: schema,
+      placeholder,
+      doc: loroDoc,
+      autoCommit: true,
+    })
+  }
+
+  describe("Reflect.ownKeys() on DocRef instance", () => {
+    it("returns Symbol properties from the class", () => {
+      const docRef = createDocRef()
+
+      const keys = Reflect.ownKeys(docRef)
+
+      // DocRef has Symbol properties from TypedRef base class
+      // This test documents the current behavior
+      const symbolKeys = keys.filter(k => typeof k === "symbol")
+      const stringKeys = keys.filter(k => typeof k === "string")
+
+      // Should have schema keys as strings
+      expect(stringKeys).toContain("title")
+      expect(stringKeys).toContain("count")
+
+      // Currently has Symbol keys (this is the root cause of the issue)
+      // The TypedDoc proxy should filter these out
+      expect(symbolKeys.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("Object.keys() on DocRef instance", () => {
+    it("should return only enumerable string keys", () => {
+      const docRef = createDocRef()
+
+      const keys = Object.keys(docRef)
+
+      // Object.keys only returns enumerable string keys
+      // Symbol properties are not enumerable by default
+      for (const key of keys) {
+        expect(typeof key).toBe("string")
+      }
+
+      // Should include schema keys
+      expect(keys).toContain("title")
+      expect(keys).toContain("count")
+    })
+  })
+})

package/src/typed-refs/index.ts

@@ -0,0 +1,17 @@
+export type { DiffOverlay } from "./base.js"
+
+export type { CounterRef } from "./counter-ref.js"
+
+export type { ListRef } from "./list-ref.js"
+
+export type { MovableListRef } from "./movable-list-ref.js"
+
+export type { RecordRef } from "./record-ref.js"
+
+export type { StructRef } from "./struct-ref.js"
+
+export type { TextRef } from "./text-ref.js"
+
+export type { TreeNodeRef } from "./tree-node-ref.js"
+
+export type { TreeRef } from "./tree-ref.js"

package/src/typed-refs/json-compatibility.test.ts

@@ -185,7 +185,7 @@ describe("JSON Compatibility", () => {
 
   it("should be efficient (not access unrelated parts)", () => {
     const loroDoc = new LoroDoc()
-    const doc = createTypedDoc(ChatSchema, loroDoc)
+    const doc = createTypedDoc(ChatSchema, { doc: loroDoc })
 
     change(doc, (root: any) => {
       root.messages.push({ id: "1", content: "A", timestamp: 1 })

package/src/typed-refs/list-ref-base-internals.ts

@@ -1,6 +1,7 @@
 import type {
   Container,
   LoroDoc,
+  LoroEventBatch,
   LoroList,
   LoroMovableList,
   Subscription,
@@ -256,7 +257,7 @@ export class ListRefBaseInternals<
       get container(): LoroList | LoroMovableList {
         return self.getContainer() as LoroList | LoroMovableList
       },
-      subscribe(callback: (event: unknown) => void): Subscription {
+      subscribe(callback: (event: LoroEventBatch) => void): Subscription {
         return (self.getContainer() as LoroList | LoroMovableList).subscribe(
           callback,
         )

package/src/typed-refs/list-ref-base.ts

@@ -1,6 +1,9 @@
 import type {
   Container,
+  Delta,
+  ListDiff,
   LoroDoc,
+  LoroEventBatch,
   LoroList,
   LoroMovableList,
   Subscription,
@@ -37,6 +40,39 @@ export class ListRefBaseInternals<
   MutableItem = NestedShape["_mutable"],
 > extends BaseRefInternals<any> {
   private itemCache = new Map<number, any>()
+  private overlayListCache?: Item[]
+
+  getOverlayList(): Item[] | undefined {
+    const overlay = this.getOverlay()
+    if (!overlay) {
+      return undefined
+    }
+
+    const shape = this.getShape()
+    if (!isValueShape(shape.shape)) {
+      return undefined
+    }
+
+    if (!this.overlayListCache) {
+      const container = this.getContainer() as LoroList | LoroMovableList
+      const diff = overlay.get(container.id)
+      if (!diff || diff.type !== "list") {
+        return undefined
+      }
+
+      const afterValues: Item[] = []
+      for (let i = 0; i < container.length; i++) {
+        afterValues.push(container.get(i) as Item)
+      }
+
+      this.overlayListCache = applyListDelta(
+        afterValues,
+        (diff as ListDiff).diff as Delta<Item[]>[],
+      )
+    }
+
+    return this.overlayListCache
+  }
 
   /** Get typed ref params for creating child refs at an index */
   getChildTypedRefParams(
@@ -57,6 +93,7 @@ export class ListRefBaseInternals<
       autoCommit: this.getAutoCommit(),
       batchedMutation: this.getBatchedMutation(),
       getDoc: () => this.getDoc(),
+      overlay: this.getOverlay(),
     }
   }
 
@@ -64,6 +101,7 @@ export class ListRefBaseInternals<
   getPredicateItem(index: number): Item | undefined {
     const shape = this.getShape()
     const container = this.getContainer() as LoroList | LoroMovableList
+    const overlayList = this.getOverlayList()
 
     // CRITICAL FIX: For predicates to work correctly with mutations,
     // we need to check if there's a cached (mutated) version first
@@ -73,6 +111,10 @@ export class ListRefBaseInternals<
       return cachedItem as Item
     }
 
+    if (overlayList && isValueShape(shape.shape)) {
+      return overlayList[index]
+    }
+
     const containerItem = container.get(index)
     if (containerItem === undefined) {
       return undefined as Item
@@ -113,9 +155,12 @@ export class ListRefBaseInternals<
   getMutableItem(index: number): MutableItem | undefined {
     const shape = this.getShape()
     const container = this.getContainer() as LoroList | LoroMovableList
+    const overlayList = this.getOverlayList()
 
     // Get the raw container item
-    const containerItem = container.get(index)
+    const containerItem = overlayList
+      ? (overlayList[index] as Item | undefined)
+      : (container.get(index) as Item | undefined)
     if (containerItem === undefined) {
       return undefined as MutableItem
     }
@@ -267,7 +312,7 @@ export class ListRefBaseInternals<
       get container(): LoroList | LoroMovableList {
         return self.getContainer() as LoroList | LoroMovableList
       },
-      subscribe(callback: (event: unknown) => void): Subscription {
+      subscribe(callback: (event: LoroEventBatch) => void): Subscription {
         return (self.getContainer() as LoroList | LoroMovableList).subscribe(
           callback,
         )
@@ -461,6 +506,10 @@ export abstract class ListRefBase<
   }
 
   toArray(): Item[] {
+    const overlayList = this[INTERNAL_SYMBOL].getOverlayList()
+    if (overlayList) {
+      return [...overlayList]
+    }
     const result: Item[] = []
     for (let i = 0; i < this.length; i++) {
       result.push(this[INTERNAL_SYMBOL].getPredicateItem(i) as Item)
@@ -470,10 +519,11 @@ export abstract class ListRefBase<
 
   toJSON(): Item[] {
     const shape = this[INTERNAL_SYMBOL].getShape()
+    const overlayList = this[INTERNAL_SYMBOL].getOverlayList()
     const container = this[INTERNAL_SYMBOL].getContainer() as
       | LoroList
       | LoroMovableList
-    const nativeJson = container.toJSON() as any[]
+    const nativeJson = overlayList ?? (container.toJSON() as any[])
 
     // If the nested shape is a container shape (map, record, etc.) or an object value shape,
     // we need to overlay placeholders for each item
@@ -510,9 +560,35 @@ export abstract class ListRefBase<
   }
 
   get length(): number {
+    const overlayList = this[INTERNAL_SYMBOL].getOverlayList()
+    if (overlayList) {
+      return overlayList.length
+    }
     const container = this[INTERNAL_SYMBOL].getContainer() as
       | LoroList
       | LoroMovableList
     return container.length
   }
 }
+
+function applyListDelta<T>(input: T[], delta: Delta<T[]>[]): T[] {
+  const result: T[] = []
+  let index = 0
+
+  for (const op of delta) {
+    if (op.retain !== undefined) {
+      result.push(...input.slice(index, index + op.retain))
+      index += op.retain
+    } else if (op.delete !== undefined) {
+      index += op.delete
+    } else if (op.insert !== undefined) {
+      result.push(...op.insert)
+    }
+  }
+
+  if (index < input.length) {
+    result.push(...input.slice(index))
+  }
+
+  return result
+}

package/src/typed-refs/record-ref-internals.ts

@@ -1,7 +1,9 @@
 import type {
   Container,
   LoroDoc,
+  LoroEventBatch,
   LoroMap,
+  MapDiff,
   Subscription,
   Value,
 } from "loro-crdt"
@@ -93,6 +95,17 @@ export class RecordRefInternals<
     const container = this.getContainer() as LoroMap
 
     if (isValueShape(shape)) {
+      const overlay = this.getOverlay()
+      if (overlay) {
+        const containerId = (container as any).id
+        const diff = overlay.get(containerId)
+        if (diff && diff.type === "map") {
+          const mapDiff = diff as MapDiff
+          if (key in mapDiff.updated) {
+            return mapDiff.updated[key] as Value
+          }
+        }
+      }
       // When NOT in batchedMutation mode (direct access outside of change()), ALWAYS read fresh
       // from container (NEVER cache). This ensures we always get the latest value
       // from the CRDT, even when modified by a different ref instance (e.g., drafts from change())
@@ -166,9 +179,10 @@ export class RecordRefInternals<
     } else {
       // For container shapes, try to assign the plain value
       // Use getOrCreateRef to ensure the container is created
+      // assignPlainValueToTypedRef handles batching and commits internally
       const ref = this.getOrCreateRef(key)
       if (assignPlainValueToTypedRef(ref as TypedRef<any>, value)) {
-        this.commitIfAuto()
+        // Don't call commitIfAuto here - assignPlainValueToTypedRef handles it
         return
       }
       throw new Error(
@@ -185,6 +199,106 @@ export class RecordRefInternals<
     this.commitIfAuto()
   }
 
+  /**
+   * Replace entire contents with new values.
+   * Keys not in `values` are removed.
+   */
+  replace(values: Record<string, any>): void {
+    const container = this.getContainer() as LoroMap
+    const currentKeys = new Set(container.keys())
+    const newKeys = new Set(Object.keys(values))
+
+    // Suppress auto-commit during batch operations
+    const wasSuppressed = this.isSuppressAutoCommit()
+    if (!wasSuppressed) {
+      this.setSuppressAutoCommit(true)
+    }
+
+    try {
+      // Delete keys that are not in the new values
+      for (const key of currentKeys) {
+        if (!newKeys.has(key)) {
+          container.delete(key)
+          this.refCache.delete(key)
+        }
+      }
+
+      // Set new/updated values
+      for (const key of newKeys) {
+        this.set(key, values[key])
+      }
+    } finally {
+      // Restore auto-commit state
+      if (!wasSuppressed) {
+        this.setSuppressAutoCommit(false)
+      }
+    }
+
+    // Commit once after all operations
+    this.commitIfAuto()
+  }
+
+  /**
+   * Merge values into record.
+   * Existing keys not in `values` are kept.
+   */
+  merge(values: Record<string, any>): void {
+    // Suppress auto-commit during batch operations
+    const wasSuppressed = this.isSuppressAutoCommit()
+    if (!wasSuppressed) {
+      this.setSuppressAutoCommit(true)
+    }
+
+    try {
+      // Set new/updated values (no deletions)
+      for (const key of Object.keys(values)) {
+        this.set(key, values[key])
+      }
+    } finally {
+      // Restore auto-commit state
+      if (!wasSuppressed) {
+        this.setSuppressAutoCommit(false)
+      }
+    }
+
+    // Commit once after all operations
+    this.commitIfAuto()
+  }
+
+  /**
+   * Remove all entries from the record.
+   */
+  clear(): void {
+    const container = this.getContainer() as LoroMap
+    const keys = container.keys()
+
+    if (keys.length === 0) {
+      return // No-op on empty record
+    }
+
+    // Suppress auto-commit during batch operations
+    const wasSuppressed = this.isSuppressAutoCommit()
+    if (!wasSuppressed) {
+      this.setSuppressAutoCommit(true)
+    }
+
+    try {
+      // Delete all keys
+      for (const key of keys) {
+        container.delete(key)
+        this.refCache.delete(key)
+      }
+    } finally {
+      // Restore auto-commit state
+      if (!wasSuppressed) {
+        this.setSuppressAutoCommit(false)
+      }
+    }
+
+    // Commit once after all operations
+    this.commitIfAuto()
+  }
+
   /** Absorb mutated plain values back into Loro containers */
   absorbPlainValues(): void {
     absorbCachedPlainValues(this.refCache, () => this.getContainer() as LoroMap)
@@ -200,7 +314,7 @@ export class RecordRefInternals<
       get container(): LoroMap {
         return self.getContainer() as LoroMap
       },
-      subscribe(callback: (event: unknown) => void): Subscription {
+      subscribe(callback: (event: LoroEventBatch) => void): Subscription {
         return (self.getContainer() as LoroMap).subscribe(callback)
       },
       setContainer(key: string, container: Container): Container {