chore(event): improve event coverage and fix typings

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## Changes
 
+- [event][https://pikax.me/vue-composable/composable/event/event.html] - improve typing
 - [path](https://pikax.me/vue-composable/composable/format/path) - Improve [array path access](https://pikax.me/vue-composable/composable/format/path.html#access) and add dev warnings
 - [i18n](https://pikax.me/vue-composable/composable/i18n/i18n) - Allow to have factory based locale messages
 - [i18n](https://pikax.me/vue-composable/composable/i18n/i18n) - Added console warnings when removing locales

packages/web/__tests__/event/event.spec.ts

@@ -1,5 +1,5 @@
 import { Ref, ref } from "@vue/composition-api";
-import { Vue } from "../utils";
+import { Vue, nextTick } from "../utils";
 import { useEvent } from "../../src";
 import { NO_OP } from "@vue-composable/core";
 
@@ -140,4 +140,38 @@ describe("event", () => {
   it("should not throw if undefined passed", () => {
     expect(useEvent(undefined as any, "load", NO_OP)).toBe(NO_OP);
   });
+
+  it("should remove event listener if ref changes", async () => {
+    const element: Element = {
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    } as any;
+    const mockHandler = jest.fn();
+    const options = {};
+
+    const el = ref(element);
+
+    new Vue({
+      template: "<div></div>",
+      setup() {
+        useEvent(el, "load", mockHandler, options);
+      }
+    }).$mount();
+    expect(element.removeEventListener).not.toHaveBeenCalled();
+    expect(element.addEventListener).toHaveBeenCalled();
+
+    el.value = {
+      ...element
+    };
+
+    await nextTick();
+
+    expect(element.removeEventListener).toHaveBeenCalled();
+    expect(element.addEventListener).toHaveBeenCalledTimes(2);
+
+    el.value = null as any;
+
+    await nextTick();
+    expect(element.removeEventListener).toHaveBeenCalledTimes(2);
+  });
 });

packages/web/src/event/event.ts

@@ -14,7 +14,7 @@ export function useEvent<
   M,
   K extends keyof M
 >(
-  el: RefTyped<T>,
+  el: T | Ref<T | undefined>,
   name: K,
   listener: (this: T, ev: M[K]) => any
 ): RemoveEventFunction;
@@ -30,7 +30,7 @@ export function useEvent<
   M,
   K extends keyof M
 >(
-  el: RefTyped<T>,
+  el: T | Ref<T | undefined>,
   name: K,
   listener: (this: T, ev: M[K]) => any,
   options?: boolean | AddEventListenerOptions
@@ -42,13 +42,13 @@ export function useEvent<K extends keyof WindowEventMap>(
   options?: boolean | AddEventListenerOptions
 ): RemoveEventFunction;
 export function useEvent<K extends keyof DocumentEventMap>(
-  el: RefTyped<Element>,
+  el: Element | Ref<Element | undefined>,
   name: K,
   listener: (this: Document, ev: DocumentEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ): RemoveEventFunction;
 export function useEvent(
-  el: RefTyped<Element> | RefTyped<Window> | RefTyped<any>,
+  el: Element | Ref<Element | undefined> | RefTyped<Window> | RefTyped<any>,
   name: string,
   listener: EventListenerOrEventListenerObject,
   options?: boolean | AddEventListenerOptions

packages/web/src/event/onResize.ts

@@ -55,7 +55,7 @@ export function useOnResize(
   // resize seems only to be fired against the window
   const remove = isClient
     ? useEvent(window, "resize", handler, eventOptions || PASSIVE_EV)
-    : NO_OP;
+    : /* istanbul ignore next */ NO_OP;
 
   return {
     height,