diff --git a/packages/shared/watchAtMost/index.ts b/packages/shared/watchAtMost/index.ts index 68ed8b11305..507109a15ae 100644 --- a/packages/shared/watchAtMost/index.ts +++ b/packages/shared/watchAtMost/index.ts @@ -1,4 +1,4 @@ -import type { MaybeRefOrGetter, ShallowRef, WatchCallback, WatchSource, WatchStopHandle } from 'vue' +import type { MaybeRefOrGetter, ShallowRef, WatchCallback, WatchHandle, WatchSource } from 'vue' import type { MapOldSources, MapSources } from '../utils' import type { WatchWithFilterOptions } from '../watchWithFilter' import { nextTick, shallowRef, toValue } from 'vue' @@ -8,8 +8,7 @@ export interface WatchAtMostOptions extends WatchWithFilterOptions } -export interface WatchAtMostReturn { - stop: WatchStopHandle +export interface WatchAtMostReturn extends WatchHandle { count: ShallowRef } @@ -31,17 +30,21 @@ export function watchAtMost = false>( const current = shallowRef(0) - const stop = watchWithFilter( + const watchHandle = watchWithFilter( source, (...args) => { current.value += 1 if (current.value >= toValue(count)) - nextTick(() => stop()) + nextTick(() => watchHandle.stop()) cb(...args) }, watchOptions, ) - return { count: current, stop } + const res = watchHandle as WatchAtMostReturn + + res.count = current + + return res } diff --git a/packages/shared/watchDebounced/demo.vue b/packages/shared/watchDebounced/demo.vue index 7c0703a0c37..d15e5de6c24 100644 --- a/packages/shared/watchDebounced/demo.vue +++ b/packages/shared/watchDebounced/demo.vue @@ -5,7 +5,7 @@ import { shallowRef } from 'vue' const input = shallowRef('') const updated = shallowRef(0) -watchDebounced(input, () => { +const { pause, resume } = watchDebounced(input, () => { updated.value += 1 }, { debounce: 1000, maxWait: 5000 }) @@ -15,6 +15,13 @@ watchDebounced(input, () => { Delay is set to 1000ms and maxWait is set to 5000ms for this demo. + + +

Input: {{ input }}

Times Updated: {{ updated }}

diff --git a/packages/shared/watchDebounced/index.ts b/packages/shared/watchDebounced/index.ts index 69d63a9b632..6c0cc872cf0 100644 --- a/packages/shared/watchDebounced/index.ts +++ b/packages/shared/watchDebounced/index.ts @@ -1,4 +1,4 @@ -import type { MaybeRefOrGetter, WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { MaybeRefOrGetter, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { DebounceFilterOptions, MapOldSources, MapSources } from '../utils' import { debounceFilter } from '../utils' import { watchWithFilter } from '../watchWithFilter' @@ -8,16 +8,16 @@ export interface WatchDebouncedOptions extends WatchOptions[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchDebouncedOptions): WatchStopHandle -export function watchDebounced = false>(source: WatchSource, cb: WatchCallback, options?: WatchDebouncedOptions): WatchStopHandle -export function watchDebounced = false>(source: T, cb: WatchCallback, options?: WatchDebouncedOptions): WatchStopHandle +export function watchDebounced[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchDebouncedOptions): WatchHandle +export function watchDebounced = false>(source: WatchSource, cb: WatchCallback, options?: WatchDebouncedOptions): WatchHandle +export function watchDebounced = false>(source: T, cb: WatchCallback, options?: WatchDebouncedOptions): WatchHandle // implementation export function watchDebounced = false>( source: any, cb: any, options: WatchDebouncedOptions = {}, -): WatchStopHandle { +): WatchHandle { const { debounce = 0, maxWait = undefined, diff --git a/packages/shared/watchDeep/index.ts b/packages/shared/watchDeep/index.ts index 0a80cdbb19e..5fe46255987 100644 --- a/packages/shared/watchDeep/index.ts +++ b/packages/shared/watchDeep/index.ts @@ -1,4 +1,4 @@ -import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { MapOldSources, MapSources } from '../utils/types' import { watch } from 'vue' @@ -11,13 +11,13 @@ export function watchDeep< source: [...T], cb: WatchCallback, MapOldSources>, options?: Omit, 'deep'> -): WatchStopHandle +): WatchHandle export function watchDeep = false>( source: WatchSource, cb: WatchCallback, options?: Omit, 'deep'> -): WatchStopHandle +): WatchHandle export function watchDeep< T extends object, @@ -26,7 +26,7 @@ export function watchDeep< source: T, cb: WatchCallback, options?: Omit, 'deep'> -): WatchStopHandle +): WatchHandle /** * Shorthand for watching value with {deep: true} diff --git a/packages/shared/watchIgnorable/demo.vue b/packages/shared/watchIgnorable/demo.vue index afaeee2d8f6..cd1b866842d 100644 --- a/packages/shared/watchIgnorable/demo.vue +++ b/packages/shared/watchIgnorable/demo.vue @@ -5,7 +5,7 @@ import { shallowRef } from 'vue' const log = shallowRef('') const source = shallowRef(0) -const { ignoreUpdates } = watchIgnorable( +const { ignoreUpdates, pause, resume } = watchIgnorable( source, v => (log.value += `Changed to "${v}"\n`), { flush: 'sync' }, @@ -33,6 +33,12 @@ function ignoredUpdate() { + + diff --git a/packages/shared/watchIgnorable/index.ts b/packages/shared/watchIgnorable/index.ts index 11003177a01..9eb8f8b50df 100644 --- a/packages/shared/watchIgnorable/index.ts +++ b/packages/shared/watchIgnorable/index.ts @@ -1,5 +1,5 @@ -import type { WatchCallback, WatchSource, WatchStopHandle } from 'vue' -import type { Fn, MapOldSources, MapSources } from '../utils' +import type { WatchCallback, WatchHandle, WatchSource } from 'vue' +import type { MapOldSources, MapSources } from '../utils' import type { WatchWithFilterOptions } from '../watchWithFilter' import { watch } from 'vue' import { bypassFilter, createFilterWrapper } from '../utils' @@ -11,10 +11,9 @@ import { bypassFilter, createFilterWrapper } from '../utils' export type IgnoredUpdater = (updater: () => void) => void export type IgnoredPrevAsyncUpdates = () => void -export interface WatchIgnorableReturn { +export interface WatchIgnorableReturn extends WatchHandle { ignoreUpdates: IgnoredUpdater ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates - stop: WatchStopHandle } export function watchIgnorable[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchWithFilterOptions): WatchIgnorableReturn @@ -38,7 +37,7 @@ export function watchIgnorable = false>( let ignoreUpdates: IgnoredUpdater let ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates - let stop: WatchStopHandle + let watchHandle: WatchHandle if (watchOptions.flush === 'sync') { let ignore = false @@ -54,7 +53,7 @@ export function watchIgnorable = false>( ignore = false } - stop = watch( + watchHandle = watch( source, (...args) => { if (!ignore) @@ -66,7 +65,7 @@ export function watchIgnorable = false>( else { // flush 'pre' and 'post' - const disposables: Fn[] = [] + const disposables: WatchHandle[] = [] // counters for how many following changes to be ignored // ignoreCounter is incremented before there is a history operation @@ -121,12 +120,29 @@ export function watchIgnorable = false>( ), ) - stop = () => { + watchHandle = (() => { disposables.forEach(fn => fn()) + }) as WatchHandle + + watchHandle.stop = () => { + disposables.forEach(fn => fn()) + } + + watchHandle.pause = () => { + disposables.forEach(fn => fn.pause()) + } + + watchHandle.resume = () => { + disposables.forEach(fn => fn.resume()) } } - return { stop, ignoreUpdates, ignorePrevAsyncUpdates } + const res = watchHandle as WatchIgnorableReturn + + res.ignoreUpdates = ignoreUpdates + res.ignorePrevAsyncUpdates = ignorePrevAsyncUpdates + + return res } // alias diff --git a/packages/shared/watchImmediate/index.ts b/packages/shared/watchImmediate/index.ts index 1caf4fb86b8..80051e2612a 100644 --- a/packages/shared/watchImmediate/index.ts +++ b/packages/shared/watchImmediate/index.ts @@ -1,4 +1,4 @@ -import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { MapOldSources, MapSources } from '../utils/types' import { watch } from 'vue' @@ -8,19 +8,19 @@ export function watchImmediate[]>>( source: [...T], cb: WatchCallback, MapOldSources>, options?: Omit, 'immediate'> -): WatchStopHandle +): WatchHandle export function watchImmediate( source: WatchSource, cb: WatchCallback, options?: Omit, 'immediate'> -): WatchStopHandle +): WatchHandle export function watchImmediate( source: T, cb: WatchCallback, options?: Omit, 'immediate'> -): WatchStopHandle +): WatchHandle /** * Shorthand for watching value with {immediate: true} diff --git a/packages/shared/watchOnce/index.ts b/packages/shared/watchOnce/index.ts index 0abb9db30fa..debf558325a 100644 --- a/packages/shared/watchOnce/index.ts +++ b/packages/shared/watchOnce/index.ts @@ -1,4 +1,4 @@ -import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { MapOldSources, MapSources } from '../utils' import { watch } from 'vue' @@ -7,19 +7,19 @@ export function watchOnce[]>>( source: [...T], cb: WatchCallback, MapOldSources>, options?: Omit, 'once'> -): WatchStopHandle +): WatchHandle export function watchOnce( source: WatchSource, cb: WatchCallback, options?: Omit, 'once'> -): WatchStopHandle +): WatchHandle export function watchOnce( source: T, cb: WatchCallback, options?: Omit, 'once'> -): WatchStopHandle +): WatchHandle /** * Shorthand for watching value with { once: true } diff --git a/packages/shared/watchThrottled/demo.vue b/packages/shared/watchThrottled/demo.vue index 5674d6f5ca6..33c61af795e 100644 --- a/packages/shared/watchThrottled/demo.vue +++ b/packages/shared/watchThrottled/demo.vue @@ -5,7 +5,7 @@ import { shallowRef } from 'vue' const input = shallowRef('') const updated = shallowRef(0) -watchThrottled(input, () => { +const { pause, resume } = watchThrottled(input, () => { updated.value += 1 }, { throttle: 1000 }) @@ -15,6 +15,13 @@ watchThrottled(input, () => { Delay is set to 1000ms for this demo. + + +

Input: {{ input }}

Times Updated: {{ updated }}

diff --git a/packages/shared/watchThrottled/index.ts b/packages/shared/watchThrottled/index.ts index 4ac43ef4f04..c46245098a6 100644 --- a/packages/shared/watchThrottled/index.ts +++ b/packages/shared/watchThrottled/index.ts @@ -1,4 +1,4 @@ -import type { MaybeRefOrGetter, WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { MaybeRefOrGetter, WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { MapOldSources, MapSources } from '../utils' import { throttleFilter } from '../utils' import { watchWithFilter } from '../watchWithFilter' @@ -10,16 +10,16 @@ export interface WatchThrottledOptions extends WatchOptions[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchThrottledOptions): WatchStopHandle -export function watchThrottled = false>(source: WatchSource, cb: WatchCallback, options?: WatchThrottledOptions): WatchStopHandle -export function watchThrottled = false>(source: T, cb: WatchCallback, options?: WatchThrottledOptions): WatchStopHandle +export function watchThrottled[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchThrottledOptions): WatchHandle +export function watchThrottled = false>(source: WatchSource, cb: WatchCallback, options?: WatchThrottledOptions): WatchHandle +export function watchThrottled = false>(source: T, cb: WatchCallback, options?: WatchThrottledOptions): WatchHandle // implementation export function watchThrottled = false>( source: any, cb: any, options: WatchThrottledOptions = {}, -): WatchStopHandle { +): WatchHandle { const { throttle = 0, trailing = true, diff --git a/packages/shared/watchTriggerable/demo.vue b/packages/shared/watchTriggerable/demo.vue index 2199bf6f3f6..b350cef8927 100644 --- a/packages/shared/watchTriggerable/demo.vue +++ b/packages/shared/watchTriggerable/demo.vue @@ -5,7 +5,7 @@ import { shallowRef } from 'vue' const log = shallowRef('') const source = shallowRef(0) -const { trigger, ignoreUpdates } = watchTriggerable( +const { trigger, ignoreUpdates, pause, resume } = watchTriggerable( source, async (v, _, onCleanup) => { let canceled = false @@ -37,6 +37,12 @@ function update() { + + diff --git a/packages/shared/watchTriggerable/index.ts b/packages/shared/watchTriggerable/index.ts index 66c320ae280..66ee9294e47 100644 --- a/packages/shared/watchTriggerable/index.ts +++ b/packages/shared/watchTriggerable/index.ts @@ -51,8 +51,8 @@ export function watchTriggerable = false>( return cb(value, oldValue, onCleanup) } - const res = watchIgnorable(source, _cb, options) - const { ignoreUpdates } = res + const watchHandle = watchIgnorable(source, _cb, options) + const { ignoreUpdates } = watchHandle const trigger = () => { let res: any @@ -62,10 +62,11 @@ export function watchTriggerable = false>( return res } - return { - ...res, - trigger, - } + const res = watchHandle as WatchTriggerableReturn + + res.trigger = trigger + + return res } function getWatchSources(sources: any) { diff --git a/packages/shared/watchWithFilter/index.ts b/packages/shared/watchWithFilter/index.ts index 5693fda0027..aeac1f04095 100644 --- a/packages/shared/watchWithFilter/index.ts +++ b/packages/shared/watchWithFilter/index.ts @@ -1,4 +1,4 @@ -import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue' +import type { WatchCallback, WatchHandle, WatchOptions, WatchSource } from 'vue' import type { ConfigurableEventFilter, MapOldSources, MapSources } from '../utils' import { watch } from 'vue' import { bypassFilter, createFilterWrapper } from '../utils' @@ -6,16 +6,16 @@ import { bypassFilter, createFilterWrapper } from '../utils' export interface WatchWithFilterOptions extends WatchOptions, ConfigurableEventFilter {} // overloads -export function watchWithFilter[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchWithFilterOptions): WatchStopHandle -export function watchWithFilter = false>(source: WatchSource, cb: WatchCallback, options?: WatchWithFilterOptions): WatchStopHandle -export function watchWithFilter = false>(source: T, cb: WatchCallback, options?: WatchWithFilterOptions): WatchStopHandle +export function watchWithFilter[]>, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback, MapOldSources>, options?: WatchWithFilterOptions): WatchHandle +export function watchWithFilter = false>(source: WatchSource, cb: WatchCallback, options?: WatchWithFilterOptions): WatchHandle +export function watchWithFilter = false>(source: T, cb: WatchCallback, options?: WatchWithFilterOptions): WatchHandle // implementation export function watchWithFilter = false>( source: any, cb: any, options: WatchWithFilterOptions = {}, -): WatchStopHandle { +): WatchHandle { const { eventFilter = bypassFilter, ...watchOptions