fix(jotai): only subscribe the state which is from loro (#34)

Author: Leeeon233

packages/jotai/README.md

@@ -1,6 +1,7 @@
 # Loro Mirror for Jotai
 
-Jotai integration for Loro Mirror, providing atomic state management with Loro CRDT synchronization.
+Jotai integration for Loro Mirror, providing atomic state management with Loro
+CRDT synchronization.
 
 ## Installation
 
@@ -17,7 +18,8 @@ yarn add loro-mirror-jotai jotai loro-crdt
 
 ## Usage
 
-Create a `loroMirrorAtom` to represent your shared state. It syncs automatically with the provided Loro document.
+Create a `loroMirrorAtom` to represent your shared state. It syncs automatically
+with the provided Loro document.
 
 ```tsx
 import { useAtom } from 'jotai';
@@ -27,49 +29,58 @@ import { loroMirrorAtom } from 'loro-mirror-jotai';
 
 type TodoStatus = "todo" | "inProgress" | "done";
 
-// 1. Define your schema
-const todoSchema = schema({
-  todos: schema.LoroList(
-    schema.LoroMap({
-      text: schema.String(),
-      status: schema.String<TodoStatus>()
-    }),
-    (t) => t.$cid, // stable id from Loro container id
-  ),
+const todoSchema = schema.LoroMap(
+    {
+        text: schema.String(),
+        status: schema.String<TodoStatus>()
+    }
+)
+// Define your schema
+const todoDocSchema = schema({
+    todos: schema.LoroList(
+        todoSchema,
+        (t) => t.$cid, // stable id from Loro container id
+    )
 });
 
-// 2. Create a Loro document instance
+// Auto generated type from schema
+type Todo = InferType<typeof todoSchema>;
+
+// Create a Loro document instance
 const doc = new LoroDoc();
 
-// 3. Create the Jotai atom with Loro Mirror config
+// Maybe subscribe the doc for persisting
+let sub = doc.subscribe(......)
+
+// Create the Jotai atom with Loro Mirror config
 // Optionally pass onError to handle async failures
-const todoAtom = loroMirrorAtom({
-  doc,
-  schema: todoSchema,
-  initialState: { todos: [] },
-  // onError: (err) => console.error('update failed', err),
+const todoDocAtom = loroMirrorAtom({
+    doc,
+    schema: todoDocSchema,
+    initialState: { todos: [] as Todo[] },
+    // onError: (err) => console.error('update failed', err),
 });
 
-// 4. Use it in your React component
+// Selector atom
+const todosAtom = atom(get => get(todoDocAtom).todos, (_get, set, todos: Todo[]) => {
+    set(todoDocAtom, { todos })
+})
+
+// Action atom
+const addTodoAtom = atom(null, (get, set, todo: Todo) => {
+    set(todosAtom, [...get(todosAtom), todo])
+})
+
+// Use it in your React component
 function TodoApp() {
-  const [state, setState] = useAtom(todoAtom);
-
-  const addTodo = async () => {
-    // Setter returns a Promise; await to catch validation errors or ensure ordering
-    await setState((prevState) => ({
-      todos: [
-        ...prevState.todos,
-        {
-          text: 'New Todo',
-          status: "todo",
-        },
-      ],
-    }));
-  };
+  const todos = useAtomValue(todosAtom);
+  const addTodo = useSetAtom(addTodoAtom);
 
   return (
     <div>
-      <button onClick={addTodo}>Add Todo</button>
+      <button onClick={()=>{
+        addTodo({text: "New todo", status: "todo"})
+      }}>Add Todo</button>
       <ul>
         {state.todos.map((todo) => (
           <li key={todo.$cid /* stable key from Loro container id */}>
@@ -84,13 +95,17 @@ function TodoApp() {
 
 ### Async behavior
 
-- The setter returned by `useAtom(loroMirrorAtom(...))` returns a Promise. Await it when you need deterministic ordering or to handle validation/consistency errors.
+- The setter returned by `useAtom(loroMirrorAtom(...))` returns a Promise. Await
+  it when you need deterministic ordering or to handle validation/consistency
+  errors.
 - You can also pass `onError` in the atom config to catch rejections centrally.
 
 ### About `$cid`
 
-- `$cid` is always present on `LoroMap` state and equals the underlying Loro container id.
-- Use `$cid` as a stable list selector and React key: `schema.LoroList(item, x => x.$cid)` and `<li key={todo.$cid}>`.
+- `$cid` is always present on `LoroMap` state and equals the underlying Loro
+  container id.
+- Use `$cid` as a stable list selector and React key:
+  `schema.LoroList(item, x => x.$cid)` and `<li key={todo.$cid}>`.
 
 ## License
 

packages/jotai/src/index.ts

@@ -5,11 +5,12 @@
  * Each piece of state is represented as an atom, enabling fine-grained reactivity and composition.
  */
 
-import { atom, WritableAtom } from "jotai";
+import { atom } from 'jotai';
 
 // Import types only to avoid module resolution issues
 import type { LoroDoc } from "loro-crdt";
-import { SchemaType, InferType, InferInputType, Mirror } from "loro-mirror";
+import { SyncDirection, Mirror } from "loro-mirror";
+import type { SchemaType, InferType, InferInputType } from "loro-mirror";
 
 /**
  * Configuration for creating a Loro Mirror atom
@@ -85,51 +86,35 @@ export interface LoroMirrorAtomConfig<S extends SchemaType> {
  */
 export function loroMirrorAtom<S extends SchemaType>(
     config: LoroMirrorAtomConfig<S>,
-): WritableAtom<
-    InferType<S>,
-    [InferInputType<S> | ((prev: InferType<S>) => InferInputType<S>)],
-    Promise<void>
-> {
+) {
     const store = new Mirror(config);
-    const stateAtom = atom<InferType<S>>(store.getState() as InferType<S>);
-    const subAtom = atom<null, [InferType<S>], void>(
+    const stateAtom = atom(store.getState() as InferType<S>);
+    const subAtom = atom(
         null,
-        (_get, set, update) => {
+        (_get, set, update: InferType<S>) => {
             set(stateAtom, update);
         },
     );
 
     subAtom.onMount = (set) => {
-        const sub = store.subscribe((state) => {
-            set(state);
+        const sub = store.subscribe((state, { direction }) => {
+            if (direction === SyncDirection.FROM_LORO) {
+                set(state);
+            }
         });
         return () => {
             sub?.();
         };
     };
 
-    const base = atom<
-        InferType<S>,
-        [InferInputType<S> | ((prev: InferType<S>) => InferInputType<S>)],
-        Promise<void>
-    >(
+    const base = atom(
         (get) => {
             get(subAtom);
             return get(stateAtom);
         },
-        async (get, set, update) => {
-            const currentState = get(stateAtom) as InferType<S>;
+        async (_get, set, update: Partial<InferInputType<S>>) => {
             try {
-                if (typeof update === "function") {
-                    const nextInput = (
-                        update as (prev: InferType<S>) => InferInputType<S>
-                    )(currentState);
-                    await store.setState(
-                        nextInput as Partial<InferInputType<S>>,
-                    );
-                } else {
-                    await store.setState(update as Partial<InferInputType<S>>);
-                }
+                await store.setState(update);
                 // Reflect latest state from Mirror after any stamping like $cid
                 set(stateAtom, store.getState() as InferType<S>);
             } catch (err) {

packages/jotai/tests/readme.jotai.test.tsx

@@ -1,48 +1,71 @@
-import { describe, it, expect } from "vitest";
-import { renderHook, act } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { act, renderHook } from "@testing-library/react";
 import { LoroDoc } from "loro-crdt";
-import { schema } from "loro-mirror";
+import { InferInputType, schema } from "loro-mirror";
 import { loroMirrorAtom } from "../src";
-import { useAtom } from "jotai";
+import { atom, useAtomValue, useSetAtom } from "jotai";
 
 describe("Jotai README example", () => {
     it("creates an atom with list items that include $cid and updates state", async () => {
         type TodoStatus = "todo" | "inProgress" | "done";
 
-        const todoSchema = schema({
+        const todoSchema = schema.LoroMap(
+            {
+                text: schema.String(),
+                status: schema.String<TodoStatus>(),
+            },
+            { withCid: true },
+        );
+        // Define your schema
+        const todoDocSchema = schema({
             todos: schema.LoroList(
-                schema.LoroMap({
-                    text: schema.String(),
-                    status: schema.String<TodoStatus>(),
-                }),
-                (t) => t.$cid,
+                todoSchema,
+                (t) => t.$cid, // stable id from Loro container id
             ),
         });
 
+        // Auto generated type from schema
+        type Todo = InferInputType<typeof todoSchema>;
+
         const doc = new LoroDoc();
-        const atom = loroMirrorAtom({
+        const todoDocAtom = loroMirrorAtom({
             doc,
-            schema: todoSchema,
-            initialState: { todos: [] },
+            schema: todoDocSchema,
+            initialState: { todos: [] as Todo[] },
+            // onError: (err) => console.error('update failed', err),
         });
 
-        const { result } = renderHook(() => useAtom(atom));
+        // Selector atom
+        const todosAtom = atom(
+            (get) => get(todoDocAtom).todos,
+            (_get, set, todos: Todo[]) => {
+                set(todoDocAtom, { todos });
+            },
+        );
+
+        // Action atom
+        const addTodoAtom = atom(null, (get, set, todo: Todo) => {
+            set(todosAtom, [...get(todosAtom), todo]);
+        });
 
+        const { result: todosResult } = renderHook(() =>
+            useAtomValue(todosAtom)
+        );
+        const { result: addTodoResult } = renderHook(() =>
+            useSetAtom(addTodoAtom)
+        );
         // push an item
         await act(async () => {
-            await result.current[1]((prev) => ({
-                todos: [
-                    ...prev.todos,
-                    { text: "New Todo", status: "todo" as TodoStatus },
-                ],
-            }));
+            addTodoResult.current(
+                { text: "New Todo", status: "todo" as TodoStatus },
+            );
         });
 
-        const state = result.current[0];
-        expect(state.todos.length).toBe(1);
-        expect(state.todos[0].text).toBe("New Todo");
-        expect(state.todos[0].status).toBe("todo");
+        const state = todosResult.current;
+        expect(state.length).toBe(1);
+        expect(state[0].text).toBe("New Todo");
+        expect(state[0].status).toBe("todo");
         // $cid should be injected
-        expect(typeof state.todos[0].$cid).toBe("string");
+        expect(typeof state[0].$cid).toBe("string");
     });
 });