Use event listener composition

[stackoverfloweth]

useEventListener

The useEventListener composition can be used to automatically handle setup and teardown of event listeners on the document or HTMElement scope. The options argument extends browser AddEventListenerOptions with immediate boolean, which defaults to true but when passed in as false, will prevent the composition from adding the listener automatically.

Example

import { useEventListener } from '@prefecthq/vue-compositions'

function handleEvent(event: MouseEvent) {
  // Respond to event
}
const element = ref<HTMLDivElement | undefined>()
useEventListener(element, 'keyup', handleEvent)

Arguments

Name	Type	Default
type	K (K extends keyof DocumentEventMap)	None
callback	(this: Document, event: DocumentEventMap[K]) => unknown	None
options	AddEventListenerOptions & { immediate: boolean }	None

Returns

Name	Type	Description
add	() => void	Manually attach the event listener (has no effect if the event listener already exists)
remove	() => void	Manually detach the event listener

[stackoverfloweth]

this PR also adds Vue 3.3 shims and updates useGlobalEventListener to simply wrap new useEventListener with document as target.

[pleek91]

Couple questions but overall this is sweet!

[pleek91]

Could you use tryOnScopeDispose for this?

[pleek91]

I think this needs to be a little more sophisticated. If immediate is false I think this might add the listener anyway. Similar if remove is called but then the target changes this will automatically add the listener back.

[stackoverfloweth]

I think I have a better, more elegant solution but it now seems to warrant some unit tests. Let me get some good tests written and I'll update this PR

[pleek91]

Couple questions about the tests but overall looks really good to me 👍

[pleek91]

Why is this needed? Won't toValue already return the initial value?

[stackoverfloweth]

wow, this is so obvious in retrospect. Check out the updated tests, I think you'll find them significantly more concise

[pleek91]

❤️