tomblachut / svelte-intellij

Svelte components in WebStorm and friends
MIT License
485 stars 38 forks source link

Support for lang="ts" / TypeScript #32

Closed An-Cu closed 4 years ago

An-Cu commented 5 years ago

I want to use svelte in typescript by using svelte-ts-preprocess preprocess It would be great to add support for .

Let me know if I can help you.

tomblachut commented 5 years ago

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 commented 4 years ago

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

sethlivingston commented 4 years ago

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

tomblachut commented 4 years ago

@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 commented 4 years ago

Understood. Thanks for the clarification!

On Thu, Mar 5, 2020 at 8:57 AM Tomasz Błachut notifications@github.com 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 https://github.com/tomblachut/svelte-intellij/issues/32?email_source=notifications&email_token=AAEMKSP53CI4BMTYWKKPAJDRF64WFA5CNFSM4IEYKXZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEN5SDLQ#issuecomment-595272110, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEMKSLKTBL7ZDT3JI5STFTRF64WFANCNFSM4IEYKXZA .

syabro commented 4 years ago

https://github.com/sveltejs/svelte/issues/4518#issuecomment-637811378

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

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

daarxwalker commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 #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 commented 4 years ago

@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 commented 4 years ago

@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:

image

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 commented 4 years ago

I'm gonna link LSP issue #98 here

Dan1ve commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@tomblachut also I am ready to implement some part of the support, but we need some decision about https://github.com/tomblachut/svelte-intellij/pull/100 :)

tomblachut commented 4 years ago

@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 commented 4 years ago

I did a simple comparison with the vue plugin, here you can see that the embedded content type is not the same 2020-08-03_14-25

In vue, you get better completion and highlighting image

Svelte image

tomblachut commented 4 years ago

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 commented 4 years ago

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

tomblachut commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

Ok, go ahead, thanks

dummdidumm commented 4 years ago

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 https://github.com/sveltejs/svelte/issues/4701

martonlederer commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

Doesn't work :(

image image image
tomblachut commented 4 years ago

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

syabro commented 4 years ago

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

tomblachut commented 4 years ago

@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.