feat: add type check for existence of glitched tracking

rainerhahnekamp · rainerhahnekamp · commit b2a8f1fe94a3 · 2026-01-13T21:07:20.000+01:00
diff --git a/libs/ngrx-toolkit/src/lib/devtools/features/with-glitch-tracking.ts b/libs/ngrx-toolkit/src/lib/devtools/features/with-glitch-tracking.ts
@@ -1,6 +1,8 @@
 import { createDevtoolsFeature } from '../internal/devtools-feature';
 import { GlitchTrackerService } from '../internal/glitch-tracker.service';
 
+export const GLITCH_TRACKING_FEATURE = 'GLITCH_TRACKING_FEATURE' as const;
+
 /**
  * It tracks all state changes of the State, including intermediary updates
  * that are typically suppressed by Angular's glitch-free mechanism.
@@ -31,5 +33,10 @@ import { GlitchTrackerService } from '../internal/glitch-tracker.service';
  * Without `withGlitchTracking`, the DevTools would only show the final value of 3.
  */
 export function withGlitchTracking() {
-  return createDevtoolsFeature({ tracker: GlitchTrackerService });
+  return createDevtoolsFeature(
+    {
+      tracker: GlitchTrackerService,
+    },
+    GLITCH_TRACKING_FEATURE,
+  );
 }
diff --git a/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-feature.ts b/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-feature.ts
@@ -23,15 +23,18 @@ export type DevtoolsInnerOptions = {
  * We use them (function calls) instead of a config object,
  * because of tree-shaking.
  */
-export type DevtoolsFeature = {
+export type DevtoolsFeature<Name extends string> = {
   [DEVTOOLS_FEATURE]: true;
+  name: Name;
 } & Partial<DevtoolsOptions>;
 
-export function createDevtoolsFeature(
+export function createDevtoolsFeature<Name extends string = ''>(
   options: DevtoolsOptions,
-): DevtoolsFeature {
+  name: Name = '' as Name,
+): DevtoolsFeature<Name> {
   return {
     [DEVTOOLS_FEATURE]: true,
     ...options,
+    name,
   };
 }
diff --git a/libs/ngrx-toolkit/src/lib/devtools/tests/with-tracked-reducer.spec.ts b/libs/ngrx-toolkit/src/lib/devtools/tests/with-tracked-reducer.spec.ts
@@ -16,6 +16,7 @@ import {
   withEventHandlers,
 } from '@ngrx/signals/events';
 import { delay, tap } from 'rxjs';
+import { withDisabledNameIndices } from '../features/with-disabled-name-indicies';
 import { withGlitchTracking } from '../features/with-glitch-tracking';
 import { updateState } from '../update-state';
 import { withDevtools } from '../with-devtools';
@@ -128,28 +129,6 @@ describe('withTrackedReducer', () => {
     );
   });
 
-  it('should not have a race condition between the reducer and the tracker', () => {
-    const { sendSpy } = setup();
-
-    const Store = signalStore(
-      { providedIn: 'root' },
-      withState({ count: 0 }),
-      withTrackedReducer(
-        on(testEvents.bump, (_, state) => ({ count: state.count + 1 })),
-      ),
-      // Injecting this here, means the reducer gets notified before the tracker
-      withDevtools('store', withGlitchTracking()),
-    );
-
-    TestBed.inject(Store);
-    dispatchBumpEvent();
-
-    expect(sendSpy).toHaveBeenLastCalledWith(
-      { type: '[Spec Store] bump' },
-      { store: { count: 1 } },
-    );
-  });
-
   it('should not label a synchronous patch in an event handler (event tracking only on reducer level)', async () => {
     const { sendSpy, withBasicStore } = setup();
 
@@ -222,6 +201,29 @@ describe('withTrackedReducer', () => {
       { store: { count: 1 } },
     );
   });
+
+  describe('types', () => {
+    it('should fail if `withDevtools` is not used', () => {
+      signalStore(withState({ count: 0 }), withTrackedReducer());
+    });
+    it('should fail during runtime if `withDevtools` is missing glitched tracking', () => {
+      signalStore(withDevtools('store'), withTrackedReducer());
+    });
+    it('should succeed if `withDevtools` is used with glitched tracking', () => {
+      // In order to have a type-safe test
+      signalStore(
+        withDevtools('store', withGlitchTracking()),
+        withTrackedReducer(),
+      );
+    });
+
+    it('should also work with multiple devtools features', () => {
+      signalStore(
+        withDevtools('store', withGlitchTracking(), withDisabledNameIndices()),
+        withTrackedReducer(),
+      );
+    });
+  });
 });
 
 function dispatchBumpEvent() {
@@ -233,7 +235,7 @@ function setup() {
 
   function withBasicStore(name: string) {
     return signalStoreFeature(
-      withDevtools(name, withGlitchTracking()),
+      withDevtools(name, withGlitchTracking(), withDisabledNameIndices()),
       withState({ count: 0 }),
     );
   }
diff --git a/libs/ngrx-toolkit/src/lib/devtools/with-dev-tools-stub.ts b/libs/ngrx-toolkit/src/lib/devtools/with-dev-tools-stub.ts
@@ -1,6 +1,8 @@
-import { withDevtools } from './with-devtools';
+import { signalStoreFeature, withProps } from '@ngrx/signals';
+import { DEVTOOL_PROP, withDevtools } from './with-devtools';
 
 /**
  * Stub for DevTools integration. Can be used to disable DevTools in production.
  */
-export const withDevToolsStub: typeof withDevtools = () => (store) => store;
+export const withDevToolsStub: typeof withDevtools = () =>
+  signalStoreFeature(withProps(() => ({ [DEVTOOL_PROP]: [] as [] })));
diff --git a/libs/ngrx-toolkit/src/lib/devtools/with-devtools.ts b/libs/ngrx-toolkit/src/lib/devtools/with-devtools.ts
@@ -5,6 +5,7 @@ import {
   signalStoreFeature,
   withHooks,
   withMethods,
+  withProps,
 } from '@ngrx/signals';
 import { DefaultTracker } from './internal/default-tracker';
 import {
@@ -15,7 +16,8 @@ import { DevtoolsSyncer } from './internal/devtools-syncer.service';
 import { ReduxDevtoolsExtension } from './internal/models';
 
 // Users requested that we export this type: https://github.com/angular-architects/ngrx-toolkit/issues/178
-export type DevtoolsFeature = DevtoolsFeatureInternal;
+export type DevtoolsFeature<Name extends string = string> =
+  DevtoolsFeatureInternal<Name>;
 
 declare global {
   interface Window {
@@ -25,6 +27,8 @@ declare global {
 
 export const renameDevtoolsMethodName = '___renameDevtoolsName';
 export const uniqueDevtoolsId = '___uniqueDevtoolsId';
+// Used to declare the existence of the devtools extension
+export const DEVTOOL_PROP = Symbol('DEVTOOL_PROP');
 
 /**
  * Adds this store as a feature state to the Redux DevTools.
@@ -39,6 +43,51 @@ export const uniqueDevtoolsId = '___uniqueDevtoolsId';
  * @param name name of the store as it should appear in the DevTools
  * @param features features to extend or modify the behavior of the Devtools
  */
+export function withDevtools(
+  name: string,
+): SignalStoreFeature<
+  EmptyFeatureResult,
+  EmptyFeatureResult & { props: { [DEVTOOL_PROP]: [] } }
+>;
+
+export function withDevtools<DV1 extends DevtoolsFeature>(
+  name: string,
+  feature: DV1,
+): SignalStoreFeature<
+  EmptyFeatureResult,
+  EmptyFeatureResult & { props: { [DEVTOOL_PROP]: DV1['name'] } }
+>;
+
+export function withDevtools<
+  DV1 extends DevtoolsFeature,
+  DV2 extends DevtoolsFeature,
+>(
+  name: string,
+  feature1: DV1,
+  feature2: DV2,
+): SignalStoreFeature<
+  EmptyFeatureResult,
+  EmptyFeatureResult & {
+    props: { [DEVTOOL_PROP]: DV1['name'] | DV2['name'] };
+  }
+>;
+
+export function withDevtools<
+  DV1 extends DevtoolsFeature,
+  DV2 extends DevtoolsFeature,
+  DV3 extends DevtoolsFeature,
+>(
+  name: string,
+  feature1: DV1,
+  feature2: DV2,
+  feature3: DV3,
+): SignalStoreFeature<
+  EmptyFeatureResult,
+  EmptyFeatureResult & {
+    props: { [DEVTOOL_PROP]: DV1['name'] | DV2['name'] | DV3['name'] };
+  }
+>;
+
 export function withDevtools(name: string, ...features: DevtoolsFeature[]) {
   return signalStoreFeature(
     withMethods(() => {
@@ -54,6 +103,9 @@ export function withDevtools(name: string, ...features: DevtoolsFeature[]) {
         [uniqueDevtoolsId]: () => id,
       } as Record<string, (newName?: unknown) => unknown>;
     }),
+    withProps(() => ({
+      [DEVTOOL_PROP]: features.filter((f) => f.name).map((f) => f.name),
+    })),
     withHooks((store) => {
       const syncer = inject(DevtoolsSyncer);
       const id = String(store[uniqueDevtoolsId]());
@@ -74,5 +126,8 @@ export function withDevtools(name: string, ...features: DevtoolsFeature[]) {
         },
       };
     }),
-  ) as SignalStoreFeature<EmptyFeatureResult, EmptyFeatureResult>;
+  ) as SignalStoreFeature<
+    EmptyFeatureResult,
+    EmptyFeatureResult & { props: { [DEVTOOL_PROP]: unknown } }
+  >;
 }
diff --git a/libs/ngrx-toolkit/src/lib/devtools/with-tracked-reducer.ts b/libs/ngrx-toolkit/src/lib/devtools/with-tracked-reducer.ts
@@ -13,17 +13,31 @@ import {
   withEventHandlers,
 } from '@ngrx/signals/events';
 import { tap } from 'rxjs/operators';
+import { GLITCH_TRACKING_FEATURE } from './features/with-glitch-tracking';
 import { updateState } from './update-state';
+import { DEVTOOL_PROP } from './with-devtools';
 
-export function withTrackedReducer<State extends object>(
+export function withTrackedReducer<
+  State extends object,
+  DevtoolsFeatureName extends string,
+>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ...caseReducers: CaseReducerResult<State, any>[]
 ): SignalStoreFeature<
-  EmptyFeatureResult & { state: State },
+  EmptyFeatureResult & {
+    state: State;
+    props: {
+      [DEVTOOL_PROP]: typeof GLITCH_TRACKING_FEATURE extends DevtoolsFeatureName
+        ? DevtoolsFeatureName
+        : 'NO GLITCHED TRACKING ACTIVATED';
+    };
+  },
   EmptyFeatureResult
 > {
   return signalStoreFeature(
-    { state: type<State>() },
+    {
+      state: type<State>(),
+    },
     withEventHandlers((store, events = inject(ReducerEvents)) =>
       caseReducers.map((caseReducer) =>
         events.on(...caseReducer.events).pipe(
