0

I am trying to include Jquery Terminal in my react application. I have got the terminal to display and to interpret commands from my custom interpreter function, however I need to reference the terminal from different scripts (mostly the term.echo function), and I am not sure what the best practice is for this.

So far I have the following setup.

My html looks like this

 <div className="content expand">
          
 </div>

I then initialize the terminal in the use effect hook. After importing

import $ from 'jquery'
import 'jquery.terminal'
import 'jquery.terminal/css/jquery.terminal.css';


useEffect(() => {
        $('.content').terminal({}, base);
      }, []);

I then push a interpreter from another script which works fine.

term.push(FirstTerm.interpreter, {});

The interpreter function in FirstTerm is as follows

interpreter: function(command, term) {
           console.log(term);
// id like to call a function from another script here, without passing a reference to term through, id like to just grab a reference to the global terminal object in that script. I have tried $.terminal but it is undefined. Which is not the case in my vanilla JavaScript/html implementation. 
        }

As the comment above id like to call a function from another script here, without passing a reference to term through, id like to just grab a reference to the global terminal object in various other scripts throughout my react app that either log to the terminal, or are triggered by the terminal. I have tried $.terminal but it is undefined. Which is not the case in my vanilla JavaScript/html implementation.

I thought about using useContext and passing a reference to term around but this seems like it could cause a big performance hit.

CHEESE
  • 15
  • 2
  • You can use `$.terminal.active()` this function that returns the active terminal on the page. If you want a list of terminals I'm afraid it's not exposed. Internally it's an instance of Cycle class. Another approach would be to use Context API. – jcubic Mar 17 '23 at 16:59
  • Hi. Thank you for your reply. $.terminal.active() is undefined. $ is defined and is working. I have tried importing jquery.terminal again in the script in which FirstTerm.interpreter is defined but it is still undefined in that scope. It seems like $.terminal isn't being defined in global scope for some reason. – CHEESE Mar 17 '23 at 17:26
  • First thing is that I would not use `import` with jQuery Terminal try this `const terminal = require('jquery.terminal'); terminal($, window); or terminal($)` this the proper way to import the library at least with common JS, ES Modules AFAIK doesn't work properly, at least I was not able to make it work properly. – jcubic Mar 17 '23 at 19:23

0 Answers0