Add zustand dev tools

package.json

@@ -50,6 +50,7 @@
     "@mui/system": "7.3.1",
     "@mui/utils": "7.3.1",
     "@mui/x-date-pickers": "8.10.0",
+    "@redux-devtools/extension": "3.3.0",
     "@vibrant/color": "4.0.0",
     "apollo-upload-client": "18.0.1",
     "csstype": "3.1.3",

src/features/reader/auto-scroll/ReaderAutoScrollStore.ts

@@ -7,7 +7,7 @@
  */
 
 import { createRef, MutableRefObject } from 'react';
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 import { ScrollOffset } from '@/base/Base.types.ts';
 import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
 import { noOp } from '@/lib/HelperFunctions.ts';
@@ -58,50 +58,86 @@ const DEFAULT_STATE = {
 >;
 
 export const createReaderAutoScrollStoreSlice = <T extends ReaderAutoScrollStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
-): ReaderAutoScrollStoreSlice =>
+): ReaderAutoScrollStoreSlice => ({
-    ({
     autoScroll: {
         ...DEFAULT_STATE,
         reset: () => ({ autoScroll: { ...get().autoScroll, ...DEFAULT_STATE } }),
         setIsActive: (active) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.isActive = active;
-                }),
+                },
+                undefined,
+                createActionName('setIsActive'),
+            ),
         setIsPaused: (paused) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.isPaused = paused;
-                }),
+                },
+                undefined,
+                createActionName('setIsPaused'),
+            ),
         setStart: (start) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.start = start;
-                }),
+                },
+                undefined,
+                createActionName('setStart'),
+            ),
         setCancel: (cancel) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.cancel = cancel;
-                }),
+                },
+                undefined,
+                createActionName('setCancel'),
+            ),
         setToggleActive: (toggleActive) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.toggleActive = toggleActive;
-                }),
+                },
+                undefined,
+                createActionName('setToggleActive'),
+            ),
         setPause: (pause) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.pause = pause;
-                }),
+                },
+                undefined,
+                createActionName('setPause'),
+            ),
         setResume: (resume) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.resume = resume;
-                }),
+                },
+                undefined,
+                createActionName('setResume'),
+            ),
         setInvert: (invert) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.invert = invert;
-                }),
+                },
+                undefined,
+                createActionName('setInvert'),
+            ),
         setDirection: (direction) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     draft.autoScroll.direction = direction;
-                }),
+                },
+                undefined,
+                createActionName('setDirection'),
+            ),
         setScrollRef: (scrollElement) =>
-                set((draft) => {
+            set(
+                (draft) => {
                     if (!scrollElement) {
                         draft.autoScroll.scrollRef = undefined;
                         return;
@@ -111,6 +147,9 @@ export const createReaderAutoScrollStoreSlice = <T extends ReaderAutoScrollStore
                     ref.current = scrollElement;
                     // @ts-expect-error - TS2322: Type MutableRefObject<HTMLElement | null> is not assignable to type WritableDraft<MutableRefObject<HTMLElement | null>>
                     draft.autoScroll.scrollRef = ref;
-                }),
                 },
-    }) satisfies ReaderAutoScrollStoreSlice;
+                undefined,
+                createActionName('setScrollRef'),
+            ),
+    },
+});

src/features/reader/overlay/ReaderOverlayStore.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 
 export interface ReaderOverlayStoreSlice {
     overlay: {
@@ -21,14 +21,18 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderOverlayStoreSlice['overlay'], 'isVisible'>;
 
 export const createReaderOverlayStoreSlice = <T extends ReaderOverlayStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
 ): ReaderOverlayStoreSlice => ({
     overlay: {
         isVisible: DEFAULT_STATE.isVisible,
         setIsVisible: (visible) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.overlay.isVisible = visible;
-            }),
+                },
+                undefined,
+                createActionName('setIsVisible'),
+            ),
         reset: () => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } }),
     },
 });

src/features/reader/overlay/progress-bar/ReaderProgressBarStore.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 
 export interface ReaderProgressBarStoreSlice {
@@ -21,18 +21,26 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderProgressBarStoreSlice['progressBar'], 'isDragging' | 'isMaximized'>;
 
 export const createReaderProgressBarStoreSlice = <T extends ReaderProgressBarStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
 ): ReaderProgressBarStoreSlice => ({
     progressBar: {
         ...DEFAULT_STATE,
         setIsMaximized: (maximized) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.progressBar.isMaximized = maximized;
-            }),
+                },
+                undefined,
+                createActionName('setIsMaximized'),
+            ),
         setIsDragging: (dragging) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.progressBar.isDragging = dragging;
-            }),
+                },
+                undefined,
+                createActionName('setIsDragging'),
+            ),
         reset: () => ({ progressBar: { ...get().progressBar, ...DEFAULT_STATE } }),
     },
 });

src/features/reader/stores/ReaderChaptersStore.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 import { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 
 export interface ReaderChaptersStoreSlice {
@@ -44,13 +44,14 @@ export const READER_DEFAULT_CHAPTERS_STATE = {
 };
 
 export const createReaderChaptersStoreSlice = <T extends ReaderChaptersStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
 ): ReaderChaptersStoreSlice => ({
     chapters: {
         ...READER_DEFAULT_CHAPTERS_STATE.chapters,
         reset: () => ({ chapters: { ...get().chapters, ...READER_DEFAULT_CHAPTERS_STATE.chapters } }),
         setReaderStateChapters: (state) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     if (typeof state === 'function') {
                         draft.chapters = {
                             ...get().chapters,
@@ -63,6 +64,9 @@ export const createReaderChaptersStoreSlice = <T extends ReaderChaptersStoreSlic
                         ...get().chapters,
                         ...state,
                     };
-            }),
+                },
+                undefined,
+                createActionName('setReaderStateChapters'),
+            ),
     },
 });

src/features/reader/stores/ReaderPagesStore.ts

@@ -7,7 +7,7 @@
  */
 
 import { ReaderStatePages, ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 export interface ReaderPagesStoreSlice {
@@ -48,47 +48,79 @@ export const READER_DEFAULT_PAGES_STATE: Omit<
 };
 
 export const createReaderPagesStoreSlice = <T extends ReaderPagesStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
 ): ReaderPagesStoreSlice => ({
     pages: {
         ...READER_DEFAULT_PAGES_STATE,
         reset: () => ({ pages: { ...get().pages, ...READER_DEFAULT_PAGES_STATE } }),
         setCurrentPageIndex: (index) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.currentPageIndex = index;
-            }),
+                },
+                undefined,
+                createActionName('setCurrentPageIndex'),
+            ),
         setPageToScrollToIndex: (index) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.pageToScrollToIndex = index;
-            }),
+                },
+                undefined,
+                createActionName('setPageToScrollToIndex'),
+            ),
         setTotalPages: (total) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.totalPages = total;
-            }),
+                },
+                undefined,
+                createActionName('setTotalPages'),
+            ),
         setPageUrls: (urls) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.pageUrls = urls;
-            }),
+                },
+                undefined,
+                createActionName('setPageUrls'),
+            ),
         setPageLoadStates: (loadStates) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     if (typeof loadStates === 'function') {
                         draft.pages.pageLoadStates = loadStates(get().pages.pageLoadStates);
                         return;
                     }
 
                     draft.pages.pageLoadStates = loadStates;
-            }),
+                },
+                undefined,
+                createActionName('setPageLoadStates'),
+            ),
         setPages: (pages) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.pages = pages;
-            }),
+                },
+                undefined,
+                createActionName('setPages'),
+            ),
         setTransitionPageMode: (mode) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.transitionPageMode = mode;
-            }),
+                },
+                undefined,
+                createActionName('setTransitionPageMode'),
+            ),
         setRetryFailedPagesKeyPrefix: (prefix) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.pages.retryFailedPagesKeyPrefix = prefix;
-            }),
+                },
+                undefined,
+                createActionName('setRetryFailedPagesKeyPrefix'),
+            ),
     },
 });

src/features/reader/stores/ReaderStore.ts

@@ -7,6 +7,7 @@
  */
 
 import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { useShallow } from 'zustand/react/shallow';
 import { TMangaReader } from '@/features/manga/Manga.types.ts';
@@ -33,6 +34,9 @@ import {
     createReaderChaptersStoreSlice,
     ReaderChaptersStoreSlice,
 } from '@/features/reader/stores/ReaderChaptersStore.ts';
+import { ZustandUtil } from '@/lib/zustand/ZustandUtil.ts';
+
+const UNSERIALIZABLE_KEYS = ['scrollRef'];
 
 interface ReaderStore
     extends ReaderOverlayStoreSlice,
@@ -64,10 +68,17 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> };
 
 const readerStore = create<ReaderStore>()(
-    immer((set, get, store) => ({
+    devtools(
+        immer((set, get, store) => {
+            const createActionName = ZustandUtil.createActionNameCreator('reader');
+            const createActionNameCreator = (name: string) =>
+                ZustandUtil.createActionNameCreator(name, createActionName);
+
+            return {
                 ...DEFAULT_STATE,
                 reset: () =>
-            set(() => ({
+                    set(
+                        () => ({
                             ...get(),
                             ...DEFAULT_STATE,
                             scrollbar: {
@@ -84,39 +95,73 @@ const readerStore = create<ReaderStore>()(
                             ...get().chapters.reset(),
                             ...get().progressBar.reset(),
                             ...get().tapZone.reset(),
-            })),
-        setManga: (manga) =>
-            set((draft) => {
-                draft.manga = manga;
                         }),
+                        undefined,
+                        createActionName('reset'),
+                    ),
+                setManga: (manga) =>
+                    set(
+                        (draft) => {
+                            draft.manga = manga;
+                        },
+                        undefined,
+                        createActionName('setManga'),
+                    ),
                 scrollbar: {
                     ...DEFAULT_STATE.scrollbar,
                     setXSize: (size) =>
-                set((draft) => {
+                        set(
+                            (draft) => {
                                 draft.scrollbar.xSize = size;
-                }),
+                            },
+                            undefined,
+                            createActionName('scrollbar', 'setXSize'),
+                        ),
                     setYSize: (size) =>
-                set((draft) => {
+                        set(
+                            (draft) => {
                                 draft.scrollbar.ySize = size;
-                }),
+                            },
+                            undefined,
+                            createActionName('scrollbar', 'setYSize'),
+                        ),
                 },
                 settings: {
                     ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
                     setSettings: (settings) =>
-                set((draft) => {
+                        set(
+                            (draft) => {
                                 draft.settings = {
                                     ...get().settings,
                                     ...settings,
                                 };
-                }),
                             },
-        ...createReaderOverlayStoreSlice(set, get, store),
+                            undefined,
-        ...createReaderAutoScrollStoreSlice(set, get, store),
+                            createActionName('settings', 'setSettings'),
-        ...createReaderPagesStoreSlice(set, get, store),
+                        ),
-        ...createReaderChaptersStoreSlice(set, get, store),
+                },
-        ...createReaderProgressBarStoreSlice(set, get, store),
+                ...createReaderOverlayStoreSlice(createActionNameCreator('overlay'), set, get, store),
-        ...createReaderTapZoneStoreSlice(set, get, store),
+                ...createReaderAutoScrollStoreSlice(createActionNameCreator('autoScroll'), set, get, store),
-    })),
+                ...createReaderPagesStoreSlice(createActionNameCreator('pages'), set, get, store),
+                ...createReaderChaptersStoreSlice(createActionNameCreator('chapters'), set, get, store),
+                ...createReaderProgressBarStoreSlice(createActionNameCreator('progressBar'), set, get, store),
+                ...createReaderTapZoneStoreSlice(createActionNameCreator('tapZone'), set, get, store),
+            };
+        }),
+        {
+            name: 'ReaderStore',
+            anonymousActionType: 'reader/action',
+            serialize: {
+                replacer: (key: string, value: any) => {
+                    if (UNSERIALIZABLE_KEYS.includes(key)) {
+                        return null;
+                    }
+
+                    return value;
+                },
+            },
+        },
+    ),
 );
 export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
 export const getReaderStore = () => readerStore.getState();

src/features/reader/tap-zones/ReaderTapZoneStore.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { SliceCreator } from '@/lib/zustand/Zustand.types.ts';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 
 export interface ReaderTapZoneStoreSlice {
@@ -20,14 +20,18 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderTapZoneStoreSlice['tapZone'], 'showPreview'>;
 
 export const createReaderTapZoneStoreSlice = <T extends ReaderTapZoneStoreSlice>(
-    ...[set, get]: Parameters<ImmerStateCreator<T>>
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
 ): ReaderTapZoneStoreSlice => ({
     tapZone: {
         ...DEFAULT_STATE,
         setShowPreview: (showPreview) =>
-            set((draft) => {
+            set(
+                (draft) => {
                     draft.tapZone.showPreview = showPreview;
-            }),
+                },
+                undefined,
+                createActionName('setShowPreview'),
+            ),
         reset: () => ({ tapZone: { ...get().tapZone, ...DEFAULT_STATE } }),
     },
 });

src/lib/zustand/Zustand.types.ts

@@ -6,6 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { StateCreator } from 'zustand';
+import { StateCreator as ZustandStateCreator } from 'zustand';
 
-export type ImmerStateCreator<T> = StateCreator<T, [['zustand/immer', never], never], [], T>;
+export type StateCreator<T> = ZustandStateCreator<T, [['zustand/devtools', never], ['zustand/immer', never]], [], T>;
+
+export type SliceCreator<T> = (
+    actionNameCreator: (...names: string[]) => string,
+    ...args: Parameters<StateCreator<T>>
+) => T;

src/lib/zustand/ZustandUtil.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+export class ZustandUtil {
+    static createActionName(...names: string[]) {
+        const storeAndSlices = names.slice(0, -1);
+        const action = names.slice(-1)[0];
+
+        return `${storeAndSlices.join(':')}/${action}`;
+    }
+
+    static createActionNameCreator(
+        name: string,
+        parentCreator: typeof ZustandUtil.createActionName = ZustandUtil.createActionName,
+    ): typeof ZustandUtil.createActionName {
+        return (...names: string[]) => parentCreator(name, ...names);
+    }
+}

yarn.lock

@@ -2634,6 +2634,14 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@redux-devtools/extension@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@redux-devtools/extension/-/extension-3.3.0.tgz#bc775d289f15604c472112920beac2cf4dbb7907"
+  integrity sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    immutable "^4.3.4"
+
 "@remix-run/router@1.19.1":
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.19.1.tgz#984771bfd1de2715f42394c87fb716c1349e014f"
@@ -5981,6 +5989,11 @@ immer@10.1.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
   integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
 
+immutable@^4.3.4:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 immutable@~3.7.6:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"