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

@withfig/autocomplete-types

v1.30.0

Published

Typings for fig autocomplete specs and other tools

Downloads

2,154

Readme

@withfig/autocomplete-types package

This is the package providing types for our autocomplete app.

Typings for fig autocomplete specs and other tools

Configure the global Fig namespace in your tsconfig.json:

{
  "compilerOptions": {
    // you may get some typecheck errors if you are using some node packages like "fs"
    // just include "node" in the below array. Same for "jest", "chai"...and so on.
    "types": ["@withfig/autocomplete-types"]
  },
}

FAQs

  • I have done everything described above but I can't get my IDE (e.g. VSCode) to detect the autocomplete types, what can I do? You should try some of the following steps:
  1. Restart the IDE
  2. Delete your node_modules/ folder and reinstall again the packages
  3. Restart the system

If you are still unable to use @withfig/autocomplete-types, please open an issue here.

Documenting the API

We use TSDocs to comment the exported symbols of the Fig namespace. In our docs generator, which is executed on our backend each time the types are updated, we perform some custom Typescript AST traversals and we retrieve all the exported nodes with their TSDoc comments.

For Fig members: see the website repo to find out more about the custom generator we are using for docs

How are the docs organized once they are parsed from the Typescript AST?

First of all we generate an entire page on the website for each of the main interfaces available in the Fig namespace, all the typealiases go to the "Others" page.

Supported TSDoc tags and custom JSDoc tags

Interface

  • @filename: to change the target filename of an interface (internal)
  • @excluded: do not generate docs for the Interface

Typealias

  • @param: The params of an exported function, the format MUST be @param <name of the param> <some description>. It can be provided multiple times for different params.
    /**
     * @param value some description for the value param
     */
    type Callback = (value) => void
  • @returns: An explanation of what is returned by a function.
    /**
     * @param value some description for the value param
     * @returns nothing
     */
    type Callback = (value) => void
  • @remarks: Further details about the implementation of the method, use cases...etc. This data will appear in the Discussion section.
  • @example: Provide examples about the usage of the API object. It is repeatable.
  • @excluded: do not generate docs for the Typealias

Interface member

  • @param: The params of an exported function, the format MUST be @param <name of the param> <some description>. It can be provided multiple times for different params.
    /**
     * @param value some description for the value param
     */
    memberName: (value) => void
  • @returns: An explanation of what is returned by a function.
    /**
     * @param value some description for the value param
     * @returns nothing
     */
    memberName: (value) => void
  • @remarks: Further details about the implementation of the method, use cases...etc. This data will appear in the Discussion section.
  • @example: Provide examples about the usage of the API object. It is repeatable.
  • @defaultValue: define the default value of a member.
  • @deprecated: Mark an API as deprecated providing an optional message about the deprecation.
    /**
     * @deprecated This message is optional
     */
    export const didChange = {
      subscribe: (notification) => { },
    } 
  • @excluded: do not generate docs for the member
  • @category: assign a category to an interface member

Custom resolution

We perform some analysis over the types before generating the docs. In particular all the types from the Fig namespace are replaced recursively with Typescript primitive types like functions, string...

For Interface members and Typealiases are available some additional tags that prevent complete or partial replacements of the Types.

  • @irreplaced: do not replace any Symbol contained in the one tagged
    // e.g. with the irreplaced tag
    type Data = string
    /**
     * @irreplaced
     */
    type Res = Data
    // will output
    type Data = string
    type Res = Data
    // e.g. without the irreplaced tag
    type Data = string
    type Res = Data
    // will output
    type Data = string
    type Res = string
  • @irreplaceable: this Typealias cannot be replaced in any Symbol that references the tagged one
    // e.g. with the irreplaceable tag
    /**
     * @irreplaceable
     */
    type Data = string
    type Res = Data
    // will output
    type Data = string
    type Res = Data
    // e.g. without the irreplaceable tag
    type Data = string
    type Res = Data
    // will output
    type Data = string
    type Res = string
  • @replaceFirstLevel: only replaces the direct Symbols contained in the tagged one, then act as @irreplaceable for those Symbols

IMPORTANT: when using types that reference themselves add an @irreplaceable tag to them (see SubcommandDiff)