Add zustand dev tools

2025-09-22 00:50:34 +02:00
parent f6b94c838b
commit b6d7f6da5d
11 changed files with 325 additions and 147 deletions
--- a/src/features/reader/auto-scroll/ReaderAutoScrollStore.ts
+++ b/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>>
-): ReaderAutoScrollStoreSlice =>
-    ({
-        autoScroll: {
-            ...DEFAULT_STATE,
-            reset: () => ({ autoScroll: { ...get().autoScroll, ...DEFAULT_STATE } }),
-            setIsActive: (active) =>
-                set((draft) => {
+    ...[createActionName, set, get]: Parameters<SliceCreator<T>>
+): ReaderAutoScrollStoreSlice => ({
+    autoScroll: {
+        ...DEFAULT_STATE,
+        reset: () => ({ autoScroll: { ...get().autoScroll, ...DEFAULT_STATE } }),
+        setIsActive: (active) =>
+            set(
+                (draft) => {
                    draft.autoScroll.isActive = active;
-                }),
-            setIsPaused: (paused) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setIsActive'),
+            ),
+        setIsPaused: (paused) =>
+            set(
+                (draft) => {
                    draft.autoScroll.isPaused = paused;
-                }),
-            setStart: (start) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setIsPaused'),
+            ),
+        setStart: (start) =>
+            set(
+                (draft) => {
                    draft.autoScroll.start = start;
-                }),
-            setCancel: (cancel) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setStart'),
+            ),
+        setCancel: (cancel) =>
+            set(
+                (draft) => {
                    draft.autoScroll.cancel = cancel;
-                }),
-            setToggleActive: (toggleActive) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setCancel'),
+            ),
+        setToggleActive: (toggleActive) =>
+            set(
+                (draft) => {
                    draft.autoScroll.toggleActive = toggleActive;
-                }),
-            setPause: (pause) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setToggleActive'),
+            ),
+        setPause: (pause) =>
+            set(
+                (draft) => {
                    draft.autoScroll.pause = pause;
-                }),
-            setResume: (resume) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setPause'),
+            ),
+        setResume: (resume) =>
+            set(
+                (draft) => {
                    draft.autoScroll.resume = resume;
-                }),
-            setInvert: (invert) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setResume'),
+            ),
+        setInvert: (invert) =>
+            set(
+                (draft) => {
                    draft.autoScroll.invert = invert;
-                }),
-            setDirection: (direction) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setInvert'),
+            ),
+        setDirection: (direction) =>
+            set(
+                (draft) => {
                    draft.autoScroll.direction = direction;
-                }),
-            setScrollRef: (scrollElement) =>
-                set((draft) => {
+                },
+                undefined,
+                createActionName('setDirection'),
+            ),
+        setScrollRef: (scrollElement) =>
+            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'),
+            ),
+    },
+});
--- a/src/features/reader/overlay/ReaderOverlayStore.ts
+++ b/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) => {
-                draft.overlay.isVisible = visible;
-            }),
+            set(
+                (draft) => {
+                    draft.overlay.isVisible = visible;
+                },
+                undefined,
+                createActionName('setIsVisible'),
+            ),
        reset: () => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } }),
    },
 });
--- a/src/features/reader/overlay/progress-bar/ReaderProgressBarStore.tsx
+++ b/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) => {
-                draft.progressBar.isMaximized = maximized;
-            }),
+            set(
+                (draft) => {
+                    draft.progressBar.isMaximized = maximized;
+                },
+                undefined,
+                createActionName('setIsMaximized'),
+            ),
        setIsDragging: (dragging) =>
-            set((draft) => {
-                draft.progressBar.isDragging = dragging;
-            }),
+            set(
+                (draft) => {
+                    draft.progressBar.isDragging = dragging;
+                },
+                undefined,
+                createActionName('setIsDragging'),
+            ),
        reset: () => ({ progressBar: { ...get().progressBar, ...DEFAULT_STATE } }),
    },
 });
--- a/src/features/reader/stores/ReaderChaptersStore.ts
+++ b/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,25 +44,29 @@ 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) => {
-                if (typeof state === 'function') {
+            set(
+                (draft) => {
+                    if (typeof state === 'function') {
+                        draft.chapters = {
+                            ...get().chapters,
+                            ...state(get().chapters),
+                        };
+                        return;
+                    }
+
                    draft.chapters = {
                        ...get().chapters,
-                        ...state(get().chapters),
+                        ...state,
                    };
-                    return;
-                }
-
-                draft.chapters = {
-                    ...get().chapters,
-                    ...state,
-                };
-            }),
+                },
+                undefined,
+                createActionName('setReaderStateChapters'),
+            ),
    },
 });
--- a/src/features/reader/stores/ReaderPagesStore.ts
+++ b/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) => {
-                draft.pages.currentPageIndex = index;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.currentPageIndex = index;
+                },
+                undefined,
+                createActionName('setCurrentPageIndex'),
+            ),
        setPageToScrollToIndex: (index) =>
-            set((draft) => {
-                draft.pages.pageToScrollToIndex = index;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.pageToScrollToIndex = index;
+                },
+                undefined,
+                createActionName('setPageToScrollToIndex'),
+            ),
        setTotalPages: (total) =>
-            set((draft) => {
-                draft.pages.totalPages = total;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.totalPages = total;
+                },
+                undefined,
+                createActionName('setTotalPages'),
+            ),
        setPageUrls: (urls) =>
-            set((draft) => {
-                draft.pages.pageUrls = urls;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.pageUrls = urls;
+                },
+                undefined,
+                createActionName('setPageUrls'),
+            ),
        setPageLoadStates: (loadStates) =>
-            set((draft) => {
-                if (typeof loadStates === 'function') {
-                    draft.pages.pageLoadStates = loadStates(get().pages.pageLoadStates);
-                    return;
-                }
+            set(
+                (draft) => {
+                    if (typeof loadStates === 'function') {
+                        draft.pages.pageLoadStates = loadStates(get().pages.pageLoadStates);
+                        return;
+                    }

-                draft.pages.pageLoadStates = loadStates;
-            }),
+                    draft.pages.pageLoadStates = loadStates;
+                },
+                undefined,
+                createActionName('setPageLoadStates'),
+            ),
        setPages: (pages) =>
-            set((draft) => {
-                draft.pages.pages = pages;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.pages = pages;
+                },
+                undefined,
+                createActionName('setPages'),
+            ),
        setTransitionPageMode: (mode) =>
-            set((draft) => {
-                draft.pages.transitionPageMode = mode;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.transitionPageMode = mode;
+                },
+                undefined,
+                createActionName('setTransitionPageMode'),
+            ),
        setRetryFailedPagesKeyPrefix: (prefix) =>
-            set((draft) => {
-                draft.pages.retryFailedPagesKeyPrefix = prefix;
-            }),
+            set(
+                (draft) => {
+                    draft.pages.retryFailedPagesKeyPrefix = prefix;
+                },
+                undefined,
+                createActionName('setRetryFailedPagesKeyPrefix'),
+            ),
    },
 });
--- a/src/features/reader/stores/ReaderStore.ts
+++ b/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,59 +68,100 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> };

 const readerStore = create<ReaderStore>()(
-    immer((set, get, store) => ({
-        ...DEFAULT_STATE,
-        reset: () =>
-            set(() => ({
-                ...get(),
+    devtools(
+        immer((set, get, store) => {
+            const createActionName = ZustandUtil.createActionNameCreator('reader');
+            const createActionNameCreator = (name: string) =>
+                ZustandUtil.createActionNameCreator(name, createActionName);
+
+            return {
                ...DEFAULT_STATE,
+                reset: () =>
+                    set(
+                        () => ({
+                            ...get(),
+                            ...DEFAULT_STATE,
+                            scrollbar: {
+                                ...get().scrollbar,
+                                ...DEFAULT_STATE.scrollbar,
+                            },
+                            settings: {
+                                ...get().settings,
+                                ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
+                            },
+                            ...get().overlay.reset(),
+                            ...get().autoScroll.reset(),
+                            ...get().pages.reset(),
+                            ...get().chapters.reset(),
+                            ...get().progressBar.reset(),
+                            ...get().tapZone.reset(),
+                        }),
+                        undefined,
+                        createActionName('reset'),
+                    ),
+                setManga: (manga) =>
+                    set(
+                        (draft) => {
+                            draft.manga = manga;
+                        },
+                        undefined,
+                        createActionName('setManga'),
+                    ),
                scrollbar: {
-                    ...get().scrollbar,
                    ...DEFAULT_STATE.scrollbar,
+                    setXSize: (size) =>
+                        set(
+                            (draft) => {
+                                draft.scrollbar.xSize = size;
+                            },
+                            undefined,
+                            createActionName('scrollbar', 'setXSize'),
+                        ),
+                    setYSize: (size) =>
+                        set(
+                            (draft) => {
+                                draft.scrollbar.ySize = size;
+                            },
+                            undefined,
+                            createActionName('scrollbar', 'setYSize'),
+                        ),
                },
                settings: {
-                    ...get().settings,
                    ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
+                    setSettings: (settings) =>
+                        set(
+                            (draft) => {
+                                draft.settings = {
+                                    ...get().settings,
+                                    ...settings,
+                                };
+                            },
+                            undefined,
+                            createActionName('settings', 'setSettings'),
+                        ),
                },
-                ...get().overlay.reset(),
-                ...get().autoScroll.reset(),
-                ...get().pages.reset(),
-                ...get().chapters.reset(),
-                ...get().progressBar.reset(),
-                ...get().tapZone.reset(),
-            })),
-        setManga: (manga) =>
-            set((draft) => {
-                draft.manga = manga;
-            }),
-        scrollbar: {
-            ...DEFAULT_STATE.scrollbar,
-            setXSize: (size) =>
-                set((draft) => {
-                    draft.scrollbar.xSize = size;
-                }),
-            setYSize: (size) =>
-                set((draft) => {
-                    draft.scrollbar.ySize = size;
-                }),
+                ...createReaderOverlayStoreSlice(createActionNameCreator('overlay'), 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;
+                },
+            },
        },
-        settings: {
-            ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
-            setSettings: (settings) =>
-                set((draft) => {
-                    draft.settings = {
-                        ...get().settings,
-                        ...settings,
-                    };
-                }),
-        },
-        ...createReaderOverlayStoreSlice(set, get, store),
-        ...createReaderAutoScrollStoreSlice(set, get, store),
-        ...createReaderPagesStoreSlice(set, get, store),
-        ...createReaderChaptersStoreSlice(set, get, store),
-        ...createReaderProgressBarStoreSlice(set, get, store),
-        ...createReaderTapZoneStoreSlice(set, get, store),
-    })),
+    ),
 );
 export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
 export const getReaderStore = () => readerStore.getState();
--- a/src/features/reader/tap-zones/ReaderTapZoneStore.tsx
+++ b/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) => {
-                draft.tapZone.showPreview = showPreview;
-            }),
+            set(
+                (draft) => {
+                    draft.tapZone.showPreview = showPreview;
+                },
+                undefined,
+                createActionName('setShowPreview'),
+            ),
        reset: () => ({ tapZone: { ...get().tapZone, ...DEFAULT_STATE } }),
    },
 });