feat: 🚀 add the deep and immediate parameters

vueuse · 17359898647 · Jan 9, 2024 · Jan 9, 2024 · Jan 10, 2024 · Jan 10, 2024
commit f2678283bba80bcee8efa91808c93a89b5f46f42
diff --git a/packages/shared/refThrottled/index.test.ts b/packages/shared/refThrottled/index.test.ts
@@ -45,7 +45,7 @@ describe('refThrottled', () => {
    let error = null

    try {
-      refThrottled(objRef, 100, true, true, () => {
+      refThrottled(objRef, 100, true, true, true, true, () => {
        throw new Error('cloneHandler error')
      })
    }
@@ -56,4 +56,19 @@ describe('refThrottled', () => {
    expect(error).toBeInstanceOf(Error)
    expect(error?.message).toBe('cloneHandler error')
  })
+
+  it('should handle default cloneHandler error', async () => {
+    const objRef = ref({}) as any
+    objRef.value.self = objRef.value
+    let error = null
+    let throttledRef = null
+    try {
+      throttledRef = refThrottled(objRef, 100, true, true, true)
+    }
+    catch (e) {
+      error = e as Error
+    }
+    expect(throttledRef?.value).toEqual(objRef.value)
+    expect(error).toBeNull()
+  })
 })
diff --git a/packages/shared/refThrottled/index.ts b/packages/shared/refThrottled/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue-demi'
-import { ref, watch } from 'vue-demi'
-import { cloneFnJSON } from '../../core/useCloned'
+import { watch } from 'vue-demi'
+import { cloneFnJSON, useCloned } from '../../core/useCloned'
 import { useThrottleFn } from '../useThrottleFn'

 function isReferenceType(value: any) {
@@ -14,32 +14,40 @@ function isReferenceType(value: any) {
 * @param  delay  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
 * @param [trailing] if true, update the value again after the delay time is up
 * @param [leading] if true, update the value on the leading edge of the ms timeout
+ * @param [deep] default true, Depth monitoring, if false, only monitor the first level
+ * @param [immediate] default true, Whether to execute immediately
 * @param [cloneHandler] By default, it use `JSON.parse(JSON.stringify(value))` to clone
 */
-export function refThrottled<T>(value: Ref<T>, delay = 200, trailing = true, leading = true, cloneHandler = cloneFnJSON) {
+export function refThrottled<T>(value: Ref<T>, delay = 200, trailing = true, leading = true, deep = true, immediate = true, cloneHandler = cloneFnJSON) {
  if (delay <= 0)
    return value
-  const throttled = ref() as Ref<T>
  const isEqualityClone = cloneHandler === cloneFnJSON
-  const setThrottled = () => {
-    try {
-      throttled.value = isReferenceType(value.value) ? cloneHandler(value.value) : value.value
-    }
-    catch (error) {
-      if (isEqualityClone) {
-        throttled.value = value.value
-        console.error('Some error occurred in cloneHandler, used uncloned value', error)
-      }
-      else {
-        throw error
-      }
-    }
-  }
-  setThrottled()
-  const updater = useThrottleFn(setThrottled, delay, trailing, leading)
+  const { sync, cloned: throttled } = useCloned(
+    value,
+    {
+      manual: true,
+      clone: (cloneValue) => {
+        try {
+          return isReferenceType(cloneValue) ? cloneHandler(cloneValue) : cloneValue
+        }
+        catch (error) {
+          if (isEqualityClone) {
+            console.error('Some error occurred in cloneHandler, used uncloned value', error)
+            return cloneValue
+          }
+          else {
+            throw error
+          }
+        }
+      },
+      deep,
+      immediate,
+    },
+  )
+  const updater = useThrottleFn(sync, delay, trailing, leading)

  watch(value, updater, {
-    deep: isReferenceType(value.value),
+    deep,
  })

  return throttled