Add supported method for accessing reference to component instance.

[Akolyte01]

Describe the problem

The 'module context' tutorials of the svelte tutorials examine a method of controlling a set of components by passing references to the module context of 'AudioPlayer.svelte'
This is accomplished by using bind:this within AudioPlayer.svelte to gain a reference to the child component that will be ready onMount. This approach works well.

However there are many instances where instead of referencing a child element of a particular component, it would be useful to access a reference to the component itself rather than a child component.

There are several ways around this problem I will discuss in 'Alternatives considered' but all of them are rather awkward.

Describe the proposed solution

Currently the onMount lifecycle hook accepts one parameter of type () => void or () => () => void. This may feasibly be extended to also accept (SvelteComponent) => void, and have the onMount function pass a reference to the just-mounted component.

Alternatives considered

There are some 'existing' solutions but none are great.

1. use get_current_component from 'svelte/internal'. As part of the internal api this is not intended for supporting this use, and could easily break in the future if changes are made to the internal implementation of svelte. An officially supported runtime function to accomplish this would also be a good solution.

2. Add a wrapping component and then use bind:this to the component you want to control. This expands the DOM unnecessarily, and requires passing/binding all of the attributes intended for control through this wrapper component.

3. Instead of passing the component to the module context, pass a callback function or object containing callback functions. This works well in simple instances, like stopping all audio players, but get convoluted very quickly when you want to allow for more complex control of a component.

4. use bind:this with svelte:self/

{#if outer}
<svelte:self bind:this={component} outer={false}/>
{/if}

{#if !outer}
<h1>
	abc
</h1>
{/if}

This is super janky and I'm not sure you end up with a reference to the correct component.

Importance

would make my life easier

[dummdidumm]

Duplicate of #5517 . Regarding point 2: If the wrapping component does not contain a DOM element, it will not expand the DOM unnecessarily.