Draft: Stackblitz webcontainer spike.
Related: Investigate a WASM or client-based approach to ... (gitlab#360865 - closed)
Spike of embedding Stackblitz, which uses a Webcontainer, into the Web IDE as a "preview" pane, via a VS Code extension command using a webview.
Goals:
-
Embed a hardcoded iframe project (svelte demo) in a Web IDE VS Code tab -
Use the StackBlitz JS API to embed the project instead of a hardcoded iframe. -
Hook the existing Web IDE filesystem up to the Stackblitz embedded webcontainer via applyfsdiff
API call
Note that this currently embeds all of stackblitz, including their VS Code editor instance, so we have "VS Code inside VS Code":
We can hide everything but the stackblitz preview pane by default, but the user can still re-display the editor with the bottom-right editor
or both
buttons.
Therefore, this would not be a viable approach for a user-facing GitLab Web IDE preview pane feature.
Stackblitz does have a webcontainer API, which could possibly allow us to embed only the preview Webcontainer, but it is currently in a closed alpha. We are currently in the process of requesting access.