refactor(devtools): extract tracking logic from DevtoolsSyncer

This is a pre-requisite for `withGlitchTracking()` feature.

`DefaultTracker` will track the states via an `effect`, but it
is possible to override it with another tracker implementation
per SignalStore.

At the moment, there is just one implementation, but `withGlitchTracking()`
will follow in the next commit.

Author: rainerhahnekamp

libs/ngrx-toolkit/src/index.ts

@@ -1,7 +1,7 @@
 export { withDevToolsStub } from './lib/devtools/with-dev-tools-stub';
 export { withDevtools } from './lib/devtools/with-devtools';
-export { withDisabledNameIndices } from './lib/devtools/with-disabled-name-indicies';
-export { withMapper } from './lib/devtools/with-mapper';
+export { withDisabledNameIndices } from './lib/devtools/features/with-disabled-name-indicies';
+export { withMapper } from './lib/devtools/features/with-mapper';
 export { patchState, updateState } from './lib/devtools/update-state';
 export { renameDevtoolsName } from './lib/devtools/rename-devtools-name';
 

libs/ngrx-toolkit/src/lib/devtools/with-disabled-name-indicies.ts renamed to libs/ngrx-toolkit/src/lib/devtools/features/with-disabled-name-indicies.ts

@@ -1,4 +1,4 @@
-import { createDevtoolsFeature } from './devtools-feature';
+import { createDevtoolsFeature } from '../internal/devtools-feature';
 
 /**
  * If multiple instances of the same SignalStore class

libs/ngrx-toolkit/src/lib/devtools/features/with-glitch-tracking.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class GlitchTrackingService {}
+
+/**
+ * Track all state changes of the State, including intermediary updates
+ * that are typically suppressed by Angular's glitch-free mechanism.
+ */
+export function withGlitchTracking() {
+  throw new Error('Not implemented');
+}

libs/ngrx-toolkit/src/lib/devtools/with-mapper.ts renamed to libs/ngrx-toolkit/src/lib/devtools/features/with-mapper.ts

@@ -1,4 +1,4 @@
-import { createDevtoolsFeature, Mapper } from './devtools-feature';
+import { createDevtoolsFeature, Mapper } from '../internal/devtools-feature';
 
 /**
  * Allows you to define a function to map the state.

libs/ngrx-toolkit/src/lib/devtools/internal/currrent-action-names.ts renamed to libs/ngrx-toolkit/src/lib/devtools/internal/current-action-names.ts

@@ -0,0 +1,46 @@
+import { effect, Injectable, signal } from '@angular/core';
+import { StateSource } from '@ngrx/signals';
+import { Tracker, TrackerStores } from './models';
+
+@Injectable({ providedIn: 'root' })
+export class DefaultTracker implements Tracker {
+  readonly #stores = signal<TrackerStores>({});
+  #trackCallback: undefined | (() => void);
+
+  #trackingEffect = effect(() => {
+    if (this.#trackCallback === undefined) {
+      throw new Error('no callback function defined');
+    }
+    this.#stores(); // track stores
+    this.#trackCallback();
+  });
+
+  track(id: string, store: StateSource<object>): void {
+    this.#stores.update((value) => ({
+      ...value,
+      [id]: store,
+    }));
+  }
+
+  onChange(callback: () => void): void {
+    this.#trackCallback = callback;
+  }
+
+  removeStore(id: string) {
+    this.#stores.update((stores) =>
+      Object.entries(stores).reduce((newStore, [storeId, state]) => {
+        if (storeId !== id) {
+          newStore[storeId] = state;
+        }
+        return newStore;
+      }, {} as TrackerStores)
+    );
+  }
+
+  getStores(): Record<string, StateSource<object>> {
+    return Object.entries(this.#stores()).reduce((states, [key, store]) => {
+      states[key] = store;
+      return states;
+    }, {} as Record<string, StateSource<object>>);
+  }
+}

libs/ngrx-toolkit/src/lib/devtools/internal/default-tracker.ts

@@ -1,10 +1,19 @@
+import { Tracker } from './models';
+
 export const DEVTOOLS_FEATURE = Symbol('DEVTOOLS_FEATURE');
 
 export type Mapper = (state: object) => object;
 
 export type DevtoolsOptions = {
-  indexNames: boolean; // defines if names should be indexed.
-  map: Mapper; // defines a mapper for the state.
+  indexNames?: boolean; // defines if names should be indexed.
+  map?: Mapper; // defines a mapper for the state.
+  tracker?: new () => Tracker; // defines a tracker for the state
+};
+
+export type DevtoolsInnerOptions = {
+  indexNames: boolean;
+  map: Mapper;
+  tracker: Tracker;
 };
 
 /**
@@ -19,7 +28,7 @@ export type DevtoolsFeature = {
 } & Partial<DevtoolsOptions>;
 
 export function createDevtoolsFeature(
-  options: Partial<DevtoolsOptions>
+  options: DevtoolsOptions
 ): DevtoolsFeature {
   return {
     [DEVTOOLS_FEATURE]: true,

libs/ngrx-toolkit/src/lib/devtools/devtools-feature.ts renamed to libs/ngrx-toolkit/src/lib/devtools/internal/devtools-feature.ts

@@ -1,16 +1,16 @@
 import {
-  effect,
   inject,
   Injectable,
   OnDestroy,
   PLATFORM_ID,
   signal,
 } from '@angular/core';
-import { currentActionNames } from './currrent-action-names';
+import { currentActionNames } from './current-action-names';
 import { isPlatformBrowser } from '@angular/common';
-import { Connection } from '../with-devtools';
 import { getState, StateSource } from '@ngrx/signals';
-import { DevtoolsOptions } from '../devtools-feature';
+import { DevtoolsInnerOptions } from './devtools-feature';
+import { throwIfNull } from '../../shared/throw-if-null';
+import { Connection, StoreRegistry, Tracker } from './models';
 
 const dummyConnection: Connection = {
   send: () => void true,
@@ -31,6 +31,7 @@ const dummyConnection: Connection = {
 export class DevtoolsSyncer implements OnDestroy {
   readonly #stores = signal<StoreRegistry>({});
   readonly #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  readonly #trackers = [] as Tracker[];
   #currentId = 1;
 
   readonly #connection: Connection = this.#isBrowser
@@ -52,37 +53,24 @@ export class DevtoolsSyncer implements OnDestroy {
         'NgRx Toolkit/DevTools: Redux DevTools Extension is not available.'
       );
     }
-
-    effect(() => {
-      if (!this.#connection) {
-        return;
-      }
-
-      const stores = this.#stores();
-      const rootState: Record<string, unknown> = {};
-      for (const name in stores) {
-        const { store, options } = stores[name];
-        rootState[name] = options.map(getState(store));
-      }
-
-      const names = Array.from(currentActionNames);
-      const type = names.length ? names.join(', ') : 'Store Update';
-      currentActionNames.clear();
-
-      this.#connection.send({ type }, rootState);
-    });
   }
 
   ngOnDestroy(): void {
     currentActionNames.clear();
   }
 
-  addStore(name: string, store: StateSource<object>, options: DevtoolsOptions) {
+  addStore(
+    name: string,
+    store: StateSource<object>,
+    options: DevtoolsInnerOptions
+  ) {
     let storeName = name;
-    const names = Object.keys(this.#stores());
+    const names = Object.values(this.#stores()).map((store) => store.name);
 
     if (names.includes(storeName)) {
-      const { options } = this.#stores()[storeName];
+      const { options } = throwIfNull(
+        Object.values(this.#stores()).find((store) => store.name === storeName)
+      );
       if (!options.indexNames) {
         throw new Error(`An instance of the store ${storeName} already exists. \
 Enable automatic indexing via withDevTools('${storeName}', { indexNames: true }), or rename it upon instantiation.`);
@@ -92,55 +80,75 @@ Enable automatic indexing via withDevTools('${storeName}', { indexNames: true })
     for (let i = 1; names.includes(storeName); i++) {
       storeName = `${name}-${i}`;
     }
-    const id = this.#currentId++;
-
+    const id = String(this.#currentId++);
     this.#stores.update((stores) => ({
       ...stores,
-      [storeName]: { store, options, id },
+      [id]: { name: storeName, options },
     }));
 
+    const tracker = options.tracker;
+    if (!this.#trackers.includes(tracker)) {
+      this.#trackers.push(tracker);
+    }
+
+    tracker.track(id, store);
+    tracker.onChange(() => this.syncToDevTools());
+
     return id;
   }
 
-  removeStore(id: number) {
-    this.#stores.update((stores) => {
-      return Object.entries(stores).reduce((newStore, [name, value]) => {
-        if (value.id === id) {
-          return newStore;
-        } else {
-          return { ...newStore, [name]: value };
+  syncToDevTools() {
+    const trackerStores = this.#trackers.reduce(
+      (acc, tracker) => ({ ...acc, ...tracker.getStores() }),
+      {} as Record<string, StateSource<object>>
+    );
+    const rootState = Object.entries(trackerStores).reduce(
+      (acc, [id, store]) => {
+        const { options, name } = this.#stores()[id];
+        acc[name] = options.map(getState(store));
+        return acc;
+      },
+      {} as Record<string, unknown>
+    );
+
+    const names = Array.from(currentActionNames);
+    const type = names.length ? names.join(', ') : 'Store Update';
+    currentActionNames.clear();
+
+    this.#connection.send({ type }, rootState);
+  }
+
+  removeStore(id: string) {
+    for (const tracker of this.#trackers) {
+      tracker.removeStore(id);
+    }
+    this.#stores.update((stores) =>
+      Object.entries(stores).reduce((newStore, [storeId, value]) => {
+        if (storeId !== id) {
+          newStore[storeId] = value;
         }
-      }, {});
-    });
+        return newStore;
+      }, {} as StoreRegistry)
+    );
   }
 
   renameStore(oldName: string, newName: string) {
     this.#stores.update((stores) => {
-      if (newName in stores) {
+      const storeNames = Object.values(stores).map((store) => store.name);
+      if (storeNames.includes(newName)) {
         throw new Error(
           `NgRx Toolkit/DevTools: cannot rename from ${oldName} to ${newName}. ${newName} is already assigned to another SignalStore instance.`
         );
       }
 
-      const newStore: StoreRegistry = {};
-      for (const storeName in stores) {
-        if (storeName === oldName) {
-          newStore[newName] = stores[oldName];
+      return Object.entries(stores).reduce((newStore, [id, value]) => {
+        if (value.name === oldName) {
+          newStore[id] = { ...value, name: newName };
         } else {
-          newStore[storeName] = stores[storeName];
+          newStore[id] = value;
         }
-      }
-
-      return newStore;
+        return newStore;
+      }, {} as StoreRegistry);
     });
   }
 }
-
-type StoreRegistry = Record<
-  string,
-  {
-    store: StateSource<object>;
-    options: DevtoolsOptions;
-    id: number;
-  }
->;

libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts

@@ -0,0 +1,27 @@
+import { StateSource } from '@ngrx/signals';
+import { DevtoolsInnerOptions } from './devtools-feature';
+
+export type Action = { type: string };
+export type Connection = {
+  send: (action: Action, state: Record<string, unknown>) => void;
+};
+export type ReduxDevtoolsExtension = {
+  connect: (options: { name: string }) => Connection;
+};
+
+export type StoreRegistry = Record<
+  string,
+  {
+    options: DevtoolsInnerOptions;
+    name: string;
+  }
+>;
+
+export type Tracker = {
+  track(id: string, store: StateSource<object>): void;
+  onChange(callback: () => void): void;
+  removeStore(id: string): void;
+  getStores: () => Record<string, StateSource<object>>;
+};
+
+export type TrackerStores = Record<string, StateSource<object>>;

libs/ngrx-toolkit/src/lib/devtools/internal/glitch-tracker.service.ts

@@ -9,7 +9,7 @@ import {
   runInInjectionContext,
 } from '@angular/core';
 import { renameDevtoolsName } from '../rename-devtools-name';
-import { withDisabledNameIndices } from '../with-disabled-name-indicies';
+import { withDisabledNameIndices } from '../features/with-disabled-name-indicies';
 
 describe('withDevtools / renaming', () => {
   it('should automatically index multiple instances', () => {

libs/ngrx-toolkit/src/lib/devtools/internal/models.ts

@@ -1,7 +1,7 @@
 import { setupExtensions } from './helpers.spec';
 import { TestBed } from '@angular/core/testing';
 import { signalStore, withState } from '@ngrx/signals';
-import { withMapper } from '../with-mapper';
+import { withMapper } from '../features/with-mapper';
 import { withDevtools } from '../with-devtools';
 
 function domRemover(state: Record<string, unknown>) {

libs/ngrx-toolkit/src/lib/devtools/internal/tracker.ts

@@ -1,7 +1,7 @@
 import { patchState as originalPatchState } from '@ngrx/signals';
 import { PartialStateUpdater, WritableStateSource } from '@ngrx/signals';
 import { Prettify } from '../shared/prettify';
-import { currentActionNames } from './internal/currrent-action-names';
+import { currentActionNames } from './internal/current-action-names';
 
 type PatchFn = typeof originalPatchState extends (
   arg1: infer First,