Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(StoreDevtools): Add option to configure extension in log-only mode #712

Merged
merged 1 commit into from
Jan 12, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions docs/store-devtools/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 { }
Expand All @@ -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_.

Expand Down
9 changes: 4 additions & 5 deletions example-app/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions modules/store-devtools/spec/extension.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions modules/store-devtools/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
16 changes: 12 additions & 4 deletions modules/store-devtools/src/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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));

Expand Down
8 changes: 7 additions & 1 deletion modules/store-devtools/src/instrument.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down