feat(store-devtools): add provideStoreDevtools function (#3537)

Closes #3527

Author: yharaskrik

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')

modules/store-devtools/src/index.ts

@@ -8,3 +8,4 @@ export {
   DevToolsFeatureOptions,
   INITIAL_OPTIONS,
 } from './config';
+export { provideStoreDevtools } from './provide-store-devtools';

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<boolean>(
-  '@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<StoreDevtoolsModule> {
     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],
     };
   }
 }

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<boolean>(
+  '@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,
+      },
+    ],
+  };
+}