web-dev-qa-db-fra.com

Comment générer de la documentation pour React Native?

J'ai testé Doxygen et plusieurs projets GitHub ( jsdoc , react-docgen , react-doc-generator using npm i -g comme:

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

Mais aucun ne comprend vraiment les récents JavaScript ES6 et JSX pour React Native (sans même parler de code natif). Je me retrouve avec une documentation inutile.

Bien sûr, j'ai essayé d'ajouter des commentaires (et\fn pour doxygen), mais les commentaires sont entièrement entrés à la main (non générés) et parfois le code dans la documentation n'est pas présent.

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

Enfin, je n'ai pas trouvé comment jsdoc un dossier et des sous-dossiers (mais les résultats des tests sur un fichier commenté étaient inférieurs).

Je me tourne donc vers React Gourous de la documentation native pour demander: Comment générer la documentation pour React Native?

S'il s'agit uniquement de commentaires, avez-vous un outil pour générer des commentaires à partir du code RN + ES6 (+ Native)?

Point bonus: pouvons-nous obtenir automatiquement un diagramme à partir des instructions d'importation par exemple? Comme: app-diagram

javascriptreact-nativenativediagramdocumentation-generation
24
user8036224

ESDoc peut comprendre et documenter ES6 JavaScript et JSX pour React Native. Il documentera le code avec ou sans commentaires docblock. Je l'ai utilisé avec le ESDoc Plugin JSX Comme d'autres l'ont mentionné dans les commentaires, il existe même des plugins qui prendront en charge les dernières propositions ECMAScript.

Pour un exemple de ce que vous obtiendrez, vous pouvez consulter le code ES6 redux-upper-order-reducers documenté à l'aide d'ESDoc .

Enfin, je n'ai pas trouvé comment jsdoc un dossier et des sous-dossiers (mais les résultats des tests sur un fichier commenté étaient inférieurs).

Vous pouvez spécifier le dossier à documenter dans votre .esdoc.json fichier de configuration. Voici un exemple qui documentera uniquement le code dans le dossier "src"

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

Point bonus: pouvons-nous obtenir automatiquement un diagramme à partir des instructions d'importation par exemple?

ESDoc ne le fait pas directement, mais il est assez facile de le réaliser en utilisant la fonction "manuelle" d'ESDoc qui vous permet d'inclure vos propres documents. Commencez par utiliser quelque chose comme madge pour générer le diagramme à partir des instructions d'importation. Par exemple:

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

Créez ensuite un fichier nommé manual/imports-diagram.md avec le contenu suivant:

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

Enfin, modifiez votre configuration ESDoc pour spécifier la section du manuel d'utilisation:

{
  "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}}
  ]
}

Exécutez à nouveau esdoc et le diagramme d'importation de madge sera inclus dans vos documents.

2
Todd Chaffee