From 39183406cc558dbeedcb9af2ee62beb3ace99e3a Mon Sep 17 00:00:00 2001
From: Dan Rose <dan@digilabs.io>
Date: Sat, 28 Jan 2023 19:10:20 -0600
Subject: [PATCH] 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.
---
 packages/core/useRafFn/index.ts            |  4 ++--
 packages/shared/useIntervalFn/index.ts     |  7 ++++---
 packages/shared/useTimeoutFn/index.test.ts | 18 ++++++++++++++++++
 packages/shared/useTimeoutFn/index.ts      |  8 ++++----
 packages/shared/utils/filters.ts           |  4 ++--
 packages/shared/utils/types.ts             |  4 ++--
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
index d5526e1c357..d8a5f16ad86 100644
--- 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
index 118e28cd1ab..09d1a8b2e96 100644
--- 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
index a468c51747b..647bc545d6d 100644
--- 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
index cf5ef5d9c30..e0d4843fcb3 100644
--- 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
index 1ec0fd08156..08a06f00382 100644
--- 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
index e1da93f7c3e..cbbff7e305a 100644
--- 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