├── .gitignore ├── LICENSE ├── README.md ├── bin └── cli.js ├── example ├── README.md ├── components │ ├── multiple.jsx │ └── single.jsx └── package.json ├── package.json └── src ├── generator.js ├── index.js ├── markdown.js ├── replacer.js └── template.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | 4 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Javier Sánchez - Marín 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-docgen-readme 2 | 3 | CLI tool that extracts information from React Components using [react-docgen](https://github.com/reactjs/react-docgen), transforms that information into Markdown and adds it to your README file. 4 | 5 | 6 | ## Install 7 | 8 | $ npm install --save-dev react-docgen-readme 9 | 10 | 11 | ## Usage 12 | 13 | $ rdr [options] 14 | // `rdr` is a shortcut for `react-docgen-readme` 15 | 16 | 17 | 1. Add the delimiter in your README file to indicate where you want to insert the docs 18 | 19 | ```markdown 20 | 21 | ``` 22 | 23 | 2. Then add a new task in your package.json to generate the docs. Note that you must specify the path for the readme and for the components to be documented. 24 | 25 | ```json 26 | "scripts": { 27 | "docs": "rdr src/ --readmeFile docs/README.md" 28 | } 29 | ``` 30 | 31 | 32 | ### Configuration 33 | 34 | #### --readmeFile 35 | 36 | **Default:** `'./README.md'` 37 | 38 | The path to the readme file where generated documentation is appended. 39 | 40 | #### --template 41 | 42 | **Default:** `'react-docgen/readme/src/template.md'` 43 | 44 | The path to the template used for generating the markdown documentation. 45 | 46 | #### --delimiter 47 | 48 | **Default:** `'react-components-docs'` 49 | 50 | Use a custom delimiter. Used to let the tool know where to place the docs in your readme. 51 | 52 | This generates `` and `` delimiters. 53 | 54 | #### --ext 55 | 56 | **Default:** `['.js', '.jsx']` 57 | 58 | File extensions to consider. Used by `react-docgen`. 59 | 60 | 61 | #### --ignoreDir 62 | 63 | **Default:** `['node_modules', 'bower_components']` 64 | 65 | Folders to ignore. Used by `react-docgen`. 66 | 67 | 68 | ## Running the project locally 69 | 70 | Clone the project and from the root of the repo run the following commands: 71 | 72 | $ npm install 73 | $ npm link 74 | $ cd example/ 75 | $ npm link react-docgen-readme 76 | 77 | Then, from `example/` you can run `npm run docs` and see the magic happen. 78 | 79 | ### Debugging 80 | 81 | With [iron-node](http://s-a.github.io/iron-node/) 82 | 83 | $ iron-node bin/cli.js components/ --readmeFile ./README.md 84 | 85 | With [node-inspector](https://github.com/node-inspector/node-inspector) 86 | 87 | $ node-debug bin/cli.js components/ --readmeFile ./README.md 88 | 89 | 90 | ## License 91 | 92 | Distributed under the MIT license. 93 | 94 | ## TO-DO -------------------------------------------------------------------------------- /bin/cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var program = require('yargs'); 3 | var docGen = require('../src/generator.js'); 4 | 5 | var argv = require('yargs').demand(1); 6 | 7 | Object.keys(docGen.defaults).forEach(function(optKey) { 8 | var optDefault = docGen.defaults[optKey]; 9 | argv = argv.option(optKey, { 10 | default: optDefault 11 | }); 12 | }); 13 | 14 | argv = argv.argv 15 | 16 | docGen.generator(argv._[0], argv); 17 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | ## Synopsis 2 | 3 | At the top of the file there should be a short introduction and/ or overview that explains **what** the project is. This description should match descriptions added for package managers (Gemspec, package.json, etc.) 4 | 5 | ## Code Example 6 | 7 | Show what the library does as concisely as possible, developers should be able to figure out **how** your project solves their problem by looking at the code example. Make sure the API you are showing off is obvious, and that your code is short and concise. 8 | 9 | ## Motivation 10 | 11 | A short description of the motivation behind the creation and maintenance of the project. This should explain **why** the project exists. 12 | 13 | ## Installation 14 | 15 | Provide code examples and explanations of how to get the project. 16 | 17 | 18 | 19 | ## API Reference 20 | 21 | Depending on the size of the project, if it is small and simple enough the reference docs can be added to the README. For medium size to larger projects it is important to at least provide a link to where the API reference docs live. 22 | 23 | ## Tests 24 | 25 | Describe and show how to run the tests with code examples. 26 | 27 | ## Contributors 28 | 29 | Let people know how they can dive into the project, include important links to things like issue trackers, irc, twitter accounts if applicable. 30 | 31 | ## License 32 | 33 | A short snippet describing the license (MIT, Apache, etc.) -------------------------------------------------------------------------------- /example/components/multiple.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | 4 | /** 5 | * TabsNav 6 | */ 7 | export class TabsNav extends Component { 8 | 9 | static propTypes = { 10 | items: React.PropTypes.arrayOf(React.PropTypes.string).isRequired 11 | } 12 | 13 | render() { 14 | var links = this.props.items.map(function(title) { 15 | return {title}; 16 | }); 17 | 18 | return () 19 | } 20 | } 21 | 22 | 23 | /** 24 | * Tabs 25 | */ 26 | export default class Tabs extends Component { 27 | 28 | static propTypes = { 29 | /** The index of the active pane */ 30 | current: React.PropTypes.number, 31 | /** An array containing all the panes */ 32 | panes: React.PropTypes.arrayOf(React.PropTypes.object) 33 | } 34 | 35 | static defaultProps = { 36 | current: 0, 37 | panes: [ 38 | { 39 | title: 'Pane 1', 40 | content: ({'Pane 1 content'}) 41 | }, 42 | { 43 | title: 'Pane 2', 44 | content: ({'Pane 2 content'}) 45 | } 46 | ] 47 | } 48 | 49 | render() { 50 | var titles = this.props.panes.map(function(d) { return d.title; }); 51 | var current = this.props.panes[this.props.current]; 52 | var content = current ? current.content : ''; 53 | 54 | return (
55 | 56 | {content} 57 |
); 58 | } 59 | } -------------------------------------------------------------------------------- /example/components/single.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | 4 | /** 5 | * Slider 6 | */ 7 | export default class Slider extends Component { 8 | 9 | static propTypes = { 10 | /** The index of the active pane */ 11 | current: React.PropTypes.number, 12 | /** An array containing all the panes */ 13 | panes: React.PropTypes.arrayOf(React.PropTypes.object) 14 | } 15 | 16 | static defaultProps = { 17 | current: 0, 18 | panes: [ 19 | { 20 | title: 'Pane 1', 21 | content: ({'Pane 1 content'}) 22 | }, 23 | { 24 | title: 'Pane 2', 25 | content: ({'Pane 2 content'}) 26 | } 27 | ] 28 | } 29 | 30 | render() { 31 | var titles = this.props.panes.map(function(d) { return d.title; }); 32 | var current = this.props.panes[this.props.current]; 33 | var content = current ? current.content : ''; 34 | 35 | return (
{content}
); 36 | } 37 | } -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-docgen-readme-example", 3 | "version": "0.0.0", 4 | "description": "At the top of the file there should be a short introduction and/ or overview that explains **what** the project is. This description should match descriptions added for package managers (Gemspec, package.json, etc.)", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "docs": "rdr components" 8 | }, 9 | "author": "vieron", 10 | "license": "MIT" 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-docgen-readme", 3 | "version": "0.0.1", 4 | "description": "CLI tool that extracts information from React Components using react-docgen, transforms that information into Markdown and adds it to your README file.", 5 | "repository" : { 6 | "type" : "git", 7 | "url" : "https://github.com/vieron/react-docgen-readme.git" 8 | }, 9 | "main": "src/index.js", 10 | "bin": { 11 | "react-docgen-readme": "bin/cli.js", 12 | "rdr": "bin/cli.js" 13 | }, 14 | "author": "vieron", 15 | "license": "MIT", 16 | "dependencies": { 17 | "lodash.compact": "^3.0.0", 18 | "lodash.foreach": "^3.0.3", 19 | "lodash.merge": "^3.3.2", 20 | "lodash.template": "^3.6.2", 21 | "markdown-utils": "^0.7.1", 22 | "node-dir": "^0.1.11", 23 | "react-docgen": "^2.4.0", 24 | "yargs": "^3.31.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/generator.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var reactDocs = require('react-docgen'); 5 | var dir = require('node-dir'); 6 | var compact = require('lodash.compact'); 7 | var merge = require('lodash.merge'); 8 | 9 | var markdowm = require('./markdown.js'); 10 | var replacer = require('./replacer.js'); 11 | 12 | 13 | var defaults = { 14 | ext: ['js', 'jsx'], 15 | ignoreDir: ['node_modules', 'bower_components'], 16 | template: path.join(__dirname, './template.md'), 17 | readmeFile: './README.md', 18 | delimiter: 'react-components-docs' 19 | } 20 | 21 | function generator(path, opts, done) { 22 | opts = merge({}, defaults, opts); 23 | 24 | readFiles(path, opts, function(files) { 25 | var markdown = generateMarkdown(files, opts.template); 26 | replacer.replaceFile(opts.readmeFile, markdown, opts); 27 | typeof done === 'function' && done(markdown); 28 | }); 29 | } 30 | 31 | function extensionMatcher(ext) { 32 | return new RegExp('\\.(?:' + ext.join('|') + ')$'); 33 | } 34 | 35 | function readFiles(path, opts, done) { 36 | opts || (opts = {}); 37 | var files = []; 38 | 39 | dir.readFiles(path, { 40 | match: extensionMatcher(opts.ext), 41 | excludeDir: opts.ignoreDir 42 | }, 43 | function(error, content, filename, next) { 44 | if (error) { process.exit(1); } 45 | files.push({ 46 | path: filename, 47 | docs: extractDocs(filename, content) 48 | }); 49 | next(); 50 | }, 51 | function(error) { 52 | if (error) { process.exit(1); } 53 | done(files); 54 | }); 55 | } 56 | 57 | function extractDocs(filename, filecontent) { 58 | var resolver = reactDocs.resolver.findAllComponentDefinitions; 59 | try { 60 | var parsed = reactDocs.parse(filecontent, resolver); 61 | return parsed instanceof Array ? parsed : [parsed]; 62 | } catch(e) { 63 | console.log('Not able to parse any docs in: %s', filename); 64 | return []; 65 | } 66 | } 67 | 68 | function generateMarkdown(files, tplPath) { 69 | var docs = files.map(function(f) { 70 | return markdowm.fileToMarkdown(f, tplPath); 71 | }); 72 | return compact(docs).join('\n\n'); 73 | } 74 | 75 | module.exports.generator = generator; 76 | module.exports.defaults = defaults; 77 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./generator.js'); -------------------------------------------------------------------------------- /src/markdown.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fs = require('fs'); 4 | var path = require('path'); 5 | var compileTemplate = require('lodash.template'); 6 | var merge = require('lodash.merge'); 7 | var forEach = require('lodash.foreach'); 8 | var mdu = require('markdown-utils'); 9 | 10 | 11 | function docToMarkdown(doc, tplPath, srcPath) { 12 | var tplContents = fs.readFileSync(tplPath); 13 | if (!tplContents) { return ''; } 14 | 15 | var data = merge({}, mdu, { 16 | _: { forEach: forEach } 17 | }); 18 | 19 | var template = compileTemplate(tplContents.toString(), { 20 | imports: data, 21 | variable: 'c' 22 | }); 23 | 24 | return template(doc); 25 | } 26 | 27 | function isDocEmpty(docMd) { 28 | return docMd.join('').replace(/\n/g, '').trim().length === 0; 29 | } 30 | 31 | function fileToMarkdown(file, tplPath) { 32 | if (!file) { return; } 33 | var docHeader = mdu.link(path.basename(file.path), file.path) + '\n'; 34 | var docMd = file.docs.map(function(d) { 35 | return docToMarkdown(d, tplPath, file.path); 36 | }); 37 | 38 | if (isDocEmpty(docMd)) { return ''; } 39 | 40 | return (docHeader + docMd.join('\n')); 41 | }; 42 | 43 | module.exports.docToMarkdown = docToMarkdown; 44 | module.exports.fileToMarkdown = fileToMarkdown; 45 | -------------------------------------------------------------------------------- /src/replacer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fs = require('fs'); 4 | var endDelSuffix = ':end'; 5 | 6 | 7 | function addDelimiters(str, delimiter) { 8 | debugger; 9 | return (delimiterTag(delimiter) + '\n' + 10 | str + 11 | delimiterTag(delimiter + endDelSuffix)); 12 | }; 13 | 14 | function delimiterTag(delimiter) { 15 | return ''; 16 | } 17 | 18 | function delimiterRegex(delimiter) { 19 | return new RegExp( 20 | [''].join(''), 'gi'); 21 | } 22 | 23 | function endDelimiterRegex(delimiter) { 24 | return delimiterRegex(delimiter + endDelSuffix); 25 | } 26 | 27 | function replaceFile(filePath, docs, opts) { 28 | var fileContents = fs.readFileSync(filePath).toString(); 29 | var newContents = replaceContents(fileContents, docs, opts); 30 | if (! newContents) { 31 | console.log('No file updated!', filePath); 32 | return; 33 | } 34 | 35 | fs.writeFileSync(filePath, newContents); 36 | console.log('The file `%s` has been successfully updated with the docs!', filePath); 37 | return newContents; 38 | } 39 | 40 | function replaceContents(str, docs, opts) { 41 | var startDel = delimiterRegex(opts.delimiter); 42 | var endDel = endDelimiterRegex(opts.delimiter); 43 | 44 | var hasStartDel = str.match(startDel); 45 | var hasEndDel = str.match(endDel); 46 | 47 | if (!hasStartDel && !hasEndDel) { 48 | console.warn([ 49 | 'No indicator found in file.', 50 | 'You need to add `%s` to let the me know where to append the docs.' 51 | ].join(''), delimiterTag(opts.delimiter)); 52 | return; 53 | } 54 | 55 | docs = addDelimiters(docs, opts.delimiter); 56 | 57 | if (hasEndDel) { 58 | return str.replace( 59 | new RegExp(startDel.source + ('(.|\\n)+') + endDel.source), docs); 60 | } 61 | 62 | if (hasStartDel) { 63 | return str.replace(startDel, docs); 64 | } 65 | } 66 | 67 | 68 | module.exports.replaceContents = replaceContents; 69 | module.exports.replaceFile = replaceFile; -------------------------------------------------------------------------------- /src/template.md: -------------------------------------------------------------------------------- 1 | <%= h3(c.description) %> 2 | 3 | <%= h4('Props') %> 4 | <% _.forEach(c.props, function(prop, propName) { %> 5 | <%= h5(propName) %> 6 | 7 | - <%= strong('required:') %> <%= prop.required %> 8 | - <%=strong('type:') %> <%= prop.type.name %> <% if (prop.type.value && prop.type.value.name) { %><%= prop.type.value.name %><% } %> 9 | 10 | <%= prop.description %> 11 | <% }); %> --------------------------------------------------------------------------------