refactor: VueUse を導入

Author: uni-kakurenbo

package-lock.json

@@ -33,6 +33,7 @@
     "@shiguredo/virtual-background": "^2023.2.0",
     "@traptitech/traq": "^3.26.1-1",
     "@traptitech/traq-markdown-it": "^7.0.2",
+    "@vueuse/core": "^14.1.0",
     "autosize": "^6.0.1",
     "browser-image-compression": "^2.0.2",
     "cropperjs": "^1.6.2",

package.json

@@ -27,8 +27,9 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
+
 import AIcon from '/@/components/UI/AIcon.vue'
-import useEventListener from '/@/composables/dom/useEventListener'
 import type { Point } from '/@/lib/basic/point'
 import { randomString } from '/@/lib/basic/randomString'
 

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

@@ -53,7 +53,6 @@ import useAttachments from '/@/components/Main/MainView/MessageInput/composables
 import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
 import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
 import { countLength } from '/@/lib/basic/string'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import { getResizedFile } from '/@/lib/resize'
 import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
 import { useToastStore } from '/@/store/ui/toast'
@@ -166,14 +165,12 @@ const { isModifierKeyPressed, onModifierKeyDown, onModifierKeyUp } =
 const textareaComponentRef =
   shallowRef<InstanceType<typeof MessageInputTextArea>>()
 
-const textareaElement = computed(() =>
-  unrefElement(textareaComponentRef.value?.textareaAutosizeRef)
-)
+const textareaRef = computed(() => textareaComponentRef.value?.textareaRef)
 
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   text,
-  textareaElement,
+  textareaRef,
   containerEle
 )
 
@@ -185,7 +182,7 @@ const {
 } = useAttachmentsEditor(props, text)
 
 onMounted(() => {
-  textareaElement.value?.focus()
+  textareaRef.value?.focus()
 })
 </script>
 

src/components/Main/MainView/MessageElement/MessageEditor.vue

@@ -74,7 +74,6 @@ import useFocus from '/@/composables/dom/useFocus'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
 import useResponsive from '/@/composables/useResponsive'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -164,7 +163,7 @@ const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => unrefElement(textareaComponentRef.value?.textareaAutosizeRef)),
+  computed(() => textareaComponentRef.value?.textareaRef),
   containerEle
 )
 

src/components/Main/MainView/MessageInput/MessageInput.vue

@@ -37,14 +37,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
 import useInsertText from '/@/composables/dom/useInsertText'
 import useResponsive from '/@/composables/useResponsive'
 import { isFirefox } from '/@/lib/dom/browser'
 import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
-import { unrefElement } from '/@/lib/dom/unrefElement'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import DropdownSuggester from './DropdownSuggester/DropdownSuggester.vue'
@@ -93,10 +92,12 @@ const firefoxFlag = isFirefox()
 
 const { isMobile } = useResponsive()
 
-const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
-const textareaRef = computed(() => unrefElement(textareaAutosizeRef))
+const textareaAutosizeRef = shallowRef<InstanceType<typeof TextareaAutosize>>()
+const textareaRef = computed(
+  () => textareaAutosizeRef.value?.textareaEle ?? undefined
+)
 
-defineExpose({ textareaAutosizeRef })
+defineExpose({ textareaRef, textareaAutosizeRef })
 
 const { insertText } = useInsertText(textareaRef)
 const { onPaste } = usePaste(emit, insertText)

src/components/Main/MainView/MessageInput/MessageInputTextArea.vue

@@ -37,9 +37,9 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useEventListener } from '@vueuse/core'
 import { throttle } from 'throttle-debounce'
 
-import useEventListener from '/@/composables/dom/useEventListener'
 import { useOpenLink } from '/@/composables/useOpenLink'
 import { embeddingOrigin } from '/@/lib/apis'
 import { toggleSpoiler } from '/@/lib/markdown/spoiler'

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

@@ -1,6 +1,7 @@
 import { computed, onUnmounted, ref } from 'vue'
 
-import useInnerWindowSize from '/@/composables/dom/useInnerWindowSize'
+import { useWindowSize } from '@vueuse/core'
+
 import { createAnimationFrameController } from '/@/lib/dom/animationFrame'
 import {
   MAX_NAVIGATION_WIDTH_RATIO,
@@ -12,9 +13,7 @@ import {
 const useNavigationResizer = () => {
   const animationFrame = createAnimationFrameController()
 
-  const { width: windowWidth } = useInnerWindowSize({
-    fallback: { width: Infinity }
-  })
+  const { width: windowWidth } = useWindowSize({ initialWidth: Infinity })
 
   const {
     resizerRef,

src/components/Main/NavigationBar/composables/useNavigationResizer.ts

@@ -28,7 +28,8 @@
 import { computed, reactive, readonly, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import useToggle from '/@/composables/utils/useToggle'
 
 const popupNavigatorButtonId = 'popup-navigation-button'
@@ -48,8 +49,8 @@ const useWindowPointer = (
   },
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  useEventListener(window, 'pointerdown', onPointerDown, options)
-  useEventListener(window, 'pointerup', onPointerUp, options)
+  useEventListener('pointerdown', onPointerDown, options)
+  useEventListener('pointerup', onPointerUp, options)
 }
 
 /**

src/components/Main/PopupNavigatior/PopupNavigator.vue

@@ -9,7 +9,8 @@ import {
   shallowRef
 } from 'vue'
 
-import useEventListener from '/@/composables/dom/useEventListener'
+import { useEventListener } from '@vueuse/core'
+
 import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useModalStore } from '/@/store/ui/modal'
 
@@ -54,7 +55,7 @@ export default defineComponent({
     clickOutside: (_e: PointerEvent) => true
   },
   setup(props, { slots, emit }) {
-    const element = shallowRef<Element | ComponentPublicInstance>()
+    const element = shallowRef<HTMLElement | ComponentPublicInstance>()
 
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)