Hepsen.js NPM | npm.io

Hepsen.js (core) is a simple and perfomant web-based component written in TypeScript that lets you create terminals for use in the browser.

Key Features

Self-contained: Requires no dependencies to work.
Perfomant: It is lightweight and really fast.
Simple and minimal: Learn the basics that can be built on top of with little configuration.
Debuggable: The natural elements (div) can be inspected in your browser's devtools.
Well documented: Right from getting started, configurations, APIs, and beyond.
Efficient Execution: Commands are executed asynchronously and efficiently uses the event loop.
TypeScript Support: Smooth development with TypeScript Intellisense support in your code editor.

To Dos

Below are some of the features on the list and shall soon be added.

Multiple Command Execution - Ability to execute multiple commands using one-line statements with &&, || or ;.
Terminal Commands Suite - A package of commands from which you can import the commands you need.
Colored Output - Ability to print colorful logs in the terminal (something like chalk)
Plugin Intergration - Develop plugins to enhance a wonderful experience using hooks and events.
Backend Intergrations - Rich communications with the backend apps e.g. WebSockets with SocketIO or APIs

Note: The docs and API are subject to change and so you're kindly requested to keep up-to-date with the docs. Check out the documentation

Getting Started

Check out the official documentation or browse some examples.

With NodeJS & NPM installed, run the following:

Create project folder

mkdir app && cd app

Folder structure

--app
    |--index.html
    |--main.js
    |--node_modules/
    |--package.json

Installation
Initialize project with package.json
```
npm init -y
```
Install the hepsen.js package as a dependency
```
npm i hepsen.js
```
Install ViteJS as dev dependency (will be used to run a local dev server and build the app for production)
```
npm i -D vite
```

Project Development

index.html

Add the following lines of code index.html file.

  ...
  <style>
    * {
      box-sizing: border-box;
    }
    html, body {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    #app {
      height: 100vh;
    }
  </style>
  ...
  <div id="app"></div>
  ...
  <script type="module" src="./main.js"></script>
  ...

main.js

// hepsen.js styles
import "hepsen.js/dist/hepsen.min.css";

// hepsen.js script
import Terminal from "hepsen.js";

const term = new Terminal({
  target: '#app',
  prompt: '$',
  theme: 'dark'
});

Preview
Run a local dev server with ViteJS with:
```
npx vite
```
Now go to http://localhost:5173 in your browser. You should have your first Hepsen.js terminal running!
Note: The port number might differ depending on whether or not you already have an application using that port number. Port number might be: 5713, 5714, 5715, 5716, ...

Browser Support

Hepsen.js source code is transpiled from TypeScript into JavaScript and finally into ES5 JavaScript using Babel. All browsers supporting ES5 are supported. Modern browsers including Chrome, Firefox, Safari, and Edge (for desktop and mobile devices) are supported.