NgRx Signals v18 stable upgrade + revamp stores

Author: jits

TEMPLATE_VERSION

@@ -1 +1 @@
-v1.0.0-alpha.1
+v1.0.0-alpha.2

app/eslint.config.js

@@ -3,6 +3,7 @@ const eslint = require("@eslint/js");
 const tseslint = require("typescript-eslint");
 const angular = require("angular-eslint");
 const eslintConfigPrettier = require("eslint-config-prettier");
+const ngrx = require("@ngrx/eslint-plugin/v9");
 
 module.exports = tseslint.config(
   {
@@ -13,6 +14,8 @@ module.exports = tseslint.config(
       ...tseslint.configs.stylisticTypeChecked,
       ...angular.configs.tsRecommended,
       eslintConfigPrettier,
+      ...ngrx.configs.operators,
+      ...ngrx.configs.signals,
     ],
     languageOptions: {
       parserOptions: {

app/package.json

@@ -19,54 +19,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "18.1.0",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/forms": "^18.1.0",
-    "@angular/material": "18.1.0",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/platform-server": "^18.1.0",
-    "@angular/router": "^18.1.0",
-    "@angular/service-worker": "^18.1.0",
-    "@angular/ssr": "^18.1.0",
-    "@ngrx/operators": "^18.0.1",
-    "@ngrx/signals": "^18.0.0-rc.2",
+    "@angular/animations": "^18.1.3",
+    "@angular/cdk": "18.1.2",
+    "@angular/common": "^18.1.3",
+    "@angular/compiler": "^18.1.3",
+    "@angular/core": "^18.1.3",
+    "@angular/forms": "^18.1.3",
+    "@angular/material": "18.1.2",
+    "@angular/platform-browser": "^18.1.3",
+    "@angular/platform-browser-dynamic": "^18.1.3",
+    "@angular/platform-server": "^18.1.3",
+    "@angular/router": "^18.1.3",
+    "@angular/service-worker": "^18.1.3",
+    "@angular/ssr": "^18.1.3",
+    "@ngrx/operators": "^18.0.2",
+    "@ngrx/signals": "^18.0.2",
     "consola": "^3.2.3",
     "express": "^4.19.2",
-    "firebase": "^10.12.3",
+    "firebase": "^10.12.4",
     "ngxtension": "^4.0.0",
     "rxfire": "^6.0.6-canary.5cfad21",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "type-fest": "^4.22.0",
-    "zone.js": "~0.14.5"
+    "type-fest": "^4.23.0",
+    "zone.js": "~0.14.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.0",
-    "@angular/cli": "^18.1.0",
-    "@angular/compiler-cli": "^18.1.0",
+    "@angular-devkit/build-angular": "^18.1.3",
+    "@angular/cli": "^18.1.3",
+    "@angular/compiler-cli": "^18.1.3",
+    "@ngrx/eslint-plugin": "^18.0.2",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^20.14.11",
+    "@types/node": "^22.0.2",
     "angular-eslint": "^18.1.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.7.0",
+    "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
-    "jasmine-core": "~5.1.2",
-    "karma": "~6.4.3",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-mocks": "^14.12.2",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.40",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.4.6",
-    "typescript": "~5.5.3",
-    "typescript-eslint": "^8.0.0-alpha.44"
+    "tailwindcss": "^3.4.7",
+    "typescript": "~5.5.4",
+    "typescript-eslint": "^8.0.0"
   }
 }

app/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { Config } from '@app-shared/models';
 import { MockBuilder, MockInstance, ngMocks } from 'ng-mocks';
 import { of } from 'rxjs';
-import { ConfigStore } from './config.store';
+import { ConfigStore, ConfigStoreInstanceType } from './config.store';
 import { ConfigService } from './db/config.service';
 
 describe('ConfigStore', () => {
@@ -13,7 +13,7 @@ describe('ConfigStore', () => {
     const mockConfig: Config = { categories: ['test'] };
     MockInstance(ConfigService, 'getConfig$', () => of(mockConfig));
 
-    const store = ngMocks.get(ConfigStore);
+    const store = ngMocks.get<ConfigStoreInstanceType>(ConfigStore);
     expect(store).toBeTruthy();
     expect(store.status()).toEqual('connected');
     expect(store.categories()).toEqual(['test']);
@@ -23,7 +23,7 @@ describe('ConfigStore', () => {
     const mockConfig: Config = { categories: ['test'] };
     MockInstance(ConfigService, 'getConfig$', () => of(mockConfig));
 
-    const store = ngMocks.get(ConfigStore);
+    const store = ngMocks.get<ConfigStoreInstanceType>(ConfigStore);
     store.manageStream('disconnect');
     expect(store.status()).toEqual('disconnected');
     expect(store.categories()).toEqual([]);

app/src/app/logbook/data/config.store.spec.ts

@@ -1,4 +1,4 @@
-import { Injectable, effect, inject } from '@angular/core';
+import { effect, inject } from '@angular/core';
 import { createLogger } from '@app-shared/logger';
 import { Config } from '@app-shared/models';
 import { tapResponse } from '@ngrx/operators';
@@ -48,7 +48,9 @@ const initialState: ConfigState = {
 
 const logger = createLogger('ConfigStore');
 
-const _ConfigStore = signalStore(
+export type ConfigStoreInstanceType = InstanceType<typeof ConfigStore>;
+
+export const ConfigStore = signalStore(
   withState<ConfigState>(initialState),
   withMethods((store) => {
     const configService = inject(ConfigService);
@@ -118,6 +120,3 @@ const _ConfigStore = signalStore(
     },
   }),
 );
-
-@Injectable()
-export class ConfigStore extends _ConfigStore {}

app/src/app/logbook/data/config.store.ts

@@ -1,15 +1,15 @@
 import { AuthStore } from '@app-shared/auth/data/auth.store';
 import { MockBuilder, MockInstance, ngMocks } from 'ng-mocks';
 import { EntriesService } from './db/entries.service';
-import { EntriesUpdateStore } from './entries-update.store';
+import { EntriesUpdateStore, EntriesUpdateStoreInstanceType } from './entries-update.store';
 
 describe('EntriesUpdateStore', () => {
   MockInstance.scope();
 
   beforeEach(() => MockBuilder(EntriesUpdateStore, null).mock(AuthStore).mock(EntriesService));
 
   it('should create', () => {
-    const store = ngMocks.get(EntriesUpdateStore);
+    const store = ngMocks.get<EntriesUpdateStoreInstanceType>(EntriesUpdateStore);
     expect(store).toBeTruthy();
   });
 });

app/src/app/logbook/data/entries-update.store.spec.ts

@@ -1,4 +1,4 @@
-import { Injectable, effect, inject } from '@angular/core';
+import { effect, inject } from '@angular/core';
 import { AuthStore } from '@app-shared/auth/data/auth.store';
 import { createLogger } from '@app-shared/logger';
 import { NewOrUpdatedEntryInput } from '@app-shared/models';
@@ -27,7 +27,9 @@ const initialState: EntriesUpdateState = {
 
 const logger = createLogger('EntriesUpdateStore');
 
-const _EntriesUpdateStore = signalStore(
+export type EntriesUpdateStoreInstanceType = InstanceType<typeof EntriesUpdateStore>;
+
+export const EntriesUpdateStore = signalStore(
   withState(initialState),
   withMethods((store) => {
     const authStore = inject(AuthStore);
@@ -123,6 +125,3 @@ const _EntriesUpdateStore = signalStore(
     },
   }),
 );
-
-@Injectable()
-export class EntriesUpdateStore extends _EntriesUpdateStore {}

app/src/app/logbook/data/entries-update.store.ts

@@ -2,7 +2,7 @@ import { AuthStore } from '@app-shared/auth/data/auth.store';
 import { MockBuilder, MockInstance, ngMocks } from 'ng-mocks';
 import { of } from 'rxjs';
 import { EntriesService } from './db/entries.service';
-import { EntriesStore } from './entries.store';
+import { EntriesStore, EntriesStoreInstanceType } from './entries.store';
 
 describe('EntriesStore', () => {
   MockInstance.scope();
@@ -13,7 +13,7 @@ describe('EntriesStore', () => {
     MockInstance(AuthStore, 'user$', of(null));
     MockInstance(EntriesService, 'getEntryDocs$', () => of([]));
 
-    const store = ngMocks.get(EntriesStore);
+    const store = ngMocks.get<EntriesStoreInstanceType>(EntriesStore);
     expect(store).toBeTruthy();
   });
 });