refactor: ♻️ 将单行 setState 改用 _setState

src/components/Manga/actions/scrollbar.ts

@@ -3,7 +3,7 @@ import { createEffect, createRoot, on } from 'solid-js';
 import { t } from 'helper/i18n';
 import type { PointerState, UseDrag } from '../hooks/useDrag';
 import type { State } from '../store';
-import { store, setState, refs } from '../store';
+import { store, setState, refs, _setState } from '../store';
 import { resetUI } from './helper';
 
 /** 漫画流的总高度 */
@@ -136,11 +136,8 @@ export const handleScrollbarDrag: UseDrag = ({ type, xy, initial }, e) => {
     else if (newPageIndex >= store.pageList.length)
       newPageIndex = store.pageList.length - 1;
 
-    if (newPageIndex !== store.activePageIndex) {
-      setState((state) => {
-        state.activePageIndex = newPageIndex;
-      });
-    }
+    if (newPageIndex !== store.activePageIndex)
+      _setState('activePageIndex', newPageIndex);
   }
 };
 
@@ -178,9 +175,7 @@ createRoot(() => {
       () => store.show.toolbar,
       () => {
         if (store.show.scrollbar && !store.show.toolbar)
-          setState((state) => {
-            state.show.scrollbar = false;
-          });
+          _setState('show', 'scrollbar', false);
       },
       { defer: true },
     ),

src/components/Manga/actions/show.ts

@@ -1,6 +1,6 @@
 import { createRoot, createEffect, on } from 'solid-js';
 import type { State } from '../store';
-import { setState, store } from '../store';
+import { _setState, setState, store } from '../store';
 import { updateImgLoadType, activePage } from './image';
 
 /** 更新渲染页面相关变量 */
@@ -42,9 +42,7 @@ createRoot(() => {
       // 如果当前显示页面有出错的图片，就重新加载一次
       page?.forEach((i) => {
         if (store.imgList[i]?.loadType !== 'error') return;
-        setState((state) => {
-          state.imgList[i].loadType = 'wait';
-        });
+        _setState('imgList', i, 'loadType', 'wait');
       });
 
       if (store.option.scrollMode) return;

src/components/Manga/actions/translation/index.ts

@@ -6,7 +6,7 @@ import {
   createMemo,
 } from 'solid-js';
 import { lang, t } from 'helper/i18n';
-import { store, setState } from '../../store';
+import { store, setState, _setState } from '../../store';
 import { createOptions, setMessage } from './helper';
 import { getValidTranslators, selfhostedTranslation } from './selfhosted';
 import { cotransTranslation, cotransTranslators } from './cotrans';
@@ -29,9 +29,7 @@ export const translationImage = async (i: number) => {
     if (img.translationType !== 'wait') return;
 
     if (img.translationUrl)
-      return setState((state) => {
-        state.imgList[i].translationType = 'show';
-      });
+      return _setState('imgList', i, 'translationType', 'show');
 
     if (img.loadType !== 'loaded')
       return setMessage(i, t('translation.tip.img_not_fully_loaded'));

src/components/Manga/actions/zoom.ts

@@ -3,7 +3,7 @@ import { clamp, isEqual } from 'helper';
 import { debounce } from 'throttle-debounce';
 import type { PointerState, UseDrag } from '../hooks/useDrag';
 import type { State } from '../store';
-import { store, setState, refs } from '../store';
+import { store, setState, refs, _setState } from '../store';
 import { resetUI } from './helper';
 
 export const touches = new Map<number, PointerState>();
@@ -26,9 +26,7 @@ const checkBound = (state: State) => {
 };
 
 const closeScrollLock = debounce(200, () =>
-  setState((state) => {
-    state.flag.scrollLock = false;
-  }),
+  _setState('flag', 'scrollLock', false),
 );
 
 export const zoom = (

src/components/Manga/components/EndPage.tsx

@@ -9,7 +9,7 @@ import {
 } from 'solid-js';
 
 import { t } from 'helper/i18n';
-import { setState, store } from '../store';
+import { _setState, store } from '../store';
 import { bindRef, focus, turnPage } from '../actions';
 
 import classes from '../index.module.css';
@@ -21,9 +21,7 @@ export const EndPage: Component = () => {
   const handleClick: EventHandler['onClick'] = (e) => {
     e.stopPropagation();
     if (e.target?.nodeName !== 'BUTTON')
-      setState((state) => {
-        state.show.endPage = undefined;
-      });
+      _setState('show', 'endPage', undefined);
     focus();
   };
 

src/components/Manga/defaultButtonList.tsx

@@ -9,7 +9,7 @@ import MdGrid from '@material-design-icons/svg/round/grid_4x4.svg';
 
 import { createMemo, type Component, createSignal } from 'solid-js';
 import { t } from 'helper/i18n';
-import { setState, store } from './store';
+import { _setState, store } from './store';
 import { IconButton } from '../IconButton';
 import { SettingPanel } from './components/SettingPanel';
 
@@ -133,9 +133,7 @@ export const defaultButtonList: ToolbarButtonList = [
 
     const handleClick = () => {
       const _showPanel = !showPanel();
-      setState((state) => {
-        state.show.toolbar = _showPanel;
-      });
+      _setState('show', 'toolbar', _showPanel);
       setShowPanel(_showPanel);
     };
 

src/components/Manga/defaultSettingList.tsx

@@ -19,7 +19,7 @@ import {
   updateImgLoadType,
   zoomScrollModeImg,
 } from './actions';
-import { setState, store } from './store';
+import { _setState, setState, store } from './store';
 
 import classes from './index.module.css';
 import { SettingsItemNumber } from './components/SettingsItemNumber';
@@ -107,11 +107,7 @@ export const defaultSettingList: () => SettingList = () => [
         <SettingsItemSwitch
           name={t('setting.option.show_clickable_area')}
           value={store.show.touchArea}
-          onChange={() => {
-            setState((state) => {
-              state.show.touchArea = !state.show.touchArea;
-            });
-          }}
+          onChange={() => _setState('show', 'touchArea', !store.show.touchArea)}
         />
 
         <SettingsItemSwitch

src/components/Toast/ToastItem.tsx

@@ -6,7 +6,7 @@ import MdInfo from '@material-design-icons/svg/round/info.svg';
 import type { Component } from 'solid-js';
 import { createEffect, createMemo, Show } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
-import { setState } from './store';
+import { _setState, setState } from './store';
 
 import type { Toast } from '.';
 import { toast } from './toast';
@@ -39,9 +39,7 @@ const dismissToast = (id: string) =>
 
 /** 重置 toast 的 update 属性 */
 const resetToastUpdate = (id: string) =>
-  setState((state) => {
-    Reflect.deleteProperty(state.map[id], 'update');
-  });
+  _setState('map', id, 'update', undefined);
 
 export const ToastItem: Component<Toast> = (props) => {
   /** 是否要显示进度 */

src/components/Toast/store.tsx

@@ -1,7 +1,7 @@
 import { createStore, produce } from 'solid-js/store';
 import type { Toast } from '.';
 
-const [_state, _setState] = createStore({
+export const [_state, _setState] = createStore({
   list: [] as Toast['id'][],
   map: {} as Record<Toast['id'], Toast>,
 });

src/components/Toast/toast.tsx

@@ -1,6 +1,6 @@
 import { log } from 'helper/logger';
 import type { Message, Toast } from '.';
-import { creatId, setState, store } from './store';
+import { creatId, setState, _setState, store } from './store';
 
 export const toast = (msg: Message, options?: Partial<Toast>) => {
   if (!msg) return;
@@ -40,9 +40,7 @@ export const toast = (msg: Message, options?: Partial<Toast>) => {
 
 toast.dismiss = (id: string) => {
   if (!Reflect.has(store.map, id)) return;
-  setState((state) => {
-    state.map[id].exit = true;
-  });
+  _setState('map', id, 'exit', true);
 };
 toast.set = (id: string, options: Partial<Toast>) => {
   if (!Reflect.has(store.map, id)) return;

src/pwa/src/handleDrag.ts

@@ -1,13 +1,10 @@
 import { getFilesFromDataTransferItems } from '@placemarkio/flat-drop-files';
 
-import { setState, loadNewImglist } from './store';
+import { loadNewImglist, _setState } from './store';
 
 import classes from './index.module.css';
 
-const setDragging = (v: boolean) =>
-  setState((state) => {
-    state.dragging = v;
-  });
+const setDragging = (v: boolean) => _setState('dragging', v);
 
 export const handleDrag = (ref: HTMLElement) => {
   ref.addEventListener('drop', async (e: DragEvent) => {

src/pwa/src/index.tsx

@@ -12,7 +12,7 @@ import { Manga, buttonListDivider } from '../../components/Manga';
 import { IconButton } from '../../components/IconButton';
 import { Toaster, toast } from '../../components/Toast';
 
-import { store, setState, handleExit, loadNewImglist } from './store';
+import { store, handleExit, loadNewImglist, _setState } from './store';
 import { FileSystemToFile, imgExtension } from './helper';
 import { handleDrag } from './handleDrag';
 import { DownloadButton } from './DownloadButton';
@@ -90,14 +90,7 @@ export const Root: Component = () => (
           </button>
           <DownloadButton />
           <Show when={store.imgList.length}>
-            <button
-              type="button"
-              on:click={() =>
-                setState((state) => {
-                  state.show = true;
-                })
-              }
-            >
+            <button type="button" on:click={() => _setState('show', true)}>
               {t('pwa.button.resume_read')}
             </button>
           </Show>
@@ -112,13 +105,7 @@ export const Root: Component = () => (
             <button type="button" on:click={pwaInstallHandler.install}>
               {t('pwa.button.install')}
             </button>
-            <a
-              on:click={() =>
-                setState((state) => {
-                  state.hiddenInstallTip = 'TD';
-                })
-              }
-            >
+            <a on:click={() => _setState('hiddenInstallTip', 'TD')}>
               {t('pwa.button.no_more_prompt')}
             </a>
           </div>

src/pwa/src/store.ts

@@ -11,7 +11,7 @@ export interface ImgFile {
   name: string;
   url: string;
 }
-export const { store, setState, _state } = useStore({
+export const { store, setState, _state, _setState } = useStore({
   /** 图片文件数据列表 */
   imgList: [] as ImgFile[],
   /** 是否显示漫画 */
@@ -39,10 +39,7 @@ const getImgData = async (file: File): Promise<ImgFile[]> => {
   }
 };
 
-export const handleExit = () =>
-  setState((state) => {
-    state.show = false;
-  });
+export const handleExit = () => _setState('show', false);
 
 /** 加载新的文件列表 */
 export const loadNewImglist = async (files: File[], errorTip?: string) => {
@@ -53,9 +50,7 @@ export const loadNewImglist = async (files: File[], errorTip?: string) => {
     return;
   }
 
-  setState((state) => {
-    state.loading = true;
-  });
+  _setState('loading', true);
 
   try {
     const newImglist = (await Promise.all(files.map(getImgData))).flat();
@@ -82,9 +77,7 @@ export const loadNewImglist = async (files: File[], errorTip?: string) => {
   } catch (error) {
     toast.error((error as Error).message, { throw: error as Error });
   } finally {
-    setState((state) => {
-      state.loading = false;
-    });
+    _setState('loading', false);
   }
 };