Fixes type for serialize option (#1112)

* Fixes type for serialize option

* Create gold-chairs-rescue.md

* Update gold-chairs-rescue.md

Co-authored-by: Nathan Bierema <nbierema@gmail.com>

.changeset/gold-chairs-rescue.md

@@ -0,0 +1,5 @@
+---
+'@redux-devtools/extension': patch
+---
+
+Fix type for serialize option

packages/redux-devtools-extension/package.json

@@ -29,7 +29,8 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3"
+    "@babel/runtime": "^7.18.3",
+    "immutable": "^4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",

packages/redux-devtools-extension/src/index.ts

@@ -1,3 +1,4 @@
+import Immutable from 'immutable';
 import { Action, ActionCreator, compose, StoreEnhancer } from 'redux';
 
 export interface EnhancerOptions {
@@ -25,26 +26,58 @@ export interface EnhancerOptions {
    */
   maxAge?: number;
   /**
-   * - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
+   * Customizes how actions and state are serialized and deserialized. Can be a boolean or object. If given a boolean, the behavior is the same as if you
-   * - `false` - will handle also circular references.
+   * were to pass an object and specify `options` as a boolean. Giving an object allows fine-grained customization using the `replacer` and `reviver`
-   * - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
+   * 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.
    */
   serialize?:
     | boolean
     | {
-        date?: boolean;
+        /**
-        regex?: boolean;
+         * - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
-        undefined?: boolean;
+         * - `false` - will handle also circular references.
-        error?: boolean;
+         * - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
-        symbol?: boolean;
+         * - object, which contains `date`, `regex`, `undefined`, `error`, `symbol`, `map`, `set` and `function` keys.
-        map?: boolean;
+         *   For each of them you can indicate if to include (by setting as `true`).
-        set?: boolean;
+         *   For `function` key you can also specify a custom function which handles serialization.
-        // eslint-disable-next-line @typescript-eslint/ban-types
+         *   See [`jsan`](https://github.com/kolodny/jsan) for more details.
-        function?: boolean | Function;
+         */
+        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;
+        /**
+         * Automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize).
+         * Just pass the Immutable library. It will support all ImmutableJS structures. You can even export them into a file and get them back.
+         * The only exception is `Record` class, for which you should pass this in addition the references to your classes in `refs`.
+         */
+        immutable?: typeof Immutable;
+        /**
+         * ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting...
+         */
+        refs?: Immutable.Record.Factory<any>[];
       };
   /**
    * function which takes `action` object and id number as arguments, and should return `action` object back.

pnpm-lock.yaml

@@ -1157,11 +1157,13 @@ importers:
       '@typescript-eslint/parser': ^5.29.0
       eslint: ^8.18.0
       eslint-config-prettier: ^8.5.0
+      immutable: ^4.0.0
       redux: ^4.2.0
       rimraf: ^3.0.2
       typescript: ~4.7.4
     dependencies:
       '@babel/runtime': 7.18.3
+      immutable: 4.1.0
     devDependencies:
       '@babel/cli': 7.17.10_@babel+core@7.18.5
       '@babel/core': 7.18.5
@@ -5778,7 +5780,7 @@ packages:
       strict-event-emitter: 0.2.4
       uuid: 8.3.2
     optionalDependencies:
-      msw: 0.42.3_typescript@4.7.4
+      msw: 0.43.0_typescript@4.7.4
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -16438,6 +16440,44 @@ packages:
       - supports-color
     dev: false
 
+  /msw/0.43.0_typescript@4.7.4:
+    resolution: {integrity: sha512-XJylZP0qW3D5WUGWh9FFefJEl3MGG4y1I+/8a833d0eedm6B+GaPm6wPVZNcnlS2YVTagvEgShVJ7ZtY66tTRQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      typescript: '>= 4.2.x <= 4.7.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@mswjs/cookies': 0.2.1
+      '@mswjs/interceptors': 0.16.6
+      '@open-draft/until': 1.0.3
+      '@types/cookie': 0.4.1
+      '@types/js-levenshtein': 1.1.1
+      chalk: 4.1.1
+      chokidar: 3.5.3
+      cookie: 0.4.2
+      graphql: 16.5.0
+      headers-polyfill: 3.0.7
+      inquirer: 8.2.4
+      is-node-process: 1.0.1
+      js-levenshtein: 1.1.6
+      node-fetch: 2.6.7
+      outvariant: 1.3.0
+      path-to-regexp: 6.2.1
+      statuses: 2.0.1
+      strict-event-emitter: 0.2.4
+      type-fest: 1.4.0
+      typescript: 4.7.4
+      yargs: 17.5.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+    optional: true
+
   /multicast-dns/7.2.5:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true