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

omnicli

v0.2.0

Published

CLI framework designed for use in the browser

Downloads

12

Readme

OmniCLI

A command line framework designed to work within the omnibox API.

OmniCLI is being used in the Sourcegraph extension(FireFox, Chrome)! With it installed, type src<space> and then begin typing for search suggestions.

Features

Commands

OmniCLI parses an input and maps it to a given command. Commands can have aliases and sub commands.

Suggestions

OmniCLI will build a list of suggestions for you based on the available commands and return these as an suggestions menu. You can also provide suggestions for commands when a command is matched with an input before it is submitted.

Vim-like Suggestions Menu Navigation

The omnibox API only displays the first 6 items passed to it's suggest function. Because of this, we need a way to simulate scrolling through a list of suggestions.

See more info on how to use vim mode here.

Getting Started

yarn add omnicli
# or
npm i omnicli

Usage

Basic usage

import {createCli, Command} from 'omnicli';

function helloAction(args: string[]): void {
  console.log(`Hello, ${args.join(' ')}!`);
}

const helloCommand: Command = {
  name: 'hello',
  alias: ['greet'],
  description: 'Say hello',
  action: helloAction,
};

const cli = createCli({
  commands: [helloCommand],
});

cli.onInputEntered('hello beautiful world');
// => 'Hello, beautiful world!' will be logged
cli.onInputEntered('greet beautiful world');
// => 'Hello, beautiful world!' will be logged

With omnibox

browser.omnibox.onInputChanged.addListener((text, suggest) =>
  cli.onInputChanged(text).then(suggestions => suggest(suggestions)),
);

browser.omnibox.onInputEntered.addListener(cli.onInputEntered);

Suggestions

// ...

function getHelloSuggestions(args: string[]) {
  return ['Alice', 'Bob'];
}

const helloCommand = {
  name: 'hello',
  description: 'Say hello',
  action: helloAction,
  getSuggestions: getHelloSuggestions,
};

cli
  .onInputChanged('hello beautiful world')
  .then(suggestions => console.log(suggestions));

Scrolling in the list of suggestions.

function getHelloSuggestions(args: string[]) {
  return [
    'Suggestion 0',
    'Suggestion 1',
    'Suggestion 2',
    'Suggestion 3',
    'Suggestion 4',
    'Suggestion 5',
    'Suggestion 6',
    'Suggestion 7',
    'Suggestion 8',
    'Suggestion 9',
  ];
}

cli.onInputChanged('hello[jjjk]').then(suggestions => console.log(suggestions));

// 'jjj' down 3, 'k' up 1
// 'Suggestion 2' will be first

Sub commands

function helloAction(args: string[]) {
  console.log(`Hello, ${args.join(' ')}!`);
}

const helloCommand = {
  name: 'hello',
  description: 'Say hello',
  action: helloAction,
};

function sayAction(args: string[]) {
  console.log(`I say '${args.join(' ')}'!`);
}

const sayCommand = {
  name: 'say',
  description: 'Say something',
  action: sayAction,
  commands: [helloCommand],
};

const cli = createCli({
  commands: [helloCommand],
});

cli.onInputEntered('say Oi');
// => 'I say 'Oi'!'

cli.onInputEntered('say hello beautiful world');
// => 'Hello, beautiful world!'