taro-uno-ui 0.9.0 → 1.0.0

package/src/hooks/useMutation.ts

@@ -0,0 +1,233 @@
+/**
+ * useMutation Hook
+ * React hook for data mutation operations (POST, PUT, DELETE, PATCH)
+ *
+ * @example
+ * ```typescript
+ * const { mutate, loading, error } = useMutation<User, CreateUserInput>({
+ *   url: '/api/users',
+ *   method: 'POST',
+ *   onSuccess: (data) => {
+ *     console.log('User created:', data);
+ *   },
+ * });
+ *
+ * // Trigger mutation
+ * await mutate({ name: 'John Doe', email: 'john@example.com' });
+ * ```
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Request } from '../utils/http/request';
+import type { RequestOptions, UseMutationOptions, MutationState } from '../utils/http/types';
+
+export interface UseMutationResult<T, V = any> extends MutationState<T, V> {
+  /** Execute mutation */
+  mutate: (variables: V, options?: Partial<RequestOptions>) => Promise<T | undefined>;
+  /** Execute mutation (async version) */
+  mutateAsync: (variables: V, options?: Partial<RequestOptions>) => Promise<T>;
+  /** Reset mutation state */
+  reset: () => void;
+}
+
+/**
+ * Hook for mutation operations (POST, PUT, DELETE, PATCH)
+ */
+export function useMutation<T = any, V = any>(
+  options: RequestOptions & UseMutationOptions<T, V>,
+): UseMutationResult<T, V> {
+  const {
+    optimisticData,
+    rollbackOnError = false,
+    onError,
+    onSuccess,
+    onMutate,
+    onCompleted,
+    ...requestOptions
+  } = options;
+
+  const [state, setState] = useState<MutationState<T, V>>({
+    data: null,
+    error: null,
+    loading: false,
+    variables: null,
+  });
+
+  const clientRef = useRef<Request>(new Request());
+  const previousDataRef = useRef<T | null>(null);
+  const mountedRef = useRef(true);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  /**
+   * Execute mutation
+   */
+  const mutateAsync = useCallback(
+    async (variables: V, overrideOptions?: Partial<RequestOptions>): Promise<T> => {
+      const mergedOptions = {
+        ...requestOptions,
+        ...overrideOptions,
+        data: variables,
+      };
+
+      // Store previous data for potential rollback
+      previousDataRef.current = state.data;
+
+      // Call onMutate hook
+      if (onMutate) {
+        await onMutate(variables);
+      }
+
+      // Apply optimistic update
+      if (optimisticData) {
+        const optimisticResult = optimisticData(variables);
+        setState({
+          data: optimisticResult,
+          error: null,
+          loading: true,
+          variables,
+        });
+      } else {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          variables,
+        }));
+      }
+
+      try {
+        const result = await clientRef.current.request<T>(mergedOptions);
+
+        if (mountedRef.current) {
+          setState({
+            data: result,
+            error: null,
+            loading: false,
+            variables,
+          });
+
+          onSuccess?.(result, variables);
+          onCompleted?.(result, null, variables);
+        }
+
+        return result;
+      } catch (error) {
+        const err = error as Error;
+
+        if (mountedRef.current) {
+          // Rollback optimistic update if enabled
+          const finalData = rollbackOnError ? previousDataRef.current : state.data;
+
+          setState({
+            data: finalData,
+            error: err,
+            loading: false,
+            variables,
+          });
+
+          onError?.(err, variables);
+          onCompleted?.(null, err, variables);
+        }
+
+        throw err;
+      }
+    },
+    [requestOptions, optimisticData, rollbackOnError, onMutate, onError, onSuccess, onCompleted, state.data],
+  );
+
+  /**
+   * Execute mutation (returns undefined on error for compatibility)
+   */
+  const mutate = useCallback(
+    async (variables: V, overrideOptions?: Partial<RequestOptions>): Promise<T | undefined> => {
+      try {
+        return await mutateAsync(variables, overrideOptions);
+      } catch {
+        return undefined;
+      }
+    },
+    [mutateAsync],
+  );
+
+  /**
+   * Reset mutation state
+   */
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      error: null,
+      loading: false,
+      variables: null,
+    });
+    previousDataRef.current = null;
+  }, []);
+
+  return {
+    ...state,
+    mutate,
+    mutateAsync,
+    reset,
+  };
+}
+
+/**
+ * Hook for POST mutations
+ */
+export function usePost<T = any, V = any>(
+  url: string,
+  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
+): UseMutationResult<T, V> {
+  return useMutation<T, V>({
+    ...options,
+    url,
+    method: 'POST',
+  });
+}
+
+/**
+ * Hook for PUT mutations
+ */
+export function usePut<T = any, V = any>(
+  url: string,
+  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
+): UseMutationResult<T, V> {
+  return useMutation<T, V>({
+    ...options,
+    url,
+    method: 'PUT',
+  });
+}
+
+/**
+ * Hook for PATCH mutations
+ */
+export function usePatch<T = any, V = any>(
+  url: string,
+  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
+): UseMutationResult<T, V> {
+  return useMutation<T, V>({
+    ...options,
+    url,
+    method: 'PATCH',
+  });
+}
+
+/**
+ * Hook for DELETE mutations
+ */
+export function useDelete<T = any, V = any>(
+  url: string,
+  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
+): UseMutationResult<T, V> {
+  return useMutation<T, V>({
+    ...options,
+    url,
+    method: 'DELETE',
+  });
+}

package/src/hooks/usePerformance.ts

@@ -372,70 +372,7 @@ export function usePriorityUpdates<T>(
   };
 }
 
-// ==================== 性能监控 ====================
-
-interface PerformanceMetrics {
-  renderTime: number;
-  updateTime: number;
-  memoryUsage?: {
-    usedJSHeapSize: number;
-    totalJSHeapSize: number;
-  };
-}
-
-/** 性能监控hook */
-export function usePerformanceMonitor(_componentName: string) {
-  const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderTime: 0,
-    updateTime: 0,
-  });
-
-  const startTimeRef = useRef<number>(0);
-
-  const startMeasure = useCallback(() => {
-    startTimeRef.current = performance.now();
-  }, []);
-
-  const endMeasure = useCallback(() => {
-    const endTime = performance.now();
-    const renderTime = endTime - startTimeRef.current;
-
-    setMetrics((prev) => ({
-      ...prev,
-      renderTime,
-      updateTime: prev.updateTime + renderTime,
-    }));
-
-    // 获取内存使用情况
-    if (typeof performance !== 'undefined' && 'memory' in performance) {
-      const memory = (performance as unknown as { memory?: { usedJSHeapSize: number; totalJSHeapSize: number } })
-        .memory;
-      setMetrics((prev) => ({
-        ...prev,
-        memoryUsage: memory
-          ? {
-              usedJSHeapSize: memory.usedJSHeapSize,
-              totalJSHeapSize: memory.totalJSHeapSize,
-            }
-          : prev.memoryUsage,
-      }));
-    }
-  }, []);
-
-  const resetMetrics = useCallback(() => {
-    setMetrics({
-      renderTime: 0,
-      updateTime: 0,
-    });
-  }, []);
-
-  return {
-    metrics,
-    startMeasure,
-    endMeasure,
-    resetMetrics,
-  };
-}
+// usePerformanceMonitor removed to avoid conflict with usePerformanceMonitor.ts
 
 // ==================== 导出 ====================
 // 所有函数已在文件开头单独导出

package/src/hooks/usePlatform.ts

@@ -15,7 +15,9 @@ export const usePlatform = () => {
           const env = String(Taro.getEnv()).toLowerCase();
           return env as any;
         }
-      } catch {}
+      } catch {
+        // ignore
+      }
 
       if (typeof import.meta !== 'undefined' && (import.meta as any)?.env?.TARO_ENV) {
         return (import.meta as any).env.TARO_ENV as string;

package/src/hooks/usePrevious.ts

@@ -0,0 +1,25 @@
+/**
+ * usePrevious Hook
+ * Get the previous value of a variable from the last render
+ *
+ * @example
+ * ```typescript
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePrevious(count); // Get the previous count value
+ * ```
+ */
+
+import { useRef, useEffect } from 'react';
+
+/**
+ * Hook for getting the previous value of a variable from the last render
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

package/src/hooks/useRequest.ts

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { httpClient, HttpClient, RequestOptions } from '@/utils/network/http-client';
+import { request as httpClient, Request } from '@/utils/http/request';
 import { dataFetcher } from '@/utils/cache';
 import { useAsync } from './useAsync';
+import type { RequestOptions as UnifiedRequestOptions } from '@/utils/http/types';
 
 export interface UseRequestOptions<T = unknown> {
-  client?: HttpClient;
-  service?: ((client: HttpClient) => Promise<T>) | string;
-  method?: RequestOptions['method'];
+  client?: Request;
+  service?: ((client: Request) => Promise<T>) | string;
+  method?: UnifiedRequestOptions['method'];
   params?: Record<string, unknown>;
   data?: unknown;
   manual?: boolean;
@@ -53,15 +54,19 @@ export function useRequest<T = unknown>(options: UseRequestOptions<T>): UseReque
   const exec = useCallback(async () => {
     const fetcher = async (): Promise<T> => {
       if (typeof options.service === 'string') {
-        return await client.request<T>(options.service, {
+        return await client.request<T>({
+          url: options.service,
           method: options.method || 'GET',
           params: options.params ?? {},
           data: options.data,
           timeout: options.staleTime ? Math.max(options.staleTime, 1000) : 15000,
-          retries: options.retry ?? (options.method === 'GET' ? 3 : 0),
+          retry: {
+            retries: options.retry ?? (options.method === 'GET' ? 3 : 0),
+            retryDelay: options.retryDelay ?? 1000,
+          },
         });
       }
-      return await (options.service as (c: HttpClient) => Promise<T>)(client);
+      return await (options.service as (c: Request) => Promise<T>)(client);
     };
 
     const result = await dataFetcher.fetch<T>(key, fetcher, {

package/src/hooks/useStateManagement.ts

@@ -206,7 +206,7 @@ export function useValidatedState<T>(
 // ==================== 状态批量更新 ====================
 
 /** 状态批量更新hook */
-export function useBatchUpdate<T extends Record<string, unknown>>(initialState: T) {
+export function useBatchStateUpdate<T extends Record<string, unknown>>(initialState: T) {
   const [state, setState] = useState<T>(initialState);
   const pendingUpdates = useRef<Partial<T>>({});
 

package/src/hooks/useStorage.ts

@@ -0,0 +1,169 @@
+/**
+ * useLocalStorage Hook
+ * Persist state to localStorage with automatic serialization
+ *
+ * @example
+ * ```typescript
+ * const [user, setUser, removeUser] = useLocalStorage<User>('user', null);
+ * setUser({ id: 1, name: 'John' }); // Saved to localStorage['user']
+ * removeUser(); // Clears from localStorage
+ * ```
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+
+export interface UseStorageOptions<T> {
+  /** Custom serializer */
+  serializer?: (value: T) => string;
+  /** Custom deserializer */
+  deserializer?: (value: string) => T;
+  /** Initialize from storage on mount */
+  initializeWithValue?: boolean;
+}
+
+/**
+ * Hook for persisting state to localStorage
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+  options: UseStorageOptions<T> = {},
+): [T, (value: T | ((prev: T) => T)) => void, () => void] {
+  const { serializer = JSON.stringify, deserializer = JSON.parse, initializeWithValue = true } = options;
+
+  // Get initial value from storage or use provided initial value
+  const readValue = useCallback((): T => {
+    try {
+      // In Taro, we need to use async storage API, but for initial value
+      // we'll use the provided initial value and fetch asynchronously later
+      return initialValue;
+    } catch (error) {
+      console.warn(`Error reading storage key "${key}":`, error);
+      return initialValue;
+    }
+  }, [key, initialValue, deserializer]);
+
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (initializeWithValue) {
+      return readValue();
+    }
+    return initialValue;
+  });
+
+  // Set value in storage
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      try {
+        // Allow value to be a function so we have same API as useState
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+
+        // Save to state
+        setStoredValue(valueToStore);
+
+        // Save to storage using Taro API
+        Taro.setStorageSync(key, serializer(valueToStore));
+      } catch (error) {
+        console.warn(`Error setting storage key "${key}":`, error);
+      }
+    },
+    [key, serializer, storedValue],
+  );
+
+  // Remove value from storage
+  const removeValue = useCallback(() => {
+    try {
+      Taro.removeStorageSync(key);
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(`Error removing storage key "${key}":`, error);
+    }
+  }, [key, initialValue]);
+
+  // Fetch initial value from storage asynchronously
+  useEffect(() => {
+    const fetchInitialValue = () => {
+      try {
+        const item = Taro.getStorageSync(key);
+        if (item.data) {
+          setStoredValue(deserializer(item.data));
+        }
+      } catch (error) {
+        console.warn(`Error reading storage key "${key}":`, error);
+      }
+    };
+
+    fetchInitialValue();
+  }, [key, initialValue, deserializer]);
+
+  // Fetch initial value from storage asynchronously
+  useEffect(() => {
+    const fetchInitialValue = () => {
+      try {
+        const item = Taro.getStorageSync(key);
+        if (item.data) {
+          setStoredValue(deserializer(item.data));
+        }
+      } catch (error) {
+        console.warn(`Error reading storage key "${key}":`, error);
+      }
+    };
+
+    fetchInitialValue();
+  }, [key, initialValue, deserializer]);
+
+  return [storedValue, setValue, removeValue];
+}
+
+/**
+ * Hook for persisting state to sessionStorage
+ */
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+  options: UseStorageOptions<T> = {},
+): [T, (value: T | ((prev: T) => T)) => void, () => void] {
+  const { serializer = JSON.stringify, deserializer = JSON.parse, initializeWithValue = true } = options;
+
+  const readValue = useCallback((): T => {
+    try {
+      // In Taro, we need to use async storage API, but for initial value
+      // we'll use the provided initial value and fetch asynchronously later
+      return initialValue;
+    } catch (error) {
+      console.warn(`Error reading storage key "${key}":`, error);
+      return initialValue;
+    }
+  }, [key, initialValue, deserializer]);
+
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (initializeWithValue) {
+      return readValue();
+    }
+    return initialValue;
+  });
+
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        Taro.setStorageSync(key, serializer(valueToStore));
+      } catch (error) {
+        console.warn(`Error setting storage key "${key}":`, error);
+      }
+    },
+    [key, serializer, storedValue],
+  );
+
+  const removeValue = useCallback(() => {
+    try {
+      Taro.removeStorageSync(key);
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(`Error removing storage key "${key}":`, error);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}

package/src/hooks/useStyle.ts

@@ -137,7 +137,10 @@ export const useStyle = () => {
    * @param baseStyle 基础样式
    * @returns 包含激活效果的样式对象
    */
-  const active = (activeStyle: Record<string, unknown>, baseStyle?: Record<string, unknown>): Record<string, unknown> => {
+  const active = (
+    activeStyle: Record<string, unknown>,
+    baseStyle?: Record<string, unknown>,
+  ): Record<string, unknown> => {
     return {
       ...baseStyle,
       '&:active': activeStyle,
@@ -150,7 +153,10 @@ export const useStyle = () => {
    * @param baseStyle 基础样式
    * @returns 包含禁用效果的样式对象
    */
-  const disabled = (disabledStyle: Record<string, unknown>, baseStyle?: Record<string, unknown>): Record<string, unknown> => {
+  const disabled = (
+    disabledStyle: Record<string, unknown>,
+    baseStyle?: Record<string, unknown>,
+  ): Record<string, unknown> => {
     return {
       ...baseStyle,
       '&:disabled': disabledStyle,

package/src/hooks/useToggle.ts

@@ -0,0 +1,54 @@
+/**
+ * useToggle Hook
+ * Simple boolean state toggle with optional callbacks
+ *
+ * @example
+ * ```typescript
+ * const [isOpen, toggle, setIsOpen] = useToggle(false);
+ * toggle(); // true
+ * toggle(); // false
+ * setIsOpen(true); // true
+ * ```
+ */
+
+import { useState, useCallback } from 'react';
+
+export interface UseToggleReturn {
+  /** Current boolean value */
+  value: boolean;
+  /** Toggle the value */
+  toggle: () => void;
+  /** Set to true */
+  setTrue: () => void;
+  /** Set to false */
+  setFalse: () => void;
+  /** Set to specific value */
+  setValue: (value: boolean) => void;
+}
+
+/**
+ * Hook for managing boolean toggle state
+ */
+export function useToggle(initialValue: boolean = false): UseToggleReturn {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((v) => !v);
+  }, []);
+
+  const setTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  return {
+    value,
+    toggle,
+    setTrue,
+    setFalse,
+    setValue,
+  };
+}