Loro Mirror: 通过镜像到 CRDTs 使 UI 状态具有协作性

import { LoroDoc } from "loro-crdt";
import { schema, SyncDirection, Mirror } from "loro-mirror";
 
// 1) 声明状态形状 – 一个待办事项的 MovableList，具有稳定的容器 ID `$cid`
type TodoStatus = "todo" | "inProgress" | "done";
const appSchema = schema({
  todos: schema.LoroMovableList(
    schema.LoroMap({
      text: schema.String(),
      status: schema.String<TodoStatus>(),
    }),
    // $cid 是 Loro 分配的 LoroMap 的容器 ID
    (t) => t.$cid,
  ),
});
 
// 2) 创建一个 Loro 文档和一个 Mirror 存储
const doc = new LoroDoc();
const store = new Mirror({
  doc,
  schema: appSchema,
  // InitialState 不会写入 LoroDoc
  initialState: { todos: [] },
});
 
// 3) 订阅（可选）– 了解更新是来自本地还是远程
const unsubscribe = store.subscribe((state, { direction, tags }) => {
  if (direction === SyncDirection.FROM_LORO) {
    console.log("远程更新", { state, tags });
  } else {
    console.log("本地更新", { state, tags });
  }
 
  // 您可以直接使用 `state` 进行渲染，它是一个新的不可变对象，与旧状态共享未更改的字段
  setAppState(state);
});
 
// 4) 要么草稿式突变，要么返回一个新状态
// 草稿式（突变一个草稿）
store.setState((s) => {
  s.todos.push({ text: "草稿添加", status: "todo" });
});
 
// 不可变返回（构造一个新对象）
store.setState((s) => ({
  ...s,
  todos: [...s.todos, { text: "不可变添加", status: "todo" }],
}));
 
// 5) 使用 Loro 更新在对等方之间同步（与传输无关）
// 示例：内存中的两个文档 – 在实际应用程序中，通过 WS/HTTP/WebRTC 发送 `bytes`
const other = new LoroDoc();
other.import(doc.export({ mode: "snapshot" }));
 
// 连接实时同步（本地更新 → 远程导入）
const stop = doc.subscribeLocalUpdates((bytes) => {
  other.import(bytes);
});
 
// `doc` 上的任何 `store.setState(...)` 现在也会出现在 `other` 中

import React, { useMemo } from "react";
import { LoroDoc } from "loro-crdt";
import { schema } from "loro-mirror";
import { useLoroStore } from "loro-mirror-react";
 
type TodoStatus = "todo" | "inProgress" | "done";
 
const todoSchema = schema({
  todos: schema.LoroMovableList(
    schema.LoroMap({
      text: schema.String(),
      status: schema.String<TodoStatus>(),
    }),
    (t) => t.$cid,
  ),
});
 
export function TodoApp() {
  const doc = useMemo(() => new LoroDoc(), []);
  const { state, setState } = useLoroStore({
    doc,
    schema: todoSchema,
    initialState: { todos: [] },
  });
 
  function addTodo(text: string) {
    setState((s) => {
      s.todos.push({ text, status: "todo" });
    });
  }
 
  return (
    <>
      <button onClick={() => addTodo("写博客")}>添加</button>
      <ul>
        {state.todos.map((t) => (
          <li key={t.$cid}>
            <input
              value={t.text}
              onChange={(e) =>
                setState((s) => {
                  const i = s.todos.findIndex((x) => x.$cid === t.$cid);
                  // 文本增量将自动计算
                  if (i !== -1) s.todos[i].text = e.target.value;
                })
              }
            />
            <select
              value={t.status}
              onChange={(e) =>
                setState((s) => {
                  const i = s.todos.findIndex((x) => x.$cid === t.$cid);
                  if (i !== -1)
                    s.todos[i].status = e.target.value as TodoStatus;
                })
              }
            >
              <option value="todo">待办</option>
              <option value="inProgress">进行中</option>
              <option value="done">已完成</option>
            </select>
          </li>
        ))}
      </ul>
    </>
  );
}

import { UndoManageker } from "loro-crdt";
 
// 在创建 `doc` 之后，在同一组件内：
const undo = useMemo(() => new UndoManager(doc), [doc]);
 
// 在 UI 的任何位置添加控件：
<div>
  <button onClick={() => undo.undo()}>撤销</button>
  <button onClick={() => undo.redo()}>重做</button>
  {/* UndoManager 仅恢复您的本地编辑；远程编辑保持不变。 */}
  {/* 请参阅文档：<https://loro.dev/docs/advanced/undo> */}
  {/* 有关完整的时间旅行，请参阅：<https://loro.dev/docs/tutorial/time_travel> */}
</div>;