Add TS support for attaching events to the window object when using u…

…seNativeEvent

README.md

@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `domEl` | `HTMLElement` | The DOM element to attach the event listener to. |
+| `domEl` | `HTMLElement` or `Window & typeof globalThis` | The DOM element or window to attach the event listener to. |
 | `event` | `string` | The name of the native event (e.g. `resize`). |
 | `listener` | `EventListenerOrEventListenerObject` | The event handler function to attach. This is the same type as the browser API [`addEventListener.listener` parameter](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback). |
 | `options` | `boolean`, `AddEventListenerOptions` or `undefined` | Optional. This is the same type as the browser API [`addEventListener.options` parameter](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options). |
@@ -148,6 +148,9 @@ The following debounce behavior modes are available via the `DebounceMode` enum.
 
 ## Release Notes
 
+### v1.3.0
+  * Add TS support for attaching events to the window object when using `useNativeEvent`.
+
 ### v1.2.0
   * Add debug logging level
   * Additional source documentation

cspell.json

@@ -24,6 +24,7 @@
     "shiki",
     "showcolumnselection",
     "typecheck",
+    "typeof",
     "vitest",
     "vnode",
     "vuejs",

lib/composables/useDebounce.spec.ts

@@ -2,7 +2,6 @@ import { expect, test, describe } from 'vitest'
 // import { expectTimestampCloseEnough } from '../../test-util/timestampUtil'
 import { useDebounce, DebounceMode } from './useDebounce'
 import { log } from '../logger'
-import { nativeEventVueOptions } from '../NativeEventVue'
 
 interface DebounceTestCall {
   delay: number

lib/composables/useNativeEvent.ts

@@ -8,7 +8,7 @@ export type NativeEvent = { destroy: () => void } | undefined
 
 /**
  * Composable to attach an HTML native event to an element.
- * @param domEl The DOM element to attach the event listener to.
+ * @param domEl The DOM element or window to attach the event listener to.
  * @param event The name of the native event (e.g. `resize`).
  * @param listener The event handler function to attach. This is the same type as the browser
  * API [`addEventListener.listener` parameter](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback).
@@ -19,7 +19,7 @@ export type NativeEvent = { destroy: () => void } | undefined
  * @returns {@link NativeEvent} object with a destroy method to remove the event listener.
  */
 export function useNativeEvent(
-  domEl: HTMLElement,
+  domEl: HTMLElement | (Window & typeof globalThis),
   event: string,
   listener: EventListenerOrEventListenerObject,
   options?: boolean | AddEventListenerOptions,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-event-vue",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "private": false,
   "description": "Directives and composables for wiring up and debouncing native HTML events in Vue.",