robert-harbison/xterm-for-react

A React wrapper made for XTerm.js

xterm-for-react's Issues

Request for implementation of term-addon-fit with xterm-for-react

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

Lacking support for React 18

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.

support passthrough props

So that we can do:

<XTerm data-testid="terminal"/>

and access that programmatically during testing.

Terminal `.write()` stops working after component is first unmounted

Description

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.

Cannot writeln after Promise .then or await

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>
  );
}

expose interfaces from `xterm`

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).

Text output doesn't match window width

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

react script fails on npm start [FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed]

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:

1. Go to 'example' folder
2. npm install
3. npm start

Expected behavior
The example app compiles and renders.

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version 93.0.4577.82 (64-bit)

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

Bug on JS

Now in the editor there is a choice of language - JS. But it does not work correctly. In the browser console outputs the result, but in the editor console - no. We need to fix this error and make it so that everything is displayed correctly.

SyntaxError: Unexpected token 'export'

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:

1. Render Xterm component
2. Run the dev server
3. See error

Expected behavior
Render the Terminal UI.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 100

React 17 Support

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.

Addons/fit

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;

how i can access docker container terminal exist on nodejs server via socket.io using reactjs

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.