feat(StoreDevtools): Add support for extension sanitizers (#544)

Closes #494

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

@@ -7,4 +7,22 @@ describe('StoreDevtoolsOptions', () => {
     options.name = 'my instance';
     expect(options.name).toBe('my instance');
   });
+
+  it('can be initialized with actionSanitizer', () => {
+    const options = new StoreDevtoolsConfig();
+    function sanitizer(action: Action, id: number): Action {
+      return action;
+    }
+    options.actionSanitizer = sanitizer;
+    expect(options.actionSanitizer).toEqual(sanitizer);
+  });
+
+  it('can be initialized with stateSanitizer', () => {
+    const options = new StoreDevtoolsConfig();
+    function stateSanitizer(state: any, index: number): any {
+      return state;
+    }
+    options.stateSanitizer = stateSanitizer;
+    expect(options.stateSanitizer).toEqual(stateSanitizer);
+  });
 });

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

@@ -1,21 +1,14 @@
-import {
-  StoreDevtools,
-  StoreDevtoolsModule,
-  LiftedState,
-  StoreDevtoolsConfig,
-  StoreDevtoolsOptions,
-} from '../';
-import {
-  StoreModule,
-  Store,
-  StateObservable,
-  ActionReducer,
-  Action,
-  ReducerManager,
-} from '@ngrx/store';
+import { Action } from '@ngrx/store';
 import { of } from 'rxjs/observable/of';
-import { createConfig, noMonitor } from '../src/instrument';
+
+import { LiftedState } from '../';
 import { DevtoolsExtension, ReduxDevtoolsExtension } from '../src/extension';
+import {
+  createConfig,
+  noActionSanitizer,
+  noMonitor,
+  noStateSanitizer,
+} from '../src/instrument';
 
 describe('DevtoolsExtension', () => {
   let reduxDevtoolsExtension: ReduxDevtoolsExtension;
@@ -39,6 +32,8 @@ describe('DevtoolsExtension', () => {
       const defaultOptions = {
         maxAge: false,
         monitor: noMonitor,
+        actionSanitizer: noActionSanitizer,
+        stateSanitizer: noStateSanitizer,
         name: 'NgRx Store DevTools',
         serialize: false,
       };
@@ -52,16 +47,28 @@ describe('DevtoolsExtension', () => {
         'ngrx-store-1509655064369'
       );
     });
+
+    function myActionSanitizer() {
+      return { type: 'sanitizer' };
+    }
+    function myStateSanitizer() {
+      return { state: 'new state' };
+    }
+
     it('should send notification with given options', () => {
       devtoolsExtension = new DevtoolsExtension(
         reduxDevtoolsExtension,
         createConfig({
+          actionSanitizer: myActionSanitizer,
+          stateSanitizer: myStateSanitizer,
           name: 'ngrx-store-devtool-todolist',
         })
       );
       const defaultOptions = {
         maxAge: false,
         monitor: noMonitor,
+        actionSanitizer: myActionSanitizer,
+        stateSanitizer: myStateSanitizer,
         name: 'ngrx-store-devtool-todolist',
         serialize: false,
       };

modules/store-devtools/src/config.ts

@@ -2,8 +2,10 @@ import { ActionReducer, Action } from '@ngrx/store';
 import { InjectionToken, Type } from '@angular/core';
 
 export class StoreDevtoolsConfig {
-  maxAge?: number | false;
-  monitor?: ActionReducer<any, any>;
+  maxAge: number | false;
+  monitor: ActionReducer<any, any>;
+  actionSanitizer?: <A extends Action>(action: A, id: number) => A;
+  stateSanitizer?: <S>(state: S, index: number) => S;
   name?: string;
   serialize?: boolean;
 }

modules/store-devtools/src/devtools.ts

@@ -49,11 +49,7 @@ export class StoreDevtools implements Observer<any> {
       initialState,
       liftedInitialState,
       config.monitor,
-      {
-        maxAge: config.maxAge as number,
-        name: config.name,
-        serialize: config.serialize,
-      }
+      config
     );
 
     const liftedAction$ = applyOperators(actions$.asObservable(), [

modules/store-devtools/src/instrument.ts

@@ -64,6 +64,14 @@ export function noMonitor(): null {
   return null;
 }
 
+export function noActionSanitizer(): null {
+  return null;
+}
+
+export function noStateSanitizer(): null {
+  return null;
+}
+
 export const DEFAULT_NAME = 'NgRx Store DevTools';
 
 export function createConfig(
@@ -72,6 +80,8 @@ export function createConfig(
   const DEFAULT_OPTIONS: StoreDevtoolsConfig = {
     maxAge: false,
     monitor: noMonitor,
+    actionSanitizer: noActionSanitizer,
+    stateSanitizer: noStateSanitizer,
     name: DEFAULT_NAME,
     serialize: false,
   };

modules/store-devtools/src/reducer.ts

@@ -6,7 +6,6 @@ import {
   UPDATE,
   INIT,
 } from '@ngrx/store';
-
 import { difference, liftAction } from './utils';
 import * as Actions from './actions';
 import { StoreDevtoolsConfig } from './config';