Is there a way to simplify this code avoiding to call onDestroy manually each time?

[frederikhors]

Hi people, thanks for your passion!

We're using EventSource in multiple places in out SvelteKit app, like this:

<script>
  import { onDestroy } from 'svelte';
  import { customEventSource } from '$lib/events';

  const callback = (event: MessageEvent) => {
    console.log('event:', event);
  };

  customEventSource.addEventListener('message', callback);

  onDestroy(() => {
    customEventSource.removeEventListener('message', callback);
  });
</script>

As you can see there is a lot to write each time.

Isn't there a magic way - as Svelte has taught us - to simplify?

Especially so I don't have to manually call onDestroy every time?

[Conduitry]

You can encapsulate the onDestroy in another module, as in https://svelte.dev/tutorial/ondestroy

Unless you are sure your component will only ever be run in a browser, I would also suggest moving the subscription into an onMount.