feat: add deep merge to Zustand Persist

.eslintrc.json

@@ -40,6 +40,7 @@
   ],
 
   "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
     "prettier/prettier": "error",
     "sort-keys-fix/sort-keys-fix": ["warn", "asc"],
     "sort-destructure-keys/sort-destructure-keys": "warn",

package-lock.json

@@ -13,6 +13,7 @@
         "@types/react": "^18.2.25",
         "@types/react-dom": "^18.2.10",
         "astro": "^3.2.3",
+        "deepmerge": "4.3.1",
         "framer-motion": "10.16.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -5730,6 +5731,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/default-browser": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
     "astro": "^3.2.3",
+    "deepmerge": "4.3.1",
     "framer-motion": "10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/store/sound/index.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
+import merge from 'deepmerge';
 
 import { type SoundState, createState } from './sound.state';
 import { type SoundActions, createActions } from './sound.actions';
@@ -11,6 +12,12 @@ export const useSoundStore = create<SoundState & SoundActions>()(
       ...createActions(...a),
     }),
     {
+      merge: (persisted, current) =>
+        merge(
+          current,
+          // @ts-ignore
+          persisted,
+        ),
       name: 'moodist-sounds',
       partialize: state => ({ sounds: state.sounds }),
       skipHydration: true,