feat(DevTools): options to configure the Redux DevTools communication

dannyBies · zewa666 · commit 3aa2c1812750 · 2018-08-01T08:08:08.000+02:00
allows to pass connect options to initiate customised communication with the Redux DevTools fixes issue #51
diff --git a/doc/article/en-US/aurelia-store-plugin.md b/doc/article/en-US/aurelia-store-plugin.md
@@ -1670,6 +1670,37 @@ If you've ever worked with Redux then you know for sure about the [Redux Devtool
 
 There are tons of [great articles](https://codeburst.io/redux-devtools-for-dummies-74566c597d7) to get you started. Head over to [DevTools browser extension page](https://github.com/zalmoxisus/redux-devtools-extension) for instructions on how to install the extension, start your Aurelia Store plugin project and see how it works.
 
+## Defining custom devToolsOptions
+
+if you use the Redux DevTools extension you can pass options to Aurelia-Store to setup the extension with your [preferred configuration](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md).
+We can set the serialize property to an [object or boolean](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize).
+
+In the following example, we set serialize to false. This way our state will not get serialized when sending it to the extension.
+
+<code-listing heading="Initializing the DevTools extension with custom options">
+  <source-code lang="TypeScript">
+    
+    // main.ts
+
+    ...
+    aurelia.use.plugin("aurelia-store", { initialState, {
+      devToolsOptions: {
+        serialize: false
+      }, 
+    }});
+  </source-code>
+  <source-code lang="JavaScript">
+    
+    // main.js
+
+    ...
+    aurelia.use.plugin("aurelia-store", { initialState, {
+      devToolsOptions: {
+        serialize: false
+      }, 
+    }});
+  </source-code>
+</code-listing>
 
 ## Defining custom LogLevels
 
diff --git a/src/store.ts b/src/store.ts
@@ -18,12 +18,26 @@ export enum PerformanceMeasurement {
   All = "all"
 }
 
+export interface DevToolsOptions {
+  serialize?: boolean | {
+    date?: boolean;
+    regex?: boolean;
+    undefined?: boolean;
+    error?: boolean;
+    symbol?: boolean;
+    map?: boolean;
+    set?: boolean;
+    function?: boolean | Function;
+  };
+}
+
 export interface StoreOptions {
   history: Partial<HistoryOptions>;
   logDispatchedActions?: boolean;
   measurePerformance?: PerformanceMeasurement;
   propagateError?: boolean;
   logDefinitions?: LogDefinitions;
+  devToolsOptions?: DevToolsOptions;
 }
 
 interface DispatchQueueItem<T> {
@@ -258,7 +272,7 @@ export class Store<T> {
     if (PLATFORM.global.devToolsExtension) {
       this.logger[getLogType(this.options, "devToolsStatus", LogLevel.debug)]("DevTools are available");
       this.devToolsAvailable = true;
-      this.devTools = PLATFORM.global.__REDUX_DEVTOOLS_EXTENSION__.connect();
+      this.devTools = PLATFORM.global.__REDUX_DEVTOOLS_EXTENSION__.connect(this.options.devToolsOptions);
       this.devTools.init(this.initialState);
 
       this.devTools.subscribe((message: any) => {
diff --git a/test/unit/redux-devtools.spec.ts b/test/unit/redux-devtools.spec.ts
@@ -1,3 +1,4 @@
+import { DevToolsOptions } from "./../../src/store";
 import { skip, delay } from "rxjs/operators";
 
 import {
@@ -11,12 +12,14 @@ class DevToolsMock {
   public subscriptions = [];
   public init = jest.fn();
   public subscribe = jest.fn().mockImplementation((cb: (message: any) => void) => this.subscriptions.push(cb));
+
+  constructor(public devToolsOptions: DevToolsOptions) {}
 }
 
 function createDevToolsMock() {
   PAL.PLATFORM.global.devToolsExtension = {};
   PAL.PLATFORM.global.__REDUX_DEVTOOLS_EXTENSION__ = {
-    connect: () => new DevToolsMock()
+    connect: (devToolsOptions?: DevToolsOptions) => new DevToolsMock(devToolsOptions)
   }
 }
 
@@ -43,6 +46,13 @@ describe("redux devtools", () => {
     expect((store as any).devTools.init).toHaveBeenCalled();
   });
 
+  it("should use DevToolsOptions if available", () => {
+    createDevToolsMock();
+    const store = new Store<testState>({ foo: "bar " }, { devToolsOptions: { serialize: false } });
+
+    expect((store as any).devTools.devToolsOptions).toBeDefined();
+  });
+
   it("should receive time-travel notification from devtools", () => {
     createDevToolsMock();
 
