devtools: accessing serialize option

[JacobJaffe]

Hello! I've just started using zustand, previously having used primarily redux. Big fan so far!

In setting up the devtools, I'm having trouble tying to configure the devtools. Specifically, I'm trying to enable the serialize option, so that I can view a Map in the tools nicely.

Example of a store I'm trying to see with devtools:

const foo: Entity = {
  id: "abc",
  // ...
};

type State = {
  entities: Map<EntityId, Entity>;
};

const store = () => ({
  entities: new Map<EntityId, Entity>([[foo.id, foo]]),
});

const useStore = create<State>(devtools(store));

In a redux configuration I would do this with:

configureStore({
  // ...
  devTools: {
    serialize: {
      options: true
    }
  }
});

Is there a similar way to access the devtool options from zustand/middleware.devtools ?

---

For anyone also facing this, my current solution is an old hack from redux before the devTools.serialize option:

(Map.prototype as any).toJSON = function () {
  return JSON.parse(JSON.stringify([...this]));
};

[dai-shi]

Thanks for opening this up!
I don't think such an option is supported in the current zustand/middleware.devtools.

Anyone wants to investigate?

[cmlarsen]

This is kinda gross and not at all throughly tested, but to display Maps/Sets I used patch-package to patch the devtools middleware with polyfill for Map and Set

// zustand/middlware.js
var devtools = function devtools(fn, prefix) {
  if (process.env.NODE_ENV !== 'production') {
    if (!Map.prototype.toJSON) {
      Map.prototype.toJSON = function() {
        var obj = {};
        this.forEach((value, key) => obj[key] = value);
        return obj;
      }
    }
    if (!Set.prototype.toJSON) {
      Set.prototype.toJSON = function() {
        return Array.from(this);
      };
    }
  }
// ... the rest of the devtools middleware
}

[dai-shi]

That's a nice hack.
Though, I guess we could simply enable the serialize option and let the work done in the DevTools Extension?