Adopt the Explicit Resource Management API

[TheCymaera]

Describe the problem

The Explicit Resource Management API is nearing Stage 4 and is implemented in TypeScript 5.2

I propose that Svelte 5 make use of patterns added by this proposal.

Describe the proposed solution

Specifically, we could use Symbol.dispose instead of $destroy

const svelteComponent = new MyComponent(options);
svelteComponent.$destroy();

// becomes

const svelteComponent = new MyComponent(options);
svelteComponent[Symbol.dispose]();

Additionally, using declarations in the global scope of a script tag should be tied to the component's lifecycle.

using resource = createResource();

// same as

const resource = createResource();
onDestroy(() => {
    resource[Symbol.dispose]();
});

Alternatives considered

NA

Importance

would make my life easier

[Rich-Harris]

The API for programmatically interacting with components is changed in Svelte 5:

import { mount, unmount } from 'svelte';
import App from './App.svelte';

const component = mount(App, {
  target: document.querySelector('#app'),
  props: {...}
});

// later
unmount(component);

component is whatever was exported from App — typically {}, but if you do stuff like this...

<script>
  export function greet() {
    alert('hello!');
  }
</script>

...then you can do component.greet().

To use resource management, we would have to add Symbol.dispose to component, either directly...

// inside the `mount` function
component[Symbol.dispose] = () => unmount(component);

...or by creating a new object:

return Object.defineProperties(
  {
    [Symbol.dispose]: () => unmount(component)
  },
  Object.getOwnPropertyDescriptors(component)
);

Both feel a little bit... pollutey. Maybe that's okay? I'm not sure. I'm just also not sure how useful this would be in practice — how often is it useful for a component to be mounted for the duration of a particular function's execution?