npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kobakazu0429/xterm-local-echo

v0.0.3

Published

A local echo controller for xterm.js

Downloads

12

Readme

local-echo

this repository is folkd from [wavesoft/local-echo] and rewrited to typescript.

A fully functional local echo controller for xterm.js

You will be surprised how difficult it is to implement a fully functional local-echo controller for xterm.js (or any other terminal emulator). This project takes this burden off your hands.

Features

The local echo controller tries to replicate most of the bash-like user experience primitives, such as:

  • Arrow navigation: Use left and right arrows to navigate in your input
  • Word-boundary navigation: Use alt+left and alt+right to jump between words
  • Word-boundary deletion: Use alt+backspace to delete a word
  • Multi-line continuation: Break command to multiple lines if they contain incomplete quotation marks, boolean operators (&& or ||), pipe operator (|), or new-line escape sequence (\).
  • Full-navigation on multi-line command: You are not limited only on the line you are editing, you can navigate and edit all of your lines.
  • Local History: Just like bash, access the commands you previously typed using the up and down arrows.
  • Tab-Completion: Provides support for registering your own tab-completion callbacks.

Demo

check it

https://kobakazu0429.github.io/local-echo/

Usage

As ES6 Module

  1. Install it using npm:

    npm install --save @kobakazu0429/xterm-local-echo

    Or yarn:

    yarn add @kobakazu0429/xterm-local-echo
  2. Use it like so:

    import { Terminal } from "xterm";
    import { LocalEchoAddon } from "@kobakazu0429/xterm-local-echo";
    
    const term = new Terminal();
    term.open(document.getElementById("terminal"));
    
    // Create a local controller
    const localEcho = new LocalEchoAddon();
    term.loadAddon(localEcho);
    
    // Create some auto-comple handlers
    localEcho.addAutocompleteHandler((index) => {
      if (index !== 0) return [];
      return ["bash", "ls", "ps", "cp", "chown", "chmod"];
    });
    localEcho.addAutocompleteHandler((index) => {
      if (index === 0) return [];
      return ["some-file", "another-file", ".git", ".gitignore"];
    });
    
    // Infinite loop of reading lines
    const prompt = "~$ ";
    const readLine = async () => {
      const input = await localEcho.read(prompt);
      localEcho.println("You typed: '" + input + "'");
      readLine();
    };
    readLine();

API Reference

constructor(term, [options])

The constructor accepts an xterm.js instance as the first argument and an object with possible options. The options can be:

{
    // The maximum number of entries to keep in history
    historySize: 10,
    // The maximum number of auto-complete entries, after which the user
    // will have to confirm before the entries are displayed.
    maxAutocompleteEntries: 100
}

.read(prompt, [continuationPrompt]) -> Promise

Reads a single line from the user, using local-echo. Returns a promise that will be resolved with the user input when completed.

localEcho.read("~$", "> ")
        .then(input => alert(`User entered: ${input}`))
        .catch(error => alert(`Error reading: ${error}`));

.readChar(prompt) -> Promise

Reads a single character from the user, without echoing anything. Returns a promise that will be resolved with the user input when completed.

This input can be active in parallel with a .read prompt. A character typed will be handled in priority by this function.

This is particularly helpful if you want to prompt the user for something amidst an input operation. For example, prompting to confirm an expansion of a large number of auto-complete candidates during tab completion.

localEcho.readChar("Display all 1000 possibilities? (y or n)")
        .then(yn => {
            if (yn === 'y' || yn === 'Y') {
                localEcho.print("lots of stuff!");
            }
        })
        .catch(error => alert(`Error reading: ${error}`));

.abortRead([reason])

Aborts a currently active .read. This function will reject the promise returned from .read, passing the reason as the rejection reason.

localEcho.read("~$", "> ")
        .then(input => {})
        .catch(error => alert(`Error reading: ${error}`));

localEcho.abortRead("aborted because the server responded");

.print([message])

.println([message])

Print a message (and change line) to the terminal. These functions are tailored for writing plain-text messages, performing the appropriate conversions.

For example all new-lines are normalized to \r\n, in order for them to appear correctly on the terminal.

.printWide(strings)

Prints an array of strings, occupying the full terminal width. For example:

localEcho.printWide(["first", "second", "third", "fourth", "fifth", "sixth"]);

Will display the following, according to the current width of your terminal:

first  second  third  fourth
fifth  sixth

.addAutocompleteHandler(callback, [args...])

Registers an auto-complete handler that will be used by the local-echo controller when the user hits TAB.

The callback has the following signature:

function (index: Number, tokens: Array[String], [args ...]): Array[String] 

Where:

  • index: represents the current token in the user command that an auto-complete is requested for.
  • tokens : an array with all the tokens in the user command
  • args... : one or more arguments, as given when the callback was registered.

The function should return an array of possible auto-complete expressions for the current state of the user input.

For example:

// Auto-completes common commands
function autocompleteCommonCommands(index, tokens) {
    if (index == 0) return ["cp", "mv", "ls", "chown"];
    return [];
}

// Auto-completes known files
function autocompleteCommonFiles(index, tokens) {
    if (index == 0) return [];
    return [ ".git", ".gitignore", "package.json" ];
}

// Register the handlers
localEcho.addAutocompleteHandler(autocompleteCommonCommands);
localEcho.addAutocompleteHandler(autocompleteCommonFiles);