nitropage/src/lib/primitives/eventListener.ts

A free and open source, extensible visual page builder based on SolidStart.

import { Accessor, onCleanup, onMount } from "solid-js";

type AllEvents = HTMLElementEventMap & DocumentEventMap & WindowEventMap;

export const makeEventListener = <
  T extends Node | Window,
  TY extends keyof AllEvents,
>(
  ref: Accessor<T>,
  type: TY,
  fn: (this: T, ev: AllEvents[TY]) => any,
  options?: AddEventListenerOptions,
) => {
  onMount(() => {
    const el = ref();
    el.addEventListener(type, fn as any, options);
    onCleanup(() => el.removeEventListener(type, fn as any));
  });
};