Skip to content

SolidJS

Jakub T. Jankiewicz edited this page May 11, 2024 · 2 revisions

This is how you can use jQuery Terminal with Solid:

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

terminal(window, $);

function Terminal() {
    const interpreter = {
        echo(...args: Array<number | boolean | RegExp | string>) {
            this.echo(args.join(' '));
        }
    };
    return (
        <div ref={node => {
            $(node).terminal(interpreter, {
                checkArity: false
            })
        }}/>
    );
}

Rember to not use class attribute with above div, otherwise Solid will remove .terminal class. If you want to add a class, wrap it with a div:

import styles from './App.module.css';

function Terminal() {
    const interpreter = {
        echo(...args: Array<number | boolean | RegExp | string>) {
            this.echo(args.join(' '));
        }
    };
    return (
        <div class={styles.terminal}>
          <div ref={node => {
              $(node).terminal(interpreter, {
                  checkArity: false
              })
          }}></div>
        </div>
    );
}

NOTE: You may need to do this, if you use Solid Starter and put <Terminal/> into <div class={styles.App}> that add text-align: center so you can remove it by adding:

.terminal {
   text-align: left;
}

into App.module.css file

Solid Start

When using Solid Start you need to wrap the invocation of the terminal with isServer check:

import { isServer } from 'solid-js/web';
// ...
if (!isServer) {
    terminal(window, $);
}
Clone this wiki locally