feat(signals): disallow user-defined signals in withState and signalState (#4879)

Author: markostanimirovic

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

@@ -1,12 +1,8 @@
 import {
-  computed,
   createEnvironmentInjector,
   effect,
   EnvironmentInjector,
   Injectable,
-  isSignal,
-  linkedSignal,
-  resource,
   signal,
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
@@ -55,7 +51,7 @@ describe('StateSource', () => {
     });
 
     it('returns false for a readonly StateSource', () => {
-      const stateSource: StateSource<{ vaulue: typeof initialState }> = {
+      const stateSource: StateSource<{ value: typeof initialState }> = {
         [STATE_SOURCE]: { value: signal(initialState).asReadonly() },
       };
 
@@ -212,41 +208,42 @@ describe('StateSource', () => {
     });
 
     it('sets only root properties which values have changed (equal check)', () => {
-      let updateCounter = 0;
-      const userSignal = signal(
-        {
-          firstName: 'John',
-          lastName: 'Smith',
-        },
-        {
-          equal: (a, b) => {
-            updateCounter++;
-            return a === b;
-          },
-        }
-      );
-
       const UserStore = signalStore(
         { providedIn: 'root', protectedState: false },
-        withState({ user: userSignal, city: 'Changan' })
+        withState({
+          user: { firstName: 'John', lastName: 'Smith' },
+          city: 'Changan',
+        })
       );
       const store = TestBed.inject(UserStore);
+      let userChangedCount = 0;
+      TestBed.runInInjectionContext(() => {
+        effect(() => {
+          store.user();
+          userChangedCount++;
+        });
+      });
 
-      expect(updateCounter).toBe(0);
+      TestBed.tick();
+      expect(userChangedCount).toBe(1);
 
       patchState(store, { city: 'Xian' });
-      expect(updateCounter).toBe(0);
+      TestBed.tick();
+      expect(userChangedCount).toBe(1);
 
       patchState(store, (state) => state);
-      expect(updateCounter).toBe(0);
+      TestBed.tick();
+      expect(userChangedCount).toBe(1);
 
       patchState(store, ({ user }) => ({ user }));
-      expect(updateCounter).toBe(0);
+      TestBed.tick();
+      expect(userChangedCount).toBe(1);
 
       patchState(store, ({ user }) => ({
         user: { ...user, firstName: 'Jane' },
       }));
-      expect(updateCounter).toBe(1);
+      TestBed.tick();
+      expect(userChangedCount).toBe(2);
     });
   });
 
@@ -468,125 +465,4 @@ describe('StateSource', () => {
       });
     });
   });
-
-  describe('user-defined signals as state slices', () => {
-    [
-      {
-        name: 'signalStore',
-        setup<State extends object>(state: State) {
-          const Store = signalStore(
-            { providedIn: 'root', protectedState: false },
-            withState(state)
-          );
-          return TestBed.inject(Store);
-        },
-      },
-      {
-        name: 'signalState',
-        setup<State extends object>(state: State) {
-          return signalState(state);
-        },
-      },
-    ].forEach(({ name, setup }) => {
-      describe(name, () => {
-        it('integrates writable Signals as-is', () => {
-          const user = {
-            id: 1,
-            name: 'John Doe',
-          };
-          const userSignal = signal(user);
-
-          const store = setup({ user: userSignal });
-          const prettyName = computed(
-            () => `${store.user().name} ${store.user().id}`
-          );
-
-          expect(store.user()).toBe(user);
-          expect(prettyName()).toBe('John Doe 1');
-
-          userSignal.set({ id: 2, name: 'Jane Doe' });
-          expect(store.user()).toEqual({ id: 2, name: 'Jane Doe' });
-
-          patchState(store, { user: { id: 3, name: 'Jack Doe' } });
-          expect(store.user()).toEqual({ id: 3, name: 'Jack Doe' });
-        });
-
-        it('integrates a linkedSignal and its update mechanism', () => {
-          const triggerSignal = signal(1);
-          const userLinkedSignal = linkedSignal({
-            source: triggerSignal,
-            computation: () => ({ id: 1, name: 'John Doe' }),
-          });
-
-          const store = setup({ user: userLinkedSignal });
-          const prettyName = computed(
-            () => `${store.user().name} ${store.user().id}`
-          );
-
-          expect(store.user()).toEqual({ id: 1, name: 'John Doe' });
-          expect(prettyName()).toBe('John Doe 1');
-
-          patchState(store, { user: { id: 2, name: 'Jane Doe' } });
-          expect(prettyName()).toBe('Jane Doe 2');
-
-          triggerSignal.set(2);
-          expect(prettyName()).toBe('John Doe 1');
-        });
-
-        it('supports a resource', async () => {
-          const resourceTrigger = signal(1);
-          const userResource = TestBed.runInInjectionContext(() =>
-            resource({
-              request: resourceTrigger,
-              loader: (params) =>
-                Promise.resolve({ id: params.request, name: 'John Doe' }),
-              defaultValue: { id: 0, name: 'Loading...' },
-            })
-          );
-
-          const store = setup({ user: userResource.value });
-          expect(store.user()).toEqual({ id: 0, name: 'Loading...' });
-
-          await new Promise((resolve) => setTimeout(resolve));
-          expect(store.user()).toEqual({ id: 1, name: 'John Doe' });
-
-          resourceTrigger.set(2);
-          await new Promise((resolve) => setTimeout(resolve));
-          expect(store.user()).toEqual({ id: 2, name: 'John Doe' });
-        });
-
-        it('allows mixing signals and plain values', () => {
-          const user = {
-            id: 1,
-            name: 'John Doe',
-          };
-          const userSignal = signal(user);
-          const product = { id: 1, name: 'Product A' };
-
-          const store = setup({ user: userSignal, product });
-
-          expect(store.user()).toBe(user);
-          expect(store.product()).toBe(product);
-        });
-
-        it('does not strip a readonly Signal', () => {
-          const store = setup({ n: signal(1).asReadonly() });
-
-          expect(isSignal(store.n())).toBe(true);
-          expect(store.n()()).toBe(1);
-        });
-
-        it('does not strip a nested writable Signal', () => {
-          const user = {
-            id: 1,
-            name: 'John Doe',
-          };
-          const userSignal = signal(user);
-          const store = setup({ data: { user: userSignal } });
-
-          expect(isSignal(store.data.user())).toBe(true);
-        });
-      });
-    });
-  });
 });

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

@@ -145,15 +145,15 @@ describe('signalState', () => {
       'unique symbol | unique symbol'
     );
 
-    expectSnippet(snippet).toInfer('setStateValue', 'StateResult<Set<number>>');
+    expectSnippet(snippet).toInfer('setStateValue', 'Set<number>');
     expectSnippet(snippet).toInfer(
       'setStateKeys',
       'unique symbol | unique symbol'
     );
 
     expectSnippet(snippet).toInfer(
       'mapStateValue',
-      'StateResult<Map<number, { bar: boolean; }>>'
+      'Map<number, { bar: boolean; }>'
     );
     expectSnippet(snippet).toInfer(
       'mapStateKeys',
@@ -162,7 +162,7 @@ describe('signalState', () => {
 
     expectSnippet(snippet).toInfer(
       'uintArrayStateValue',
-      'StateResult<Uint8ClampedArray<ArrayBuffer>>'
+      'Uint8ClampedArray<ArrayBuffer>'
     );
     expectSnippet(snippet).toInfer(
       'uintArrayStateKeys',
@@ -193,26 +193,26 @@ describe('signalState', () => {
 
     expectSnippet(snippet).toInfer(
       'weakSetStateValue',
-      'StateResult<WeakSet<{ foo: string; }>>'
+      'WeakSet<{ foo: string; }>'
     );
     expectSnippet(snippet).toInfer(
       'weakSetStateKeys',
       'unique symbol | unique symbol'
     );
 
-    expectSnippet(snippet).toInfer('dateStateValue', 'StateResult<Date>');
+    expectSnippet(snippet).toInfer('dateStateValue', 'Date');
     expectSnippet(snippet).toInfer(
       'dateStateKeys',
       'unique symbol | unique symbol'
     );
 
-    expectSnippet(snippet).toInfer('errorStateValue', 'StateResult<Error>');
+    expectSnippet(snippet).toInfer('errorStateValue', 'Error');
     expectSnippet(snippet).toInfer(
       'errorStateKeys',
       'unique symbol | unique symbol'
     );
 
-    expectSnippet(snippet).toInfer('regExpStateValue', 'StateResult<RegExp>');
+    expectSnippet(snippet).toInfer('regExpStateValue', 'RegExp');
     expectSnippet(snippet).toInfer(
       'regExpStateKeys',
       'unique symbol | unique symbol'
@@ -228,7 +228,7 @@ describe('signalState', () => {
 
     expectSnippet(snippet).toSucceed();
 
-    expectSnippet(snippet).toInfer('stateValue', 'StateResult<() => void>');
+    expectSnippet(snippet).toInfer('stateValue', '() => void');
     expectSnippet(snippet).toInfer(
       'stateKeys',
       'unique symbol | unique symbol'

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

@@ -4,7 +4,7 @@ import { compilerOptions } from './helpers';
 describe('signalStore', () => {
   const expectSnippet = expecter(
     (code) => `
-        import { computed, inject, Signal, signal } from '@angular/core';
+        import { computed, inject, Signal } from '@angular/core';
         import {
           getState,
           patchState,
@@ -860,47 +860,6 @@ describe('signalStore', () => {
     `).toFail(/'_count2' does not exist in type/);
   });
 
-  it('exposes a writable Signal as readonly', () => {
-    const snippet = `
-      type User = {
-        id: number;
-        name: string;
-        location: {
-          city: string;
-          country: string;
-        }
-      }
-
-      const userSignal = signal({
-        id: 1,
-        name: 'John Doe',
-        location: {
-          city: 'New York',
-          country: 'USA'
-        }
-      });
-
-      const Store = signalStore(
-        withState({
-          user: userSignal,
-          foo: signal('bar')
-        })
-      );
-
-      const store = new Store();
-      const user = store.user;
-      const foo = store.foo;
-    `;
-
-    expectSnippet(snippet).toSucceed();
-
-    expectSnippet(snippet).toInfer(
-      'user',
-      'DeepSignal<{ id: number; name: string; location: { city: string; country: string; }; }>'
-    );
-    expectSnippet(snippet).toInfer('foo', 'Signal<string>');
-  });
-
   describe('custom features', () => {
     const baseSnippet = `
       function withX() {

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

@@ -59,7 +59,7 @@ describe('withLinkedState', () => {
     );
   });
 
-  it('resolves to a normal state signal with automatic linkedSignal', () => {
+  it('adds state slice with computation function', () => {
     const snippet = `
       const UserStore = signalStore(
         { providedIn: 'root' },
@@ -78,7 +78,7 @@ describe('withLinkedState', () => {
     expectSnippet(snippet).toInfer('lastname', 'Signal<string>');
   });
 
-  it('resolves to a normal state signal with manual linkedSignal', () => {
+  it('adds state slice with explicit linkedSignal', () => {
     const snippet = `
       const UserStore = signalStore(
         { providedIn: 'root' },
@@ -100,7 +100,7 @@ describe('withLinkedState', () => {
     expectSnippet(snippet).toInfer('lastname', 'Signal<string>');
   });
 
-  it('sets stateSignals as DeepSignal for automatic linkedSignal', () => {
+  it('creates deep signals with computation functions', () => {
     const snippet = `
       const UserStore = signalStore(
         { providedIn: 'root' },
@@ -128,7 +128,7 @@ describe('withLinkedState', () => {
     );
   });
 
-  it('sets stateSignals as DeepSignal for manual linkedSignal', () => {
+  it('creates deep signals with explicit linked signals', () => {
     const snippet = `
       const UserStore = signalStore(
         { providedIn: 'root' },
@@ -163,18 +163,21 @@ describe('withLinkedState', () => {
         withLinkedState(({ foo }) => ({
           bar: () => foo(),
           baz: linkedSignal(() => foo()),
+          qux: signal({ x: 1 }),
         }))
       );
 
       const store = new Store();
 
       const bar = store.bar;
       const baz = store.baz;
+      const qux = store.qux;
     `;
 
     expectSnippet(snippet).toSucceed();
 
     expectSnippet(snippet).toInfer('bar', 'Signal<string>');
     expectSnippet(snippet).toInfer('baz', 'Signal<string>');
+    expectSnippet(snippet).toInfer('qux', 'DeepSignal<{ x: number; }>');
   });
 });