@loro-extended/change 5.4.0 → 5.4.1

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/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.ts

@@ -1,5 +1,7 @@
 import type {
   Container,
+  Delta,
+  ListDiff,
   LoroDoc,
   LoroEventBatch,
   LoroList,
@@ -38,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(
@@ -58,6 +93,7 @@ export class ListRefBaseInternals<
       autoCommit: this.getAutoCommit(),
       batchedMutation: this.getBatchedMutation(),
       getDoc: () => this.getDoc(),
+      overlay: this.getOverlay(),
     }
   }
 
@@ -65,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
@@ -74,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
@@ -114,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
     }
@@ -462,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)
@@ -471,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
@@ -511,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

@@ -3,6 +3,7 @@ import type {
   LoroDoc,
   LoroEventBatch,
   LoroMap,
+  MapDiff,
   Subscription,
   Value,
 } from "loro-crdt"
@@ -94,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())

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

@@ -3,6 +3,7 @@ import type {
   LoroDoc,
   LoroEventBatch,
   LoroMap,
+  MapDiff,
   Subscription,
   Value,
 } from "loro-crdt"
@@ -76,6 +77,17 @@ export class StructRefInternals<
     const container = this.getContainer() as LoroMap
 
     if (isValueShape(actualShape)) {
+      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())

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

@@ -1,4 +1,11 @@
-import type { LoroDoc, LoroEventBatch, LoroText, Subscription } from "loro-crdt"
+import type {
+  Delta,
+  LoroDoc,
+  LoroEventBatch,
+  LoroText,
+  Subscription,
+  TextDiff,
+} from "loro-crdt"
 import type { LoroTextRef } from "../loro.js"
 import type { TextContainerShape } from "../shape.js"
 import { BaseRefInternals } from "./base.js"
@@ -55,6 +62,14 @@ export class TextRefInternals extends BaseRefInternals<TextContainerShape> {
   /** Get the text as a string */
   getStringValue(): string {
     const container = this.getContainer() as LoroText
+    const overlay = this.getOverlay()
+    if (overlay) {
+      const diff = overlay.get(container.id)
+      if (diff && diff.type === "text") {
+        const containerValue = container.toString()
+        return applyTextDelta(containerValue, (diff as TextDiff).diff)
+      }
+    }
     const containerValue = container.toString()
     if (containerValue !== "" || this.materialized) {
       return containerValue
@@ -69,12 +84,30 @@ export class TextRefInternals extends BaseRefInternals<TextContainerShape> {
 
   /** Get the text as a delta */
   toDelta(): any[] {
-    return (this.getContainer() as LoroText).toDelta()
+    const container = this.getContainer() as LoroText
+    const overlay = this.getOverlay()
+    if (overlay) {
+      const diff = overlay.get(container.id)
+      if (diff && diff.type === "text") {
+        const base = container.toDelta() as Delta<string>[]
+        return applyDeltaToDelta(base, (diff as TextDiff).diff)
+      }
+    }
+    return container.toDelta()
   }
 
   /** Get the length of the text */
   getLength(): number {
-    return (this.getContainer() as LoroText).length
+    const container = this.getContainer() as LoroText
+    const overlay = this.getOverlay()
+    if (overlay) {
+      const diff = overlay.get(container.id)
+      if (diff && diff.type === "text") {
+        return applyTextDelta(container.toString(), (diff as TextDiff).diff)
+          .length
+      }
+    }
+    return container.length
   }
 
   /** No plain values in text */
@@ -98,3 +131,36 @@ export class TextRefInternals extends BaseRefInternals<TextContainerShape> {
     }
   }
 }
+
+function applyTextDelta(text: string, delta: Delta<string>[]): string {
+  let result = ""
+  let index = 0
+
+  for (const op of delta) {
+    if (op.retain !== undefined) {
+      result += text.slice(index, index + op.retain)
+      index += op.retain
+    } else if (op.delete !== undefined) {
+      index += op.delete
+    } else if (op.insert !== undefined) {
+      result += op.insert
+    }
+  }
+
+  if (index < text.length) {
+    result += text.slice(index)
+  }
+
+  return result
+}
+
+function applyDeltaToDelta(
+  base: Delta<string>[],
+  diff: Delta<string>[],
+): Delta<string>[] {
+  const baseText = base
+    .map(op => (op.insert !== undefined ? op.insert : ""))
+    .join("")
+  const nextText = applyTextDelta(baseText, diff)
+  return nextText ? [{ insert: nextText }] : []
+}