shell.how ·

Explain shell commands using next-generation autocomplete from Fig.

Contributing

Requirements

• Node 14

• Yarn 1.22+

Setup

1. Install requirements

2. Clone the repository

3. Run yarn to install dependencies

Develop

Tech stack

• TypeScript

• Next.js

• Tailwind CSS

• Recoil for state management, it works natively with React concurrent mode & has builtin caching, allows lean pattern for querying dynamic data (see hooks/use-spec.ts)

• React concurrent mode for loading data before rendering components & handling errors

Start development

• Run yarn start to start development

• Commit adhering to Angular commit convention, use yarn commit or Code conventional commits to commit interactively

• Submit a PR and make sure required status checks pass

• When a PR is merged or code is pushed to main:

  • Vercel deploys latest changes to shell.how

  • Github validates and creates a new release if there're relevant changes

Understand parser

The parser has 2 steps:

1. Escape and split the string into tokens delimited white space, a quoted string is a single token. Nested quotes are supported, too.

2. Load Fig's autocomplete spec for the command (the first token from step 1). Iterate through the tokens, validate, and annotate the tokens with information from the spec.

interface Token extends SimpleToken, Fig.BaseSuggestion {
  indices: [number, number]; // [start, end], end is exclusive
  value: string; // a copy of [start, end) from original string
  type: "command" | "subcommand" | "option" | "argument";
}

Author

Minh-Phuc Tran (@phuctm97) - Fig