feat: release v20.0.0

# 🚀 Major Release: v20.0.0

## 📦 Dependencies & Infrastructure

### Core Dependencies
- **BREAKING**: Make `@ngrx/signals@20` a peer dependency
- Upgrade to NgRx 20, Angular 20, and Nx 21
- Update GitHub Actions to use Node 20

## 🔧 Bug Fixes

### Pagination Functions
Fixed critical issues in `withPagination` functions:
- `gotoPage`: Fixed page navigation logic
- `setPageSize`: Corrected page size calculation
- `nextPage`: Fixed next page navigation
- `previousPage`: Fixed previous page navigation  
- `firstPage`: Corrected first page navigation

## 🔄 Algorithm Improvements

### Storage Sync (IndexedDB)
- **BREAKING**: Changed algorithm in `withStorageSync` for `IndexedDB` to improve initial sync waiting behavior
- Enhanced synchronization reliability and performance
- Better handling of async storage operations

## ⚠️ Breaking Changes

### Immutable State
- **BREAKING**: `withImmutableState` no longer supports immutability checks for primitive root properties
- This is due to NgRx 20's new state structure where root properties are `WritableSignal` types
- Only object-type root properties can be frozen (immutability checks still work for nested objects)

## 🎯 Impact

This major release brings:
- Full compatibility with Angular 20 and NgRx 20
- Improved pagination functionality with fixed navigation
- Enhanced storage synchronization for better user experience
- Updated immutability behavior to align with modern NgRx patterns

## 🔗 Migration Guide

For users upgrading from v19:
1. Update Angular to v20 and NgRx to v20
2. Review any usage of `withImmutableState` with primitive root properties
3. Test pagination functionality with the fixed navigation functions
4. Verify IndexedDB storage sync behavior in your applications

Author: michael-small

.github/workflows/build.yml

@@ -16,13 +16,12 @@ jobs:
           version: 10
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
-          cache: "pnpm"
+          node-version: '20'
+          cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm run format:check
       - run: pnpm run lint:all
       - run: pnpm run test:all
       - run: pnpm run test:e2e
       - run: pnpm run build:all
       - run: ./integration-tests.sh
-

.github/workflows/deploy-docs.yml

@@ -24,7 +24,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install dependencies for toolkit

apps/demo/src/app/core/sidebar/sidebar.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -24,12 +24,10 @@ import { map, shareReplay } from 'rxjs';
   styleUrls: ['./sidebar.component.css'],
 })
 export class SidebarComponent {
+  private breakpointObserver = inject(BreakpointObserver);
+
   isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map((result) => result.matches),
     shareReplay(),
   );
-
-  constructor(
-    @Inject(BreakpointObserver) private breakpointObserver: BreakpointObserver,
-  ) {}
 }

apps/demo/src/app/shared/flight.service.ts

@@ -1,8 +1,8 @@
 import { DataService } from '@angular-architects/ngrx-toolkit';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { EntityId } from '@ngrx/signals/entities';
-import { Observable, firstValueFrom } from 'rxjs';
+import { firstValueFrom, Observable } from 'rxjs';
 import { Flight } from './flight';
 
 export type FlightFilter = {
@@ -16,7 +16,7 @@ export type FlightFilter = {
 export class FlightService implements DataService<Flight, FlightFilter> {
   baseUrl = `https://demo.angulararchitects.io/api`;
 
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
 
   loadById(id: EntityId): Promise<Flight> {
     return firstValueFrom(this.findById('' + id));

apps/demo/src/test-setup.ts

@@ -1,8 +1,6 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

jest.config.ts

@@ -1,5 +1,6 @@
 import { getJestProjectsAsync } from '@nx/jest';
+import type { Config } from 'jest';
 
-export default async () => ({
+export default async (): Promise<Config> => ({
   projects: await getJestProjectsAsync(),
 });

libs/ngrx-toolkit/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "19.1.0",
+  "version": "20.0.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@angular/core": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@ngrx/signals": "^19.1.0",
-    "@ngrx/store": "^19.1.0",
+    "@angular/core": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@ngrx/signals": "^20.0.0",
+    "@ngrx/store": "^20.0.0",
     "rxjs": "^7.0.0"
   },
   "peerDependenciesMeta": {

libs/ngrx-toolkit/src/lib/devtools/tests/action-name.spec.ts

@@ -40,7 +40,7 @@ describe('updateState', () => {
     store.setName('i4');
     TestBed.flushEffects();
 
-    expect(sendSpy).lastCalledWith(
+    expect(sendSpy).toHaveBeenLastCalledWith(
       { type: 'Set Name' },
       { shop: { name: 'i4' } },
     );

libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts

@@ -19,7 +19,7 @@ describe('connect & send', () => {
   it('should not throw if it runs on the server', () => {
     setupExtensions(true, false);
     const Store = signalStore({ providedIn: 'root' }, withDevtools('flight'));
-    expect(() => TestBed.inject(Store)).not.toThrowError();
+    expect(() => TestBed.inject(Store)).not.toThrow();
   });
 
   it('should only send when store is initialized', () => {

libs/ngrx-toolkit/src/lib/devtools/tests/naming.spec.ts

@@ -30,7 +30,7 @@ describe('withDevtools / renaming', () => {
 
     TestBed.flushEffects();
 
-    expect(sendSpy).lastCalledWith(
+    expect(sendSpy).toHaveBeenLastCalledWith(
       { type: 'Store Update' },
       {
         flights: { airline: 'Lufthansa' },