refactor: 既存の実装を useEventListner を用いて簡略化する

- refactor: `MouseEvent` と `TouchEvent` を併用している部分を `PointerEvent` に統合する

Author: uni-kakurenbo

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue

@@ -25,12 +25,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 import ChannelHeaderRelationPopup from './ChannelHeaderRelationPopup.vue'
 import { reactive } from 'vue'
 import type { Point } from '/@/lib/basic/point'
 import { randomString } from '/@/lib/basic/randomString'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const props = defineProps<{
   channelId: string
@@ -68,12 +69,10 @@ const updateTriggerPosition = () => {
   triggerBottomRightPosition.y = rect.bottom
 }
 
+useEventListener(window, 'resize', updateTriggerPosition)
+
 onMounted(() => {
   updateTriggerPosition()
-  window.addEventListener('resize', updateTriggerPosition)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', updateTriggerPosition)
 })
 
 const focusPopup = () => {

src/components/Main/MainView/MessagesScroller/MessagesScroller.vue

@@ -35,14 +35,7 @@
 <script lang="ts">
 import { throttle } from 'throttle-debounce'
 import type { Ref } from 'vue'
-import {
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  shallowRef,
-  watch
-} from 'vue'
+import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
@@ -53,6 +46,7 @@ import { isMessageScrollerRoute, RouteName } from '/@/router'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const LOAD_MORE_THRESHOLD = 10
 
@@ -262,12 +256,8 @@ const visibilitychangeListener = () => {
   }
   emit('resetIsReachedLatest')
 }
-onMounted(() => {
-  document.addEventListener('visibilitychange', visibilitychangeListener)
-})
-onUnmounted(() => {
-  document.removeEventListener('visibilitychange', visibilitychangeListener)
-})
+
+useEventListener(document, 'visibilitychange', visibilitychangeListener)
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)

src/components/Main/PopupNavigatior/PopupNavigator.vue

@@ -25,47 +25,30 @@
 </template>
 
 <script lang="ts">
-import {
-  reactive,
-  shallowRef,
-  watch,
-  computed,
-  onMounted,
-  onUnmounted,
-  readonly
-} from 'vue'
+import { reactive, shallowRef, watch, computed, readonly } from 'vue'
 import { useRouter } from 'vue-router'
 import useToggle from '/@/composables/utils/useToggle'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const popupNavigatorButtonId = 'popup-navigation-button'
 const popupNavigatorId = 'popup-navigator'
 const POPUP_MARGIN = 4
 const LONG_CLICK_DELAY = 150
 
-type MouseTouchEventHandler = (e: MouseEvent | TouchEvent) => void
+type PointerEventHandler = (e: PointerEvent) => void
 
-const useWindowMouseTouch = (
+const useWindowPointer = (
   {
-    onMouseTouchStart,
-    onMouseTouchEnd
+    onPointerDown,
+    onPointerUp
   }: {
-    onMouseTouchStart: MouseTouchEventHandler
-    onMouseTouchEnd: MouseTouchEventHandler
+    onPointerDown: PointerEventHandler
+    onPointerUp: PointerEventHandler
   },
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  onMounted(() => {
-    window.addEventListener('mousedown', onMouseTouchStart, options)
-    window.addEventListener('touchstart', onMouseTouchStart, options)
-    window.addEventListener('mouseup', onMouseTouchEnd, options)
-    window.addEventListener('touchend', onMouseTouchEnd, options)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('mousedown', onMouseTouchStart, options)
-    window.removeEventListener('touchstart', onMouseTouchStart, options)
-    window.removeEventListener('mouseup', onMouseTouchEnd, options)
-    window.removeEventListener('touchend', onMouseTouchEnd, options)
-  })
+  useEventListener(window, 'pointerdown', onPointerDown, options)
+  useEventListener(window, 'pointerup', onPointerUp, options)
 }
 
 /**
@@ -80,7 +63,7 @@ const useIsLongClicking = (
   let timer = 0
   let isClickStarted = false
 
-  const onMouseTouchStart = (e: MouseEvent | TouchEvent) => {
+  const onPointerDown = (e: PointerEvent) => {
     if (!isTarget(e.target)) return
     // スワイプを無効化するため
     e.stopPropagation()
@@ -92,17 +75,16 @@ const useIsLongClicking = (
       onLongClick()
     }, LONG_CLICK_DELAY)
   }
-  const onMouseTouchEnd = (e: MouseEvent | TouchEvent) => {
+
+  const onPointerUp = (e: PointerEvent) => {
     // document.elementFromPointが起きるとレイアウトの計算がかかるので、
     // targetでのmousetouchstartが起きていないなら無視する
     if (!isClickStarted) return
 
     isClickStarted = false
     window.clearTimeout(timer)
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const point = 'changedTouches' in e ? e.changedTouches[0]! : e
-    const target = document.elementFromPoint(point.clientX, point.clientY)
+    const target = document.elementFromPoint(e.clientX, e.clientY)
     if (!isTarget(target)) {
       return
     }
@@ -121,7 +103,7 @@ const useIsLongClicking = (
     }
     isLongClicking = false
   }
-  return { onMouseTouchStart, onMouseTouchEnd }
+  return { onPointerDown, onPointerUp }
 }
 
 const useNavigator = (emit: (name: 'clickIcon') => void) => {
@@ -155,22 +137,23 @@ const useNavigator = (emit: (name: 'clickIcon') => void) => {
     hidePopupNavigator()
   }
 
-  const { onMouseTouchStart, onMouseTouchEnd } = useIsLongClicking(
+  const { onPointerDown, onPointerUp } = useIsLongClicking(
     isTarget,
     showPopupNavigator,
     () => {
       emit('clickIcon')
     }
   )
-  useWindowMouseTouch(
+
+  useWindowPointer(
     {
-      onMouseTouchStart: e => {
+      onPointerDown: e => {
         if (!isPopup(e.target)) {
           hidePopupNavigator()
         }
-        onMouseTouchStart(e)
+        onPointerDown(e)
       },
-      onMouseTouchEnd
+      onPointerUp
     },
     // capture=trueなのはstopPropergationでスワイプを無効化するため
     { capture: true, passive: true }

src/components/UI/ClickOutside.ts

@@ -2,16 +2,14 @@ import type { ComponentPublicInstance, VNode } from 'vue'
 import {
   cloneVNode,
   Comment,
+  computed,
   defineComponent,
-  onBeforeUnmount,
-  onMounted,
   ref,
   shallowRef,
-  Text,
-  watch
+  Text
 } from 'vue'
-import { isIOS } from '/@/lib/dom/browser'
 import { useModalStore } from '/@/store/ui/modal'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 /**
  * コメントや文字列のVNodeを取り除く
@@ -25,9 +23,6 @@ const filterChildren = <T extends VNode>(vnodes: T[]) =>
     return true
   })
 
-const startEventName = isIOS() ? 'touchstart' : 'mousedown'
-const endEventName = isIOS() ? 'touchend' : 'mouseup'
-
 /**
  * そのデフォルトスロットに指定した要素の外でクリックされたときにclickOutsideイベントを発火する
  */
@@ -61,9 +56,8 @@ export default defineComponent({
 
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)
-    let listening = false
 
-    const onMouseDown = (e: MouseEvent | TouchEvent) => {
+    const onPointerDown = (e: MouseEvent | TouchEvent) => {
       if (!element.value) return
 
       if (props.unableWhileModalOpen && shouldShowModal.value) return
@@ -80,7 +74,8 @@ export default defineComponent({
         e.stopPropagation()
       }
     }
-    const onMouseUp = (e: MouseEvent | TouchEvent) => {
+
+    const onPointerUp = (e: MouseEvent | TouchEvent) => {
       if (!isMouseDown.value) return
       isMouseDown.value = false
 
@@ -101,33 +96,11 @@ export default defineComponent({
       }
     }
 
-    const addListeners = () => {
-      if (listening) return
-      window.addEventListener(startEventName, onMouseDown, { capture: true })
-      window.addEventListener(endEventName, onMouseUp, { capture: true })
-      listening = true
-    }
-    const removeListeners = () => {
-      if (!listening) return
-      window.removeEventListener(startEventName, onMouseDown, { capture: true })
-      window.removeEventListener(endEventName, onMouseUp, { capture: true })
-      listening = false
-    }
+    const target = computed(() => (props.enabled ? window : null))
+    const listenerOptions = { capture: true }
 
-    onMounted(() => {
-      if (props.enabled) addListeners()
-    })
-    onBeforeUnmount(() => {
-      removeListeners()
-    })
-
-    watch(
-      () => props.enabled,
-      enabled => {
-        if (enabled) addListeners()
-        else removeListeners()
-      }
-    )
+    useEventListener(target, 'pointerdown', onPointerDown, listenerOptions)
+    useEventListener(target, 'pointerup', onPointerUp, listenerOptions)
 
     return () => {
       if (!slots['default']) {

src/components/UI/TextareaAutosize.vue

@@ -21,6 +21,7 @@
 import autosize from 'autosize'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import useOnInput from '/@/composables/useOnInput'
+import useEventListener from '/@/composables/dom/useEventListener'
 
 const modelValue = defineModel<string>({
   required: true
@@ -58,12 +59,13 @@ const autosizeUpdateTextarea = async () => {
   }
 }
 
+useEventListener(textareaEle, 'autosize:resized', () => {
+  emit('autosize-updated')
+})
+
 onMounted(() => {
   if (textareaEle.value) {
     autosize(textareaEle.value)
-    textareaEle.value.addEventListener('autosize:resized', () => {
-      emit('autosize-updated')
-    })
   }
 })
 watch([modelValue], autosizeUpdateTextarea)