Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support of TypeScript inside Svelte components #34

Open
2 of 10 tasks
alexprey opened this issue Aug 27, 2020 · 13 comments
Open
2 of 10 tasks

Add support of TypeScript inside Svelte components #34

alexprey opened this issue Aug 27, 2020 · 13 comments
Labels
enhancement New feature or request priority:high Svelte V3 Issue related to Svelte V3 components
Milestone

Comments

@alexprey
Copy link
Collaborator

alexprey commented Aug 27, 2020

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 alexprey added enhancement New feature or request Svelte V3 Issue related to Svelte V3 components labels Aug 27, 2020
@alexprey
Copy link
Collaborator Author

alexprey commented Dec 2, 2020

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
Copy link
Contributor

soft-decay commented Dec 22, 2020

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
Copy link
Collaborator Author

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

@sidharthramesh
Copy link

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
Copy link
Collaborator Author

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
Copy link

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

@alexprey
Copy link
Collaborator Author

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

@alexprey alexprey added this to the 5.0.0 milestone Feb 12, 2021
@vezwork
Copy link

vezwork commented Feb 17, 2021

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
Copy link

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
Copy link
Collaborator Author

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
Copy link

IanVS commented Jun 2, 2022

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request priority:high Svelte V3 Issue related to Svelte V3 components
Projects
None yet
Development

No branches or pull requests

8 participants