Skip to content

josemarluedke/glimmer-docgen-typescript

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

glimmer-docgen-typescript

Extract information from Glimmer components to generate documentation using typescript parser/checker.

Compatibility

  • Node.js v10 or above
  • TypeScript v4.0 or above

Installation

npm install --save-dev glimmer-docgen-typescript
# or
yarn add -D glimmer-docgen-typescript

Usage

const docgen = require('glimmer-docgen-typescript');
const fs = require('fs');

const components = docgen.parse([
  {
    root: __dirname,
    pattern: '**/*.ts'
  }
]);

fs.writeFileSync('output.json', JSON.stringify(components));

Options

You can customize the TypeScript parser using the compilerOptions object or pass the path to the tsconfig.json.

Each source can have it's own compiler options.

const docgen = require('glimmer-docgen-typescript');
const path = require('path');

docgen.parse([
  {
    root: __dirname,
    pattern: '**/*.ts',
    options: {
      compilerOptions: {
        allowJs: true
        // ....
      }
    }
  }
]);

// or using tsconfig.json

docgen.parse([
  {
    root: __dirname,
    pattern: '**/*.ts',
    options: {
      tsconfigPath: path.join(__dirname, 'tsconfig.json')
    }
  }
]);

Example

Input

Here is a component definition:

import Component from '@glimmer/component';

interface DrawerArgs {
  /** If the Drawer is open */
  isOpen: boolean;

  /** This called when Drawer should be closed */
  onClose: (event: Event) => void;

  /**
   * If set to false, closing will be prevented
   *
   * @defaultValue true
   */
  allowClosing?: boolean;

  /**
   * The Drawer can appear from any side of the screen. The 'placement'
   * option allows to choose where it appears from.
   *
   * @defaultValue `right`
   */
  placement?: 'top' | 'bottom' | 'left' | 'right';

  /**
   * The Drawer size.
   *
   * @defaultValue `md`
   */
  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

/**
 * The component description here
 *
 * @since 1.0.0
 */
export default class Drawer extends Component<DrawerArgs> {}

Output

Here is the output:

[
  {
    "name": "Drawer",
    "fileName": "app/components/drawer.ts",
    "args": [
      {
        "name": "allowClosing",
        "type": {
          "name": "boolean"
        },
        "isRequired": false,
        "description": "If set to false, closing will be prevented",
        "tags": {
          "defaultValue": {
            "name": "defaultValue",
            "value": "true"
          }
        },
        "defaultValue": "true"
      },
      {
        "name": "isOpen",
        "type": {
          "name": "boolean"
        },
        "isRequired": true,
        "description": "If the Drawer is open",
        "tags": {}
      },
      {
        "name": "onClose",
        "type": {
          "name": "(event: Event) => void"
        },
        "isRequired": true,
        "description": "This called when Drawer should be closed",
        "tags": {}
      },
      {
        "name": "placement",
        "type": {
          "name": "enum",
          "raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
          "options": [
            "'top'",
            "'bottom'",
            "'left'",
            "'right'"
          ]
        },
        "isRequired": false,
        "description": "The Drawer can appear from any side of the screen. The 'placement'\noption allows to choose where it appears from.",
        "tags": {
          "defaultValue": {
            "name": "defaultValue",
            "value": "`right`"
          }
        },
        "defaultValue": "`right`"
      },
      {
        "name": "size",
        "type": {
          "name": "enum",
          "raw": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"",
          "options": [
            "'xs'",
            "'sm'",
            "'md'",
            "'lg'",
            "'xl'",
            "'full'"
          ]
        },
        "isRequired": true,
        "description": "The Drawer size.",
        "tags": {
          "defaultValue": {
            "name": "defaultValue",
            "value": "`md`"
          }
        },
        "defaultValue": "`md`"
      }
    ],
    "description": "The component description here",
    "tags": {
      "since": {
        "name": "since",
        "value": "1.0.0"
      }
    }
  }
]

This information can be used to create an interface similar to what you can see below:

UI Example

Thanks

Inspired by react-docgen-typescript.

License

This project is licensed under the MIT License.