[WIP] Svelte Language Server integration #277

snuffyDev · 2023-08-18T23:23:01Z

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

create LanguageClientProvider.svelte add utils to webcontainer.ts reflect new changes in Editor.svelte

vercel · 2023-08-18T23:23:06Z

Someone is attempting to deploy a commit to a Personal Account owned by @SvelteLab on Vercel.

@SvelteLab first needs to authorize it.

vercel · 2023-08-18T23:25:16Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sveltelab	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 30, 2023 4:56pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
sveltelab-docs	⬜️ Ignored (Inspect)	Visit Preview		Oct 30, 2023 4:56pm

reorganize/clean up LanguageClientProvider.svelte format

add file watching for webcontainer fix languageclientprovider

get it working better

fixes editor loading

fixes timing issues, module resolution, ts server

cleanup a lil bit

update Editor/LangClientProvider w/ feature detection & optimize for FF

SarcevicAntonio

First of all, thank you so much for all the time and effort you have poured into this project! It's amazing to see all the Language Server features like hover type definitions and import completion in SvelteLab 🚀

I've sent the preview deployment link to subscribers in the Discord. Feel free to also join :)

I've only had a quick peek at the PR for now and left some nitpicky comments for the low-hanging fruit. It'll take me a bit to read it fully and probably more to understand the implementation.

Also, I'm having trouble reliably opening the Editor. It often seems to hang or maybe it just takes a really long time to load??? 🤷

EDIT: ok its not loading i think it boots, installs deps, runs vite but the editor doesn't open, at least with ?t=typescript

EDIT EDIT: now it works?! it's kinda weird? 👀

SarcevicAntonio · 2023-10-24T15:38:57Z

.eslintignore

@@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+/src/lib/language_servers/*


looks like these /src/lib/ stuff is still from before the language server worker was it's own module, right? 👀

SarcevicAntonio · 2023-10-24T15:39:11Z

.prettierignore

same here, could possibily be removed

SarcevicAntonio · 2023-10-24T15:40:30Z

package.json

+		"codemirror-languageserver": "^1.11.0",
+		"events": "^3.3.0",


are these new modules (open-rpc, codemirror-languageserver, events) used anywhere? 👀

removed open-rpc, and events. since they were required when using the language server modules directly rather than using the current NPM package. codemirror-languageserver is used here, though: https://github.com/SvelteLab/SvelteLab/pull/277/files#diff-eb2ab2a29594e8de109dcc59d1e2664eb6b05c0107da708a5119794aef7f030aR275

SarcevicAntonio · 2023-10-24T15:43:59Z

src/lib/default_project_files/animotion/index.html

if you could remove the formatting diff from default_project_files that would be great, as that means the default projects aren't formatted according to the prettier config of the respective projects 🙏

Good catch -- my bad! I ran prettier globally from the NPM scripts -- would it be a good idea to add ./src/lib/default_project_files/* to .prettierignore

You are right! Our bad then, we should add that... Do you mind adding it? 🙈

SarcevicAntonio · 2023-10-24T15:45:05Z

src/lib/default_project_files/lib/jsconfig.txtjson

we probably need a jsconfig/tsconfig for every project template, right? 🤔

SarcevicAntonio · 2023-10-24T15:46:44Z

src/lib/webcontainer.ts

+	return walk([''], '', file_tree);
+}
+
+function find_first_of_file_ext(


this is cool! thx

SarcevicAntonio · 2023-10-24T15:48:09Z

src/lib/webcontainer.ts

 				),
 			};
 		}
 	}
 	return tree;
 }

-const IGNORE_LIST = ['.svelte-kit', 'node_modules'];
+const IGNORE_LIST = ['.svelte-kit/generated', 'node_modules'];


was this for debugging purposes, or do we need this? i think it makes the .svelte-kit folder appear in the file tree which we might not want

Fixes formatting for templates This reverts commit 455ad40.

snuffyDev · 2023-10-28T01:12:34Z

First of all, thank you so much for all the time and effort you have poured into this project! It's amazing to see all the Language Server features like hover type definitions and import completion in SvelteLab 🚀

I've sent the preview deployment link to subscribers in the Discord. Feel free to also join :)

I've only had a quick peek at the PR for now and left some nitpicky comments for the low-hanging fruit. It'll take me a bit to read it fully and probably more to understand the implementation.

Also, I'm having trouble reliably opening the Editor. It often seems to hang or maybe it just takes a really long time to load??? 🤷

EDIT: ok its not loading i think it boots, installs deps, runs vite but the editor doesn't open, at least with ?t=typescript

EDIT EDIT: now it works?! it's kinda weird? 👀

@SarcevicAntonio What browser (and version), along with OS and maybe device/hardware youre running on, is having difficulties?

If you're able to potentially provide me with at minimum browser + version, and some extensions you have installed (if any) I can probably repro and get it fixed before the end of the weekend 🚀

snuffyDev · 2023-10-28T02:23:27Z

At the current moment, I don't seem to be having any issues on Edge v118.0.2088.61 with the following extensions:

And no issues with the latest Firefox, no extensions installed 🤔

paoloricciuti · 2023-11-28T15:18:08Z

vite.config.ts

@@ -62,6 +62,9 @@ export default defineConfig({
 	define: {
 		'process.env.NODE_ENV': '"production"',
 	},
+	worker: {
+		format: 'es',


we are also using a worker to search the sveltekit documentation and the es worker format is not supported by firefox...i don't think there's a way to have them built in different formats right?

rm `race` and run setup sequentially

TKDev7 · 2024-10-06T05:55:24Z

Any updates here boys?

paoloricciuti · 2024-10-06T10:40:56Z

Any updates here boys?

I started working on a different version and I almost got it working locally...I need to find a bit of time to continue working on this

snuffyDev added 7 commits July 28, 2023 03:58

begin adding language server

9617e2f

reintroduce temp files object

b5a1461

Handle multiple tab language support

2d93f45

Update the LS Worker

e1cb9cf

Merge branch 'main' into svelte-language-server

87e2b5a

Merge remote-tracking branch 'upstream/main' into svelte-language-server

3d32935

disable typescript checking for lsp worker in tsconfig.json

1834f90

create LanguageClientProvider.svelte add utils to webcontainer.ts reflect new changes in Editor.svelte

vercel bot deployed to Preview – sveltelab August 18, 2023 23:27 View deployment

snuffyDev added 4 commits September 17, 2023 15:06

update language server files

455ad40

reorganize/clean up LanguageClientProvider.svelte format

update language server

2129839

add file watching for webcontainer fix languageclientprovider

re-add process definition in vite config

86bfd7e

Merge remote-tracking branch 'upstream/main' into svelte-language-server

65d1153

vercel bot had a problem deploying to Preview – sveltelab September 22, 2023 22:36 Failure

fix double param

599d92b

vercel bot deployed to Preview – sveltelab September 22, 2023 22:42 View deployment

snuffyDev added 3 commits October 1, 2023 05:36

use packaged svelte-language-server-web

44c3af8

get it working better

upgrade svelte-lsw to latest

97b9f98

fixes editor loading

updates ls locally, temp use local build

4677ceb

fixes timing issues, module resolution, ts server

vercel bot had a problem deploying to Preview – sveltelab October 6, 2023 19:28 Failure

use package

e5867d1

vercel bot had a problem deploying to Preview – sveltelab October 6, 2023 19:46 Failure

fix build

73b9301

vercel bot deployed to Preview – sveltelab October 6, 2023 20:08 View deployment

fix worker imports, again

2b28b48

vercel bot deployed to Preview – sveltelab October 6, 2023 21:00 View deployment

upgrade lang server package

e4d769f

cleanup a lil bit

vercel bot deployed to Preview – sveltelab October 9, 2023 09:41 View deployment

add jsconfigs to lib + basic template

2741127

update Editor/LangClientProvider w/ feature detection & optimize for FF

vercel bot deployed to Preview – sveltelab October 16, 2023 07:21 View deployment

snuffyDev marked this pull request as ready for review October 18, 2023 03:13

Merge branch 'SvelteLab:main' into svelte-language-server

e874c6b

SarcevicAntonio requested review from SarcevicAntonio and paoloricciuti October 23, 2023 07:18

SarcevicAntonio assigned paoloricciuti and SarcevicAntonio Oct 23, 2023

vercel bot deployed to Preview – sveltelab October 23, 2023 07:24 View deployment

SarcevicAntonio reviewed Oct 24, 2023

View reviewed changes

SarcevicAntonio self-requested a review October 24, 2023 15:54

snuffyDev added 2 commits October 25, 2023 22:52

Revert "update language server files"

7a2e863

Fixes formatting for templates This reverts commit 455ad40.

fix threlte template

2d07b56

snuffyDev added 2 commits October 28, 2023 21:18

rm extra deps

a13c214

fix loading on safari

8f54fbb

vercel bot had a problem deploying to Preview – sveltelab October 30, 2023 16:28 Failure

add 'events' pkg

6dae990

vercel bot deployed to Preview – sveltelab October 30, 2023 16:56 View deployment

paoloricciuti reviewed Nov 28, 2023

View reviewed changes

snuffyDev added 2 commits December 15, 2023 03:09

Merge remote-tracking branch 'upstream/main' into svelte-language-server

448bc2f

tweak modification fs event execution

b18e205

rm `race` and run setup sequentially

[WIP] Svelte Language Server integration #277

Are you sure you want to change the base?

[WIP] Svelte Language Server integration #277

Uh oh!

Conversation

snuffyDev commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code changes

Components

webcontainer.ts

Uh oh!

vercel bot commented Aug 18, 2023

Uh oh!

vercel bot commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SarcevicAntonio left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SarcevicAntonio Oct 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snuffyDev commented Oct 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

snuffyDev commented Oct 28, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TKDev7 commented Oct 6, 2024

Uh oh!

paoloricciuti commented Oct 6, 2024

Uh oh!

Uh oh!

snuffyDev commented Aug 18, 2023 •

edited

Loading

`webcontainer.ts`

vercel bot commented Aug 18, 2023 •

edited

Loading

SarcevicAntonio left a comment •

edited

Loading

SarcevicAntonio Oct 25, 2023 •

edited

Loading

snuffyDev commented Oct 28, 2023 •

edited

Loading