robert-harbison / xterm-for-react Goto Github PK
View Code? Open in Web Editor NEWA React wrapper made for XTerm.js
License: MIT License
A React wrapper made for XTerm.js
License: MIT License
I'm almost certain this isn't actually a bug but just an option that I can't find, though I had a look through the documentation for both react xterm and base JS and couldn't find what I was looking for.
For some reason my terminal output is far smaller than the terminal itself as pictured.
What would the correct syntax to solve this? Many thanks
is there a way for the fit
addon to work?
https://xtermjs.org/docs/api/addons/fit/
import React, { useState, useEffect } from 'react';
import { XTerm } from 'xterm-for-react';
import { FitAddon } from 'xterm-addon-fit';
const Terminal = (props) => {
const [input, setInput] = useState('');
const xtermRef = React.useRef(null);
const fitAddon = new FitAddon();
useEffect(() => {
// You can call any method in XTerm.js by using 'xterm xtermRef.current.terminal.[What you want to call]
xtermRef.current.terminal.writeln('Hello, World!');
fitAddon.fit();
}, []);
return (
<div style={{ backgroundColor: 'red', width: '1000px' }}>
<XTerm
ref={xtermRef}
addons={[fitAddon]}
onData={(data) => {
const code = data.charCodeAt(0);
// If the user hits empty and there is `something` typed echo it.
if (code === 13 && input.length > 0) {
xtermRef.current.terminal.write(
"\r\nYou typed: '" + input + "'\r\n",
);
xtermRef.current.terminal.write('echo> ');
setInput('');
} else if (code < 32 || code === 127) {
// Disable control Keys such as arrow keys
return;
} else {
// Add general key press characters to the terminal
xtermRef.current.terminal.write(data);
setInput((prev) => prev + data);
}
}}
/>
</div>
);
};
export default Terminal;
Describe the bug
Cannot writeln after Promise .then or await
To Reproduce
After do an fetch request the writeln function is not working, inside a try/catch or with a .then
Expected behavior
Write line correctly
Additional context
Code:
import * as React from 'react';
import { useEffect, useRef } from 'react';
import { XTerm } from 'xterm-for-react';
export default function App() {
const terminalRef = useRef();
const print = async () => {
try {
const response = await fetch(
'https://jsonplaceholder.typicode.com/users'
);
const data = await response.json();
terminalRef.current.terminal.writeln(JSON.stringify(data));
} catch (err) {
console.error(err);
alert('error');
}
};
useEffect(() => {
terminalRef.current.terminal.writeln('Hello, World!\n');
print();
}, []);
return (
<div>
<XTerm ref={terminalRef} />
</div>
);
}
Not sure if this needs anything updated to support it, but NPM doesn't want to install this project with react 17. It would be nice if the project updated to support it.
Describe the bug
After adding the Xterm
component and firing up the server, I'm being shown this error on a NextJS project. I'm not really sure if there are any other additional configurations to be made in order to render this component properly. If there is, I feel the README
section can be improved so that new-users don't face the same issue.
SyntaxError: Unexpected token 'export'
To Reproduce
Steps to reproduce the behavior:
Xterm
componentExpected behavior
Render the Terminal UI.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
I tried everything in Angular's Ng-terminal but still no luck, actually i am planing to make a web controlled dashboard for my docker so i had created dockerode api endpoint on my nodejs server now i want to make a sperate frontend from i can operate all my container,
everything work fine in angular but i am not able to implement terminal access at all
i want a live terminal console on web so i can access my container directly i found something similar to my project
https://github.com/qfdk/EasyDockerWeb
Describe the solution you'd like
I want a clear code snippet by which I can implement Xterm-addon-socket.
I am looking for the implementation of terminal with xterm-addon-fit library which will change the height of xterm when the size of my component changes....
Right now i am not able to implement that, maybe because the xterm. is wrapped in another div whose height i should modify using ref
xterm-addon-fit.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollback') at t.FitAddon.proposeDimensions (xterm-addon-fit.js:1:916) at t.FitAddon.fit (xterm-addon-fit.js:1:414) at ResizeObserver.<anonymous> (EdrEndpointDetails.js:313:64)
I am getting this error even after giving scrollback value to options prop
Is your feature request related to a problem? Please describe.
This is incompatible with React 18 via peer dependency. If you attempt to install this with React 18 installed, npm will give you an error
Describe the solution you'd like
I would like to see the peer dependencies updated to allow for this to be installed into a react 18 project
Describe alternatives you've considered
I have considered forking this repo and fixing it or using an existing fork, but I would prefer for the main repository to have this fix.
Additional context
Example of error:
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/xterm-for-react
npm ERR! xterm-for-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Describe the bug
There seems to be a memory related error when running npm start
on the example app.
To Reproduce
Steps to reproduce the behavior:
npm install
npm start
Expected behavior
The example app compiles and renders.
Desktop:
Additional context
Terminal Output
Compiling...
<--- Last few GCs --->
[1195:0x4f37c40] 138353 ms: Scavenge 1857.9 (2066.5) -> 1843.0 (2066.5) MB, 4.7 / 0.0 ms (average mu = 0.216, current mu = 0.163) allocation failure
[1195:0x4f37c40] 138393 ms: Scavenge 1858.2 (2066.5) -> 1844.1 (2067.5) MB, 5.6 / 0.0 ms (average mu = 0.216, current mu = 0.163) allocation failure
[1195:0x4f37c40] 139543 ms: Mark-sweep 1859.3 (2067.5) -> 1843.0 (2067.3) MB, 1117.6 / 0.5 ms (average mu = 0.156, current mu = 0.087) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0xa25510 node::Abort() [node]
2: 0x9664d3 node::FatalError(char const*, char const*) [node]
3: 0xb9a8be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
4: 0xb9ac37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
5: 0xd56ca5 [node]
6: 0xd5782f [node]
7: 0xd6566b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
8: 0xd6922c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
9: 0xd3790b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
10: 0x107fbef v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
11: 0x1426919 [node]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ../node_modules/react-scripts/bin/react-scripts.js start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/username/.npm/_logs/2021-09-27T09_02_10_990Z-debug.log
Currently xterm-for-react
does not expose any inferfaces from xterm
, meaning the consumer needs to import the type separately from xterm
and add that as a devDeps or deps (if using depcheck
to enforce all imports are added as dependencies).
So that we can do:
<XTerm data-testid="terminal"/>
and access that programmatically during testing.
When a component is unmounted, XTerm.tsx
calls this.terminal.dispose()
. As part of this call, xterm.js sets _isDisposed = true
and destroys its .write()
call.
Thereafter, all calls to .write()
will silently fail.
I have an issue open at xtermjs/xterm.js#3939 to address this, but I suspect this may be the wrong approach to take to unhook key handlers.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.