fix(useMouse): check for MouseEvent instead of Touch to work with FF (#4457)

OrbisK · antfu · web-flow · commit ce9e5d7f25ac · 2025-02-12T03:30:39.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "build": "nr update && pnpm -r run build",
     "build:redirects": "tsx scripts/redirects.ts",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:types": "vue-tsc --emitDeclarationOnly",
     "clean": "tsx scripts/clean.ts",
     "dev": "nr update && nr docs",
     "docs": "vitepress dev packages --open",
diff --git a/packages/core/useMouse/demo.browser.test.ts b/packages/core/useMouse/demo.browser.test.ts
@@ -0,0 +1,10 @@
+import { page } from '@vitest/browser/context'
+import { describe, expect, it } from 'vitest'
+import Demo from './demo.vue'
+
+describe('useMouse Demo', () => {
+  it('should render', async () => {
+    const screen = page.render(Demo)
+    await expect.element(screen.baseElement).toBeInTheDocument()
+  })
+})
diff --git a/packages/core/useMouse/demo.vue b/packages/core/useMouse/demo.vue
@@ -9,11 +9,11 @@ const parentEl = useParentElement()
 const mouseDefault = reactive(useMouse())
 const textDefault = stringify(mouseDefault)
 
-const extractor: UseMouseEventExtractor = (e) => {
-  if (typeof Touch !== 'undefined' && e instanceof Touch)
+const extractor: UseMouseEventExtractor = (event) => {
+  if (event instanceof MouseEvent)
+    return [event.offsetX, event.offsetY]
+  else
     return null
-  const event = e as MouseEvent
-  return [event.offsetX, event.offsetY]
 }
 
 const mouseWithExtractor = reactive(useMouse({ target: parentEl, type: extractor }))
diff --git a/packages/core/useMouse/index.md b/packages/core/useMouse/index.md
@@ -34,9 +34,9 @@ import { useMouse, useParentElement } from '@vueuse/core'
 const parentEl = useParentElement()
 
 const extractor: UseMouseEventExtractor = event => (
-  event instanceof Touch
-    ? null
-    : [event.offsetX, event.offsetY]
+  event instanceof MouseEvent
+    ? [event.offsetX, event.offsetY]
+    : null
 )
 
 const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
diff --git a/packages/core/useMouse/index.ts b/packages/core/useMouse/index.ts
@@ -55,9 +55,9 @@ const UseMouseBuiltinExtractors: Record<UseMouseCoordType, UseMouseEventExtracto
   page: event => [event.pageX, event.pageY],
   client: event => [event.clientX, event.clientY],
   screen: event => [event.screenX, event.screenY],
-  movement: event => (event instanceof Touch
-    ? null
-    : [event.movementX, event.movementY]
+  movement: event => (event instanceof MouseEvent
+    ? [event.movementX, event.movementY]
+    : null
   ),
 } as const
 
diff --git a/packages/core/usePointerLock/demo.browser.test.ts b/packages/core/usePointerLock/demo.browser.test.ts
@@ -0,0 +1,19 @@
+import { page, userEvent } from '@vitest/browser/context'
+import { describe, expect, it, vi } from 'vitest'
+import Demo from './demo.vue'
+
+describe('usePointerLock Demo', () => {
+  it('should render', async () => {
+    const screen = page.render(Demo)
+    await expect.element(screen.baseElement).toBeInTheDocument()
+  })
+
+  it('should not throw error when click or hover', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error')
+    const screen = page.render(Demo)
+    await userEvent.hover(screen.baseElement)
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+    await userEvent.click(screen.baseElement)
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/core/usePointerLock/index.ts b/packages/core/usePointerLock/index.ts
@@ -1,5 +1,5 @@
 import type { ConfigurableDocument } from '../_configurable'
-import type { MaybeElementRef } from '../unrefElement'
+import type { MaybeElement, MaybeElementRef } from '../unrefElement'
 import { until } from '@vueuse/shared'
 import { ref } from 'vue'
 import { defaultDocument } from '../_configurable'
@@ -13,8 +13,6 @@ import { useSupported } from '../useSupported'
 //   }
 // }
 
-type MaybeHTMLElement = HTMLElement | undefined | null
-
 export interface UsePointerLockOptions extends ConfigurableDocument {
   // pointerLockOptions?: PointerLockOptions
 }
@@ -26,24 +24,24 @@ export interface UsePointerLockOptions extends ConfigurableDocument {
  * @param target
  * @param options
  */
-export function usePointerLock(target?: MaybeElementRef<MaybeHTMLElement>, options: UsePointerLockOptions = {}) {
+export function usePointerLock(target?: MaybeElementRef, options: UsePointerLockOptions = {}) {
   const { document = defaultDocument } = options
 
   const isSupported = useSupported(() => document && 'pointerLockElement' in document)
 
-  const element = ref<MaybeHTMLElement>()
+  const element = ref<MaybeElement>()
 
-  const triggerElement = ref<MaybeHTMLElement>()
+  const triggerElement = ref<MaybeElement>()
 
-  let targetElement: MaybeHTMLElement
+  let targetElement: MaybeElement
 
   if (isSupported.value) {
     const listenerOptions = { passive: true }
 
     useEventListener(document, 'pointerlockchange', () => {
       const currentElement = document!.pointerLockElement ?? element.value
       if (targetElement && currentElement === targetElement) {
-        element.value = document!.pointerLockElement as MaybeHTMLElement
+        element.value = document!.pointerLockElement as MaybeElement
         if (!element.value)
           targetElement = triggerElement.value = null
       }
@@ -59,7 +57,7 @@ export function usePointerLock(target?: MaybeElementRef<MaybeHTMLElement>, optio
   }
 
   async function lock(
-    e: MaybeElementRef<MaybeHTMLElement> | Event,
+    e: MaybeElementRef | Event,
     // options?: PointerLockOptions,
   ) {
     if (!isSupported.value)
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -1,7 +1,11 @@
 import { resolve } from 'node:path'
+import vue from '@vitejs/plugin-vue'
 import { coverageConfigDefaults, defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  plugins: [
+    vue(),
+  ],
   resolve: {
     alias: {
       '@vueuse/shared': resolve(import.meta.dirname, 'packages/shared/index.ts'),
