@homeostate/store-mobx-state-tree

MobX-State-Tree store adapter for @homeostate/core. It keeps a state tree node in sync with a CRDT backend such as Yjs, Loro or Automerge.

Install

npm install @homeostate/core @homeostate/store-mobx-state-tree mobx mobx-state-tree @homeostate/crdt-yjs yjs

mobx 6 or 7 and mobx-state-tree 7 or 8 are peer dependencies.

Usage

import * as Y from "yjs";
import { types } from "mobx-state-tree";
import { createSyncEngine } from "@homeostate/core";
import { createYjsBackend } from "@homeostate/crdt-yjs";
import { createMobxStateTreeAdapter } from "@homeostate/store-mobx-state-tree";

const Todo = types.model({
  id: types.identifier,
  title: types.string,
  done: false,
});

const TodoStore = types.model({ todos: types.array(Todo) }).actions((self) => ({
  add(title: string) {
    self.todos.push({ id: crypto.randomUUID(), title });
  },
}));

const store = TodoStore.create();

const engine = createSyncEngine(
  createYjsBackend(new Y.Doc(), "shared"),
  createMobxStateTreeAdapter(store),
);
engine.connect();

Local changes are sent once per action. Remote changes are applied with applySnapshot, so instances with an identifier are updated in place. Pass a subtree node instead of the root to sync only that part.

License

MIT — see LICENSE.