Build JS class type for Svelte component seen from other files

[ghost]

[ghost]

@tomblachut first of all thanks for the work on the plugin, most of the things work very well. I just noticed that seemingly functions exports from components are not handled.

[r00t3g]

Confirming this issue - it's quite old though. The same problem also applies to component instances outside of Svelte context:

[tomblachut]

This is actually manifestation of not implemented type evaluation of Svelte files

[Treverix]

I ran into a similiar problem with context="module". Their exports are also not visible although it compiles and works fine

Provider.svelte

<script context='module' lang='ts'>
  export const foo:string = 'bar';
</script>

Main.svelte (with workaround)

<script lang='ts'>
  import {foo as _foo} from './Provider.svelte';  // foo is in red - not found
  const foo = _foo as string;  // Workaround to get the typing back
</script>

[ghost]

@tomblachut I guess this is planned to be implemented. Any idea of when this can be expected?

[tomblachut]

@jiby-gh It will be handled. There's no timeframe right now, sorry.

As a side note, personally, I struggle to find real life use case for such pattern.

[r00t3g]

@tomblachut, Apart from that it is stated supported in the Svelte API docs, for example, in one of our projects it is really a useful feature as we are switching a large codebase from native-JS custom components to Svelte and compoenent methods are required to provide integration bridges between the legacy code and the new component. It is also quite usable as a prop accessor when you need to get a single actual internal prop value from the component into external module and you don't want to enable compiler's accessors: true or use stores for some reason.

[tomblachut]

@r00t3g I see, thanks for the example. It's quite advanced.

[tomblachut]

Oops I've messed the rename

[lxhom]

I've found another workaround that's pretty simple and automatically imports types:

Control.svelte

<script lang="ts" context="module">
    import App, * as _App from "./App.svelte"
    let { gui, Button } = _App;
    ...
</script>
<App />

App.svelte

<script lang="ts" context="module">
    ...
    let gui = new GUIClass();
    enum Button { Encrypt, Decrypt, Help }
    ...
    export { gui, Button }
</script>
...

Works like a charm in WebStorm.

[tomblachut]

Migrating to WEB-61825 Svelte: Build JS class type for Svelte component seen from other files

but actually should be mostly covered by WEB-58397 use the svelte language server