@coaction/yjs 1.0.1 → 1.2.0

package/README.md

@@ -8,13 +8,11 @@ A Coaction integration tool for Yjs.
 
 ## Installation
 
-You can install it via npm, yarn or pnpm.
-
 ```sh
 npm install coaction @coaction/yjs
 ```
 
-## Usage
+## Quick Start
 
 ```ts
 import { create } from 'coaction';
@@ -35,6 +33,109 @@ const store = create(
 );
 ```
 
+## Sync Model
+
+- The binding stores state under `doc.getMap(key).get('state')`.
+- `state` is persisted as nested `Y.Map` / `Y.Array` structures.
+- Local Coaction updates are synced to Yjs.
+- Remote Yjs updates are replayed back into Coaction.
+- Writes are diff-based against the last synced local snapshot to reduce overwrite risk in concurrent edits.
+
+## Conflict Semantics
+
+- Concurrent updates to different fields can converge through Yjs merge behavior.
+- Concurrent updates to the same field follow Yjs conflict semantics (effectively last-writer-wins for scalar fields).
+- If you need commutative semantics (for example counters), use CRDT-native field modeling in Yjs for that field.
+
+## Provider Integration
+
+`@coaction/yjs` only binds a Coaction store to a `Y.Doc`. Network transport is provided by your Yjs provider (for example `y-websocket`, `y-webrtc`, or a custom provider).
+
+```ts
+import { create } from 'coaction';
+import { bindYjs } from '@coaction/yjs';
+import { Doc } from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+
+const doc = new Doc();
+const provider = new WebsocketProvider('wss://your-server', 'room-id', doc);
+
+const store = create((set) => ({
+  count: 0,
+  increment() {
+    set((draft) => {
+      draft.count += 1;
+    });
+  }
+}));
+
+const binding = bindYjs(store, {
+  doc,
+  key: 'counter'
+});
+
+// later
+binding.destroy();
+provider.destroy();
+store.destroy();
+```
+
+## API
+
+### `bindYjs(store, options?)`
+
+Binds a Coaction store to Yjs and returns a binding object.
+
+- `options.doc?: Y.Doc`
+  - Reuse an existing doc for multi-peer collaboration.
+  - If omitted, an internal `Y.Doc` is created.
+- `options.key?: string`
+  - Root map key for this store namespace.
+  - Default: `coaction:${store.name}`.
+
+Returns:
+
+- `doc: Y.Doc`
+- `map: Y.Map<any>`
+- `syncNow(): void`
+  - Pushes the current local state to Yjs immediately.
+- `destroy(): void`
+  - Unsubscribes observers and releases resources.
+  - Destroys `doc` only when it was internally created.
+
+### `yjs(options?)`
+
+Middleware wrapper around `bindYjs`. It also wires cleanup into `store.destroy()`.
+
+## State Requirements
+
+- Keep the synced state plain and serializable.
+- Methods and getters are Coaction runtime behavior and are not the synchronization payload.
+- Prefer a plain object at the root of your store state.
+
+## Compatibility and Limits
+
+- Not supported in `store.share === 'client'` mode.
+- Very large or highly volatile state trees can produce heavy update traffic.
+- Cleanup is required: always call `binding.destroy()` (or `store.destroy()` when using middleware).
+
+## Migration Notes
+
+- Current storage shape uses `Y.Map`/`Y.Array` for nested state.
+- If old data stored `state` as a plain object, the binding migrates it to Yjs structures automatically.
+- If you read Yjs state directly, do not assume `map.get('state').count`; `state` is usually a `Y.Map`.
+
+## Troubleshooting
+
+- `setState cannot be called within the updater`
+  - Indicates re-entrant updates in your app flow. Avoid nested synchronous state loops.
+- State not syncing across peers
+  - Verify all peers use the same room/doc provider and same `key`.
+- Unexpected stale updates
+  - Ensure `destroy()` is called for old bindings to avoid duplicate observers.
+- High update volume
+  - Reduce write frequency (debounce/throttle app-level updates if needed).
+
 ## Documentation
 
-You can find the documentation [here](https://github.com/unadlib/coaction).
+You can find the project documentation [here](https://github.com/unadlib/coaction).

package/dist/index.d.mts

@@ -11,8 +11,20 @@ type YjsBinding<T extends object> = {
     map: Y.Map<any>;
     syncNow: () => void;
     destroy: () => void;
+    __unsafeTestOnly__?: {
+        applyRemoteOperations: (operations: Array<{
+            type: 'set' | 'delete';
+            path: Array<string | number>;
+            value?: unknown;
+        }>) => void;
+    };
+};
+declare const __unsafeTestOnly__: {
+    getYValueAtPath: (root: Y.Map<unknown>, path: Array<string | number>) => unknown;
+    setAtPath: (target: any, path: Array<string | number>, value: unknown) => void;
+    deleteAtPath: (target: any, path: Array<string | number>) => void;
 };
 declare const bindYjs: <T extends object>(store: Store<T>, options?: YjsBindingOptions) => YjsBinding<T>;
 declare const yjs: <T extends object>(options?: YjsBindingOptions) => Middleware<T>;
 
-export { type YjsBinding, type YjsBindingOptions, bindYjs, yjs };
+export { type YjsBinding, type YjsBindingOptions, __unsafeTestOnly__, bindYjs, yjs };

package/dist/index.d.ts

@@ -11,8 +11,20 @@ type YjsBinding<T extends object> = {
     map: Y.Map<any>;
     syncNow: () => void;
     destroy: () => void;
+    __unsafeTestOnly__?: {
+        applyRemoteOperations: (operations: Array<{
+            type: 'set' | 'delete';
+            path: Array<string | number>;
+            value?: unknown;
+        }>) => void;
+    };
+};
+declare const __unsafeTestOnly__: {
+    getYValueAtPath: (root: Y.Map<unknown>, path: Array<string | number>) => unknown;
+    setAtPath: (target: any, path: Array<string | number>, value: unknown) => void;
+    deleteAtPath: (target: any, path: Array<string | number>) => void;
 };
 declare const bindYjs: <T extends object>(store: Store<T>, options?: YjsBindingOptions) => YjsBinding<T>;
 declare const yjs: <T extends object>(options?: YjsBindingOptions) => Middleware<T>;
 
-export { type YjsBinding, type YjsBindingOptions, bindYjs, yjs };
+export { type YjsBinding, type YjsBindingOptions, __unsafeTestOnly__, bindYjs, yjs };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+  __unsafeTestOnly__: () => __unsafeTestOnly__,
   bindYjs: () => bindYjs,
   yjs: () => yjs
 });
@@ -39,18 +40,320 @@ module.exports = __toCommonJS(index_exports);
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  __unsafeTestOnly__: () => __unsafeTestOnly__,
   bindYjs: () => bindYjs,
   yjs: () => yjs
 });
 var Y = __toESM(require("yjs"));
 __reExport(src_exports, require("yjs"));
-var ORIGIN = /* @__PURE__ */ Symbol("coaction-yjs");
+var STATE_KEY = "state";
+var scheduleMicrotask = (callback) => {
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(callback);
+    return;
+  }
+  Promise.resolve().then(callback);
+};
 function clone(value) {
   if (typeof structuredClone === "function") {
     return structuredClone(value);
   }
   return JSON.parse(JSON.stringify(value));
 }
+function isPlainObject(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function toPlainObject(value) {
+  const next = {};
+  value.forEach((item, key) => {
+    next[key] = toPlainValue(item);
+  });
+  return next;
+}
+function toPlainArray(value) {
+  return value.toArray().map((item) => toPlainValue(item));
+}
+function toPlainValue(value) {
+  if (value instanceof Y.Map) {
+    return toPlainObject(value);
+  }
+  if (value instanceof Y.Array) {
+    return toPlainArray(value);
+  }
+  return value;
+}
+function createYMap(value) {
+  const next = new Y.Map();
+  for (const [key, item] of Object.entries(value)) {
+    next.set(key, toYValue(item));
+  }
+  return next;
+}
+function createYArray(value) {
+  const next = new Y.Array();
+  if (value.length > 0) {
+    next.insert(
+      0,
+      value.map((item) => toYValue(item))
+    );
+  }
+  return next;
+}
+function toYValue(value) {
+  if (Array.isArray(value)) {
+    return createYArray(value);
+  }
+  if (isPlainObject(value)) {
+    return createYMap(value);
+  }
+  if (typeof value === "object" && value !== null) {
+    return clone(value);
+  }
+  return value;
+}
+function isEqualValue(left, right) {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  if (Array.isArray(left) && Array.isArray(right)) {
+    if (left.length !== right.length) {
+      return false;
+    }
+    for (let index = 0; index < left.length; index += 1) {
+      if (!isEqualValue(left[index], right[index])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(left) && isPlainObject(right)) {
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length) {
+      return false;
+    }
+    for (const key of leftKeys) {
+      if (!Object.prototype.hasOwnProperty.call(right, key)) {
+        return false;
+      }
+      if (!isEqualValue(left[key], right[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function syncObjectToYMap(target, previous, source) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(source)]);
+  for (const key of keys) {
+    const hasPrevious = Object.prototype.hasOwnProperty.call(previous, key);
+    const hasNext = Object.prototype.hasOwnProperty.call(source, key);
+    if (!hasNext) {
+      target.delete(key);
+      continue;
+    }
+    const previousValue = hasPrevious ? previous[key] : void 0;
+    const nextValue = source[key];
+    if (hasPrevious && isEqualValue(previousValue, nextValue)) {
+      continue;
+    }
+    const current = target.get(key);
+    if (Array.isArray(nextValue)) {
+      if (Array.isArray(previousValue) && current instanceof Y.Array) {
+        syncArrayToYArray(current, previousValue, nextValue);
+      } else {
+        target.set(key, createYArray(nextValue));
+      }
+      continue;
+    }
+    if (isPlainObject(nextValue)) {
+      if (isPlainObject(previousValue) && current instanceof Y.Map) {
+        syncObjectToYMap(current, previousValue, nextValue);
+      } else {
+        target.set(key, createYMap(nextValue));
+      }
+      continue;
+    }
+    const normalized = typeof nextValue === "object" && nextValue !== null ? clone(nextValue) : nextValue;
+    if (!Object.is(current, normalized)) {
+      target.set(key, normalized);
+    }
+  }
+}
+function syncArrayToYArray(target, previous, source) {
+  if (target.length > source.length) {
+    target.delete(source.length, target.length - source.length);
+  }
+  const maxLength = Math.max(previous.length, source.length);
+  for (let index = 0; index < maxLength; index += 1) {
+    const hasPrevious = index < previous.length;
+    const hasNext = index < source.length;
+    if (!hasNext) {
+      continue;
+    }
+    const previousValue = hasPrevious ? previous[index] : void 0;
+    const nextValue = source[index];
+    if (hasPrevious && isEqualValue(previousValue, nextValue)) {
+      continue;
+    }
+    if (index >= target.length) {
+      target.insert(index, [toYValue(nextValue)]);
+      continue;
+    }
+    const current = target.get(index);
+    if (Array.isArray(nextValue)) {
+      if (Array.isArray(previousValue) && current instanceof Y.Array) {
+        syncArrayToYArray(current, previousValue, nextValue);
+      } else {
+        target.delete(index, 1);
+        target.insert(index, [createYArray(nextValue)]);
+      }
+      continue;
+    }
+    if (isPlainObject(nextValue)) {
+      if (isPlainObject(previousValue) && current instanceof Y.Map) {
+        syncObjectToYMap(current, previousValue, nextValue);
+      } else {
+        target.delete(index, 1);
+        target.insert(index, [createYMap(nextValue)]);
+      }
+      continue;
+    }
+    const normalized = typeof nextValue === "object" && nextValue !== null ? clone(nextValue) : nextValue;
+    if (!Object.is(current, normalized)) {
+      target.delete(index, 1);
+      target.insert(index, [normalized]);
+    }
+  }
+}
+function isSetStateReentryError(error) {
+  return error instanceof Error && error.message === "setState cannot be called within the updater";
+}
+function cloneForStore(value) {
+  if (typeof value === "object" && value !== null) {
+    return clone(value);
+  }
+  return value;
+}
+function toPathKey(path) {
+  return path.map((segment) => `${typeof segment}:${String(segment)}`).join("|");
+}
+function compactOperations(operations) {
+  const deduplicated = /* @__PURE__ */ new Map();
+  for (const operation of operations) {
+    const key = toPathKey(operation.path);
+    if (deduplicated.has(key)) {
+      deduplicated.delete(key);
+    }
+    deduplicated.set(key, operation);
+  }
+  return Array.from(deduplicated.values()).sort(
+    (left, right) => left.path.length - right.path.length
+  );
+}
+function getYValueAtPath(root, path) {
+  let current = root;
+  for (const segment of path) {
+    if (current instanceof Y.Map) {
+      current = current.get(String(segment));
+      continue;
+    }
+    if (current instanceof Y.Array) {
+      const index = typeof segment === "number" ? segment : Number.parseInt(segment, 10);
+      if (!Number.isInteger(index)) {
+        return void 0;
+      }
+      current = current.get(index);
+      continue;
+    }
+    return void 0;
+  }
+  return current;
+}
+function setAtPath(target, path, value) {
+  if (path.length === 0) {
+    return;
+  }
+  let current = target;
+  for (let index = 0; index < path.length - 1; index += 1) {
+    const segment = path[index];
+    const nextSegment = path[index + 1];
+    const nextValue = current[segment];
+    if (typeof nextValue !== "object" || nextValue === null) {
+      current[segment] = typeof nextSegment === "number" ? [] : {};
+    }
+    current = current[segment];
+  }
+  const leaf = path[path.length - 1];
+  current[leaf] = cloneForStore(value);
+}
+function deleteAtPath(target, path) {
+  if (path.length === 0) {
+    return;
+  }
+  let current = target;
+  for (let index = 0; index < path.length - 1; index += 1) {
+    current = current[path[index]];
+    if (typeof current !== "object" || current === null) {
+      return;
+    }
+  }
+  const leaf = path[path.length - 1];
+  if (Array.isArray(current) && typeof leaf === "number") {
+    if (leaf >= 0 && leaf < current.length) {
+      current.splice(leaf, 1);
+    }
+    return;
+  }
+  delete current[leaf];
+}
+function collectRemoteOperations(events, stateMap) {
+  const operations = [];
+  for (const event of events) {
+    if (event instanceof Y.YMapEvent) {
+      for (const changedKey of event.keysChanged) {
+        const path = [...event.path, changedKey];
+        const keyChange = event.changes.keys.get(changedKey);
+        if (keyChange?.action === "delete") {
+          operations.push({
+            type: "delete",
+            path
+          });
+          continue;
+        }
+        operations.push({
+          type: "set",
+          path,
+          value: toPlainValue(getYValueAtPath(stateMap, path))
+        });
+      }
+      continue;
+    }
+    if (event instanceof Y.YArrayEvent) {
+      const path = [...event.path];
+      operations.push({
+        type: "set",
+        path,
+        value: toPlainValue(getYValueAtPath(stateMap, path))
+      });
+    }
+  }
+  return operations;
+}
+var __unsafeTestOnly__ = {
+  getYValueAtPath: (root, path) => getYValueAtPath(root, path),
+  setAtPath: (target, path, value) => {
+    setAtPath(target, path, value);
+  },
+  deleteAtPath: (target, path) => {
+    deleteAtPath(target, path);
+  }
+};
 var bindYjs = (store, options = {}) => {
   if (store.share === "client") {
     throw new Error("Yjs binding is not supported in client store mode.");
@@ -58,48 +361,214 @@ var bindYjs = (store, options = {}) => {
   const doc = options.doc ?? new Y.Doc();
   const key = options.key ?? `coaction:${store.name}`;
   const map = doc.getMap(key);
+  const localOrigin = /* @__PURE__ */ Symbol(`coaction-yjs:${store.name}`);
+  let destroyed = false;
+  let syncingFromYjs = false;
+  let lastSyncedState = (() => {
+    const pureState = clone(store.getPureState());
+    return isPlainObject(pureState) ? pureState : {};
+  })();
+  let flushScheduled = false;
+  let pendingSnapshot = null;
+  let pendingOperations = [];
+  const applyRemoteState = (state) => {
+    const next = clone(state);
+    syncingFromYjs = true;
+    try {
+      store.setState(next);
+      const pureState = clone(store.getPureState());
+      lastSyncedState = isPlainObject(pureState) ? pureState : {};
+    } finally {
+      syncingFromYjs = false;
+    }
+  };
+  const applyRemoteOperations = (operations) => {
+    if (operations.length === 0) {
+      return;
+    }
+    syncingFromYjs = true;
+    try {
+      store.setState((draft) => {
+        const mutableDraft = draft;
+        for (const operation of operations) {
+          if (operation.type === "set") {
+            setAtPath(mutableDraft, operation.path, operation.value);
+          } else {
+            deleteAtPath(mutableDraft, operation.path);
+          }
+        }
+      });
+      const pureState = clone(store.getPureState());
+      lastSyncedState = isPlainObject(pureState) ? pureState : {};
+    } finally {
+      syncingFromYjs = false;
+    }
+  };
+  const getStateMap = () => {
+    const state = map.get(STATE_KEY);
+    if (state instanceof Y.Map) {
+      return state;
+    }
+    return null;
+  };
+  const scheduleFlushFromYjs = () => {
+    if (destroyed || flushScheduled) {
+      return;
+    }
+    flushScheduled = true;
+    scheduleMicrotask(flushFromYjs);
+  };
+  const flushFromYjs = () => {
+    flushScheduled = false;
+    if (destroyed) {
+      return;
+    }
+    if (pendingSnapshot) {
+      const snapshot = pendingSnapshot;
+      pendingSnapshot = null;
+      pendingOperations = [];
+      try {
+        applyRemoteState(snapshot);
+      } catch (error) {
+        if (isSetStateReentryError(error)) {
+          pendingSnapshot = snapshot;
+          setTimeout(scheduleFlushFromYjs, 0);
+          return;
+        }
+        throw error;
+      }
+    }
+    if (pendingOperations.length === 0) {
+      return;
+    }
+    const operations = compactOperations(pendingOperations);
+    pendingOperations = [];
+    try {
+      applyRemoteOperations(operations);
+    } catch (error) {
+      if (isSetStateReentryError(error)) {
+        pendingOperations = [...operations, ...pendingOperations];
+        setTimeout(scheduleFlushFromYjs, 0);
+        return;
+      }
+      throw error;
+    }
+  };
+  const enqueueSnapshot = (snapshot) => {
+    pendingSnapshot = snapshot;
+    pendingOperations = [];
+    scheduleFlushFromYjs();
+  };
+  const enqueueOperations = (operations) => {
+    if (operations.length === 0) {
+      return;
+    }
+    if (!pendingSnapshot) {
+      pendingOperations.push(...operations);
+    }
+    scheduleFlushFromYjs();
+  };
   const syncNow = () => {
+    if (destroyed || syncingFromYjs) {
+      return;
+    }
     const pureState = clone(store.getPureState());
+    if (!isPlainObject(pureState)) {
+      return;
+    }
     doc.transact(() => {
-      map.set("state", pureState);
-    }, ORIGIN);
+      syncObjectToYMap(stateMap, lastSyncedState, pureState);
+    }, localOrigin);
+    lastSyncedState = pureState;
   };
-  const syncFromYjs = () => {
-    const incoming = map.get("state");
-    if (typeof incoming !== "object" || incoming === null) {
+  const stateObserver = (events, transaction) => {
+    if (transaction.origin === localOrigin) {
       return;
     }
-    store.setState(clone(incoming));
+    enqueueOperations(collectRemoteOperations(events, stateMap));
   };
-  if (map.has("state")) {
-    syncFromYjs();
+  let stateMap;
+  const existingStateMap = getStateMap();
+  if (existingStateMap) {
+    stateMap = existingStateMap;
+    applyRemoteState(toPlainObject(stateMap));
   } else {
-    syncNow();
+    const currentState = map.get(STATE_KEY);
+    if (isPlainObject(currentState)) {
+      stateMap = createYMap(currentState);
+      doc.transact(() => {
+        map.set(STATE_KEY, stateMap);
+      }, localOrigin);
+      applyRemoteState(currentState);
+    } else {
+      const pureState = clone(store.getPureState());
+      stateMap = createYMap(isPlainObject(pureState) ? pureState : {});
+      doc.transact(() => {
+        map.set(STATE_KEY, stateMap);
+      }, localOrigin);
+    }
   }
+  stateMap.observeDeep(stateObserver);
   const observer = (event) => {
-    if (event.transaction.origin === ORIGIN) {
+    if (event.transaction.origin === localOrigin) {
       return;
     }
-    if (event.keysChanged.has("state")) {
-      syncFromYjs();
+    if (!event.keysChanged.has(STATE_KEY)) {
+      return;
+    }
+    const nextStateMap = getStateMap();
+    if (nextStateMap) {
+      if (stateMap !== nextStateMap) {
+        stateMap.unobserveDeep(stateObserver);
+        stateMap = nextStateMap;
+        stateMap.observeDeep(stateObserver);
+      }
+      enqueueSnapshot(toPlainObject(nextStateMap));
+      return;
+    }
+    const currentState = map.get(STATE_KEY);
+    if (isPlainObject(currentState)) {
+      const migrated = createYMap(currentState);
+      doc.transact(() => {
+        map.set(STATE_KEY, migrated);
+      }, localOrigin);
+      if (stateMap !== migrated) {
+        stateMap.unobserveDeep(stateObserver);
+        stateMap = migrated;
+        stateMap.observeDeep(stateObserver);
+      }
+      enqueueSnapshot(currentState);
     }
   };
   map.observe(observer);
   const unsubscribe = store.subscribe(() => {
     syncNow();
   });
-  return {
+  const binding = {
     doc,
     map,
     syncNow,
     destroy: () => {
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
       unsubscribe();
       map.unobserve(observer);
+      stateMap.unobserveDeep(stateObserver);
       if (!options.doc) {
         doc.destroy();
       }
     }
   };
+  if (process.env.NODE_ENV === "test") {
+    binding.__unsafeTestOnly__ = {
+      applyRemoteOperations: (operations) => {
+        applyRemoteOperations(operations);
+      }
+    };
+  }
+  return binding;
 };
 var yjs = (options = {}) => (store) => {
   const binding = bindYjs(store, options);
@@ -115,6 +584,7 @@ var yjs = (options = {}) => (store) => {
 __reExport(index_exports, src_exports, module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  __unsafeTestOnly__,
   bindYjs,
   yjs
 });

package/dist/index.mjs

@@ -19,6 +19,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+  __unsafeTestOnly__: () => __unsafeTestOnly__,
   bindYjs: () => bindYjs,
   yjs: () => yjs
 });
@@ -26,19 +27,321 @@ __export(index_exports, {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  __unsafeTestOnly__: () => __unsafeTestOnly__,
   bindYjs: () => bindYjs,
   yjs: () => yjs
 });
 __reExport(src_exports, yjs_star);
 import * as Y from "yjs";
 import * as yjs_star from "yjs";
-var ORIGIN = /* @__PURE__ */ Symbol("coaction-yjs");
+var STATE_KEY = "state";
+var scheduleMicrotask = (callback) => {
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(callback);
+    return;
+  }
+  Promise.resolve().then(callback);
+};
 function clone(value) {
   if (typeof structuredClone === "function") {
     return structuredClone(value);
   }
   return JSON.parse(JSON.stringify(value));
 }
+function isPlainObject(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function toPlainObject(value) {
+  const next = {};
+  value.forEach((item, key) => {
+    next[key] = toPlainValue(item);
+  });
+  return next;
+}
+function toPlainArray(value) {
+  return value.toArray().map((item) => toPlainValue(item));
+}
+function toPlainValue(value) {
+  if (value instanceof Y.Map) {
+    return toPlainObject(value);
+  }
+  if (value instanceof Y.Array) {
+    return toPlainArray(value);
+  }
+  return value;
+}
+function createYMap(value) {
+  const next = new Y.Map();
+  for (const [key, item] of Object.entries(value)) {
+    next.set(key, toYValue(item));
+  }
+  return next;
+}
+function createYArray(value) {
+  const next = new Y.Array();
+  if (value.length > 0) {
+    next.insert(
+      0,
+      value.map((item) => toYValue(item))
+    );
+  }
+  return next;
+}
+function toYValue(value) {
+  if (Array.isArray(value)) {
+    return createYArray(value);
+  }
+  if (isPlainObject(value)) {
+    return createYMap(value);
+  }
+  if (typeof value === "object" && value !== null) {
+    return clone(value);
+  }
+  return value;
+}
+function isEqualValue(left, right) {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  if (Array.isArray(left) && Array.isArray(right)) {
+    if (left.length !== right.length) {
+      return false;
+    }
+    for (let index = 0; index < left.length; index += 1) {
+      if (!isEqualValue(left[index], right[index])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(left) && isPlainObject(right)) {
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length) {
+      return false;
+    }
+    for (const key of leftKeys) {
+      if (!Object.prototype.hasOwnProperty.call(right, key)) {
+        return false;
+      }
+      if (!isEqualValue(left[key], right[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function syncObjectToYMap(target, previous, source) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(source)]);
+  for (const key of keys) {
+    const hasPrevious = Object.prototype.hasOwnProperty.call(previous, key);
+    const hasNext = Object.prototype.hasOwnProperty.call(source, key);
+    if (!hasNext) {
+      target.delete(key);
+      continue;
+    }
+    const previousValue = hasPrevious ? previous[key] : void 0;
+    const nextValue = source[key];
+    if (hasPrevious && isEqualValue(previousValue, nextValue)) {
+      continue;
+    }
+    const current = target.get(key);
+    if (Array.isArray(nextValue)) {
+      if (Array.isArray(previousValue) && current instanceof Y.Array) {
+        syncArrayToYArray(current, previousValue, nextValue);
+      } else {
+        target.set(key, createYArray(nextValue));
+      }
+      continue;
+    }
+    if (isPlainObject(nextValue)) {
+      if (isPlainObject(previousValue) && current instanceof Y.Map) {
+        syncObjectToYMap(current, previousValue, nextValue);
+      } else {
+        target.set(key, createYMap(nextValue));
+      }
+      continue;
+    }
+    const normalized = typeof nextValue === "object" && nextValue !== null ? clone(nextValue) : nextValue;
+    if (!Object.is(current, normalized)) {
+      target.set(key, normalized);
+    }
+  }
+}
+function syncArrayToYArray(target, previous, source) {
+  if (target.length > source.length) {
+    target.delete(source.length, target.length - source.length);
+  }
+  const maxLength = Math.max(previous.length, source.length);
+  for (let index = 0; index < maxLength; index += 1) {
+    const hasPrevious = index < previous.length;
+    const hasNext = index < source.length;
+    if (!hasNext) {
+      continue;
+    }
+    const previousValue = hasPrevious ? previous[index] : void 0;
+    const nextValue = source[index];
+    if (hasPrevious && isEqualValue(previousValue, nextValue)) {
+      continue;
+    }
+    if (index >= target.length) {
+      target.insert(index, [toYValue(nextValue)]);
+      continue;
+    }
+    const current = target.get(index);
+    if (Array.isArray(nextValue)) {
+      if (Array.isArray(previousValue) && current instanceof Y.Array) {
+        syncArrayToYArray(current, previousValue, nextValue);
+      } else {
+        target.delete(index, 1);
+        target.insert(index, [createYArray(nextValue)]);
+      }
+      continue;
+    }
+    if (isPlainObject(nextValue)) {
+      if (isPlainObject(previousValue) && current instanceof Y.Map) {
+        syncObjectToYMap(current, previousValue, nextValue);
+      } else {
+        target.delete(index, 1);
+        target.insert(index, [createYMap(nextValue)]);
+      }
+      continue;
+    }
+    const normalized = typeof nextValue === "object" && nextValue !== null ? clone(nextValue) : nextValue;
+    if (!Object.is(current, normalized)) {
+      target.delete(index, 1);
+      target.insert(index, [normalized]);
+    }
+  }
+}
+function isSetStateReentryError(error) {
+  return error instanceof Error && error.message === "setState cannot be called within the updater";
+}
+function cloneForStore(value) {
+  if (typeof value === "object" && value !== null) {
+    return clone(value);
+  }
+  return value;
+}
+function toPathKey(path) {
+  return path.map((segment) => `${typeof segment}:${String(segment)}`).join("|");
+}
+function compactOperations(operations) {
+  const deduplicated = /* @__PURE__ */ new Map();
+  for (const operation of operations) {
+    const key = toPathKey(operation.path);
+    if (deduplicated.has(key)) {
+      deduplicated.delete(key);
+    }
+    deduplicated.set(key, operation);
+  }
+  return Array.from(deduplicated.values()).sort(
+    (left, right) => left.path.length - right.path.length
+  );
+}
+function getYValueAtPath(root, path) {
+  let current = root;
+  for (const segment of path) {
+    if (current instanceof Y.Map) {
+      current = current.get(String(segment));
+      continue;
+    }
+    if (current instanceof Y.Array) {
+      const index = typeof segment === "number" ? segment : Number.parseInt(segment, 10);
+      if (!Number.isInteger(index)) {
+        return void 0;
+      }
+      current = current.get(index);
+      continue;
+    }
+    return void 0;
+  }
+  return current;
+}
+function setAtPath(target, path, value) {
+  if (path.length === 0) {
+    return;
+  }
+  let current = target;
+  for (let index = 0; index < path.length - 1; index += 1) {
+    const segment = path[index];
+    const nextSegment = path[index + 1];
+    const nextValue = current[segment];
+    if (typeof nextValue !== "object" || nextValue === null) {
+      current[segment] = typeof nextSegment === "number" ? [] : {};
+    }
+    current = current[segment];
+  }
+  const leaf = path[path.length - 1];
+  current[leaf] = cloneForStore(value);
+}
+function deleteAtPath(target, path) {
+  if (path.length === 0) {
+    return;
+  }
+  let current = target;
+  for (let index = 0; index < path.length - 1; index += 1) {
+    current = current[path[index]];
+    if (typeof current !== "object" || current === null) {
+      return;
+    }
+  }
+  const leaf = path[path.length - 1];
+  if (Array.isArray(current) && typeof leaf === "number") {
+    if (leaf >= 0 && leaf < current.length) {
+      current.splice(leaf, 1);
+    }
+    return;
+  }
+  delete current[leaf];
+}
+function collectRemoteOperations(events, stateMap) {
+  const operations = [];
+  for (const event of events) {
+    if (event instanceof Y.YMapEvent) {
+      for (const changedKey of event.keysChanged) {
+        const path = [...event.path, changedKey];
+        const keyChange = event.changes.keys.get(changedKey);
+        if (keyChange?.action === "delete") {
+          operations.push({
+            type: "delete",
+            path
+          });
+          continue;
+        }
+        operations.push({
+          type: "set",
+          path,
+          value: toPlainValue(getYValueAtPath(stateMap, path))
+        });
+      }
+      continue;
+    }
+    if (event instanceof Y.YArrayEvent) {
+      const path = [...event.path];
+      operations.push({
+        type: "set",
+        path,
+        value: toPlainValue(getYValueAtPath(stateMap, path))
+      });
+    }
+  }
+  return operations;
+}
+var __unsafeTestOnly__ = {
+  getYValueAtPath: (root, path) => getYValueAtPath(root, path),
+  setAtPath: (target, path, value) => {
+    setAtPath(target, path, value);
+  },
+  deleteAtPath: (target, path) => {
+    deleteAtPath(target, path);
+  }
+};
 var bindYjs = (store, options = {}) => {
   if (store.share === "client") {
     throw new Error("Yjs binding is not supported in client store mode.");
@@ -46,48 +349,214 @@ var bindYjs = (store, options = {}) => {
   const doc = options.doc ?? new Y.Doc();
   const key = options.key ?? `coaction:${store.name}`;
   const map = doc.getMap(key);
+  const localOrigin = /* @__PURE__ */ Symbol(`coaction-yjs:${store.name}`);
+  let destroyed = false;
+  let syncingFromYjs = false;
+  let lastSyncedState = (() => {
+    const pureState = clone(store.getPureState());
+    return isPlainObject(pureState) ? pureState : {};
+  })();
+  let flushScheduled = false;
+  let pendingSnapshot = null;
+  let pendingOperations = [];
+  const applyRemoteState = (state) => {
+    const next = clone(state);
+    syncingFromYjs = true;
+    try {
+      store.setState(next);
+      const pureState = clone(store.getPureState());
+      lastSyncedState = isPlainObject(pureState) ? pureState : {};
+    } finally {
+      syncingFromYjs = false;
+    }
+  };
+  const applyRemoteOperations = (operations) => {
+    if (operations.length === 0) {
+      return;
+    }
+    syncingFromYjs = true;
+    try {
+      store.setState((draft) => {
+        const mutableDraft = draft;
+        for (const operation of operations) {
+          if (operation.type === "set") {
+            setAtPath(mutableDraft, operation.path, operation.value);
+          } else {
+            deleteAtPath(mutableDraft, operation.path);
+          }
+        }
+      });
+      const pureState = clone(store.getPureState());
+      lastSyncedState = isPlainObject(pureState) ? pureState : {};
+    } finally {
+      syncingFromYjs = false;
+    }
+  };
+  const getStateMap = () => {
+    const state = map.get(STATE_KEY);
+    if (state instanceof Y.Map) {
+      return state;
+    }
+    return null;
+  };
+  const scheduleFlushFromYjs = () => {
+    if (destroyed || flushScheduled) {
+      return;
+    }
+    flushScheduled = true;
+    scheduleMicrotask(flushFromYjs);
+  };
+  const flushFromYjs = () => {
+    flushScheduled = false;
+    if (destroyed) {
+      return;
+    }
+    if (pendingSnapshot) {
+      const snapshot = pendingSnapshot;
+      pendingSnapshot = null;
+      pendingOperations = [];
+      try {
+        applyRemoteState(snapshot);
+      } catch (error) {
+        if (isSetStateReentryError(error)) {
+          pendingSnapshot = snapshot;
+          setTimeout(scheduleFlushFromYjs, 0);
+          return;
+        }
+        throw error;
+      }
+    }
+    if (pendingOperations.length === 0) {
+      return;
+    }
+    const operations = compactOperations(pendingOperations);
+    pendingOperations = [];
+    try {
+      applyRemoteOperations(operations);
+    } catch (error) {
+      if (isSetStateReentryError(error)) {
+        pendingOperations = [...operations, ...pendingOperations];
+        setTimeout(scheduleFlushFromYjs, 0);
+        return;
+      }
+      throw error;
+    }
+  };
+  const enqueueSnapshot = (snapshot) => {
+    pendingSnapshot = snapshot;
+    pendingOperations = [];
+    scheduleFlushFromYjs();
+  };
+  const enqueueOperations = (operations) => {
+    if (operations.length === 0) {
+      return;
+    }
+    if (!pendingSnapshot) {
+      pendingOperations.push(...operations);
+    }
+    scheduleFlushFromYjs();
+  };
   const syncNow = () => {
+    if (destroyed || syncingFromYjs) {
+      return;
+    }
     const pureState = clone(store.getPureState());
+    if (!isPlainObject(pureState)) {
+      return;
+    }
     doc.transact(() => {
-      map.set("state", pureState);
-    }, ORIGIN);
+      syncObjectToYMap(stateMap, lastSyncedState, pureState);
+    }, localOrigin);
+    lastSyncedState = pureState;
   };
-  const syncFromYjs = () => {
-    const incoming = map.get("state");
-    if (typeof incoming !== "object" || incoming === null) {
+  const stateObserver = (events, transaction) => {
+    if (transaction.origin === localOrigin) {
       return;
     }
-    store.setState(clone(incoming));
+    enqueueOperations(collectRemoteOperations(events, stateMap));
   };
-  if (map.has("state")) {
-    syncFromYjs();
+  let stateMap;
+  const existingStateMap = getStateMap();
+  if (existingStateMap) {
+    stateMap = existingStateMap;
+    applyRemoteState(toPlainObject(stateMap));
   } else {
-    syncNow();
+    const currentState = map.get(STATE_KEY);
+    if (isPlainObject(currentState)) {
+      stateMap = createYMap(currentState);
+      doc.transact(() => {
+        map.set(STATE_KEY, stateMap);
+      }, localOrigin);
+      applyRemoteState(currentState);
+    } else {
+      const pureState = clone(store.getPureState());
+      stateMap = createYMap(isPlainObject(pureState) ? pureState : {});
+      doc.transact(() => {
+        map.set(STATE_KEY, stateMap);
+      }, localOrigin);
+    }
   }
+  stateMap.observeDeep(stateObserver);
   const observer = (event) => {
-    if (event.transaction.origin === ORIGIN) {
+    if (event.transaction.origin === localOrigin) {
       return;
     }
-    if (event.keysChanged.has("state")) {
-      syncFromYjs();
+    if (!event.keysChanged.has(STATE_KEY)) {
+      return;
+    }
+    const nextStateMap = getStateMap();
+    if (nextStateMap) {
+      if (stateMap !== nextStateMap) {
+        stateMap.unobserveDeep(stateObserver);
+        stateMap = nextStateMap;
+        stateMap.observeDeep(stateObserver);
+      }
+      enqueueSnapshot(toPlainObject(nextStateMap));
+      return;
+    }
+    const currentState = map.get(STATE_KEY);
+    if (isPlainObject(currentState)) {
+      const migrated = createYMap(currentState);
+      doc.transact(() => {
+        map.set(STATE_KEY, migrated);
+      }, localOrigin);
+      if (stateMap !== migrated) {
+        stateMap.unobserveDeep(stateObserver);
+        stateMap = migrated;
+        stateMap.observeDeep(stateObserver);
+      }
+      enqueueSnapshot(currentState);
     }
   };
   map.observe(observer);
   const unsubscribe = store.subscribe(() => {
     syncNow();
   });
-  return {
+  const binding = {
     doc,
     map,
     syncNow,
     destroy: () => {
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
       unsubscribe();
       map.unobserve(observer);
+      stateMap.unobserveDeep(stateObserver);
       if (!options.doc) {
         doc.destroy();
       }
     }
   };
+  if (process.env.NODE_ENV === "test") {
+    binding.__unsafeTestOnly__ = {
+      applyRemoteOperations: (operations) => {
+        applyRemoteOperations(operations);
+      }
+    };
+  }
+  return binding;
 };
 var yjs = (options = {}) => (store) => {
   const binding = bindYjs(store, options);
@@ -102,6 +571,7 @@ var yjs = (options = {}) => (store) => {
 // index.ts
 __reExport(index_exports, src_exports);
 export {
+  __unsafeTestOnly__,
   bindYjs,
   yjs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coaction/yjs",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A Coaction integration tool for Yjs",
   "keywords": [
     "state",
@@ -38,7 +38,7 @@
     "url": "https://github.com/unadlib/coaction/issues"
   },
   "peerDependencies": {
-    "coaction": "^1.0.1",
+    "coaction": "^1.2.0",
     "yjs": "^13.6.0"
   },
   "peerDependenciesMeta": {
@@ -50,8 +50,8 @@
     }
   },
   "devDependencies": {
-    "coaction": "^1.0.1",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.27",
+    "coaction": "1.2.0"
   },
   "publishConfig": {
     "access": "public",