feat(devtools): add provideDevtoolsConfig

`provideDevtoolsConfig` provides an option to define the name
of the SignalStore in the Redux Devtools.

Author: mikerentmeister

docs/docs/with-redux.md

@@ -107,3 +107,36 @@ signalStore(
   })
 );
 ```
+
+### Configuring the Redux Devtools Extension
+
+The `provideDevtoolsConfig` function allows you to configure the Redux DevTools integration for your NgRx SignalStore. This function is essential for setting up the DevTools with custom options. The function only needs to be called once in your appConfig or AppModule.
+
+To use `provideDevtoolsConfig`, you need to import it and call it in your providers array.
+
+Here is an example of how to use it with the standalone api:
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideDevtoolsConfig } from '@angular-architects/ngrx-toolkit';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideDevtoolsConfig({
+      name: 'MyApp',
+    }),
+  ],
+};
+
+// main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config.ts';
+
+await bootstrapApplication(AppComponent, appConfig);
+```
+
+### Additional Information
+
+For more details on the available options and their usage, refer to the [Redux DevTools Extension documentation](https://github.com/reduxjs/redux-devtools).

libs/ngrx-toolkit/src/index.ts

@@ -5,6 +5,10 @@ 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';
+export {
+  provideDevtoolsConfig,
+  ReduxDevtoolsConfig,
+} from './lib/devtools/provide-devtools-config';
 
 export {
   withRedux,

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

@@ -5,6 +5,7 @@ import { StateSource } from '@ngrx/signals';
 import { DevtoolsInnerOptions } from './devtools-feature';
 import { throwIfNull } from '../../shared/throw-if-null';
 import { Connection, StoreRegistry, Tracker } from './models';
+import { REDUX_DEVTOOLS_CONFIG } from '../provide-devtools-config';
 
 const dummyConnection: Connection = {
   send: () => void true,
@@ -30,6 +31,10 @@ export class DevtoolsSyncer implements OnDestroy {
   #stores: StoreRegistry = {};
   readonly #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   readonly #trackers = [] as Tracker[];
+  readonly #devtoolsConfig = {
+    name: 'NgRx SignalStore',
+    ...inject(REDUX_DEVTOOLS_CONFIG, { optional: true }),
+  };
 
   /**
    * Maintains the current states of all stores to avoid conflicts
@@ -50,9 +55,7 @@ export class DevtoolsSyncer implements OnDestroy {
 
   readonly #connection: Connection = this.#isBrowser
     ? window.__REDUX_DEVTOOLS_EXTENSION__
-      ? window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-          name: 'NgRx SignalStore',
-        })
+      ? window.__REDUX_DEVTOOLS_EXTENSION__.connect(this.#devtoolsConfig)
       : dummyConnection
     : dummyConnection;
 

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

@@ -1,12 +1,13 @@
 import { StateSource } from '@ngrx/signals';
 import { DevtoolsInnerOptions } from './devtools-feature';
+import { ReduxDevtoolsConfig } from '../provide-devtools-config';
 
 export type Action = { type: string };
 export type Connection = {
   send: (action: Action, state: Record<string, unknown>) => void;
 };
 export type ReduxDevtoolsExtension = {
-  connect: (options: { name: string }) => Connection;
+  connect: (options: ReduxDevtoolsConfig) => Connection;
 };
 
 export type StoreRegistry = Record<

libs/ngrx-toolkit/src/lib/devtools/provide-devtools-config.ts

@@ -0,0 +1,32 @@
+import { InjectionToken, ValueProvider } from '@angular/core';
+
+/**
+ * Provides the configuration options for connecting to the Redux DevTools Extension.
+ */
+export function provideDevtoolsConfig(
+  config: ReduxDevtoolsConfig
+): ValueProvider {
+  return {
+    provide: REDUX_DEVTOOLS_CONFIG,
+    useValue: config,
+  };
+}
+
+/**
+ * Injection token for the configuration options for connecting to the Redux DevTools Extension.
+ */
+export const REDUX_DEVTOOLS_CONFIG = new InjectionToken<ReduxDevtoolsConfig>(
+  'ReduxDevtoolsConfig'
+);
+
+/**
+ * Options for connecting to the Redux DevTools Extension.
+ * @example
+ * const devToolsOptions: ReduxDevtoolsConfig = {
+ *   name: 'My App',
+ * };
+ */
+export type ReduxDevtoolsConfig = {
+  /** Optional name for the devtools instance. If empty, "NgRx SignalStore" will be used. */
+  name?: string;
+};

libs/ngrx-toolkit/src/lib/devtools/tests/provide-devtools-config.spec.ts

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { provideDevtoolsConfig } from '../provide-devtools-config';
+import { DevtoolsSyncer } from '../internal/devtools-syncer.service';
+import { setupExtensions } from './helpers.spec';
+
+describe('provideDevtoolsConfig', () => {
+  it('DevtoolsSyncer should use the default configuration if none is provided', () => {
+    const { connectSpy } = setupExtensions();
+    TestBed.inject(DevtoolsSyncer);
+    expect(connectSpy).toHaveBeenCalledWith({
+      name: 'NgRx SignalStore',
+    });
+  });
+
+  it('DevtoolsSyncer should use the configuration provided', () => {
+    const { connectSpy } = setupExtensions();
+    TestBed.configureTestingModule({
+      providers: [provideDevtoolsConfig({ name: 'test' })],
+    });
+    TestBed.inject(DevtoolsSyncer);
+    expect(connectSpy).toHaveBeenCalledWith({
+      name: 'test',
+    });
+  });
+});