@husnain.taj/konsolejs NPM

KonsoleJS

A Promise based JavaScript Library for creating console UI on the web.

Disclaimer

This project is still under development so many things will break in future updates. I'm also not doing any versioning.

Demo

Checkout my Portfolio made using KonsoleJS

Quick Start

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Konsole Example</title>
</head>
<body>

    <div id="console"></div>

    <script>
        // This is just the code example
        // You must use a module bundler like browserify or webpack for this code to work
        import {Konsole, KonsoleSettings, Kommand} from "@husnain.taj/konsolejs";

        (async ()=>
        {
            let konsole = new Konsole("#console");

            await konsole.print("Hello Konsole!");

            konsole.awaitKommand();
        })();
    </script>
</body>
</html>

Documentation

KonsoleSettings

You can pass an instance of KonsoleSettings class when creating a Konsole instance to change some default behavior of the Konsole.

    let settings = new KonsoleSettings();
    settings.prefix = "C:\\>";

    let konsole = new Konsole("#console", settings);

    await konsole.print("Hello Konsole!");

    konsole.awaitKommand();

Following are the properties you can change.

Name	Default	Type	Description
prefix	"$ "	string	The string shown at the very beginning of a line.
animatePrint	true	bool	Whether to print text letter by letter or all at once.
printLetterInterval	25	int	The time in ms between each letter when printing.
registerDefaultKommands	true	bool	Whether to Register Default Kommands or not.

Kommand

A Kommand is just an object with following properties

Name	Type	Description
name	string	The name of the kommand that is used in konsole to execute it.
description	string	Short description of what the kommand does.
details	string	Detailed information about usage/syntax of a kommand. It is shown when using help kommandName.
func	string	A function that is executed when user enters the kommand in konsole.

Note: All the properties are required except details to Register a Kommand.

Konsole

The Konsole Class takes 2 arguments. 1. Query Selector string for the target konsole element 2. Konsole Settings object (Optional)

    let settings = new KonsoleSettings();
    settings.prefix = "$";

    let konsole = new Konsole("#my-konsole-element", settings);

    await konsole.print("Hello Konsole!");

    konsole.awaitKommand();

RegisterDefaultKommands

It will add following 2 Kommands to the Konsole.

clear - Empties the Konsole element's html.
help - Shows all registered Kommands

    konsole.RegisterDefaultKommands();

You can call this function manually or automatically by setting registerDefaultKommands = true in Konsole Settings.

RegisterKommand

Adds a new Kommand to valid Kommands List in the Konsole.

    let myKommand = new Kommand("clear", "clears the console.", null, () =>
        new Promise((resolve, reject)=>
        {
            $("#console").html("");
            resolve();
        })
    );

    konsole.RegisterKommand(myKommand);

awaitKommand

This method lets the user to enter a Kommand and then executes it when enter key is pressed.

    konsole.awaitKommand();

print

As the name suggests this will output the text/html in the console.

    // printing a single line
    await konsole.print("Hello Konsole!");

    // printing multiple lines 
    await konsole.print("Hello", "Konsole!");

If you have set animatePrint to true in Konsole Settings, and try to print HTML, The Konsole will first animately print the html as text and then replace the text with actual html.

So basically, if you do konsole.print("<a href='hello'>Konsole</a>");, you will not be able to click the link while Konsole is printing.

input

This method will get a string value from user.

    let age = await konsole.input("How old are you?");

    await konsole.print(`You said: ${age}`);

choice

This method will show the list of options with the question to the user. The user can select one of the options using arrow keys and press enter to submit.

    let selectedOption = await konsole.choice("Which language is the best?", ["C#", "C Sharp", "C++++", "Microsoft Java"]);

    await konsole.print(`You chose: ${selectedOption}`);

Known Bugs

too many to list rn, ill update this later when the project is stable.

Todo

Complete Quick Start
Complete Docs
Complete this Readme

console javascript console ui

jquery

@everything-registry/sub-chunk-406

9 months ago

9 months ago

9 months ago

9 months ago