[NPM]: feat: npm install autosuggests from npms.io

[DannyAziz]

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
Feature
What is the current behavior? (You can also link to an open issue here)
Npm install returns packages that are already in the package.json
What is the new behavior (if this is a feature change)?
Usesnpm search to search as you are typing
Additional info:

[QuiiBz]

Really cool idea! I don't know why but it's a lot slower for me, the npm search command takes ages. Any idea why?

[cstrnt]

Hey @DannyAziz you can use npm search --json which makes the string splitting stuff much easier, because you can just parse the json and look for thename prop :) You could also extract the description property as well and display it for the suggestion :)

[DannyAziz]

Hey @cstrnt --json seems to fail for me every time I use it with an error:

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://github.com/npm/cli/issues>

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/danny/.npm/_logs/2021-04-15T10_15_41_562Z-debug.log

[cstrnt]

@DannyAziz what npm version do you use? (npm -v) ?

[QuiiBz]

Having the same error with Node v15.9.0 and NPM v7.5.3

[cstrnt]

npm/cli#2845
It got fixed in version 7.6.2 and works with npm ~6.x

[brendanfalk]

Hey guys - so this generator is good, however, it would be best to switch over to running a curl request in our script hitting this API: https://api-docs.npms.io/.

Why?
We want generators that are 1. fast and 2. work on everyone's device. We can't assume that an end user has a specific version of a CLI installed (at least not until we version specs). Therefore, we always need a solution that works for everyone.

In general, I'd agree with Tim that using --json is nicer for parsing, however as it's not supported everywhere, we shouldn't do it.

https://api-docs.npms.io/ is fast and works for everyone and so we should switch to it. Not gonna merge this PR until that's done

[DannyAziz]

@falky97 Bump

[brendanfalk]

Code looks good, either @mattschrage or I will test later today / tomorrow
Two concerns:

1. npm install should ideally rank commands in the local package.json higher up should it not? I guess this is annoying to mix in a slow generator with a fast local json parse of the package.json... But we should think a little more about how to do this
2. Why is the check PR / danger test not working? (haven't had a chance to look into it)

[mschrage]

1. Does anyone really install local packages individually? Seems like the usual workflow is running npm install in this case. Totally could be wrong.

2. The danger.js workflow failing is not an issue with this PR. We just need to add a Github token for danger to use.

[brendanfalk]

Yeah @matt probably fair re npm local installs. The only times I have done it for local files was when I was updating the version number. Main workflow is installing foreign packages

[withfig-bot]

Overview

dev/npm.ts:

Info:

Script:
until [[ -f package.json ]] || [[ $PWD = '/' ]]; do cd ..; done; cat package.json
postProcess(function):

 function (out) {
              if (out.trim() == "") {
                return [];
              }

              try {
                const packageContent = JSON.parse(out);
                const scripts = packageContent["scripts"];
                const figCompletions = packageContent["fig"];

                if (scripts) {
                  const keys = Object.keys(scripts).map((key) => {
                    return Object.assign(
                      {},
                      { icon: "fig://icon?type=npm" },
                      figCompletions[key],
                      { name: key, insertValue: key }
                    ); // ensure that name and insertValue are defined by "scripts" dict
                  });
                  return keys;
                }
              } catch (e) {}

              return [];
            }

Script:
cat package.json
postProcess(function):

 function (out) {
              if (out.trim() === "") {
                return [];
              }
              try {
                const packageContent = JSON.parse(out);
                const dependencies = packageContent["dependencies"];
                if (dependencies) {
                  const dps = Object.keys(dependencies);
                  return dps.map((pkg) => {
                    const scope = pkg.indexOf("/") + 1;
                    if (scope !== -1) {
                      pkg = pkg.substring(scope);
                    }
                    const version = pkg.indexOf("@");
                    if (version !== -1) {
                      pkg = pkg.substring(version);
                    }
                    return {
                      name: pkg,
                      icon: `fig://icon?type=file`,
                      description: "dependency file",
                    };
                  });
                }
              } catch (e) {}
              return [];
            }

Script:
cat package.json
postProcess(function):

 function (out) {
              if (out.trim() === "") {
                return [];
              }
              try {
                const packageContent = JSON.parse(out);
                const dependencies = packageContent["dependencies"];
                if (dependencies) {
                  const dps = Object.keys(dependencies);
                  return dps.map((pkg) => {
                    const scope = pkg.indexOf("/") + 1;
                    if (scope !== -1) {
                      pkg = pkg.substring(scope);
                    }
                    const version = pkg.indexOf("@");
                    if (version !== -1) {
                      pkg = pkg.substring(version);
                    }
                    return {
                      name: pkg,
                      icon: `fig://icon?type=file`,
                      description: "dependency file",
                    };
                  });
                }
              } catch (e) {}
              return [];
            }

Single Functions:

script:

 function (context) {
    if (context[context.length - 1] === "") return "";
    const searchTerm = context[context.length - 1];
    return `curl -s -H "Accept: application/json" "https://api.npms.io/v2/search?q=${searchTerm}&size=250"`;
  }

postProcess:

 function (out) {
    return JSON.parse(out).results.map(
      (item) =>
        ({
          name: item.package.name,
          description: item.package.description,
        } as Fig.Suggestion)
    ) as Fig.Suggestion[];
  }

trigger:

 function () {
    return true;
  }

URLs:

• https://api.npms.io/v2/search?q=

[withfig-bot]

Hello @DannyAziz,
thank you very much for creating a Pull Request!
Here is a small checklist to get this PR merged as quickly as possible:

• Do all subcommands / options which take arguments have the arg property (arg: {})?
• Are all options modular? E.g. a -u -x instead of -aux
• Did you run npm run build?
• Have all other checks passed?

Please add a 👍 as a reaction to this comment to show that you read this.