refactor: revert signal changes

integration/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="todo-list">
   <div>
     <h3>Reactive Form</h3>
-    <p>{{ injected() }}</p>
+    <p>{{ injected$ | async }}</p>
     <form [formGroup]="pizzaForm" novalidate (ngSubmit)="onSubmit()" ngxsForm="todos.pizza">
       Toppings: <input type="text" formControlName="toppings" /> <br />
       Crust <input type="text" formControlName="crust" /> <br />
@@ -23,10 +23,10 @@ <h3>Todo Form</h3>
     <input placeholder="New Todo" #text /> <button (click)="addTodo(text.value)">Add</button>
   </div>
   <ul>
-    <li class="todo" *ngFor="let todo of todos(); let i = index">
+    <li class="todo" *ngFor="let todo of todos$ | async; let i = index">
       {{ todo }} <button (click)="removeTodo(i)">🗑</button>
     </li>
-    <li *ngFor="let todo of pandas()">🐼</li>
+    <li *ngFor="let todo of pandas$ | async">🐼</li>
   </ul>
 
   <div class="menu">

integration/app/app.component.spec.ts

@@ -1,5 +1,6 @@
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { take } from 'rxjs/operators';
 import { Store, provideStore } from '@ngxs/store';
 import { withNgxsFormPlugin } from '@ngxs/form-plugin';
 
@@ -37,38 +38,49 @@ describe('AppComponent', () => {
     component.addTodo('Get Milk');
     component.addTodo('Clean Bathroom');
 
-    const state: Todo[] = component.todos();
-    expect(state.length).toBe(2);
+    component.todos$.subscribe((state: Todo[]) => {
+      expect(state.length).toBe(2);
+    });
   });
 
   it('should remove a todo', () => {
     component.addTodo('Get Milk');
     component.addTodo('Clean Bathroom');
     component.removeTodo(1);
 
-    const state: Todo[] = component.todos();
-    expect(state.length).toBe(1);
-    expect(state[0]).toBe('Get Milk');
+    component.todos$.subscribe((state: Todo[]) => {
+      expect(state.length).toBe(1);
+      expect(state[0]).toBe('Get Milk');
+    });
   });
 
   it('should set toppings using form control', fakeAsync(async () => {
-    const ngxsFormDebounce = 100;
-    const { pizza } = component;
-
     fixture.detectChanges();
     await fixture.whenStable();
 
     component.pizzaForm.patchValue({ toppings: 'oli' });
-    tick(ngxsFormDebounce);
+    tick(200);
+    let flag = false;
 
-    expect(pizza().model.toppings).toBe('oli');
-    expect(pizza().model.crust).toBe('thin');
+    component.pizza$.pipe(take(1)).subscribe((pizza: Pizza) => {
+      flag = true;
+      expect(pizza.model.toppings).toBe('oli');
+      expect(pizza.model.crust).toBe('thin');
+    });
+
+    expect(flag).toBe(true);
 
     component.pizzaForm.patchValue({ toppings: 'olives', crust: 'thick' });
-    tick(ngxsFormDebounce);
+    tick(200);
+    flag = false;
 
-    expect(pizza().model.toppings).toBe('olives');
-    expect(pizza().model.crust).toBe('thick');
+    component.pizza$.pipe(take(1)).subscribe((pizza: Pizza) => {
+      flag = true;
+      expect(pizza.model.toppings).toBe('olives');
+      expect(pizza.model.crust).toBe('thick');
+    });
+
+    expect(flag).toBe(true);
   }));
 
   it('should set toppings prefix', fakeAsync(async () => {
@@ -78,20 +90,30 @@ describe('AppComponent', () => {
     component.pizzaForm.patchValue({ toppings: 'cheese' });
     tick(100);
     component.onPrefix();
+    let flag = false;
     tick(100);
 
-    const pizza: Pizza = component.pizza();
-    expect(pizza.model).toBeDefined();
-    expect(pizza.model.toppings).toBe('Mr. cheese');
-    expect(pizza.model.crust).toBe('thin');
+    component.pizza$.pipe(take(1)).subscribe((pizza: Pizza) => {
+      flag = true;
+      expect(pizza.model).toBeDefined();
+      expect(pizza.model.toppings).toBe('Mr. cheese');
+      expect(pizza.model.crust).toBe('thin');
+    });
+
+    expect(flag).toBe(true);
   }));
 
   it('should load data in pizza form', () => {
     component.onLoadData();
+    let flag = false;
+
+    component.pizza$.pipe(take(1)).subscribe((pizza: Pizza) => {
+      flag = true;
+      expect(pizza.model.toppings).toBe('pineapple');
+      expect(pizza.model.crust).toBe('medium');
+      expect(pizza.model.extras).toEqual([false, false, true]);
+    });
 
-    const pizza: Pizza = component.pizza();
-    expect(pizza.model.toppings).toBe('pineapple');
-    expect(pizza.model.crust).toBe('medium');
-    expect(pizza.model.extras).toEqual([false, false, true]);
+    expect(flag).toBe(true);
   });
 });

integration/app/app.component.ts

@@ -5,11 +5,12 @@ import {
   FormsModule,
   ReactiveFormsModule
 } from '@angular/forms';
-import { ChangeDetectionStrategy, Component, OnInit, Signal, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { Store } from '@ngxs/store';
 import { NgxsFormDirective } from '@ngxs/form-plugin';
+import { Observable } from 'rxjs';
 
 import { TodoState } from '@integration/store/todos/todo/todo.state';
 import { TodosState } from '@integration/store/todos/todos.state';
@@ -38,16 +39,12 @@ export class AppComponent implements OnInit {
   });
 
   greeting: string;
-  todos: Signal<Todo[]> = this._store.selectSignal(TodoState);
-  pandas: Signal<Todo[]> = this._store.selectSignal(TodoState.getPandas);
-  pizza: Signal<Pizza> = this._store.selectSignal(TodosState.getPizza);
-  injected: Signal<string> = this._store.selectSignal(TodosState.getInjected);
+  todos$: Observable<Todo[]> = this._store.select(TodoState);
+  pandas$: Observable<Todo[]> = this._store.select(TodoState.getPandas);
+  pizza$: Observable<Pizza> = this._store.select(TodosState.getPizza);
+  injected$: Observable<string> = this._store.select(TodosState.getInjected);
 
-  constructor(private _store: Store, private _fb: FormBuilder) {
-    effect(() => {
-      console.log('todos() signal: ', this.todos());
-    });
-  }
+  constructor(private _store: Store, private _fb: FormBuilder) {}
 
   get extras(): FormControl[] {
     const extras = this.pizzaForm.get('extras') as FormArray;

integration/app/app.config.ts

@@ -1,5 +1,6 @@
-import { APP_ID, ApplicationConfig } from '@angular/core';
+import { APP_ID } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/platform-browser';
 import { provideStore } from '@ngxs/store';
 import { withNgxsFormPlugin } from '@ngxs/form-plugin';
 import { withNgxsLoggerPlugin } from '@ngxs/logger-plugin';
@@ -41,7 +42,7 @@ export const appConfig: ApplicationConfig = {
       [TodosState, TodoState],
       { developmentMode: !environment.production, selectorOptions: {} },
       withNgxsFormPlugin(),
-      withNgxsLoggerPlugin({ logger: console, collapsed: false, disabled: false }),
+      withNgxsLoggerPlugin({ logger: console, collapsed: false, disabled: true }),
       withNgxsReduxDevtoolsPlugin({ disabled: environment.production }),
       withNgxsRouterPlugin(),
       withNgxsStoragePlugin({ key: [TODOS_STORAGE_KEY] })

integration/app/counter/counter.component.html

@@ -1 +1 @@
-{{ counter() | json }}
+{{ counter$ | async | json }}

integration/app/counter/counter.component.ts

@@ -1,14 +1,15 @@
-import { Component, OnInit, Signal } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { CounterStateChangeAction } from '@integration/counter/counter.actions';
 import { CounterState, CounterStateModel } from '@integration/counter/counter.state';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'counter',
   templateUrl: './counter.component.html'
 })
 export class CounterComponent implements OnInit {
-  counter: Signal<CounterStateModel> = this._store.selectSignal(CounterState);
+  counter$: Observable<CounterStateModel> = this._store.select(CounterState);
 
   constructor(private _store: Store) {}
 

integration/app/detail/detail.component.html

@@ -1 +1 @@
-{{ detail() | json }}
+{{ detail$ | async | json }}

integration/app/detail/detail.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
 
 import { DetailState } from '@integration/detail/detail.state';
 
@@ -8,7 +9,7 @@ import { DetailState } from '@integration/detail/detail.state';
   templateUrl: './detail.component.html'
 })
 export class DetailComponent {
-  detail = this._store.selectSignal(DetailState);
+  detail$: Observable<boolean> = this._store.select(DetailState);
 
   constructor(private _store: Store) {}
 }

integration/app/list/list.component.html

@@ -1,8 +1,8 @@
 <div>
-  {{ list() }},
-  {{ hello() }}
+  {{ list$ | async }},
+  {{ hello$ | async }}
 </div>
 
-<div *ngIf="router() as router">
+<div *ngIf="router$ | async as router">
   animals were resolved {{ router.root!.firstChild!.firstChild!.data.list }}
 </div>

integration/app/list/list.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { RouterState } from '@ngxs/router-plugin';
+import { Observable } from 'rxjs';
 
 import { ListState } from '@integration/list/list.state';
 
@@ -9,9 +10,9 @@ import { ListState } from '@integration/list/list.state';
   templateUrl: './list.component.html'
 })
 export class ListComponent {
-  list = this._store.selectSignal(ListState);
-  hello = this._store.selectSignal(ListState.getHello);
-  router = this._store.selectSignal(RouterState.state);
+  list$: Observable<string[]> = this._store.select(ListState);
+  hello$ = this._store.select(ListState.getHello);
+  router$ = this._store.select(RouterState.state);
 
   constructor(private _store: Store) {}
 }

packages/store/src/internal/state-stream.ts

@@ -1,5 +1,4 @@
-import { Injectable, OnDestroy, Signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { Injectable, OnDestroy } from '@angular/core';
 
 import { PlainObject } from '@ngxs/store/internals';
 
@@ -11,11 +10,6 @@ import { OrderedBehaviorSubject } from './custom-rxjs-subjects';
  */
 @Injectable({ providedIn: 'root' })
 export class StateStream extends OrderedBehaviorSubject<PlainObject> implements OnDestroy {
-  readonly state: Signal<PlainObject> = toSignal(this, {
-    manualCleanup: true,
-    requireSync: true
-  });
-
   constructor() {
     super({});
   }

packages/store/src/store.ts

@@ -1,13 +1,5 @@
 // tslint:disable:unified-signatures
-import {
-  CreateComputedOptions,
-  Inject,
-  Injectable,
-  Optional,
-  Signal,
-  Type,
-  computed
-} from '@angular/core';
+import { Inject, Injectable, Optional, Type } from '@angular/core';
 import { Observable, of, Subscription, throwError } from 'rxjs';
 import { catchError, distinctUntilChanged, map, shareReplay, take } from 'rxjs/operators';
 import { INITIAL_STATE_TOKEN, PlainObject } from '@ngxs/store/internals';
@@ -101,23 +93,6 @@ export class Store {
     return selectorFn(this._stateStream.getValue());
   }
 
-  /**
-   * Select a signal from the state.
-   */
-  selectSignal<T>(
-    selector: (state: any, ...states: any[]) => T,
-    options?: CreateComputedOptions<T>
-  ): Signal<T>;
-  selectSignal<T = any>(
-    selector: string | Type<any>,
-    options?: CreateComputedOptions<T>
-  ): Signal<T>;
-  selectSignal<T>(selector: StateToken<T>, options?: CreateComputedOptions<T>): Signal<T>;
-  selectSignal<T>(selector: any, options?: CreateComputedOptions<T>): Signal<T> {
-    const selectorFn = this.getStoreBoundSelectorFn(selector);
-    return computed<T>(() => selectorFn(this._stateStream.state()), options);
-  }
-
   /**
    * Allow the user to subscribe to the root of the state
    */

packages/store/tests/state-token.spec.ts

@@ -5,7 +5,7 @@ import { take } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
 describe('[TEST]: StateToken', () => {
-  describe('Simple use', function () {
+  describe('Simple use', function() {
     it('should successfully create a simple token', () => {
       const TODO_TOKEN = new StateToken<string>('todo');
       expect(TODO_TOKEN).toBeInstanceOf(StateToken);