Contributing to Fig.io (Autocomplete Tutorial Pt. 2)

Fig has improved my terminal experience in more ways than one. I was able to trim my oh-my-zsh profile to improve terminal start times. Through it VsCode style autocomplete, I'm now aware of flags and options on popular CLI command like git add, where the --all flag solved a pesky package.json change I was trying to stage.

Article No Longer Available

Fig's autocomplete is so good, that when a CLI doesn't have it - you notice. This was the case mongosh. Mongosh is a way to interact with your mongo clusters through the shell. It starts a node terminal, so you can rip javascript. I love it! However, I often need help crafting that connection query. Once I saw Fig didn't have mongosh autocomplete I honestly got a bit excited. Fig's autocomplete specs are open-sourced. Smart move by the founders, as it's worth it to me, to add certain specs I use a lot.

To be frank, when I was first downloading fig I saw the website sections on how you can contribute. My first thought was, this is probably more difficult than my learning tolerance will allow. I was completely wrong. Not only do they have a great guide on how to get your environment set up, but their overview of how command line arguments are made is even better.

The goal of an autocompletion spec is to outline the path a user can take with certain CLI packages. With npm you might start our with npm run or npm install. The available arguments between the two are wildly different. In the grand scheme of things, they are also both pretty simple commands. Luckily, Fig's spec is so flexible, you'll always find a solution to even seemingly abstract CLI.

After running:

npm run create-example

A file will be created inside the dev folder. Looking at that file we can start to see the template Fig follows. abc is or command - or in npm run install, npm is the command. Then we have our subcommand, checkout, which is the same as run. Then finally we have our options and/or arguments. Our main command has options like -v, as well does our subcommand. Once you get the mental model down of Fig, you can quickly code subcommand after subcommand. I'm also not a guy who can say I spend a lot of time in open source. I would like to, but I just don't feel like I have the technical ability. This is a great entry point into open source.

Let's talk about mongosh and Fig.

Most of the time you are passing a connection string into mongosh. You can think of that as a command -> argument input while most are command -> subcommand -> argument. This trips me up in the beginning. While the options of mongosh took the majority of the work, the top section is the most important. Here is what I wrote:

const completionSpec: Fig.Spec = {
  name: "mongosh",
  description:
    "The MongoDB Shell, mongosh  is a fully functional JavaScript and Node.js 14.x REPL environment for interacting with MongoDB deployments",
  args: {
    name: "Connection String",
    isOptional: true,
    default: "mongodb://localhost:27017",
    suggestions: [
      {
        name: "mongodb://localhost:27017",
        description:
          "Default Connection String; Equivalant to running mongosh without any commands",
      },
      {
        name: "mongodb+srv://cluster0.example.mongodb.net/sample_geospatial",
        description: "Atlas Connection String Example",
        priority: 35,
      },
    ],
  }, 

This shows us the capability of suggestions and defaults. When writing this code, I looked at other packages I understood. How did git implement something? The amount of extendibility you have with Fig is empowering. Not only am I just scratching the surface of Fig's capability, I'm sure the team is too.

feat: add autocomplete spec for `mongosh` #580

nicholasoxford posted on Sep 10, 2021

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

Introduce CLI completion MongoDB's Command Line Tool.

I also noticed the PR to delete package-lock from the repo so I went ahead and did that too.

What is the current behavior? (You can also link to an open issue here)

No autocomplete

What is the new behavior (if this is a feature change)?

Additional info: https://docs.mongodb.com/mongodb-shell/reference/options/

View on GitHub

If you are wondering how I knew what to add for each field, I followed Mongo's mongosh reference spec 1 for 1. It really became almost a meditative task. Once I made the pull request, their devs made a handful of meaningful comments that improved the quality of code greatly. I think you can learn a lot by looking at my spec, the mongo reference, and it running in the terminal. Thing's like getting someone's filepath to autocomplete is as simple as:

generators: {
          template: "filepaths",
        },

Since pushing this PR, I've already added features to the Github CLI, and hope on adding some more in the future. Furthermore, if someone from MongoDB wants to collaborate, my twitter is @nick__atl. I feel like I might be missing something from mongosh.

Nicholas Oxford