Svelte 5: The on of svelte/events is restricted to use with Element only

[Serator]

Describe the problem

Let's say I want to create a handler with matchMedia:

const matchMedia = window.matchMedia(mediaQueryString)
matchMedia.addEventListener('change', listener)

The Element type of the on function will prevent me from using something like

const matchMedia = window.matchMedia(mediaQueryString)
on(matchMedia, 'change', listener)

Describe the proposed solution

If this is a deliberate limitation, it's worth mentioning it in the documentation.
Otherwise, it should be possible to use on with objects other than Element.

Importance

nice to have

[Serator]

@dummdidumm It still doesn't work.

I have the following code that I am trying to rewrite using on:

export const useMediaQuery = (mediaQueryString: string) => {
  let isMatch = $state(globalThis.matchMedia?.(mediaQueryString).matches ?? false)
  let listeners = 0
  let unsubscribe: VoidFunction

  return {
    get isMatch() {
      if ($effect.tracking()) {
        $effect(() => {
          if (listeners++ === 0) {
            const listener = (event: MediaQueryListEvent) => (isMatch = event.matches)
            const matchMedia = window.matchMedia(mediaQueryString)
            matchMedia.addEventListener('change', listener)
            unsubscribe = () => matchMedia.removeEventListener('change', listener)
          }

          return () => {
            if (--listeners === 0) {
              unsubscribe()
            }
          }
        })
      }

      return isMatch
    },
  }
}

It goes like this:

import {on} from 'svelte/events'

export const useMediaQuery = (mediaQueryString: string) => {
  let isMatch = $state(globalThis.matchMedia?.(mediaQueryString).matches ?? false)
  let listeners = 0
  let unsubscribe: VoidFunction

  return {
    get isMatch() {
      if ($effect.tracking()) {
        $effect(() => {
          if (listeners++ === 0) {
            unsubscribe = on(
              window.matchMedia(mediaQueryString),
              'change',
              (event: MediaQueryListEvent) => (isMatch = event.matches),
            )
          }

          return () => {
            if (--listeners === 0) {
              unsubscribe()
            }
          }
        })
      }

      return isMatch
    },
  }
}

[Serator]

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/elements/events.js#L69-L102 - the issue seems to be in the description of the on function.

[Serator]

@dummdidumm Maybe I should create a separate issue?