| @ -0,0 +1,86 @@ | |||||
| --- | |||||
| title: Javascript Documentation Generation | |||||
| author: Brett Langdon | |||||
| date: 2015-02-03 | |||||
| template: article.jade | |||||
| --- | |||||
| I have always been trying to find a good Javascript documentation generator and | |||||
| I have never really been very happy with any that I have found. So I've decided | |||||
| to just write my own, DocAST. | |||||
| --- | |||||
| The problem I have always had with any documentation generators is they are | |||||
| either hard to theme or are sometimes very strict with the way doc strings are | |||||
| suppose to be written, making them potentially difficult to switch between | |||||
| documentation generators if you had to. So for a fun exercise I've decided to | |||||
| just try writting one myself, [DocAST](https://github.com/brettlangdon/docast). | |||||
| What is different about DocAST? I've seen a few documentation parsers which use | |||||
| regular expressions to parse out the comment blocks, which works perfectly well, | |||||
| except I've decided to have some fun and use | |||||
| [AST](http://en.wikipedia.org/wiki/Abstract_syntax_tree) parsing to grab the | |||||
| code blocks from the scripts. As well, DocAST doesn't try to force you in to any | |||||
| specific theme or display, instead it is used simply to extract documentation | |||||
| from scripts. Lastly, DocAST, doesn't use any specific documentation format for | |||||
| signifying parameters, returns or exceptions, it will traverse the AST of the | |||||
| code block to find them for you, so most of the time you just need to add a | |||||
| simple block comment describing the function above it. | |||||
| Lets just get to an example: | |||||
| ```javascript | |||||
| // script.js | |||||
| /* | |||||
| * This is my super cool function that does all sorts of cool stuff | |||||
| **/ | |||||
| function superCool(arg1, arg2){ | |||||
| if(arg1 === arg2){ | |||||
| throw new Exception("arg1 and arg2 cant be the same"); | |||||
| } | |||||
| var sum = arg1 + arg2; | |||||
| return sum; | |||||
| } | |||||
| ``` | |||||
| ```shell | |||||
| $ docast extract ./script.js | |||||
| $ cat out.json | |||||
| ``` | |||||
| ```javascript | |||||
| [ | |||||
| { | |||||
| "name": "superCool", | |||||
| "params": [ | |||||
| "arg1", | |||||
| "arg2" | |||||
| ], | |||||
| "returns": [ | |||||
| "sum" | |||||
| ], | |||||
| "raises": [ | |||||
| "Exception" | |||||
| ], | |||||
| "doc": " This is my super cool function that does all sorts of cool stuff\n" | |||||
| } | |||||
| ] | |||||
| ``` | |||||
| For more information check out the github page for | |||||
| [DocAST](https://github.com/brettlangdon/docast). | |||||
| The other benefit I have found with a documentation parser (something that just | |||||
| extracts the documentation information as opposed to trying to build it) is that | |||||
| you can get fun and creative with how you use the information parsed. For | |||||
| example, I've had someone suggest creating your doc strings as | |||||
| [yaml](http://www.yaml.org/). When you parse out the string just parse the yaml | |||||
| to get an object which is then easy to pass on to [jade](http://jade-lang.com/) | |||||
| or some other templating engine to generate your documentation. If you want to | |||||
| see an example of this, just check out the documentation for DocAST | |||||
| https://github.com/brettlangdon/docast/blob/master/lib/index.js#L127 and the | |||||
| code used to generate the docs at http://brettlangdon.github.io/docast/ | |||||
| https://github.com/brettlangdon/docast/tree/master/docs | |||||