feat(component-store): add selectSignal signature that combines provi…

…ded signals (#3863)

modules/component-store/spec/component-store.spec.ts

@@ -1381,6 +1381,62 @@ describe('Component Store', () => {
  });
  });
 
+ describe('selectSignal', () => {
+ it('creates a signal from the provided state projector function', () => {
+ const store = new ComponentStore<{ foo: string }>({ foo: 'bar' });
+ let projectorExecutionCount = 0;
+
+ const foo = store.selectSignal((state) => {
+ projectorExecutionCount++;
+ return state.foo;
+ });
+
+ expect(foo()).toBe('bar');
+
+ foo();
+ store.patchState({ foo: 'baz' });
+ foo();
+
+ expect(foo()).toBe('baz');
+ expect(projectorExecutionCount).toBe(2);
+ });
+
+ it('creates a signal by combining provided signals', () => {
+ const store = new ComponentStore<{ x: number; y: number; z: number }>({
+ x: 1,
+ y: 10,
+ z: 100,
+ });
+ let projectorExecutionCount = 0;
+
+ const x = store.selectSignal((s) => s.x);
+ const y = store.selectSignal((s) => s.y);
+ const xPlusY = store.selectSignal(x, y, (x, y) => {
+ projectorExecutionCount++;
+ return x + y;
+ });
+
+ expect(xPlusY()).toBe(11);
+
+ // projector should not be executed
+ store.patchState({ z: 1000 });
+ xPlusY();
+
+ store.patchState({ x: 10 });
+ xPlusY();
+
+ expect(xPlusY()).toBe(20);
+ expect(projectorExecutionCount).toBe(2);
+ });
+
+ it('throws an error when the signal is read before the state initialization', () => {
+ const store = new ComponentStore<{ foo: string }>();
+ const foo = store.selectSignal((s) => s.foo);
+
+ expect(() => foo()).toThrowError();
+ });
+ });
+
  describe('effect', () => {
  let componentStore: ComponentStore<object>;
 

modules/component-store/src/component-store.ts

@@ -56,6 +56,14 @@ export type Projector<Selectors extends Observable<unknown>[], Result> = (
  ...args: SelectorResults<Selectors>
 ) => Result;
 
+type SignalsProjector<Signals extends Signal<unknown>[], Result> = (
+ ...values: {
+ [Key in keyof Signals]: Signals[Key] extends Signal<infer Value>
+ ? Value
+ : never;
+ }
+) => Result;
+
 @Injectable()
 export class ComponentStore<T extends object> implements OnDestroy {
  // Should be used only in ngOnDestroy.
@@ -67,10 +75,12 @@ export class ComponentStore<T extends object> implements OnDestroy {
  private isInitialized = false;
  // Needs to be after destroy$ is declared because it's used in select.
  readonly state$: Observable<T> = this.select((s) => s);
- private ɵhasProvider = false;
-
  // Signal of state$
- readonly state: Signal<T>;
+ readonly state: Signal<T> = toSignal(
+ this.state$.pipe(takeUntil(this.destroy$)),
+ { requireSync: false, manualCleanup: true }
+ );
+ private ɵhasProvider = false;
 
  constructor(@Optional() @Inject(INITIAL_STATE_TOKEN) defaultState?: T) {
  // State can be initialized either through constructor or setState.
@@ -79,10 +89,6 @@ export class ComponentStore<T extends object> implements OnDestroy {
  }
 
  this.checkProviderForHooks();
- this.state = toSignal(this.stateSubject$.pipe(takeUntil(this.destroy$)), {
- requireSync: false,
- manualCleanup: true,
- });
  }
 
  /** Completes all relevant Observable streams. */
@@ -293,12 +299,40 @@ export class ComponentStore<T extends object> implements OnDestroy {
  }
 
  /**
- * Returns a signal of the provided projector function.
- *
- * @param projector projector function
+ * Creates a signal from the provided state projector function.
+ */
+ selectSignal<Result>(projector: (state: T) => Result): Signal<Result>;
+ /**
+ * Creates a signal by combining provided signals.
  */
- selectSignal<K>(projector: (state: T) => K): Signal<K> {
- return computed(() => projector(this.state()));
+ selectSignal<Signals extends Signal<unknown>[], Result>(
+ ...signalsWithProjector: [
+ ...selectors: Signals,
+ projector: SignalsProjector<Signals, Result>
+ ]
+ ): Signal<Result>;
+ selectSignal(
+ ...args:
+ | [(state: T) => unknown]
+ | [
+ ...signals: Signal<unknown>[],
+ projector: (...values: unknown[]) => unknown
+ ]
+ ): Signal<unknown> {
+ if (args.length === 1) {
+ const projector = args[0] as (state: T) => unknown;
+ return computed(() => projector(this.state()));
+ }
+
+ const signals = args.slice(0, -1) as Signal<unknown>[];
+ const projector = args[args.length - 1] as (
+ ...values: unknown[]
+ ) => unknown;
+
+ return computed(() => {
+ const values = signals.map((signal) => signal());
+ return projector(...values);
+ });
  }
 
  /**