add web support

[aeschli]

Hi vscode-yaml team!

I'm part of the VS Code team. We recently launched VS Code for the web with github.dev!

In VS Code for the web, both UI and extension host run inside the browser. The web extension guide describes what extensions need to do to run in the web extension host.

vscode-yaml was one of our test cases, and this PR shows how we got it to run. I hope you are interested to adopt.

Most importantly, LSP can now also run in the browser. See the LSP paragraph in the web extension guide and lsp-web-extension-sample for the details.

The changes I made:

• changes to the server:

  • see PR to yaml-language-server to provide a server main that runs in a webworker.
  • the yaml server has good abstractions, so he only thing I added was an abstraction for fs. In the web, all fs requests are forwarded to the client (via custom request 'fs/readFile') which uses vscode.workspace.fs
  • The yamFormatter is replaced with empty stubs to keep things simpler. Prettier can run standalone too, so it should not be too hard to bring it back.

• changes to the client

  • changed scr/extension.ts to work in both webworker and node. It could now be renamed to yamlClientCommon, but I kept the name to make code reviewing easier. There are new main files node/yamlClientMain and webworker/yamlClientMain which pass in some abstractions to the common code: telemetry and schemaCache
  • I didn't look into how the telemetry works, maybe it can be easely added to the web exension as well
  • Caching schemas not needed in the browser as the browser cache does it for us. So for the web it's not doing anything

• added webpack file that packages the client and the server. Packaging is needed for web extensions as loading modules is not supported

To try it out:

• yarn
• link to yaml-language-server with the PR changes (yarn link yaml-language-server)
• run the new launch config Launch Web Extension. This will open a reguar VS Code Desktiop but with the Yaml extension running in a web worker. To verify this, open a yaml file, run command Show Running Extensions and verify that it says web worker next to redhat.vscode-yaml
• run in a chromium browser with: yarn run-in-chromium

Let me know if you have any questions or need help.

[gorkem]

@evidolob This is a longer review. We probably need #596 to go in first.

[fbricon]

@aeschli could you please fix the conflicts?

[aeschli]

@fbricon merged...

[evidolob]

@aeschli Could you update PR once more? Sorry for delay, I will review this PR ASAP.

[aeschli]

@evidolob Merged one more time...

[Ameausoone]

great job @aeschli !

[aayshasura]

@aeschli I have been following the instructions above to get vscode-yaml web-extension in chromium and in extension-debug-mode . After linking the yaml-language-server. I have tried to run the web-extension both in a vscode Extension Development Host Window and in chromium.

Running Launch Web Extension opened a vscode Extension Development Host Window with redhat yaml visible in Running Extensions but no features(validation, autocompletion, jump to Schema) are working and the output channel YAML Support doesnt have any logs.

The Extension host(Worker) output channel reports the below error.

Running the yarn run-in-chromium a server starts listening to localhost:3000 but recieving assets are failing and a result the web-extension is not working .
This what the page and network tab looks like

How can I get this web-extension working?

[aeschli]

Sorry I don't have time to look into this in detail. Too suggestions

• makes sure to use the latest version of @vscode/test-web
• use the Developer: Show Running Extensions view to see whether your extension was loaded and in which extension host.