From 0002ab1d7c8a1dc4d123207ce526f20bcd056987 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 15 Feb 2025 14:08:55 +0800 Subject: [PATCH 1/9] chore: update ci matrix --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4f6c4808d10..98b5e6005c5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -43,7 +43,7 @@ jobs: strategy: matrix: - node: [18.x, 20.x, 22.x] + node: [20.x, 22.x] fail-fast: false steps: @@ -79,6 +79,6 @@ jobs: - name: browser tests run: pnpm run test:browser - - if: matrix.node == '18.x' + - if: matrix.node == '22.x' name: Playground Smoke Test run: cd playgrounds && bash ./build.sh From 4c233b09086d1fa33dcc6262530e48e8e37ba736 Mon Sep 17 00:00:00 2001 From: IlyaL Date: Sat, 15 Feb 2025 14:06:14 +0800 Subject: [PATCH 2/9] refactor: replace `tryOnBeforeUnmount` with `tryOnScopeDispose` (#4584) --- packages/core/useTitle/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/useTitle/index.ts b/packages/core/useTitle/index.ts index cc32506e9a3..91ac7242b40 100644 --- a/packages/core/useTitle/index.ts +++ b/packages/core/useTitle/index.ts @@ -1,7 +1,7 @@ import type { MaybeRef, MaybeRefOrGetter, ReadonlyRefOrGetter } from '@vueuse/shared' import type { ComputedRef, Ref } from 'vue' import type { ConfigurableDocument } from '../_configurable' -import { toRef, tryOnBeforeUnmount } from '@vueuse/shared' +import { toRef, tryOnScopeDispose } from '@vueuse/shared' import { toValue, watch } from 'vue' import { defaultDocument } from '../_configurable' import { useMutationObserver } from '../useMutationObserver' @@ -94,7 +94,7 @@ export function useTitle( ) } - tryOnBeforeUnmount(() => { + tryOnScopeDispose(() => { if (restoreOnUnmount) { const restoredTitle = restoreOnUnmount(originalTitle, title.value || '') if (restoredTitle != null && document) From 3041e78b72b25925ac75016f5da7a9ac443d0994 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sat, 15 Feb 2025 14:07:26 +0800 Subject: [PATCH 3/9] feat(useRafFn): add `once` option (#4583) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- packages/core/useRafFn/index.test.ts | 14 ++++++++++++++ packages/core/useRafFn/index.ts | 12 ++++++++++++ 2 files changed, 26 insertions(+) diff --git a/packages/core/useRafFn/index.test.ts b/packages/core/useRafFn/index.test.ts index b01490336bd..f1375a24c89 100644 --- a/packages/core/useRafFn/index.test.ts +++ b/packages/core/useRafFn/index.test.ts @@ -91,4 +91,18 @@ describe('useRafFn', () => { }) expect(fn1.mock.calls.length).toBeLessThan(fn2.mock.calls.length) }) + + it('should only be called once when the once option is set to true', async () => { + const fn = vi.fn() + const fn1 = vi.fn() + useRafFn(fn, { once: true }) + useRafFn(fn1) + await vi.waitFor(() => { + expect(fn).toHaveBeenCalled() + expect(fn1).toHaveBeenCalled() + }) + + expect(fn.mock.calls.length).toBe(1) + expect(fn1.mock.calls.length).toBeGreaterThan(1) + }) }) diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts index 05429486746..1032fdd1d74 100644 --- a/packages/core/useRafFn/index.ts +++ b/packages/core/useRafFn/index.ts @@ -31,6 +31,12 @@ export interface UseRafFnOptions extends ConfigurableWindow { * @default undefined */ fpsLimit?: MaybeRefOrGetter + /** + * After the requestAnimationFrame loop executed once, it will be automatically stopped. + * + * @default false + */ + once?: boolean } /** @@ -45,6 +51,7 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: immediate = true, fpsLimit = undefined, window = defaultWindow, + once = false, } = options const isActive = ref(false) @@ -70,6 +77,11 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: previousFrameTimestamp = timestamp fn({ delta, timestamp }) + if (once) { + isActive.value = false + rafId = null + return + } rafId = window.requestAnimationFrame(loop) } From d9352a3092c5469783d0a8f842f2ff4ebf0314c5 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 15 Feb 2025 14:17:21 +0800 Subject: [PATCH 4/9] refactor: change primitive to `shallowRef`, rename `ref` usage to `deepRef` (#4582) --- eslint.config.js | 31 ++++++++++++++ package.json | 2 + packages/.test/mount.ts | 4 +- .../theme/components/DemoContainer.vue | 4 +- packages/core/_template/index.ts | 4 +- packages/core/computedAsync/index.test.ts | 20 ++++----- packages/core/computedAsync/index.ts | 6 +-- packages/core/computedInject/demo.vue | 4 +- packages/core/computedInject/demoReceiver.vue | 4 +- packages/core/computedInject/index.test.ts | 4 +- packages/core/createTemplatePromise/index.ts | 4 +- packages/core/onClickOutside/component.ts | 4 +- packages/core/onClickOutside/demo.vue | 8 ++-- packages/core/onElementRemoval/demo.vue | 16 +++---- packages/core/onElementRemoval/index.test.ts | 10 ++--- packages/core/onKeyStroke/demo.vue | 6 +-- packages/core/onKeyStroke/index.test.ts | 4 +- packages/core/onLongPress/component.ts | 4 +- packages/core/onLongPress/demo.vue | 12 +++--- packages/core/onLongPress/index.test.ts | 8 ++-- packages/core/onStartTyping/demo.vue | 4 +- packages/core/templateRef/index.test.ts | 6 +-- packages/core/useActiveElement/index.ts | 4 +- packages/core/useAsyncQueue/index.ts | 4 +- packages/core/useAsyncState/index.ts | 8 ++-- packages/core/useBase64/demo.vue | 9 ++-- packages/core/useBase64/index.ts | 16 +++---- packages/core/useBattery/index.ts | 10 ++--- packages/core/useBreakpoints/demo.vue | 4 +- packages/core/useBreakpoints/index.ts | 4 +- packages/core/useBroadcastChannel/demo.vue | 4 +- packages/core/useBroadcastChannel/index.ts | 8 ++-- packages/core/useBrowserLocation/index.ts | 6 +-- packages/core/useCached/demo.vue | 8 ++-- packages/core/useCached/index.test.ts | 6 +-- packages/core/useCached/index.ts | 4 +- packages/core/useClipboard/demo.vue | 4 +- packages/core/useClipboard/index.ts | 6 +-- packages/core/useClipboardItems/demo.vue | 8 ++-- packages/core/useClipboardItems/index.ts | 6 +-- packages/core/useCloned/index.test.ts | 14 +++---- packages/core/useCloned/index.ts | 6 +-- packages/core/useColorMode/index.test.ts | 4 +- packages/core/useConfirmDialog/demo.vue | 8 ++-- packages/core/useConfirmDialog/index.test.ts | 30 ++++++------- packages/core/useConfirmDialog/index.ts | 4 +- packages/core/useCountdown/demo.vue | 6 +-- packages/core/useCountdown/index.test.ts | 4 +- packages/core/useCountdown/index.ts | 4 +- packages/core/useCssVar/demo.vue | 4 +- packages/core/useCssVar/index.test.ts | 4 +- packages/core/useCssVar/index.ts | 4 +- packages/core/useCycleList/demo.vue | 4 +- packages/core/useCycleList/index.test.ts | 6 +-- packages/core/useDebouncedRefHistory/demo.vue | 5 +-- .../core/useDebouncedRefHistory/index.test.ts | 6 +-- packages/core/useDeviceMotion/index.ts | 12 +++--- packages/core/useDeviceOrientation/index.ts | 10 ++--- packages/core/useDevicePixelRatio/index.ts | 4 +- packages/core/useDevicesList/index.ts | 6 +-- packages/core/useDisplayMedia/demo.vue | 4 +- packages/core/useDisplayMedia/index.ts | 4 +- packages/core/useDocumentVisibility/demo.vue | 4 +- packages/core/useDocumentVisibility/index.ts | 6 +-- packages/core/useDraggable/component.ts | 4 +- packages/core/useDraggable/demo.vue | 4 +- packages/core/useDraggable/index.ts | 6 +-- packages/core/useDropZone/demo.vue | 10 ++--- packages/core/useDropZone/index.ts | 4 +- packages/core/useElementBounding/component.ts | 4 +- packages/core/useElementBounding/index.ts | 18 ++++---- packages/core/useElementByPoint/index.ts | 4 +- packages/core/useElementHover/demo.vue | 4 +- packages/core/useElementHover/index.ts | 4 +- packages/core/useElementSize/component.ts | 4 +- packages/core/useElementSize/index.ts | 6 +-- .../core/useElementVisibility/component.ts | 4 +- packages/core/useElementVisibility/index.ts | 4 +- packages/core/useEventBus/demo.vue | 4 +- packages/core/useEventListener/index.test.ts | 18 ++++---- packages/core/useEventSource/index.ts | 10 ++--- packages/core/useEyeDropper/index.ts | 4 +- packages/core/useFavicon/demo.vue | 4 +- packages/core/useFavicon/index.test.ts | 10 ++--- packages/core/useFetch/demo.vue | 6 +-- packages/core/useFetch/index.test.ts | 12 +++--- packages/core/useFetch/index.ts | 10 ++--- packages/core/useFileDialog/index.ts | 4 +- packages/core/useFileSystemAccess/demo.vue | 4 +- packages/core/useFileSystemAccess/index.ts | 8 ++-- packages/core/useFocus/demo.vue | 16 +++---- packages/core/useFocus/index.test.ts | 4 +- packages/core/useFocus/index.ts | 4 +- packages/core/useFocusWithin/demo.vue | 4 +- packages/core/useFocusWithin/index.test.ts | 10 ++--- packages/core/useFocusWithin/index.ts | 4 +- packages/core/useFps/index.ts | 4 +- packages/core/useFullscreen/component.ts | 4 +- packages/core/useFullscreen/index.ts | 4 +- packages/core/useGamepad/index.ts | 4 +- packages/core/useGeolocation/index.ts | 6 +-- packages/core/useIdle/index.ts | 6 +-- packages/core/useImage/demo.vue | 4 +- packages/core/useInfiniteScroll/demo.vue | 4 +- packages/core/useInfiniteScroll/index.test.ts | 6 +-- packages/core/useInfiniteScroll/index.ts | 4 +- .../core/useIntersectionObserver/demo.vue | 8 ++-- .../core/useIntersectionObserver/index.ts | 4 +- packages/core/useKeyModifier/index.ts | 4 +- packages/core/useMagicKeys/index.ts | 4 +- .../core/useManualRefHistory/index.test.ts | 16 +++---- packages/core/useManualRefHistory/index.ts | 8 ++-- .../core/useMediaControls/components/Menu.vue | 6 +-- .../useMediaControls/components/Scrubber.vue | 8 ++-- packages/core/useMediaControls/demo.vue | 6 +-- packages/core/useMediaControls/index.ts | 30 ++++++------- packages/core/useMediaQuery/index.test.ts | 6 +-- packages/core/useMediaQuery/index.ts | 6 +-- packages/core/useMemory/index.ts | 4 +- packages/core/useMounted/index.ts | 10 +++-- packages/core/useMouse/index.ts | 8 ++-- packages/core/useMouseInElement/component.ts | 4 +- packages/core/useMouseInElement/demo.vue | 4 +- packages/core/useMouseInElement/index.ts | 18 ++++---- packages/core/useMousePressed/component.ts | 4 +- packages/core/useMousePressed/index.ts | 6 +-- packages/core/useMutationObserver/demo.vue | 10 ++--- .../core/useMutationObserver/index.test.ts | 6 +-- packages/core/useNavigatorLanguage/index.ts | 4 +- packages/core/useNetwork/index.ts | 20 ++++----- packages/core/useNow/index.ts | 4 +- packages/core/useObjectUrl/index.ts | 4 +- packages/core/useOffsetPagination/demo.vue | 10 ++--- .../core/useOffsetPagination/index.test.ts | 20 ++++----- packages/core/usePageLeave/index.ts | 4 +- packages/core/useParallax/demo.vue | 4 +- packages/core/useParentElement/index.test.ts | 4 +- packages/core/usePerformanceObserver/demo.vue | 4 +- packages/core/usePointer/component.ts | 4 +- packages/core/usePointer/index.ts | 6 +-- packages/core/usePointerLock/component.ts | 4 +- packages/core/usePointerLock/demo.vue | 6 +-- packages/core/usePointerLock/index.ts | 6 +-- packages/core/usePointerSwipe/demo.vue | 10 ++--- packages/core/usePointerSwipe/index.ts | 6 +-- packages/core/usePreferredLanguages/index.ts | 6 +-- packages/core/usePrevious/index.test.ts | 8 ++-- packages/core/useRafFn/demo.vue | 6 +-- packages/core/useRafFn/index.test.ts | 4 +- packages/core/useRafFn/index.ts | 4 +- packages/core/useRefHistory/index.test.ts | 42 +++++++++---------- packages/core/useResizeObserver/demo.vue | 4 +- packages/core/useScreenOrientation/index.ts | 6 +-- packages/core/useScreenSafeArea/index.ts | 10 ++--- packages/core/useScriptTag/index.ts | 4 +- packages/core/useScroll/demo.vue | 4 +- packages/core/useScroll/index.ts | 8 ++-- packages/core/useScrollLock/directive.ts | 4 +- packages/core/useScrollLock/index.ts | 4 +- packages/core/useShare/demo.client.vue | 4 +- packages/core/useSorted/demo.vue | 4 +- packages/core/useSpeechRecognition/demo.vue | 10 ++--- packages/core/useSpeechRecognition/index.ts | 8 ++-- packages/core/useSpeechSynthesis/demo.vue | 12 +++--- packages/core/useSpeechSynthesis/index.ts | 6 +-- packages/core/useStepper/index.test.ts | 4 +- packages/core/useStepper/index.ts | 6 +-- packages/core/useStorage/index.test.ts | 10 ++--- packages/core/useStorageAsync/index.ts | 4 +- packages/core/useStyleTag/index.ts | 6 +-- packages/core/useSwipe/demo.vue | 10 ++--- packages/core/useSwipe/index.ts | 4 +- packages/core/useTemplateRefsList/demo.vue | 4 +- .../core/useTemplateRefsList/index.test.ts | 6 +-- packages/core/useTemplateRefsList/index.ts | 4 +- packages/core/useTextDirection/index.ts | 6 +-- packages/core/useTextSelection/demo.vue | 4 +- packages/core/useTextSelection/index.ts | 4 +- packages/core/useTextareaAutosize/index.ts | 6 +-- packages/core/useThrottledRefHistory/demo.vue | 4 +- .../core/useThrottledRefHistory/index.test.ts | 4 +- packages/core/useTimeAgo/demo.vue | 4 +- packages/core/useTimeAgo/index.test.ts | 4 +- packages/core/useTimeoutPoll/demo.vue | 4 +- packages/core/useTimeoutPoll/index.test.ts | 6 +-- packages/core/useTimeoutPoll/index.ts | 4 +- packages/core/useTimestamp/index.test.ts | 4 +- packages/core/useTimestamp/index.ts | 4 +- packages/core/useTitle/index.test.ts | 12 +++--- packages/core/useTransition/demo.vue | 6 +-- packages/core/useTransition/index.test.ts | 42 +++++++++---------- packages/core/useTransition/index.ts | 4 +- packages/core/useUserMedia/demo.vue | 6 +-- packages/core/useUserMedia/index.ts | 8 ++-- packages/core/useVModel/index.ts | 4 +- packages/core/useVirtualList/demo.vue | 6 +-- packages/core/useVirtualList/index.test.ts | 14 +++---- packages/core/useVirtualList/index.ts | 8 ++-- packages/core/useWakeLock/index.ts | 4 +- packages/core/useWebNotification/index.ts | 6 +-- packages/core/useWebSocket/index.test.ts | 6 +-- packages/core/useWebSocket/index.ts | 8 ++-- packages/core/useWebWorker/index.ts | 4 +- packages/core/useWebWorkerFn/demo.vue | 6 +-- packages/core/useWebWorkerFn/index.ts | 10 ++--- packages/core/useWindowFocus/demo.vue | 4 +- packages/core/useWindowFocus/index.ts | 6 +-- packages/core/useWindowSize/index.ts | 6 +-- packages/electron/useZoomFactor/index.ts | 8 ++-- packages/electron/useZoomLevel/index.ts | 8 ++-- packages/firebase/useAuth/index.ts | 4 +- packages/firebase/useFirestore/index.test.ts | 8 ++-- packages/firebase/useFirestore/index.ts | 4 +- packages/firebase/useRTDB/index.ts | 4 +- packages/guidelines.md | 3 +- .../useAsyncValidator/index.test.ts | 10 ++--- .../integrations/useAsyncValidator/index.ts | 6 +-- packages/integrations/useAxios/index.ts | 10 ++--- packages/integrations/useChangeCase/demo.vue | 6 +-- .../integrations/useChangeCase/index.test.ts | 4 +- packages/integrations/useChangeCase/index.ts | 4 +- packages/integrations/useCookies/index.ts | 4 +- .../integrations/useDrauu/demo.client.vue | 6 +-- packages/integrations/useDrauu/index.ts | 14 +++---- .../integrations/useFocusTrap/component.ts | 4 +- packages/integrations/useFocusTrap/demo.vue | 4 +- packages/integrations/useFocusTrap/index.ts | 6 +-- packages/integrations/useFuse/demo.vue | 18 ++++---- packages/integrations/useFuse/index.ts | 4 +- packages/integrations/useIDBKeyval/index.ts | 6 +-- packages/integrations/useJwt/demo.vue | 4 +- packages/integrations/useJwt/index.test.ts | 10 ++--- packages/integrations/useQRCode/demo.vue | 4 +- packages/integrations/useQRCode/index.ts | 4 +- .../integrations/useSortable/component.ts | 4 +- packages/integrations/useSortable/demo.vue | 4 +- packages/math/createProjection/index.test.ts | 10 ++--- packages/math/logicAnd/index.test.ts | 12 +++--- packages/math/logicNot/index.test.ts | 14 +++---- packages/math/logicOr/index.test.ts | 12 +++--- packages/math/useAbs/index.test.ts | 6 +-- packages/math/useAverage/index.test.ts | 20 ++++----- packages/math/useCeil/index.test.ts | 4 +- packages/math/useClamp/demo.vue | 6 +-- packages/math/useClamp/index.test.ts | 26 ++++++------ packages/math/useClamp/index.ts | 4 +- packages/math/useFloor/index.test.ts | 4 +- packages/math/useMath/index.test.ts | 8 ++-- packages/math/useMax/index.test.ts | 10 ++--- packages/math/useMin/index.test.ts | 10 ++--- packages/math/usePrecision/index.test.ts | 8 ++-- packages/math/useProjection/demo.vue | 8 ++-- packages/math/useProjection/index.test.ts | 6 +-- packages/math/useRound/index.test.ts | 4 +- packages/math/useSum/index.test.ts | 8 ++-- packages/math/useTrunc/index.test.ts | 4 +- packages/router/useRouteHash/index.test.ts | 4 +- packages/router/useRouteParams/index.test.ts | 16 +++---- packages/router/useRouteQuery/index.test.ts | 16 +++---- packages/rxjs/from/_demo.vue | 6 +-- packages/rxjs/toObserver/_demo.vue | 6 +-- .../rxjs/useExtractedObservable/_demo.vue | 4 +- .../rxjs/useExtractedObservable/index.test.ts | 20 ++++----- packages/rxjs/useObservable/index.ts | 4 +- packages/rxjs/useSubject/index.ts | 4 +- packages/rxjs/useSubscription/_demo.vue | 4 +- .../rxjs/watchExtractedObservable/_demo.vue | 4 +- .../watchExtractedObservable/index.test.ts | 14 +++---- packages/shared/computedEager/demo.vue | 6 +-- packages/shared/computedEager/demo/state.ts | 4 +- packages/shared/computedEager/index.test.ts | 6 +-- .../shared/computedWithControl/index.test.ts | 12 +++--- packages/shared/computedWithControl/index.ts | 4 +- .../shared/createGlobalState/index.test.ts | 4 +- .../demo/CountComponent.vue | 2 +- .../demo/useCounterStore.ts | 8 ++-- .../shared/createInjectionState/index.test.ts | 10 ++--- packages/shared/get/index.test.ts | 8 ++-- packages/shared/isDefined/index.test.ts | 8 ++-- packages/shared/reactify/index.test.ts | 20 ++++----- packages/shared/reactifyObject/index.test.ts | 8 ++-- .../shared/reactiveComputed/index.test.ts | 8 ++-- packages/shared/refAutoReset/index.test.ts | 6 +-- packages/shared/refDebounced/demo.vue | 6 +-- packages/shared/refDebounced/index.ts | 4 +- packages/shared/refThrottled/demo.vue | 10 ++--- packages/shared/refThrottled/index.ts | 4 +- packages/shared/set/index.test.ts | 4 +- packages/shared/syncRef/demo.vue | 6 +-- packages/shared/syncRef/index.test.ts | 34 +++++++-------- packages/shared/syncRefs/demo.vue | 8 ++-- packages/shared/syncRefs/index.test.ts | 12 +++--- packages/shared/toReactive/index.test.ts | 10 ++--- packages/shared/toRef/index.ts | 10 ++--- packages/shared/toRefs/index.test.ts | 12 +++--- packages/shared/until/index.test.ts | 40 +++++++++--------- .../shared/useArrayDifference/index.test.ts | 22 +++++----- packages/shared/useArrayEvery/index.test.ts | 14 +++---- packages/shared/useArrayFilter/index.test.ts | 16 +++---- packages/shared/useArrayFind/index.test.ts | 8 ++-- .../shared/useArrayFindIndex/index.test.ts | 14 +++---- .../shared/useArrayFindLast/index.test.ts | 8 ++-- .../shared/useArrayIncludes/index.test.ts | 10 ++--- packages/shared/useArrayJoin/index.test.ts | 14 +++---- packages/shared/useArrayMap/index.test.ts | 16 +++---- packages/shared/useArrayReduce/index.test.ts | 6 +-- packages/shared/useArraySome/index.test.ts | 14 +++---- packages/shared/useArrayUnique/index.test.ts | 14 +++---- packages/shared/useCounter/index.test.ts | 4 +- packages/shared/useCounter/index.ts | 9 ++-- packages/shared/useDateFormat/demo.vue | 6 +-- packages/shared/useDebounceFn/demo.vue | 6 +-- packages/shared/useInterval/index.ts | 4 +- packages/shared/useIntervalFn/demo.vue | 6 +-- packages/shared/useIntervalFn/index.test.ts | 6 +-- packages/shared/useIntervalFn/index.ts | 4 +- packages/shared/useLastChanged/demo.vue | 4 +- packages/shared/useLastChanged/index.ts | 4 +- packages/shared/useThrottleFn/demo.vue | 6 +-- packages/shared/useTimeout/index.test.ts | 6 +-- packages/shared/useTimeoutFn/demo.vue | 4 +- packages/shared/useTimeoutFn/index.test.ts | 4 +- packages/shared/useTimeoutFn/index.ts | 4 +- packages/shared/useToNumber/index.test.ts | 10 ++--- packages/shared/useToString/index.test.ts | 4 +- packages/shared/useToggle/index.test.ts | 6 +-- packages/shared/useToggle/index.ts | 4 +- packages/shared/utils/index.test.ts | 10 ++--- packages/shared/watchArray/index.test.ts | 14 +++---- packages/shared/watchAtMost/index.test.ts | 4 +- packages/shared/watchAtMost/index.ts | 4 +- packages/shared/watchDebounced/demo.vue | 6 +-- packages/shared/watchDebounced/index.test.ts | 8 ++-- packages/shared/watchDeep/index.test.ts | 4 +- packages/shared/watchIgnorable/demo.vue | 6 +-- packages/shared/watchIgnorable/index.test.ts | 16 +++---- packages/shared/watchIgnorable/index.ts | 8 ++-- packages/shared/watchImmediate/index.test.ts | 4 +- packages/shared/watchOnce/index.test.ts | 4 +- packages/shared/watchPausable/demo.vue | 8 ++-- packages/shared/watchPausable/index.test.ts | 6 +-- packages/shared/watchThrottled/demo.vue | 6 +-- packages/shared/watchThrottled/index.test.ts | 4 +- packages/shared/watchTriggerable/demo.vue | 6 +-- .../shared/watchTriggerable/index.test.ts | 18 ++++---- packages/shared/whenever/index.test.ts | 14 +++---- playgrounds/nuxt/app.vue | 4 +- pnpm-lock.yaml | 37 ++++++++++++++++ 348 files changed, 1356 insertions(+), 1284 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 0068d11c1e8..0017f6cd640 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,6 +1,8 @@ import { resolve } from 'node:path' import { fileURLToPath } from 'node:url' import antfu from '@antfu/eslint-config' +import { createSimplePlugin } from 'eslint-factory' +import { createAutoInsert } from 'eslint-plugin-unimport' const dir = fileURLToPath(new URL('.', import.meta.url)) const restricted = [ @@ -122,4 +124,33 @@ export default antfu( 'no-restricted-imports': 'off', }, }, + createAutoInsert({ + imports: [ + { + from: 'vue', + name: 'shallowRef', + }, + { + from: 'vue', + name: 'ref', + as: 'deepRef', + }, + ], + }), + createSimplePlugin({ + name: 'no-ref', + exclude: ['**/*.md', '**/*.md/**'], + create(context) { + return { + CallExpression(node) { + if (node.callee.type === 'Identifier' && node.callee.name === 'ref') { + context.report({ + node, + message: 'Usage of ref() is restricted. Use shallowRef() or deepRef() instead.', + }) + } + }, + } + }, + }), ) diff --git a/package.json b/package.json index 57f9527ed2a..24efe24738c 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,9 @@ "consola": "catalog:", "esbuild-register": "catalog:", "eslint": "catalog:", + "eslint-factory": "^0.1.2", "eslint-plugin-format": "catalog:", + "eslint-plugin-unimport": "^0.1.2", "export-size": "catalog:", "fake-indexeddb": "catalog:", "firebase": "catalog:", diff --git a/packages/.test/mount.ts b/packages/.test/mount.ts index 35a2cd7b18d..a4fd0e1b455 100644 --- a/packages/.test/mount.ts +++ b/packages/.test/mount.ts @@ -1,5 +1,5 @@ import type { InjectionKey, Ref } from 'vue' -import { createApp, defineComponent, h, provide, ref } from 'vue' +import { createApp, defineComponent, h, provide, shallowRef } from 'vue' type InstanceType = V extends { new (...arg: any[]): infer X } ? X : never type VM = InstanceType & { unmount: () => void } @@ -38,7 +38,7 @@ export function useInjectedSetup(setup: () => V) { const Provider = defineComponent({ components: Comp, setup() { - provide(Key, ref(1)) + provide(Key, shallowRef(1)) }, render() { return h('div', []) diff --git a/packages/.vitepress/theme/components/DemoContainer.vue b/packages/.vitepress/theme/components/DemoContainer.vue index 37bec84439d..b6c4b635ead 100644 --- a/packages/.vitepress/theme/components/DemoContainer.vue +++ b/packages/.vitepress/theme/components/DemoContainer.vue @@ -1,7 +1,7 @@ diff --git a/packages/core/computedInject/demoReceiver.vue b/packages/core/computedInject/demoReceiver.vue index d9467ec170d..33bb338fc07 100644 --- a/packages/core/computedInject/demoReceiver.vue +++ b/packages/core/computedInject/demoReceiver.vue @@ -1,6 +1,6 @@ diff --git a/packages/core/useFocusWithin/index.test.ts b/packages/core/useFocusWithin/index.test.ts index d561697302b..59426e5eef6 100644 --- a/packages/core/useFocusWithin/index.test.ts +++ b/packages/core/useFocusWithin/index.test.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { beforeEach, describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useFocusWithin } from './index' describe('useFocusWithin', () => { @@ -10,19 +10,19 @@ describe('useFocusWithin', () => { let grandchild: Ref beforeEach(() => { - parent = ref(document.createElement('form')) + parent = shallowRef(document.createElement('form')) parent.value.tabIndex = 0 document.body.appendChild(parent.value) - child = ref(document.createElement('div')) + child = shallowRef(document.createElement('div')) child.value.tabIndex = 0 parent.value.appendChild(child.value) - child2 = ref(document.createElement('div')) + child2 = shallowRef(document.createElement('div')) child2.value.tabIndex = 0 parent.value.appendChild(child2.value) - grandchild = ref(document.createElement('input')) + grandchild = shallowRef(document.createElement('input')) grandchild.value.tabIndex = 0 child.value.appendChild(grandchild.value) }) diff --git a/packages/core/useFocusWithin/index.ts b/packages/core/useFocusWithin/index.ts index 020a5c63892..84db0fabfbd 100644 --- a/packages/core/useFocusWithin/index.ts +++ b/packages/core/useFocusWithin/index.ts @@ -1,7 +1,7 @@ import type { ComputedRef } from 'vue' import type { ConfigurableWindow } from '../_configurable' import type { MaybeElementRef } from '../unrefElement' -import { computed, ref } from 'vue' +import { computed, shallowRef } from 'vue' import { defaultWindow } from '../_configurable' import { unrefElement } from '../unrefElement' import { useActiveElement } from '../useActiveElement' @@ -28,7 +28,7 @@ const PSEUDO_CLASS_FOCUS_WITHIN = ':focus-within' export function useFocusWithin(target: MaybeElementRef, options: ConfigurableWindow = {}): UseFocusWithinReturn { const { window = defaultWindow } = options const targetElement = computed(() => unrefElement(target)) - const _focused = ref(false) + const _focused = shallowRef(false) const focused = computed(() => _focused.value) const activeElement = useActiveElement(options) diff --git a/packages/core/useFps/index.ts b/packages/core/useFps/index.ts index 5170ff28d83..2657e7cf243 100644 --- a/packages/core/useFps/index.ts +++ b/packages/core/useFps/index.ts @@ -1,5 +1,5 @@ import type { Ref } from 'vue' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useRafFn } from '../useRafFn' export interface UseFpsOptions { @@ -11,7 +11,7 @@ export interface UseFpsOptions { } export function useFps(options?: UseFpsOptions): Ref { - const fps = ref(0) + const fps = shallowRef(0) if (typeof performance === 'undefined') return fps const every = options?.every ?? 10 diff --git a/packages/core/useFullscreen/component.ts b/packages/core/useFullscreen/component.ts index d975e4ec5ae..6201e50a7bc 100644 --- a/packages/core/useFullscreen/component.ts +++ b/packages/core/useFullscreen/component.ts @@ -1,12 +1,12 @@ import type { RenderableComponent } from '../types' import { useFullscreen } from '@vueuse/core' -import { defineComponent, h, reactive, ref } from 'vue' +import { ref as deepRef, defineComponent, h, reactive } from 'vue' export const UseFullscreen = /* #__PURE__ */ defineComponent({ name: 'UseFullscreen', props: ['as'] as unknown as undefined, setup(props, { slots }) { - const target = ref() + const target = deepRef() const data = reactive(useFullscreen(target)) return () => { diff --git a/packages/core/useFullscreen/index.ts b/packages/core/useFullscreen/index.ts index 9af4974cebc..3e31b1e6043 100644 --- a/packages/core/useFullscreen/index.ts +++ b/packages/core/useFullscreen/index.ts @@ -1,7 +1,7 @@ import type { ConfigurableDocument } from '../_configurable' import type { MaybeElementRef } from '../unrefElement' import { tryOnScopeDispose } from '@vueuse/shared' -import { computed, ref } from 'vue' +import { computed, shallowRef } from 'vue' import { defaultDocument } from '../_configurable' import { unrefElement } from '../unrefElement' import { useEventListener } from '../useEventListener' @@ -41,7 +41,7 @@ export function useFullscreen( } = options const targetRef = computed(() => unrefElement(target) ?? document?.documentElement) - const isFullscreen = ref(false) + const isFullscreen = shallowRef(false) const requestMethod = computed<'requestFullscreen' | undefined>(() => { return [ diff --git a/packages/core/useGamepad/index.ts b/packages/core/useGamepad/index.ts index 655f3aeac50..d16c8707966 100644 --- a/packages/core/useGamepad/index.ts +++ b/packages/core/useGamepad/index.ts @@ -1,7 +1,7 @@ import type { Ref } from 'vue' import type { ConfigurableNavigator, ConfigurableWindow } from '../_configurable' import { createEventHook, tryOnMounted } from '@vueuse/shared' -import { computed, ref } from 'vue' +import { computed, ref as deepRef } from 'vue' import { defaultNavigator } from '../_configurable' import { useEventListener } from '../useEventListener' import { useRafFn } from '../useRafFn' @@ -64,7 +64,7 @@ export function useGamepad(options: UseGamepadOptions = {}) { navigator = defaultNavigator, } = options const isSupported = useSupported(() => navigator && 'getGamepads' in navigator) - const gamepads = ref([]) + const gamepads = deepRef([]) const onConnectedHook = createEventHook() const onDisconnectedHook = createEventHook() diff --git a/packages/core/useGeolocation/index.ts b/packages/core/useGeolocation/index.ts index fb14b6b89e1..a1e7daab097 100644 --- a/packages/core/useGeolocation/index.ts +++ b/packages/core/useGeolocation/index.ts @@ -3,7 +3,7 @@ import type { Ref } from 'vue' import type { ConfigurableNavigator } from '../_configurable' import { tryOnScopeDispose } from '@vueuse/shared' -import { ref, shallowRef } from 'vue' +import { ref as deepRef, shallowRef } from 'vue' import { defaultNavigator } from '../_configurable' import { useSupported } from '../useSupported' @@ -28,9 +28,9 @@ export function useGeolocation(options: UseGeolocationOptions = {}) { const isSupported = useSupported(() => navigator && 'geolocation' in navigator) - const locatedAt: Ref = ref(null) + const locatedAt: Ref = deepRef(null) const error = shallowRef(null) - const coords: Ref> = ref({ + const coords: Ref> = deepRef({ accuracy: 0, latitude: Number.POSITIVE_INFINITY, longitude: Number.POSITIVE_INFINITY, diff --git a/packages/core/useIdle/index.ts b/packages/core/useIdle/index.ts index 78da19366f1..1c3ec5e2a8c 100644 --- a/packages/core/useIdle/index.ts +++ b/packages/core/useIdle/index.ts @@ -3,7 +3,7 @@ import type { Ref } from 'vue' import type { ConfigurableWindow } from '../_configurable' import type { WindowEventName } from '../useEventListener' import { createFilterWrapper, throttleFilter, timestamp } from '@vueuse/shared' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { defaultWindow } from '../_configurable' import { useEventListener } from '../useEventListener' @@ -55,8 +55,8 @@ export function useIdle( window = defaultWindow, eventFilter = throttleFilter(50), } = options - const idle = ref(initialState) - const lastActive = ref(timestamp()) + const idle = deepRef(initialState) + const lastActive = deepRef(timestamp()) let timer: any diff --git a/packages/core/useImage/demo.vue b/packages/core/useImage/demo.vue index d36492f50cd..0b044d2f04b 100644 --- a/packages/core/useImage/demo.vue +++ b/packages/core/useImage/demo.vue @@ -1,8 +1,8 @@ diff --git a/packages/core/useMouseInElement/index.ts b/packages/core/useMouseInElement/index.ts index 7e056062e4f..94d9f104ca9 100644 --- a/packages/core/useMouseInElement/index.ts +++ b/packages/core/useMouseInElement/index.ts @@ -1,6 +1,6 @@ import type { MaybeElementRef } from '../unrefElement' import type { UseMouseOptions } from '../useMouse' -import { ref, watch } from 'vue' +import { ref as deepRef, shallowRef, watch } from 'vue' import { defaultWindow } from '../_configurable' import { unrefElement } from '../unrefElement' import { useEventListener } from '../useEventListener' @@ -29,14 +29,14 @@ export function useMouseInElement( const { x, y, sourceType } = useMouse(options) - const targetRef = ref(target ?? window?.document.body) - const elementX = ref(0) - const elementY = ref(0) - const elementPositionX = ref(0) - const elementPositionY = ref(0) - const elementHeight = ref(0) - const elementWidth = ref(0) - const isOutside = ref(true) + const targetRef = deepRef(target ?? window?.document.body) + const elementX = shallowRef(0) + const elementY = shallowRef(0) + const elementPositionX = shallowRef(0) + const elementPositionY = shallowRef(0) + const elementHeight = shallowRef(0) + const elementWidth = shallowRef(0) + const isOutside = shallowRef(true) let stop = () => {} diff --git a/packages/core/useMousePressed/component.ts b/packages/core/useMousePressed/component.ts index ff145340dfe..8cb58ae5189 100644 --- a/packages/core/useMousePressed/component.ts +++ b/packages/core/useMousePressed/component.ts @@ -1,13 +1,13 @@ import type { MousePressedOptions } from '@vueuse/core' import type { RenderableComponent } from '../types' import { useMousePressed } from '@vueuse/core' -import { defineComponent, h, reactive, ref } from 'vue' +import { ref as deepRef, defineComponent, h, reactive } from 'vue' export const UseMousePressed = /* #__PURE__ */ defineComponent & RenderableComponent>({ name: 'UseMousePressed', props: ['touch', 'initialValue', 'as'] as unknown as undefined, setup(props, { slots }) { - const target = ref() + const target = deepRef() const data = reactive(useMousePressed({ ...props, target })) return () => { diff --git a/packages/core/useMousePressed/index.ts b/packages/core/useMousePressed/index.ts index 2a6ca1cbd2a..05eec3f7518 100644 --- a/packages/core/useMousePressed/index.ts +++ b/packages/core/useMousePressed/index.ts @@ -1,7 +1,7 @@ import type { ConfigurableWindow } from '../_configurable' import type { MaybeComputedElementRef } from '../unrefElement' import type { UseMouseSourceType } from '../useMouse' -import { computed, ref } from 'vue' +import { computed, ref as deepRef } from 'vue' import { defaultWindow } from '../_configurable' import { unrefElement } from '../unrefElement' import { useEventListener } from '../useEventListener' @@ -71,8 +71,8 @@ export function useMousePressed(options: MousePressedOptions = {}) { window = defaultWindow, } = options - const pressed = ref(initialValue) - const sourceType = ref(null) + const pressed = deepRef(initialValue) + const sourceType = deepRef(null) if (!window) { return { diff --git a/packages/core/useMutationObserver/demo.vue b/packages/core/useMutationObserver/demo.vue index 8d28b2ff453..0cef2be3310 100644 --- a/packages/core/useMutationObserver/demo.vue +++ b/packages/core/useMutationObserver/demo.vue @@ -1,11 +1,11 @@ diff --git a/packages/core/useSpeechRecognition/index.ts b/packages/core/useSpeechRecognition/index.ts index 33ddf529b70..8089c0c94e6 100644 --- a/packages/core/useSpeechRecognition/index.ts +++ b/packages/core/useSpeechRecognition/index.ts @@ -6,7 +6,7 @@ import type { Ref } from 'vue' import type { ConfigurableWindow } from '../_configurable' import type { SpeechRecognition, SpeechRecognitionErrorEvent } from './types' import { toRef, tryOnScopeDispose } from '@vueuse/shared' -import { ref, shallowRef, toValue, watch } from 'vue' +import { shallowRef, toValue, watch } from 'vue' import { defaultWindow } from '../_configurable' import { useSupported } from '../useSupported' @@ -54,9 +54,9 @@ export function useSpeechRecognition(options: UseSpeechRecognitionOptions = {}) } = options const lang = toRef(options.lang || 'en-US') - const isListening = ref(false) - const isFinal = ref(false) - const result = ref('') + const isListening = shallowRef(false) + const isFinal = shallowRef(false) + const result = shallowRef('') const error = shallowRef(undefined) as Ref let recognition: SpeechRecognition | undefined diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue index 347663bc0ef..8ac466bc3fe 100644 --- a/packages/core/useSpeechSynthesis/demo.vue +++ b/packages/core/useSpeechSynthesis/demo.vue @@ -1,11 +1,11 @@ diff --git a/packages/core/useTextSelection/index.ts b/packages/core/useTextSelection/index.ts index 18e48e1287e..919579d8354 100644 --- a/packages/core/useTextSelection/index.ts +++ b/packages/core/useTextSelection/index.ts @@ -1,5 +1,5 @@ import type { ConfigurableWindow } from '../_configurable' -import { computed, ref } from 'vue' +import { computed, ref as deepRef } from 'vue' import { defaultWindow } from '../_configurable' import { useEventListener } from '../useEventListener' @@ -18,7 +18,7 @@ export function useTextSelection(options: ConfigurableWindow = {}) { window = defaultWindow, } = options - const selection = ref(null) + const selection = deepRef(null) const text = computed(() => selection.value?.toString() ?? '') const ranges = computed(() => selection.value ? getRangesFromSelection(selection.value) : []) const rects = computed(() => ranges.value.map(range => range.getBoundingClientRect())) diff --git a/packages/core/useTextareaAutosize/index.ts b/packages/core/useTextareaAutosize/index.ts index 8eea60da022..b118d1e09e5 100644 --- a/packages/core/useTextareaAutosize/index.ts +++ b/packages/core/useTextareaAutosize/index.ts @@ -1,7 +1,7 @@ import type { MaybeRef } from '@vueuse/shared' import type { WatchSource } from 'vue' import { toRef } from '@vueuse/shared' -import { nextTick, ref, toValue, watch } from 'vue' +import { nextTick, shallowRef, toValue, watch } from 'vue' import { useResizeObserver } from '../useResizeObserver' export interface UseTextareaAutosizeOptions { @@ -23,8 +23,8 @@ export function useTextareaAutosize(options?: UseTextareaAutosizeOptions) { const textarea = toRef(options?.element) const input = toRef(options?.input ?? '') const styleProp = options?.styleProp ?? 'height' - const textareaScrollHeight = ref(1) - const textareaOldWidth = ref(0) + const textareaScrollHeight = shallowRef(1) + const textareaOldWidth = shallowRef(0) function triggerResize() { if (!textarea.value) diff --git a/packages/core/useThrottledRefHistory/demo.vue b/packages/core/useThrottledRefHistory/demo.vue index 8b9585d78e7..ab5096e87e8 100644 --- a/packages/core/useThrottledRefHistory/demo.vue +++ b/packages/core/useThrottledRefHistory/demo.vue @@ -2,12 +2,12 @@ import type { Ref } from 'vue' import { formatDate, useThrottledRefHistory } from '@vueuse/core' import { useCounter } from '@vueuse/shared' -import { ref } from 'vue' +import { shallowRef } from 'vue' function format(ts: number) { return formatDate(new Date(ts), 'YYYY-MM-DD HH:mm:ss') } -const delay: Ref = ref(1000) +const delay: Ref = shallowRef(1000) const { count, inc, dec } = useCounter() const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory( diff --git a/packages/core/useThrottledRefHistory/index.test.ts b/packages/core/useThrottledRefHistory/index.test.ts index 763853294f5..9f5b99a43e3 100644 --- a/packages/core/useThrottledRefHistory/index.test.ts +++ b/packages/core/useThrottledRefHistory/index.test.ts @@ -1,12 +1,12 @@ import { describe, expect, it, vi } from 'vitest' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useThrottledRefHistory } from './index' describe('useThrottledRefHistory - sync', () => { it('take first snapshot right after data was changed and second after given time', async () => { vi.useFakeTimers() const ms = 10 - const v = ref(0) + const v = shallowRef(0) const { history } = useThrottledRefHistory(v, { throttle: ms }) diff --git a/packages/core/useTimeAgo/demo.vue b/packages/core/useTimeAgo/demo.vue index 31f75913c9f..39d05f58310 100644 --- a/packages/core/useTimeAgo/demo.vue +++ b/packages/core/useTimeAgo/demo.vue @@ -1,9 +1,9 @@ diff --git a/packages/core/useTimeAgo/index.test.ts b/packages/core/useTimeAgo/index.test.ts index 76a774ee72e..e7618b03858 100644 --- a/packages/core/useTimeAgo/index.test.ts +++ b/packages/core/useTimeAgo/index.test.ts @@ -1,7 +1,7 @@ import type { ComputedRef } from 'vue' import { timestamp } from '@vueuse/shared' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { computed, ref } from 'vue' +import { computed, shallowRef } from 'vue' import { useTimeAgo } from './index' type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' @@ -27,7 +27,7 @@ function getNeededTimeChange(type: TimeUnit, count: number, adjustSecond?: numbe describe('useTimeAgo', () => { let baseTime: number - const changeValue = ref(0) + const changeValue = shallowRef(0) let changeTime: ComputedRef function reset() { diff --git a/packages/core/useTimeoutPoll/demo.vue b/packages/core/useTimeoutPoll/demo.vue index 27365425317..d1f5016dba7 100644 --- a/packages/core/useTimeoutPoll/demo.vue +++ b/packages/core/useTimeoutPoll/demo.vue @@ -1,9 +1,9 @@ diff --git a/packages/integrations/useChangeCase/index.test.ts b/packages/integrations/useChangeCase/index.test.ts index 19203a1b107..6bc9549d3a9 100644 --- a/packages/integrations/useChangeCase/index.test.ts +++ b/packages/integrations/useChangeCase/index.test.ts @@ -1,7 +1,7 @@ import type { Options } from 'change-case' import type { ChangeCaseType } from './index' import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { useChangeCase } from './index' describe('useChangeCase', () => { @@ -92,7 +92,7 @@ describe('useChangeCase', () => { }) it(`ref ${key}`, () => { - const input = ref(helloWorld) + const input = deepRef(helloWorld) const changeCase = useChangeCase(input, key) expect(changeCase.value).toBe(obj[key].helloWorld) changeCase.value = vueuse diff --git a/packages/integrations/useChangeCase/index.ts b/packages/integrations/useChangeCase/index.ts index d5751d637af..68f088cf1bd 100644 --- a/packages/integrations/useChangeCase/index.ts +++ b/packages/integrations/useChangeCase/index.ts @@ -2,7 +2,7 @@ import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared' import type { Options } from 'change-case' import type { ComputedRef, WritableComputedRef } from 'vue' import * as changeCase from 'change-case' -import { computed, ref, toValue } from 'vue' +import { computed, ref as deepRef, toValue } from 'vue' type EndsWithCase = T extends `${infer _}Case` ? T : never type FilterKeys = { [K in keyof T as K extends string ? K : never]: EndsWithCase } @@ -36,7 +36,7 @@ export function useChangeCase(input: MaybeRefOrGetter, type: MaybeRefOrG if (typeof input === 'function') return computed(() => changeCaseTransforms[typeRef.value](toValue(input), toValue(options))) - const text = ref(input) + const text = deepRef(input) return computed({ get() { return changeCaseTransforms[typeRef.value](text.value, toValue(options)) diff --git a/packages/integrations/useCookies/index.ts b/packages/integrations/useCookies/index.ts index 7980e1e66e8..63f7444fd1d 100644 --- a/packages/integrations/useCookies/index.ts +++ b/packages/integrations/useCookies/index.ts @@ -1,7 +1,7 @@ import type { IncomingMessage } from 'node:http' import { tryOnScopeDispose } from '@vueuse/shared' import Cookie from 'universal-cookie' -import { ref } from 'vue' +import { shallowRef } from 'vue' type RawCookies = Record @@ -40,7 +40,7 @@ export function useCookies( /** * Adds reactivity to get/getAll methods */ - const touches = ref(0) + const touches = shallowRef(0) const onChange = () => { const newCookies = cookies.getAll({ doNotParse: true }) diff --git a/packages/integrations/useDrauu/demo.client.vue b/packages/integrations/useDrauu/demo.client.vue index 5422192bfbd..9b805658a70 100644 --- a/packages/integrations/useDrauu/demo.client.vue +++ b/packages/integrations/useDrauu/demo.client.vue @@ -1,11 +1,11 @@ diff --git a/packages/integrations/useFocusTrap/index.ts b/packages/integrations/useFocusTrap/index.ts index b48e9ae1774..f3b24ac3ba4 100644 --- a/packages/integrations/useFocusTrap/index.ts +++ b/packages/integrations/useFocusTrap/index.ts @@ -5,7 +5,7 @@ import type { Ref } from 'vue' import { toArray, tryOnScopeDispose, unrefElement } from '@vueuse/core' import { notNullish } from '@vueuse/shared' import { createFocusTrap } from 'focus-trap' -import { computed, ref, toValue, watch } from 'vue' +import { computed, shallowRef, toValue, watch } from 'vue' export interface UseFocusTrapOptions extends Options { /** @@ -68,8 +68,8 @@ export function useFocusTrap( let trap: undefined | FocusTrap const { immediate, ...focusTrapOptions } = options - const hasFocus = ref(false) - const isPaused = ref(false) + const hasFocus = shallowRef(false) + const isPaused = shallowRef(false) const activate = (opts?: ActivateOptions) => trap && trap.activate(opts) const deactivate = (opts?: DeactivateOptions) => trap && trap.deactivate(opts) diff --git a/packages/integrations/useFuse/demo.vue b/packages/integrations/useFuse/demo.vue index 52380f90c58..79c587beda6 100644 --- a/packages/integrations/useFuse/demo.vue +++ b/packages/integrations/useFuse/demo.vue @@ -1,6 +1,6 @@ diff --git a/packages/integrations/useJwt/index.test.ts b/packages/integrations/useJwt/index.test.ts index 8ff6e637ac5..7f5dc734937 100644 --- a/packages/integrations/useJwt/index.test.ts +++ b/packages/integrations/useJwt/index.test.ts @@ -1,6 +1,6 @@ import type { JwtHeader, JwtPayload } from 'jwt-decode' import { describe, expect, it, vi } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef, shallowRef } from 'vue' import { useJwt } from './index' interface CustomJwtHeader extends JwtHeader { @@ -12,7 +12,7 @@ interface CustomJwtPayload extends JwtPayload { } describe('useJwt', () => { - const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc') + const encodedJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc') it('decoded jwt', () => { const { header, payload } = useJwt(encodedJwt) @@ -25,13 +25,13 @@ describe('useJwt', () => { it('decode jwt error', () => { const onErrorSpy = vi.fn() - const { header, payload } = useJwt(ref('bad-token'), { onError: onErrorSpy }) + const { header, payload } = useJwt(shallowRef('bad-token'), { onError: onErrorSpy }) expect(header.value).toBe(null) expect(payload.value).toBe(null) expect(onErrorSpy).toHaveBeenCalled() }) - const encodedCustomJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJmb28iOiJiYXIifQ.S5QwvREUfgEdpB1ljG_xN6NI3HubQ79xx6J1J4dsJmg') + const encodedCustomJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJmb28iOiJiYXIifQ.S5QwvREUfgEdpB1ljG_xN6NI3HubQ79xx6J1J4dsJmg') it('decoded jwt with custom fields', () => { const { header, payload } = useJwt(encodedCustomJwt) @@ -40,7 +40,7 @@ describe('useJwt', () => { }) it('reactivity', () => { - const jwt = ref(encodedJwt.value) + const jwt = deepRef(encodedJwt.value) const { header, payload } = useJwt(jwt) expect(header.value?.foo).toBeUndefined() expect(payload.value?.foo).toBeUndefined() diff --git a/packages/integrations/useQRCode/demo.vue b/packages/integrations/useQRCode/demo.vue index 4773ed034ee..1470a027ca1 100644 --- a/packages/integrations/useQRCode/demo.vue +++ b/packages/integrations/useQRCode/demo.vue @@ -1,8 +1,8 @@ diff --git a/packages/math/useClamp/index.test.ts b/packages/math/useClamp/index.test.ts index 3ffad6b8693..abe62695b38 100644 --- a/packages/math/useClamp/index.test.ts +++ b/packages/math/useClamp/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { computed, isReadonly, ref } from 'vue' +import { computed, isReadonly, shallowRef } from 'vue' import { useClamp } from './index' describe('useClamp', () => { @@ -13,9 +13,9 @@ describe('useClamp', () => { }) it('should be max', () => { - const value = ref(10) - const min = ref(0) - const max = ref(100) + const value = shallowRef(10) + const min = shallowRef(0) + const max = shallowRef(100) const v = useClamp(value, min, max) @@ -32,9 +32,9 @@ describe('useClamp', () => { }) it('should be min', () => { - const value = ref(10) - const min = ref(0) - const max = ref(100) + const value = shallowRef(10) + const min = shallowRef(0) + const max = shallowRef(100) const v = useClamp(value, min, max) @@ -52,10 +52,10 @@ describe('useClamp', () => { }) it('should work with computed', () => { - const baseRef = ref(10) + const baseRef = shallowRef(10) const value = computed(() => baseRef.value) - const min = ref(0) - const max = ref(100) + const min = shallowRef(0) + const max = shallowRef(100) const v = useClamp(value, min, max) @@ -71,10 +71,10 @@ describe('useClamp', () => { }) it('should work with function', () => { - const baseRef = ref(10) + const baseRef = shallowRef(10) const value = () => baseRef.value - const min = ref(0) - const max = ref(100) + const min = shallowRef(0) + const max = shallowRef(100) const v = useClamp(value, min, max) diff --git a/packages/math/useClamp/index.ts b/packages/math/useClamp/index.ts index ed85e96fa66..d4930591b7c 100644 --- a/packages/math/useClamp/index.ts +++ b/packages/math/useClamp/index.ts @@ -1,7 +1,7 @@ import type { MaybeRefOrGetter, ReadonlyRefOrGetter } from '@vueuse/shared' import type { ComputedRef, Ref } from 'vue' import { clamp } from '@vueuse/shared' -import { computed, isReadonly, ref, toValue } from 'vue' +import { computed, ref as deepRef, isReadonly, toValue } from 'vue' export function useClamp( value: ReadonlyRefOrGetter, @@ -27,7 +27,7 @@ export function useClamp(value: MaybeRefOrGetter, min: MaybeRefOrGetter< if (typeof value === 'function' || isReadonly(value)) return computed(() => clamp(toValue(value), toValue(min), toValue(max))) - const _value = ref(value) + const _value = deepRef(value) return computed({ get() { return _value.value = clamp(_value.value, toValue(min), toValue(max)) diff --git a/packages/math/useFloor/index.test.ts b/packages/math/useFloor/index.test.ts index acc054e01b5..5b49ba4ade3 100644 --- a/packages/math/useFloor/index.test.ts +++ b/packages/math/useFloor/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { useFloor } from './index' describe('useFloor', () => { @@ -7,7 +7,7 @@ describe('useFloor', () => { expect(useFloor).toBeDefined() }) it('should work', () => { - const base = ref(45.95) + const base = deepRef(45.95) const result = useFloor(base) expect(result.value).toBe(45) base.value = -45.05 diff --git a/packages/math/useMath/index.test.ts b/packages/math/useMath/index.test.ts index a198dee6713..89b4cb22651 100644 --- a/packages/math/useMath/index.test.ts +++ b/packages/math/useMath/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useMath } from './index' describe('useMath', () => { @@ -13,13 +13,13 @@ describe('useMath', () => { }) it('should accept refs', () => { - const base = ref(2) - const exponent = ref(3) + const base = shallowRef(2) + const exponent = shallowRef(3) const result = useMath('pow', base, exponent) expect(result.value).toBe(8) - const num = ref(4) + const num = shallowRef(4) const root = useMath('sqrt', num) expect(root.value).toBe(2) diff --git a/packages/math/useMax/index.test.ts b/packages/math/useMax/index.test.ts index 5be0fd321d1..6e613fadcf1 100644 --- a/packages/math/useMax/index.test.ts +++ b/packages/math/useMax/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useMax } from './index' describe('useMax', () => { @@ -13,9 +13,9 @@ describe('useMax', () => { }) it('should accept refs', () => { - const value1 = ref(10) - const value2 = ref(100) - const value3 = ref(1000) + const value1 = shallowRef(10) + const value2 = shallowRef(100) + const value3 = shallowRef(1000) const v = useMax(value1, value2, value3) expect(v.value).toBe(1000) @@ -32,7 +32,7 @@ describe('useMax', () => { it('should accept numbers and refs', () => { const value1 = 10 - const value2 = ref(100) + const value2 = shallowRef(100) const v = useMax(50, value1, value2) diff --git a/packages/math/useMin/index.test.ts b/packages/math/useMin/index.test.ts index 20be08a1fe3..078f00e302d 100644 --- a/packages/math/useMin/index.test.ts +++ b/packages/math/useMin/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { shallowRef } from 'vue' import { useMin } from './index' describe('useMin', () => { @@ -13,9 +13,9 @@ describe('useMin', () => { }) it('should accept refs', () => { - const value1 = ref(10) - const value2 = ref(100) - const value3 = ref(1000) + const value1 = shallowRef(10) + const value2 = shallowRef(100) + const value3 = shallowRef(1000) const v = useMin(value1, value2, value3) expect(v.value).toBe(10) @@ -32,7 +32,7 @@ describe('useMin', () => { it('should accept numbers and refs', () => { const value1 = 10 - const value2 = ref(100) + const value2 = shallowRef(100) const v = useMin(50, value1, value2) diff --git a/packages/math/usePrecision/index.test.ts b/packages/math/usePrecision/index.test.ts index 9d7b63dd876..bda1a4e30a8 100644 --- a/packages/math/usePrecision/index.test.ts +++ b/packages/math/usePrecision/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { usePrecision } from './index' describe('usePrecision', () => { @@ -7,21 +7,21 @@ describe('usePrecision', () => { expect(usePrecision).toBeDefined() }) it('should work', () => { - const base = ref(45.125) + const base = deepRef(45.125) const result = usePrecision(base, 2) expect(result.value).toBe(45.13) base.value = -45.155 expect(result.value).toBe(-45.15) }) it('out ceil should work', () => { - const base = ref(45.125) + const base = deepRef(45.125) const result = usePrecision(base, 2, { math: 'ceil' }) expect(result.value).toMatchInlineSnapshot('45.13') base.value = -45.151 expect(result.value).toMatchInlineSnapshot('-45.15') }) it('out floor should work', () => { - const base = ref(45.129) + const base = deepRef(45.129) const result = usePrecision(base, 2, { math: 'floor' }) expect(result.value).toMatchInlineSnapshot('45.12') base.value = -45.159 diff --git a/packages/math/useProjection/demo.vue b/packages/math/useProjection/demo.vue index 7bd22394a0d..7c33518f9fa 100644 --- a/packages/math/useProjection/demo.vue +++ b/packages/math/useProjection/demo.vue @@ -1,10 +1,10 @@ diff --git a/packages/math/useProjection/index.test.ts b/packages/math/useProjection/index.test.ts index 5908a119db2..2a7970e5db2 100644 --- a/packages/math/useProjection/index.test.ts +++ b/packages/math/useProjection/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { isRef, ref } from 'vue' +import { isRef, shallowRef } from 'vue' import { useProjection } from './index' describe('useProjection', () => { @@ -8,7 +8,7 @@ describe('useProjection', () => { }) it('returns a ref', () => { - expect(isRef(useProjection(ref(5), [0, 10], [0, 100]))).toBe(true) + expect(isRef(useProjection(shallowRef(5), [0, 10], [0, 100]))).toBe(true) }) it('projects correctly', () => { @@ -18,7 +18,7 @@ describe('useProjection', () => { }) it('is reactive', () => { - const inputRef = ref(5) + const inputRef = shallowRef(5) const projection = useProjection(inputRef, [0, 10], [0, 100]) expect(isRef(projection)).toBe(true) diff --git a/packages/math/useRound/index.test.ts b/packages/math/useRound/index.test.ts index bc0f0cec027..cd164a4ac97 100644 --- a/packages/math/useRound/index.test.ts +++ b/packages/math/useRound/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { useRound } from './index' describe('useRound', () => { @@ -7,7 +7,7 @@ describe('useRound', () => { expect(useRound).toBeDefined() }) it('should work', () => { - const base = ref(20.49) + const base = deepRef(20.49) const result = useRound(base) expect(result.value).toBe(20) base.value = -20.51 diff --git a/packages/math/useSum/index.test.ts b/packages/math/useSum/index.test.ts index e29fa9ec950..0ce672ac385 100644 --- a/packages/math/useSum/index.test.ts +++ b/packages/math/useSum/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef, shallowRef } from 'vue' import { useSum } from './index' describe('useSum', () => { @@ -8,7 +8,7 @@ describe('useSum', () => { }) it('array usage', () => { - const array = ref([1, 2, 3, 4]) + const array = deepRef([1, 2, 3, 4]) const sum = useSum(array) expect(sum.value).toBe(10) array.value = [-1, -2, 3, 4] @@ -16,8 +16,8 @@ describe('useSum', () => { }) it('rest usage', () => { - const a = ref(1) - const b = ref(2) + const a = shallowRef(1) + const b = shallowRef(2) const sum = useSum(a, () => b.value, 3) expect(sum.value).toBe(6) b.value = 3 diff --git a/packages/math/useTrunc/index.test.ts b/packages/math/useTrunc/index.test.ts index b98dd3c457a..4899d83a547 100644 --- a/packages/math/useTrunc/index.test.ts +++ b/packages/math/useTrunc/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { ref } from 'vue' +import { ref as deepRef } from 'vue' import { useTrunc } from './index' // Returns: @@ -19,7 +19,7 @@ describe('useTrunk', () => { expect(useTrunc).toBeDefined() }) it('should work', () => { - const base = ref(1.95) + const base = deepRef(1.95) const result = useTrunc(base) expect(result.value).toBe(1) base.value = -7.004 diff --git a/packages/router/useRouteHash/index.test.ts b/packages/router/useRouteHash/index.test.ts index 8ed7c492c6c..ddf49a190a5 100644 --- a/packages/router/useRouteHash/index.test.ts +++ b/packages/router/useRouteHash/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it, vi } from 'vitest' -import { computed, nextTick, reactive, ref, watch } from 'vue' +import { computed, nextTick, reactive, shallowRef, watch } from 'vue' import { useRouteHash } from './index' describe('useRouteHash', () => { @@ -100,7 +100,7 @@ describe('useRouteHash', () => { let route = getRoute() const router = { replace: (r: any) => route = r } as any - const defaultTarget = ref('foo') + const defaultTarget = shallowRef('foo') const target = useRouteHash(defaultTarget, { route, router }) diff --git a/packages/router/useRouteParams/index.test.ts b/packages/router/useRouteParams/index.test.ts index 6f8cccd016b..e88c7e4422f 100644 --- a/packages/router/useRouteParams/index.test.ts +++ b/packages/router/useRouteParams/index.test.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { describe, expect, it, vi } from 'vitest' -import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue' +import { computed, ref as deepRef, effectScope, nextTick, reactive, shallowRef, watch } from 'vue' import { useRouteParams } from './index' describe('useRouteParams', () => { @@ -169,10 +169,10 @@ describe('useRouteParams', () => { const scopeA = effectScope() const scopeB = effectScope() - let page: Ref = ref(null) - let lang: Ref = ref(null) - let code: Ref = ref(null) - let slug: Ref = ref(null) + let page: Ref = deepRef(null) + let lang: Ref = deepRef(null) + let code: Ref = deepRef(null) + let slug: Ref = deepRef(null) await scopeA.run(async () => { page = useRouteParams('page', null, { route, router }) @@ -228,12 +228,12 @@ describe('useRouteParams', () => { route.params.page = 2 const defaultPage = 'DEFAULT_PAGE' - let page1: Ref = ref(null) + let page1: Ref = deepRef(null) await scopeA.run(async () => { page1 = useRouteParams('page', defaultPage, { route, router }) }) - let page2: Ref = ref(null) + let page2: Ref = deepRef(null) await scopeB.run(async () => { page2 = useRouteParams('page', defaultPage, { route, router }) }) @@ -344,7 +344,7 @@ describe('useRouteParams', () => { let route = getRoute() const router = { replace: (r: any) => route = r } as any - const defaultPage = ref(1) + const defaultPage = shallowRef(1) const defaultLang = () => 'pt-BR' const page: Ref = useRouteParams('page', defaultPage, { route, router }) diff --git a/packages/router/useRouteQuery/index.test.ts b/packages/router/useRouteQuery/index.test.ts index b1636f1e4fd..ef8d393d4e7 100644 --- a/packages/router/useRouteQuery/index.test.ts +++ b/packages/router/useRouteQuery/index.test.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { describe, expect, it, vi } from 'vitest' -import { computed, effectScope, nextTick, reactive, ref, toValue, watch } from 'vue' +import { computed, ref as deepRef, effectScope, nextTick, reactive, shallowRef, toValue, watch } from 'vue' import { useRouteQuery } from './index' describe('useRouteQuery', () => { @@ -157,10 +157,10 @@ describe('useRouteQuery', () => { const scopeA = effectScope() const scopeB = effectScope() - let page: Ref = ref(null) - let lang: Ref = ref(null) - let code: Ref = ref(null) - let search: Ref = ref(null) + let page: Ref = deepRef(null) + let lang: Ref = deepRef(null) + let code: Ref = deepRef(null) + let search: Ref = deepRef(null) await scopeA.run(async () => { page = useRouteQuery('page', null, { route, router }) @@ -215,12 +215,12 @@ describe('useRouteQuery', () => { route.query.page = 2 const defaultPage = 'DEFAULT_PAGE' - let page1: Ref = ref(null) + let page1: Ref = deepRef(null) await scopeA.run(async () => { page1 = useRouteQuery('page', defaultPage, { route, router }) }) - let page2: Ref = ref(null) + let page2: Ref = deepRef(null) await scopeB.run(async () => { page2 = useRouteQuery('page', defaultPage, { route, router }) }) @@ -374,7 +374,7 @@ describe('useRouteQuery', () => { let route = getRoute() const router = { replace: (r: any) => route = r } as any - const defaultPage = ref(1) + const defaultPage = shallowRef(1) const defaultLang = () => 'pt-BR' const page: Ref = useRouteQuery('page', defaultPage, { route, router }) diff --git a/packages/rxjs/from/_demo.vue b/packages/rxjs/from/_demo.vue index def4af660c3..bef6b61c2f5 100644 --- a/packages/rxjs/from/_demo.vue +++ b/packages/rxjs/from/_demo.vue @@ -7,13 +7,13 @@ import { takeUntil, withLatestFrom, } from 'rxjs/operators' -import { ref } from 'vue' +import { ref as deepRef, shallowRef } from 'vue' import { toObserver } from '../toObserver' import { useSubscription } from '../useSubscription' import { from, fromEvent } from './index' -const count = ref(0) -const button = ref(null) +const count = shallowRef(0) +const button = deepRef(null) useSubscription( interval(1000) diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue index 0f0368681cb..c8f1e4658b8 100644 --- a/packages/rxjs/toObserver/_demo.vue +++ b/packages/rxjs/toObserver/_demo.vue @@ -8,13 +8,13 @@ import { takeUntil, withLatestFrom, } from 'rxjs/operators' -import { ref } from 'vue' +import { ref as deepRef, shallowRef } from 'vue' import { from, fromEvent } from '../from' import { useSubscription } from '../useSubscription' import { toObserver } from './index' -const count = ref(0) -const button = ref(null) +const count = shallowRef(0) +const button = deepRef(null) useSubscription( interval(1000) diff --git a/packages/rxjs/useExtractedObservable/_demo.vue b/packages/rxjs/useExtractedObservable/_demo.vue index 65ba9f52c01..6a1a8414a12 100644 --- a/packages/rxjs/useExtractedObservable/_demo.vue +++ b/packages/rxjs/useExtractedObservable/_demo.vue @@ -1,10 +1,10 @@