Add zustand dev tools
This commit is contained in:
schroda
@@ -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'),
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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'),
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user