accessing get_current_component

[farfromrefug]

Describe the bug

In svelte 3 we could use get_current_component by importing it from svelte/internal
Now in svelte 4 it gives the error Cannot find module 'svelte/internal' or its corresponding type declarations

For a while i managed to fix this by using "moduleResolution": "NodeNext", in my tsconfig. But now with typescript 5, using "moduleResolution": "NodeNext", forces me to use "module": "NodeNext", which completely breaks my app.

Is there any better way to import get_current_component in svelte 4?

Reproduction

add

import { get_current_component } from 'svelte/internal';

Logs

No response

System Info

System:
    OS: Linux 6.4 Pop!_OS 22.04 LTS
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 23.28 GB / 62.64 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  npmPackages:
    svelte: 4.2.0 => 4.2.0

Severity

blocking an upgrade

[Conduitry]

get_current_component (or anything else in svelte/internal) was never part of the public API. I don't know what specific bundler configuration you're using to access functions in svelte/internal, but we're probably not going to be encouraging any access of that private API.

[farfromrefug]

@Conduitry I understand but still get_current_component is still very useful and I am sure I am not the only one using it (or I would not have found about it).
It is very important to implement methods like onMount where you would need to listen for the component onDestroy event.
An example is I define a onLanguageChange which works kind of like onMount with a callback. The thing is I need to cleanup things when the component which called onLanguageChange is destroyed. To do that i need to know about that component. Which is where get_current_component gets useful.
Can you understand that get_current_component can be useful for users ?

[j3rem1e]

You can call onMount or onDestroy in your onLanguageChange. It should work.

[farfromrefug]

@j3rem1e thanks a lot ! indeed it works and fills my need!

[Brisklemonade]

We use get_current_component in our svelte library to handle action forwarding

[emabiz]

Hi,
I have a web component created with Svelte3, used by a container also created with Svelte3 (but the container could be developed using a different framework). The way I used to make them communicate, from component to container, was the following.

1. Container:

<svelte:options accessors="{true}" />

<my-component  on:view="{onview}" />

<script lang="javascript">

    export let view;

    function onview(e){
        view=e.detail.view;
    }

</script>

2. MyComponent:

<svelte:options customElement="wm-client" />

<div>
    <MyApp bind:view="{view}" />
</div>

<script lang="javascript">
    import { get_current_component } from 'svelte/internal';
    import MyApp from './MyApp.svelte';

    let view='';
    const component = get_current_component();

    function view_changed() {
        if(!view){
            return;
        }
        component.dispatchEvent && component.dispatchEvent(new CustomEvent('view', {detail: { view:view }}));
	}
    $:view_changed(view);
</script>

Now moving on Svelte4, this stopped working.
How can I continue to communicate from the component to the container, in an official way?

Thank you

[dummdidumm]

Use the new extend option to get the host element: #3091 (comment)

[emabiz]

Hi,
it works perfectly.
I changed the code in MyComponent like this:

<svelte:options
  customElement={{
    tag: 'wm-client',
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {

        constructor() {
          super();
          this.component = this;
        }
      };
    }
  }}
/>


<div >
    <MyApp bind:view="{view}" />
</div>

<script lang="javascript">

    import MyApp from './MyApp.svelte';
    export let component;


    let view='';


    function view_changed() {
        if(!view){
            return;
        }
        component.dispatchEvent && component.dispatchEvent(new CustomEvent('view', {detail: { view:view }}));
	}
    $:view_changed(view);


</script>

Thank you very much!

[farfromrefug]

@Conduitry on the same note just realized i was also using flush from svelte/internal. And obviously now in svelte 4 it gives an error(though it seems to be working). Is there another way to access it?
flush is an essential part of svelte-native where there are moments where we must make sure we execute all updates sync in a native (android, ios) function call which needs a return based on the updated components after flush (we cant wait a tick).