hepsen.js

hepsen.js

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.

Quick Start

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.

API Reference Guide

Deep drive into how the different API works and their indepedent interfaces.

Check out the official reference guide.

Contributions & Issues

If you're having any issues getting started, or you'd just like some advice, then please don't be afraid to Open an Issue, we're here to help!

License (MIT)

Copyright (c) 2022 hepsen.js

Copyright (c) 2022 Henry Hale

Released under the MIT License