feat: create use-event-listener hook

Author: codebender828

packages/utils/src/configurable.ts

@@ -0,0 +1,3 @@
+import { canUseDOM } from "@chakra-ui/utils"
+
+export const defaultWindow = canUseDOM() ? window : null

packages/utils/src/index.ts

@@ -5,3 +5,5 @@ export * from "./dom-query"
 export * from "./types"
 export * from "./timers"
 export * from "./props"
+export * from "./scope"
+export * from "./configurable"

packages/utils/src/scope.ts

@@ -0,0 +1,15 @@
+import { getCurrentScope, onScopeDispose } from "vue"
+import { Fn } from "./types"
+
+/**
+ * Invokes onScopeDispose() if it's inside a effect scope lifecycle, if not, do nothing
+ *
+ * @param fn
+ */
+export function tryOnScopeDispose(fn: Fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn)
+    return true
+  }
+  return false
+}

packages/utils/src/types.ts

@@ -10,7 +10,17 @@ import { TemplateRef } from "./dom"
  */
 export type MaybeRef<T> = T | Ref<T> | ComputedRef<T>
 
+/**
+ * May be a simple ref (nor computed ref)
+ */
+export type MaybeBaseRef<T> = T | Ref<T>
+
 /** VNodeProps Object */
 export interface MergedVNodeProps extends VNodeProps {
   ref: TemplateRef | ((el: TemplateRef | null) => void)
 }
+
+/**
+ * Any function
+ */
+export type Fn = () => void

packages/vue-composables/src/use-event-listener.ts

@@ -0,0 +1,133 @@
+/**
+ * Much of this has ben adopted from the cgood folks at @vueuse/core
+ */
+
+import { unref, watch } from "vue"
+import { isString, noop } from "@chakra-ui/utils"
+import {
+  Fn,
+  MaybeBaseRef,
+  defaultWindow,
+  tryOnScopeDispose,
+} from "@chakra-ui/vue-utils"
+
+interface InferEventTarget<Events> {
+  addEventListener(event: Events, fn?: any, options?: any): any
+  removeEventListener(event: Events, fn?: any, options?: any): any
+}
+
+export type WindowEventName = keyof WindowEventMap
+export type DocumentEventName = keyof DocumentEventMap
+
+export type GeneralEventListener<E = Event> = {
+  (evt: E): void
+}
+
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 1: Omitted Window target
+ *
+ * @param event
+ * @param listener
+ * @param options
+ */
+export function useEventListener<E extends keyof WindowEventMap>(
+  event: E,
+  listener: (this: Window, ev: WindowEventMap[E]) => any,
+  options?: boolean | AddEventListenerOptions
+): Fn
+
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 2: Explicitly Window target
+ *
+ * @param target
+ * @param event
+ * @param listener
+ * @param options
+ */
+export function useEventListener<E extends keyof WindowEventMap>(
+  target: Window,
+  event: E,
+  listener: (this: Window, ev: WindowEventMap[E]) => any,
+  options?: boolean | AddEventListenerOptions
+): Fn
+
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 4: Custom event target with event type infer
+ *
+ * @param target
+ * @param event
+ * @param listener
+ * @param options
+ */
+export function useEventListener<Names extends string, EventType = Event>(
+  target: InferEventTarget<Names>,
+  event: Names,
+  listener: GeneralEventListener<EventType>,
+  options?: boolean | AddEventListenerOptions
+): Fn
+
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * Overload 5: Custom event target fallback
+ *
+ * @param target
+ * @param event
+ * @param listener
+ * @param options
+ */
+export function useEventListener<EventType = Event>(
+  target: MaybeBaseRef<EventTarget | null | undefined>,
+  event: string,
+  listener: GeneralEventListener<EventType>,
+  options?: boolean | AddEventListenerOptions
+): Fn
+
+export function useEventListener(...args: any[]) {
+  let target: MaybeBaseRef<EventTarget> | undefined | null
+  let event: string
+  let listener: any
+  let options: any
+
+  if (isString(args[0])) {
+    ;[event, listener, options] = args
+    target = defaultWindow
+  } else {
+    ;[target, event, listener, options] = args
+  }
+
+  if (!target) return noop
+
+  let cleanup = noop
+
+  const stopWatch = watch(
+    () => unref(target),
+    (el) => {
+      cleanup()
+      if (!el) return
+
+      el.addEventListener(event, listener, options)
+
+      cleanup = () => {
+        el.removeEventListener(event, listener, options)
+        cleanup = noop
+      }
+    },
+    { immediate: true, flush: "post" }
+  )
+
+  const stop = () => {
+    stopWatch()
+    cleanup()
+  }
+
+  tryOnScopeDispose(stop)
+
+  return stop
+}