Making Joyride work in VS Code for the web

[PEZ]

I think it would be very powerful to let people try out scripting VS Code without even installing it. I'm imagining these steps:

1. User: Points their browsers to https://vscode.dev/
2. User: Installs Joyride, which bundles Calva.
   • Joyride somehow recognizes that it is a first install and prompts for if a Getting Started would be interesting. If yes:
3. Joyride: Creates some Hello World example and opens it
4. Joyride: Tells Calva to start the Joyride REPL and Connect it

The Hello World example contains some instructions similar to the Getting Started with Calva for how to evaluate code. The code does some silly things with VS Code.

The example also has some links to videos and other material on how to levarage Joyride.

For this to work we need to solve one small (I think) problem and one big one.

• Small problem: Make Joyride work in VS Code Web
• Big problem: Make Calva work in VS Code Web.

The big problem has not been so interesting to solve before, because there hasn't been a REPL that we could run in VS Code Web. Now, if we solve the small problem, we have one.

Even if I think the problem with making Joyride work in the Web version of VS Code is not so big, I haven't succeeded when I have experimented with it.

In the experiment/web-vscode-joyride branch:

• the extension manifest is updated to make it a web version extension, making the entry point out/joyride.js.
• there is a Debug Launch definition for testing the extension as a web extension
• the shadow-cljs release is configured to do :simple optimizations (not necessary I think, I just want to be able to read the generated one-file)

When launching this I first do a shadow-cljs release and then launch. But the extension fails to load with this stack trace:

TypeError: Failed to fetch
	at self.fetch (vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/vs/workbench/api/worker/extensionHostWorker.js:78:2676)
	at L._loadCommonJSModule (vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/vs/workbench/api/worker/extensionHostWorker.js:77:63153)
	at async Promise.all (index 0)
	at async o._activate (vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/vs/workbench/api/worker/extensionHostWorker.js:71:8154)
	at async o._waitForDepsThenActivate (vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/vs/workbench/api/worker/extensionHostWorker.js:71:8096)
	at async o._initialize (vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/vs/workbench/api/worker/extensionHostWorker.js:71:7460)

In the guide for Web Extension i find:

• Importing or requiring other modules is not supported. importScripts is not available as well. As a consequence, the code must be packaged to a single file.
• The VS Code API can be loaded via the pattern require('vscode'). This will work because there is a shim for require, but this shim cannot be used to load additional extension files or additional node modules. It only works with require('vscode').
• Node.js globals and libraries such as process, os, setImmediate, path, util, url are not available at runtime. They can, however, be added with tools like webpack. The webpack configuration section explains how this is done.

I think the error I see is because we require path and os and other things. But I am not savvy enough to understand how we would go ahead add these with the tool chain we have (shadow-cljs).

Now I am unsure about what the next step here would be.

[PEZ]

Pinging in @isodor here, a PM on VS Code who feels strongly about VS Code Web.

[taydr]

Stumbled across this when figuring out a different issue, but I'm curious what's different about VSCode Web. I have no issue using Calva on Github Codespaces and Gitpod (both use VSCode Web) - is the difference that these are hosted containers?

[PEZ]

Yes, those are more like regular VS Code. There's a file system and an environment where other processes run and such. VS Code Web is running only in the browser.