Configuration and Setup

/**
 * Angular module for instrumenting the store with devtools
 */
class StoreDevtoolsModule {
  /**
   * Configure devtools module with options
   * @param options - Configuration options for devtools
   * @returns Module with providers configured
   */
  static instrument(options?: StoreDevtoolsOptions): ModuleWithProviders<StoreDevtoolsModule>;
}

import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
import { environment } from "../environments/environment";

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({
      name: "My App DevTools",
      maxAge: 25,
      logOnly: environment.production,
      autoPause: true,
      trace: false,
      traceLimit: 75,
      connectInZone: false,
    }),
  ],
})
export class AppModule {}

/**
 * Provides developer tools and instrumentation for Store in standalone applications
 * @param options - Configuration options for devtools
 * @returns Environment providers for devtools
 */
function provideStoreDevtools(options?: StoreDevtoolsOptions): EnvironmentProviders;

import { bootstrapApplication } from "@angular/platform-browser";
import { isDevMode } from "@angular/core";
import { provideStore } from "@ngrx/store";
import { provideStoreDevtools } from "@ngrx/store-devtools";

bootstrapApplication(AppComponent, {
  providers: [
    provideStore(reducers),
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      autoPause: true,
      trace: true,
      traceLimit: 75,
    }),
  ],
});

/**
 * Configuration class for store devtools with all available options
 */
class StoreDevtoolsConfig {
  /** Maximum allowed actions to be stored in the history tree (default: false) */
  maxAge: number | false;
  /** Custom monitor reducer for advanced monitoring */
  monitor?: ActionReducer<any, any>;
  /** Function which takes action object and id number, returns sanitized action */
  actionSanitizer?: ActionSanitizer;
  /** Function which takes state object and index, returns sanitized state */
  stateSanitizer?: StateSanitizer;
  /** The instance name to be shown on the monitor page (default: document.title) */
  name?: string;
  /** Serialization configuration for state and actions */
  serialize?: boolean | SerializationOptions;
  /** Log-only mode for production environments */
  logOnly?: boolean;
  /** Feature configuration for devtools capabilities */
  features?: DevToolsFeatureOptions;
  /** Action types to be hidden in the monitors */
  actionsBlocklist?: string[];
  /** Action types to be shown in the monitors (overrides actionsBlocklist) */
  actionsSafelist?: string[];
  /** Called for every action before sending, returns true to allow sending */
  predicate?: Predicate;
  /** Auto pauses when the extension's window is not opened */
  autoPause?: boolean;
  /** If set to true, will include stack trace for every dispatched action */
  trace?: boolean | (() => string);
  /** Maximum stack trace frames to be stored */
  traceLimit?: number;
  /** Determines whether extension connection is established within Angular zone */
  connectInZone?: boolean;
}

/**
 * Configuration options type supporting partial configuration or factory function
 */
type StoreDevtoolsOptions = Partial<StoreDevtoolsConfig> | (() => Partial<StoreDevtoolsConfig>);

// Static configuration
const devtoolsConfig: StoreDevtoolsOptions = {
  maxAge: 50,
  logOnly: false,
  autoPause: true,
};

// Dynamic configuration
const devtoolsConfig: StoreDevtoolsOptions = () => ({
  maxAge: environment.production ? 10 : 50,
  logOnly: environment.production,
  name: `${environment.appName} DevTools`,
});

/**
 * Configuration for devtools features based on Redux DevTools extension API
 */
interface DevToolsFeatureOptions {
  /** Start/pause recording of dispatched actions */
  pause?: boolean;
  /** Lock/unlock dispatching actions and side effects */
  lock?: boolean;
  /** Persist states on page reloading */
  persist?: boolean;
  /** Export history of actions in a file */
  export?: boolean;
  /** Import history of actions from a file */
  import?: 'custom' | boolean;
  /** Jump back and forth (time travelling) */
  jump?: boolean;
  /** Skip (cancel) actions */
  skip?: boolean;
  /** Drag and drop actions in the history list */
  reorder?: boolean;
  /** Dispatch custom actions or action creators */
  dispatch?: boolean;
  /** Generate tests for the selected actions */
  test?: boolean;
}

/**
 * Function to sanitize actions before sending to devtools
 * @param action - The action to sanitize
 * @param id - The action ID
 * @returns Sanitized action object
 */
type ActionSanitizer = (action: Action, id: number) => Action;

/**
 * Function to sanitize state before sending to devtools
 * @param state - The state to sanitize
 * @param index - The state index
 * @returns Sanitized state object
 */
type StateSanitizer = (state: any, index: number) => any;

/**
 * Predicate function to determine if action should be sent to devtools
 * @param state - Current state
 * @param action - Action being processed
 * @returns True if action should be sent to devtools
 */
type Predicate = (state: any, action: Action) => boolean;

const actionSanitizer: ActionSanitizer = (action, id) => {
  // Remove sensitive data from actions
  if (action.type === 'LOGIN_SUCCESS') {
    return { ...action, payload: { ...action.payload, token: '[REDACTED]' } };
  }
  return action;
};

const stateSanitizer: StateSanitizer = (state, index) => {
  // Remove sensitive data from state
  return {
    ...state,
    auth: state.auth ? { ...state.auth, token: '[REDACTED]' } : null,
  };
};

const predicate: Predicate = (state, action) => {
  // Only send specific actions to devtools
  return !action.type.startsWith('@@');
};

/**
 * Serialization options for state and actions
 */
interface SerializationOptions {
  /** Serialization configuration options */
  options?: boolean | any;
  /** Function to transform values during serialization */
  replacer?: (key: any, value: any) => {};
  /** Function to transform values during deserialization */
  reviver?: (key: any, value: any) => {};
  /** Immutable data structure handling */
  immutable?: any;
  /** Reference handling for circular objects */
  refs?: Array<any>;
}

/** Injection token for store devtools configuration */
const STORE_DEVTOOLS_CONFIG: InjectionToken<StoreDevtoolsConfig>;

/** Injection token for initial devtools options */
const INITIAL_OPTIONS: InjectionToken<StoreDevtoolsConfig>;

/** Injection token for checking if extension or monitor is present */
const IS_EXTENSION_OR_MONITOR_PRESENT: InjectionToken<boolean>;

/** Injection token for Redux DevTools extension */
const REDUX_DEVTOOLS_EXTENSION: InjectionToken<ReduxDevtoolsExtension>;

/**
 * Creates configuration object from options input
 * @param optionsInput - Configuration options
 * @returns Complete configuration object
 */
function createConfig(optionsInput: StoreDevtoolsOptions): StoreDevtoolsConfig;

/**
 * Default monitor function that returns null
 * @returns null
 */
function noMonitor(): null;

/**
 * Factory function to determine if extension or monitor is present
 * @param extension - Redux devtools extension instance
 * @param config - Devtools configuration
 * @returns True if extension or monitor is available
 */
function createIsExtensionOrMonitorPresent(
  extension: ReduxDevtoolsExtension | null,
  config: StoreDevtoolsConfig
): boolean;

/**
 * Factory function to create Redux DevTools extension instance
 * @returns Redux devtools extension or null if not available
 */
function createReduxDevtoolsExtension(): ReduxDevtoolsExtension | null;

/** Default name for devtools instance */
const DEFAULT_NAME = 'NgRx Store DevTools';