feat: move devtools constraint to runtime check

Author: rainerhahnekamp

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

@@ -1,7 +1,7 @@
 import { createDevtoolsFeature } from '../internal/devtools-feature';
 import { GlitchTrackerService } from '../internal/glitch-tracker.service';
 
-export const GLITCH_TRACKING_FEATURE = 'GLITCH_TRACKING_FEATURE' as const;
+export const GLITCH_TRACKING_FEATURE = 'GLITCH_TRACKING_FEATURE';
 
 /**
  * It tracks all state changes of the State, including intermediary updates
@@ -33,10 +33,8 @@ export const GLITCH_TRACKING_FEATURE = 'GLITCH_TRACKING_FEATURE' as const;
  * Without `withGlitchTracking`, the DevTools would only show the final value of 3.
  */
 export function withGlitchTracking() {
-  return createDevtoolsFeature(
-    {
-      tracker: GlitchTrackerService,
-    },
-    GLITCH_TRACKING_FEATURE,
-  );
+  return createDevtoolsFeature({
+    name: GLITCH_TRACKING_FEATURE,
+    tracker: GlitchTrackerService,
+  });
 }

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

@@ -5,6 +5,7 @@ export const DEVTOOLS_FEATURE = Symbol('DEVTOOLS_FEATURE');
 export type Mapper = (state: object) => object;
 
 export type DevtoolsOptions = {
+  name?: string; // defines the name of the feature
   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
@@ -23,18 +24,15 @@ export type DevtoolsInnerOptions = {
  * We use them (function calls) instead of a config object,
  * because of tree-shaking.
  */
-export type DevtoolsFeature<Name extends string> = {
+export type DevtoolsFeature = {
   [DEVTOOLS_FEATURE]: true;
-  name: Name;
 } & Partial<DevtoolsOptions>;
 
-export function createDevtoolsFeature<Name extends string = ''>(
+export function createDevtoolsFeature(
   options: DevtoolsOptions,
-  name: Name = '' as Name,
-): DevtoolsFeature<Name> {
+): DevtoolsFeature {
   return {
     [DEVTOOLS_FEATURE]: true,
     ...options,
-    name,
   };
 }

libs/ngrx-toolkit/src/lib/devtools/tests/with-tracked-reducer.spec.ts

@@ -202,26 +202,46 @@ describe('withTrackedReducer', () => {
     );
   });
 
-  describe('types', () => {
+  describe('devtools checks', () => {
     it('should fail if `withDevtools` is not used', () => {
-      signalStore(withState({ count: 0 }), withTrackedReducer());
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withState({ count: 0 }),
+        withTrackedReducer(),
+      );
+      expect(() => TestBed.inject(Store)).toThrow(
+        `In order to use withTrackedReducer, you must first enable the devtools feature via withDevtools('[your store name]', withGlitchTracking())`,
+      );
     });
+
     it('should fail during runtime if `withDevtools` is missing glitched tracking', () => {
-      signalStore(withDevtools('store'), withTrackedReducer());
+      const Store = signalStore(
+        { providedIn: 'root' },
+        withDevtools('store'),
+        withTrackedReducer(),
+      );
+      expect(() => TestBed.inject(Store)).toThrow(
+        `In order to use withTrackedReducer, you must first enable the glitch tracking devtools feature via withDevtools('[your store name]', withGlitchTracking())`,
+      );
     });
+
     it('should succeed if `withDevtools` is used with glitched tracking', () => {
       // In order to have a type-safe test
-      signalStore(
+      const Store = signalStore(
+        { providedIn: 'root' },
         withDevtools('store', withGlitchTracking()),
         withTrackedReducer(),
       );
+      expect(() => TestBed.inject(Store)).not.toThrow();
     });
 
     it('should also work with multiple devtools features', () => {
-      signalStore(
+      const Store = signalStore(
+        { providedIn: 'root' },
         withDevtools('store', withGlitchTracking(), withDisabledNameIndices()),
         withTrackedReducer(),
       );
+      expect(() => TestBed.inject(Store)).not.toThrow();
     });
   });
 });

libs/ngrx-toolkit/src/lib/devtools/with-dev-tools-stub.ts

@@ -1,8 +1,11 @@
 import { signalStoreFeature, withProps } from '@ngrx/signals';
-import { DEVTOOL_PROP, withDevtools } from './with-devtools';
-
+import { DEVTOOL_FEATURE_NAMES, withDevtools } from './with-devtools';
 /**
  * Stub for DevTools integration. Can be used to disable DevTools in production.
  */
 export const withDevToolsStub: typeof withDevtools = () =>
-  signalStoreFeature(withProps(() => ({ [DEVTOOL_PROP]: [] as [] })));
+  signalStoreFeature(
+    withProps(() => ({
+      [DEVTOOL_FEATURE_NAMES]: [],
+    })),
+  );

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

@@ -16,8 +16,7 @@ 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<Name extends string = string> =
-  DevtoolsFeatureInternal<Name>;
+export type DevtoolsFeature = DevtoolsFeatureInternal;
 
 declare global {
   interface Window {
@@ -28,7 +27,7 @@ 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');
+export const DEVTOOL_FEATURE_NAMES = Symbol('DEVTOOL_PROP');
 
 /**
  * Adds this store as a feature state to the Redux DevTools.
@@ -43,51 +42,6 @@ export const DEVTOOL_PROP = Symbol('DEVTOOL_PROP');
  * @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(() => {
@@ -104,7 +58,7 @@ export function withDevtools(name: string, ...features: DevtoolsFeature[]) {
       } as Record<string, (newName?: unknown) => unknown>;
     }),
     withProps(() => ({
-      [DEVTOOL_PROP]: features.filter((f) => f.name).map((f) => f.name),
+      [DEVTOOL_FEATURE_NAMES]: features.filter(Boolean).map((f) => f.name),
     })),
     withHooks((store) => {
       const syncer = inject(DevtoolsSyncer);
@@ -128,6 +82,6 @@ export function withDevtools(name: string, ...features: DevtoolsFeature[]) {
     }),
   ) as SignalStoreFeature<
     EmptyFeatureResult,
-    EmptyFeatureResult & { props: { [DEVTOOL_PROP]: unknown } }
+    EmptyFeatureResult & { props: { [DEVTOOL_FEATURE_NAMES]: string[] } }
   >;
 }

libs/ngrx-toolkit/src/lib/devtools/with-tracked-reducer.ts

@@ -6,6 +6,7 @@ import {
   SignalStoreFeature,
   signalStoreFeature,
   type,
+  withHooks,
 } from '@ngrx/signals';
 import {
   EventCreator,
@@ -15,22 +16,14 @@ import {
 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';
+import { DEVTOOL_FEATURE_NAMES } from './with-devtools';
 
-export function withTrackedReducer<
-  State extends object,
-  DevtoolsFeatureName extends string,
->(
+export function withTrackedReducer<State extends object>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ...caseReducers: CaseReducerResult<State, any>[]
 ): SignalStoreFeature<
   EmptyFeatureResult & {
     state: State;
-    props: {
-      [DEVTOOL_PROP]: typeof GLITCH_TRACKING_FEATURE extends DevtoolsFeatureName
-        ? DevtoolsFeatureName
-        : 'NO GLITCHED TRACKING ACTIVATED';
-    };
   },
   EmptyFeatureResult
 > {
@@ -51,6 +44,24 @@ export function withTrackedReducer<
         ),
       ),
     ),
+    withHooks((store) => ({
+      onInit() {
+        if (!(DEVTOOL_FEATURE_NAMES in store)) {
+          throw new Error(
+            `In order to use withTrackedReducer, you must first enable the devtools feature via withDevtools('[your store name]', withGlitchTracking())`,
+          );
+        }
+        if (
+          !(store[DEVTOOL_FEATURE_NAMES] as string[]).includes(
+            GLITCH_TRACKING_FEATURE,
+          )
+        ) {
+          throw new Error(
+            `In order to use withTrackedReducer, you must first enable the glitch tracking devtools feature via withDevtools('[your store name]', withGlitchTracking())`,
+          );
+        }
+      },
+    })),
   );
 }