stackblitz / webcontainer-core

Dev environments. In your web app.
https://webcontainers.io
MIT License
3.94k stars 174 forks source link

What kinds of extensions can Codeflow run? Any way to sideload? #853

Open lewisl9029 opened 2 years ago

lewisl9029 commented 2 years ago

Describe the bug

I was excited to learn the new Codeflow beta supported extensions, since I was looking for an alternative to running Reflame projects using our VSCode extension in GitHub Codespaces, which is slow and prohibitively expensive for many.

However, when I tried to install the extension through the marketplace, it didn't come up in search. I tried a few more random extensions, and some of them also seemed to be missing. This leads me to believe there's an allowlist of some kind.

A few questions:

  1. Which kinds of VSCode extensions can Codeflow run? Since it's built on WebContainers, my hope is that it can run not just web-compatible extensions, but the whole gamut including those using node-exclusive APIs like the node-based git extension that Reflame currently depends on (the web-compatible git-base extension is missing a bunch of APIs).
  2. Is there a way to test out extensions in Codeflow outside of the current allowlist, say by sideloading them? And after we've tested them out, any way to request them to be added to the allowlist?

Link to the blitz that caused the error

https://stackblitz.com/~/github.com/reflame/example-just-react

Steps to reproduce

  1. Open any project
  2. Go to the extensions tab
  3. Search for Reflame
  4. Find that no results come up

Expected behavior

  1. Reflame extension exists in the list and can be installed

Parity with Local

Screenshots

No response

Platform

Version = 1.67.0
Hash = 38afc2533e9f1c1993b0ec404ee8058cfe0e0c99
WebContainer = d01b439520bbf0eaddbcd406fb838a0f8f913e9f

Browser name  = Chrome
Full version  = 106.0.0.0
Major version = 106
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.42
performance.memory = {
  "totalJSHeapSize": 121623627,
  "usedJSHeapSize": 96857651,
  "jsHeapSizeLimit": 4294705152
}

Additional context

No response

HeyGarrison commented 2 years ago

Hey @lewisl9029! Thanks for the issue!

Currently, we don't have an extension marketplace. Since we're early in the process we looked at what was most popular and was most requested by users and manually loaded those extensions. We're definitely interested in pursuing a marketplace of sorts for extensions, but don't have plans in that direction yet.

In regards, to running extensions for development purposes in CodeFlow - you can definitely do that!

Here is a repo where I actually sideload and symlink-ed a very basic extension: https://pr.new/HeyGarrison/codeflow-extension

The main logic behind the extension's setup is that all of the extensions are located in the .codeflow folder. See the symlink command here: https://github.com/HeyGarrison/codeflow-extension/blob/b30a2a700e14e9827ec8f37c0d40901bc82eb09a/package.json#L71

I'm not super sure if your extension can be developed in StackBlitz, but this should at least get you going in the right direction.

lewisl9029 commented 2 years ago

@HeyGarrison thank you so much for the example repo! Definitely puts me on the right track. Will explore further and get back to you if I run into any further blockers.

y-nk commented 2 years ago

hi @HeyGarrison! i'm looking to sideload an extension too. i've created a working vscode extension, and now trying to sideload it in codeflow.

my plan was to checkout the git repo of the extension, install & build it directly in the .codeflow/extensions folder. it works fine but the IDE doesn't seem to pick it.

how do you force-sideload the new extension? is there some refresh command i dont see?

KwintenP commented 2 years ago

Hi @y-nk ,

Once you've symlinked your extension, you can go to the extension panel, click on the refresh icon (see screenshot). This will allow you to look for your extension and then you can enable it.

image

Hope this helps!

y-nk commented 2 years ago

@KwintenP after a couple of debugging it worked (mostly the extensionKind needed to be set, and the engine.vscode should be 1.57.0 so that codeflow allows installation)

sadly now i'm stuck again because my extension uses a too recent version of git (2.37 expected, 2.32.0 installed) so it breaks at activation (i should probably handle that in some way later on tho 🤔)

KwintenP commented 2 years ago

Oh thats awesome! Great work!

The git cli we use is a custom written one. So it doesn't use the native one you have on local. Which also means that we can't just update the version. Are you actively checking the version in your extension? Are there any specific commands that you use that you'd need to be available? If so, we could potentially look into providing them.

y-nk commented 2 years ago

@KwintenP i think i could eventually write the same commands differently, but for the sake of being elegant i'm using git branch --contains which seems to break in codeflow. since i can't pass this step i'm not sure of others, although it's the only one which seems rather "modern"