Is it a good practice to create a custom component only for event listeners?

[GulgDev]

Suppose I have a global EventTarget object. For Window and Document, there's <svelte:window> and <svelte:document>. Is it good to create a custom component alike those, or should I just stick to manually calling addEventListener on the global instance exported from a module?

[brunnerh]

The main reason to use <svelte:window>/<svelte:document>, is the cleanup.
Those special elements also make some sense because they actually correspond to an existing element.

For a global event bus, an extra component does not really make sense.

I would provide a subscription function that takes care of the event listener cleanup, based on the component lifecycle. Along the lines of:

const target = new EventTarget();

export function on(type, callback) {
  $effect(() => {
    target.addEventListener(type, callback);

    return () => target.removeEventListener(type, callback);
  });
}

export const dispatch = e => target.dispatchEvent(e);