From 6b0db4e44ffa449b049c75461925436d18cab966 Mon Sep 17 00:00:00 2001 From: Jay Bell Date: Wed, 24 Aug 2022 04:53:07 -0700 Subject: [PATCH] feat(store-devtools): add provideStoreDevtools function (#3537) Closes #3527 --- modules/store-devtools/spec/store.spec.ts | 2 +- modules/store-devtools/src/index.ts | 1 + modules/store-devtools/src/instrument.ts | 77 +---------------- .../src/provide-store-devtools.ts | 85 +++++++++++++++++++ 4 files changed, 91 insertions(+), 74 deletions(-) create mode 100644 modules/store-devtools/src/provide-store-devtools.ts diff --git a/modules/store-devtools/spec/store.spec.ts b/modules/store-devtools/spec/store.spec.ts index ec6e9ac961..d8cf91f7eb 100644 --- a/modules/store-devtools/spec/store.spec.ts +++ b/modules/store-devtools/spec/store.spec.ts @@ -15,8 +15,8 @@ import { StoreDevtoolsModule, StoreDevtoolsOptions, } from '../'; -import { IS_EXTENSION_OR_MONITOR_PRESENT } from '../src/instrument'; import { RECOMPUTE } from '../src/reducer'; +import { IS_EXTENSION_OR_MONITOR_PRESENT } from '../src/provide-store-devtools'; const counter = jasmine .createSpy('counter') diff --git a/modules/store-devtools/src/index.ts b/modules/store-devtools/src/index.ts index 09411ba52f..a2e102199a 100644 --- a/modules/store-devtools/src/index.ts +++ b/modules/store-devtools/src/index.ts @@ -8,3 +8,4 @@ export { DevToolsFeatureOptions, INITIAL_OPTIONS, } from './config'; +export { provideStoreDevtools } from './provide-store-devtools'; diff --git a/modules/store-devtools/src/instrument.ts b/modules/store-devtools/src/instrument.ts index ef186e4500..3ca5b88f48 100644 --- a/modules/store-devtools/src/instrument.ts +++ b/modules/store-devtools/src/instrument.ts @@ -1,46 +1,8 @@ -import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core'; -import { ReducerManagerDispatcher, StateObservable } from '@ngrx/store'; +import { ModuleWithProviders, NgModule } from '@angular/core'; import { Observable } from 'rxjs'; - -import { - INITIAL_OPTIONS, - STORE_DEVTOOLS_CONFIG, - StoreDevtoolsConfig, - StoreDevtoolsOptions, - noMonitor, - createConfig, -} from './config'; +import { StoreDevtoolsOptions } from './config'; import { StoreDevtools } from './devtools'; -import { - DevtoolsExtension, - REDUX_DEVTOOLS_EXTENSION, - ReduxDevtoolsExtension, -} from './extension'; -import { DevtoolsDispatcher } from './devtools-dispatcher'; - -export const IS_EXTENSION_OR_MONITOR_PRESENT = new InjectionToken( - '@ngrx/store-devtools Is Devtools Extension or Monitor Present' -); - -export function createIsExtensionOrMonitorPresent( - extension: ReduxDevtoolsExtension | null, - config: StoreDevtoolsConfig -) { - return Boolean(extension) || config.monitor !== noMonitor; -} - -export function createReduxDevtoolsExtension() { - const extensionKey = '__REDUX_DEVTOOLS_EXTENSION__'; - - if ( - typeof window === 'object' && - typeof (window as any)[extensionKey] !== 'undefined' - ) { - return (window as any)[extensionKey]; - } else { - return null; - } -} +import { provideStoreDevtools } from './provide-store-devtools'; export function createStateObservable( devtools: StoreDevtools @@ -55,38 +17,7 @@ export class StoreDevtoolsModule { ): ModuleWithProviders { return { ngModule: StoreDevtoolsModule, - providers: [ - DevtoolsExtension, - DevtoolsDispatcher, - StoreDevtools, - { - provide: INITIAL_OPTIONS, - useValue: options, - }, - { - provide: IS_EXTENSION_OR_MONITOR_PRESENT, - deps: [REDUX_DEVTOOLS_EXTENSION, STORE_DEVTOOLS_CONFIG], - useFactory: createIsExtensionOrMonitorPresent, - }, - { - provide: REDUX_DEVTOOLS_EXTENSION, - useFactory: createReduxDevtoolsExtension, - }, - { - provide: STORE_DEVTOOLS_CONFIG, - deps: [INITIAL_OPTIONS], - useFactory: createConfig, - }, - { - provide: StateObservable, - deps: [StoreDevtools], - useFactory: createStateObservable, - }, - { - provide: ReducerManagerDispatcher, - useExisting: DevtoolsDispatcher, - }, - ], + providers: [...provideStoreDevtools(options).ɵproviders], }; } } diff --git a/modules/store-devtools/src/provide-store-devtools.ts b/modules/store-devtools/src/provide-store-devtools.ts new file mode 100644 index 0000000000..f95533dcb9 --- /dev/null +++ b/modules/store-devtools/src/provide-store-devtools.ts @@ -0,0 +1,85 @@ +import { InjectionToken } from '@angular/core'; +import { + DevtoolsExtension, + REDUX_DEVTOOLS_EXTENSION, + ReduxDevtoolsExtension, +} from './extension'; +import { DevtoolsDispatcher } from './devtools-dispatcher'; +import { + createConfig, + INITIAL_OPTIONS, + noMonitor, + STORE_DEVTOOLS_CONFIG, + StoreDevtoolsConfig, + StoreDevtoolsOptions, +} from './config'; +import { + EnvironmentProviders, + ReducerManagerDispatcher, + StateObservable, +} from '@ngrx/store'; +import { createStateObservable } from './instrument'; +import { StoreDevtools } from './devtools'; + +export const IS_EXTENSION_OR_MONITOR_PRESENT = new InjectionToken( + '@ngrx/store-devtools Is Devtools Extension or Monitor Present' +); + +export function createIsExtensionOrMonitorPresent( + extension: ReduxDevtoolsExtension | null, + config: StoreDevtoolsConfig +) { + return Boolean(extension) || config.monitor !== noMonitor; +} + +export function createReduxDevtoolsExtension() { + const extensionKey = '__REDUX_DEVTOOLS_EXTENSION__'; + + if ( + typeof window === 'object' && + typeof (window as any)[extensionKey] !== 'undefined' + ) { + return (window as any)[extensionKey]; + } else { + return null; + } +} + +export function provideStoreDevtools( + options: StoreDevtoolsOptions = {} +): EnvironmentProviders { + return { + ɵproviders: [ + DevtoolsExtension, + DevtoolsDispatcher, + StoreDevtools, + { + provide: INITIAL_OPTIONS, + useValue: options, + }, + { + provide: IS_EXTENSION_OR_MONITOR_PRESENT, + deps: [REDUX_DEVTOOLS_EXTENSION, STORE_DEVTOOLS_CONFIG], + useFactory: createIsExtensionOrMonitorPresent, + }, + { + provide: REDUX_DEVTOOLS_EXTENSION, + useFactory: createReduxDevtoolsExtension, + }, + { + provide: STORE_DEVTOOLS_CONFIG, + deps: [INITIAL_OPTIONS], + useFactory: createConfig, + }, + { + provide: StateObservable, + deps: [StoreDevtools], + useFactory: createStateObservable, + }, + { + provide: ReducerManagerDispatcher, + useExisting: DevtoolsDispatcher, + }, + ], + }; +}