[Feature request] Add Svelte support

[danielquintero]

I have used this plugin in Angular, React and Vue projects. Recently we started migrating a codebase to Svelte and I was eager to keep using this plugin for .svelte files... to my surprise there is no support for Svelte and actually I ran into issues where imports were getting removed when using svelte-language-tools + prettier-plugin-organize-imports...

Since there is Vue support for sfc, I think adding support for Svelte should be doable, right?

[simonhaenisch]

Hey, yeah it's probably doable but I haven't worked with Svelte yet and even though I'd love to, I currently don't have the time. PRs are welcome 🙏

[simonhaenisch]

Hey @danielquintero I just released a new version where you can enable an option organizeImportsSkipDestructiveCodeActions so that no imports would get removed. Maybe you can try that again in combination with svelte-language-tools and see if it works for you?

BWT if anyone knows a package similar to @volar/vue-typescript (has a drop-in replacement for ts.createLanguageService) but for Svelte, please let me know! In that case adding support would be very straightforward.

[simonhaenisch]

Looked into it a bit more and it does look like organizeImports is implemented by svelte-language-server... I'm just not sure yet how to actually make use of it, i'll try to figure out if I find enough time.

https://github.com/sveltejs/language-tools/blob/936fa6fe7ce2697cf733f97b4b49fbfa2b1427b1/packages/language-server/src/plugins/typescript/features/CodeActionsProvider.ts#L95-L170

[simonhaenisch]

So I've tried patching the preprocess hook of prettier-plugin-svelte (edit: patching it wasn't actually necessary, just needed to have the plugin installed), and it did somewhat work, giving me "svelte" as the parent parser and "typescript" as the child parser. It doesn't really make much sense to do it this way though, because this will just run the part inside the <script lang="ts"> tag through the TypeScript parser which lacks all the context of the whole .svelte file. To make organizeImports work, we'd have to trick it into thinking the file was a TS file (by appending .ts as an extension). I've done the same with Vue initially, and yeah it ended up being kinda useless because you'll import components and use them in the template but they'll be removed as unused.

I've also tried using typescript-svelte-plugin (by adding it to tsconfig.json as compilerOptions.plugins) which according to some docs should automatically wrap the TypeScript language service, and I was hoping that would allow me to run languageService.organizeImports on a .svelte file, however that didn't work... not sure why, maybe because of programmatic usage of the language service API. I've tried initializing it manually like the following but that didn't work either ("Error: Could not find source file: 'test.svelte'.")... looks wrong anyway.

const sveltePlugin = require('typescript-svelte-plugin');
const tss = require('typescript/lib/tsserverlibrary');
sveltePlugin({ typescript: tss });

languageService = tss.createLanguageService(getLanguageServiceHost(filepath, readFileSync(filepath, 'utf-8')));

So at this point I'm not sure how to make a language service that can take a whole .svelte file, and until there's some package for that or someone has an idea, I don't think I can find the time to figure this out. It would basically need to be @volar/vue-typescript but for Svelte. See https://github.com/johnsoncodehk/volar/blob/master/packages/vue-typescript/src/index.ts if someone wants to use that as a reference implementation.

[simonhaenisch]

Came up with a PR ☝️ however I'm not very confident about it yet... if anyone would be able to test this out on their project, that would be really helpful! Clone the repo, checkout the simple-svelte-support branch, and link it into your project with npm (e. g. run npm link ../path/to/prettier-plugin-organize-imports).

[simonhaenisch]

See comments on the PR (now closed)... there must be a way to use a piece of svelte language tools programmatically to do import organizing correctly from this plugin, I don't know where to start though (I've skimmed through the source code but couldn't find anything).

[benallfree]

@simonhaenisch FWIW there are only 4 references to organize in the repo: https://github.com/sveltejs/language-tools/search?q=organize&type=code

They are all in the Typescript provider, which makes me think the Svelte provider must extract the Typescript from Svelte along with some metadata about what imports are referenced by the component's HTML section, then the Typescript organizer returns an updated Typescript chunk.

[benallfree]

Reply from the Svelte Language Tools team: sveltejs/language-tools#1649 (comment)

[johnsoncodehk]

You can try to use @volar-examples/svelte-typescript.