Как создать документацию для React Native?

Я протестировал Doxygen и несколько проектов GitHub (jsdoc, реагировать на docgen, реагировать на doc -g, используя npm я -g например:

react-doc-generator ./ -o DOCUMENTATION.md
react-docgen --pretty -o out/reactdocgen.html ./
jsdoc ./src
doxywizard

Но никто на самом деле не понимает недавние ES6 JavaScript и JSX для React Native (даже не говоря о нативном коде). Я заканчиваю с бесполезной документацией.

Конечно, я пытался добавить комментарии (и\fn для doxygen), но комментарии полностью вводятся вручную (не генерируются), а иногда и кода в документации нет.

/**
 * 
 * 
 * @class MainScreen
 * @extends {Component}
 */
class MainScreen extends Component {
    /**
     * 
     * \fn navigationOptions()
     * @static
     * @memberof MainScreen
     */

Наконец, я не нашел, как сделать jsdoc папку и подпапки (но результаты теста для закомментированного файла были ниже).

Поэтому я обращаюсь к гуру документации React Native и спрашиваю: как генерировать документацию для React Native?

Если это только из комментариев, есть ли у вас инструмент для создания комментариев из кода RN + ES6 (+Native)?

Бонус: можем ли мы, например, автоматически получить диаграмму из операторов импорта? Нравится: app-diagram

Ответы

Ответ 1

ESDoc может понимать и документировать ES6 JavaScript и JSX для React Native. Он будет документировать код с комментариями или без комментариев. Я использовал его с плагином ESDoc JSX. Как уже упоминали другие в комментариях, есть даже плагины, которые будут поддерживать последние предложения ECMAScript.

В качестве примера того, что вы получите, вы можете взглянуть на код ES6 redux-высшего порядка-редукторов, документированный с помощью ESDoc.

Наконец, я не нашел, как сделать jsdoc папку и подпапки (но результаты теста для закомментированного файла были ниже).

Вы можете указать, какую папку документировать в вашем конфигурационном файле .esdoc.json. Вот пример, который только документирует код в папке "src"

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {"name": "esdoc-standard-plugin"},
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Бонус: можем ли мы, например, автоматически получить диаграмму из операторов импорта?

ESDoc не делает это напрямую, но это довольно легко сделать, используя функцию "ручного" ESDoc, которая позволяет вам включать ваши собственные документы. Начните с использования чего-то вроде madge для генерации диаграммы из операторов импорта. Например:

./node_modules/.bin/madge --image manual/asset/graph.svg src/

Затем создайте файл с именем manual/imports-diagram.md со следующим содержимым:

# Diagram of imports
![Diagram of imports](asset/graph.svg)

Наконец, измените конфигурацию ESDoc, указав раздел руководства пользователя:

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {
      "name": "esdoc-standard-plugin",
      "option": {
        "manual": {
          "asset": "./manual/asset",
          "files": [
            "./manual/imports-diagram.md"
          ]
        }
      }
    },
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Запустите esdoc раз, и диаграмма импорта будет включена в ваши документы.