@loro-extended/change 5.4.0 → 5.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loro-extended/change",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "A schema-driven, type-safe wrapper for Loro CRDT that provides natural JavaScript syntax for collaborative data mutations",
   "author": "Duane Johnson",
   "license": "MIT",

package/src/change.test.ts

@@ -2248,7 +2248,7 @@ describe("Edge Cases and Error Handling", () => {
       // Note: authorColor is NOT set - this should fall back to placeholder default
 
       // Wrap with TypedDoc
-      const typedDoc = createTypedDoc(DocSchema, loroDoc)
+      const typedDoc = createTypedDoc(DocSchema, { doc: loroDoc })
 
       // This should not throw "placeholder required"
       expect(() => {

package/src/diff-overlay.test.ts

@@ -0,0 +1,95 @@
+import type { LoroEventBatch } from "loro-crdt"
+import { describe, expect, it } from "vitest"
+import { createDiffOverlay } from "./diff-overlay.js"
+import { createTypedDoc, loro, Shape } from "./index.js"
+
+describe("diff overlay", () => {
+  it("should read before values via overlay without checkout", () => {
+    const schema = Shape.doc({
+      counter: Shape.counter(),
+      info: Shape.struct({
+        name: Shape.plain.string(),
+        count: Shape.plain.number(),
+      }),
+      list: Shape.list(Shape.plain.number()),
+      text: Shape.text(),
+    })
+
+    const doc = createTypedDoc(schema)
+    const loroDoc = loro(doc).doc
+
+    doc.counter.increment(10)
+    doc.info.name = "Alice"
+    doc.info.count = 1
+    doc.list.push(1)
+    doc.text.insert(0, "hello")
+    loroDoc.commit()
+
+    const transitions: Array<{
+      before: {
+        counter: number
+        name: string
+        count: number
+        list: number[]
+        text: string
+      }
+      after: {
+        counter: number
+        name: string
+        count: number
+        list: number[]
+        text: string
+      }
+    }> = []
+
+    loroDoc.subscribe(event => {
+      const batch = event as LoroEventBatch
+      if (batch.by === "checkout") return
+
+      const overlay = createDiffOverlay(loroDoc, batch)
+      const beforeDoc = createTypedDoc(schema, { doc: loroDoc, overlay })
+      const afterDoc = createTypedDoc(schema, { doc: loroDoc })
+
+      transitions.push({
+        before: {
+          counter: beforeDoc.counter.value,
+          name: beforeDoc.info.name,
+          count: beforeDoc.info.count,
+          list: beforeDoc.list.toArray(),
+          text: beforeDoc.text.toString(),
+        },
+        after: {
+          counter: afterDoc.counter.value,
+          name: afterDoc.info.name,
+          count: afterDoc.info.count,
+          list: afterDoc.list.toArray(),
+          text: afterDoc.text.toString(),
+        },
+      })
+    })
+
+    doc.change(draft => {
+      draft.counter.increment(5)
+      draft.info.name = "Bob"
+      draft.info.count = 2
+      draft.list.push(2)
+      draft.text.update("hello world")
+    })
+
+    expect(transitions).toHaveLength(1)
+    expect(transitions[0].before).toEqual({
+      counter: 10,
+      name: "Alice",
+      count: 1,
+      list: [1],
+      text: "hello",
+    })
+    expect(transitions[0].after).toEqual({
+      counter: 15,
+      name: "Bob",
+      count: 2,
+      list: [1, 2],
+      text: "hello world",
+    })
+  })
+})

package/src/diff-overlay.ts

@@ -0,0 +1,10 @@
+import type { ContainerID, Diff, LoroDoc, LoroEventBatch } from "loro-crdt"
+
+export type DiffOverlay = ReadonlyMap<ContainerID, Diff>
+
+export function createDiffOverlay(
+  doc: LoroDoc,
+  batch: LoroEventBatch,
+): DiffOverlay {
+  return new Map(doc.diff(batch.to, batch.from, false))
+}

package/src/discriminated-union-tojson.test.ts

@@ -64,7 +64,7 @@ describe("Record with Map entries - placeholder required bug", () => {
     // Note: authorColor is NOT set - this should fall back to placeholder
 
     // Now wrap it with TypedDoc
-    const typedDoc = createTypedDoc(AiStateSchema, loroDoc)
+    const typedDoc = createTypedDoc(AiStateSchema, { doc: loroDoc })
 
     // This should not throw "placeholder required"
     // BUG: Currently throws because the nested MapRef has placeholder: undefined
@@ -107,7 +107,7 @@ describe("Record with Map entries - placeholder required bug", () => {
     // Only set peerId - other fields are missing
     studentMap.set("peerId", "peer-456")
 
-    const typedDoc = createTypedDoc(AiStateSchema, loroDoc)
+    const typedDoc = createTypedDoc(AiStateSchema, { doc: loroDoc })
 
     // This should not throw - missing fields should use placeholder defaults
     expect(() => {

package/src/fork-at.test.ts

@@ -197,7 +197,7 @@ describe("forkAt", () => {
       expect(rawForkedDoc.toJSON()).toEqual({ text: "Hello" })
 
       // Can wrap it manually if needed
-      const typedForkedDoc = createTypedDoc(schema, rawForkedDoc)
+      const typedForkedDoc = createTypedDoc(schema, { doc: rawForkedDoc })
       expect(typedForkedDoc.text.toString()).toBe("Hello")
     })
   })

package/src/functional-helpers.test.ts

@@ -1,3 +1,4 @@
+import type { LoroEventBatch } from "loro-crdt"
 import {
   LoroCounter,
   LoroList,
@@ -7,7 +8,12 @@ import {
   LoroTree,
 } from "loro-crdt"
 import { describe, expect, it, vi } from "vitest"
-import { change, getLoroContainer, getLoroDoc } from "./functional-helpers.js"
+import {
+  change,
+  getLoroContainer,
+  getLoroDoc,
+  getTransition,
+} from "./functional-helpers.js"
 import { loro } from "./loro.js"
 import { Shape } from "./shape.js"
 import { createTypedDoc } from "./typed-doc.js"
@@ -486,6 +492,49 @@ describe("functional helpers", () => {
     })
   })
 
+  describe("getTransition()", () => {
+    it("should return before/after using reverse diff overlay", () => {
+      const doc = createTypedDoc(schema)
+
+      const transitions: Array<{ beforeCount: number; afterCount: number }> = []
+      const unsubscribe = loro(doc).subscribe(event => {
+        const { before, after } = getTransition(doc, event)
+        transitions.push({
+          beforeCount: before.count.value,
+          afterCount: after.count.value,
+        })
+      })
+
+      doc.count.increment(2)
+      loro(doc).doc.commit()
+
+      expect(transitions).toEqual([{ beforeCount: 0, afterCount: 2 }])
+      unsubscribe()
+    })
+
+    it("should throw on checkout events", () => {
+      const doc = createTypedDoc(schema)
+      const frontiers = loro(doc).doc.frontiers()
+
+      doc.count.increment(1)
+      loro(doc).doc.commit()
+
+      let checkoutEvent: LoroEventBatch | undefined
+      const unsubscribe = loro(doc).subscribe(event => {
+        checkoutEvent = event
+      })
+
+      loro(doc).doc.checkout(frontiers)
+
+      expect(checkoutEvent).toBeDefined()
+      expect(() => getTransition(doc, checkoutEvent as LoroEventBatch)).toThrow(
+        "getTransition does not support checkout events",
+      )
+
+      unsubscribe()
+    })
+  })
+
   describe("getLoroDoc() on refs", () => {
     it("should return LoroDoc from TextRef", () => {
       const doc = createTypedDoc(fullSchema)

package/src/functional-helpers.ts

@@ -1,12 +1,14 @@
 import {
   type LoroCounter,
   LoroDoc,
+  type LoroEventBatch,
   type LoroList,
   type LoroMap,
   type LoroMovableList,
   type LoroText,
   type LoroTree,
 } from "loro-crdt"
+import { createDiffOverlay } from "./diff-overlay.js"
 import { loro } from "./loro.js"
 import type {
   ContainerOrValueShape,
@@ -317,7 +319,7 @@ export function fork<Shape extends DocShape>(
     forkedLoroDoc.setPeerId(loroDoc.peerId)
   }
 
-  return createTypedDoc(shape, forkedLoroDoc)
+  return createTypedDoc(shape, { doc: forkedLoroDoc })
 }
 
 /**
@@ -353,7 +355,7 @@ export function forkAt<Shape extends DocShape>(
   const loroDoc = loro(doc).doc
   const forkedLoroDoc = loroDoc.forkAt(frontiers)
   const shape = loro(doc).docShape as Shape
-  return createTypedDoc(shape, forkedLoroDoc)
+  return createTypedDoc(shape, { doc: forkedLoroDoc })
 }
 
 /**
@@ -421,5 +423,33 @@ export function shallowForkAt<Shape extends DocShape>(
     shallowLoroDoc.setPeerId(loroDoc.peerId)
   }
 
-  return createTypedDoc(shape, shallowLoroDoc)
+  return createTypedDoc(shape, { doc: shallowLoroDoc })
+}
+
+export type Transition<Shape extends DocShape> = {
+  before: TypedDoc<Shape>
+  after: TypedDoc<Shape>
+}
+
+/**
+ * Build a `{ before, after }` transition from a TypedDoc and a Loro event batch.
+ * Uses a reverse diff overlay to compute the "before" view without checkout.
+ * Throws on checkout events to avoid time-travel transitions.
+ */
+export function getTransition<Shape extends DocShape>(
+  doc: TypedDoc<Shape>,
+  event: LoroEventBatch,
+): Transition<Shape> {
+  if (event.by === "checkout") {
+    throw new Error("getTransition does not support checkout events")
+  }
+
+  const loroDoc = getLoroDoc(doc)
+  const shape = loro(doc).docShape as Shape
+  const overlay = createDiffOverlay(loroDoc, event)
+
+  return {
+    before: createTypedDoc(shape, { doc: loroDoc, overlay }),
+    after: createTypedDoc(shape, { doc: loroDoc }),
+  }
 }

package/src/index.ts

@@ -4,7 +4,9 @@ export {
   derivePlaceholder,
   deriveShapePlaceholder,
 } from "./derive-placeholder.js"
-
+// Diff overlay--make the TypedDoc return values as if a diff is applied
+export { createDiffOverlay } from "./diff-overlay.js"
+export type { Transition } from "./functional-helpers.js"
 // Functional helpers (recommended API)
 export {
   change,
@@ -12,9 +14,9 @@ export {
   forkAt,
   getLoroContainer,
   getLoroDoc,
+  getTransition,
   shallowForkAt,
 } from "./functional-helpers.js"
-
 // The loro() escape hatch for CRDT internals
 export {
   LORO_SYMBOL,
@@ -27,36 +29,47 @@ export {
   type LoroTypedDocRef,
   loro,
 } from "./loro.js"
-
+// Regular placeholder overlay
 export { mergeValue, overlayPlaceholder } from "./overlay.js"
+
 // Path selector DSL exports
 export { createPathBuilder } from "./path-builder.js"
+
 export { compileToJsonPath, hasWildcard } from "./path-compiler.js"
+
 export { evaluatePath, evaluatePathOnValue } from "./path-evaluator.js"
+
 export type {
   PathBuilder,
   PathNode,
   PathSegment,
   PathSelector,
 } from "./path-selector.js"
+
 export { createPlaceholderProxy } from "./placeholder-proxy.js"
+
 export { replayDiff } from "./replay-diff.js"
-// Shape utilities
+// Doc shapes
 // Container shapes
 // Value shapes
+// Shape utilities
 export type {
   AnyContainerShape,
   AnyValueShape,
   ArrayValueShape,
+  BooleanValueShape,
+  // A shape type representing any container-type or value-type shape (excludes DocShape)
   ContainerOrValueShape,
+  // A shape type representing any container-type shape
   ContainerShape,
   ContainerType as RootContainerType,
   CounterContainerShape,
-  // Tagged union
+  // Tagged union of two or more plain value types
   DiscriminatedUnionValueShape,
   DocShape,
   ListContainerShape,
   MovableListContainerShape,
+  NullValueShape,
   NumberValueShape,
   RecordContainerShape,
   RecordValueShape,
@@ -67,8 +80,11 @@ export type {
   TreeContainerShape,
   TreeNodeJSON,
   TreeRefInterface,
+  Uint8ArrayValueShape,
+  UndefinedValueShape,
   // Union of two or more plain value types
   UnionValueShape,
+  // A shape type representing any value-type shape
   ValueShape,
   // WithNullable type for shapes that support .nullable()
   WithNullable,
@@ -78,17 +94,24 @@ export type {
 
 // Schema and type exports
 export { Shape } from "./shape.js"
+
 export type { Frontiers, TypedDoc } from "./typed-doc.js"
+
 export { createTypedDoc } from "./typed-doc.js"
+
 // Typed ref types - for specifying types with the loro() function
-export type { CounterRef } from "./typed-refs/counter-ref.js"
-export type { ListRef } from "./typed-refs/list-ref.js"
-export type { MovableListRef } from "./typed-refs/movable-list-ref.js"
-export type { RecordRef } from "./typed-refs/record-ref.js"
-export type { StructRef } from "./typed-refs/struct-ref.js"
-export type { TextRef } from "./typed-refs/text-ref.js"
-export type { TreeNodeRef } from "./typed-refs/tree-node-ref.js"
-export type { TreeRef } from "./typed-refs/tree-ref.js"
+export type {
+  CounterRef,
+  DiffOverlay,
+  ListRef,
+  MovableListRef,
+  RecordRef,
+  StructRef,
+  TextRef,
+  TreeNodeRef,
+  TreeRef,
+} from "./typed-refs/index.js"
+
 export type {
   // Type inference - Infer<T> is the recommended unified helper
   Infer,
@@ -98,5 +121,6 @@ export type {
   InferRaw,
   Mutable,
 } from "./types.js"
+
 // Utility exports
 export { validatePlaceholder } from "./validation.js"

package/src/overlay-recursion.test.ts

@@ -52,7 +52,7 @@ describe("Overlay and Placeholder Handling", () => {
       userMap.set("name", "Alice")
       // Note: 'role' is NOT set - should default to "guest"
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.users[0].name).toBe("Alice")
@@ -91,7 +91,7 @@ describe("Overlay and Placeholder Handling", () => {
       empMap.set("name", "Bob")
       // Note: 'level' and 'status' are NOT set
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.departments[0].name).toBe("Engineering")
@@ -121,7 +121,7 @@ describe("Overlay and Placeholder Handling", () => {
       )
       // Actually we need to create a text container properly
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       // The counter should default to 100 if not set
@@ -147,7 +147,7 @@ describe("Overlay and Placeholder Handling", () => {
       taskMap.set("title", "Important Task")
       // Note: 'priority' and 'completed' are NOT set
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.tasks[0].title).toBe("Important Task")
@@ -174,7 +174,7 @@ describe("Overlay and Placeholder Handling", () => {
       itemMap.set("name", "Widget")
       // Note: 'count' is NOT set
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
 
       // Access the list ref directly and call toJSON()
       const listJson = typedDoc.items.toJSON()
@@ -213,7 +213,7 @@ describe("Overlay and Placeholder Handling", () => {
       numbersList.insert(1, 2)
       numbersList.insert(2, 3)
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.numbers).toEqual([1, 2, 3])
@@ -239,7 +239,7 @@ describe("Overlay and Placeholder Handling", () => {
       userMap.set("name", "Charlie")
       // Note: 'salary' is NOT set
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.usersByDept.engineering[0].name).toBe("Charlie")
@@ -294,7 +294,7 @@ describe("Overlay and Placeholder Handling", () => {
       const dataMap = loroDoc.getMap("data")
       dataMap.set("value", null)
 
-      const typedDoc = createTypedDoc(schema, loroDoc)
+      const typedDoc = createTypedDoc(schema, { doc: loroDoc })
       const json = typedDoc.toJSON()
 
       expect(json.data.value).toBeNull()

package/src/shallow-fork.test.ts

@@ -205,7 +205,7 @@ describe("shallow fork", () => {
       shallowLoroDoc.setPeerId(loro(doc).doc.peerId)
 
       // Wrap in TypedDoc
-      const shallowDoc = createTypedDoc(TestSchema, shallowLoroDoc)
+      const shallowDoc = createTypedDoc(TestSchema, { doc: shallowLoroDoc })
 
       // Verify state is correct
       expect(shallowDoc.counter.value).toBe(5)

package/src/shape.ts

@@ -385,17 +385,17 @@ export interface AnyValueShape extends Shape<Value, Value, undefined> {
 // Union of all ValueShapes - these can only contain other ValueShapes, not ContainerShapes
 export type ValueShape =
   | AnyValueShape
-  | StringValueShape
-  | NumberValueShape
+  | ArrayValueShape
   | BooleanValueShape
+  | DiscriminatedUnionValueShape
   | NullValueShape
-  | UndefinedValueShape
-  | Uint8ArrayValueShape
-  | StructValueShape
+  | NumberValueShape
   | RecordValueShape
-  | ArrayValueShape
+  | StringValueShape
+  | StructValueShape
+  | Uint8ArrayValueShape
+  | UndefinedValueShape
   | UnionValueShape
-  | DiscriminatedUnionValueShape
 
 export type ContainerOrValueShape = ContainerShape | ValueShape
 

package/src/typed-doc.ts

@@ -16,7 +16,7 @@ import {
 import { LORO_SYMBOL, type LoroTypedDocRef } from "./loro.js"
 import { overlayPlaceholder } from "./overlay.js"
 import type { DocShape } from "./shape.js"
-import { INTERNAL_SYMBOL } from "./typed-refs/base.js"
+import { type DiffOverlay, INTERNAL_SYMBOL } from "./typed-refs/base.js"
 import { DocRef } from "./typed-refs/doc-ref.js"
 import type { Infer, InferPlaceholderType, Mutable } from "./types.js"
 import { validatePlaceholder } from "./validation.js"
@@ -29,14 +29,20 @@ class TypedDocInternal<Shape extends DocShape> {
   private shape: Shape
   private placeholder: InferPlaceholderType<Shape>
   private doc: LoroDoc
+  private overlay?: DiffOverlay
   private valueRef: DocRef<Shape> | null = null
   // Reference to the proxy for returning from change()
   proxy: TypedDoc<Shape> | null = null
 
-  constructor(shape: Shape, doc: LoroDoc = new LoroDoc()) {
+  constructor(
+    shape: Shape,
+    doc: LoroDoc = new LoroDoc(),
+    overlay?: DiffOverlay,
+  ) {
     this.shape = shape
     this.placeholder = derivePlaceholder(shape)
     this.doc = doc
+    this.overlay = overlay
 
     validatePlaceholder(this.placeholder, this.shape)
   }
@@ -48,6 +54,7 @@ class TypedDocInternal<Shape extends DocShape> {
         placeholder: this.placeholder as any,
         doc: this.doc,
         autoCommit: true,
+        overlay: this.overlay,
       })
     }
     return this.valueRef as unknown as Mutable<Shape>
@@ -69,6 +76,7 @@ class TypedDocInternal<Shape extends DocShape> {
       doc: this.doc,
       autoCommit: false,
       batchedMutation: true, // Enable value shape caching for find-and-mutate patterns
+      overlay: this.overlay,
     })
     fn(draft as unknown as Mutable<Shape>)
     draft[INTERNAL_SYMBOL].absorbPlainValues()
@@ -140,6 +148,11 @@ class TypedDocInternal<Shape extends DocShape> {
  */
 export type Frontiers = { peer: PeerID; counter: number }[]
 
+export type CreateTypedDocOptions = {
+  doc?: LoroDoc
+  overlay?: DiffOverlay
+}
+
 export type TypedDoc<Shape extends DocShape> = Mutable<Shape> & {
   /**
    * The primary method of mutating typed documents.
@@ -208,7 +221,7 @@ export type TypedDoc<Shape extends DocShape> = Mutable<Shape> & {
  * Returns a proxied document where schema properties are accessed directly.
  *
  * @param shape - The document schema (with optional .placeholder() values)
- * @param existingDoc - Optional existing LoroDoc to wrap
+ * @param options - Optional existing LoroDoc or diff overlay
  * @returns A proxied TypedDoc with direct schema access
  *
  * @example
@@ -241,9 +254,13 @@ export type TypedDoc<Shape extends DocShape> = Mutable<Shape> & {
  */
 export function createTypedDoc<Shape extends DocShape>(
   shape: Shape,
-  existingDoc?: LoroDoc,
+  options: CreateTypedDocOptions = {},
 ): TypedDoc<Shape> {
-  const internal = new TypedDocInternal(shape, existingDoc || new LoroDoc())
+  const internal = new TypedDocInternal(
+    shape,
+    options.doc || new LoroDoc(),
+    options.overlay,
+  )
 
   // Create the loro() namespace for this doc
   const loroNamespace: LoroTypedDocRef = {
@@ -278,7 +295,7 @@ export function createTypedDoc<Shape extends DocShape>(
   // Create the forkAt() function that returns a new TypedDoc at the specified version
   const forkAtFunction = (frontiers: Frontiers): TypedDoc<Shape> => {
     const forkedLoroDoc = internal.loroDoc.forkAt(frontiers)
-    return createTypedDoc(internal.docShape, forkedLoroDoc)
+    return createTypedDoc(internal.docShape, { doc: forkedLoroDoc })
   }
 
   // Create a proxy that delegates schema properties to the DocRef

package/src/typed-refs/base.ts

@@ -1,4 +1,10 @@
-import type { LoroDoc, LoroEventBatch, Subscription } from "loro-crdt"
+import type {
+  ContainerID,
+  Diff,
+  LoroDoc,
+  LoroEventBatch,
+  Subscription,
+} from "loro-crdt"
 import { LORO_SYMBOL, type LoroRefBase } from "../loro.js"
 import type { ContainerShape, DocShape, ShapeToContainer } from "../shape.js"
 import type { Infer } from "../types.js"
@@ -31,6 +37,8 @@ export interface RefInternalsBase {
 // TypedRefParams and TypedRef Base Class
 // ============================================================================
 
+export type DiffOverlay = ReadonlyMap<ContainerID, Diff>
+
 export type TypedRefParams<Shape extends DocShape | ContainerShape> = {
   shape: Shape
   placeholder?: Infer<Shape>
@@ -38,6 +46,7 @@ export type TypedRefParams<Shape extends DocShape | ContainerShape> = {
   autoCommit?: boolean // Auto-commit after mutations
   batchedMutation?: boolean // True when inside change() block - enables value shape caching for find-and-mutate patterns
   getDoc: () => LoroDoc // Needed for auto-commit
+  overlay?: DiffOverlay // Optional reverse diff overlay for "before" reads
 }
 
 // ============================================================================
@@ -112,6 +121,11 @@ export abstract class BaseRefInternals<Shape extends DocShape | ContainerShape>
     return this.params.getDoc()
   }
 
+  /** Get the diff overlay map (if provided) */
+  getOverlay(): DiffOverlay | undefined {
+    return this.params.overlay
+  }
+
   /**
    * Get the TypedRefParams needed to recreate this ref.
    * Used by change() to create draft refs with modified params.
@@ -127,6 +141,7 @@ export abstract class BaseRefInternals<Shape extends DocShape | ContainerShape>
       autoCommit: this.params.autoCommit,
       batchedMutation: this.params.batchedMutation,
       getDoc: this.params.getDoc,
+      overlay: this.params.overlay,
     }
   }
 

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

@@ -1,4 +1,5 @@
 import type {
+  CounterDiff,
   LoroCounter,
   LoroDoc,
   LoroEventBatch,
@@ -33,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
     }