refactor(signals)!: multiple signals in STATE_SOURCE

modules/signals/spec/helpers.ts

@@ -1,5 +1,6 @@
 import { Component, inject, Type } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { SignalsDictionary } from '../src/signal-store-models';
 
 export function createLocalService<Service extends Type<unknown>>(
   serviceToken: Service
@@ -30,3 +31,26 @@ export function createLocalService<Service extends Type<unknown>>(
     destroy: () => fixture.destroy(),
   };
 }
+
+/**
+ * This could be done by using `getState`, but
+ * 1. We don't want to depend on the implementation of `getState` in the test.
+ * 2. We want to be able to provide the state in its actual type (with slice signals).
+ */
+export function assertStateSource(
+  state: SignalsDictionary,
+  expected: SignalsDictionary
+): void {
+  const stateKeys = Reflect.ownKeys(state);
+  const expectedKeys = Reflect.ownKeys(expected);
+
+  const currentState = stateKeys.reduce((acc, key) => {
+    acc[key] = state[key]();
+    return acc;
+  }, {} as Record<string | symbol, unknown>);
+  const expectedState = expectedKeys.reduce((acc, key) => {
+    acc[key] = expected[key]();
+    return acc;
+  }, {} as Record<string | symbol, unknown>);
+  expect(currentState).toEqual(expectedState);
+}

modules/signals/spec/signal-state.spec.ts

@@ -1,7 +1,7 @@
-import { computed } from '@angular/core';
-import { effect, isSignal } from '@angular/core';
+import { computed, effect, isSignal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { patchState, signalState } from '../src';
+import { SignalsDictionary } from '../src/signal-store-models';
 import { STATE_SOURCE } from '../src/state-source';
 
 vi.mock('@angular/core', { spy: true });
@@ -21,21 +21,30 @@ describe('signalState', () => {
     vi.clearAllMocks();
   });
 
-  it('has writable state source', () => {
-    const state = signalState({});
-    const stateSource = state[STATE_SOURCE];
+  it('creates its properites as Signals', () => {
+    const state = signalState({ foo: 'bar' });
+    const stateSource: SignalsDictionary = state[STATE_SOURCE];
 
-    expect(isSignal(stateSource)).toBe(true);
-    expect(typeof stateSource.update === 'function').toBe(true);
+    expect(isSignal(state)).toBe(true);
+    for (const key of Reflect.ownKeys(stateSource)) {
+      expect(isSignal(stateSource[key])).toBe(true);
+      expect(typeof stateSource[key].update === 'function').toBe(true);
+    }
+  });
+
+  it('does not keep the object reference of the initial state', () => {
+    const state = signalState(initialState);
+    expect(state()).not.toBe(initialState);
+    expect(state()).toEqual(initialState);
   });
 
   it('creates signals for nested state slices', () => {
     const state = signalState(initialState);
 
-    expect(state()).toBe(initialState);
+    expect(state()).toEqual(initialState);
     expect(isSignal(state)).toBe(true);
 
-    expect(state.user()).toBe(initialState.user);
+    expect(state.user()).toEqual(initialState.user);
     expect(isSignal(state.user)).toBe(true);
 
     expect(state.user.firstName()).toBe(initialState.user.firstName);
@@ -80,20 +89,11 @@ describe('signalState', () => {
     expect((state.user.firstName as any).y).toBe(undefined);
   });
 
-  it('does not modify STATE_SOURCE', () => {
-    const state = signalState(initialState);
-
-    expect((state[STATE_SOURCE] as any).user).toBe(undefined);
-    expect((state[STATE_SOURCE] as any).foo).toBe(undefined);
-    expect((state[STATE_SOURCE] as any).numbers).toBe(undefined);
-    expect((state[STATE_SOURCE] as any).ngrx).toBe(undefined);
-  });
-
   it('overrides Function properties if state keys have the same name', () => {
     const initialState = { name: { length: { length: 'ngrx' }, name: 20 } };
     const state = signalState(initialState);
 
-    expect(state()).toBe(initialState);
+    expect(state()).toEqual(initialState);
 
     expect(state.name()).toBe(initialState.name);
     expect(isSignal(state.name)).toBe(true);
@@ -190,12 +190,12 @@ describe('signalState', () => {
 
       patchState(state, {});
       TestBed.flushEffects();
-      expect(stateCounter).toBe(2);
+      expect(stateCounter).toBe(1);
       expect(userCounter).toBe(1);
 
       patchState(state, (state) => state);
       TestBed.flushEffects();
-      expect(stateCounter).toBe(3);
+      expect(stateCounter).toBe(1);
       expect(userCounter).toBe(1);
     }));
 });

modules/signals/spec/signal-store-feature.spec.ts

@@ -8,6 +8,7 @@ import {
   withState,
 } from '../src';
 import { STATE_SOURCE } from '../src/state-source';
+import { assertStateSource } from './helpers';
 
 describe('signalStoreFeature', () => {
   function withCustomFeature1() {
@@ -50,7 +51,7 @@ describe('signalStoreFeature', () => {
 
     const store = new Store();
 
-    expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+    assertStateSource(store[STATE_SOURCE], { foo: signal('foo') });
     expect(store.foo()).toBe('foo');
     expect(store.bar()).toBe('foo1');
     expect(store.baz()).toBe('foofoo12');
@@ -65,7 +66,7 @@ describe('signalStoreFeature', () => {
 
     const store = new Store();
 
-    expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+    assertStateSource(store[STATE_SOURCE], { foo: signal('foo') });
     expect(store.foo()).toBe('foo');
     expect(store.bar()).toBe('foo1');
     expect(store.m()).toBe('foofoofoo123');
@@ -81,7 +82,11 @@ describe('signalStoreFeature', () => {
 
     const store = new Store();
 
-    expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo', foo1: 1, foo2: 2 });
+    assertStateSource(store[STATE_SOURCE], {
+      foo: signal('foo'),
+      foo1: signal(1),
+      foo2: signal(2),
+    });
     expect(store.foo()).toBe('foo');
     expect(store.bar()).toBe('foo1');
     expect(store.baz()).toBe('foofoo12');

modules/signals/spec/signal-store.spec.ts

@@ -16,7 +16,7 @@ import {
   withState,
 } from '../src';
 import { STATE_SOURCE } from '../src/state-source';
-import { createLocalService } from './helpers';
+import { assertStateSource, createLocalService } from './helpers';
 
 describe('signalStore', () => {
   describe('creation', () => {
@@ -47,42 +47,56 @@ describe('signalStore', () => {
       expect(store1.foo()).toBe('bar');
     });
 
-    it('creates a store with readonly state source by default', () => {
+    it('creates a store with state source as Record holding slices as signals by default', () => {
       const Store = signalStore(withState({ foo: 'bar' }));
       const store = new Store();
       const stateSource = store[STATE_SOURCE];
 
-      expect(isSignal(stateSource)).toBe(true);
-      expect(stateSource()).toEqual({ foo: 'bar' });
+      expect(isSignal(stateSource)).toBe(false);
+      expect(Object.keys(stateSource)).toEqual(['foo']);
+      expect(isSignal(stateSource.foo)).toBe(true);
+      assertStateSource(stateSource, {
+        foo: signal('bar'),
+      });
     });
 
-    it('creates a store with readonly state source when protectedState option is true', () => {
+    it('creates a store with state source as Record holding slices as signals when protectedState option is true', () => {
       const Store = signalStore(
         { protectedState: true },
         withState({ foo: 'bar' })
       );
       const store = new Store();
       const stateSource = store[STATE_SOURCE];
 
-      expect(isSignal(stateSource)).toBe(true);
-      expect(stateSource()).toEqual({ foo: 'bar' });
+      expect(isSignal(stateSource)).toBe(false);
+      expect(Object.keys(stateSource)).toEqual(['foo']);
+      expect(isSignal(stateSource.foo)).toBe(true);
+      assertStateSource(stateSource, {
+        foo: signal('bar'),
+      });
     });
 
-    it('creates a store with writable state source when protectedState option is false', () => {
+    it('creates a store with state source as Record holding slices as writeable signals when protectedState option is false', () => {
       const Store = signalStore(
         { protectedState: false },
         withState({ foo: 'bar' })
       );
       const store = new Store();
       const stateSource = store[STATE_SOURCE];
 
-      expect(isSignal(stateSource)).toBe(true);
-      expect(stateSource()).toEqual({ foo: 'bar' });
-      expect(typeof stateSource.update === 'function').toBe(true);
+      expect(isSignal(stateSource)).toBe(false);
+      expect(Object.keys(stateSource)).toEqual(['foo']);
+      expect(isSignal(stateSource.foo)).toBe(true);
+      assertStateSource(stateSource, {
+        foo: signal('bar'),
+      });
+      expect(typeof stateSource.foo.update === 'function').toBe(true);
 
       patchState(store, { foo: 'baz' });
 
-      expect(stateSource()).toEqual({ foo: 'baz' });
+      assertStateSource(stateSource, {
+        foo: signal('baz'),
+      });
     });
   });
 
@@ -97,10 +111,11 @@ describe('signalStore', () => {
 
       const store = new Store();
 
-      expect(store[STATE_SOURCE]()).toEqual({
-        foo: 'foo',
-        x: { y: { z: 10 } },
+      assertStateSource(store[STATE_SOURCE], {
+        foo: signal('foo'),
+        x: signal({ y: { z: 10 } }),
       });
+
       expect(store.foo()).toBe('foo');
       expect(store.x()).toEqual({ y: { z: 10 } });
       expect(store.x.y()).toEqual({ z: 10 });
@@ -178,7 +193,9 @@ describe('signalStore', () => {
 
       const store = new Store();
 
-      expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+      assertStateSource(store[STATE_SOURCE], {
+        foo: signal('foo'),
+      });
       expect(store.foo()).toBe('foo');
       expect(store.bar()).toBe('bar');
       expect(store.num).toBe(10);
@@ -236,7 +253,9 @@ describe('signalStore', () => {
 
       const store = new Store();
 
-      expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+      assertStateSource(store[STATE_SOURCE], {
+        foo: signal('foo'),
+      });
       expect(store.foo()).toBe('foo');
       expect(store.bar()).toBe('bar');
       expect(store.num).toBe(10);
@@ -279,7 +298,9 @@ describe('signalStore', () => {
         withMethods(() => ({ baz: () => 'baz' })),
         withProps(() => ({ num: 100 })),
         withMethods((store) => {
-          expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+          assertStateSource(store[STATE_SOURCE], {
+            foo: signal('foo'),
+          });
           expect(store.foo()).toBe('foo');
           expect(store.bar()).toBe('bar');
           expect(store.baz()).toBe('baz');
@@ -291,7 +312,9 @@ describe('signalStore', () => {
 
       const store = new Store();
 
-      expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+      assertStateSource(store[STATE_SOURCE], {
+        foo: signal('foo'),
+      });
       expect(store.foo()).toBe('foo');
       expect(store.bar()).toBe('bar');
       expect(store.baz()).toBe('baz');
@@ -372,7 +395,9 @@ describe('signalStore', () => {
         withProps(() => ({ num: 10 })),
         withHooks({
           onInit(store) {
-            expect(store[STATE_SOURCE]()).toEqual({ foo: 'foo' });
+            assertStateSource(store[STATE_SOURCE], {
+              foo: signal('foo'),
+            });
             expect(store.foo()).toBe('foo');
             expect(store.bar()).toBe('bar');
             expect(store.baz()).toBe('baz');

modules/signals/spec/state-source.spec.ts

@@ -17,10 +17,9 @@ import {
   withHooks,
   withMethods,
   withState,
-  WritableStateSource,
 } from '../src';
 import { STATE_SOURCE } from '../src/state-source';
-import { createLocalService } from './helpers';
+import { assertStateSource, createLocalService } from './helpers';
 
 const SECRET = Symbol('SECRET');
 
@@ -38,16 +37,16 @@ describe('StateSource', () => {
 
   describe('isWritableStateSource', () => {
     it('returns true for a writable StateSource', () => {
-      const stateSource: StateSource<typeof initialState> = {
-        [STATE_SOURCE]: signal(initialState),
+      const stateSource: StateSource<{ value: typeof initialState }> = {
+        [STATE_SOURCE]: { value: signal(initialState) },
       };
 
       expect(isWritableStateSource(stateSource)).toBe(true);
     });
 
     it('returns false for a readonly StateSource', () => {
-      const stateSource: StateSource<typeof initialState> = {
-        [STATE_SOURCE]: signal(initialState).asReadonly(),
+      const stateSource: StateSource<{ vaulue: typeof initialState }> = {
+        [STATE_SOURCE]: { value: signal(initialState).asReadonly() },
       };
 
       expect(isWritableStateSource(stateSource)).toBe(false);
@@ -81,10 +80,12 @@ describe('StateSource', () => {
             foo: 'baz',
           });
 
-          expect(state[STATE_SOURCE]()).toEqual({
-            ...initialState,
-            user: { firstName: 'Johannes', lastName: 'Schmidt' },
-            foo: 'baz',
+          assertStateSource(state[STATE_SOURCE], {
+            user: signal({ firstName: 'Johannes', lastName: 'Schmidt' }),
+            foo: signal('baz'),
+            numbers: signal([1, 2, 3]),
+            ngrx: signal('signals'),
+            [SECRET]: signal('secret'),
           });
         });
 
@@ -96,10 +97,12 @@ describe('StateSource', () => {
             ngrx: 'rocks',
           }));
 
-          expect(state[STATE_SOURCE]()).toEqual({
-            ...initialState,
-            numbers: [1, 2, 3, 4],
-            ngrx: 'rocks',
+          assertStateSource(state[STATE_SOURCE], {
+            user: signal({ firstName: 'John', lastName: 'Smith' }),
+            foo: signal('bar'),
+            numbers: signal([1, 2, 3, 4]),
+            ngrx: signal('rocks'),
+            [SECRET]: signal('secret'),
           });
         });
 
@@ -121,11 +124,12 @@ describe('StateSource', () => {
             { foo: 'foo' }
           );
 
-          expect(state[STATE_SOURCE]()).toEqual({
-            ...initialState,
-            user: { firstName: 'Jovan', lastName: 'Schmidt' },
-            foo: 'foo',
-            numbers: [1, 2, 3, 4],
+          assertStateSource(state[STATE_SOURCE], {
+            user: signal({ firstName: 'Jovan', lastName: 'Schmidt' }),
+            foo: signal('foo'),
+            numbers: signal([1, 2, 3, 4]),
+            ngrx: signal('signals'),
+            [SECRET]: signal('secret'),
           });
         });