Move getters into nested prop in store snapshot

Author: expelledboy

.changeset/fresh-keys-enjoy.md

@@ -20,17 +20,17 @@ const store = createStore({
 });
 
 // Getters are available on store snapshots
-var snapshot = store.getSnapshot();
-assert.equal(snapshot.doubled, 4);
-assert.equal(snapshot.squared, 4);
-assert.equal(snapshot.sum, 8);
+var getters = store.getSnapshot().getters;
+assert.equal(getters.doubled, 4);
+assert.equal(getters.squared, 4);
+assert.equal(getters.sum, 8);
 
 // Automatically update when context changes
 store.send({ type: 'inc' });
-var snapshot = store.getSnapshot();
-assert.equal(snapshot.doubled, 6);
-assert.equal(snapshot.squared, 36);
-assert.equal(snapshot.sum, 42);
+var getters = store.getSnapshot().getters;
+assert.equal(getters.doubled, 6);
+assert.equal(getters.squared, 36);
+assert.equal(getters.sum, 42);
 ```
 
 Key features:

packages/xstate-store/src/fromStore.ts

@@ -77,7 +77,7 @@ export function fromStore<
       const newSnapshot = {
         ...snapshot,
         context: newContext,
-        ...computeGetters(newContext, getters)
+        getters: computeGetters(newContext, getters)
       } as StoreSnapshot<TContext, TGetters>;
 
       for (const effect of effects) {
@@ -101,7 +101,7 @@ export function fromStore<
         context,
         output: undefined,
         error: undefined,
-        ...computeGetters(context, getters)
+        getters: computeGetters(context, getters)
       } satisfies StoreSnapshot<TContext, TGetters>;
     },
     getPersistedSnapshot: (s) => s,

packages/xstate-store/src/store.ts

@@ -82,7 +82,7 @@ function createStoreCore<
     status: 'active',
     output: undefined,
     error: undefined,
-    ...computeGetters(initialContext, getters)
+    getters: computeGetters(initialContext, getters)
   };
   let currentSnapshot: StoreSnapshot<TContext, TGetters> = initialSnapshot;
 
@@ -105,7 +105,7 @@ function createStoreCore<
     currentSnapshot = {
       ...currentSnapshot,
       context: newContext,
-      ...computeGetters(newContext, getters)
+      getters: computeGetters(newContext, getters)
     } as StoreSnapshot<TContext, TGetters>;
 
     inspectionObservers.get(store)?.forEach((observer) => {

packages/xstate-store/src/types.ts

@@ -58,7 +58,8 @@ export type StoreSnapshot<
   TGetters extends Record<string, (context: TContext, getters: any) => any>
 > = Snapshot<unknown> & {
   context: TContext;
-} & ResolvedGetters<TGetters>;
+  getters: StoreGetters<TContext, TGetters>;
+};
 
 /**
  * An actor-like object that:

packages/xstate-store/test/store.test.ts

@@ -544,12 +544,12 @@ describe('getters', () => {
       }
     });
 
-    expect(store.getSnapshot().doubled).toBe(4);
-    expect(store.getSnapshot().squared).toBe(4);
+    expect(store.getSnapshot().getters.doubled).toBe(4);
+    expect(store.getSnapshot().getters.squared).toBe(4);
 
     store.send({ type: 'inc' });
-    expect(store.getSnapshot().doubled).toBe(6);
-    expect(store.getSnapshot().squared).toBe(9);
+    expect(store.getSnapshot().getters.doubled).toBe(6);
+    expect(store.getSnapshot().getters.squared).toBe(9);
   });
 
   it('handles getter dependencies', () => {
@@ -567,10 +567,10 @@ describe('getters', () => {
       }
     });
 
-    expect(store.getSnapshot().total).toBeCloseTo(22); // 20 + 2 = 22
+    expect(store.getSnapshot().getters.total).toBeCloseTo(22); // 20 + 2 = 22
 
     store.send({ type: 'updatePrice', value: 20 });
-    expect(store.getSnapshot().total).toBeCloseTo(44); // 40 + 4 = 44
+    expect(store.getSnapshot().getters.total).toBeCloseTo(44); // 40 + 4 = 44
   });
 
   it('updates getters when context changes', () => {
@@ -587,10 +587,10 @@ describe('getters', () => {
       }
     });
 
-    expect(store.getSnapshot().hasItems).toBe(false);
+    expect(store.getSnapshot().getters.hasItems).toBe(false);
 
     store.send({ type: 'addItem', item: 'test' });
-    expect(store.getSnapshot().hasItems).toBe(true);
+    expect(store.getSnapshot().getters.hasItems).toBe(true);
   });
 
   it('works with immer producer', () => {
@@ -608,12 +608,12 @@ describe('getters', () => {
       }
     });
 
-    expect(store.getSnapshot().sum).toBe(3);
-    expect(store.getSnapshot().product).toBe(2);
+    expect(store.getSnapshot().getters.sum).toBe(3);
+    expect(store.getSnapshot().getters.product).toBe(2);
 
     store.send({ type: 'update', a: 3 });
-    expect(store.getSnapshot().sum).toBe(5);
-    expect(store.getSnapshot().product).toBe(6);
+    expect(store.getSnapshot().getters.sum).toBe(5);
+    expect(store.getSnapshot().getters.product).toBe(6);
   });
 
   it('includes getters in inspection snapshots', () => {
@@ -638,9 +638,18 @@ describe('getters', () => {
     store.send({ type: 'increment' });
 
     expect(snapshots).toEqual([
-      expect.objectContaining({ context: { value: 5 }, squared: 25 }),
-      expect.objectContaining({ context: { value: 6 }, squared: 36 }),
-      expect.objectContaining({ context: { value: 7 }, squared: 49 })
+      expect.objectContaining({
+        context: { value: 5 },
+        getters: { squared: 25 }
+      }),
+      expect.objectContaining({
+        context: { value: 6 },
+        getters: { squared: 36 }
+      }),
+      expect.objectContaining({
+        context: { value: 7 },
+        getters: { squared: 49 }
+      })
     ]);
   });
 });