feat(StoreDevtools): Add option to configure extension in log-only mo…

…de (#712) Closes #643, #374
ngrx · Jan 12, 2018 · 1ecd658 · 1ecd658
1 parent fb8d2c6
commit 1ecd658
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/docs/store-devtools/README.md b/docs/store-devtools/README.md
@@ -30,11 +30,10 @@ import { environment } from '../environments/environment'; // Angular CLI enviro
   imports: [
     StoreModule.forRoot(reducers),
     // Instrumentation must be imported after importing StoreModule (config is optional)
-    !environment.production ?
-      StoreDevtoolsModule.instrument({
-        maxAge: 25 // Retains last 25 states
-      })
-      : [],
+    StoreDevtoolsModule.instrument({
+      maxAge: 25 // Retains last 25 states,
+      logOnly: environment.production // Restrict extension to log-only mode
+    })
   ]
 })
 export class AppModule { }
@@ -46,6 +45,9 @@ When you call the instrumentation, you can give an optional configuration object
 #### `maxAge`
 number (>1) | false - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `false` (infinite).
 
+#### `logOnly`
+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).
+
 #### `name`
 string - the instance name to be showed on the monitor page. Default value is _NgRx Store DevTools_.
 

diff --git a/example-app/app/app.module.ts b/example-app/app/app.module.ts
@@ -63,11 +63,10 @@ import { environment } from '../environments/environment';
      *
      * See: https://github.com/zalmoxisus/redux-devtools-extension
      */
-    !environment.production
-      ? StoreDevtoolsModule.instrument({
-          name: 'NgRx Book Store DevTools',
-        })
-      : [],
+    StoreDevtoolsModule.instrument({
+      name: 'NgRx Book Store DevTools',
+      logOnly: environment.production,
+    }),
 
     /**
      * EffectsModule.forRoot() is imported once in the root module and

diff --git a/modules/store-devtools/spec/extension.spec.ts b/modules/store-devtools/spec/extension.spec.ts
@@ -36,6 +36,8 @@ describe('DevtoolsExtension', () => {
         stateSanitizer: noStateSanitizer,
         name: 'NgRx Store DevTools',
         serialize: false,
+        logOnly: false,
+        features: false,
       };
       const action = {} as Action;
       const state = {} as LiftedState;
@@ -71,6 +73,8 @@ describe('DevtoolsExtension', () => {
         stateSanitizer: myStateSanitizer,
         name: 'ngrx-store-devtool-todolist',
         serialize: false,
+        logOnly: false,
+        features: false,
       };
       const action = {} as Action;
       const state = {} as LiftedState;

diff --git a/modules/store-devtools/src/config.ts b/modules/store-devtools/src/config.ts
@@ -8,6 +8,8 @@ export class StoreDevtoolsConfig {
   stateSanitizer?: <S>(state: S, index: number) => S;
   name?: string;
   serialize?: boolean;
+  logOnly?: boolean;
+  features?: any;
 }
 
 export const STORE_DEVTOOLS_CONFIG = new InjectionToken<StoreDevtoolsConfig>(

diff --git a/modules/store-devtools/src/extension.ts b/modules/store-devtools/src/extension.ts
@@ -27,13 +27,18 @@ export interface ReduxDevtoolsExtensionConnection {
   subscribe(listener: (change: any) => void): void;
   unsubscribe(): void;
   send(action: any, state: any): void;
+  init(state?: any): void;
+}
+export interface ReduxDevtoolsExtensionConfig {
+  features?: object | boolean;
+  name: string | undefined;
+  instanceId: string;
 }
 
 export interface ReduxDevtoolsExtension {
-  connect(options: {
-    shouldStringify?: boolean;
-    instanceId: string;
-  }): ReduxDevtoolsExtensionConnection;
+  connect(
+    options: ReduxDevtoolsExtensionConfig
+  ): ReduxDevtoolsExtensionConnection;
   send(
     action: any,
     state: any,
@@ -74,7 +79,10 @@ export class DevtoolsExtension {
     return new Observable(subscriber => {
       const connection = this.devtoolsExtension.connect({
         instanceId: this.instanceId,
+        name: this.config.name,
+        features: this.config.features,
       });
+      connection.init();
 
       connection.subscribe((change: any) => subscriber.next(change));
 

diff --git a/modules/store-devtools/src/instrument.ts b/modules/store-devtools/src/instrument.ts
@@ -84,10 +84,16 @@ export function createConfig(
     stateSanitizer: noStateSanitizer,
     name: DEFAULT_NAME,
     serialize: false,
+    logOnly: false,
+    features: false,
   };
 
   let options = typeof _options === 'function' ? _options() : _options;
-  const config = Object.assign({}, DEFAULT_OPTIONS, options);
+  const logOnly = options.logOnly
+    ? { pause: true, export: true, test: true }
+    : false;
+  const features = options.features || logOnly;
+  const config = Object.assign({}, DEFAULT_OPTIONS, { features }, options);
 
   if (config.maxAge && config.maxAge < 2) {
     throw new Error(