初始版本提交

src/hooks/core/onMountedOrActivated.ts

@@ -0,0 +1,18 @@
+import { nextTick, onMounted, onActivated } from 'vue';
+
+export function onMountedOrActivated(hook: Fn) {
+  let mounted: boolean;
+
+  onMounted(() => {
+    hook();
+    nextTick(() => {
+      mounted = true;
+    });
+  });
+
+  onActivated(() => {
+    if (mounted) {
+      hook();
+    }
+  });
+}

src/hooks/core/useAttrs.ts

@@ -0,0 +1,40 @@
+import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue';
+import type { Ref } from 'vue';
+interface Params {
+  excludeListeners?: boolean;
+  excludeKeys?: string[];
+  excludeDefaultKeys?: boolean;
+}
+
+const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
+const LISTENER_PREFIX = /^on[A-Z]/;
+
+export function entries<T>(obj: Recordable<T>): [string, T][] {
+  return Object.keys(obj).map((key: string) => [key, obj[key]]);
+}
+
+export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
+  const instance = getCurrentInstance();
+  if (!instance) return {};
+
+  const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
+  const attrs = shallowRef({});
+  const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
+
+  // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
+  instance.attrs = reactive(instance.attrs);
+
+  watchEffect(() => {
+    const res = entries(instance.attrs).reduce((acm, [key, val]) => {
+      if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
+        acm[key] = val;
+      }
+
+      return acm;
+    }, {} as Recordable);
+
+    attrs.value = res;
+  });
+
+  return attrs;
+}

src/hooks/core/useContext.ts

@@ -0,0 +1,45 @@
+import {
+  InjectionKey,
+  provide,
+  inject,
+  reactive,
+  readonly as defineReadonly,
+  // defineComponent,
+  UnwrapRef,
+} from 'vue';
+
+export interface CreateContextOptions {
+  readonly?: boolean;
+  createProvider?: boolean;
+  native?: boolean;
+}
+
+type ShallowUnwrap<T> = {
+  [P in keyof T]: UnwrapRef<T[P]>;
+};
+
+export function createContext<T>(
+  context: any,
+  key: InjectionKey<T> = Symbol(),
+  options: CreateContextOptions = {},
+) {
+  const { readonly = true, createProvider = false, native = false } = options;
+
+  const state = reactive(context);
+  const provideData = readonly ? defineReadonly(state) : state;
+  !createProvider && provide(key, native ? context : provideData);
+
+  return {
+    state,
+  };
+}
+
+export function useContext<T>(key: InjectionKey<T>, native?: boolean): T;
+export function useContext<T>(key: InjectionKey<T>, defaultValue?: any, native?: boolean): T;
+
+export function useContext<T>(
+  key: InjectionKey<T> = Symbol(),
+  defaultValue?: any,
+): ShallowUnwrap<T> {
+  return inject(key, defaultValue || {});
+}

src/hooks/core/useLockFn.ts

@@ -0,0 +1,17 @@
+import { ref, unref } from 'vue';
+
+export function useLockFn<P extends any[] = any[], V = any>(fn: (...args: P) => Promise<V>) {
+  const lockRef = ref(false);
+  return async function (...args: P) {
+    if (unref(lockRef)) return;
+    lockRef.value = true;
+    try {
+      const ret = await fn(...args);
+      lockRef.value = false;
+      return ret;
+    } catch (e) {
+      lockRef.value = false;
+      throw e;
+    }
+  };
+}

src/hooks/core/useRefs.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+import { ref, onBeforeUpdate } from 'vue';
+
+export function useRefs(): [Ref<HTMLElement[]>, (index: number) => (el: HTMLElement) => void] {
+  const refs = ref([]) as Ref<HTMLElement[]>;
+
+  onBeforeUpdate(() => {
+    refs.value = [];
+  });
+
+  const setRefs = (index: number) => (el: HTMLElement) => {
+    refs.value[index] = el;
+  };
+
+  return [refs, setRefs];
+}

src/hooks/core/useTimeout.ts

@@ -0,0 +1,45 @@
+import { ref, watch } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import { isFunction } from '/@/utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false },
+    );
+  }
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: TimeoutHandle;
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
+
+  start();
+
+  tryOnUnmounted(stop);
+
+  return { readyRef, stop, start };
+}