From 5023faae2c8783743fe915160578f61833053512 Mon Sep 17 00:00:00 2001 From: Young Date: Tue, 6 Sep 2022 21:51:41 +0800 Subject: [PATCH 1/3] feat(useMediaQuery): allow query to be a `ref` --- packages/core/useMediaQuery/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/core/useMediaQuery/index.ts b/packages/core/useMediaQuery/index.ts index e1c92de5711..818840e3fd9 100644 --- a/packages/core/useMediaQuery/index.ts +++ b/packages/core/useMediaQuery/index.ts @@ -1,6 +1,7 @@ /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */ -import { ref } from 'vue-demi' +import { ref, unref, watchEffect } from 'vue-demi' +import type { MaybeRef } from '@vueuse/shared' import { tryOnBeforeMount, tryOnScopeDispose } from '@vueuse/shared' import type { ConfigurableWindow } from '../_configurable' import { defaultWindow } from '../_configurable' @@ -13,7 +14,7 @@ import { useSupported } from '../useSupported' * @param query * @param options */ -export function useMediaQuery(query: string, options: ConfigurableWindow = {}) { +export function useMediaQuery(query: MaybeRef, options: ConfigurableWindow = {}) { const { window = defaultWindow } = options const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window!.matchMedia === 'function') @@ -24,13 +25,12 @@ export function useMediaQuery(query: string, options: ConfigurableWindow = {}) { if (!isSupported.value) return if (!mediaQuery) - mediaQuery = window!.matchMedia(query) + mediaQuery = window!.matchMedia(unref(query)) matches.value = mediaQuery.matches } + watchEffect(update) tryOnBeforeMount(() => { - update() - if (!mediaQuery) return From c109bba74e147e20692eb0b39d25386427127fd7 Mon Sep 17 00:00:00 2001 From: Young Date: Tue, 6 Sep 2022 22:19:14 +0800 Subject: [PATCH 2/3] fix: fix wrong logic --- packages/core/useMediaQuery/index.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/core/useMediaQuery/index.ts b/packages/core/useMediaQuery/index.ts index 818840e3fd9..a90a83b0050 100644 --- a/packages/core/useMediaQuery/index.ts +++ b/packages/core/useMediaQuery/index.ts @@ -1,8 +1,8 @@ /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */ -import { ref, unref, watchEffect } from 'vue-demi' -import type { MaybeRef } from '@vueuse/shared' -import { tryOnBeforeMount, tryOnScopeDispose } from '@vueuse/shared' +import { ref, watchEffect } from 'vue-demi' +import type { MaybeComputedRef } from '@vueuse/shared' +import { resolveRef, tryOnBeforeMount, tryOnScopeDispose } from '@vueuse/shared' import type { ConfigurableWindow } from '../_configurable' import { defaultWindow } from '../_configurable' import { useSupported } from '../useSupported' @@ -14,7 +14,7 @@ import { useSupported } from '../useSupported' * @param query * @param options */ -export function useMediaQuery(query: MaybeRef, options: ConfigurableWindow = {}) { +export function useMediaQuery(query: MaybeComputedRef, options: ConfigurableWindow = {}) { const { window = defaultWindow } = options const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window!.matchMedia === 'function') @@ -24,8 +24,7 @@ export function useMediaQuery(query: MaybeRef, options: ConfigurableWind const update = () => { if (!isSupported.value) return - if (!mediaQuery) - mediaQuery = window!.matchMedia(unref(query)) + mediaQuery = window!.matchMedia(resolveRef(query).value) matches.value = mediaQuery.matches } watchEffect(update) From 7f7ba1bdbb8200d64746b0820c87767a13be5951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Tue, 6 Sep 2022 23:07:52 +0800 Subject: [PATCH 3/3] refactor: reactive cleanup --- packages/core/useMediaQuery/index.ts | 35 ++++++++++++++++------------ 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/core/useMediaQuery/index.ts b/packages/core/useMediaQuery/index.ts index a90a83b0050..1c8a172c914 100644 --- a/packages/core/useMediaQuery/index.ts +++ b/packages/core/useMediaQuery/index.ts @@ -2,7 +2,7 @@ import { ref, watchEffect } from 'vue-demi' import type { MaybeComputedRef } from '@vueuse/shared' -import { resolveRef, tryOnBeforeMount, tryOnScopeDispose } from '@vueuse/shared' +import { resolveRef, tryOnScopeDispose } from '@vueuse/shared' import type { ConfigurableWindow } from '../_configurable' import { defaultWindow } from '../_configurable' import { useSupported } from '../useSupported' @@ -16,36 +16,41 @@ import { useSupported } from '../useSupported' */ export function useMediaQuery(query: MaybeComputedRef, options: ConfigurableWindow = {}) { const { window = defaultWindow } = options - const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window!.matchMedia === 'function') + const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window.matchMedia === 'function') let mediaQuery: MediaQueryList | undefined const matches = ref(false) + const cleanup = () => { + if (!mediaQuery) + return + if ('removeEventListener' in mediaQuery) + // eslint-disable-next-line @typescript-eslint/no-use-before-define + mediaQuery.removeEventListener('change', update) + else + // @ts-expect-error deprecated API + // eslint-disable-next-line @typescript-eslint/no-use-before-define + mediaQuery.removeListener(update) + } + const update = () => { if (!isSupported.value) return + + cleanup() + mediaQuery = window!.matchMedia(resolveRef(query).value) matches.value = mediaQuery.matches - } - watchEffect(update) - - tryOnBeforeMount(() => { - if (!mediaQuery) - return if ('addEventListener' in mediaQuery) mediaQuery.addEventListener('change', update) else // @ts-expect-error deprecated API mediaQuery.addListener(update) + } + watchEffect(update) - tryOnScopeDispose(() => { - if ('removeEventListener' in mediaQuery!) - mediaQuery!.removeEventListener('change', update) - else - mediaQuery!.removeListener(update) - }) - }) + tryOnScopeDispose(() => cleanup()) return matches }