25 - useMouse - TS (With proper types + generic)

[sky0matic]

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// Implement ...
function useEventListener<E extends Event>(target: EventTarget, event: keyof DocumentEventMap, callback: (event: E) => void) {
  onMounted(() => target.addEventListener(event, callback));
  onUnmounted(() => target.removeEventListener(event, callback));
}

// Implement ...
function useMouse() {
  const x = ref(0);
  const y = ref(0);

  useEventListener<MouseEvent>(window, 'mousemove', event => {
    x.value = event.x;
    y.value = event.y;
  });

  return { x, y };
}
const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>