Persist middleware incompatible with Map and Set

[nc]

Is this a KP? Wondering what the best workaround is? Even just importing persist seems to cause this.

[nc]

Will add repro steps shortly!

[nc]

https://github.com/nc/repro-zustand-immer-persist

Wrote a simple Vite app to repro this issue.

Here's the main code:

import create from 'zustand';
import { persist } from 'zustand/middleware';
import produce, { enableMapSet } from 'immer';

enableMapSet();

type Store = {
  foo: Set<string>,
  addFoo: () => void
}

export const store = create<Store>(persist((set) => ({
  foo: new Set(),
  addFoo: () => {
    set(produce<Store>((state) => {
      state.foo.add('a foo');
    }))
  }
}), {
  name: 'persist-store'
}));

document.onreadystatechange = () => {
  store.getState().addFoo();
}

const app = document.querySelector<HTMLDivElement>('#app')!

app.innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`

And the error:

    at main.ts:10
    at immer.js:669
    at e2.produce (immer.js:677)
    at immer.js:667
    at setState (zustand.js:1642)
    at zustand_middleware.js:212
    at Object.addFoo (main.ts:9)
    at HTMLDocument.document.onreadystatechange (main.ts:17)

It would seem all the Set, or Map methods are lost, perhaps it's being deserialized back to an Array or an Object instead of a Set or Map?

[AnatoleLucet]

By default, persist serializes the state using JSON.stringify.
Unfortunately JSON doesn't fit very well with Sets and Maps.
One way to fix this would be give a custom serialize & deserialize function to persist:

export const store = create<Store>(persist((set) => ({
  foo: new Set(),
}), {
  name: 'persist-store',
  serialize: (data) => {
    return JSON.stringify({
      ...data,
      state: {
        ...data.state,
        foo: Array.from(data.state.foo as Set<unknown>),
      },
    });
  },
  deserialize: (value) => {
    const data = JSON.parse(value);

    data.state.foo = new Set(data.state.foo);

    return data;
  },
}));