feat(devtools): add withGlitchTracking feature

It tracks all state changes of the State, including intermediary updates
that are typically suppressed by Angular's glitch-free mechanism.

This feature is especially useful for debugging.

Example:

```typescript
 const Store = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 }),
  withDevtools('counter', withGlitchTracking()),
  withMethods((store) => ({
    increase: () =>
      patchState(store, (value) => ({ count: value.count + 1 }))
  }))
);

// would show up in the DevTools with value 0
const store = inject(Store);

store.increase(); // would show up in the DevTools with value 1
store.increase(); // would show up in the DevTools with value 2
store.increase(); // would show up in the DevTools with value 3
```

Author: rainerhahnekamp

apps/demo/e2e/devtools.spec.ts

@@ -49,14 +49,50 @@ test('has title', async ({ page }) => {
   const devtoolsActions = await page.evaluate(() => window['devtoolsSpy']);
 
   expect(devtoolsActions).toEqual([
-    { type: 'add todo' },
-    { type: 'select todo 1' },
-    { type: 'Store Update' },
-    { type: 'select todo 4' },
-    { type: 'Store Update' },
-    { type: 'select todo 1' },
-    { type: 'Store Update' },
-    { type: 'select todo 4' },
-    { type: 'Store Update' },
+    {
+      type: 'add todo',
+    },
+    {
+      type: 'select todo 1',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'select todo 4',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'select todo 1',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'select todo 4',
+    },
+    {
+      type: 'Store Update',
+    },
+    {
+      type: 'Store Update',
+    },
   ]);
 });

apps/demo/src/app/devtools/todo-detail.component.ts

@@ -1,10 +1,11 @@
 import { Component, effect, inject, input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { Todo } from './todo-store';
-import { signalStore, withState } from '@ngrx/signals';
+import { patchState, signalStore, withHooks, withState } from '@ngrx/signals';
 import {
   renameDevtoolsName,
   withDevtools,
+  withGlitchTracking,
   withMapper,
 } from '@angular-architects/ngrx-toolkit';
 
@@ -29,12 +30,15 @@ const TodoDetailStore = signalStore(
 
         return acc;
       }, {} as Record<string, unknown>);
-    })
+    }),
+    withGlitchTracking()
   ),
   withState({
     id: 1,
     secret: 'do not show in DevTools',
-  })
+    active: false,
+  }),
+  withHooks((store) => ({ onInit: () => patchState(store, { active: true }) }))
 );
 
 @Component({

docs/docs/with-devtools.md

@@ -63,6 +63,37 @@ export class TodoDetailComponent {
 }
 ```
 
+## `withGlitchTracking()`
+
+It tracks all state changes of the State, including intermediary updates
+that are typically suppressed by Angular's glitch-free mechanism.
+
+This feature is especially useful for debugging.
+
+Example:
+
+```typescript
+const Store = signalStore(
+  { providedIn: 'root' },
+  withState({ count: 0 }),
+  withDevtools('counter', withGlitchTracking()),
+  withMethods((store) => ({
+    increase: () => patchState(store, (value) => ({ count: value.count + 1 })),
+  }))
+);
+
+// would show up in the DevTools with value 0
+const store = inject(Store);
+
+store.increase(); // would show up in the DevTools with value 1
+store.increase(); // would show up in the DevTools with value 2
+store.increase(); // would show up in the DevTools with value 3
+```
+
+Without `withGlitchTracking`, the DevTools would only show the final value of 3.
+
+It is also possible to mix. So one store could have `withGlitchTracking` and another one not.
+
 ## `withDisabledNameIndices()`
 
 `withDevtools` foresees the possibility to add features which extend or modify it. At the moment, `withDisabledNameIndices` is the only feature available. It disables the automatic indexing of the store names in the Devtools.

libs/ngrx-toolkit/src/index.ts

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

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

@@ -1,12 +1,35 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class GlitchTrackingService {}
+import { createDevtoolsFeature } from '../internal/devtools-feature';
+import { GlitchTrackerService } from '../internal/glitch-tracker.service';
 
 /**
- * Track all state changes of the State, including intermediary updates
+ * It tracks all state changes of the State, including intermediary updates
  * that are typically suppressed by Angular's glitch-free mechanism.
+ *
+ * This feature is especially useful for debugging.
+ *
+ * Example:
+ *
+ * <pre>
+ *  const Store = signalStore(
+ *     { providedIn: 'root' },
+ *     withState({ count: 0 }),
+ *     withDevtools('counter', withGlitchTracking()),
+ *     withMethods((store) => ({
+ *       increase: () =>
+ *         patchState(store, (value) => ({ count: value.count + 1 })),
+ *     }))
+ *   );
+ *
+ *   // would show up in the DevTools with value 0
+ *   const store = inject(Store);
+ *
+ *   store.increase(); // would show up in the DevTools with value 1
+ *   store.increase(); // would show up in the DevTools with value 2
+ *   store.increase(); // would show up in the DevTools with value 3
+ * </pre>
+ *
+ * Without `withGlitchTracking`, the DevTools would only show the final value of 3.
  */
 export function withGlitchTracking() {
-  throw new Error('Not implemented');
+  return createDevtoolsFeature({ tracker: GlitchTrackerService });
 }

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

@@ -4,7 +4,26 @@ import { createDevtoolsFeature, Mapper } from '../internal/devtools-feature';
  * Allows you to define a function to map the state.
  *
  * It is needed for huge states, that slows down the Devtools and where
- * you don't need to see the whole state.
+ * you don't need to see the whole state or other reasons.
+ *
+ * Example:
+ *
+ * <pre>
+ *   const initialState = {
+ *     id: 1,
+ *     email: 'john.list@host.com',
+ *     name: 'John List',
+ *     enteredPassword: ''
+ *   }
+ *
+ *   const Store = signalStore(
+ *     withState(initialState),
+ *     withDevtools(
+ *       'user',
+ *       withMapper(state => ({state, { enteredPassword: '***' }}))
+ *     )
+ *   )
+ * </pre>
  *
  * @param map function which maps the state
  */

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

@@ -1,18 +1,28 @@
 import { effect, Injectable, signal } from '@angular/core';
-import { StateSource } from '@ngrx/signals';
+import { getState, StateSource } from '@ngrx/signals';
 import { Tracker, TrackerStores } from './models';
 
 @Injectable({ providedIn: 'root' })
 export class DefaultTracker implements Tracker {
   readonly #stores = signal<TrackerStores>({});
-  #trackCallback: undefined | (() => void);
+
+  get stores(): TrackerStores {
+    return this.#stores();
+  }
+
+  #trackCallback: undefined | ((changedState: Record<string, object>) => void);
 
   #trackingEffect = effect(() => {
     if (this.#trackCallback === undefined) {
       throw new Error('no callback function defined');
     }
-    this.#stores(); // track stores
-    this.#trackCallback();
+    const stores = this.#stores();
+
+    const fullState = Object.entries(stores).reduce((acc, [id, store]) => {
+      return { ...acc, [id]: getState(store) };
+    }, {} as Record<string, object>);
+
+    this.#trackCallback(fullState);
   });
 
   track(id: string, store: StateSource<object>): void {
@@ -22,7 +32,7 @@ export class DefaultTracker implements Tracker {
     }));
   }
 
-  onChange(callback: () => void): void {
+  onChange(callback: (changedState: Record<string, object>) => void): void {
     this.#trackCallback = callback;
   }
 
@@ -37,10 +47,11 @@ export class DefaultTracker implements Tracker {
     );
   }
 
-  getStores(): Record<string, StateSource<object>> {
-    return Object.entries(this.#stores()).reduce((states, [key, store]) => {
-      states[key] = store;
-      return states;
-    }, {} as Record<string, StateSource<object>>);
+  notifyRenamedStore(id: string): void {
+    if (this.#stores()[id]) {
+      this.#stores.update((stores) => {
+        return { ...stores };
+      });
+    }
   }
 }