Ability to get reference of current component

[janproch]

Is your feature request related to a problem? Please describe.
Add ability to get reference of current component. Something like bind:this, but bind:this works only for child component

Use case:
I need to register active component to global handler. I have global menu, there is eg. command "Refresh" and this command should call "export function refresh() {}" of current component

Describe the solution you'd like
Probably the best way would be some API, like getCurrentComponent(), similar to getContext() API.

Describe alternatives you've considered
There are two workarounds:
Bind in parent component and pass down in prop:

<script>
  let activeComponent;
</script>

<Child instance={activeComponent} bind:this={activeComponent} />

Or a bit tricky solution using svelte:self
See this REPL: https://svelte.dev/repl/3b32cfb5331843b286f02e2bb28a294a?version=3.33.0

How important is this feature to you?
There are workarounds, but if would be nice to be able to do this directly

[vatro]

you can do this:

<!-- MyComponent.svelte -->
<script>
import { get_current_component } from "svelte/internal"
const self = get_current_component()
</script>

in case you wonder, this is not officially documented. I first heard of it asking a question in the Svelte Discord channel, now I always take a look at "svelte/internal" module if I need something exotic.

[janproch]

Thanks, it works perfect. Svelte/internal is good start point to see, how it works.

I have asked this question on svelte discord channel, I have got here 2 workarounds, which are described in this issue.

I am not closing this issue, it's question, whether not to publish get_current_component in public API.

[cereschen]

You can do that, although it's strange

<script>
const self = arguments[0]
</script>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Prinzhorn]

Here's another use-case: I'm working on some inline-editing where you can edit individual properties of a document. Clicking the property turns it into an appropriate <input /> (slots etc.). Only a single property should be editable at any given time. Synchronizing this using focus/blur/focusin/focusout/click is painful. Hence I have a mutex store in <script context="module"> that holds a reference to the current InlineEdit instance. When the user clicks a property they want to edit, it sets the mutex and makes it editable. Now if another component was already in editing-mode it will automatically stop because it subscribed to the store and realizes it no longer has the mutex.

Moving get_current_component() away from /internal would make me more confident this implementation will continue to work.

A simple workaround would be to give each component an id (hold a counter in <script context="module"> as usual) but why, when we can compare references.

Edit: Just ran into a second use-case where I think using get_current_component is appropriate. I have a form with several components that abstract away complex inputs. E.g. one AttachmentsInput that allows uploading/adding/removing files. Now I want to disable submitting of the form while any of the inputs is working (e.g. for AttachmentsInput while files are being uploaded). Naturally I'm using setContext to pass information from the form down to all of these inputs. The context is a store with a Set (potentially WeakSet) of active components. Now any of those inputs that the user needs to wait on can add themselves (get_current_component()) to said Set. And then disabled={$activeInputs.size > 0} on the submit button and boom, Svelte magic. Alternative approaches would be a counter which active components increment/decrement (error prone, e.g. double increment, the Set just works).

Edit2: Possible clean API sveltejs/rfcs#58