@reactive-vscode/vueuse 0.2.14 → 0.2.16

package/dist/index.cjs

@@ -5,7 +5,7 @@ function computedWithControl(source, fn) {
   let v = void 0;
   let track;
   let trigger;
-  const dirty = reactivity.ref(true);
+  const dirty = reactivity.shallowRef(true);
   const update = () => {
     dirty.value = true;
     trigger();
@@ -79,6 +79,13 @@ function createGlobalState(stateFactory) {
     return state;
   };
 }
+function createRef(value, deep) {
+  if (deep === true) {
+    return reactivity.ref(value);
+  } else {
+    return reactivity.shallowRef(value);
+  }
+}
 function createSharedComposable(composable) {
   let subscribers = 0;
   let state;
@@ -346,8 +353,11 @@ function throttleFilter(...args) {
   };
   return filter;
 }
-function pausableFilter(extendFilter = bypassFilter) {
-  const isActive = reactivity.ref(true);
+function pausableFilter(extendFilter = bypassFilter, options = {}) {
+  const {
+    initialState = "active"
+  } = options;
+  const isActive = toRef(initialState === "active");
   function pause() {
     isActive.value = false;
   }
@@ -595,9 +605,10 @@ function watchWithFilter(source, cb, options = {}) {
 function watchPausable(source, cb, options = {}) {
   const {
     eventFilter: filter,
+    initialState = "active",
     ...watchOptions
   } = options;
-  const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
+  const { eventFilter, pause, resume, isActive } = pausableFilter(filter, { initialState });
   const stop = watchWithFilter(
     source,
     cb,
@@ -652,10 +663,10 @@ function syncRefs(source, targets, options = {}) {
     deep = false,
     immediate = true
   } = options;
-  targets = toArray(targets);
+  const targetsArray = toArray(targets);
   return reactivity.watch(
     source,
-    (newValue) => targets.forEach((target) => target.value = newValue),
+    (newValue) => targetsArray.forEach((target) => target.value = newValue),
     { flush, deep, immediate }
   );
 }
@@ -930,7 +941,7 @@ function useArrayUnique(list, compareFn) {
 }
 function useCounter(initialValue = 0, options = {}) {
   let _initialValue = reactivity.unref(initialValue);
-  const count = reactivity.ref(initialValue);
+  const count = reactivity.shallowRef(initialValue);
   const {
     max = Number.POSITIVE_INFINITY,
     min = Number.NEGATIVE_INFINITY
@@ -946,7 +957,7 @@ function useCounter(initialValue = 0, options = {}) {
   return { count, inc, dec, get: get2, set: set2, reset };
 }
 const REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/i;
-const REGEX_FORMAT = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+const REGEX_FORMAT = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|z{1,4}|SSS/g;
 function defaultMeridiem(hours, minutes, isLowercase, hasPeriod) {
   let m = hours < 12 ? "AM" : "PM";
   if (hasPeriod)
@@ -969,6 +980,10 @@ function formatDate(date, formatStr, options = {}) {
   const milliseconds = date.getMilliseconds();
   const day = date.getDay();
   const meridiem = (_a = options.customMeridiem) != null ? _a : defaultMeridiem;
+  const stripTimeZone = (dateString) => {
+    var _a2;
+    return (_a2 = dateString.split(" ")[1]) != null ? _a2 : "";
+  };
   const matches = {
     Yo: () => formatOrdinal(years),
     YY: () => String(years).slice(-2),
@@ -1001,7 +1016,11 @@ function formatDate(date, formatStr, options = {}) {
     A: () => meridiem(hours, minutes),
     AA: () => meridiem(hours, minutes, false, true),
     a: () => meridiem(hours, minutes, true),
-    aa: () => meridiem(hours, minutes, true, true)
+    aa: () => meridiem(hours, minutes, true, true),
+    z: () => stripTimeZone(date.toLocaleDateString(reactivity.toValue(options.locales), { timeZoneName: "shortOffset" })),
+    zz: () => stripTimeZone(date.toLocaleDateString(reactivity.toValue(options.locales), { timeZoneName: "shortOffset" })),
+    zzz: () => stripTimeZone(date.toLocaleDateString(reactivity.toValue(options.locales), { timeZoneName: "shortOffset" })),
+    zzzz: () => stripTimeZone(date.toLocaleDateString(reactivity.toValue(options.locales), { timeZoneName: "longOffset" }))
   };
   return formatStr.replace(REGEX_FORMAT, (match, $1) => {
     var _a2, _b;
@@ -1034,7 +1053,7 @@ function useIntervalFn(cb, interval = 1e3, options = {}) {
     immediateCallback = false
   } = options;
   let timer = null;
-  const isActive = reactivity.ref(false);
+  const isActive = reactivity.shallowRef(false);
   function clean() {
     if (timer) {
       clearInterval(timer);
@@ -1078,7 +1097,7 @@ function useInterval(interval = 1e3, options = {}) {
     immediate = true,
     callback
   } = options;
-  const counter = reactivity.ref(0);
+  const counter = reactivity.shallowRef(0);
   const update = () => counter.value += 1;
   const reset = () => {
     counter.value = 0;
@@ -1103,7 +1122,7 @@ function useInterval(interval = 1e3, options = {}) {
 }
 function useLastChanged(source, options = {}) {
   var _a;
-  const ms = reactivity.ref((_a = options.initialValue) != null ? _a : null);
+  const ms = reactivity.shallowRef((_a = options.initialValue) != null ? _a : null);
   reactivity.watch(
     source,
     () => ms.value = timestamp(),
@@ -1113,9 +1132,10 @@ function useLastChanged(source, options = {}) {
 }
 function useTimeoutFn(cb, interval, options = {}) {
   const {
-    immediate = true
+    immediate = true,
+    immediateCallback = false
   } = options;
-  const isPending = reactivity.ref(false);
+  const isPending = reactivity.shallowRef(false);
   let timer = null;
   function clear() {
     if (timer) {
@@ -1128,6 +1148,8 @@ function useTimeoutFn(cb, interval, options = {}) {
     clear();
   }
   function start(...args) {
+    if (immediateCallback)
+      cb();
     clear();
     isPending.value = true;
     timer = setTimeout(() => {
@@ -1194,7 +1216,7 @@ function useToggle(initialValue = false, options = {}) {
     falsyValue = false
   } = options;
   const valueIsRef = reactivity.isRef(initialValue);
-  const _value = reactivity.ref(initialValue);
+  const _value = reactivity.shallowRef(initialValue);
   function toggle(value) {
     if (arguments.length) {
       _value.value = value;
@@ -1211,7 +1233,7 @@ function useToggle(initialValue = false, options = {}) {
     return [_value, toggle];
 }
 function watchArray(source, cb, options) {
-  let oldList = (options == null ? void 0 : options.immediate) ? [] : [...source instanceof Function ? source() : Array.isArray(source) ? source : reactivity.toValue(source)];
+  let oldList = (options == null ? void 0 : options.immediate) ? [] : [...typeof source === "function" ? source() : Array.isArray(source) ? source : reactivity.toValue(source)];
   return reactivity.watch(source, (newList, _, onCleanup) => {
     const oldListRemains = Array.from({ length: oldList.length });
     const added = [];
@@ -1237,7 +1259,7 @@ function watchAtMost(source, cb, options) {
     count,
     ...watchOptions
   } = options;
-  const current = reactivity.ref(0);
+  const current = reactivity.shallowRef(0);
   const stop = watchWithFilter(
     source,
     (...args) => {
@@ -1288,7 +1310,7 @@ function watchIgnorable(source, cb, options = {}) {
   let ignorePrevAsyncUpdates;
   let stop;
   if (watchOptions.flush === "sync") {
-    const ignore = reactivity.ref(false);
+    const ignore = reactivity.shallowRef(false);
     ignorePrevAsyncUpdates = () => {
     };
     ignoreUpdates = (updater) => {
@@ -1306,8 +1328,8 @@ function watchIgnorable(source, cb, options = {}) {
     );
   } else {
     const disposables = [];
-    const ignoreCounter = reactivity.ref(0);
-    const syncCounter = reactivity.ref(0);
+    const ignoreCounter = reactivity.shallowRef(0);
+    const syncCounter = reactivity.shallowRef(0);
     ignorePrevAsyncUpdates = () => {
       ignoreCounter.value = syncCounter.value;
     };
@@ -1450,7 +1472,7 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     shallow = true,
     onError = noop
   } = options;
-  const started = reactivity.ref(!lazy);
+  const started = reactivity.shallowRef(!lazy);
   const current = shallow ? reactivity.shallowRef(initialState) : reactivity.ref(initialState);
   let counter = 0;
   reactivity.watchEffect(async (onInvalidate) => {
@@ -1551,7 +1573,7 @@ function useEventListener(...args) {
   return stop;
 }
 function useMounted() {
-  const isMounted = reactivity.ref(false);
+  const isMounted = reactivity.shallowRef(false);
   return isMounted;
 }
 function useSupported(callback) {
@@ -1565,9 +1587,10 @@ function useRafFn(fn, options = {}) {
   const {
     immediate = true,
     fpsLimit = void 0,
-    window: window2 = defaultWindow
+    window: window2 = defaultWindow,
+    once = false
   } = options;
-  const isActive = reactivity.ref(false);
+  const isActive = reactivity.shallowRef(false);
   const intervalLimit = reactivity.computed(() => {
     return fpsLimit ? 1e3 / reactivity.toValue(fpsLimit) : null;
   });
@@ -1585,6 +1608,11 @@ function useRafFn(fn, options = {}) {
     }
     previousFrameTimestamp = timestamp2;
     fn({ delta, timestamp: timestamp2 });
+    if (once) {
+      isActive.value = false;
+      rafId = null;
+      return;
+    }
     rafId = window2.requestAnimationFrame(loop);
   }
   function resume() {
@@ -1625,7 +1653,7 @@ function useAsyncQueue(tasks, options) {
   };
   const initialResult = Array.from(Array.from({ length: tasks.length }), () => ({ state: promiseState.pending, data: null }));
   const result = reactivity.reactive(initialResult);
-  const activeIndex = reactivity.ref(-1);
+  const activeIndex = reactivity.shallowRef(-1);
   if (!tasks || tasks.length === 0) {
     onFinished();
     return {
@@ -1693,8 +1721,8 @@ function useAsyncState(promise, initialState, options) {
     throwError
   } = options != null ? options : {};
   const state = shallow ? reactivity.shallowRef(initialState) : reactivity.ref(initialState);
-  const isReady = reactivity.ref(false);
-  const isLoading = reactivity.ref(false);
+  const isReady = reactivity.shallowRef(false);
+  const isLoading = reactivity.shallowRef(false);
   const error = reactivity.shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
@@ -1762,8 +1790,8 @@ function getDefaultSerialization(target) {
     return defaults.object;
 }
 function useBase64(target, options) {
-  const base64 = reactivity.ref("");
-  const promise = reactivity.ref();
+  const base64 = reactivity.shallowRef("");
+  const promise = reactivity.shallowRef();
   function execute() {
     if (!isClient)
       return;
@@ -1845,7 +1873,7 @@ function useBroadcastChannel(options) {
     window: window2 = defaultWindow
   } = options;
   const isSupported = useSupported(() => window2 && "BroadcastChannel" in window2);
-  const isClosed = reactivity.ref(false);
+  const isClosed = reactivity.shallowRef(false);
   const channel = reactivity.ref();
   const data = reactivity.ref();
   const error = reactivity.shallowRef(null);
@@ -1889,8 +1917,9 @@ function useBroadcastChannel(options) {
     isClosed
   };
 }
-function useCached(refValue, comparator = (a, b) => a === b, watchOptions) {
-  const cachedValue = reactivity.ref(refValue.value);
+function useCached(refValue, comparator = (a, b) => a === b, options) {
+  const { deepRefs = true, ...watchOptions } = options || {};
+  const cachedValue = createRef(refValue.value, deepRefs);
   reactivity.watch(() => refValue.value, (value) => {
     if (!comparator(value, cachedValue.value))
       cachedValue.value = value;
@@ -1902,7 +1931,7 @@ function cloneFnJSON(source) {
 }
 function useCloned(source, options = {}) {
   const cloned = reactivity.ref({});
-  const isModified = reactivity.ref(false);
+  const isModified = reactivity.shallowRef(false);
   let _lastSync = false;
   const {
     manual,
@@ -2185,7 +2214,13 @@ function headersToObject(headers) {
 function combineCallbacks(combination, ...callbacks) {
   if (combination === "overwrite") {
     return async (ctx) => {
-      const callback = callbacks[callbacks.length - 1];
+      let callback;
+      for (let i = callbacks.length - 1; i >= 0; i--) {
+        if (callbacks[i] != null) {
+          callback = callbacks[i];
+          break;
+        }
+      }
       if (callback)
         return { ...ctx, ...await callback(ctx) };
       return ctx;
@@ -2278,10 +2313,10 @@ function useFetch(url, ...args) {
   const responseEvent = createEventHook();
   const errorEvent = createEventHook();
   const finallyEvent = createEventHook();
-  const isFinished = reactivity.ref(false);
-  const isFetching = reactivity.ref(false);
-  const aborted = reactivity.ref(false);
-  const statusCode = reactivity.ref(null);
+  const isFinished = reactivity.shallowRef(false);
+  const isFetching = reactivity.shallowRef(false);
+  const aborted = reactivity.shallowRef(false);
+  const statusCode = reactivity.shallowRef(null);
   const response = reactivity.shallowRef(null);
   const error = reactivity.shallowRef(null);
   const data = reactivity.shallowRef(initialData || null);
@@ -2515,8 +2550,8 @@ function useIdle(timeout = oneMinute, options = {}) {
     window: window2 = defaultWindow,
     eventFilter = throttleFilter(50)
   } = options;
-  const idle = reactivity.ref(initialState);
-  const lastActive = reactivity.ref(timestamp());
+  const idle = reactivity.shallowRef(initialState);
+  const lastActive = reactivity.shallowRef(timestamp());
   let timer;
   const reset = () => {
     idle.value = false;
@@ -2567,7 +2602,7 @@ function useNow(options = {}) {
   }
 }
 function useObjectUrl(object) {
-  const url = reactivity.ref();
+  const url = reactivity.shallowRef();
   const release = () => {
     if (url.value)
       URL.revokeObjectURL(url.value);
@@ -2866,10 +2901,11 @@ function formatTimeAgo(from, options = {}, now2 = Date.now()) {
 }
 function useTimeoutPoll(fn, interval, options = {}) {
   const {
-    immediate = true
+    immediate = true,
+    immediateCallback = false
   } = options;
-  const { start } = useTimeoutFn(loop, interval, { immediate: false });
-  const isActive = reactivity.ref(false);
+  const { start } = useTimeoutFn(loop, interval, { immediate });
+  const isActive = reactivity.shallowRef(false);
   async function loop() {
     if (!isActive.value)
       return;
@@ -2879,7 +2915,9 @@ function useTimeoutPoll(fn, interval, options = {}) {
   function resume() {
     if (!isActive.value) {
       isActive.value = true;
-      loop();
+      if (immediateCallback)
+        fn();
+      start();
     }
   }
   function pause() {
@@ -2902,7 +2940,7 @@ function useTimestamp(options = {}) {
     interval = "requestAnimationFrame",
     callback
   } = options;
-  const ts = reactivity.ref(timestamp() + offset);
+  const ts = reactivity.shallowRef(timestamp() + offset);
   const update = () => ts.value = timestamp() + offset;
   const cb = callback ? () => {
     update();
@@ -3037,7 +3075,7 @@ function useWebSocket(url, options = {}) {
     protocols = []
   } = options;
   const data = reactivity.ref(null);
-  const status = reactivity.ref("CLOSED");
+  const status = reactivity.shallowRef("CLOSED");
   const wsRef = reactivity.ref();
   const urlRef = toRef(url);
   let heartbeatPause;
@@ -3099,6 +3137,8 @@ function useWebSocket(url, options = {}) {
     };
     ws.onclose = (ev) => {
       status.value = "CLOSED";
+      resetHeartbeat();
+      heartbeatPause == null ? void 0 : heartbeatPause();
       onDisconnected == null ? void 0 : onDisconnected(ws, ev);
       if (!explicitlyClosed && options.autoReconnect && (wsRef.value == null || ws === wsRef.value)) {
         const {
@@ -3106,11 +3146,10 @@ function useWebSocket(url, options = {}) {
           delay = 1e3,
           onFailed
         } = resolveNestedOptions(options.autoReconnect);
-        if (typeof retries === "number" && (retries < 0 || retried < retries)) {
+        const checkRetires = typeof retries === "function" ? retries : () => typeof retries === "number" && (retries < 0 || retried < retries);
+        if (checkRetires(retried)) {
           retried += 1;
           retryTimeout = setTimeout(_init, delay);
-        } else if (typeof retries === "function" && retries()) {
-          retryTimeout = setTimeout(_init, delay);
         } else {
           onFailed == null ? void 0 : onFailed();
         }
@@ -3221,9 +3260,9 @@ function useWebWorkerFn(fn, options = {}) {
     window: window2 = defaultWindow
   } = options;
   const worker = reactivity.ref();
-  const workerStatus = reactivity.ref("PENDING");
+  const workerStatus = reactivity.shallowRef("PENDING");
   const promise = reactivity.ref({});
-  const timeoutId = reactivity.ref();
+  const timeoutId = reactivity.shallowRef();
   const workerTerminate = (status = "PENDING") => {
     if (worker.value && worker.value._url && window2) {
       worker.value.terminate();

package/dist/index.d.ts

@@ -115,7 +115,7 @@ export declare const bypassFilter: EventFilter;
 
 declare type Callback<T> = IsAny<T> extends true ? (...param: any) => void : ([
 T
-] extends [void] ? (...param: unknown[]) => void : (...param: [T, ...unknown[]]) => void);
+] extends [void] ? (...param: unknown[]) => void : [T] extends [any[]] ? (...param: T) => void : (...param: [T, ...unknown[]]) => void);
 
 export declare const camelize: (str: string) => string;
 
@@ -163,6 +163,15 @@ export declare interface ComputedWithControlRefExtra {
     trigger: () => void;
 }
 
+declare interface ConfigurableDeepRefs<D extends boolean> {
+    /**
+     * Return deep refs instead of shallow refs.
+     *
+     * @default true - will be changed to `false` by default in the next major
+     */
+    deepRefs?: D;
+}
+
 export declare interface ConfigurableEventFilter {
     /**
      * Filter for if events should to be received.
@@ -361,7 +370,7 @@ export declare type EventHookOn<T = any> = (fn: Callback<T>) => {
     off: () => void;
 };
 
-export declare type EventHookTrigger<T = any> = (...param: IsAny<T> extends true ? unknown[] : [T, ...unknown[]]) => Promise<unknown[]>;
+export declare type EventHookTrigger<T = any> = (...param: Parameters<Callback<T>>) => Promise<unknown[]>;
 
 /**
  * Overload 1: Unwrap set to false
@@ -569,7 +578,7 @@ export declare interface Pausable {
     /**
      * A ref indicate whether a pausable instance is active
      */
-    isActive: Readonly<Ref<boolean>>;
+    isActive: Readonly<ShallowRef<boolean>>;
     /**
      * Temporary pause the effect from executing
      */
@@ -584,12 +593,21 @@ export declare interface Pausable {
  * EventFilter that gives extra controls to pause and resume the filter
  *
  * @param extendFilter  Extra filter to apply when the PausableFilter is active, default to none
- *
+ * @param options Options to configure the filter
  */
-export declare function pausableFilter(extendFilter?: EventFilter): Pausable & {
+export declare function pausableFilter(extendFilter?: EventFilter, options?: PausableFilterOptions): Pausable & {
     eventFilter: EventFilter;
 };
 
+declare interface PausableFilterOptions {
+    /**
+     * The initial state
+     *
+     * @default 'active'
+     */
+    initialState?: 'active' | 'paused';
+}
+
 declare type PostMessage = typeof Worker.prototype['postMessage'];
 
 export declare function promiseTimeout(ms: number, throwOnTimeout?: boolean, reason?: string): Promise<void>;
@@ -647,7 +665,7 @@ export declare interface ReactifyOptions<T extends boolean> {
 /**
  * Computed reactive object.
  */
-export declare function reactiveComputed<T extends object>(fn: () => T): UnwrapNestedRefs<T>;
+export declare function reactiveComputed<T extends object>(fn: ComputedGetter<T>): UnwrapNestedRefs<T>;
 
 export declare function reactiveOmit<T extends object, K extends keyof T>(obj: T, ...keys: (K | K[])[]): Omit<T, K>;
 
@@ -754,6 +772,8 @@ export declare function set<T>(ref: Ref<T>, value: T): void;
 
 export declare function set<O extends object, K extends keyof O>(target: O, key: K, value: O[K]): void;
 
+declare type ShallowOrDeepRef<T = any, D extends boolean = false> = D extends true ? Ref<T> : ShallowRef<T>;
+
 export declare type ShallowUnwrapRef<T> = T extends Ref<infer P> ? P : T;
 
 export declare interface SingletonPromiseReturn<T> {
@@ -1219,7 +1239,7 @@ export declare interface UseAsyncQueueResult<T> {
 }
 
 export declare interface UseAsyncQueueReturn<T> {
-    activeIndex: Ref<number>;
+    activeIndex: ShallowRef<number>;
     result: T;
 }
 
@@ -1296,15 +1316,15 @@ export declare interface UseAsyncStateReturnBase<Data, Params extends any[], Sha
     execute: (delay?: number, ...args: Params) => Promise<Data>;
 }
 
-export declare function useBase64(target: MaybeRefOrGetter<string>, options?: UseBase64Options): UseBase64Return;
+export declare function useBase64(target: MaybeRefOrGetter<string | undefined>, options?: UseBase64Options): UseBase64Return;
 
-export declare function useBase64(target: MaybeRefOrGetter<Blob>, options?: UseBase64Options): UseBase64Return;
+export declare function useBase64(target: MaybeRefOrGetter<Blob | undefined>, options?: UseBase64Options): UseBase64Return;
 
-export declare function useBase64(target: MaybeRefOrGetter<ArrayBuffer>, options?: UseBase64Options): UseBase64Return;
+export declare function useBase64(target: MaybeRefOrGetter<ArrayBuffer | undefined>, options?: UseBase64Options): UseBase64Return;
 
-export declare function useBase64(target: MaybeRefOrGetter<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return;
+export declare function useBase64(target: MaybeRefOrGetter<HTMLCanvasElement | undefined>, options?: ToDataURLOptions): UseBase64Return;
 
-export declare function useBase64(target: MaybeRefOrGetter<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return;
+export declare function useBase64(target: MaybeRefOrGetter<HTMLImageElement | undefined>, options?: ToDataURLOptions): UseBase64Return;
 
 export declare function useBase64<T extends Record<string, unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return;
 
@@ -1328,8 +1348,8 @@ declare interface UseBase64Options {
 }
 
 export declare interface UseBase64Return {
-    base64: Ref<string>;
-    promise: Ref<Promise<string>>;
+    base64: ShallowRef<string>;
+    promise: ShallowRef<Promise<string>>;
     execute: () => Promise<string>;
 }
 
@@ -1356,8 +1376,8 @@ export declare interface UseBroadcastChannelReturn<D, P> {
     data: Ref<D>;
     post: (data: P) => void;
     close: () => void;
-    error: Ref<Event | null>;
-    isClosed: Ref<boolean>;
+    error: ShallowRef<Event | null>;
+    isClosed: ShallowRef<boolean>;
 }
 
 /**
@@ -1395,7 +1415,12 @@ declare function useBrowserLocation(options?: ConfigurableWindow): Ref<{
 
 export declare type UseBrowserLocationReturn = ReturnType<typeof useBrowserLocation>;
 
-export declare function useCached<T>(refValue: Ref<T>, comparator?: (a: T, b: T) => boolean, watchOptions?: WatchOptions): Ref<T>;
+export declare function useCached<T, D extends boolean = true>(refValue: Ref<T>, comparator?: (a: T, b: T) => boolean, options?: UseCachedOptions<D>): UseCachedReturn<T, D>;
+
+declare interface UseCachedOptions<D extends boolean = true> extends ConfigurableDeepRefs<D>, WatchOptions {
+}
+
+declare type UseCachedReturn<T = any, D extends boolean = true> = ShallowOrDeepRef<T, D>;
 
 export declare function useCloned<T>(source: MaybeRefOrGetter<T>, options?: UseClonedOptions): UseClonedReturn<T>;
 
@@ -1437,7 +1462,7 @@ export declare interface UseClonedReturn<T> {
  * @param options
  */
 export declare function useCounter(initialValue?: MaybeRef<number>, options?: UseCounterOptions): {
-    count: vue.Ref<number, MaybeRef<number>>;
+    count: vue.Ref<number, number> | vue.ShallowRef<number, number> | vue.WritableComputedRef<number, number>;
     inc: (delta?: number) => number;
     dec: (delta?: number) => number;
     get: () => number;
@@ -1474,8 +1499,8 @@ export declare interface UseCycleListOptions<T> {
 }
 
 export declare interface UseCycleListReturn<T> {
-    state: Ref<T>;
-    index: Ref<number>;
+    state: ShallowRef<T>;
+    index: WritableComputedRef<number>;
     next: (n?: number) => T;
     prev: (n?: number) => T;
     /**
@@ -1628,27 +1653,27 @@ export declare interface UseFetchReturn<T> {
     /**
      * Indicates if the fetch request has finished
      */
-    isFinished: Readonly<Ref<boolean>>;
+    isFinished: Readonly<ShallowRef<boolean>>;
     /**
      * The statusCode of the HTTP fetch response
      */
-    statusCode: Ref<number | null>;
+    statusCode: ShallowRef<number | null>;
     /**
      * The raw response of the fetch response
      */
-    response: Ref<Response | null>;
+    response: ShallowRef<Response | null>;
     /**
      * Any fetch errors that may have occurred
      */
-    error: Ref<any>;
+    error: ShallowRef<any>;
     /**
      * The fetch response body on success, may either be JSON or text
      */
-    data: Ref<T | null>;
+    data: ShallowRef<T | null>;
     /**
      * Indicates if the request is currently being fetched.
      */
-    isFetching: Readonly<Ref<boolean>>;
+    isFetching: Readonly<ShallowRef<boolean>>;
     /**
      * Indicates if the fetch request is able to be aborted
      */
@@ -1656,7 +1681,7 @@ export declare interface UseFetchReturn<T> {
     /**
      * Indicates if the fetch request was aborted
      */
-    aborted: Ref<boolean>;
+    aborted: ShallowRef<boolean>;
     /**
      * Abort the fetch request
      */
@@ -1723,8 +1748,8 @@ declare interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFi
 }
 
 declare interface UseIdleReturn {
-    idle: Ref<boolean>;
-    lastActive: Ref<number>;
+    idle: ShallowRef<boolean>;
+    lastActive: ShallowRef<number>;
     reset: () => void;
 }
 
@@ -1735,12 +1760,12 @@ declare interface UseIdleReturn {
  * @param interval
  * @param options
  */
-export declare function useInterval(interval?: MaybeRefOrGetter<number>, options?: UseIntervalOptions<false>): Ref<number>;
+export declare function useInterval(interval?: MaybeRefOrGetter<number>, options?: UseIntervalOptions<false>): ShallowRef<number>;
 
 export declare function useInterval(interval: MaybeRefOrGetter<number>, options: UseIntervalOptions<true>): UseIntervalControls & Pausable;
 
 export declare interface UseIntervalControls {
-    counter: Ref<number>;
+    counter: ShallowRef<number>;
     reset: () => void;
 }
 
@@ -1792,9 +1817,9 @@ export declare interface UseIntervalOptions<Controls extends boolean> {
  *
  * @see https://vueuse.org/useLastChanged
  */
-export declare function useLastChanged(source: WatchSource, options?: UseLastChangedOptions<false>): Ref<number | null>;
+export declare function useLastChanged(source: WatchSource, options?: UseLastChangedOptions<false>): ShallowRef<number | null>;
 
-export declare function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): Ref<number>;
+export declare function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): ShallowRef<number>;
 
 export declare interface UseLastChangedOptions<Immediate extends boolean, InitialValue extends number | null | undefined = undefined> extends WatchOptions<Immediate> {
     initialValue?: InitialValue;
@@ -1973,9 +1998,9 @@ export declare interface UseOffsetPaginationReturn {
  *
  * @see   {@link https://vueuse.org/usePrevious}
  */
-export declare function usePrevious<T>(value: MaybeRefOrGetter<T>): Readonly<Ref<T | undefined>>;
+export declare function usePrevious<T>(value: MaybeRefOrGetter<T>): Readonly<ShallowRef<T | undefined>>;
 
-export declare function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue: T): Readonly<Ref<T>>;
+export declare function usePrevious<T>(value: MaybeRefOrGetter<T>, initialValue: T): Readonly<ShallowRef<T>>;
 
 /**
  * Track the change history of a ref, also provides undo and redo functionality.
@@ -2160,7 +2185,7 @@ declare function useTextareaAutosize(options?: UseTextareaAutosizeOptions): {
     triggerResize: () => void;
 };
 
-export declare interface UseTextareaAutosizeOptions {
+export declare interface UseTextareaAutosizeOptions extends ConfigurableWindow {
     /** Textarea element to autosize. */
     element?: MaybeRef<HTMLTextAreaElement | undefined>;
     /** Textarea content. */
@@ -2283,11 +2308,17 @@ export declare function useTimeoutFn<CallbackFn extends AnyFn>(cb: CallbackFn, i
 
 export declare interface UseTimeoutFnOptions {
     /**
-     * Start the timer immediate after calling this function
+     * Start the timer immediately
      *
      * @default true
      */
     immediate?: boolean;
+    /**
+     * Execute the callback immediately after calling `start`
+     *
+     * @default false
+     */
+    immediateCallback?: boolean;
 }
 
 export declare interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
@@ -2311,10 +2342,10 @@ export declare function useTimeoutPoll(fn: () => Awaitable<void>, interval: Mayb
  * @see https://vueuse.org/useTimestamp
  * @param options
  */
-export declare function useTimestamp(options?: UseTimestampOptions<false>): Ref<number>;
+export declare function useTimestamp(options?: UseTimestampOptions<false>): ShallowRef<number>;
 
 export declare function useTimestamp(options: UseTimestampOptions<true>): {
-    timestamp: Ref<number>;
+    timestamp: ShallowRef<number>;
 } & Pausable;
 
 export declare interface UseTimestampOptions<Controls extends boolean> {
@@ -2352,7 +2383,7 @@ export declare type UseTimestampReturn = ReturnType<typeof useTimestamp>;
 
 export declare function useToggle<Truthy, Falsy, T = Truthy | Falsy>(initialValue: Ref<T>, options?: UseToggleOptions<Truthy, Falsy>): (value?: T) => T;
 
-export declare function useToggle<Truthy = true, Falsy = false, T = Truthy | Falsy>(initialValue?: T, options?: UseToggleOptions<Truthy, Falsy>): [Ref<T>, (value?: T) => T];
+export declare function useToggle<Truthy = true, Falsy = false, T = Truthy | Falsy>(initialValue?: T, options?: UseToggleOptions<Truthy, Falsy>): [ShallowRef<T>, (value?: T) => T];
 
 export declare interface UseToggleOptions<Truthy, Falsy> {
     truthyValue?: MaybeRefOrGetter<Truthy>;
@@ -2485,7 +2516,7 @@ export declare interface UseWebSocketOptions {
          *
          * @default -1
          */
-        retries?: number | (() => boolean);
+        retries?: number | ((retried: number) => boolean);
         /**
          * Delay for reconnect, in milliseconds
          *
@@ -2533,7 +2564,7 @@ export declare interface UseWebSocketReturn<T> {
      * The current websocket status, can be only one of:
      * 'OPEN', 'CONNECTING', 'CLOSED'
      */
-    status: Ref<WebSocketStatus>;
+    status: ShallowRef<WebSocketStatus>;
     /**
      * Closes the websocket connection gracefully.
      */
@@ -2565,7 +2596,7 @@ export declare interface UseWebSocketReturn<T> {
  */
 export declare function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(fn: T, options?: UseWebWorkerOptions): {
     workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>;
-    workerStatus: vue.Ref<WebWorkerStatus, WebWorkerStatus>;
+    workerStatus: vue.ShallowRef<WebWorkerStatus, WebWorkerStatus>;
     workerTerminate: (status?: WebWorkerStatus) => void;
 };
 
@@ -2614,7 +2645,7 @@ export declare interface WatchAtMostOptions<Immediate> extends WatchWithFilterOp
 
 export declare interface WatchAtMostReturn {
     stop: WatchStopHandle;
-    count: Ref<number>;
+    count: ShallowRef<number>;
 }
 
 declare function watchDebounced<T extends Readonly<WatchSource<unknown>[]>, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>, options?: WatchDebouncedOptions<Immediate>): WatchStopHandle;
@@ -2659,14 +2690,16 @@ export declare function watchOnce<T extends Readonly<WatchSource<unknown>[]>, Im
 
 export declare function watchOnce<T, Immediate extends Readonly<boolean> = false>(sources: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
 
-declare function watchPausable<T extends Readonly<WatchSource<unknown>[]>, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>, options?: WatchWithFilterOptions<Immediate>): WatchPausableReturn;
+declare function watchPausable<T extends Readonly<WatchSource<unknown>[]>, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>, options?: WatchPausableOptions<Immediate>): WatchPausableReturn;
 
-declare function watchPausable<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchWithFilterOptions<Immediate>): WatchPausableReturn;
+declare function watchPausable<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchPausableOptions<Immediate>): WatchPausableReturn;
 
-declare function watchPausable<T extends object, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchWithFilterOptions<Immediate>): WatchPausableReturn;
+declare function watchPausable<T extends object, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchPausableOptions<Immediate>): WatchPausableReturn;
 export { watchPausable as pausableWatch }
 export { watchPausable }
 
+declare type WatchPausableOptions<Immediate> = WatchWithFilterOptions<Immediate> & PausableFilterOptions;
+
 export declare interface WatchPausableReturn extends Pausable {
     stop: WatchStopHandle;
 }

package/dist/index.js

@@ -1,9 +1,9 @@
-import { ref, watch, customRef, getCurrentScope, onScopeDispose, effectScope, isRef, unref, toValue as toValue$1, computed, reactive, toRefs as toRefs$1, readonly, toRef as toRef$1, nextTick, isReactive, shallowRef, watchEffect, isReadonly, markRaw } from "@reactive-vscode/reactivity";
+import { shallowRef, watch, customRef, getCurrentScope, onScopeDispose, effectScope, isRef, unref, toValue as toValue$1, computed, reactive, toRefs as toRefs$1, readonly, toRef as toRef$1, ref, nextTick, isReactive, watchEffect, isReadonly, markRaw } from "@reactive-vscode/reactivity";
 function computedWithControl(source, fn) {
   let v = void 0;
   let track;
   let trigger;
-  const dirty = ref(true);
+  const dirty = shallowRef(true);
   const update = () => {
     dirty.value = true;
     trigger();
@@ -77,6 +77,13 @@ function createGlobalState(stateFactory) {
     return state;
   };
 }
+function createRef(value, deep) {
+  if (deep === true) {
+    return ref(value);
+  } else {
+    return shallowRef(value);
+  }
+}
 function createSharedComposable(composable) {
   let subscribers = 0;
   let state;
@@ -344,8 +351,11 @@ function throttleFilter(...args) {
   };
   return filter;
 }
-function pausableFilter(extendFilter = bypassFilter) {
-  const isActive = ref(true);
+function pausableFilter(extendFilter = bypassFilter, options = {}) {
+  const {
+    initialState = "active"
+  } = options;
+  const isActive = toRef(initialState === "active");
   function pause() {
     isActive.value = false;
   }
@@ -593,9 +603,10 @@ function watchWithFilter(source, cb, options = {}) {
 function watchPausable(source, cb, options = {}) {
   const {
     eventFilter: filter,
+    initialState = "active",
     ...watchOptions
   } = options;
-  const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
+  const { eventFilter, pause, resume, isActive } = pausableFilter(filter, { initialState });
   const stop = watchWithFilter(
     source,
     cb,
@@ -650,10 +661,10 @@ function syncRefs(source, targets, options = {}) {
     deep = false,
     immediate = true
   } = options;
-  targets = toArray(targets);
+  const targetsArray = toArray(targets);
   return watch(
     source,
-    (newValue) => targets.forEach((target) => target.value = newValue),
+    (newValue) => targetsArray.forEach((target) => target.value = newValue),
     { flush, deep, immediate }
   );
 }
@@ -928,7 +939,7 @@ function useArrayUnique(list, compareFn) {
 }
 function useCounter(initialValue = 0, options = {}) {
   let _initialValue = unref(initialValue);
-  const count = ref(initialValue);
+  const count = shallowRef(initialValue);
   const {
     max = Number.POSITIVE_INFINITY,
     min = Number.NEGATIVE_INFINITY
@@ -944,7 +955,7 @@ function useCounter(initialValue = 0, options = {}) {
   return { count, inc, dec, get: get2, set: set2, reset };
 }
 const REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/i;
-const REGEX_FORMAT = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+const REGEX_FORMAT = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|z{1,4}|SSS/g;
 function defaultMeridiem(hours, minutes, isLowercase, hasPeriod) {
   let m = hours < 12 ? "AM" : "PM";
   if (hasPeriod)
@@ -967,6 +978,10 @@ function formatDate(date, formatStr, options = {}) {
   const milliseconds = date.getMilliseconds();
   const day = date.getDay();
   const meridiem = (_a = options.customMeridiem) != null ? _a : defaultMeridiem;
+  const stripTimeZone = (dateString) => {
+    var _a2;
+    return (_a2 = dateString.split(" ")[1]) != null ? _a2 : "";
+  };
   const matches = {
     Yo: () => formatOrdinal(years),
     YY: () => String(years).slice(-2),
@@ -999,7 +1014,11 @@ function formatDate(date, formatStr, options = {}) {
     A: () => meridiem(hours, minutes),
     AA: () => meridiem(hours, minutes, false, true),
     a: () => meridiem(hours, minutes, true),
-    aa: () => meridiem(hours, minutes, true, true)
+    aa: () => meridiem(hours, minutes, true, true),
+    z: () => stripTimeZone(date.toLocaleDateString(toValue$1(options.locales), { timeZoneName: "shortOffset" })),
+    zz: () => stripTimeZone(date.toLocaleDateString(toValue$1(options.locales), { timeZoneName: "shortOffset" })),
+    zzz: () => stripTimeZone(date.toLocaleDateString(toValue$1(options.locales), { timeZoneName: "shortOffset" })),
+    zzzz: () => stripTimeZone(date.toLocaleDateString(toValue$1(options.locales), { timeZoneName: "longOffset" }))
   };
   return formatStr.replace(REGEX_FORMAT, (match, $1) => {
     var _a2, _b;
@@ -1032,7 +1051,7 @@ function useIntervalFn(cb, interval = 1e3, options = {}) {
     immediateCallback = false
   } = options;
   let timer = null;
-  const isActive = ref(false);
+  const isActive = shallowRef(false);
   function clean() {
     if (timer) {
       clearInterval(timer);
@@ -1076,7 +1095,7 @@ function useInterval(interval = 1e3, options = {}) {
     immediate = true,
     callback
   } = options;
-  const counter = ref(0);
+  const counter = shallowRef(0);
   const update = () => counter.value += 1;
   const reset = () => {
     counter.value = 0;
@@ -1101,7 +1120,7 @@ function useInterval(interval = 1e3, options = {}) {
 }
 function useLastChanged(source, options = {}) {
   var _a;
-  const ms = ref((_a = options.initialValue) != null ? _a : null);
+  const ms = shallowRef((_a = options.initialValue) != null ? _a : null);
   watch(
     source,
     () => ms.value = timestamp(),
@@ -1111,9 +1130,10 @@ function useLastChanged(source, options = {}) {
 }
 function useTimeoutFn(cb, interval, options = {}) {
   const {
-    immediate = true
+    immediate = true,
+    immediateCallback = false
   } = options;
-  const isPending = ref(false);
+  const isPending = shallowRef(false);
   let timer = null;
   function clear() {
     if (timer) {
@@ -1126,6 +1146,8 @@ function useTimeoutFn(cb, interval, options = {}) {
     clear();
   }
   function start(...args) {
+    if (immediateCallback)
+      cb();
     clear();
     isPending.value = true;
     timer = setTimeout(() => {
@@ -1192,7 +1214,7 @@ function useToggle(initialValue = false, options = {}) {
     falsyValue = false
   } = options;
   const valueIsRef = isRef(initialValue);
-  const _value = ref(initialValue);
+  const _value = shallowRef(initialValue);
   function toggle(value) {
     if (arguments.length) {
       _value.value = value;
@@ -1209,7 +1231,7 @@ function useToggle(initialValue = false, options = {}) {
     return [_value, toggle];
 }
 function watchArray(source, cb, options) {
-  let oldList = (options == null ? void 0 : options.immediate) ? [] : [...source instanceof Function ? source() : Array.isArray(source) ? source : toValue$1(source)];
+  let oldList = (options == null ? void 0 : options.immediate) ? [] : [...typeof source === "function" ? source() : Array.isArray(source) ? source : toValue$1(source)];
   return watch(source, (newList, _, onCleanup) => {
     const oldListRemains = Array.from({ length: oldList.length });
     const added = [];
@@ -1235,7 +1257,7 @@ function watchAtMost(source, cb, options) {
     count,
     ...watchOptions
   } = options;
-  const current = ref(0);
+  const current = shallowRef(0);
   const stop = watchWithFilter(
     source,
     (...args) => {
@@ -1286,7 +1308,7 @@ function watchIgnorable(source, cb, options = {}) {
   let ignorePrevAsyncUpdates;
   let stop;
   if (watchOptions.flush === "sync") {
-    const ignore = ref(false);
+    const ignore = shallowRef(false);
     ignorePrevAsyncUpdates = () => {
     };
     ignoreUpdates = (updater) => {
@@ -1304,8 +1326,8 @@ function watchIgnorable(source, cb, options = {}) {
     );
   } else {
     const disposables = [];
-    const ignoreCounter = ref(0);
-    const syncCounter = ref(0);
+    const ignoreCounter = shallowRef(0);
+    const syncCounter = shallowRef(0);
     ignorePrevAsyncUpdates = () => {
       ignoreCounter.value = syncCounter.value;
     };
@@ -1448,7 +1470,7 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     shallow = true,
     onError = noop
   } = options;
-  const started = ref(!lazy);
+  const started = shallowRef(!lazy);
   const current = shallow ? shallowRef(initialState) : ref(initialState);
   let counter = 0;
   watchEffect(async (onInvalidate) => {
@@ -1549,7 +1571,7 @@ function useEventListener(...args) {
   return stop;
 }
 function useMounted() {
-  const isMounted = ref(false);
+  const isMounted = shallowRef(false);
   return isMounted;
 }
 function useSupported(callback) {
@@ -1563,9 +1585,10 @@ function useRafFn(fn, options = {}) {
   const {
     immediate = true,
     fpsLimit = void 0,
-    window: window2 = defaultWindow
+    window: window2 = defaultWindow,
+    once = false
   } = options;
-  const isActive = ref(false);
+  const isActive = shallowRef(false);
   const intervalLimit = computed(() => {
     return fpsLimit ? 1e3 / toValue$1(fpsLimit) : null;
   });
@@ -1583,6 +1606,11 @@ function useRafFn(fn, options = {}) {
     }
     previousFrameTimestamp = timestamp2;
     fn({ delta, timestamp: timestamp2 });
+    if (once) {
+      isActive.value = false;
+      rafId = null;
+      return;
+    }
     rafId = window2.requestAnimationFrame(loop);
   }
   function resume() {
@@ -1623,7 +1651,7 @@ function useAsyncQueue(tasks, options) {
   };
   const initialResult = Array.from(Array.from({ length: tasks.length }), () => ({ state: promiseState.pending, data: null }));
   const result = reactive(initialResult);
-  const activeIndex = ref(-1);
+  const activeIndex = shallowRef(-1);
   if (!tasks || tasks.length === 0) {
     onFinished();
     return {
@@ -1691,8 +1719,8 @@ function useAsyncState(promise, initialState, options) {
     throwError
   } = options != null ? options : {};
   const state = shallow ? shallowRef(initialState) : ref(initialState);
-  const isReady = ref(false);
-  const isLoading = ref(false);
+  const isReady = shallowRef(false);
+  const isLoading = shallowRef(false);
   const error = shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
@@ -1760,8 +1788,8 @@ function getDefaultSerialization(target) {
     return defaults.object;
 }
 function useBase64(target, options) {
-  const base64 = ref("");
-  const promise = ref();
+  const base64 = shallowRef("");
+  const promise = shallowRef();
   function execute() {
     if (!isClient)
       return;
@@ -1843,7 +1871,7 @@ function useBroadcastChannel(options) {
     window: window2 = defaultWindow
   } = options;
   const isSupported = useSupported(() => window2 && "BroadcastChannel" in window2);
-  const isClosed = ref(false);
+  const isClosed = shallowRef(false);
   const channel = ref();
   const data = ref();
   const error = shallowRef(null);
@@ -1887,8 +1915,9 @@ function useBroadcastChannel(options) {
     isClosed
   };
 }
-function useCached(refValue, comparator = (a, b) => a === b, watchOptions) {
-  const cachedValue = ref(refValue.value);
+function useCached(refValue, comparator = (a, b) => a === b, options) {
+  const { deepRefs = true, ...watchOptions } = options || {};
+  const cachedValue = createRef(refValue.value, deepRefs);
   watch(() => refValue.value, (value) => {
     if (!comparator(value, cachedValue.value))
       cachedValue.value = value;
@@ -1900,7 +1929,7 @@ function cloneFnJSON(source) {
 }
 function useCloned(source, options = {}) {
   const cloned = ref({});
-  const isModified = ref(false);
+  const isModified = shallowRef(false);
   let _lastSync = false;
   const {
     manual,
@@ -2183,7 +2212,13 @@ function headersToObject(headers) {
 function combineCallbacks(combination, ...callbacks) {
   if (combination === "overwrite") {
     return async (ctx) => {
-      const callback = callbacks[callbacks.length - 1];
+      let callback;
+      for (let i = callbacks.length - 1; i >= 0; i--) {
+        if (callbacks[i] != null) {
+          callback = callbacks[i];
+          break;
+        }
+      }
       if (callback)
         return { ...ctx, ...await callback(ctx) };
       return ctx;
@@ -2276,10 +2311,10 @@ function useFetch(url, ...args) {
   const responseEvent = createEventHook();
   const errorEvent = createEventHook();
   const finallyEvent = createEventHook();
-  const isFinished = ref(false);
-  const isFetching = ref(false);
-  const aborted = ref(false);
-  const statusCode = ref(null);
+  const isFinished = shallowRef(false);
+  const isFetching = shallowRef(false);
+  const aborted = shallowRef(false);
+  const statusCode = shallowRef(null);
   const response = shallowRef(null);
   const error = shallowRef(null);
   const data = shallowRef(initialData || null);
@@ -2513,8 +2548,8 @@ function useIdle(timeout = oneMinute, options = {}) {
     window: window2 = defaultWindow,
     eventFilter = throttleFilter(50)
   } = options;
-  const idle = ref(initialState);
-  const lastActive = ref(timestamp());
+  const idle = shallowRef(initialState);
+  const lastActive = shallowRef(timestamp());
   let timer;
   const reset = () => {
     idle.value = false;
@@ -2565,7 +2600,7 @@ function useNow(options = {}) {
   }
 }
 function useObjectUrl(object) {
-  const url = ref();
+  const url = shallowRef();
   const release = () => {
     if (url.value)
       URL.revokeObjectURL(url.value);
@@ -2864,10 +2899,11 @@ function formatTimeAgo(from, options = {}, now2 = Date.now()) {
 }
 function useTimeoutPoll(fn, interval, options = {}) {
   const {
-    immediate = true
+    immediate = true,
+    immediateCallback = false
   } = options;
-  const { start } = useTimeoutFn(loop, interval, { immediate: false });
-  const isActive = ref(false);
+  const { start } = useTimeoutFn(loop, interval, { immediate });
+  const isActive = shallowRef(false);
   async function loop() {
     if (!isActive.value)
       return;
@@ -2877,7 +2913,9 @@ function useTimeoutPoll(fn, interval, options = {}) {
   function resume() {
     if (!isActive.value) {
       isActive.value = true;
-      loop();
+      if (immediateCallback)
+        fn();
+      start();
     }
   }
   function pause() {
@@ -2900,7 +2938,7 @@ function useTimestamp(options = {}) {
     interval = "requestAnimationFrame",
     callback
   } = options;
-  const ts = ref(timestamp() + offset);
+  const ts = shallowRef(timestamp() + offset);
   const update = () => ts.value = timestamp() + offset;
   const cb = callback ? () => {
     update();
@@ -3035,7 +3073,7 @@ function useWebSocket(url, options = {}) {
     protocols = []
   } = options;
   const data = ref(null);
-  const status = ref("CLOSED");
+  const status = shallowRef("CLOSED");
   const wsRef = ref();
   const urlRef = toRef(url);
   let heartbeatPause;
@@ -3097,6 +3135,8 @@ function useWebSocket(url, options = {}) {
     };
     ws.onclose = (ev) => {
       status.value = "CLOSED";
+      resetHeartbeat();
+      heartbeatPause == null ? void 0 : heartbeatPause();
       onDisconnected == null ? void 0 : onDisconnected(ws, ev);
       if (!explicitlyClosed && options.autoReconnect && (wsRef.value == null || ws === wsRef.value)) {
         const {
@@ -3104,11 +3144,10 @@ function useWebSocket(url, options = {}) {
           delay = 1e3,
           onFailed
         } = resolveNestedOptions(options.autoReconnect);
-        if (typeof retries === "number" && (retries < 0 || retried < retries)) {
+        const checkRetires = typeof retries === "function" ? retries : () => typeof retries === "number" && (retries < 0 || retried < retries);
+        if (checkRetires(retried)) {
           retried += 1;
           retryTimeout = setTimeout(_init, delay);
-        } else if (typeof retries === "function" && retries()) {
-          retryTimeout = setTimeout(_init, delay);
         } else {
           onFailed == null ? void 0 : onFailed();
         }
@@ -3219,9 +3258,9 @@ function useWebWorkerFn(fn, options = {}) {
     window: window2 = defaultWindow
   } = options;
   const worker = ref();
-  const workerStatus = ref("PENDING");
+  const workerStatus = shallowRef("PENDING");
   const promise = ref({});
-  const timeoutId = ref();
+  const timeoutId = shallowRef();
   const workerTerminate = (status = "PENDING") => {
     if (worker.value && worker.value._url && window2) {
       worker.value.terminate();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reactive-vscode/vueuse",
   "type": "module",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Useful VueUse utilities for VSCode extension development",
   "author": "_Kerman <kermanx@qq.com>",
   "license": "MIT",
@@ -33,14 +33,14 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "@reactive-vscode/reactivity": "0.2.14"
+    "@reactive-vscode/reactivity": "0.2.16"
   },
   "devDependencies": {
-    "@types/node": "^20.17.16",
-    "@vueuse/core": "^12.5.0",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vite-plugin-dts": "^4.5.0"
+    "@types/node": "^20.17.45",
+    "@vueuse/core": "^12.8.2",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.3"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",