Add support of TypeScript inside Svelte components

[alexprey]

Use the native typescript package
AST Viewer: https://ts-ast-viewer.com

Plan

• Pase variable definitions (private data items)
• Parse exported variable (public data items)
• Parse method declarations (public / private)
• Correct comments and description parsing
• Parse imported components
• Events parsing
• Parse event names from objects of current source file
• Basic type inferring for variables
• Basic type matching based on type declarations (let a: IType to be IType)
• Computed (reactive) variables

[alexprey]

Looking for this task I found the Babel Parser. This parser used by all babel eco-system and actually used in most of project build systems. Also this compiler output API looks very similar with espree parser that used in this project to parse scripts. The babel parser API allows parse not only code blocks, also that support parsing of simple expressions that can be usuful for template inline expressions.
So, I think that it is a good idea to look into this parser to use it for the next versions.

Before parser will be changed it is a good idea to done refactoring around V3 parser and split logic on multiple files.

[soft-decay]

I was wondering if you were planning on including typescript support in v4 or rather do a v4 release while working on typescript support in a separate branch?

[alexprey]

I plan to release v4 tomorrow if all works well, and start playing around TS support in a new branch for v5 release

[sidharthramesh]

Thank you for the great work! As of now, can I use the parser with my svelte-typescript project? I want to extract the exported props and their types into JSON. Is this supported? The current version on npm gave me an Unexpected token error.

[alexprey]

Hi @sidharthramesh thanks! For now, typescript is not supported yet by this library, but I'm already start working on it. I hope that I can provide some workaround soon

[sidharthramesh]

Thank you @alexprey. For now, I guess I'll just use regex to extract out and parse the JSDocs in a svelte file.

[alexprey]

Ok, that time is come. I'm create a branch for typescript support (ref:typescript-support) by this library.
I'm start with duplicating integration tests with small changes to make it writen with typescript.

The next step is provide the special API that can transpile typescript code to ES, which we can use later for parsing. This API should be similar with svelte.preprocess option for better integration with existing transpilers

[vezwork]

Want to express that I'm looking forward to this! I'm building my svelte app with Typescript using both rollup and webpack right now and they both work, but I get complaints from sveltedoc-parser in the console.

[madeleineostoja]

This would be a big win for the new Storybook svelte story formats as well, since it currently can't infer prop types in the auto generated documentation

[alexprey]

Hi, everyone! I'm back to work on that library and start intensive work with typescript parsing. I'm update initial task description to track progress of typescript parser implementation.

[IanVS]

I wonder, could it be possible to use https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx to get you at least part of the way to typescript support?

[Ddupasquier]

Would love to find out if anything ever came of this. Just discovered Storybook and am very excited to use it, but if it can't handle svelte/ts then I'm just going to have to remove it.

[fkrauthan]

Any news on this? would also love to have proper type support in storybook. And it seems like storybook uses this library for that.