Add integrated terminal panel with xterm.js and node-pty #715
Conversation
|
Hi @bobicloudvision ! |
|
I tested it and this is great!! 2 major problems:
|
|
Also, I found only this version available for addon-webgl: "@xterm/addon-webgl": "0.18.0" |
julien-moreau
left a comment
julien-moreau
left a comment
There was a problem hiding this comment.
Just some few comments
| "@radix-ui/react-tooltip": "^1.0.7", | ||
| "@radix-ui/react-radio-group": "^1.1.3", | ||
| "@xterm/addon-fit": "^0.10.0", | ||
| "@xterm/addon-webgl": "^0.19.0", |
There was a problem hiding this comment.
I found only this version available for addon-webgl: "@xterm/addon-webgl": "0.18.0"
| private _pty: NodePtyInstance | null = null; | ||
| private _projectPath: string | null = null; | ||
|
|
||
| constructor(props: IEditorTerminalProps) { |
| // WebGL not available; keep default renderer | ||
| } | ||
|
|
||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
You can use await waitNextFrame() that is available in src/tools/tools.ts
| }); | ||
|
|
||
| const ro = new ResizeObserver(() => { | ||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
Why is next frame needed here? Just for my culture
| name: "xterm-color", | ||
| encoding: "utf-8", | ||
| useConpty: false, | ||
| cwd: (options as any)?.cwd ?? process.cwd(), |
There was a problem hiding this comment.
options?.cwd ?? process.cwd() is enough
| encoding: "utf-8", | ||
| useConpty: false, | ||
| cwd: (options as any)?.cwd ?? process.cwd(), | ||
| env: (options as any)?.env ?? process.env, |
There was a problem hiding this comment.
options?.env ?? process.env is enough
| p.write(`${command}\n\r`); | ||
| } | ||
| const interactive: boolean = Boolean((options as any)?.interactive); | ||
| if (!interactive) { |
There was a problem hiding this comment.
if (!options?.interactive) { ... } is enough
|
@bobicloudvision any news ? |
2 participants
Summary
This pull request introduces a built-in terminal panel to the editor layout. It uses
xterm.jswithfitandwebgladdons for rendering andnode-ptyfor an interactive shell. The terminal automatically initializes when a project is open, follows the project’s working directory, resizes responsively, and restarts when the project path changes.Changes Made
Terminal integration
EditorTerminalcomponent rendering an embedded terminal panel with a sticky header.xterm.jswithFitAddonand optionalWebglAddonfor high-quality rendering and auto-fit behavior.node-ptyviaexecNodePtyto provide an interactive shell session.Project-awareness and lifecycle
projectConfiguration.pathand updates viaonProjectConfigurationChangedObservable.cwdis set relative to the current project path and re-initialized when the project changes.Responsiveness and UX
ResizeObservertriggersfit()for responsive sizing.Benefits
cwd, auto-restart on project switch).