Back to Loro

README

crates/loro-wasm/README.md

0.6.05.8 KB
Original Source
<p align="center"> <a href="https://loro.dev"> <picture>
</picture>
</a> </p> <h1 align="center"> <a href="https://loro.dev" alt="loro-site">Loro</a> </h1> <p align="center"> <b>Make your JSON data collaborative and version-controlled 🦜</b> </p> <p align="center"> <a href="https://trendshift.io/repositories/4964" target="_blank"></a> </p> <p align="center"> <a href="https://loro.dev/docs"> <b>Documentation</b> </a> | <a href="https://loro.dev/docs/tutorial/get_started"> <b>Getting Started</b> </a> | <a href="https://docs.rs/loro"> <b>Rust Doc</b> </a> </p> <p align="center"> <a aria-label="X" href="https://x.com/loro_dev" target="_blank"> </a> <a aria-label="Discord-Link" href="https://discord.gg/tUsBSVfqzf" target="_blank"> </a> </p> <h4 align="center"> ✨ Loro 1.0 is out! Read the <a href="https://loro.dev/blog/v1.0">announcement</a>. </h4>

Loro is a CRDTs(Conflict-free Replicated Data Types) library that makes building local-first and collaborative apps easier. You can now use it in Rust, JS (via WASM), and Swift.

Features

Features Provided by CRDTs

  • P2P Synchronization
  • Automatic Merging
  • Local Availability
  • Scalability
  • Delta Updates

Supported CRDT Algorithms

Advanced Features in Loro

In this example, we demonstrate importing an entire Loro codebase into a Loro-powered version controller, preserving the complete Git DAG history while enabling fast version switching.

Debugging the Wasm build

The standard build pipeline (deno run -A ./scripts/build.ts dev|release) now keeps DWARF debugging information through wasm-bindgen and emits two helper files alongside every loro_wasm_bg.wasm artifact:

  • loro_wasm_bg.wasm.map β€” a v3 source map derived from DWARF so that Chrome, Edge, and Firefox can show original Rust locations when inspecting stack traces.

Load the source map in browser devtools; when devtools fetches the debug companion it can map instructions back to Rust source files and line numbers without inflating the shipped .wasm.

Example

ts
import { expect, test } from 'vitest';
import { LoroDoc, LoroList } from 'loro-crdt';

test('sync example', () => {
  // Sync two docs with two rounds of exchanges

  // Initialize document A
  const docA = new LoroDoc();
  const listA: LoroList = docA.getList('list');
  listA.insert(0, 'A');
  listA.insert(1, 'B');
  listA.insert(2, 'C');

  // Export all updates from docA
  const bytes: Uint8Array = docA.export({ mode: 'update' });

  // Simulate sending `bytes` across the network to another peer, B

  const docB = new LoroDoc();
  // Peer B imports the updates from A
  docB.import(bytes);

  // B's state matches A's state
  expect(docB.toJSON()).toStrictEqual({
    list: ['A', 'B', 'C'],
  });

  // Get the current version of docB
  const version = docB.oplogVersion();

  // Simulate editing at B: delete item 'B'
  const listB: LoroList = docB.getList('list');
  listB.delete(1, 1);

  // Export the updates from B since the last sync point
  const bytesB: Uint8Array = docB.export({ mode: 'update', from: version });

  // Simulate sending `bytesB` back across the network to A

  // A imports the updates from B
  docA.import(bytesB);

  // A has the same state as B
  expect(docA.toJSON()).toStrictEqual({
    list: ['A', 'C'],
  });
});

Blog

Credits

Loro draws inspiration from the innovative work of the following projects and individuals:

  • Diamond-types: The Event Graph Walker (Eg-walker) algorithm from @josephg has been adapted to reduce the computation and space usage of CRDTs.
  • Automerge: Their use of columnar encoding for CRDTs has informed our strategies for efficient data encoding.
  • Yjs: We have incorporated a similar algorithm for effectively merging collaborative editing operations, thanks to their pioneering work.
  • Matthew Weidner: His work on the Fugue algorithm has been invaluable, enhancing our text editing capabilities.
  • Martin Kleppmann: His work on CRDTs has significantly influenced our comprehension of the field.