feat(signals): rename signals with computed when defining custom features with input

Closes #4391

Author: markostanimirovic

modules/signals/entities/src/models.ts

@@ -13,12 +13,12 @@ export type NamedEntityState<Entity, Collection extends string> = {
   [K in keyof EntityState<Entity> as `${Collection}${Capitalize<K>}`]: EntityState<Entity>[K];
 };
 
-export type EntitySignals<Entity> = {
+export type EntityComputed<Entity> = {
   entities: Signal<Entity[]>;
 };
 
-export type NamedEntitySignals<Entity, Collection extends string> = {
-  [K in keyof EntitySignals<Entity> as `${Collection}${Capitalize<K>}`]: EntitySignals<Entity>[K];
+export type NamedEntityComputed<Entity, Collection extends string> = {
+  [K in keyof EntityComputed<Entity> as `${Collection}${Capitalize<K>}`]: EntityComputed<Entity>[K];
 };
 
 export type EntityIdProps<Entity> = {

modules/signals/entities/src/with-entities.ts

@@ -6,41 +6,41 @@ import {
   withState,
 } from '@ngrx/signals';
 import {
+  EntityComputed,
   EntityId,
   EntityMap,
-  EntitySignals,
   EntityState,
-  NamedEntitySignals,
+  NamedEntityComputed,
   NamedEntityState,
 } from './models';
 import { getEntityStateKeys } from './helpers';
 
 export function withEntities<Entity>(): SignalStoreFeature<
-  { state: {}; signals: {}; methods: {} },
+  { state: {}; computed: {}; methods: {} },
   {
     state: EntityState<Entity>;
-    signals: EntitySignals<Entity>;
+    computed: EntityComputed<Entity>;
     methods: {};
   }
 >;
 export function withEntities<Entity, Collection extends string>(config: {
   entity: Entity;
   collection: Collection;
 }): SignalStoreFeature<
-  { state: {}; signals: {}; methods: {} },
+  { state: {}; computed: {}; methods: {} },
   {
     state: NamedEntityState<Entity, Collection>;
-    signals: NamedEntitySignals<Entity, Collection>;
+    computed: NamedEntityComputed<Entity, Collection>;
     methods: {};
   }
 >;
 export function withEntities<Entity>(config: {
   entity: Entity;
 }): SignalStoreFeature<
-  { state: {}; signals: {}; methods: {} },
+  { state: {}; computed: {}; methods: {} },
   {
     state: EntityState<Entity>;
-    signals: EntitySignals<Entity>;
+    computed: EntityComputed<Entity>;
     methods: {};
   }
 >;

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

@@ -34,7 +34,7 @@ describe('signalStoreFeature', () => {
     return signalStoreFeature(
       {
         state: type<{ foo: string }>(),
-        signals: type<{ s: Signal<number> }>(),
+        computed: type<{ s: Signal<number> }>(),
       },
       withState({ foo1: 1 }),
       withState({ foo2: 2 })

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

@@ -653,7 +653,7 @@ describe('signalStore', () => {
         return signalStoreFeature(
           {
             state: type<{ q1: string }>(),
-            signals: type<{ sig: Signal<boolean> }>(),
+            computed: type<{ sig: Signal<boolean> }>(),
           },
           withState({ y: initialY }),
           withComputed(() => ({ sigY: computed(() => 'sigY') })),
@@ -739,7 +739,7 @@ describe('signalStore', () => {
         );
 
         const feature = signalStoreFeature(
-          { signals: type<{ sig: Signal<boolean> }>() },
+          { computed: type<{ sig: Signal<boolean> }>() },
           withX(),
           withState({ q1: 'q1' }),
           withY(),
@@ -785,7 +785,7 @@ describe('signalStore', () => {
         ${baseSnippet}
 
         const feature = signalStoreFeature(
-          { signals: type<{ sig: Signal<boolean> }>() },
+          { computed: type<{ sig: Signal<boolean> }>() },
           withComputed(() => ({ sig: computed(() => 1) })),
           withX(),
           withState({ q1: 'q1' }),
@@ -817,7 +817,7 @@ describe('signalStore', () => {
         );
 
         const feature = signalStoreFeature(
-          { signals: type<{ sig: Signal<boolean> }>() },
+          { computed: type<{ sig: Signal<boolean> }>() },
           withComputed(() => ({ sig: computed(() => 1) })),
           withX(),
           withState({ q1: 'q1' }),
@@ -860,7 +860,7 @@ describe('signalStore', () => {
               entities: Entity[];
               selectedEntity: Entity | null;
             };
-            signals: {
+            computed: {
               selectedEntity2: Signal<Entity | undefined>;
             };
             methods: {

modules/signals/spec/with-computed.spec.ts

@@ -11,11 +11,11 @@ describe('withComputed', () => {
 
     const store = withComputed(() => ({ s1, s2 }))(initialStore);
 
-    expect(Object.keys(store.signals)).toEqual(['s1', 's2']);
-    expect(Object.keys(initialStore.signals)).toEqual([]);
+    expect(Object.keys(store.computedSignals)).toEqual(['s1', 's2']);
+    expect(Object.keys(initialStore.computedSignals)).toEqual([]);
 
-    expect(store.signals.s1).toBe(s1);
-    expect(store.signals.s2).toBe(s2);
+    expect(store.computedSignals.s1).toBe(s1);
+    expect(store.computedSignals.s2).toBe(s2);
   });
 
   it('overrides previously defined slices, signals, and methods with the same name', () => {
@@ -42,10 +42,16 @@ describe('withComputed', () => {
       s3: signal({ s: 3 }).asReadonly(),
     }))(initialStore);
 
-    expect(Object.keys(store.signals)).toEqual(['s1', 's2', 'p1', 'm1', 's3']);
-    expect(store.signals.s2).toBe(s2);
+    expect(Object.keys(store.computedSignals)).toEqual([
+      's1',
+      's2',
+      'p1',
+      'm1',
+      's3',
+    ]);
+    expect(store.computedSignals.s2).toBe(s2);
 
-    expect(Object.keys(store.slices)).toEqual(['p2']);
+    expect(Object.keys(store.stateSignals)).toEqual(['p2']);
     expect(Object.keys(store.methods)).toEqual(['m2']);
   });
 });

modules/signals/spec/with-methods.spec.ts

@@ -45,7 +45,7 @@ describe('withMethods', () => {
     expect(Object.keys(store.methods)).toEqual(['m1', 'm2', 'p2', 's1', 'm3']);
     expect(store.methods.m2).toBe(m2);
 
-    expect(Object.keys(store.slices)).toEqual(['p1']);
-    expect(Object.keys(store.signals)).toEqual(['s2']);
+    expect(Object.keys(store.stateSignals)).toEqual(['p1']);
+    expect(Object.keys(store.computedSignals)).toEqual(['s2']);
   });
 });

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

@@ -17,8 +17,8 @@ describe('withState', () => {
     expect(state).toEqual({ foo: 'bar', x: { y: 'z' } });
     expect(initialState).toEqual({});
 
-    expect(Object.keys(store.slices)).toEqual(['foo', 'x']);
-    expect(Object.keys(initialStore.slices)).toEqual([]);
+    expect(Object.keys(store.stateSignals)).toEqual(['foo', 'x']);
+    expect(Object.keys(initialStore.stateSignals)).toEqual([]);
   });
 
   it('creates deep signals for each state slice', () => {
@@ -29,14 +29,14 @@ describe('withState', () => {
       x: { y: 'z' },
     })(initialStore);
 
-    expect(store.slices.foo()).toBe('bar');
-    expect(isSignal(store.slices.foo)).toBe(true);
+    expect(store.stateSignals.foo()).toBe('bar');
+    expect(isSignal(store.stateSignals.foo)).toBe(true);
 
-    expect(store.slices.x()).toEqual({ y: 'z' });
-    expect(isSignal(store.slices.x)).toBe(true);
+    expect(store.stateSignals.x()).toEqual({ y: 'z' });
+    expect(isSignal(store.stateSignals.x)).toBe(true);
 
-    expect(store.slices.x.y()).toBe('z');
-    expect(isSignal(store.slices.x.y)).toBe(true);
+    expect(store.stateSignals.x.y()).toBe('z');
+    expect(isSignal(store.stateSignals.x.y)).toBe(true);
   });
 
   it('patches state signal and creates deep signals for state slices provided via factory', () => {
@@ -49,9 +49,9 @@ describe('withState', () => {
     const state = store[STATE_SIGNAL]();
 
     expect(state).toEqual({ foo: 'bar', x: { y: 'z' } });
-    expect(store.slices.foo()).toBe('bar');
-    expect(store.slices.x()).toEqual({ y: 'z' });
-    expect(store.slices.x.y()).toBe('z');
+    expect(store.stateSignals.foo()).toBe('bar');
+    expect(store.stateSignals.x()).toEqual({ y: 'z' });
+    expect(store.stateSignals.x.y()).toBe('z');
   });
 
   it('overrides previously defined state slices, signals, and methods with the same name', () => {
@@ -77,10 +77,16 @@ describe('withState', () => {
       p3: 'p3',
     }))(initialStore);
 
-    expect(Object.keys(store.slices)).toEqual(['p1', 'p2', 's2', 'm2', 'p3']);
-    expect(store.slices.p2()).toBe(100);
+    expect(Object.keys(store.stateSignals)).toEqual([
+      'p1',
+      'p2',
+      's2',
+      'm2',
+      'p3',
+    ]);
+    expect(store.stateSignals.p2()).toBe(100);
 
-    expect(Object.keys(store.signals)).toEqual(['s1']);
+    expect(Object.keys(store.computedSignals)).toEqual(['s1']);
     expect(Object.keys(store.methods)).toEqual(['m1']);
   });
 });

modules/signals/src/signal-store-models.ts

@@ -5,9 +5,7 @@ import { IsKnownRecord, Prettify } from './ts-helpers';
 
 export type SignalStoreConfig = { providedIn: 'root' };
 
-export type SignalStoreSlices<State> = IsKnownRecord<
-  Prettify<State>
-> extends true
+export type StateSignals<State> = IsKnownRecord<Prettify<State>> extends true
   ? {
       [Key in keyof State]: IsKnownRecord<State[Key]> extends true
         ? DeepSignal<State[Key]>
@@ -17,8 +15,8 @@ export type SignalStoreSlices<State> = IsKnownRecord<
 
 export type SignalStoreProps<FeatureResult extends SignalStoreFeatureResult> =
   Prettify<
-    SignalStoreSlices<FeatureResult['state']> &
-      FeatureResult['signals'] &
+    StateSignals<FeatureResult['state']> &
+      FeatureResult['computed'] &
       FeatureResult['methods']
   >;
 
@@ -33,29 +31,29 @@ export type SignalStoreHooks = {
 
 export type InnerSignalStore<
   State extends object = object,
-  Signals extends SignalsDictionary = SignalsDictionary,
+  ComputedSignals extends SignalsDictionary = SignalsDictionary,
   Methods extends MethodsDictionary = MethodsDictionary
 > = {
-  slices: SignalStoreSlices<State>;
-  signals: Signals;
+  stateSignals: StateSignals<State>;
+  computedSignals: ComputedSignals;
   methods: Methods;
   hooks: SignalStoreHooks;
 } & StateSignal<State>;
 
 export type SignalStoreFeatureResult = {
   state: object;
-  signals: SignalsDictionary;
+  computed: SignalsDictionary;
   methods: MethodsDictionary;
 };
 
-export type EmptyFeatureResult = { state: {}; signals: {}; methods: {} };
+export type EmptyFeatureResult = { state: {}; computed: {}; methods: {} };
 
 export type SignalStoreFeature<
   Input extends SignalStoreFeatureResult = SignalStoreFeatureResult,
   Output extends SignalStoreFeatureResult = SignalStoreFeatureResult
 > = (
-  store: InnerSignalStore<Input['state'], Input['signals'], Input['methods']>
-) => InnerSignalStore<Output['state'], Output['signals'], Output['methods']>;
+  store: InnerSignalStore<Input['state'], Input['computed'], Input['methods']>
+) => InnerSignalStore<Output['state'], Output['computed'], Output['methods']>;
 
 export type MergeFeatureResults<
   FeatureResults extends SignalStoreFeatureResult[]
@@ -78,14 +76,14 @@ export type MergeFeatureResults<
 
 type FeatureResultKeys<FeatureResult extends SignalStoreFeatureResult> =
   | keyof FeatureResult['state']
-  | keyof FeatureResult['signals']
+  | keyof FeatureResult['computed']
   | keyof FeatureResult['methods'];
 
 type MergeTwoFeatureResults<
   First extends SignalStoreFeatureResult,
   Second extends SignalStoreFeatureResult
 > = {
   state: Omit<First['state'], FeatureResultKeys<Second>>;
-  signals: Omit<First['signals'], FeatureResultKeys<Second>>;
+  computed: Omit<First['computed'], FeatureResultKeys<Second>>;
   methods: Omit<First['methods'], FeatureResultKeys<Second>>;
 } & Second;

modules/signals/src/signal-store.ts

@@ -308,8 +308,8 @@ export function signalStore(
         (store, feature) => feature(store),
         getInitialInnerStore()
       );
-      const { slices, signals, methods, hooks } = innerStore;
-      const props = { ...slices, ...signals, ...methods };
+      const { stateSignals, computedSignals, methods, hooks } = innerStore;
+      const props = { ...stateSignals, ...computedSignals, ...methods };
 
       (this as any)[STATE_SIGNAL] = innerStore[STATE_SIGNAL];
 
@@ -335,8 +335,8 @@ export function signalStore(
 export function getInitialInnerStore(): InnerSignalStore {
   return {
     [STATE_SIGNAL]: signal({}),
-    slices: {},
-    signals: {},
+    stateSignals: {},
+    computedSignals: {},
     methods: {},
     hooks: {},
   };

modules/signals/src/with-computed.ts

@@ -5,29 +5,35 @@ import {
   SignalsDictionary,
   SignalStoreFeature,
   SignalStoreFeatureResult,
-  SignalStoreSlices,
+  StateSignals,
 } from './signal-store-models';
 import { Prettify } from './ts-helpers';
 
 export function withComputed<
   Input extends SignalStoreFeatureResult,
-  Signals extends SignalsDictionary
+  ComputedSignals extends SignalsDictionary
 >(
   signalsFactory: (
-    store: Prettify<SignalStoreSlices<Input['state']> & Input['signals']>
-  ) => Signals
-): SignalStoreFeature<Input, EmptyFeatureResult & { signals: Signals }> {
+    store: Prettify<StateSignals<Input['state']> & Input['computed']>
+  ) => ComputedSignals
+): SignalStoreFeature<
+  Input,
+  EmptyFeatureResult & { computed: ComputedSignals }
+> {
   return (store) => {
-    const signals = signalsFactory({ ...store.slices, ...store.signals });
-    const signalsKeys = Object.keys(signals);
-    const slices = excludeKeys(store.slices, signalsKeys);
-    const methods = excludeKeys(store.methods, signalsKeys);
+    const computedSignals = signalsFactory({
+      ...store.stateSignals,
+      ...store.computedSignals,
+    });
+    const computedSignalsKeys = Object.keys(computedSignals);
+    const stateSignals = excludeKeys(store.stateSignals, computedSignalsKeys);
+    const methods = excludeKeys(store.methods, computedSignalsKeys);
 
     return {
       ...store,
-      slices,
-      signals: { ...store.signals, ...signals },
+      stateSignals,
+      computedSignals: { ...store.computedSignals, ...computedSignals },
       methods,
-    } as InnerSignalStore<Record<string, unknown>, Signals>;
+    } as InnerSignalStore<Record<string, unknown>, ComputedSignals>;
   };
 }