SvelteLab icon indicating copy to clipboard operation
SvelteLab copied to clipboard

[WIP] Svelte Language Server integration

Open snuffyDev opened this issue 10 months ago • 4 comments

Adds (nearly) full & complete Svelte Language Server + TypeScript/JavaScript language server support for compatible browsers.

Features include:

  • Intellisense for Svelte & TypeScript/JavaScript
    • Import completions/suggestions
    • Cross-module intellisense
    • Hover tooltips (similar to VSCode's hover tooltips, complete with MDN links for CSS, for example)
    • Support for SvelteKit's "Virtual Modules" (export let data should provide correct types, for example)
    • Support for NPM package type intellisense
    • Tooltips for any errors (like in VSCode)
    • ... and much more!

Code changes

Components

  • Adds LanguageClientProvider.svelte, which encapsulates access to the language server functionality (since everything is instantiated async, plus, we need to limit access to it due to the use of Web Workers)
  • Extends FileTree.svelte to support updating/adding files to the language servers (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-4fc96a12a94550fd4403144a0bd814c3dadf0b0c2c59d00df88c80bcd28ce3daR44-R64)

webcontainer.ts

  • Extends FSChangedEvent to have be of type 'creation' | 'deletion' | 'modification' (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R105)
    • Any modifications will get written to the files store (used by the SvelteLab 'frontend'), which will get sent to the language workers (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R147-R153)
  • Improves UX for template/project loading by finding at least the first *.svelte file. Vite templates aren't normally going to have a src/routes/+page.svelte file, so we might as well meet the normal expectation presented to users when they open the app for the first time (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R601-R604)
    • To facilitate this feature, a module-local function was added here (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R881-R906)
  • Adds get_directory_names, afaict it's currently unused, however it might be a nicety later down the line -- although it's up to SvelteLab's maintainers if they want to keep this or not (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R819-R840)
  • Adds walk_tree_and_collect, which will walk a given file tree and return the type Record<PathToFile (string), FileContents (string)> (https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-54c3b6b7253ed4f41dd02429026ab0da5c356c4941d071771717557fa4078249R851-R879)
  • Extends get_tree with ignore_node_modules parameter

snuffyDev avatar Aug 18 '23 23:08 snuffyDev