♻️ refactor: 移除 use-merge-value 依赖，避免依赖安装报 peer 错误

close #27

package.json

@@ -69,13 +69,12 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.20",
+    "@babel/runtime": "^7",
     "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",
     "@emotion/serialize": "^1",
-    "@emotion/utils": "^1",
-    "use-merge-value": "^1"
+    "@emotion/utils": "^1"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1",
@@ -133,6 +132,7 @@
     "ts-jest": "^29",
     "ts-node": "^10",
     "typescript": "^4",
+    "use-merge-value": "^1",
     "zustand": "^4"
   },
   "peerDependencies": {

src/factories/createThemeProvider/ThemeSwitcher.tsx

@@ -1,5 +1,5 @@
+import { useMergeValue } from '@/utils/useMergeValue';
 import { FC, memo, ReactNode, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import useControlledState from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
 import { ThemeAppearance, ThemeMode, UseTheme } from '@/types';
@@ -79,7 +79,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       [themeModeProps, upperThemeMode],
     );
 
-    const [appearance, setAppearance] = useControlledState<ThemeAppearance>('light', {
+    const [appearance, setAppearance] = useMergeValue<ThemeAppearance>('light', {
       value: appearanceProp,
       defaultValue: defaultAppearance ?? upperAppearance,
       onChange: onAppearanceChange,

src/utils/useMergeValue.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const useMergeValue = <T, R = T>(
+  defaultStateValue: T | (() => T),
+  option?: {
+    defaultValue?: T | (() => T);
+    value?: T;
+    onChange?: (value: T, prevValue: T) => void;
+    postState?: (value: T) => T;
+  },
+): [R, (value: T) => void] => {
+  const { defaultValue, value, onChange, postState } = option || {};
+  const [innerValue, setInnerValue] = React.useState<T>(() => {
+    if (value !== undefined) {
+      return value;
+    }
+    if (defaultValue !== undefined) {
+      return typeof defaultValue === 'function' ? (defaultValue as any)() : defaultValue;
+    }
+    return typeof defaultStateValue === 'function'
+      ? (defaultStateValue as any)()
+      : defaultStateValue;
+  });
+
+  let mergedValue = value !== undefined ? value : innerValue;
+  if (postState) {
+    mergedValue = postState(mergedValue);
+  }
+
+  function triggerChange(newValue: T) {
+    setInnerValue(newValue);
+    if (mergedValue !== newValue && onChange) {
+      onChange(newValue, mergedValue);
+    }
+  }
+
+  return [mergedValue as unknown as R, triggerChange];
+};