docascode / Node2DocFX

An API documentation generator for JavaScript.
MIT License
3 stars 3 forks source link

Correct way of documenting JSX React #8

Open lipedeitos opened 6 years ago

lipedeitos commented 6 years ago

Hi! I'm using Node2DocFX to generate docs for my JSX/React componentes. I have installed and configured the Node2DocFX and it is actually working and generating the .yml in the folders that i want, so later i could get them with docfx build.

The problem is that i cannot find a way to document propTypes and properties of my component. Maybe i'm doing it the wrong way, I already did in many different ways and none of them work and dosnt generate the .yml correctly:

This Works:

/**
 * MyComponent Description.
 * @param {string} param1 - Param1 description.
 */
@MyDecorator
class MyComponent extends React.Component { }

But i would like to user propety instead, and this doesnt work:

/**
 * MyComponent Description.
 * @property {string} param1 - Param1 description.
 */
@MyDecorator
class MyComponent extends React.Component { }

Those other ways doesnt work too:

@MyDecorator
class MyComponent extends React.Component {
  /**
   * My propTypes description.
   * @property {string} prop1 - Prop 1 description.
   */
  static propTypes = {
    prop1: PropTypes.string
  }
}

@MyDecorator
class MyComponent extends React.Component {
  static propTypes = {
    /**
     * My propTypes description.
     * @property {string} prop1 - Prop 1 description.
     */
    prop1: PropTypes.string
  }
}

@MyDecorator
class MyComponent extends React.Component {
  static propTypes = {
    /** My propTypes description. */
    prop1: PropTypes.string
  }
}

I'v really tried many differente ways othar than that and none of them worked, the .yml stop being generated. What is the correct, or the best way for documenting JSX?

lipedeitos commented 6 years ago

Even trying to create a simple @typedef isn't possible:

/**
 * @typedef TestType
 * @type {object}
 * @property {string} id - an ID.
 * @property {string} name - your name.
 * @property {number} age - your age.
 */

/**
 * @class TestClass
 * @classdesc TestClass description.
 * @param {TestType} test - Test prop description
 */

This code generate a .yml like:

- id: 'TestClass.#ctor'
    uid: 'TestClass.#ctor'
    parent: TestClass
    name: TestClass(test)
    fullName: TestClass.TestClass(test)
    summary: ...
    type: Constructor
    syntax:
      parameters:
        - id: test
          type:
            - undefinedTestType
          description: Test prop description
      content: new TestClass(test)
    langs:
      - js