sveld icon indicating copy to clipboard operation
sveld copied to clipboard

Parse typescript components

Open madeleineostoja opened this issue 4 years ago • 9 comments

It would be wonderful if Sveld could generate proper typescript declarations for typescript components (ie: lang="ts), rather than only JS-annotated types.

madeleineostoja avatar Dec 06 '20 22:12 madeleineostoja

Could you clarify what you mean?

The use case for this library is to make plain Svelte components compatible with users who do use lang="ts".

metonym avatar Dec 06 '20 22:12 metonym

Svelte components that use lang="ts" still aren't strongly typed (with props, etc) when consumed by an app using lang="ts", afaik they still need a proper class declaration like sveld generates. So it'd be great if sveld could generate that declaration for typed components, as well as plain ones.

I may be wrong here, but that's been my experience when using my own distributable Svelte components (written with lang=ts) in projects.

madeleineostoja avatar Dec 06 '20 23:12 madeleineostoja

Interesting. So you author components in TS and want them to be consumable by non-TS apps.

Just thinking a loud here, but would the following work for you use case?

  1. write TS Svelte components
  2. use svelte-preprocess to strip any TypeScript
  3. emit uncompiled, non-TS Svelte source files to a different folder

metonym avatar Dec 06 '20 23:12 metonym

So I actually want to use them in TS apps, but Svelte/TS isn't smart enough to pick up on props etc without a declaration file for the component.

But to your point, that doesn't really work anyway. Apps like Sapper that consume svelte components need the uncompiled .svelte source, and afaik svelte-preprocess is only a buildstep tool as part of compiling an (m)js output.

For this issue though that's not really relevant. Use case is: using external TS components in TS apps, which requires the component to have a declaration, which would be great to generate with sveld

madeleineostoja avatar Dec 06 '20 23:12 madeleineostoja

Understood – that's a compelling use case.

metonym avatar Dec 06 '20 23:12 metonym

https://github.com/firefish5000/svelte2dts does something like this already but is not that shaped out as sveld yet. Essentially it uses svelte2tsx to create a tsx file, then lets tsc generate type definitions from that, and some cleanup afterwards. The advantage is that you get all the advanced stuff like "component imports interfaces" for free. Not sure how that would fit the existing architecture of sveld though. svelte2tsx would likely need some adjustments, too, if you decide to go that route.

dummdidumm avatar Dec 11 '20 08:12 dummdidumm

Ooh looks promising! I'll give it a try for my next component

madeleineostoja avatar Dec 12 '20 09:12 madeleineostoja

For anyone stumbling across the same problem, @betaboon has a nice solution for lang=ts: svelte-type-generator.

Florian-Schoenherr avatar Apr 30 '21 14:04 Florian-Schoenherr

sveld 0.8.0 does typescript preprocessing using svelte-preprocess with default options so it shouldn't error now in most cases. I still encountered an error when a component imports a .ts file. But was able to work around it by changing the .ts to a .svelte and wrapping everything in a <script context="module" lang="ts">

jelib3an avatar Jun 18 '21 20:06 jelib3an