Author: | mkrl |
---|---|
Views Total: | 212 views |
Official Page: | Go to website |
Last Update: | October 28, 2021 |
License: | MIT |
Preview:

Description:
ttty.js is a tiny yet customizable terminal emulator written in TypeScript.
It provides an easy way to embed a terminal in your web app, where your users can execute tasks or commands you pre-defined.
How to use it:
1. Install and import the ttty.js.
# Yarn $ yarn add ttty # NPM $ npm i ttty
import { initTerminal } from 'ttty'
2. Or insert the following files into your document.
<link rel="stylesheet" href="ttty.css" /> <script src="ttty.iife.js"></script>
3. Create an empty container for the terminal.
<div id="terminal"></div>
4. Initialize the terminal emulator.
ttty.initTerminal({ host: document.querySelector("#terminal"), })
5. Customize the bash prompt. Default: ‘$:’.
ttty.initTerminal({ host: document.querySelector("#terminal"), prompt: "[email protected]:~$ ", })
6. Customize the help message.
ttty.initTerminal({ host: document.querySelector("#terminal"), prompt: "[email protected]:~$ ", welcomeMessage: "Welcome to CSSScript.com. Type Help to get started.", })
7. Create your own commands. Default commands:
- help: Display all commands.
- command: Execute a command
ttty.initTerminal({ host: document.querySelector("#terminal"), prompt: "[email protected]:~$ ", welcomeMessage: "Welcome to CSSScript.com. Type Help to get started.", commands: { echo: { name: "echo", description: "a test command with one echo arg", argDescriptions: ["a string to be echoed in console"], func: ({ print }, argument) => { print(argument) } }, test: { name: "test", description: "a test command with no args", func: ({ print }) => { print("foo") } }, multiply: { name: "multiply", description: "Multiply two numbers", argDescriptions: ["number one", "number two"], func: ({ print }, one, two) => { print(Number(one) * Number(two)) } } } })
8. Enable/disable the Help command. Default: true.
ttty.initTerminal({ host: document.querySelector("#terminal"), prompt: "[email protected]:~$ ", welcomeMessage: "Welcome to CSSScript.com. Type Help to get started.", enableHelp: false, })
9. Determine the maximum number of commands that should be stored in the terminal. Default: 50.
ttty.initTerminal({ host: document.querySelector("#terminal"), prompt: "[email protected]:~$ ", welcomeMessage: "Welcome to CSSScript.com. Type Help to get started.", historyLength: 10, })
10. API methods.
// print text myTerminal.print(text, isCommand); // emulate a command execution myTerminal.run(text); // start a "foreground process" myTerminal.start(); myTerminal.stop(); // print text with a "typing" effect myTerminal.type(text, speed, callback);
11. Events.
const myTerminal = document.getElementById('terminal'); term.addEventListener('onInit', e => console.log("Initialized!")); term.addEventListener('onCommand', e => console.log("Executed!")); term.addEventListener('onCommand404', e => console.log("Non-existing command executed!")); term.addEventListener('onProcessStart', e => console.log("Process started!")); term.addEventListener('onProcessStop', e => console.log("Process stopped!")); term.addEventListener('onProcessInterrupt', e => console.log("Process interrupted with a keyboard!"));
Changelog:
v1.2.0 (10/28/2021)
- add support for long argument strings
v1.1.0 (10/27/2021)
- css: bundle CSS with JS and support themes
v1.0.3 (10/26/2021)
- Bug Fixes