-
-
Notifications
You must be signed in to change notification settings - Fork 570
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
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, $);
}
Library for Web-Based Terminal in JavaScript, (jQuery Terminal: git repo)
Copyright (c) 2011-2023 Jakub T. Jankiewicz