jotai-state-tree 1.3.6 → 1.3.7

package/dist/index.js

@@ -3871,6 +3871,9 @@ var TimeTravelManager = class {
     this.index = -1;
     this.isApplying = false;
     this.disposer = null;
+    this.actionDisposer = null;
+    this.pendingRecord = false;
+    this.actionGrouping = false;
     this.target = target;
     this.maxSnapshots = options.maxSnapshots ?? 50;
     this.autoRecord = options.autoRecord ?? false;
@@ -3882,8 +3885,35 @@ var TimeTravelManager = class {
         if (node.getRoot().$isApplyingHistory) {
           return;
         }
-        this.record();
+        if (isActionRunning()) {
+          this.pendingRecord = true;
+          if (!this.actionGrouping) {
+            this.actionGrouping = true;
+            Promise.resolve().then(() => {
+              if (this.actionGrouping) {
+                this.commitPendingRecord();
+              }
+            });
+          }
+        } else {
+          this.record();
+        }
       });
+      this.actionDisposer = onAction(target, () => {
+        const current = getCurrentAction();
+        if (current && !current.parent) {
+          if (this.actionGrouping) {
+            this.commitPendingRecord();
+          }
+        }
+      });
+    }
+  }
+  commitPendingRecord() {
+    this.actionGrouping = false;
+    if (this.pendingRecord) {
+      this.pendingRecord = false;
+      this.record();
     }
   }
   get currentIndex() {
@@ -3949,6 +3979,10 @@ var TimeTravelManager = class {
       this.disposer();
       this.disposer = null;
     }
+    if (this.actionDisposer) {
+      this.actionDisposer();
+      this.actionDisposer = null;
+    }
   }
 };
 function createTimeTravelManager(target, options) {

package/dist/index.mjs

@@ -2880,6 +2880,9 @@ var TimeTravelManager = class {
     this.index = -1;
     this.isApplying = false;
     this.disposer = null;
+    this.actionDisposer = null;
+    this.pendingRecord = false;
+    this.actionGrouping = false;
     this.target = target;
     this.maxSnapshots = options.maxSnapshots ?? 50;
     this.autoRecord = options.autoRecord ?? false;
@@ -2891,8 +2894,35 @@ var TimeTravelManager = class {
         if (node.getRoot().$isApplyingHistory) {
           return;
         }
-        this.record();
+        if (isActionRunning()) {
+          this.pendingRecord = true;
+          if (!this.actionGrouping) {
+            this.actionGrouping = true;
+            Promise.resolve().then(() => {
+              if (this.actionGrouping) {
+                this.commitPendingRecord();
+              }
+            });
+          }
+        } else {
+          this.record();
+        }
       });
+      this.actionDisposer = onAction(target, () => {
+        const current = getCurrentAction();
+        if (current && !current.parent) {
+          if (this.actionGrouping) {
+            this.commitPendingRecord();
+          }
+        }
+      });
+    }
+  }
+  commitPendingRecord() {
+    this.actionGrouping = false;
+    if (this.pendingRecord) {
+      this.pendingRecord = false;
+      this.record();
     }
   }
   get currentIndex() {
@@ -2958,6 +2988,10 @@ var TimeTravelManager = class {
       this.disposer();
       this.disposer = null;
     }
+    if (this.actionDisposer) {
+      this.actionDisposer();
+      this.actionDisposer = null;
+    }
   }
 };
 function createTimeTravelManager(target, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jotai-state-tree",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "MobX-State-Tree API compatible library powered by Jotai",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/__tests__/history_repro.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { types, getSnapshot, createUndoManager, createTimeTravelManager } from '../index';
+
+const Todo = types
+  .model('Todo', {
+    id: types.identifier,
+    title: types.string,
+    done: types.optional(types.boolean, false),
+  })
+  .actions((self) => ({
+    toggle() {
+      self.done = !self.done;
+    },
+    setTitle(title: string) {
+      self.title = title;
+    },
+  }));
+
+const TodoStore = types
+  .model('TodoStore', {
+    todos: types.optional(types.array(Todo), []),
+    filter: types.optional(types.string, 'all'),
+  })
+  .actions((self) => ({
+    addTodo(title: string) {
+      if (!title.trim()) return;
+      self.todos.push({
+        id: Math.random().toString(36).substring(2, 9),
+        title,
+        done: false,
+      });
+    },
+    removeTodo(id: string) {
+      const item = self.todos.find((t) => t.id === id);
+      if (item) {
+        self.todos.remove(item);
+      }
+    },
+    clearCompleted() {
+      const completed = self.todos.filter((t) => t.done);
+      completed.forEach((item) => self.todos.remove(item));
+    },
+  }));
+
+describe("Todo app history integration", () => {
+  it("should match todo example time travel flow with action grouping", () => {
+    const store = TodoStore.create({
+      todos: [
+        { id: '1', title: 'Learn jotai-state-tree', done: true },
+        { id: '2', title: 'Explore Vite templates', done: false },
+        { id: '3', title: 'Build clean minimalist UIs', done: false },
+      ]
+    });
+
+    const undoManager = createUndoManager(store, { maxHistoryLength: 50 });
+    const timeTravel = createTimeTravelManager(store, { maxSnapshots: 50, autoRecord: true });
+
+    expect(timeTravel.snapshotCount).toBe(1);
+    expect(timeTravel.currentIndex).toBe(0);
+
+    // 1. Add todo
+    store.addTodo("New Task");
+    expect(store.todos.length).toBe(4);
+    expect(timeTravel.snapshotCount).toBe(2);
+    expect(timeTravel.currentIndex).toBe(1);
+
+    // 2. Toggle todo done
+    const newTodo = store.todos[3];
+    newTodo.toggle();
+    expect(newTodo.done).toBe(true);
+    expect(timeTravel.snapshotCount).toBe(3);
+    expect(timeTravel.currentIndex).toBe(2);
+
+    // 3. Clear completed (which should remove Learn jotai-state-tree and New Task in a single action)
+    store.clearCompleted();
+    expect(store.todos.length).toBe(2);
+    // Should group the multiple removals in clearCompleted into a single snapshot update
+    expect(timeTravel.snapshotCount).toBe(4);
+    expect(timeTravel.currentIndex).toBe(3);
+
+    // 4. Undo clearCompleted
+    undoManager.undo();
+    expect(store.todos.length).toBe(4);
+    // Time travel should not have recorded new snapshots during undo
+    expect(timeTravel.snapshotCount).toBe(4);
+    expect(timeTravel.currentIndex).toBe(3);
+
+    // 5. Time travel back 2 steps
+    timeTravel.goBack(); // Back to state after toggle
+    expect(store.todos.length).toBe(4);
+    expect(store.todos[3].done).toBe(true);
+
+    timeTravel.goBack(); // Back to state after addTodo
+    expect(store.todos.length).toBe(4);
+    expect(store.todos[3].done).toBe(false);
+
+    undoManager.dispose();
+    timeTravel.dispose();
+  });
+});

package/src/__tests__/react.react.test.tsx

@@ -16,6 +16,8 @@ import {
   clearAllRegistries,
   resetGlobalStore,
   getRegistryStats,
+  createUndoManager,
+  createTimeTravelManager,
 } from "../index";
 
 import {
@@ -585,6 +587,54 @@ describe("React Integration", () => {
         expect(screen.getByTestId("snapshot").textContent).toBe("20");
       });
     });
+
+    it("should update when undo/redo or time travel are executed", async () => {
+      const counter = CounterModel.create({ count: 10 });
+      const undoManager = createUndoManager(counter);
+      const timeTravel = createTimeTravelManager(counter, { autoRecord: true });
+
+      function SnapshotDisplay({ store }: { store: typeof counter }) {
+        const snapshot = useSnapshot<{ count: number }>(store);
+        return <div data-testid="snapshot">{snapshot.count}</div>;
+      }
+
+      render(<SnapshotDisplay store={counter} />);
+      expect(screen.getByTestId("snapshot").textContent).toBe("10");
+
+      act(() => {
+        counter.setCount(20);
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId("snapshot").textContent).toBe("20");
+      });
+
+      // Undo
+      act(() => {
+        undoManager.undo();
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId("snapshot").textContent).toBe("10");
+      });
+
+      // Redo
+      act(() => {
+        undoManager.redo();
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId("snapshot").textContent).toBe("20");
+      });
+
+      // Time travel goBack
+      act(() => {
+        timeTravel.goBack();
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId("snapshot").textContent).toBe("10");
+      });
+
+      undoManager.dispose();
+      timeTravel.dispose();
+    });
   });
 
   // ============================================================================

package/src/undo.ts

@@ -360,7 +360,10 @@ class TimeTravelManager implements ITimeTravelManager {
   private maxSnapshots: number;
   private isApplying: boolean = false;
   private disposer: IDisposer | null = null;
+  private actionDisposer: IDisposer | null = null;
   private autoRecord: boolean;
+  private pendingRecord: boolean = false;
+  private actionGrouping: boolean = false;
 
   constructor(
     target: unknown,
@@ -384,11 +387,41 @@ class TimeTravelManager implements ITimeTravelManager {
         if (node.getRoot().$isApplyingHistory) {
           return;
         }
-        this.record();
+
+        if (isActionRunning()) {
+          this.pendingRecord = true;
+          if (!this.actionGrouping) {
+            this.actionGrouping = true;
+            Promise.resolve().then(() => {
+              if (this.actionGrouping) {
+                this.commitPendingRecord();
+              }
+            });
+          }
+        } else {
+          this.record();
+        }
+      });
+
+      this.actionDisposer = onAction(target, () => {
+        const current = getCurrentAction();
+        if (current && !current.parent) {
+          if (this.actionGrouping) {
+            this.commitPendingRecord();
+          }
+        }
       });
     }
   }
 
+  private commitPendingRecord() {
+    this.actionGrouping = false;
+    if (this.pendingRecord) {
+      this.pendingRecord = false;
+      this.record();
+    }
+  }
+
   get currentIndex(): number {
     return this.index;
   }
@@ -469,6 +502,10 @@ class TimeTravelManager implements ITimeTravelManager {
       this.disposer();
       this.disposer = null;
     }
+    if (this.actionDisposer) {
+      this.actionDisposer();
+      this.actionDisposer = null;
+    }
   }
 }