refactor!: split up state signal to multiple signals

This is a necessary refactoring to support a state which allows different types of Signals, i.e. `linkedSignal` & `signal` but still presents itself as a single unit to the outside.

This commit splits the single Signal of `STATE_SOURCE`, which contains the state in the `SignalStore` and `signalState`, into multiple Signals.

An example. Given the following type:

```typescript
type User = {
  firstname: string;
  lastname: string;
};
```

Before, `STATE_SOURCE` would have been the following type:

```typescript
WritableSignal<User>;
```

With this change, it is:

```typescript
{
  firstname: WritableSignal<string>;
  lastname: WritableSignal<string>;
}
```

Most changes affect the tests which focus on the `STATE_SOURCE`. Except for one test in `signal-state.spec.ts` ('does not modify STATE_SOURCE'), all tests could be updated to assert the new behavior.

## Breaking Changes

- Any code which accesses the hidden `STATE_SOURCE` will be impacted.
- Breaking Changes to the public behavior are rare.

### different object reference for state of `STATE_SOURCE`

`STATE_SOURCE` does not keep the object reference of the initial state upon initialization.

```typescript
const initialObject = {
  ngrx: 'rocks',
};
const state = signalState(initialObject);

// before
state() === initialObject; // ✅

// after
state() === initialObject; // ❌
```

### no Signal change on empty patched state

`patchState` created a clone of the state and applied the patches to the clone. That meant, if nothing was changed, the Signal still fired because of the shallow clone. Since the state Signal doesn't exist anymore, there will be no change in this case.

```typescript
const state = signalState({ ngrx: 'rocks' });

let changeCount = 0;
effect(() => {
  changeCount++;
});

TestBed.flushEffects();
expect(changeCount).toBe(1);

patchState(state, {});

// before
expect(changeCount).toBe(2); // ✅

// after
expect(changeCount).toBe(2); // ❌ changeCount is still 1
```

## Further Changes

- `signalStoreFeature` had to be refactored because of typing issues with the change to `WritableStateSource`.
- `patchState` get the `NoInfer` for `updaters` argument. Otherwise, with multiple updaters, the former updater would have defined the `State` for the next updater.

Author: rainerhahnekamp

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'),
           });
         });