refactor: raf

Author: tangjinzhou

components/_util/PortalWrapper.tsx

@@ -14,8 +14,7 @@ import {
 } from 'vue';
 import canUseDom from './canUseDom';
 import ScrollLocker from '../vc-util/Dom/scrollLocker';
-import type { RafFrame } from './raf';
-import wrapperRaf from './raf';
+import raf from './raf';
 
 let openCount = 0;
 const supportDom = canUseDom();
@@ -62,7 +61,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const container = ref<HTMLElement>();
     const componentRef = ref();
-    const rafId = ref<RafFrame>();
+    const rafId = ref<number>();
     const scrollLocker = new ScrollLocker({
       container: getParent(props.getContainer) as HTMLElement,
     });
@@ -176,7 +175,7 @@ export default defineComponent({
 
       nextTick(() => {
         if (!attachToParent()) {
-          rafId.value = wrapperRaf(() => {
+          rafId.value = raf(() => {
             instance.update();
           });
         }
@@ -190,7 +189,7 @@ export default defineComponent({
         openCount = visible && openCount ? openCount - 1 : openCount;
       }
       removeCurrentContainer();
-      wrapperRaf.cancel(rafId.value);
+      raf.cancel(rafId.value);
     });
 
     return () => {

components/_util/hooks/useLayoutState.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import { onBeforeUnmount, ref } from 'vue';
-import wrapperRaf from '../raf';
+import raf from '../raf';
 
 export type Updater<State> = (prev: State) => State;
 /**
@@ -15,10 +15,10 @@ export function useLayoutState<State>(
   let updateBatchRef = [];
   const rafRef = ref();
   function setFrameState(updater: Updater<State>) {
-    wrapperRaf.cancel(rafRef.value);
+    raf.cancel(rafRef.value);
     updateBatchRef.push(updater);
 
-    rafRef.value = wrapperRaf(() => {
+    rafRef.value = raf(() => {
       const prevBatch = updateBatchRef;
       // const prevState = stateRef.value;
       updateBatchRef = [];
@@ -34,7 +34,7 @@ export function useLayoutState<State>(
   }
 
   onBeforeUnmount(() => {
-    wrapperRaf.cancel(rafRef.value);
+    raf.cancel(rafRef.value);
   });
 
   return [stateRef as Ref<State>, setFrameState];

components/_util/raf.ts

@@ -1,33 +1,47 @@
-import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
+let raf = (callback: FrameRequestCallback) => +setTimeout(callback, 16);
+let caf = (num: number) => clearTimeout(num);
 
-const oriRaf = getRequestAnimationFrame();
+if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+  raf = (callback: FrameRequestCallback) => window.requestAnimationFrame(callback);
+  caf = (handle: number) => window.cancelAnimationFrame(handle);
+}
 
-export type RafFrame = {
-  id: number;
-};
-// Support call raf with delay specified frame
-export default function raf(callback: () => void, delayFrames = 1): { id: number } {
-  let restFrames: number = delayFrames;
+let rafUUID = 0;
+const rafIds = new Map<number, number>();
+
+function cleanup(id: number) {
+  rafIds.delete(id);
+}
 
-  function internalCallback() {
-    restFrames -= 1;
+export default function wrapperRaf(callback: () => void, times = 1): number {
+  rafUUID += 1;
+  const id = rafUUID;
 
-    if (restFrames <= 0) {
+  function callRef(leftTimes: number) {
+    if (leftTimes === 0) {
+      // Clean up
+      cleanup(id);
+
+      // Trigger
       callback();
     } else {
-      frame.id = oriRaf(internalCallback);
+      // Next raf
+      const realId = raf(() => {
+        callRef(leftTimes - 1);
+      });
+
+      // Bind real raf id
+      rafIds.set(id, realId);
     }
   }
 
-  const frame = {
-    id: oriRaf(internalCallback),
-  };
+  callRef(times);
 
-  return frame;
+  return id;
 }
 
-raf.cancel = function cancel(frame?: { id: number }) {
-  if (!frame) return;
-
-  cancelRequestAnimationFrame(frame.id);
+wrapperRaf.cancel = (id: number) => {
+  const realId = rafIds.get(id);
+  cleanup(realId);
+  return caf(realId);
 };

components/_util/throttleByAnimationFrame.ts

@@ -1,8 +1,7 @@
-import type { RafFrame } from './raf';
 import raf from './raf';
 
 export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
-  let requestId: RafFrame;
+  let requestId: number;
 
   const later = (args: any[]) => () => {
     requestId = null;

components/menu/src/PopupTrigger.tsx

@@ -4,7 +4,6 @@ import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
 import type { MenuMode } from './interface';
 import { useInjectForceRender, useInjectMenu } from './hooks/useMenuContext';
 import { placements, placementsRtl } from './placements';
-import type { RafFrame } from '../../_util/raf';
 import raf from '../../_util/raf';
 import classNames from '../../_util/classNames';
 import { getTransitionProps } from '../../_util/transition';
@@ -54,7 +53,7 @@ export default defineComponent({
 
     const popupPlacement = computed(() => popupPlacementMap[props.mode]);
 
-    const visibleRef = ref<RafFrame>();
+    const visibleRef = ref<number>();
     watch(
       () => props.visible,
       visible => {

components/slider/SliderTooltip.tsx

@@ -1,6 +1,5 @@
 import { onBeforeUnmount, watch, onActivated, defineComponent, ref } from 'vue';
 import Tooltip, { tooltipProps } from '../tooltip';
-import type { RafFrame } from '../_util/raf';
 import raf from '../_util/raf';
 
 export default defineComponent({
@@ -10,7 +9,7 @@ export default defineComponent({
   setup(props, { attrs, slots }) {
     const innerRef = ref<any>(null);
 
-    const rafRef = ref<RafFrame>(null);
+    const rafRef = ref<number>(null);
 
     function cancelKeepAlign() {
       raf.cancel(rafRef.value!);

components/tabs/src/TabNavList/index.tsx

@@ -22,8 +22,7 @@ import { onBeforeUnmount, defineComponent, ref, watch, watchEffect, computed } f
 import PropTypes from '../../../_util/vue-types';
 import useSyncState from '../hooks/useSyncState';
 import useState from '../../../_util/hooks/useState';
-import type { RafFrame } from '../../../_util/raf';
-import wrapperRaf from '../../../_util/raf';
+import raf from '../../../_util/raf';
 import classNames from '../../../_util/classNames';
 import ResizeObserver from '../../../vc-resize-observer';
 import { toPx } from '../../../_util/util';
@@ -340,9 +339,9 @@ export default defineComponent({
     const activeTabOffset = computed(() => tabOffsets.value.get(props.activeKey));
 
     // Delay set ink style to avoid remove tab blink
-    const inkBarRafRef = ref<RafFrame>();
+    const inkBarRafRef = ref<number>();
     const cleanInkBarRaf = () => {
-      wrapperRaf.cancel(inkBarRafRef.value);
+      raf.cancel(inkBarRafRef.value);
     };
 
     watch([activeTabOffset, tabPositionTopOrBottom, () => props.rtl], () => {
@@ -364,7 +363,7 @@ export default defineComponent({
       }
 
       cleanInkBarRaf();
-      inkBarRafRef.value = wrapperRaf(() => {
+      inkBarRafRef.value = raf(() => {
         setInkStyle(newInkStyle);
       });
     });

components/tabs/src/hooks/useRaf.ts

@@ -1,24 +1,23 @@
 import type { Ref } from 'vue';
 import { ref, onBeforeUnmount } from 'vue';
-import type { RafFrame } from '../../../_util/raf';
-import wrapperRaf from '../../../_util/raf';
+import raf from '../../../_util/raf';
 
 export default function useRaf<Callback extends Function>(callback: Callback) {
-  const rafRef = ref<RafFrame>();
+  const rafRef = ref<number>();
   const removedRef = ref(false);
 
   function trigger(...args: any[]) {
     if (!removedRef.value) {
-      wrapperRaf.cancel(rafRef.value);
-      rafRef.value = wrapperRaf(() => {
+      raf.cancel(rafRef.value);
+      rafRef.value = raf(() => {
         callback(...args);
       });
     }
   }
 
   onBeforeUnmount(() => {
     removedRef.value = true;
-    wrapperRaf.cancel(rafRef.value);
+    raf.cancel(rafRef.value);
   });
 
   return trigger;

components/vc-image/src/hooks/useFrameSetState.ts

@@ -1,12 +1,11 @@
-import type { RafFrame } from '../../../_util/raf';
 import raf from '../../../_util/raf';
 import { onMounted, reactive, ref } from 'vue';
 
 type SetActionType<T> = Partial<T> | ((state: T) => Partial<T>);
 export default function useFrameSetState<T extends object>(
   initial: T,
 ): [Record<string, any>, (newState: SetActionType<T>) => void] {
-  const frame = ref<RafFrame>(null);
+  const frame = ref<number>(null);
   const state = reactive({ ...initial });
   const queue = ref<SetActionType<T>[]>([]);
 

components/vc-picker/hooks/useHoverValue.ts

@@ -1,4 +1,3 @@
-import type { RafFrame } from '../../_util/raf';
 import raf from '../../_util/raf';
 import type { ComputedRef, Ref, UnwrapRef } from 'vue';
 import { ref, onBeforeUnmount, watch } from 'vue';
@@ -10,7 +9,7 @@ export default function useHoverValue<DateType>(
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
 ): [ComputedRef<string>, (date: DateType) => void, (immediately?: boolean) => void] {
   const innerValue = ref<DateType>(null);
-  let rafId: RafFrame;
+  let rafId: number;
 
   function setValue(val: DateType, immediately = false) {
     raf.cancel(rafId);