feat(useRafFn, useIntervalFn, useTimeoutFn): make status readonly (#2685

) 1. isPending / isActive is now read-only, so they are not seen as an alternative to the pause/start/result/stop functions. 2. Minor fixes for type correctness.
vueuse · Jan 29, 2023 · 3918340 · 3918340
1 parent eb55dc1
commit 3918340
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 13 deletions.
diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue-demi'
+import { readonly, ref } from 'vue-demi'
 import type { Pausable } from '@vueuse/shared'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
@@ -74,7 +74,7 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options:
   tryOnScopeDispose(pause)
 
   return {
-    isActive,
+    isActive: readonly(isActive),
     pause,
     resume,
   }

diff --git a/packages/shared/useIntervalFn/index.ts b/packages/shared/useIntervalFn/index.ts
@@ -1,4 +1,4 @@
-import { isRef, ref, unref, watch } from 'vue-demi'
+import { isRef, ref, watch } from 'vue-demi'
 import { resolveUnref } from '../resolveUnref'
 import { tryOnScopeDispose } from '../tryOnScopeDispose'
 import type { Fn, MaybeComputedRef, Pausable } from '../utils'
@@ -49,13 +49,14 @@ export function useIntervalFn(cb: Fn, interval: MaybeComputedRef<number> = 1000,
   }
 
   function resume() {
-    if (unref(interval) <= 0)
+    const intervalValue = resolveUnref(interval)
+    if (intervalValue <= 0)
       return
     isActive.value = true
     if (immediateCallback)
       cb()
     clean()
-    timer = setInterval(cb, resolveUnref(interval))
+    timer = setInterval(cb, intervalValue)
   }
 
   if (immediate && isClient)

diff --git a/packages/shared/useTimeoutFn/index.test.ts b/packages/shared/useTimeoutFn/index.test.ts
@@ -21,4 +21,22 @@ describe('useTimeoutFn', () => {
     await promiseTimeout(100)
     expect(callback).toBeCalled()
   })
+
+  it('supports getting pending status', async () => {
+    const callback = vitest.fn()
+    const { start, isPending } = useTimeoutFn(callback, 0, { immediate: false })
+
+    expect(isPending.value).toBe(false)
+    expect(callback).not.toBeCalled()
+
+    start()
+
+    expect(isPending.value).toBe(true)
+    expect(callback).not.toBeCalled()
+
+    await promiseTimeout(1)
+
+    expect(isPending.value).toBe(false)
+    expect(callback).toBeCalled()
+  })
 })
diff --git a/packages/shared/useTimeoutFn/index.ts b/packages/shared/useTimeoutFn/index.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue-demi'
+import { readonly, ref } from 'vue-demi'
 import type { MaybeComputedRef, Stoppable } from '../utils'
 import { resolveUnref } from '../resolveUnref'
 import { tryOnScopeDispose } from '../tryOnScopeDispose'
@@ -31,7 +31,7 @@ export function useTimeoutFn<CallbackFn extends(...args: any[]) => any>(
 
   const isPending = ref(false)
 
-  let timer: number | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
 
   function clear() {
     if (timer) {
@@ -53,7 +53,7 @@ export function useTimeoutFn<CallbackFn extends(...args: any[]) => any>(
       timer = null
 
       cb(...args)
-    }, resolveUnref(interval)) as unknown as number
+    }, resolveUnref(interval))
   }
 
   if (immediate) {
@@ -65,7 +65,7 @@ export function useTimeoutFn<CallbackFn extends(...args: any[]) => any>(
   tryOnScopeDispose(stop)
 
   return {
-    isPending,
+    isPending: readonly(isPending),
     start,
     stop,
   }

diff --git a/packages/shared/utils/filters.ts b/packages/shared/utils/filters.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue-demi'
+import { readonly, ref } from 'vue-demi'
 import { resolveUnref } from '../resolveUnref'
 import { noop } from './is'
 import type { AnyFn, ArgumentsType, MaybeComputedRef, Pausable } from './types'
@@ -202,5 +202,5 @@ export function pausableFilter(extendFilter: EventFilter = bypassFilter): Pausab
       extendFilter(...args)
   }
 
-  return { isActive, pause, resume, eventFilter }
+  return { isActive: readonly(isActive), pause, resume, eventFilter }
 }
diff --git a/packages/shared/utils/types.ts b/packages/shared/utils/types.ts
@@ -84,7 +84,7 @@ export interface Pausable {
   /**
    * A ref indicate whether a pausable instance is active
    */
-  isActive: Ref<boolean>
+  isActive: Readonly<Ref<boolean>>
 
   /**
    * Temporary pause the effect from executing
@@ -101,7 +101,7 @@ export interface Stoppable<StartFnArgs extends any[] = any[]> {
   /**
    * A ref indicate whether a stoppable instance is executing
    */
-  isPending: Ref<boolean>
+  isPending: Readonly<Ref<boolean>>
 
   /**
    * Stop the effect from executing