web: replace immer with mutative for perf reasons

apps/web/package.json

@@ -54,12 +54,12 @@
     "framer-motion": "^10.16.8",
     "hash-wasm": "^4.9.0",
     "hotkeys-js": "^3.8.3",
-    "immer": "^10.0.3",
     "katex": "0.16.2",
     "kysely": "^0.26.3",
     "libsodium-wrappers": "^0.7.13",
     "mac-scrollbar": "^0.13.5",
     "marked": "^4.1.0",
+    "mutative": "^1.0.6",
     "pdfjs-dist": "3.6.172",
     "phone": "^3.1.14",
     "platform": "^1.3.6",
@@ -84,7 +84,8 @@
     "w3c-keyname": "^2.2.6",
     "web-streams-polyfill": "^3.1.1",
     "wouter": "2.12.1",
-    "zustand": "4.4.7"
+    "zustand": "4.4.7",
+    "zustand-mutative": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

apps/web/src/common/store.ts

@@ -16,30 +16,37 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { immerable, setAutoFreeze } from "immer";
+
 import { create } from "zustand";
 import {
   subscribeWithSelector,
   persist,
   PersistOptions
 } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
 import { GetState, IStore, SetState } from "../stores";
-setAutoFreeze(false);
+import { mutative } from "zustand-mutative";
 
 export function createStore<T>(
   getStore: (set: SetState<T>, get: GetState<T>) => T
 ) {
   const store = create<
     T,
-    [["zustand/subscribeWithSelector", never], ["zustand/immer", never]]
+    [["zustand/subscribeWithSelector", never], ["zustand/mutative", never]]
   >(
     subscribeWithSelector(
-      immer((set, get) => {
-        const store = getStore(set, get);
-        (store as any)[immerable] = true;
-        return store;
-      })
+      mutative(
+        (set, get) => {
+          const store = getStore(set, get);
+          return store;
+        },
+        {
+          strict: import.meta.env.DEV,
+          mark: (target, { mutable, immutable }) => {
+            if (!target || typeof target !== "object") return mutable;
+            return immutable;
+          }
+        }
+      )
     )
   );
   return [store, store.getState()] as const;
@@ -54,16 +61,24 @@ export function createPersistedStore<T extends object>(
     [
       ["zustand/persist", Partial<T>],
       ["zustand/subscribeWithSelector", never],
-      ["zustand/immer", never]
+      ["zustand/mutative", never]
     ]
   >(
     persist(
       subscribeWithSelector(
-        immer((set, get) => {
-          const store = new Store(set, get);
-          (store as any)[immerable] = true;
-          return store;
-        })
+        mutative(
+          (set, get) => {
+            const store = new Store(set, get);
+            return store;
+          },
+          {
+            strict: import.meta.env.DEV,
+            mark: (target, { mutable, immutable }) => {
+              if (!target || typeof target !== "object") return mutable;
+              return immutable;
+            }
+          }
+        )
       ),
       options
     )

apps/web/src/stores/index.ts

@@ -21,7 +21,7 @@ import { StateCreator } from "zustand";
 
 type NNStoreCreator<T> = StateCreator<
   T,
-  [["zustand/subscribeWithSelector", never], ["zustand/immer", never]]
+  [["zustand/subscribeWithSelector", never], ["zustand/mutative", never]]
 >;
 
 export type GetState<T> = Parameters<NNStoreCreator<T>>[1];