The architecture is quite simple:
Browser VSC <---wss---> Runner Server <---wss---> Runner Client
This is what will happen when you click "Start Session" in browser:
- Browser VSC establishes WebSocket connection to the runner server.
- Browser VSC requests a new session.
- Runner server generates a new session ID and tell Browser VSC the session is started.
- Browser VSC tries to launch runner client by dispatching workflow with session data.
- Browser VSC waits for runner client status report.
- Workflow installs and launches runner client.
- Runner server receives runner client for current session, then tells browser VSC it's ready to use.
Note the workflow will run in a forked repo to avoid easy usage limit hitting.
When runner client is online, terminal data will be exchanged via WebSocket. Session ID is required to map correct clients.
Only HTTP requests are supported for now. WebSocket forwarding is not availble.
The VSCode in your browser contains only static assets and it's hosted by GitHub Pages. The deployment is in github-vsc-website.
Powered by the Code - OSS project, and use the tag 1.53.2
for building. Would like not to do any modifications to keep it clean, but here comes to the result (I've tried hard, trust me):
src/vs/code/browser/workbench/workbench.ts
for simple workbench and several htmlwindow
related commands.src/vs/code/browser/workbench/one_dark.ts
for One Dark theme.src/vs/workbench/browser/parts/activitybar/activitybarActions.extended.ts
for an extended command to set the index of active side bar. (They just have go prev/next for now, interesting)src/vs/workbench/contrib/welcome/page/browser/vs_code_welcome_page.ts
for customized welcome page.
Heads to extensions/github-vsc
, and 2 webpack configs will be shown:
webpack.extension.js
andextension/
for extension itself which runs in awebworker
environment.webpack.web.js
andcontrol-panel/
for the control panel web view which using React / SASS modules.d.ts/
andtypes/
include shared type definitions.