ngxs · arturovt · Jun 4, 2025 · Jun 4, 2025 · Jun 4, 2025
@@ -7,6 +7,7 @@ $ npm install @ngxs/store@dev
 ### To become next patch version
 
 - Feature(store): Add `lazyProvider` utility [#2326](https://github.com/ngxs/store/pull/2326)
+- Feature(devtools-plugin): Add `serialize` option [#2337](https://github.com/ngxs/store/pull/2337)
 - Refactor: Replace `ngOnDestroy` with `DestroyRef` [#2289](https://github.com/ngxs/store/pull/2289)
 - Refactor: Reduce RxJS dependency [#2292](https://github.com/ngxs/store/pull/2292)
 - Refactor: Pull less RxJS symbols [#2309](https://github.com/ngxs/store/pull/2309) [#2310](https://github.com/ngxs/store/pull/2310)

@@ -172,4 +172,4 @@
     "typescript": "5.6.2",
     "zone.js": "0.14.0"
   }
-}
+}
@@ -79,6 +79,49 @@ export interface NgxsDevtoolsOptions {
    * Maximum stack trace frames to be stored (in case trace option was provided as true)
    */
   traceLimit?: number;
+
+  /**
+   * https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#serialize
+   */
+  serialize?:
+    | boolean
+    | {
+        /**
+         * - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
+         * - `false` - will handle also circular references.
+         * - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
+         * - object, which contains `date`, `regex`, `undefined`, `error`, `symbol`, `map`, `set` and `function` keys.
+         *   For each of them you can indicate if to include (by setting as `true`).
+         *   For `function` key you can also specify a custom function which handles serialization.
+         *   See [`jsan`](https://github.com/kolodny/jsan) for more details.
+         */
+        options?:
+          | undefined
+          | boolean
+          | {
+              date?: true;
+              regex?: true;
+              undefined?: true;
+              error?: true;
+              symbol?: true;
+              map?: true;
+              set?: true;
+              function?: true | ((fn: (...args: any[]) => any) => string);
+            };
+        /**
+         * [JSON replacer function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) used for both actions and states stringify.
+         * In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4)
+         * key. So you can deserialize it back while importing or persisting data.
+         * Moreover, it will also [show a nice preview showing the provided custom type](https://cloud.githubusercontent.com/assets/7957859/21814330/a17d556a-d761-11e6-85ef-159dd12f36c5.png):
+         */
+        replacer?: (key: string, value: unknown) => any;
+        /**
+         * [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter)
+         * used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41)
+         * as an example on how to serialize special data types and get them back.
+         */
+        reviver?: (key: string, value: unknown) => any;
+      };
 }
 
 export const NGXS_DEVTOOLS_OPTIONS = new InjectionToken<NgxsDevtoolsOptions>(
-Original file line number
+Diff line change
@@ Expand Up / @@ -172,4 +172,4 @@ @@
         "typescript": "5.6.2",
         "zone.js": "0.14.0"
       }
-    }
+    }