From 1ecd658e945d25eef482829eeff50d898756e20e Mon Sep 17 00:00:00 2001 From: Brandon Date: Thu, 11 Jan 2018 22:00:52 -0800 Subject: [PATCH] feat(StoreDevtools): Add option to configure extension in log-only mode (#712) Closes #643, #374 --- docs/store-devtools/README.md | 12 +++++++----- example-app/app/app.module.ts | 9 ++++----- modules/store-devtools/spec/extension.spec.ts | 4 ++++ modules/store-devtools/src/config.ts | 2 ++ modules/store-devtools/src/extension.ts | 16 ++++++++++++---- modules/store-devtools/src/instrument.ts | 8 +++++++- 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/docs/store-devtools/README.md b/docs/store-devtools/README.md index 6f9cc60ffa..1703f108aa 100644 --- 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 index c8412758a4..8d948b5ea4 100644 --- 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 index 626490dffe..972951edba 100644 --- 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 index e15e29d367..47ba8d1334 100644 --- a/modules/store-devtools/src/config.ts +++ b/modules/store-devtools/src/config.ts @@ -8,6 +8,8 @@ export class StoreDevtoolsConfig { stateSanitizer?: (state: S, index: number) => S; name?: string; serialize?: boolean; + logOnly?: boolean; + features?: any; } export const STORE_DEVTOOLS_CONFIG = new InjectionToken( diff --git a/modules/store-devtools/src/extension.ts b/modules/store-devtools/src/extension.ts index a3217797ba..088e1d795c 100644 --- 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 index 3353ac47e2..0c31d15c95 100644 --- 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(