feat(store-devtools): add autoPause option (#2941)

Closes #2722

modules/store-devtools/schematics/ng-add/schema.json

@@ -31,6 +31,11 @@
       "type": "number",
       "default": 25,
       "description": "number (>1) | 0 - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. 0 is infinite. Default is 25 for performance reasons."
+    },
+    "autoPause": {
+      "type": "boolean",
+      "default": false,
+      "description": "boolean - pauses recording actions and state changes when the extension window is not open."
     }
   },
   "required": []

modules/store-devtools/schematics/ng-add/schema.ts

@@ -4,4 +4,5 @@ export interface Schema {
   project?: string;
   module?: string;
   maxAge?: number;
+  autoPause?: boolean;
 }

modules/store-devtools/spec/config.spec.ts

@@ -26,6 +26,7 @@ describe('StoreDevtoolsOptions', () => {
       name: DEFAULT_NAME,
       serialize: false,
       logOnly: false,
+      autoPause: false,
       features: defaultFeatures,
     });
   });
@@ -43,6 +44,7 @@ describe('StoreDevtoolsOptions', () => {
       stateSanitizer,
       name: 'ABC',
       serialize: true,
+      autoPause: true,
       features: {
         test: true,
       },
@@ -55,6 +57,7 @@ describe('StoreDevtoolsOptions', () => {
       name: 'ABC',
       serialize: true,
       logOnly: false,
+      autoPause: true,
       features: {
         test: true,
       },
@@ -71,6 +74,7 @@ describe('StoreDevtoolsOptions', () => {
       name: DEFAULT_NAME,
       serialize: false,
       logOnly: false,
+      autoPause: false,
       features: defaultFeatures,
     });
   });
@@ -87,6 +91,7 @@ describe('StoreDevtoolsOptions', () => {
       name: DEFAULT_NAME,
       serialize: false,
       logOnly: true,
+      autoPause: false,
       features: {
         pause: true,
         export: true,

modules/store-devtools/spec/extension.spec.ts

@@ -25,12 +25,14 @@ function createOptions(
     test: true,
   },
   serialize: boolean | undefined = false,
-  maxAge: false | number = false
+  maxAge: false | number = false,
+  autoPause: boolean = false
 ) {
   const options: ReduxDevtoolsExtensionConfig = {
     name,
     features,
     serialize,
+    autoPause,
   };
   if (maxAge !== false /* support === 0 */) {
     options.maxAge = maxAge;
@@ -115,6 +117,7 @@ describe('DevtoolsExtension', () => {
         name: 'ngrx-store-devtool-todolist',
         maxAge: 10,
         serialize: true,
+        autoPause: true,
         // these two should not be added
         actionSanitizer: myActionSanitizer,
         stateSanitizer: myStateSanitizer,
@@ -127,7 +130,8 @@ describe('DevtoolsExtension', () => {
       'ngrx-store-devtool-todolist',
       undefined,
       true,
-      10
+      10,
+      true
     );
     expect(reduxDevtoolsExtension.connect).toHaveBeenCalledWith(options);
   });

modules/store-devtools/src/config.ts

@@ -36,6 +36,7 @@ export class StoreDevtoolsConfig {
   actionsBlocklist?: string[];
   actionsSafelist?: string[];
   predicate?: Predicate;
+  autoPause?: boolean;
 }
 
 export const STORE_DEVTOOLS_CONFIG = new InjectionToken<StoreDevtoolsConfig>(
@@ -66,6 +67,7 @@ export function createConfig(
     name: DEFAULT_NAME,
     serialize: false,
     logOnly: false,
+    autoPause: false,
     // Add all features explicitly. This prevent buggy behavior for
     // options like "lock" which might otherwise not show up.
     features: {

modules/store-devtools/src/extension.ts

@@ -54,6 +54,7 @@ export interface ReduxDevtoolsExtensionConfig {
   features?: object | boolean;
   name: string | undefined;
   maxAge?: number;
+  autoPause?: boolean;
   serialize?: boolean | SerializationOptions;
 }
 
@@ -241,6 +242,7 @@ export class DevtoolsExtension {
       name: config.name,
       features: config.features,
       serialize: config.serialize,
+      autoPause: config.autoPause ?? false,
       // The action/state sanitizers are not added to the config
       // because sanitation is done in this class already.
       // It is done before sending it to the devtools extension for consistency:

projects/ngrx.io/content/guide/store-devtools/config.md

@@ -12,6 +12,10 @@ number (>1) | `false` - maximum allowed actions to be stored in the history tree
 
 boolean - connect to the Devtools Extension in log-only mode. Default is `false` which enables all extension [features](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#features).
 
+### `autoPause`
+
+boolean - Pauses recording actions and state changes when the extension window is not open. Default is `false`.
+
 ### `name`
 
 string - the instance name to show on the monitor page. Default value is NgRx Store DevTools.
@@ -75,6 +79,7 @@ features: {
     StoreDevtoolsModule.instrument({
       maxAge: 25,
       logOnly: false,
+      autoPause: true,
       features: {
         pause: false,
         lock: true,

projects/ngrx.io/content/guide/store-devtools/index.md

@@ -25,6 +25,7 @@ import { environment } from '../environments/environment'; // Angular CLI enviro
     StoreDevtoolsModule.instrument({
       maxAge: 25, // Retains last 25 states
       logOnly: environment.production, // Restrict extension to log-only mode
+      autoPause: true, // Pauses recording actions and state changes when the extension window is not open
     }),
   ],
 })