feat: update to ngrx 18 and refactorings

- upgrade to ngrx18 (toolkit compatibility to rc-1 and rc2)
- switch from `signals` to `computed` for internal representation of computeds
- upgrade nx to 19
- clone internal ngrx types to avoid breaking the encapsulation
- remove SSR from demo app
- increase bundle budget for demo app
- remove test and eslint and only verify for build target in GitHub actions

Author: rainerhahnekamp

.github/workflows/build.yml

@@ -1,5 +1,11 @@
 name: Test
-on: [push]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -9,6 +15,6 @@ jobs:
         with:
           node-version: '18'
           cache: 'npm'
-      - run: npm ci
-      - run: npm run verify
+      - run: npm i
+      - run: npm run build:all
 

apps/demo/project.json

@@ -29,20 +29,15 @@
           "@angular/material/prebuilt-themes/deeppurple-amber.css",
           "apps/demo/src/styles.css"
         ],
-        "scripts": [],
-        "server": "apps/demo/src/main.server.ts",
-        "prerender": true,
-        "ssr": {
-          "entry": "apps/demo/server.ts"
-        }
+        "scripts": []
       },
       "configurations": {
         "production": {
           "budgets": [
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",
@@ -94,4 +89,4 @@
       }
     }
   }
-}
+}

apps/demo/server.ts

@@ -8,12 +8,9 @@ import { LayoutModule } from '@angular/cdk/layout';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideClientHydration(),
-    provideRouter(appRoutes,
-      withComponentInputBinding()),
+    provideRouter(appRoutes, withComponentInputBinding()),
     provideAnimations(),
     provideHttpClient(),
     importProvidersFrom(LayoutModule),
-
   ],
 };

apps/demo/src/app/app.config.server.ts

@@ -13,12 +13,12 @@ export const FlightBookingStore = signalStore(
   withCallState({
     collection: 'flight'
   }),
-  withEntities({ 
-    entity: type<Flight>(), 
+  withEntities({
+    entity: type<Flight>(),
     collection: 'flight'
   }),
   withDataService({
-    dataServiceType: FlightService, 
+    dataServiceType: FlightService,
     filter: { from: 'Paris', to: 'New York' },
     collection: 'flight'
   }),

apps/demo/src/app/app.config.ts

@@ -0,0 +1,54 @@
+import { filter, interval, Observable, pipe, switchMap, tap } from 'rxjs';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  type,
+  withHooks,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+interface Person {
+  firstname: string;
+  lastname: string;
+}
+
+function withEntityVersioner<Entity>() {
+  return signalStoreFeature(
+    { methods: type<{ loader: () => Observable<Entity[]> }>() },
+    withState({ version: 1, entities: new Array<Entity>() }),
+    withMethods((store) => {
+      return {
+        update: rxMethod<unknown>(
+          pipe(
+            switchMap(() => store.loader()),
+            filter((entities) => entities !== store.entities()),
+            tap((entities) =>
+              patchState(store, (value) => ({
+                entities,
+                version: value.version + 1,
+              }))
+            )
+          )
+        ),
+      };
+    }),
+    withHooks((store) => ({ onInit: () => store.update(interval(1000)) }))
+  );
+}
+
+signalStore(
+  withMethods(() => {
+    const httpClient = inject(HttpClient);
+    return {
+      loader() {
+        return httpClient.get<Person[]>('someUrl');
+      },
+    };
+  }),
+  withEntityVersioner() // does not compile
+);

apps/demo/src/app/flight-search-data-service-dynamic/flight-booking.store.ts

@@ -4,7 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "types": ["node"]
   },
-  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

apps/demo/src/app/test.ts

@@ -1,13 +1,13 @@
 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "0.4.0",
+  "version": "18.0.0-rc.2.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@ngrx/signals": "^17.2.0"
+    "@ngrx/signals": "18.0.0-rc.1 || 18.0.0-rc.2"
   },
   "dependencies": {
     "tslib": "^2.3.0"

apps/demo/src/main.server.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type Emtpy = {};
+export type Empty = {};

apps/demo/tsconfig.app.json

@@ -0,0 +1,3 @@
+export type Prettify<Type extends {}> = {
+  [Key in keyof Type]: Type[Key];
+};

libs/ngrx-toolkit/package.json

@@ -0,0 +1,42 @@
+/**
+ * This file contains copies of types of the Signal Store which are not public.
+ *
+ * Since certain features depend on them, if we don't want to break
+ * the encapsulation of @ngrx/signals, we decided to copy them.
+ *
+ * Since TypeScript is based on structural typing, we can get away with it.
+ *
+ * If @ngrx/signals changes its internal types, we catch them via integration
+ * tests.
+ *
+ * Because of the "tight coupling", the toolkit doesn't have version range
+ * to @ngrx/signal, but is very precise.
+ */
+import { Signal } from '@angular/core';
+import { EntityId } from '@ngrx/signals/entities';
+
+export type SignalStoreFeatureResult = {
+  state: object;
+  computed: Record<string, Signal<unknown>>;
+  methods: Record<string, Function>;
+};
+
+export type EmptyFeatureResult = {
+  state: {};
+  computed: {};
+  methods: {};
+};
+
+// withEntites models
+export type EntityState<Entity> = {
+  entityMap: Record<EntityId, Entity>;
+  ids: EntityId[];
+};
+
+export type EntityComputed<Entity> = {
+  entities: Signal<Entity[]>;
+};
+
+export type NamedEntityComputed<Entity, Collection extends string> = {
+  [K in keyof EntityComputed<Entity> as `${Collection}${Capitalize<K>}`]: EntityComputed<Entity>[K];
+};