CRDT RGA Implementation & Demo Guide

English | 한국어

This project demonstrates an implementation of the CRDT (Conflict-free Replicated Data Type) called RGA (Replicated-Growable Array), along with a simple demo page that showcases its functionality.

• Site: Demo
• Post: Post

Demo (demo)

• Goal: Utilize the RGA package to build a simple document-editing feature
• Key Components:
  • src/components/editor.tsx: Text editor UI
  • src/hooks/use-rga-document.ts: Hook that imports and manages RGA logic in the local state
  • lib/mock-socket.ts, event-bus.ts: Simplified network simulation to send and receive operations across multiple tabs (windows)

How to Run

• Start the development server by running the following command in the root directory:

  pnpm dev:demo

  • Then open the provided local address in your browser to view the demo.

RGA (rga)

• Implementation Details:

  • Core CRDT RGA algorithm logic (doc.ts, node.ts, operation-token.ts, etc.)
  • Includes Lamport Clock, node linking, and Tombstone (deleted node) handling for concurrent editing

• Tests:

  • The __test__ folder contains various test files to validate the logic
  • Examples: doc.test.ts, node.test.ts, operation-token.test.ts, lamport-clock.test.ts, etc.

Testing

• To run the test scripts for the RGA package:

  pnpm test:rga

  • This command executes the unit tests for the RGA logic.