Add extension support for vscode web (github.dev)

[GagnDeep]

Github.dev doesn't have syntax highlighting of svelte files by default. While it does allow installing extensions, but svelte for vscode shows its not compatible with vscode-web

While enviroments like codesandbox does support svelte syntax highlighting and other language features but they were using the old jamesbirtles.svelte-vscode extension to support svelte source. But this extension is also not available in github.dev as it was removed from vscode marketplace

So is it possible to support the latest svelte for vscode extension to work in web enviroments for vs code like github.dev and github1s ?

[dummdidumm]

This is a significant undertaking which requires many different things

• Add a bundle step to ship a browser and editor version (related to Please can you optimize the size of the VSCode extension #139 ; I'd like to use rollup instead of webpack, if possible). This among other things needs to shim some node globals and alias node package imports to something that runs in the browser
• Adjust the code so that things that are dependent on the platform are refactored out into separate locations to better control what runs when
• Turn off some features like loading a svelte.config.js which is not possible because we can't load other scripts in a web context. I guess this is similar to the reduced feature set of untrusted workspaces (Support VS Code Workspace Trust feature  #1051)

More details can be found here: https://code.visualstudio.com/api/extension-guides/web-extensions

@asafamr did a POC of porting the language server to run in the monace editor, which is related: https://github.com/asafamr/monaco-svelte . Maybe he has some more insights.

[asafamr]

I'm not really familiar with VSCode web extensions but from a quick look, it does seem very similar. Two points I can think of

• Seems like you can't load other modules in VSCode web extensions - so some subset of used modules should be bundled in (svelte compiler, prettier + svelte plugin, postcss? preprocessor? typescript pp, svelte2tsx...?)
• File system - there are some calls to fs in the extension - mainly around the config manager. I see vscode has some fs abstraction layer. maybe a first step would be using it instead of node's fs module? If typescript is going to supported, it has its own fs abstraction api that needs to be implemented: System... I'm pretty sure someone has already integrated these two

I might try porting the POC to a web extension - I'll update here if I do

[jasonlyu123]

I think processor support might not be available in the web version. Since we can't load the svelte.config.js. So there won't be a way to config it. But we do have a built-in version of svelte-preprocess for typescript/esnext. If we were to retain the support for this in the web extension, maybe we'll also need to make sure we can make the svelte-preprocess available in the browser.

Another problem is I can think of it's probably the bundle size. Don't know how much the bundle size hurts the performance.

[asafamr]

I've started porting the language tools extension to vscode's web extension format:
https://github.com/asafamr/svelte-vscode-web

currently bundling with esbuild and shimming modules without changing the extension source code.

extension bundle size is currently around 10MB, half of which are typescript related modules: ts compiler, prettifier...

[dummdidumm]

@asafamr I saw you made progress and even published a POC to the marketplace - very cool! How is your feeling on getting this in a good state so far? My vision would be to adjust the official extension so that we can use it for the web, too - would you be ok with that? If that involves some refactoring around modules which need to be replaced depending on the environment I'm all for it.

Some questions:

• You used ESBuild to bundle the whole thing. Is this just a matter of preference and because it's faster, or are there limitations with using something like Rollup (I wouldn't want to use Webpack)
• It looks like you mostly shim modules that need replacement from the outside. How could this be improved by refactoring the svelte-language-server code? Are there are other things that need adjustment?

[asafamr]

@dummdidumm Yeah making the extension isomorphic is a great idea, I can give a hand if you would like. Two points i mentioned earlier:

• LSP browser filesystem support is a work in progress. I think official extensions like the typescript extension wait for this and provide limited functionality meanwhile.
• Another thing to consider is that extensibility is going to be limited and different. bundling all require()ed modules might make the extension too big and dynamically importing code is disabled in lsp workers (There might be some workarounds to this - creating additional web workers?) - anyway, probably at first, need to decide what goes in and what stays out of the browser setting.

stuff I would change in the extension:

• url handling need some modifications, file:// schema isn't necessarily used in vscode web
• preprocessing needs some thinking. maybe allow some limited functionality through static jsons?
• config manager could be cleaned up a bit - it has a lot of direct fs access

re esbuild, the speed is great for development but I believe anything it can do can be ported to rollup afterwards (why btw? bundle size should be smaller with rollup I guess)

[Jojoshua]

Just leaving a note to microsoft/monaco-editor#1745

[snuffyDev]

Reviving this thread, since recently I been working on svelte-language-server-web, which is nearly fully functional and could potentially be adapted for VSCode Web.

My package is based on the great work by @asafamr, so major credits go to him! Thank you, btw!

Working on a write up for @dummdidumm to go over the changes made and the steps taken to get this to work.