linuswillner / react-console-emulator Goto Github PK

Hi - thanks for making this software, it's great! I have a question - I would like the initial welcome message and subsequent messages to be printed to the screen 1 character at a time, with e.g. a 40ms delay. I've managed to use an interval + pushToStdout to do this, but each character is being printed on its own line, rather than in one line.

Is there an option I'm missing whereby I can simulate typing in this way, so that each pushToStdout can be configured to either print to a newline or to keep the new characters in the same line?

##UPDATE##
I managed to get the effect I want, but it feels pretty hacky, I'd be happy to know if someone has a better solution!

  useEffect(() => {
    const welcomeMessageDelay = setInterval(() => {
      const terminal = terminalRef.current;
      // console.dir(terminal);
      let cachedInput =
        (terminal.state.stdout[0] && terminal.state.stdout[0].message) || "";
      terminal.clearStdout();
      terminal.state.stdout.push({
        message: (cachedInput += welcomeText.shift()),
      });
      terminal.setState({
        stdout: terminal.state.stdout,
      });
      if (welcomeText.length === 0) {
        clearTimeout(welcomeMessageDelay);
      }
    }, 80);
    return function clearTimer() {
      clearTimeout(welcomeMessageDelay);
    };
  }, []);

At the end of each file in the package version from npm a larger definition regarding the ReactHotLoader is contained.
When I include this package I have 20 instances of that including the path C:\Users\LWTech Gaming\Code Projects\react-console-emulator\src in my bundle.

Probably this is a configuration error in webpack step?

Hi,

Just a small note about manualPushToStdout. Wouldn't it be better if it's available as a component function instead of having it static? What if I want to have multiple console instances available?

What do you think? :)

Due to stringify-object being dependent on get-own-enumerable-property-symbols and target for Node.js instead of browsers ( yeoman/stringify-object#49 (comment) )
UglifyJS throws error while compiling this with react

SyntaxError: Unexpected token: operator (>) [./~/get-own-enumerable-property-symbols/lib/index.js:3,0]

Just a thought why not use JSON.stringify instead?

Hello thank you for creating this library. Before on version 3.0.5, I was allow to push in react elements something like this:
pushToStdout(<span className="style">message</span>); which allowed me to style the message. However, after I upgraded to 4.0.1, I can no longer push element in. Even if I push react elements, it is converted into strings. Is there a way I can push in elements like before?

TerminalMessage is currently wrapping all messages with a p tag. If you want to make something more fancy with the message, for example a list you will get the validateDOMNesting(...): <ul> cannot appear as a descendant of <p> error.

I'd suggest to wrap all messages in a div

file: TerminalMessage.js
row: 51

return this.props.dangerMode ? _react["default"].createElement("p", (0, _extends2["default"])({
        style: styles.message
      }, (0, _reactInnerHtml["default"])(content))) : _react["default"].createElement("p", {
        style: styles.message
      }, content);

Currently setting the disabled property to true does not hide the prompt label, which makes sense from a semantic perspective.

Looks like that as it is today, to fully mimic a read-only state I both have to set disabled property to true as well as set the promptLabel to a non-empty whitespace string.

Maybe having either a readOnly property (controlled approach) or hidePromptWhenDisabled property ("set and forget" approach) would be a good middle ground between keeping a more granular and semantic API but also not forcing the user to keep tabs on the label prompt value so much.

Curious on your thoughts on the matter.

Is there a way to display the text information that has been passed on?
For example, the device information passed from the listener.
THANKS.

I have looked at the Live Demo and I think there's already a way to break lines in welcomeMessage that I don't know. :(

allowing html parsing using dangerMode={true} prop causes what would be my custom label '$ myUsername' to echo back as [Object, object]

I think it will be nice if users could distinguish between command and response :)

Is there a prop that I can use to handle my input (command), so I can take the input, send it over network (http, ws, ...) and then print the result I get, without checking if the input is part of commands prop, so i don't get Command 'my-command' not found! ?

With 1.7.0, I get this error, I thought it was a linking issue of mine when I tried to use it from a forked repo, but now I get it from prod. as well.

Edit: I can't re-open @linuswillner

Originally posted by @jvorcak in #36 (comment)

Thanks for the great library!

In most terminals, if you type a line longer than the width of the window, it wraps the text

In react-console-emulator, it would scroll instead.

HTML input can't wrap the text, a textarea is probably required for this.

Is there an easy solution for this ?

Thanks

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

  promptLabel={() => {
    return <div className="line">
      <span className="black _red">
        {dayjs().format('HH:mm:ss')}
      </span>
	  <span>$</span>
    </div>
  }}

so the prompt label could change dynamicly.

Is there any option to execute a command or echo some text programmatically from outside the terminal?

@linuswillner does this package support react-native?

Looks like evrything that is considered "history" is assigned an uniform css style, and only the latest/active prompt label and input text have a distinct styling applied to them, however that is not how it works on most real-life terminals and it kind of breaks the "illusion" of being on an actual terminal quite a lot, imho.
It would be nice to know if this happens to be a known limitation and something that is on your radar as a possible point for enhancement.

Hi again :)

I think there is a last problem in a build process. And that is IE11 support.
Not even live demo works in IE11.
https://linuswillner.me/react-console-emulator/

I think it's some kind of transpilation thing, the output contains => which IE11 doesn't know about. Can you please have a look? I'm playing arout your babel configs, but so far no luck

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

I'll check if this exists, if it doesn't I'll try to whip it up.

It would be great to have a command autocompletion and possibly a callback to provide further completions.

Similar to how it's done here https://github.com/rohanchandra/javascript-terminal/blob/af6ab7c18e595341c3e2d5a79e07f68cb51ef2c2/src/emulator/auto-complete.js

I would try to implement this as a PR but wanted to open an issue first to get feedback.
Maybe @linuswillner you already have some thoughts about it?

I was searching the API for some method like updateHistoryAtIndex(index, updatedString) but could not find one.
This would be super useful for things like counters, progress indicators and such.

Let me know if there is some workaround/hack in order to accomplish this.

Hi,
This terminal is great.
I'm using a combination of two terminals one is in locked mode, sized for a single line and used as input, while the other one is read only and used as an output.
Something on the line of this (copied from vscode terminal):

And using react-console-emulator:

• The single line height with lock enabled for the input terminal, sort of works, with the caveat that the scrollbar will appear after the first command (as seen in the screenshot above), and the prompt will shift up a bit.

• I often used pushToStdOut for the output terminal when a command is invoked from the input terminal. It would be great if this function allowed to control the color of the content that is being pushed, so I can color the command echo and the result differently.

• Also, it would be great if there was a catch all command, which could be used to display an invalid command message to the output terminal.

How can i simulate stream of output on console emulator. i am getting live data from server need to show it on terminal.

Hi there,

When I set dangerMode={true} with every command I always get:[object Object] echoed back before my content is displayed.

        <Terminal
          dangerMode
          style={termStyle}
          commands={commands}
          welcomeMessage="HISAC Emergency Terminal. Authorised access only!"
          promptLabel={promptLabel}
          autoFocus
          ref={ref}
          noAutoScroll
        />

when any of my commands the [object] [Object] comes up:

[object Object]
Processing...
PRE: DIR: ARCHIVES
PRE: RES: INTENRAL
POS: DIC: INTERFACES
CON: DIC: EXTERNAL
PRE: DIR: CLASSIFIED

It appears to be replacing the "prompt" and the "command" with [object] [Object]

$/ ls

when I press enter, it gets replaced with:

[object] [Object]

I got duplicate welcomeMessage. Can you help me find the way to fix it?

Hi again,

I'm trying to use this in a real application and I only have limited space to show a console.
I've set maxHeight by using contentClassName property. However now I want my console to scroll to bottom every time it's needed (after a command is executed).

For this, I'm missing some public method on a component that would

1. Scroll console to a bottom so that I can see my prompt after each command
2. Allows me to specify a callback that will be executed after each command (so that I can call scrollToBottom there), right now I can do it in my custom commands, but I can't do it if the command doesn't exist.

Another option is to have boolean property that will scrollToBottom after command is executed. Maybe it's worth even to have it true by default.

What do you think?

I love what you've done with the project, it is by far the most usable and extendable react-based terminal. I noticed while using react-console-emulator, that the terminal can get very laggy when many high-speed terminal.pushToStdout() occur, and it gets much worse when the terminal output begins to be the length of millions. Implementing a solution using refs would be painful, and I think it would be much more reasonable to add the option for other people to use. I published a fork that implements the max output prop and submitted a pull request #1015.

Would this be something you are willing to implement?

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.1 to 16.6.2.

• The dependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

I'm trying to find a solution where I can automatically put text in the code console without the user typing the command. And the welcome message doesn't help. I need to enter more lines of text depending on what the user is doing on the site, without typing anything in the console. may? and if so, what is the order?

A blue border appears when the input text gets the focus (Chrome, Safari). That should be configurable with a prop.

I'm using version 4.0.1.

I'm making a request to my server. The response i'm getting I'm outputting to the console via console.log() and this is what I'm seeing:

Object { output: "hello world\nhello world\nhello world\n" }

I outputting this output message to the terminal, but this is what it looks like:

hello world hello world hello world 

I even explicitly added the noNewlineParsing={false} option, but no luck.

Any ideas as to how I can go about fixing this?

The "Live demo" link in the repository's readme points to a page that no longer exists. Would be nice to have this fixed for evaluation purposes.

Hi,

As of now console needs the list of commands on creation and the commands are case-sensitive.
Although my requirement will be enough just to have case insensitive commands but i think a command verifier / provider callback will make it even more powerful.

This could enable case insensitive and option to have commands which are indexed
like instead of having all commands Command1, command2, command3 provided I can just use Command as supported command.

Hi,
I've tried setting the height but I can't figure out how to.
I tried putting everything inside a table but it didn't work.
Thanks for this awesome component.

If trying to select content text using mouse, the selection clears automatically.

I've looked through the docs and so far as I can tell there isn't something like:

terminal.pushToStdoutWithResponse('Would you like to play a game? [Y/N]: ').

Is this something that's available that I've just missed or would this need to be a code change to accomodate?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Terminal looks great! I'm just wondering if it's possible to get a catch all mechanism for commands that don't exist.

I'd like to actually handle the fact that a command doesn't exist

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Thank you for creating this component and open-sourcing it.

While using it I encountered an issue. Because of the implementation of CDU where JSON.stringify is used, this.validateCommands() is not called if the implementation of some function is changed.
https://github.com/js-rcon/react-console-emulator/blob/master/src/components/Terminal.jsx#L230

I think a better compare function (based on comparing pointers) could resolve the issue. I need this because I dynamically change the behaviour of commands based on Redux state.

I might try to create a PR, I'm just very busy right now, so I keep it here if someone wants to take an initiative.

Good job!

pushToStdout = (message, options) => {
  const { stdout } = this.state

  if (this.props.locked) stdout.pop()

  stdout.push({ message, isEcho: options?.isEcho || false })

  /* istanbul ignore next: Covered by interactivity tests */
  if (options?.rawInput) this.pushToHistory(options.rawInput)
  this.setState({ stdout: stdout })
}

Here the state object is being changed inplace, so setState does nothing. Probably it's minor, since I couldn't observe the bug.