Support for lang="ts" / TypeScript

[An-Cu]

I want to use svelte in typescript by using svelte-ts-preprocess preprocess
It would be great to add support for <script lang="ts"></script>.

Let me know if I can help you.

[tomblachut]

TS support could be more complicated that it seems. Currently I decided to hardcode JS because there are different parts required to coordinate. SvelteCodeMultiHostInjector uses some stringly typed black magic to enable JS support inside interpolations. JS inside script tag is injected by underlying HTML language support native to IDE. There are also props which are unsupported right now.

[JakubKoralewski]

I'm new to the Java/Kotlin/IntelliJ-plugin-ecosystem, but I'd love to help any way I can as well.

[sethlivingston]

Would love to see this generalized to lang="[any lang IDE supports]" if possible. Also happy to help.

[tomblachut]

@sethlivingston IntelliJ doesn't work that way. You need to enable support for each and every language manually, implement coding assistance and painfully debug many integration bugs.

TS is the official future of Svelte so it will be supported eventually.

[sethlivingston]

Understood. Thanks for the clarification!

…

On Thu, Mar 5, 2020 at 8:57 AM Tomasz Błachut ***@***.***> wrote: @sethlivingston <https://github.com/sethlivingston> IntelliJ doesn't work that way. You need to enable support for each and every language manually, implement coding assistance and painfully debug many integration bugs. TS is the official future of Svelte so it will be supported eventually. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#32?email_source=notifications&email_token=AAEMKSP53CI4BMTYWKKPAJDRF64WFA5CNFSM4IEYKXZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEN5SDLQ#issuecomment-595272110>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEMKSLKTBL7ZDT3JI5STFTRF64WFANCNFSM4IEYKXZA> .

[syabro]

sveltejs/svelte#4518 (comment)

typescript is kinda supported now
@tomblachut any chance we can have it in IDEA?

PS it's lang="typescript", not ts

[daarxwalker]

@tomblachut
Hi,
btw. great plugin!
Status about TS support? Svelte supports TS with no problem, but can't work with it and I rlly don't want use VSC.
It could be great, if I can finally develop with TS support!
Have a nice day!

[Dan1ve]

This would be so awesome.

Right now, I'm forced to switch between VS Code (which supports Typescript nicely, but doesn't really work for imports and Svelte-specific things) and IntelliJ (where -thanks for this great plugin- everything works perfectly, except the lang="typescript" support.

Please let me know if I can help!

[tomblachut]

It is great that there's official Svelte Language Server, it will definitely help. On the other side I just don't know how to integrate that 😅

I feel your pain given that I personally love TS.

@syabro @Dan1ve is it lang="typescript" or lang="ts"? https://svelte.dev/blog/svelte-and-typescript says ts

Rough roadmap:

1. Another rewrite related to Merged abstract syntax tree #100 - currently it's throwing IDE errors for HTML edge cases that are older than me. I didn't find a way to break that MR into smaller parts unfortunately. I burned out like 3 times already on that.
2. Add regression tests. I've promised @daarxwalker some backlog for that an eternity ago. I still don't have one but right now i'm on a time off from work so hopefully will complete point 1. and then write that backlog.
3. Enable TS
   3a. Extend parsers so they understand lang attribute.
   3b. Integrate with LSP.

[r00t3g]

@tomblachut there is a plugin bringing LSP support into IntelliJ IDEs: https://github.com/gtache/intellij-lsp , however, AFAIK, it does not introduce any syntax highlighting features, niether any code navigation. Neverthelss, it might be helpful looking through it code, dunno

[tomblachut]

@r00t3g there are even two, I imagine that plugin shows code for IPC between IntelliJ and node, and ofc spawning and killing that node process. Second part is I guess loading correct svelte-language-server (from package.json?) into that node instance. Folks from Svelte already implemented code navigation, right? (I didn't had a chance to checkout this new plugin)

There are also classes built into IJ:

Anyway probably the best way is to rip things from Vue plugin as I've always done with other code. They recently reworked that so should be best-in-class

[tomblachut]

I'm gonna link LSP issue #98 here

[Dan1ve]

@syabro @Dan1ve is it lang="typescript" or lang="ts"? https://svelte.dev/blog/svelte-and-typescript says ts

@tomblachut it appears that both typescript and ts work with the new official TS support and VS Code.

[anstarovoyt]

@tomblachut my thoughts:

1. We still have to add parsing support for typescript on the IDE side because without proper AST almost all smart IDE features don't work (the main issue is that LSP API is very limited and it cannot cover all IDE features).
   We have script="ts" support in vue.js plugin and also I implemented something similar for riot some times ago https://github.com/anstarovoyt/intellij-riot.js

2. Yes, we already use typescript service (it isn't lsp but very close) for code insights in vue and ts files. We use it for completion and error highlightings.

3. The simplest example of using "server <-> IDE" communication is the tslint plugin: https://github.com/JetBrains/intellij-plugins/tree/master/tslint

So from my point of view roadmap can look like:

1. Add ts syntax support on the IDE side
2. Introduce LSP integration over regular ts support similar to vue / ts

[anstarovoyt]

@tomblachut also I am ready to implement some part of the support, but we need some decision about #100 :)

[tomblachut]

@anstarovoyt thanks I'm gonna go through your links later,

so the first thing to do would be to fork SvelteJSLanguage and SvelteJSParserDefinition, reactive labels will complicate that a bit.

[unlocomqx]

I did a simple comparison with the vue plugin, here you can see that the embedded content type is not the same

In vue, you get better completion and highlighting

Svelte

[tomblachut]

Can someone verify whether as casts are supported in each block?

my favourite Svelte JS code (name shadowing but totally valid code):

{#each as as as (as)}

would become

{#each as as string[] as as as string (as)}

or with type as = string;

{#each as as as[] as as as as (as)}

[anstarovoyt]

@tomblachut do you plan to implement it in the nearest future? if not, I can try to provide an implementation sketch this week.

[tomblachut]

@anstarovoyt I wanted to tackle reactivity first, so I think it's okay that you work on TS sketch. The only concern is whether both features will work together

[anstarovoyt]

it is the reason why I call it "scratch". So we can take a look and discuss possible solutions to make it work with reactivity.

[tomblachut]

Ok, go ahead, thanks

[dummdidumm]

Can someone verify whether as casts are supported in each block?

Right now only JavaScript is supported in the template, see this issue for more info sveltejs/svelte#4701

[martonlederer]

@syabro @Dan1ve is it lang="typescript" or lang="ts"? https://svelte.dev/blog/svelte-and-typescript says ts

@tomblachut
Hey, I think both are supported. Good luck on this feature, since many of us love it and your plugin :D

[tomblachut]

Hi everyone! You can grab version 0.15.0 from within your IDE and use TS now.

https://plugins.jetbrains.com/plugin/12375-svelte/versions/stable/99919

Feel free to open additional issues around improvements.

[syabro]

Doesn't work :(

[tomblachut]

@syabro This issue is about lang="ts", type checking of props will come later. Cheers!

[syabro]

Oh, sorry.
@tomblachut should I open an issue about it?

[tomblachut]

@syabro Don't worry I could've communicated it more clearly. Anyway it's better to release small increments more often if possible so here you go 😁

Depends what you want to achieve/discuss really. There are two different issues already connected to your image.

#98 tackles LSP and I have no ETA on that, it will bring everything (I think) folks at sveltejs/language-tools are busy supporting (@dummdidumm mostly, thank you!)

#11 is an old but still relevant issue basically about improvements to html attributes - I just updated the title and description to better reflect current status, I want to do it next, before moving codebase to 2020.3. Type checking using builtin IDE engine could come after that one.

Anyway feel free to open issues if you like, that's what they are here for.