@vuer-ai/vuer-rtc 0.5.0 → 0.5.2

package/tests/client/coalesce-text-operations.test.ts

@@ -239,8 +239,7 @@ describe('coalesceTextOperations', () => {
         {
           type: 'delete',
           op: {
-            id: 'alice:3',
-            length: 1,
+            deletions: [{ id: 'alice:2', length: 1 }],
             seq: 3,
             ts: 1000.1,
           },

package/tests/client/delete-coalescence-bug.test.ts

@@ -0,0 +1,249 @@
+/**
+ * Tests demonstrating the delete coalescence bug
+ *
+ * BUG: When user types quickly and then deletes, the deletion array contains
+ * many single-character deletions instead of being optimized.
+ *
+ * ROOT CAUSE: Local typing creates separate items in the rope. Insert coalescence
+ * merges operations for network transmission but doesn't update the local rope.
+ * When deleting, remove() iterates through many items and creates many deletion entries.
+ */
+
+import { describe, it, expect } from '@jest/globals';
+import { create, insert, remove, apply, toJSON } from '../../src/crdt/Rope.js';
+import type { InsertOp } from '../../src/crdt/Rope.js';
+import { coalesceTextOperations } from '../../src/client/coalesceTextOperations.js';
+import type { TextOperation } from '../../src/client/textTypes.js';
+
+describe('Delete Coalescence Bug', () => {
+  describe('Local typing creates many items', () => {
+    it('should merge consecutive single-char deletions into one deletion', () => {
+      const rope = create('alice');
+
+      // Simulate typing "Hello" one char at a time
+      insert(rope, 0, 'H');
+      insert(rope, 1, 'e');
+      insert(rope, 2, 'l');
+      insert(rope, 3, 'l');
+      insert(rope, 4, 'o');
+
+      // Verify text is correct
+      expect(rope.toString()).toBe('Hello');
+
+      // Now delete all 5 characters
+      const deleteOp = remove(rope, 0, 5);
+
+      // FIXED: Now we get 1 deletion with length 5 instead of 5 separate deletions!
+      expect(deleteOp.deletions).toHaveLength(1);
+      expect(deleteOp.deletions[0].length).toBe(5);
+      expect(deleteOp.deletions[0].id).toMatch(/alice:\d+/);
+
+      // This is efficient - we're sending 1 deletion entry instead of 5
+    });
+
+    it('should show that individual delete operations each have optimized deletions', () => {
+      const rope = create('alice');
+
+      // Type "Hello"
+      insert(rope, 0, 'H');
+      insert(rope, 1, 'e');
+      insert(rope, 2, 'l');
+      insert(rope, 3, 'l');
+      insert(rope, 4, 'o');
+
+      // Press backspace 5 times rapidly
+      const delete1 = remove(rope, 4, 1); // Delete 'o'
+      const delete2 = remove(rope, 3, 1); // Delete 'l'
+      const delete3 = remove(rope, 2, 1); // Delete 'l'
+      const delete4 = remove(rope, 1, 1); // Delete 'e'
+      const delete5 = remove(rope, 0, 1); // Delete 'H'
+
+      // Each delete creates 1 deletion entry (expected - only deleting 1 char each time)
+      expect(delete1.deletions).toHaveLength(1);
+      expect(delete2.deletions).toHaveLength(1);
+      expect(delete3.deletions).toHaveLength(1);
+      expect(delete4.deletions).toHaveLength(1);
+      expect(delete5.deletions).toHaveLength(1);
+
+      // Note: These are 5 separate delete OPERATIONS, each with 1 deletion
+      // Operation-level coalescence (in coalesceTextOperations) will merge these
+      // 5 operations into 1 operation with 5 deletions, then optimizeDeletions()
+      // will merge those 5 deletions into 1 deletion
+    });
+  });
+
+  describe('Remote coalesced operations create efficient items', () => {
+    it('should show that applying coalesced InsertOp creates 1 item', () => {
+      const rope = create('bob');
+
+      // Simulate receiving a coalesced operation from Alice
+      const coalescedOp: InsertOp = {
+        id: 'alice:1',
+        content: 'Hello',
+        parentId: null,
+        seq: 1,
+        ts: 1000.0,
+      };
+
+      apply(rope, coalescedOp);
+
+      expect(rope.toString()).toBe('Hello');
+
+      // Now delete all 5 characters
+      const deleteOp = remove(rope, 0, 5);
+
+      // GOOD: Only 1 deletion with length 5 (because it's a single item)
+      expect(deleteOp.deletions).toHaveLength(1);
+      expect(deleteOp.deletions[0].id).toBe('alice:1');
+      expect(deleteOp.deletions[0].length).toBe(5);
+    });
+  });
+
+  describe('Coalescence works at network layer, deletions optimized at rope layer', () => {
+    it('should show that remove() optimizes deletions even though rope has separate items', () => {
+      const rope = create('alice');
+      const ops: InsertOp[] = [];
+
+      // Type "Hello" and collect operations
+      ops.push(insert(rope, 0, 'H'));
+      ops.push(insert(rope, 1, 'e'));
+      ops.push(insert(rope, 2, 'l'));
+      ops.push(insert(rope, 3, 'l'));
+      ops.push(insert(rope, 4, 'o'));
+
+      // Coalesce operations for network transmission
+      const textOps: TextOperation[] = ops.map(op => ({ type: 'insert', op }));
+      const coalesced = coalesceTextOperations(textOps, { thresholdMs: 1000 });
+
+      // Coalescence merged 5 ops into 1 op
+      expect(coalesced).toHaveLength(1);
+      expect((coalesced[0] as any).op.content).toBe('Hello');
+
+      // The local rope still has 5 separate items (coalescence doesn't modify the rope)
+      // BUT remove() now optimizes the deletions array!
+      const deleteOp = remove(rope, 0, 5);
+      expect(deleteOp.deletions).toHaveLength(1); // FIXED: 1 deletion instead of 5!
+      expect(deleteOp.deletions[0].length).toBe(5);
+
+      // This is the fix: even though rope has 5 items, remove() merges consecutive
+      // deletions from the same agent into a single deletion entry
+    });
+  });
+
+  describe('Verified correct behavior after fix', () => {
+    it('should merge consecutive deletions from same agent', () => {
+      const rope = create('alice');
+
+      // Type "Hello" - creates alice:0, alice:1, alice:2, alice:3, alice:4
+      insert(rope, 0, 'H');
+      insert(rope, 1, 'e');
+      insert(rope, 2, 'l');
+      insert(rope, 3, 'l');
+      insert(rope, 4, 'o');
+
+      // Delete all 5 characters
+      const deleteOp = remove(rope, 0, 5);
+
+      // FIXED: deletions = [{id: alice:0, len:5}] (merged consecutive IDs)
+      expect(deleteOp.deletions).toHaveLength(1);
+      expect(deleteOp.deletions[0].length).toBe(5);
+    });
+
+    it('should handle mixed local and remote items correctly', () => {
+      const rope = create('alice');
+
+      // Alice types "Hi"
+      insert(rope, 0, 'H');
+      insert(rope, 1, 'i');
+
+      // Bob types "ey" (received as coalesced op)
+      const bobOp: InsertOp = {
+        id: 'bob:1',
+        content: 'ey',
+        parentId: 'alice:1',
+        seq: 3,
+        ts: 1000.0,
+      };
+      apply(rope, bobOp);
+
+      // YATA ordering determines final text (could be "Hiey" or "eyHi" depending on timestamps)
+      const text = rope.toString();
+      expect(text.length).toBe(4);
+      expect(text).toContain('Hi');
+      expect(text).toContain('ey');
+
+      // Alice deletes all 4 characters
+      const deleteOp = remove(rope, 0, 4);
+
+      // FIXED: 2 deletions (can't merge across agents, but alice's chars are merged)
+      // - alice:0-1 merged → 1 deletion with length 2
+      // - bob:1 → 1 deletion with length 2
+      expect(deleteOp.deletions).toHaveLength(2);
+
+      // Both deletions should be multi-char
+      expect(deleteOp.deletions[0].length).toBe(2);
+      expect(deleteOp.deletions[1].length).toBe(2);
+
+      // One from alice, one from bob
+      const agents = deleteOp.deletions.map(d => d.id.split(':')[0]);
+      expect(agents).toContain('alice');
+      expect(agents).toContain('bob');
+    });
+  });
+
+  describe('Real-world scenario from bug report', () => {
+    it('should fix the "kkkkkkk" deletion bug', () => {
+      const rope = create('Alice');
+
+      // User types "kkkkkkk" quickly (7 characters)
+      for (let i = 0; i < 7; i++) {
+        insert(rope, i, 'k');
+      }
+
+      expect(rope.toString()).toBe('kkkkkkk');
+
+      // User selects all and deletes
+      const deleteOp = remove(rope, 0, 7);
+
+      // FIXED: Creates 1 deletion entry with length 7
+      expect(deleteOp.deletions).toHaveLength(1);
+      expect(deleteOp.deletions[0].length).toBe(7);
+      expect(deleteOp.deletions[0].id).toMatch(/Alice:\d+/);
+
+      // This is now efficient - 1 deletion entry instead of 7
+    });
+
+    it('should show delete operation coalescence creates efficient operations', () => {
+      const rope = create('Alice');
+
+      // Type "kkkkkkk"
+      for (let i = 0; i < 7; i++) {
+        insert(rope, i, 'k');
+      }
+
+      // Press backspace 7 times rapidly
+      const deleteOps: TextOperation[] = [];
+      for (let i = 6; i >= 0; i--) {
+        const op = remove(rope, i, 1);
+        deleteOps.push({ type: 'delete', op });
+      }
+
+      // Coalesce delete operations
+      const coalesced = coalesceTextOperations(deleteOps, { thresholdMs: 1000 });
+
+      // Operation-level coalescence works: 7 ops → 1 op
+      expect(coalesced).toHaveLength(1);
+      expect(coalesced[0].type).toBe('delete');
+
+      // The deletions array should already be efficient from remove() optimization
+      // Each individual remove() creates 1 deletion (only deleting 1 char)
+      // When coalesceTextOperations merges the 7 ops, it combines the deletions arrays
+      const coalescedOp = (coalesced[0] as any).op;
+      expect(coalescedOp.deletions).toHaveLength(7);
+
+      // Note: These 7 deletions are NOT consecutive because we deleted backwards (6→0)
+      // So they cannot be merged. If we add optimizeDeletions() to coalesceTextOperations,
+      // it would merge them if they were consecutive.
+    });
+  });
+});