donar 0.0.1

package/src/hooks/state.ts

@@ -0,0 +1,140 @@
+import { type SetStateAction, useState, useCallback, useRef } from 'react';
+
+/**
+ * @author sonion
+ * @description 创建静态的state, 不会触发组件重新渲染
+ * @param {T} initialValue - 初始值
+ */
+export function useStaticState<T>(
+  initialValue: T
+): [() => T, (t: T) => void, (t?: T) => T];
+export function useStaticState<T>(
+  initialValue?: undefined
+): [() => T | undefined, (t: T) => void, (t?: T) => T | undefined];
+export function useStaticState<T>(initialValue?: T) {
+  const ref = useRef<T>(initialValue as T);
+  const getValue = useCallback(() => ref.current, []);
+  const setValue = useCallback((t: T) => (ref.current = t), []);
+  const withValue = useCallback(
+    (t?: T) => (t === void 0 ? ref.current : (ref.current = t)),
+    []
+  );
+  return [getValue, setValue, withValue];
+}
+
+/**
+ * @author sonion
+ * @description 创建最新的回调函数，不触发重新执行，同时避免闭包问题。
+ * 作用类似19.2的useEffectEvent，但原理和用法不同。
+ * @param {T} dep - 依赖函数、依赖函数数组、依赖函数对象
+ * @returns {()=>T} - 获取最新回调函数、依赖函数数组、依赖函数对象的方法
+ */
+export function useLatestCallback<T extends (...args: never) => unknown>(
+  dep: T
+): () => T;
+export function useLatestCallback<T extends (...args: never) => unknown>(
+  dep?: T | undefined
+): () => T | undefined;
+export function useLatestCallback(dep: (...args: unknown[]) => unknown) {
+  const ref = useRef(dep);
+  // eslint-disable-next-line react-hooks/refs
+  ref.current !== dep && (ref.current = dep);
+  return useCallback(() => ref.current, []);
+}
+
+/**
+ * @author sonion
+ * @description 创建相同值不触发组件重新渲染的state。和useCreateSafeRef类似，但useCreateSafeRef更专注于ref
+ * @param params - 参数对象
+ * @param {T} params.initialValue - 初始值
+ * @param {(val: T) => void} [params.onChange] - 变化回调
+ * @param {(prev: T, next: T) => boolean} [params.hasDiff] - 对比函数，默认对比引用是否不相同。
+ * @param {boolean} [params.onlyEvent] - 是否仅触发事件，不更新值，避免重渲染
+ */
+export function useDistinctState<T>(params: {
+  initialValue: T | (() => T);
+  onChange?: (val: T) => void;
+  hasDiff?: (prev?: T, next?: T) => boolean;
+  onlyEvent: true;
+}): [undefined, (val: SetStateAction<T>) => void, () => T];
+export function useDistinctState<T>(params: {
+  initialValue: T | (() => T);
+  onChange?: (val: T) => void;
+  hasDiff?: (prev?: T, next?: T) => boolean;
+  onlyEvent?: false;
+}): [T, (val: SetStateAction<T>) => void, () => T];
+export function useDistinctState<T>({
+  initialValue,
+  onChange,
+  hasDiff = (prev, next) => prev !== next,
+  onlyEvent,
+}: {
+  /** 初始值 */
+  initialValue: T;
+  /** 变化回调 */
+  onChange?: (val: T) => void;
+  /** 对比函数，默认对比引用是否不相同。 */
+  hasDiff?: (prev: T, next: T) => boolean;
+  /** 是否仅触发事件，不更新值，避免重渲染 */
+  onlyEvent?: true | false;
+}) {
+  const prevRef = useRef<T>(void 0 as T);
+  // 初始化只可能是函数，所以包一层，在这层一起初始化prevRef的值，避免初始化重复调用
+  const initial = () =>
+    (prevRef.current =
+      typeof initialValue === 'function'
+        ? (initialValue as () => T)()
+        : initialValue);
+  const [value, setValue] = useState(initial);
+
+  const getOnChange = useLatestCallback(onChange);
+  const setValueDistinct = useCallback(
+    (val: SetStateAction<T>) => {
+      const value =
+        typeof val === 'function'
+          ? (val as (prevState: T) => T)(prevRef.current)
+          : val;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      hasDiff ??= (prev, next) => prev !== next;
+      if (hasDiff(prevRef.current, value)) {
+        const onChange = getOnChange();
+        onChange?.(value);
+        prevRef.current = value;
+        onlyEvent || setValue(value); // 仅触发事件时，不更新值
+      }
+    },
+    [getOnChange, onlyEvent, setValue, !!hasDiff]
+  );
+  return [
+    onlyEvent ? void 0 : value, // 仅触发事件时，返回undefined
+    setValueDistinct,
+    useCallback(() => prevRef.current, []), // 获取上一次的值
+  ] as const;
+}
+
+/**
+ * @author sonion
+ * @description 创建安全的Ref引用
+ * @param {(oldNode?: T, newNode?: T) => boolean} [hasDiff] - 对比函数，默认对比引用是否不相同。
+ */
+export const useCreateSafeRef = <T extends object = HTMLElement>(
+  hasDiff?: (oldNode?: T, newNode?: T) => boolean
+) => {
+  const [el, setEl] = useState<T>();
+  const isReadyRef = useRef(false); // 是否赋值完成
+  return [
+    el,
+    useCallback(
+      (node: T | null) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        hasDiff ??= (oldNode, newNode) => oldNode !== newNode;
+        if (node && hasDiff(el, node)) {
+          isReadyRef.current = true;
+          setEl(node);
+        }
+      },
+      [el, !!hasDiff] // 对比函数是否存在，对比函数又要稳定函数引用
+    ),
+    isReadyRef,
+  ] as const;
+};

package/src/hooks/storage.ts

@@ -0,0 +1,103 @@
+import { useCallback, useEffect } from 'react';
+import { useDistinctState } from './state';
+
+type StorageParams<T> = Omit<
+  Parameters<typeof useDistinctState<T>>[0],
+  'onlyEvent'
+> & {
+  /** 储存的key */
+  key: string;
+  /** 储存类型。 localStorage 或 sessionStorage */
+  storage?: typeof localStorage | typeof sessionStorage;
+  /** 初始化类型检查函数，检查不通过使用初始值。可避免类型不对引起的错误 */
+  checkType?: (val: T) => boolean;
+  /** tab关闭前的回调, 相同key的不同回调只有初始生效。 */
+  beforeunload?: () => void;
+};
+
+/**
+ * @author sonion
+ * @description 本地储存
+ * @param params - 参数对象
+ * @param params.key - 储存的key
+ * @param params.initialValue - 初始值
+ * @param [params.hasDiff] - 对比函数，默认对比引用是否不相同。
+ * @param params.onChange - 变化回调
+ * @param [params.storage] - 储存类型。 localStorage 或 sessionStorage
+ * @param [params.checkType] - 初始化类型检查函数，检查不通过使用初始值。可避免类型不对引起的错误
+ * @param [params.beforeunload] - tab关闭前的回调, 相同key的不同回调只有初始生效。
+ */
+export const useStorage = <T>({
+  key,
+  initialValue,
+  hasDiff,
+  onChange,
+  storage = localStorage,
+  checkType = () => true,
+  beforeunload,
+}: StorageParams<T>) => {
+  const [storedValue, setStoredValue] = useDistinctState<T>({
+    initialValue: () => {
+      try {
+        const saved = storage.getItem(key);
+        const saved2 = saved ? JSON.parse(saved) : initialValue;
+        return checkType(saved2) ? saved2 : initialValue;
+      } catch (err) {
+        console.warn('初始化出错，已使用默认值', err);
+        return initialValue;
+      }
+    },
+    hasDiff,
+    onChange,
+  });
+
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      try {
+        setStoredValue((old) => {
+          const valueToStore = value instanceof Function ? value(old) : value;
+          const newValue = JSON.stringify(valueToStore);
+          storage.setItem(key, newValue);
+          window.dispatchEvent(
+            new StorageEvent('storage', {
+              key,
+              newValue,
+              storageArea: storage,
+            })
+          );
+          return valueToStore;
+        });
+      } catch (error) {
+        console.error('持久化储存错误', error);
+      }
+    },
+    [key, storage, setStoredValue]
+  );
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea !== storage || event.key !== key) {
+        return;
+      }
+      try {
+        const newValue = event.newValue
+          ? JSON.parse(event.newValue)
+          : initialValue;
+        setStoredValue(newValue);
+      } catch (error) {
+        console.error('storage事件处理出错', error);
+      }
+    };
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, [key, storage, initialValue, setStoredValue]);
+
+  useEffect(() => {
+    if (!beforeunload) return;
+    window.addEventListener('beforeunload', beforeunload);
+    // 不用返回清理，因为组件卸载事件不移除
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [storedValue, setValue] as const;
+};

package/src/hooks/timer.ts

@@ -0,0 +1,42 @@
+import { useRef, useCallback } from 'react';
+import { type RAfIntervalReturn, rAfInterval, clearRAfInterval } from '@/utils';
+
+/**
+ * @author sonion
+ * @description 自管理定时器的interval
+ * @param {()=>void} cb - 回调函数
+ * @param {number} duration - 时间间隔
+ * @returns {[() => void, () => void]} - [启动函数, 清除函数]
+ */
+export const useInterval = (cb: () => void, duration: number) => {
+  const timer = useRef<ReturnType<typeof setTimeout>>(void 0);
+  const cbRef = useRef(cb);
+  cbRef.current = cb;
+  const run = useCallback(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      cbRef.current();
+      // eslint-disable-next-line react-hooks/immutability
+      run?.();
+    }, duration);
+  }, [duration]);
+  const stop = useCallback(() => clearTimeout(timer.current), [timer]);
+  return [run, stop];
+};
+
+/**
+ * @author sonion
+ * @description 自管理定时器的rAfInterval
+ * @param {()=>void} cb - 回调函数
+ * @param {number} duration - 时间间隔
+ * @returns {[() => void, () => void]} - [启动函数, 清除函数]
+ */
+export const useRAfInterval = (cb: () => void, duration: number) => {
+  const timer = useRef<RAfIntervalReturn>(void 0);
+  const run = useCallback(() => {
+    clearRAfInterval(timer.current);
+    timer.current = rAfInterval(cb, duration);
+  }, [cb, duration]);
+  const stop = useCallback(() => clearRAfInterval(timer.current), [timer]);
+  return [run, stop] as const;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';

package/src/test/emiter-test.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../utils/index.ts';
+
+const emitter = new EventEmitter<{
+  test: 'fgh';
+  onTest?: Record<string, unknown>;
+  optionalTest: string;
+}>();
+
+emitter.addEventListener('test', (data) => {
+  console.log('test', data);
+});
+
+emitter.addEventListener('onTest', (data) => {
+  console.log('onTest', data);
+});
+
+emitter.emit('onTest');
+
+emitter.emit('optionalTest', '123');

package/src/test/index.ts

@@ -0,0 +1,35 @@
+import {
+  convertCamel2Pascal,
+  convertPascal2Camel,
+  convertCamel2Snake,
+  convertSnake2Camel,
+} from '../utils';
+
+const testObj = {
+  camelCaseKey: 'value',
+  PascalCaseKey: 'value',
+  snake_case_key: 'value',
+  nestedObj: {
+    camelCaseKey2: 'value',
+    PascalCaseKe5y2: 'value',
+    snake_ca6se_key2: 'value',
+    nextArray: [
+      {
+        camelCaseKey: 'value',
+        PascalCaseKey: 'value',
+        snake_case_key: 'value',
+      },
+    ],
+  },
+};
+
+const testObjSnake = convertCamel2Snake([testObj, testObj.nestedObj]);
+const ignoreKeys = ['pascal_case_ke5y2', 'deep_key'] as const;
+const testObjCamel = convertSnake2Camel(testObjSnake, ignoreKeys);
+const testObjPascal = convertCamel2Pascal(testObj);
+const testObjCamel2 = convertPascal2Camel(testObjPascal);
+
+console.clog('testObjSnake:', testObjSnake);
+console.clog('testObjCamel:', testObjCamel);
+console.clog('testObjPascal:', testObjPascal);
+console.clog('testObjCamel2:', testObjCamel2);

package/src/test/retry-async-test.ts

@@ -0,0 +1,8 @@
+import { retryAsync } from '../utils/retry-async.ts';
+
+retryAsync(() => {
+  console.log('retryAsync');
+  return Promise.reject('success');
+}).catch((err) => {
+  console.log('最后', err);
+});

package/src/utils/class-singleton.ts

@@ -0,0 +1,23 @@
+/**
+ * @author sonion
+ * @description 构造函数转单例工具
+ * @param className - 要转单例的构造函数
+ */
+export const singleton = <
+  T extends new (...args: ConstructorParameters<T>) => R,
+  R extends object = InstanceType<T>,
+>(
+  className: T
+): T => {
+  // 单例模式，生成函数
+  let ins: R;
+  const proxy = new Proxy<T>(className, {
+    construct(target: T, args: ConstructorParameters<T>): R {
+      if (!ins) ins = new target(...args);
+      else console.warn(`${className.name}为单例构造函数，只能有一个实例`);
+      return ins;
+    },
+  });
+  className.prototype.constructor = proxy;
+  return proxy;
+};

package/src/utils/concurrency.ts

@@ -0,0 +1,49 @@
+import { promiseTry } from './thenable';
+
+/**
+ * @author sonion
+ * @description 并发控制器
+ * @param {number} concurrency - 并发数
+ */
+export class ConcurrencyController<T> {
+  /** 任务队列 */
+  private queue: Array<{
+    task: () => Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: unknown) => void;
+  }> = [];
+  /** 并发数 */
+  private concurrency: number;
+  /** 当前运行中的任务数 */
+  private running = 0;
+
+  constructor(concurrency = 5) {
+    this.concurrency = concurrency;
+  }
+
+  push(task: () => Promise<T>) {
+    return new Promise<T>((resolve, reject) => {
+      this.queue.push({ task, resolve, reject });
+      this.run();
+    });
+  }
+
+  run() {
+    while (this.running < this.concurrency && this.queue.length > 0) {
+      this.next();
+    }
+  }
+
+  private next() {
+    if (this.running >= this.concurrency) return;
+    const { task, resolve, reject } = this.queue.shift() ?? {};
+    if (!task) return;
+    this.running++;
+    promiseTry(task)
+      .then(resolve, reject)
+      .finally(() => {
+        this.running--;
+        this.run();
+      });
+  }
+}

package/src/utils/debounce.ts

@@ -0,0 +1,20 @@
+/**
+ * @author sonion
+ * @description 防抖
+ * @param {(...args: unknown[])=>void} fn - 防抖的函数
+ * @param {number} delay - 毫秒
+ * @returns {(...args: unknown[])=>void} - 防抖后的函数
+ */
+export const debounce = <A extends unknown[], R, T = unknown>(
+  fn: (this: T, ...args: A) => R,
+  delay: number
+): ((this: T, ...args: A) => void) => {
+  let timer: ReturnType<typeof setTimeout>;
+
+  return function (...args: A): void {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this as unknown as ThisParameterType<typeof fn>, args);
+    }, delay);
+  };
+};

package/src/utils/deep-copy.ts

@@ -0,0 +1,132 @@
+/**
+ * @author sonion
+ * @description 获取元素的数据类型
+ * @param {unknown} data - 要判断的参数
+ * @returns {string} - 元素的数据类型
+ */
+const getObjectType = (() => {
+  const regexp = /^\[[a-z]+ ([A-Za-z]+)\]$/;
+  return (data: object) => {
+    return (
+      (data.constructor && data.constructor.name) ||
+      Object.prototype.toString.call(data).replace(regexp, '$1')
+    );
+  };
+})();
+
+/**
+ * @author sonion
+ * @description 判断是否为对象
+ * @param {unknown} val - 要判断的参数
+ * @returns {boolean} - 是否为对象
+ */
+const isObject = <T extends object>(val: unknown): val is T =>
+  val === Object(val);
+
+/**
+ * @author sonion
+ * @description 判断是否为Set
+ * @param {unknown} val - 要判断的参数
+ * @returns {boolean} - 是否为Set
+ */
+const isSet = <T>(val: unknown): val is Set<T> => {
+  if (!isObject(val)) return false;
+  if (val instanceof Set) return true;
+  return (
+    Object.prototype.hasOwnProperty.call(val as object, 'size') &&
+    typeof (val as Set<T>).add === 'function' &&
+    typeof (val as Set<T>).has === 'function'
+  );
+};
+
+/**
+ * @author sonion
+ * @description 判断是否为Map
+ * @param {unknown} val - 要判断的参数
+ * @returns {boolean} - 是否为Map
+ */
+const isMap = <K, V>(val: unknown): val is Map<K, V> => {
+  if (!isObject(val)) return false;
+  if (val instanceof Map) return true;
+  return (
+    Object.prototype.hasOwnProperty.call(val as object, 'size') &&
+    typeof (val as Map<K, V>).set === 'function' &&
+    typeof (val as Map<K, V>).get === 'function'
+  );
+};
+
+// 深拷贝参数和返回类型
+type DeepCloneResult = Record<string | symbol, unknown>;
+type DeepCloneParamReturn = DeepCloneResult | Array<unknown>;
+type ArrayElement<T> = T extends Array<infer U> ? U : never;
+type SetElement<T> = T extends Set<infer U> ? U : never;
+type MapElement<T> = T extends Map<infer K, infer V> ? [K, V] : never;
+
+/**
+ * @author sonion
+ * @description 根据参数类型创建一个新的对象或集合或映射
+ * @param {T} value - 要创建的参数
+ */
+const createResult = <T>(value: T) => {
+  if (Array.isArray(value)) return [] as ArrayElement<T>[];
+  if (isSet(value)) return new Set<SetElement<T>>();
+  if (isMap(value)) return new Map<MapElement<T>[0], MapElement<T>[1]>();
+  return {} as T;
+};
+
+/**
+ * @author sonion
+ * @description 解决了循环引用、原型一致的深度克隆 // 原生structuredClone 没解决Symbol、原型链，兼容到22年8月
+ * @param {DeepCloneParamReturn} value 要克隆的对象
+ * @param {boolean} [isCopyProto] 是否拷贝原型链 -默认值：true
+ * @returns {DeepCloneParamReturn} - 克隆后的对象
+ */
+export const deepClone = <
+  T extends DeepCloneParamReturn,
+  U extends DeepCloneParamReturn,
+>(
+  value: T,
+  isCopyProto = true
+): U => {
+  const cache = new WeakMap(); // 解决循环引用 weakMap不影响垃圾回收
+  const _deepClone = <T>(value: T) => {
+    if (!isObject(value)) return value;
+    switch (getObjectType(value)) {
+      case 'Date':
+      case 'RegExp':
+      case 'Function': {
+        const constructor = value.constructor as new (
+          ...args: unknown[]
+        ) => unknown;
+        return new constructor(value); // 用其构造函数传入 原数据或value.valueOf() 就能创建一个新的对象
+      }
+      case 'WeakMap':
+      case 'WeakSet':
+        return value;
+    }
+    if (cache.get(value)) return cache.get(value); // 解决循环引用
+    const result = createResult(value);
+    isCopyProto && Object.setPrototypeOf(result, Object.getPrototypeOf(value)); // 拷贝原型链
+    cache.set(value, result); // 解决循环引用 把克隆过的保存。因为是递归，必须提前报存。否则后面的循环引用可能获取不到，一直进入下一层
+    if (isSet(value)) {
+      for (const v of value) {
+        (result as Set<T>).add(_deepClone(v));
+      }
+      return result;
+    }
+    if (isMap(value)) {
+      for (const [k, v] of value) {
+        (result as Map<T, T>).set(_deepClone(k), _deepClone(v)); // Map key可以是对象，所以也要深拷贝
+      }
+      return result;
+    }
+    Reflect.ownKeys(value).map(
+      (key) =>
+        ((result as DeepCloneResult)[key] = _deepClone(
+          (value as DeepCloneResult)[key]
+        ))
+    );
+    return result;
+  };
+  return _deepClone(value);
+};

package/src/utils/dev.ts

@@ -0,0 +1,16 @@
+declare global {
+  interface Console {
+    clog: typeof console.log;
+  }
+}
+
+type ClogParams = Parameters<typeof console.log>;
+
+export const clog = (...args: ClogParams) => {
+  const style =
+    'padding: 4px 8px; border-radius: 4px; color:#fff; background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);';
+  const first = typeof args[0] === 'string' ? args.shift() : '==>';
+  args.unshift(`%c ${first}`, style);
+  console.log(...args);
+};
+console.clog = clog;

package/src/utils/download.ts

@@ -0,0 +1,39 @@
+/**
+ * @author sonion
+ * @description 浏览器原生下载。需要content-disposition: attachment; filename=xxx响应头支持
+ * a元素、window.open；target为_self短时间打开多个，后面的会覆盖前面的。为_blank时都会拦截，但window.open可以通过返回值检测是否被拦截
+ * @param {string} url - 下载链接
+ */
+export const browserNativeDownload = (url: string) =>
+  new Promise<boolean>((resolve, reject) => {
+    try {
+      const newTab = window.open(url, '_blank');
+      if (!newTab || newTab.closed || typeof newTab.closed === 'undefined') {
+        reject(new Error('Tab 可能被拦截了'));
+      } else {
+        resolve(true);
+      }
+    } catch {
+      reject(new Error('下载出错'));
+    }
+  });
+
+/**
+ * @author sonion
+ * @description blob下载
+ * @param {Blob} blob - 下载的blob数据
+ * @param {string} fileName - 下载的文件名
+ * @param {boolean} [inline] - 是否内联下载(不开新tab) 默认内联
+ */
+export const blobDownload = (blob: Blob, fileName: string, inline = true) => {
+  const url = URL.createObjectURL(blob);
+  try {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    inline || a.setAttribute('target', '_blank');
+    a.click();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+};