Update devtools window prop name (#58)

* chore(store): update devtools window prop name

- update prop 'devToolsExtension' to '__REDUX_DEVTOOLS_EXTENSION__'
- add package redux-devtools-extension for typings
- define some typings for window

* Delete package-lock.json

Was added by mistake

* fix(devtools): add backwards compatibility

* fix(devtools): backwards compat deToolsExtension

* Add yarn.lock changes

* fix: adjust formatting to comply with prettier

Author: wtho

packages/store/package.json

@@ -32,6 +32,7 @@
     "rxjs": "^6.0.0"
   },
   "devDependencies": {
+    "redux-devtools-extension": "^2.13.7",
     "typedoc": "0.11.1",
     "typedoc-plugin-sourcefile-url": "1.0.3"
   },

packages/store/src/components/dev-tools.ts

@@ -1,9 +1,24 @@
 import { ApplicationRef, Injectable, NgZone } from '@angular/core';
-import { Unsubscribe } from 'redux';
+import { AnyAction, StoreEnhancer, Unsubscribe } from 'redux';
+import { EnhancerOptions } from 'redux-devtools-extension';
 import { NgRedux } from './ng-redux';
 
-declare const window: any;
-const environment: any = typeof window !== 'undefined' ? window : {};
+export interface ReduxDevTools {
+  (options: EnhancerOptions): StoreEnhancer<any>;
+  listen: (
+    onMessage: (message: AnyAction) => void,
+    instanceId?: string,
+  ) => void;
+}
+
+interface WindowWithReduxDevTools extends Window {
+  __REDUX_DEVTOOLS_EXTENSION__?: ReduxDevTools;
+  devToolsExtension?: ReduxDevTools;
+}
+
+const environment: WindowWithReduxDevTools = (typeof window !== 'undefined'
+  ? window
+  : {}) as WindowWithReduxDevTools;
 
 /**
  * An angular-2-ified version of the Redux DevTools chrome extension.
@@ -22,14 +37,14 @@ export class DevToolsExtension {
    * format as described here:
    * [zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md]
    */
-  enhancer = (options?: object) => {
+  enhancer = (options?: EnhancerOptions) => {
     let subscription: Unsubscribe;
     if (!this.isEnabled()) {
       return null;
     }
 
     // Make sure changes from dev tools update angular's view.
-    environment.devToolsExtension.listen(({ type }: any) => {
+    this.getDevTools()!.listen(({ type }) => {
       if (type === 'START') {
         subscription = this.ngRedux.subscribe(() => {
           if (!NgZone.isInAngularZone()) {
@@ -41,11 +56,18 @@ export class DevToolsExtension {
       }
     });
 
-    return environment.devToolsExtension(options);
+    return this.getDevTools()!(options || {});
   };
 
   /**
    * Returns true if the extension is installed and enabled.
    */
-  isEnabled = () => environment && environment.devToolsExtension;
+  isEnabled = () => !!this.getDevTools();
+
+  /**
+   * Returns the redux devtools enhancer.
+   */
+  getDevTools = () =>
+    environment &&
+    (environment.__REDUX_DEVTOOLS_EXTENSION__ || environment.devToolsExtension);
 }

yarn.lock

@@ -8661,6 +8661,11 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redux-devtools-extension@^2.13.7:
+  version "2.13.7"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.7.tgz#14bd7a1a7c8bee7f397beb1116fd16fc9633b752"
+  integrity sha512-F2GlWMWxCTJGRjJ+GSZcGDcVAj6Pbf77FKb4C9S8eni5Eah6UBGNwxNj8K1MTtmItdZH1Wx+EvIifHN2KKcQrw==
+
 [email protected]:
   version "2.10.2"
   resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-2.10.2.tgz#3c5a5f0a6f32577c1deadf6655f257f82c6c3937"