@ngxs/devtools-plugin 3.7.3 → 3.7.4

package/fesm2015/ngxs-devtools-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ngxs-devtools-plugin.js","sources":["ng://@ngxs/devtools-plugin/src/symbols.ts","ng://@ngxs/devtools-plugin/src/devtools.plugin.ts","ng://@ngxs/devtools-plugin/src/devtools.module.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\n\r\n/**\r\n * Interface for the redux-devtools-extension API.\r\n */\r\nexport interface NgxsDevtoolsExtension {\r\n  init(state: any): void;\r\n  send(action: any, state?: any): void;\r\n  subscribe(fn: (message: NgxsDevtoolsAction) => void): Subscription;\r\n}\r\n\r\nexport interface NgxsDevtoolsAction {\r\n  type: string;\r\n  payload: any;\r\n  state: any;\r\n  id: number;\r\n  source: string;\r\n}\r\n\r\nexport interface NgxsDevtoolsOptions {\r\n  /**\r\n   * The name of the extension\r\n   */\r\n  name?: string;\r\n\r\n  /**\r\n   * Whether the dev tools is enabled or note. Useful for setting during production.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Max number of entiries to keep.\r\n   */\r\n  maxAge?: number;\r\n\r\n  /**\r\n   * Reformat actions before sending to dev tools\r\n   */\r\n  actionSanitizer?: (action: any) => void;\r\n\r\n  /**\r\n   * Reformat state before sending to devtools\r\n   */\r\n  stateSanitizer?: (state: any) => void;\r\n}\r\n\r\nexport const NGXS_DEVTOOLS_OPTIONS = new InjectionToken('NGXS_DEVTOOLS_OPTIONS');\r\n","import { Inject, Injectable, Injector } from '@angular/core';\r\nimport { getActionTypeFromInstance, NgxsNextPluginFn, NgxsPlugin, Store } from '@ngxs/store';\r\nimport { tap, catchError } from 'rxjs/operators';\r\n\r\nimport {\r\n  NGXS_DEVTOOLS_OPTIONS,\r\n  NgxsDevtoolsAction,\r\n  NgxsDevtoolsExtension,\r\n  NgxsDevtoolsOptions\r\n} from './symbols';\r\n\r\n/**\r\n * Adds support for the Redux Devtools extension:\r\n * http://extension.remotedev.io/\r\n */\r\n@Injectable()\r\nexport class NgxsReduxDevtoolsPlugin implements NgxsPlugin {\r\n  private readonly devtoolsExtension: NgxsDevtoolsExtension | null = null;\r\n  private readonly windowObj: any = typeof window !== 'undefined' ? window : {};\r\n\r\n  constructor(\r\n    @Inject(NGXS_DEVTOOLS_OPTIONS) private _options: NgxsDevtoolsOptions,\r\n    private _injector: Injector\r\n  ) {\r\n    const globalDevtools =\r\n      this.windowObj['__REDUX_DEVTOOLS_EXTENSION__'] || this.windowObj['devToolsExtension'];\r\n    if (globalDevtools) {\r\n      this.devtoolsExtension = globalDevtools.connect(_options) as NgxsDevtoolsExtension;\r\n      this.devtoolsExtension.subscribe(a => this.dispatched(a));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Lazy get the store for circular dependency issues\r\n   */\r\n  private get store(): Store {\r\n    return this._injector.get<Store>(Store);\r\n  }\r\n\r\n  /**\r\n   * Middleware handle function\r\n   */\r\n  handle(state: any, action: any, next: NgxsNextPluginFn) {\r\n    const isDisabled = this._options && this._options.disabled;\r\n    if (!this.devtoolsExtension || isDisabled) {\r\n      return next(state, action);\r\n    }\r\n\r\n    return next(state, action).pipe(\r\n      catchError(error => {\r\n        const newState = this.store.snapshot();\r\n        this.sendToDevTools(state, action, newState);\r\n        throw error;\r\n      }),\r\n      tap(newState => {\r\n        this.sendToDevTools(state, action, newState);\r\n      })\r\n    );\r\n  }\r\n\r\n  private sendToDevTools(state: any, action: any, newState: any) {\r\n    const type = getActionTypeFromInstance(action);\r\n    // if init action, send initial state to dev tools\r\n    const isInitAction = type === '@@INIT';\r\n    if (isInitAction) {\r\n      this.devtoolsExtension!.init(state);\r\n    } else {\r\n      this.devtoolsExtension!.send({ ...action, action: null, type }, newState);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle the action from the dev tools subscription\r\n   */\r\n  dispatched(action: NgxsDevtoolsAction) {\r\n    if (action.type === 'DISPATCH') {\r\n      if (\r\n        action.payload.type === 'JUMP_TO_ACTION' ||\r\n        action.payload.type === 'JUMP_TO_STATE'\r\n      ) {\r\n        const prevState = JSON.parse(action.state);\r\n        this.store.reset(prevState);\r\n      } else if (action.payload.type === 'TOGGLE_ACTION') {\r\n        console.warn('Skip is not supported at this time.');\r\n      } else if (action.payload.type === 'IMPORT_STATE') {\r\n        const {\r\n          actionsById,\r\n          computedStates,\r\n          currentStateIndex\r\n        } = action.payload.nextLiftedState;\r\n        this.devtoolsExtension!.init(computedStates[0].state);\r\n        Object.keys(actionsById)\r\n          .filter(actionId => actionId !== '0')\r\n          .forEach(actionId =>\r\n            this.devtoolsExtension!.send(actionsById[actionId], computedStates[actionId].state)\r\n          );\r\n        this.store.reset(computedStates[currentStateIndex].state);\r\n      }\r\n    } else if (action.type === 'ACTION') {\r\n      const actionPayload = JSON.parse(action.payload);\r\n      this.store.dispatch(actionPayload);\r\n    }\r\n  }\r\n}\r\n","import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';\r\nimport { NGXS_PLUGINS } from '@ngxs/store';\r\n\r\nimport { NgxsDevtoolsOptions, NGXS_DEVTOOLS_OPTIONS } from './symbols';\r\nimport { NgxsReduxDevtoolsPlugin } from './devtools.plugin';\r\n\r\nexport function devtoolsOptionsFactory(options: NgxsDevtoolsOptions) {\r\n  return {\r\n    name: 'NGXS',\r\n    ...options\r\n  };\r\n}\r\n\r\nexport const USER_OPTIONS = new InjectionToken('USER_OPTIONS');\r\n\r\n@NgModule()\r\nexport class NgxsReduxDevtoolsPluginModule {\r\n  static forRoot(\r\n    options?: NgxsDevtoolsOptions\r\n  ): ModuleWithProviders<NgxsReduxDevtoolsPluginModule> {\r\n    return {\r\n      ngModule: NgxsReduxDevtoolsPluginModule,\r\n      providers: [\r\n        {\r\n          provide: NGXS_PLUGINS,\r\n          useClass: NgxsReduxDevtoolsPlugin,\r\n          multi: true\r\n        },\r\n        {\r\n          provide: USER_OPTIONS,\r\n          useValue: options\r\n        },\r\n        {\r\n          provide: NGXS_DEVTOOLS_OPTIONS,\r\n          useFactory: devtoolsOptionsFactory,\r\n          deps: [USER_OPTIONS]\r\n        }\r\n      ]\r\n    };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngxs-devtools-plugin.js","sources":["ng://@ngxs/devtools-plugin/src/symbols.ts","ng://@ngxs/devtools-plugin/src/devtools.plugin.ts","ng://@ngxs/devtools-plugin/src/devtools.module.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\n/**\r\n * Interface for the redux-devtools-extension API.\r\n */\r\nexport interface NgxsDevtoolsExtension {\r\n  init(state: any): void;\r\n  send(action: any, state?: any): void;\r\n  subscribe(fn: (message: NgxsDevtoolsAction) => void): VoidFunction;\r\n}\r\n\r\nexport interface NgxsDevtoolsAction {\r\n  type: string;\r\n  payload: any;\r\n  state: any;\r\n  id: number;\r\n  source: string;\r\n}\r\n\r\nexport interface NgxsDevtoolsOptions {\r\n  /**\r\n   * The name of the extension\r\n   */\r\n  name?: string;\r\n\r\n  /**\r\n   * Whether the dev tools is enabled or note. Useful for setting during production.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Max number of entiries to keep.\r\n   */\r\n  maxAge?: number;\r\n\r\n  /**\r\n   * Reformat actions before sending to dev tools\r\n   */\r\n  actionSanitizer?: (action: any) => void;\r\n\r\n  /**\r\n   * Reformat state before sending to devtools\r\n   */\r\n  stateSanitizer?: (state: any) => void;\r\n}\r\n\r\nexport const NGXS_DEVTOOLS_OPTIONS = new InjectionToken('NGXS_DEVTOOLS_OPTIONS');\r\n","import { Inject, Injectable, Injector, NgZone, OnDestroy, ɵglobal } from '@angular/core';\r\nimport { getActionTypeFromInstance, NgxsNextPluginFn, NgxsPlugin, Store } from '@ngxs/store';\r\nimport { tap, catchError } from 'rxjs/operators';\r\n\r\nimport {\r\n  NGXS_DEVTOOLS_OPTIONS,\r\n  NgxsDevtoolsAction,\r\n  NgxsDevtoolsExtension,\r\n  NgxsDevtoolsOptions\r\n} from './symbols';\r\n\r\nconst enum ReduxDevtoolsActionType {\r\n  Dispatch = 'DISPATCH',\r\n  Action = 'ACTION'\r\n}\r\n\r\nconst enum ReduxDevtoolsPayloadType {\r\n  JumpToAction = 'JUMP_TO_ACTION',\r\n  JumpToState = 'JUMP_TO_STATE',\r\n  ToggleAction = 'TOGGLE_ACTION',\r\n  ImportState = 'IMPORT_STATE'\r\n}\r\n\r\n/**\r\n * Adds support for the Redux Devtools extension:\r\n * http://extension.remotedev.io/\r\n */\r\n@Injectable()\r\nexport class NgxsReduxDevtoolsPlugin implements OnDestroy, NgxsPlugin {\r\n  private devtoolsExtension: NgxsDevtoolsExtension | null = null;\r\n  private readonly globalDevtools =\r\n    ɵglobal['__REDUX_DEVTOOLS_EXTENSION__'] || ɵglobal['devToolsExtension'];\r\n\r\n  private unsubscribe: VoidFunction | null = null;\r\n\r\n  constructor(\r\n    @Inject(NGXS_DEVTOOLS_OPTIONS) private _options: NgxsDevtoolsOptions,\r\n    private _injector: Injector,\r\n    private _ngZone: NgZone\r\n  ) {\r\n    this.connect();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.unsubscribe !== null) {\r\n      this.unsubscribe();\r\n    }\r\n    if (this.globalDevtools) {\r\n      this.globalDevtools.disconnect();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Lazy get the store for circular dependency issues\r\n   */\r\n  private get store(): Store {\r\n    return this._injector.get<Store>(Store);\r\n  }\r\n\r\n  /**\r\n   * Middleware handle function\r\n   */\r\n  handle(state: any, action: any, next: NgxsNextPluginFn) {\r\n    if (!this.devtoolsExtension || this._options.disabled) {\r\n      return next(state, action);\r\n    }\r\n\r\n    return next(state, action).pipe(\r\n      catchError(error => {\r\n        const newState = this.store.snapshot();\r\n        this.sendToDevTools(state, action, newState);\r\n        throw error;\r\n      }),\r\n      tap(newState => {\r\n        this.sendToDevTools(state, action, newState);\r\n      })\r\n    );\r\n  }\r\n\r\n  private sendToDevTools(state: any, action: any, newState: any) {\r\n    const type = getActionTypeFromInstance(action);\r\n    // if init action, send initial state to dev tools\r\n    const isInitAction = type === '@@INIT';\r\n    if (isInitAction) {\r\n      this.devtoolsExtension!.init(state);\r\n    } else {\r\n      this.devtoolsExtension!.send({ ...action, action: null, type }, newState);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle the action from the dev tools subscription\r\n   */\r\n  dispatched(action: NgxsDevtoolsAction) {\r\n    if (action.type === ReduxDevtoolsActionType.Dispatch) {\r\n      if (\r\n        action.payload.type === ReduxDevtoolsPayloadType.JumpToAction ||\r\n        action.payload.type === ReduxDevtoolsPayloadType.JumpToState\r\n      ) {\r\n        const prevState = JSON.parse(action.state);\r\n        this.store.reset(prevState);\r\n      } else if (action.payload.type === ReduxDevtoolsPayloadType.ToggleAction) {\r\n        console.warn('Skip is not supported at this time.');\r\n      } else if (action.payload.type === ReduxDevtoolsPayloadType.ImportState) {\r\n        const {\r\n          actionsById,\r\n          computedStates,\r\n          currentStateIndex\r\n        } = action.payload.nextLiftedState;\r\n        this.devtoolsExtension!.init(computedStates[0].state);\r\n        Object.keys(actionsById)\r\n          .filter(actionId => actionId !== '0')\r\n          .forEach(actionId =>\r\n            this.devtoolsExtension!.send(actionsById[actionId], computedStates[actionId].state)\r\n          );\r\n        this.store.reset(computedStates[currentStateIndex].state);\r\n      }\r\n    } else if (action.type === ReduxDevtoolsActionType.Action) {\r\n      const actionPayload = JSON.parse(action.payload);\r\n      this.store.dispatch(actionPayload);\r\n    }\r\n  }\r\n\r\n  private connect(): void {\r\n    if (!this.globalDevtools || this._options.disabled) {\r\n      return;\r\n    }\r\n\r\n    // The `connect` method adds `message` event listener since it communicates\r\n    // with an extension through `window.postMessage` and message events.\r\n    // We handle only 2 events; thus, we don't want to run many change detections\r\n    // because the extension sends events that we don't have to handle.\r\n    this.devtoolsExtension = this._ngZone.runOutsideAngular(\r\n      () => <NgxsDevtoolsExtension>this.globalDevtools.connect(this._options)\r\n    );\r\n\r\n    this.unsubscribe = this.devtoolsExtension.subscribe(action => {\r\n      if (\r\n        action.type === ReduxDevtoolsActionType.Dispatch ||\r\n        action.type === ReduxDevtoolsActionType.Action\r\n      ) {\r\n        this._ngZone.run(() => {\r\n          this.dispatched(action);\r\n        });\r\n      }\r\n    });\r\n  }\r\n}\r\n","import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';\r\nimport { NGXS_PLUGINS } from '@ngxs/store';\r\n\r\nimport { NgxsDevtoolsOptions, NGXS_DEVTOOLS_OPTIONS } from './symbols';\r\nimport { NgxsReduxDevtoolsPlugin } from './devtools.plugin';\r\n\r\nexport function devtoolsOptionsFactory(options: NgxsDevtoolsOptions) {\r\n  return {\r\n    name: 'NGXS',\r\n    ...options\r\n  };\r\n}\r\n\r\nexport const USER_OPTIONS = new InjectionToken('USER_OPTIONS');\r\n\r\n@NgModule()\r\nexport class NgxsReduxDevtoolsPluginModule {\r\n  static forRoot(\r\n    options?: NgxsDevtoolsOptions\r\n  ): ModuleWithProviders<NgxsReduxDevtoolsPluginModule> {\r\n    return {\r\n      ngModule: NgxsReduxDevtoolsPluginModule,\r\n      providers: [\r\n        {\r\n          provide: NGXS_PLUGINS,\r\n          useClass: NgxsReduxDevtoolsPlugin,\r\n          multi: true\r\n        },\r\n        {\r\n          provide: USER_OPTIONS,\r\n          useValue: options\r\n        },\r\n        {\r\n          provide: NGXS_DEVTOOLS_OPTIONS,\r\n          useFactory: devtoolsOptionsFactory,\r\n          deps: [USER_OPTIONS]\r\n        }\r\n      ]\r\n    };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/fesm5/ngxs-devtools-plugin.js

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import { InjectionToken, Injectable, Inject, Injector, NgModule } from '@angular/core';
+import { InjectionToken, ɵglobal, Injectable, Inject, Injector, NgZone, NgModule } from '@angular/core';
 import { Store, getActionTypeFromInstance, NGXS_PLUGINS } from '@ngxs/store';
 import { catchError, tap } from 'rxjs/operators';
 
@@ -84,28 +84,46 @@ var NGXS_DEVTOOLS_OPTIONS = new InjectionToken('NGXS_DEVTOOLS_OPTIONS');
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @enum {string} */
+var ReduxDevtoolsActionType = {
+    Dispatch: 'DISPATCH',
+    Action: 'ACTION',
+};
+/** @enum {string} */
+var ReduxDevtoolsPayloadType = {
+    JumpToAction: 'JUMP_TO_ACTION',
+    JumpToState: 'JUMP_TO_STATE',
+    ToggleAction: 'TOGGLE_ACTION',
+    ImportState: 'IMPORT_STATE',
+};
 /**
  * Adds support for the Redux Devtools extension:
  * http://extension.remotedev.io/
  */
 var NgxsReduxDevtoolsPlugin = /** @class */ (function () {
-    function NgxsReduxDevtoolsPlugin(_options, _injector) {
-        var _this = this;
+    function NgxsReduxDevtoolsPlugin(_options, _injector, _ngZone) {
         this._options = _options;
         this._injector = _injector;
+        this._ngZone = _ngZone;
         this.devtoolsExtension = null;
-        this.windowObj = typeof window !== 'undefined' ? window : {};
-        /** @type {?} */
-        var globalDevtools = this.windowObj['__REDUX_DEVTOOLS_EXTENSION__'] || this.windowObj['devToolsExtension'];
-        if (globalDevtools) {
-            this.devtoolsExtension = (/** @type {?} */ (globalDevtools.connect(_options)));
-            this.devtoolsExtension.subscribe((/**
-             * @param {?} a
-             * @return {?}
-             */
-            function (a) { return _this.dispatched(a); }));
-        }
+        this.globalDevtools = ɵglobal['__REDUX_DEVTOOLS_EXTENSION__'] || ɵglobal['devToolsExtension'];
+        this.unsubscribe = null;
+        this.connect();
     }
+    /**
+     * @return {?}
+     */
+    NgxsReduxDevtoolsPlugin.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        if (this.unsubscribe !== null) {
+            this.unsubscribe();
+        }
+        if (this.globalDevtools) {
+            this.globalDevtools.disconnect();
+        }
+    };
     Object.defineProperty(NgxsReduxDevtoolsPlugin.prototype, "store", {
         /**
          * Lazy get the store for circular dependency issues
@@ -140,9 +158,7 @@ var NgxsReduxDevtoolsPlugin = /** @class */ (function () {
      */
     function (state, action, next) {
         var _this = this;
-        /** @type {?} */
-        var isDisabled = this._options && this._options.disabled;
-        if (!this.devtoolsExtension || isDisabled) {
+        if (!this.devtoolsExtension || this._options.disabled) {
             return next(state, action);
         }
         return next(state, action).pipe(catchError((/**
@@ -204,17 +220,17 @@ var NgxsReduxDevtoolsPlugin = /** @class */ (function () {
      */
     function (action) {
         var _this = this;
-        if (action.type === 'DISPATCH') {
-            if (action.payload.type === 'JUMP_TO_ACTION' ||
-                action.payload.type === 'JUMP_TO_STATE') {
+        if (action.type === "DISPATCH" /* Dispatch */) {
+            if (action.payload.type === "JUMP_TO_ACTION" /* JumpToAction */ ||
+                action.payload.type === "JUMP_TO_STATE" /* JumpToState */) {
                 /** @type {?} */
                 var prevState = JSON.parse(action.state);
                 this.store.reset(prevState);
             }
-            else if (action.payload.type === 'TOGGLE_ACTION') {
+            else if (action.payload.type === "TOGGLE_ACTION" /* ToggleAction */) {
                 console.warn('Skip is not supported at this time.');
             }
-            else if (action.payload.type === 'IMPORT_STATE') {
+            else if (action.payload.type === "IMPORT_STATE" /* ImportState */) {
                 var _a = action.payload.nextLiftedState, actionsById_1 = _a.actionsById, computedStates_1 = _a.computedStates, currentStateIndex = _a.currentStateIndex;
                 (/** @type {?} */ (this.devtoolsExtension)).init(computedStates_1[0].state);
                 Object.keys(actionsById_1)
@@ -233,19 +249,57 @@ var NgxsReduxDevtoolsPlugin = /** @class */ (function () {
                 this.store.reset(computedStates_1[currentStateIndex].state);
             }
         }
-        else if (action.type === 'ACTION') {
+        else if (action.type === "ACTION" /* Action */) {
             /** @type {?} */
             var actionPayload = JSON.parse(action.payload);
             this.store.dispatch(actionPayload);
         }
     };
+    /**
+     * @private
+     * @return {?}
+     */
+    NgxsReduxDevtoolsPlugin.prototype.connect = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (!this.globalDevtools || this._options.disabled) {
+            return;
+        }
+        // The `connect` method adds `message` event listener since it communicates
+        // with an extension through `window.postMessage` and message events.
+        // We handle only 2 events; thus, we don't want to run many change detections
+        // because the extension sends events that we don't have to handle.
+        this.devtoolsExtension = this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        function () { return (/** @type {?} */ (_this.globalDevtools.connect(_this._options))); }));
+        this.unsubscribe = this.devtoolsExtension.subscribe((/**
+         * @param {?} action
+         * @return {?}
+         */
+        function (action) {
+            if (action.type === "DISPATCH" /* Dispatch */ ||
+                action.type === "ACTION" /* Action */) {
+                _this._ngZone.run((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.dispatched(action);
+                }));
+            }
+        }));
+    };
     NgxsReduxDevtoolsPlugin.decorators = [
         { type: Injectable }
     ];
     /** @nocollapse */
     NgxsReduxDevtoolsPlugin.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: Inject, args: [NGXS_DEVTOOLS_OPTIONS,] }] },
-        { type: Injector }
+        { type: Injector },
+        { type: NgZone }
     ]; };
     return NgxsReduxDevtoolsPlugin;
 }());
@@ -259,7 +313,12 @@ if (false) {
      * @type {?}
      * @private
      */
-    NgxsReduxDevtoolsPlugin.prototype.windowObj;
+    NgxsReduxDevtoolsPlugin.prototype.globalDevtools;
+    /**
+     * @type {?}
+     * @private
+     */
+    NgxsReduxDevtoolsPlugin.prototype.unsubscribe;
     /**
      * @type {?}
      * @private
@@ -270,6 +329,11 @@ if (false) {
      * @private
      */
     NgxsReduxDevtoolsPlugin.prototype._injector;
+    /**
+     * @type {?}
+     * @private
+     */
+    NgxsReduxDevtoolsPlugin.prototype._ngZone;
 }
 
 /**

package/fesm5/ngxs-devtools-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ngxs-devtools-plugin.js","sources":["ng://@ngxs/devtools-plugin/src/symbols.ts","ng://@ngxs/devtools-plugin/src/devtools.plugin.ts","ng://@ngxs/devtools-plugin/src/devtools.module.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\n\r\n/**\r\n * Interface for the redux-devtools-extension API.\r\n */\r\nexport interface NgxsDevtoolsExtension {\r\n  init(state: any): void;\r\n  send(action: any, state?: any): void;\r\n  subscribe(fn: (message: NgxsDevtoolsAction) => void): Subscription;\r\n}\r\n\r\nexport interface NgxsDevtoolsAction {\r\n  type: string;\r\n  payload: any;\r\n  state: any;\r\n  id: number;\r\n  source: string;\r\n}\r\n\r\nexport interface NgxsDevtoolsOptions {\r\n  /**\r\n   * The name of the extension\r\n   */\r\n  name?: string;\r\n\r\n  /**\r\n   * Whether the dev tools is enabled or note. Useful for setting during production.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Max number of entiries to keep.\r\n   */\r\n  maxAge?: number;\r\n\r\n  /**\r\n   * Reformat actions before sending to dev tools\r\n   */\r\n  actionSanitizer?: (action: any) => void;\r\n\r\n  /**\r\n   * Reformat state before sending to devtools\r\n   */\r\n  stateSanitizer?: (state: any) => void;\r\n}\r\n\r\nexport const NGXS_DEVTOOLS_OPTIONS = new InjectionToken('NGXS_DEVTOOLS_OPTIONS');\r\n","import { Inject, Injectable, Injector } from '@angular/core';\r\nimport { getActionTypeFromInstance, NgxsNextPluginFn, NgxsPlugin, Store } from '@ngxs/store';\r\nimport { tap, catchError } from 'rxjs/operators';\r\n\r\nimport {\r\n  NGXS_DEVTOOLS_OPTIONS,\r\n  NgxsDevtoolsAction,\r\n  NgxsDevtoolsExtension,\r\n  NgxsDevtoolsOptions\r\n} from './symbols';\r\n\r\n/**\r\n * Adds support for the Redux Devtools extension:\r\n * http://extension.remotedev.io/\r\n */\r\n@Injectable()\r\nexport class NgxsReduxDevtoolsPlugin implements NgxsPlugin {\r\n  private readonly devtoolsExtension: NgxsDevtoolsExtension | null = null;\r\n  private readonly windowObj: any = typeof window !== 'undefined' ? window : {};\r\n\r\n  constructor(\r\n    @Inject(NGXS_DEVTOOLS_OPTIONS) private _options: NgxsDevtoolsOptions,\r\n    private _injector: Injector\r\n  ) {\r\n    const globalDevtools =\r\n      this.windowObj['__REDUX_DEVTOOLS_EXTENSION__'] || this.windowObj['devToolsExtension'];\r\n    if (globalDevtools) {\r\n      this.devtoolsExtension = globalDevtools.connect(_options) as NgxsDevtoolsExtension;\r\n      this.devtoolsExtension.subscribe(a => this.dispatched(a));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Lazy get the store for circular dependency issues\r\n   */\r\n  private get store(): Store {\r\n    return this._injector.get<Store>(Store);\r\n  }\r\n\r\n  /**\r\n   * Middleware handle function\r\n   */\r\n  handle(state: any, action: any, next: NgxsNextPluginFn) {\r\n    const isDisabled = this._options && this._options.disabled;\r\n    if (!this.devtoolsExtension || isDisabled) {\r\n      return next(state, action);\r\n    }\r\n\r\n    return next(state, action).pipe(\r\n      catchError(error => {\r\n        const newState = this.store.snapshot();\r\n        this.sendToDevTools(state, action, newState);\r\n        throw error;\r\n      }),\r\n      tap(newState => {\r\n        this.sendToDevTools(state, action, newState);\r\n      })\r\n    );\r\n  }\r\n\r\n  private sendToDevTools(state: any, action: any, newState: any) {\r\n    const type = getActionTypeFromInstance(action);\r\n    // if init action, send initial state to dev tools\r\n    const isInitAction = type === '@@INIT';\r\n    if (isInitAction) {\r\n      this.devtoolsExtension!.init(state);\r\n    } else {\r\n      this.devtoolsExtension!.send({ ...action, action: null, type }, newState);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle the action from the dev tools subscription\r\n   */\r\n  dispatched(action: NgxsDevtoolsAction) {\r\n    if (action.type === 'DISPATCH') {\r\n      if (\r\n        action.payload.type === 'JUMP_TO_ACTION' ||\r\n        action.payload.type === 'JUMP_TO_STATE'\r\n      ) {\r\n        const prevState = JSON.parse(action.state);\r\n        this.store.reset(prevState);\r\n      } else if (action.payload.type === 'TOGGLE_ACTION') {\r\n        console.warn('Skip is not supported at this time.');\r\n      } else if (action.payload.type === 'IMPORT_STATE') {\r\n        const {\r\n          actionsById,\r\n          computedStates,\r\n          currentStateIndex\r\n        } = action.payload.nextLiftedState;\r\n        this.devtoolsExtension!.init(computedStates[0].state);\r\n        Object.keys(actionsById)\r\n          .filter(actionId => actionId !== '0')\r\n          .forEach(actionId =>\r\n            this.devtoolsExtension!.send(actionsById[actionId], computedStates[actionId].state)\r\n          );\r\n        this.store.reset(computedStates[currentStateIndex].state);\r\n      }\r\n    } else if (action.type === 'ACTION') {\r\n      const actionPayload = JSON.parse(action.payload);\r\n      this.store.dispatch(actionPayload);\r\n    }\r\n  }\r\n}\r\n","import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';\r\nimport { NGXS_PLUGINS } from '@ngxs/store';\r\n\r\nimport { NgxsDevtoolsOptions, NGXS_DEVTOOLS_OPTIONS } from './symbols';\r\nimport { NgxsReduxDevtoolsPlugin } from './devtools.plugin';\r\n\r\nexport function devtoolsOptionsFactory(options: NgxsDevtoolsOptions) {\r\n  return {\r\n    name: 'NGXS',\r\n    ...options\r\n  };\r\n}\r\n\r\nexport const USER_OPTIONS = new InjectionToken('USER_OPTIONS');\r\n\r\n@NgModule()\r\nexport class NgxsReduxDevtoolsPluginModule {\r\n  static forRoot(\r\n    options?: NgxsDevtoolsOptions\r\n  ): ModuleWithProviders<NgxsReduxDevtoolsPluginModule> {\r\n    return {\r\n      ngModule: NgxsReduxDevtoolsPluginModule,\r\n      providers: [\r\n        {\r\n          provide: NGXS_PLUGINS,\r\n          useClass: NgxsReduxDevtoolsPlugin,\r\n          multi: true\r\n        },\r\n        {\r\n          provide: USER_OPTIONS,\r\n          useValue: options\r\n        },\r\n        {\r\n          provide: NGXS_DEVTOOLS_OPTIONS,\r\n          useFactory: devtoolsOptionsFactory,\r\n          deps: [USER_OPTIONS]\r\n        }\r\n      ]\r\n    };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngxs-devtools-plugin.js","sources":["ng://@ngxs/devtools-plugin/src/symbols.ts","ng://@ngxs/devtools-plugin/src/devtools.plugin.ts","ng://@ngxs/devtools-plugin/src/devtools.module.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\n/**\r\n * Interface for the redux-devtools-extension API.\r\n */\r\nexport interface NgxsDevtoolsExtension {\r\n  init(state: any): void;\r\n  send(action: any, state?: any): void;\r\n  subscribe(fn: (message: NgxsDevtoolsAction) => void): VoidFunction;\r\n}\r\n\r\nexport interface NgxsDevtoolsAction {\r\n  type: string;\r\n  payload: any;\r\n  state: any;\r\n  id: number;\r\n  source: string;\r\n}\r\n\r\nexport interface NgxsDevtoolsOptions {\r\n  /**\r\n   * The name of the extension\r\n   */\r\n  name?: string;\r\n\r\n  /**\r\n   * Whether the dev tools is enabled or note. Useful for setting during production.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Max number of entiries to keep.\r\n   */\r\n  maxAge?: number;\r\n\r\n  /**\r\n   * Reformat actions before sending to dev tools\r\n   */\r\n  actionSanitizer?: (action: any) => void;\r\n\r\n  /**\r\n   * Reformat state before sending to devtools\r\n   */\r\n  stateSanitizer?: (state: any) => void;\r\n}\r\n\r\nexport const NGXS_DEVTOOLS_OPTIONS = new InjectionToken('NGXS_DEVTOOLS_OPTIONS');\r\n","import { Inject, Injectable, Injector, NgZone, OnDestroy, ɵglobal } from '@angular/core';\r\nimport { getActionTypeFromInstance, NgxsNextPluginFn, NgxsPlugin, Store } from '@ngxs/store';\r\nimport { tap, catchError } from 'rxjs/operators';\r\n\r\nimport {\r\n  NGXS_DEVTOOLS_OPTIONS,\r\n  NgxsDevtoolsAction,\r\n  NgxsDevtoolsExtension,\r\n  NgxsDevtoolsOptions\r\n} from './symbols';\r\n\r\nconst enum ReduxDevtoolsActionType {\r\n  Dispatch = 'DISPATCH',\r\n  Action = 'ACTION'\r\n}\r\n\r\nconst enum ReduxDevtoolsPayloadType {\r\n  JumpToAction = 'JUMP_TO_ACTION',\r\n  JumpToState = 'JUMP_TO_STATE',\r\n  ToggleAction = 'TOGGLE_ACTION',\r\n  ImportState = 'IMPORT_STATE'\r\n}\r\n\r\n/**\r\n * Adds support for the Redux Devtools extension:\r\n * http://extension.remotedev.io/\r\n */\r\n@Injectable()\r\nexport class NgxsReduxDevtoolsPlugin implements OnDestroy, NgxsPlugin {\r\n  private devtoolsExtension: NgxsDevtoolsExtension | null = null;\r\n  private readonly globalDevtools =\r\n    ɵglobal['__REDUX_DEVTOOLS_EXTENSION__'] || ɵglobal['devToolsExtension'];\r\n\r\n  private unsubscribe: VoidFunction | null = null;\r\n\r\n  constructor(\r\n    @Inject(NGXS_DEVTOOLS_OPTIONS) private _options: NgxsDevtoolsOptions,\r\n    private _injector: Injector,\r\n    private _ngZone: NgZone\r\n  ) {\r\n    this.connect();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.unsubscribe !== null) {\r\n      this.unsubscribe();\r\n    }\r\n    if (this.globalDevtools) {\r\n      this.globalDevtools.disconnect();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Lazy get the store for circular dependency issues\r\n   */\r\n  private get store(): Store {\r\n    return this._injector.get<Store>(Store);\r\n  }\r\n\r\n  /**\r\n   * Middleware handle function\r\n   */\r\n  handle(state: any, action: any, next: NgxsNextPluginFn) {\r\n    if (!this.devtoolsExtension || this._options.disabled) {\r\n      return next(state, action);\r\n    }\r\n\r\n    return next(state, action).pipe(\r\n      catchError(error => {\r\n        const newState = this.store.snapshot();\r\n        this.sendToDevTools(state, action, newState);\r\n        throw error;\r\n      }),\r\n      tap(newState => {\r\n        this.sendToDevTools(state, action, newState);\r\n      })\r\n    );\r\n  }\r\n\r\n  private sendToDevTools(state: any, action: any, newState: any) {\r\n    const type = getActionTypeFromInstance(action);\r\n    // if init action, send initial state to dev tools\r\n    const isInitAction = type === '@@INIT';\r\n    if (isInitAction) {\r\n      this.devtoolsExtension!.init(state);\r\n    } else {\r\n      this.devtoolsExtension!.send({ ...action, action: null, type }, newState);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle the action from the dev tools subscription\r\n   */\r\n  dispatched(action: NgxsDevtoolsAction) {\r\n    if (action.type === ReduxDevtoolsActionType.Dispatch) {\r\n      if (\r\n        action.payload.type === ReduxDevtoolsPayloadType.JumpToAction ||\r\n        action.payload.type === ReduxDevtoolsPayloadType.JumpToState\r\n      ) {\r\n        const prevState = JSON.parse(action.state);\r\n        this.store.reset(prevState);\r\n      } else if (action.payload.type === ReduxDevtoolsPayloadType.ToggleAction) {\r\n        console.warn('Skip is not supported at this time.');\r\n      } else if (action.payload.type === ReduxDevtoolsPayloadType.ImportState) {\r\n        const {\r\n          actionsById,\r\n          computedStates,\r\n          currentStateIndex\r\n        } = action.payload.nextLiftedState;\r\n        this.devtoolsExtension!.init(computedStates[0].state);\r\n        Object.keys(actionsById)\r\n          .filter(actionId => actionId !== '0')\r\n          .forEach(actionId =>\r\n            this.devtoolsExtension!.send(actionsById[actionId], computedStates[actionId].state)\r\n          );\r\n        this.store.reset(computedStates[currentStateIndex].state);\r\n      }\r\n    } else if (action.type === ReduxDevtoolsActionType.Action) {\r\n      const actionPayload = JSON.parse(action.payload);\r\n      this.store.dispatch(actionPayload);\r\n    }\r\n  }\r\n\r\n  private connect(): void {\r\n    if (!this.globalDevtools || this._options.disabled) {\r\n      return;\r\n    }\r\n\r\n    // The `connect` method adds `message` event listener since it communicates\r\n    // with an extension through `window.postMessage` and message events.\r\n    // We handle only 2 events; thus, we don't want to run many change detections\r\n    // because the extension sends events that we don't have to handle.\r\n    this.devtoolsExtension = this._ngZone.runOutsideAngular(\r\n      () => <NgxsDevtoolsExtension>this.globalDevtools.connect(this._options)\r\n    );\r\n\r\n    this.unsubscribe = this.devtoolsExtension.subscribe(action => {\r\n      if (\r\n        action.type === ReduxDevtoolsActionType.Dispatch ||\r\n        action.type === ReduxDevtoolsActionType.Action\r\n      ) {\r\n        this._ngZone.run(() => {\r\n          this.dispatched(action);\r\n        });\r\n      }\r\n    });\r\n  }\r\n}\r\n","import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';\r\nimport { NGXS_PLUGINS } from '@ngxs/store';\r\n\r\nimport { NgxsDevtoolsOptions, NGXS_DEVTOOLS_OPTIONS } from './symbols';\r\nimport { NgxsReduxDevtoolsPlugin } from './devtools.plugin';\r\n\r\nexport function devtoolsOptionsFactory(options: NgxsDevtoolsOptions) {\r\n  return {\r\n    name: 'NGXS',\r\n    ...options\r\n  };\r\n}\r\n\r\nexport const USER_OPTIONS = new InjectionToken('USER_OPTIONS');\r\n\r\n@NgModule()\r\nexport class NgxsReduxDevtoolsPluginModule {\r\n  static forRoot(\r\n    options?: NgxsDevtoolsOptions\r\n  ): ModuleWithProviders<NgxsReduxDevtoolsPluginModule> {\r\n    return {\r\n      ngModule: NgxsReduxDevtoolsPluginModule,\r\n      providers: [\r\n        {\r\n          provide: NGXS_PLUGINS,\r\n          useClass: NgxsReduxDevtoolsPlugin,\r\n          multi: true\r\n        },\r\n        {\r\n          provide: USER_OPTIONS,\r\n          useValue: options\r\n        },\r\n        {\r\n          provide: NGXS_DEVTOOLS_OPTIONS,\r\n          useFactory: devtoolsOptionsFactory,\r\n          deps: [USER_OPTIONS]\r\n        }\r\n      ]\r\n    };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/ngxs-devtools-plugin.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ɵa":{"__symbolic":"function","parameters":["options"],"value":{"name":"NGXS"}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":13,"character":32},"arguments":["USER_OPTIONS"]},"NgxsReduxDevtoolsPluginModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1}}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["options"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxsReduxDevtoolsPluginModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@ngxs/store","name":"NGXS_PLUGINS","line":24,"character":19},"useClass":{"__symbolic":"reference","name":"NgxsReduxDevtoolsPlugin"},"multi":true},{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"options"}},{"provide":{"__symbolic":"reference","name":"NGXS_DEVTOOLS_OPTIONS"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵb"}]}]}}}},"NgxsReduxDevtoolsPlugin":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":15,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":21,"character":5},"arguments":[{"__symbolic":"reference","name":"NGXS_DEVTOOLS_OPTIONS"}]}],null],"parameters":[{"__symbolic":"reference","name":"NgxsDevtoolsOptions"},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":22,"character":23}]}],"handle":[{"__symbolic":"method"}],"sendToDevTools":[{"__symbolic":"method"}],"dispatched":[{"__symbolic":"method"}]}},"NgxsDevtoolsExtension":{"__symbolic":"interface"},"NgxsDevtoolsAction":{"__symbolic":"interface"},"NgxsDevtoolsOptions":{"__symbolic":"interface"},"NGXS_DEVTOOLS_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":47,"character":41},"arguments":["NGXS_DEVTOOLS_OPTIONS"]}},"origins":{"ɵa":"./src/devtools.module","ɵb":"./src/devtools.module","NgxsReduxDevtoolsPluginModule":"./src/devtools.module","NgxsReduxDevtoolsPlugin":"./src/devtools.plugin","NgxsDevtoolsExtension":"./src/symbols","NgxsDevtoolsAction":"./src/symbols","NgxsDevtoolsOptions":"./src/symbols","NGXS_DEVTOOLS_OPTIONS":"./src/symbols"},"importAs":"@ngxs/devtools-plugin"}
+{"__symbolic":"module","version":4,"metadata":{"ɵa":{"__symbolic":"function","parameters":["options"],"value":{"name":"NGXS"}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":13,"character":32},"arguments":["USER_OPTIONS"]},"NgxsReduxDevtoolsPluginModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1}}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["options"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxsReduxDevtoolsPluginModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@ngxs/store","name":"NGXS_PLUGINS","line":24,"character":19},"useClass":{"__symbolic":"reference","name":"NgxsReduxDevtoolsPlugin"},"multi":true},{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"options"}},{"provide":{"__symbolic":"reference","name":"NGXS_DEVTOOLS_OPTIONS"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵb"}]}]}}}},"NgxsReduxDevtoolsPlugin":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":27,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":36,"character":5},"arguments":[{"__symbolic":"reference","name":"NGXS_DEVTOOLS_OPTIONS"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"NgxsDevtoolsOptions"},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":37,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":38,"character":21}]}],"ngOnDestroy":[{"__symbolic":"method"}],"handle":[{"__symbolic":"method"}],"sendToDevTools":[{"__symbolic":"method"}],"dispatched":[{"__symbolic":"method"}],"connect":[{"__symbolic":"method"}]}},"NgxsDevtoolsExtension":{"__symbolic":"interface"},"NgxsDevtoolsAction":{"__symbolic":"interface"},"NgxsDevtoolsOptions":{"__symbolic":"interface"},"NGXS_DEVTOOLS_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":46,"character":41},"arguments":["NGXS_DEVTOOLS_OPTIONS"]}},"origins":{"ɵa":"./src/devtools.module","ɵb":"./src/devtools.module","NgxsReduxDevtoolsPluginModule":"./src/devtools.module","NgxsReduxDevtoolsPlugin":"./src/devtools.plugin","NgxsDevtoolsExtension":"./src/symbols","NgxsDevtoolsAction":"./src/symbols","NgxsDevtoolsOptions":"./src/symbols","NGXS_DEVTOOLS_OPTIONS":"./src/symbols"},"importAs":"@ngxs/devtools-plugin"}

package/package.json

@@ -2,11 +2,11 @@
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@ngxs/devtools-plugin",
   "description": "redux devtools plugin for @ngxs/store",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "sideEffects": true,
   "peerDependencies": {
-    "@ngxs/store": "^3.7.3 || ^3.7.3-dev",
-    "@angular/core": ">=6.1.0 <14.0.0",
+    "@ngxs/store": "^3.7.4 || ^3.7.4-dev",
+    "@angular/core": ">=6.1.0 <15.0.0",
     "rxjs": ">=6.5.5"
   },
   "main": "bundles/ngxs-devtools-plugin.umd.js",

package/src/devtools.plugin.d.ts

@@ -1,16 +1,19 @@
-import { Injector } from '@angular/core';
+import { Injector, NgZone, OnDestroy } from '@angular/core';
 import { NgxsNextPluginFn, NgxsPlugin } from '@ngxs/store';
 import { NgxsDevtoolsAction, NgxsDevtoolsOptions } from './symbols';
 /**
  * Adds support for the Redux Devtools extension:
  * http://extension.remotedev.io/
  */
-export declare class NgxsReduxDevtoolsPlugin implements NgxsPlugin {
+export declare class NgxsReduxDevtoolsPlugin implements OnDestroy, NgxsPlugin {
     private _options;
     private _injector;
-    private readonly devtoolsExtension;
-    private readonly windowObj;
-    constructor(_options: NgxsDevtoolsOptions, _injector: Injector);
+    private _ngZone;
+    private devtoolsExtension;
+    private readonly globalDevtools;
+    private unsubscribe;
+    constructor(_options: NgxsDevtoolsOptions, _injector: Injector, _ngZone: NgZone);
+    ngOnDestroy(): void;
     /**
      * Lazy get the store for circular dependency issues
      */
@@ -24,4 +27,5 @@ export declare class NgxsReduxDevtoolsPlugin implements NgxsPlugin {
      * Handle the action from the dev tools subscription
      */
     dispatched(action: NgxsDevtoolsAction): void;
+    private connect;
 }

package/src/symbols.d.ts

@@ -1,12 +1,11 @@
 import { InjectionToken } from '@angular/core';
-import { Subscription } from 'rxjs';
 /**
  * Interface for the redux-devtools-extension API.
  */
 export interface NgxsDevtoolsExtension {
     init(state: any): void;
     send(action: any, state?: any): void;
-    subscribe(fn: (message: NgxsDevtoolsAction) => void): Subscription;
+    subscribe(fn: (message: NgxsDevtoolsAction) => void): VoidFunction;
 }
 export interface NgxsDevtoolsAction {
     type: string;