Code Monkey home page Code Monkey logo

react-xterm's Introduction

react-xterm

Simple react component for xterm.js

Steps to use react-xterm in your project:

Hit npm install react-xterm from you project root directory.

For sample project

react-xterm-sample

Now the version number is based on XTerm.js version number. Easier to see what you are working with.

react-xterm's People

Contributors

dependabot[bot] avatar exabugs avatar farfromrefug avatar guneetgstar avatar lukevp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-xterm's Issues

Buffer the input data to server with a debounce

Question on how to make the frontend server less chatty. Instead of sending every key entered to the backend, how can we buffer the data and send to the backend after every second. Also, we capture certain keystrokes such asenter keyetc. to invoke an action to send the data to the backend server. We also need to make sure the inputted data printed on the UI won't be printed again in the UI if it sends back from the server.

Let me know if you have any thoughts?

Dynamic requires causes webpack to include test files in bundle

react-xterm contains dynamic requires which causes Webpack to be overly aggressive when bundling and include all the addons and corresponding tests:

this.props.addons.forEach(s => {
  const addon = require(`xterm/dist/addons/${s}/${s}`);
  Terminal.applyAddon(addon);
});

Causing the following error:

* chai in ./node_modules/xterm/dist/addons/attach/attach.test.js, ./node_modules/xterm/dist/addons/fit/fit.test.js and 4 others
* express in ./node_modules/xterm/dist/addons/zmodem/demo/app.js
* express-ws in ./node_modules/xterm/dist/addons/zmodem/demo/app.js
Caused by this dynamic require which causes webpack to bundle all the addons and their tests:

Perhaps the signature of this.props.addons can be an array of the addon modules directly, rather than an array of strings which are converted into dynamic imports?

How in JS

I've got an issue about making Xterm work with Javascript, i tried the code in the /dist/examples/javascript but it doesn't work... Do I need to use typescript ?

CSS

(Thanks for putting this component together, works perfectly for my needs)

I included the CSS from upstream xterm releases (totally works for me). How do you recommend including it?

I haven't seen much about this kinda thing (css) in 3rd party React components.

Ideally I'd like to

import 'react-xterm/css'

or something along those lines...

Update xterm?

This project is a few years behind current xterm. Are you able to update to the latest xterm and push a new npm package? If not, would you be willing to pass along maintenance of this and the npm package so I could keep this updated? I would gladly take over if you’d like.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.