Giter Club home page Giter Club logo

jsdoc-http-plugin's Introduction

This is a fork

This project is a fork of https://github.com/bvanderlaan/jsdoc-route-plugin Currently, bvanderlaan doesn't seems to be available to maintain the project so i'll continue here.

JsDoc HTTP Plugin

This is a plugin for JsDoc which is a tool to generate HTML documentation from comment blocks. JsDoc will scan your code files looking for comment blocks then generate a nicely formated HTML document.

JsDoc supports a number of tags to help document a number of things such as each parameter in a function or what the function will return. These tags are picked up by JsDoc and used when generating the HTML documentation; for example function parameters are shown in a table.

This plugin adds custom tags to JsDoc that work with the default document template. The custom tags are meant to help document HTTP endpoints.

How to install

First you need to install JsDoc

npm install jsdoc --save-dev

Then you need to install the JsDoc Route Plugin

npm install jsdoc-http-plugin --save-dev

Next you need to tell JsDoc to enable the plugin.

You can do this by adding a jsdoc.conf file and telling JsDoc to use it when you run it.

Example jsdoc.conf

{
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc","closure"]
    },
    "source": {
        "include": [ "." ],
        "exclude": [ "node_modules" ],
        "includePattern": ".+\\.js(doc|x)?$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "plugins": ["jsdoc-http-plugin"],
    "templates": {
        "cleverLinks": false,
        "monospaceLinks": false
    },
    "opts": {
      "recurse": true
    }
}

Now run JsDoc with the --config flag.

jsdoc --config jsdoc.conf

Caveats

  • when used with markdown plugin, it should be put before jsdoc-http-plugin

    "plugins": ["plugins/markdown", "jsdoc-http-plugin"],

Example

If you want to see an example of this plugin in action run the npm run example1 command. That will run JsDoc against a sample Express app located in examples and produce HTML documentation in the out folder. To view the documentation open out/index.html in a browser.

What are the new Tags

The new tags are all about documenting Express routes. Find a list of them and how they are to be used below.

@path

Because JsDoc does not know about routes we need to decorate the route documentation with the @name tag to make JsDoc think you are documenting a member of the given module. This will add an entry under the Members section in the HTML document; however, if we used only the @name tag to describe the route verb and path it might look a bit odd as it would show up like this:

(inner) POST /v1/files

To make documenting a route a bit nicer I suggest using the @name tag to define a common name for the route, such as File Upload, and the @path tag to define the verb and route path. Using the @path tag will also change the method attribute from (inner) to (path).

/**
 * Upload a file.
 *
 * @name File Upload
 * @path {POST} /v1/file
 */
server.post({
  url: '/v1/file',
}, (req, res, next) => {...}

The @path tag will add a table showing the HTTP verb (i.e. POST, PUT, DEL, GET), and the route path (i.e. /v1/files) for the route you are documenting just under the friendly name of the route above the details section.

Only one @path tag is expected per endpoint document.

@auth

The @auth tag allows you to state what authentication a route requires.

/**
 * Upload a file.
 *
 * @name File Upload
 * @path {POST} /v1/file
 * @auth This route requires HTTP Basic Authentication. If authentication fails it will return a 401 error.
 */
server.post({
  url: '/v1/file',
}, (req, res, next) => {...}

It will result in a new sub-heading called Authentication with whatever text you provided to the tag beneath it.

Only one @auth tag is expected per endpoint document.

@header

The @header allows you to document any parameters which are passed via the header of the HTTP request.

With this tag you need to provide the name and a description. The name is the first word of the text following the tag.

  • @header MyName And this part is the description

You can also optionally provide a type for the parameter.

  • @header {String} MyName And this part is the description
/**
 * Upload a file.
 *
 * @name File Upload
 * @path {POST} /v1/file
 * @header authorization is the identification information for the request
 * @header {String} user-id is the unique User Id to assign to the file
 */
server.post({
  url: '/v1/file',
}, (req, res, next) => {...}

The above would add a table under the route description that lists all the header parameters. You can use the @header tag as many times as you have parameters in your request header you wish to document.

@body

The @body allows you to document any parameters which are passed via the body of the HTTP request.

With this tag you need to provide the name and a description. The name is the first word of the text following the tag.

  • @body MyName And this part is the description

You can also optionally provide a type for the parameter.

  • @body {String} MyName And this part is the description

You can also specify that the parameter is optional by placing the name within square brackets.

  • @body {String} [MyName] And this part is the description

Lastly you can define a default value for the parameter. The idea is to document the value which will be used if the parameter is not provided.

  • @body {String} [MyName=Phillip] And this part is the description
/**
 * Upload a file.
 *
 * @name File Upload
 * @path {POST} /v1/file
 * @body {String} userId is the unique identifier for the user we are uploading the file to.
 * @body {Boolean} [sync=false] when true the route will be synchronous otherwise the route
 * is asynchronous.
 */
server.post({
  url: '/v1/file',
}, (req, res, next) => {...}

The above would add a table under the route description that lists all the body parameters.

You can use the @bodyparam tag as many times as you have parameters in your request body you wish to document.

@params

The @params allows you to document any parameters which make up part of the route path.

With this tag you need to provide the name and a description. The name is the first word of the text following the tag.

  • @params MyName And this part is the description

You can also optionally provide a type for the parameter.

  • @params {String} MyName And this part is the description
/**
 * Download a file.
 *
 * @name Download File
 * @path {GET} /v1/files/:fileId
 * @params {String} :fileId is the unique identifier for the file to download.
 */
server.get({
  url: '/v1/files/:fileId',
}, (req, res, next) => {...}

The above would add a table under the route description that lists all the route parameters.

You can use the @params tag as many times as you have parameters in your route path.

@query

The @query allows you to document any parameters which are passed via HTTP request url.

With this tag you need to provide the name and a description. The name is the first word of the text following the tag.

  • @query MyName And this part is the description

You can also optionally provide a type for the parameter.

  • @query {String} MyName And this part is the description

You can also specify that the parameter is optional by placing the name within square brackets.

  • @query {String} [MyName] And this part is the description

Lastly you can define a default value for the parameter. The idea is to document the value which will be used if the parameter is not provided.

  • @query {String} [MyName=Phillip] And this part is the description
/**
 * Download files.
 *
 * @name Download Files
 * @path {GET} /v1/files
 * @query {String} [fileType] will limit the download to just these file types.
 */
server.get({
  url: '/v1/files',
}, (req, res, next) => {...}

The above would add a table under the route description that lists all the query parameters.

You can use the @query tag as many times as you have parameters in your request url you wish to document.

@response

The @response allows you to document the response that your route will make

With this tag you need to provide the name and a description. The name is the first word of the text following the tag.

  • @response MyName And this part is the description

You can also optionally provide a type for the parameter.

  • @response {String} MyName And this part is the description

You can also specify that the response is optional by placing the name within square brackets.

  • @response {String} [MyName] And this part is the description

Lastly you can define a default value for the parameter.

  • @response {String} [MyName=Phillip] And this part is the description
/**
 * Download files.
 *
 * @name Download Files
 * @path {GET} /v1/files
 * @response {Object} metadata
 * @response {String} metadata.name
 * @response {String} metadata.link
 */
server.get({
  url: '/v1/files',
}, (req, res, next) => {...}

The above would add a table under the route description that lists that the route answer with a json document containing the name and link key.

You can use the @response tag as many times as you have parameters in your response you wish to document.

@code

The @code allows you to document the http response code that your route will make

With this tag you need to provide the number like this

  • @code {200} and then you document why this code is happening
/**
 * Download files.
 *
 * @name Download Files
 * @path {GET} /v1/files
 * @code {200} if the request is successful
 * @code {500} if the request fail because the database isn't accesible 
 * @response {Object} metadata
 * @response {String} metadata.name
 * @response {String} metadata.link
 */
server.get({
  url: '/v1/files',
}, (req, res, next) => {...}

The above would add a table under the route description that lists that the route answer with a json document containing the name and link key.

You can use the @response tag as many times as you have parameters in your response you wish to document.

@service

The @service allows you to document the host used to make a the request, in the time of microservice, you may have to hit a specific host to reach a specific microservice, you may say that they must be behind a load balancer, but in localhost thats not always the case.

With this tag you need to provide the number like this

  • @service API
/**
 * Download files.
 *
 * @name Download Files
 * @service DOWNLOAD
 * @path {GET} /v1/files
 * @code {200} if the request is successful
 * @code {500} if the request fail because the database isn't accesible 
 * @response {Object} metadata
 * @response {String} metadata.name
 * @response {String} metadata.link
 */
server.get({
  url: '/v1/files',
}, (req, res, next) => {...}

@chain

The @chain allows you to document the sequence of handlers which will handle the request before current endpoint or middleware, for e.g it may be the express.js middlewares.

With this tag you may provide @link or human-friendly name of chain element. It is important to keep order of @chain declarations same as real request handling order.

  • @chain {@link module:<full-path-to-module-member>} || @chain <human-friendly-endpoint-name>
/**
 * Handlers chain - example middleware
 *
 * @name SomeMiddleware
 * @path {POST} /v1/chain
 * @version v1
 * @since v1
 */
app.get('/v1/chain', function (request, response, next) {
  ...
  next()
})

/**
 * Handlers chain - endpoint after the middleware
 *
 * @name SomeEndpoint
 * @path {POST} /v1/chain
 * @version v1
 * @since v1
 * @code 200
 * @chain {@link module:MyRoutes.SomeMiddleware}
 * @chain This handler
 */
app.get('/v1/chain', function (request, response) {
  ...
})

The above would add a table under the route description that lists that the route answer with a json document containing the name and link key.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/vmarchaud/jsdoc-http-plugin. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The library is available as open source under the terms of the MIT License.

jsdoc-http-plugin's People

Contributors

antonin-lebrard avatar dependabot[bot] avatar ertrzyiks avatar omgimalexis avatar vmarchaud avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

jsdoc-http-plugin's Issues

Params Not Being Documented for Express Endpoints

Having an issue when @params are not showing in the following Express code:

/** Get object by ID endpoint
 * 
 * @name Fields by ID
 * @memberof Field APIs
 * @path {GET} /fields/:objectId
 * @params {String} :objectId is the Field ID to search by
 */
router.get('/:objectId', (req, res, next) => {
  fieldsSvc.getItem(req.params.objectId, 'Fields').then((data) => {
    res.json(data);
  }).catch(next);
});

I tried removing the namespace to see if it was affecting it but no change.

@param

the @param tag is already use by jsdoc and the addition of your plugin replace the name of @param for method.

Use of @typedef in @body

Hi there, thanks for your great plugin @vmarchaud.

I have a typedef of Connection:

/**
 * A connection
 * @typedef {Object} Connection
 * @property {String} address IP address
 * @property {String} description Description
 * @property {String} interface Interface
 * @property {String} name Name
 * @property {String} netmask Netmask
 * @property {String} status Status
 * @property {String} type Type (WIFI/ETH)
 * @property {boolean} [captive] Enabled captive portal
 * @property {boolean} [dhcp_enabled] DHCP Enabled
 * @property {Number} [dhcp_lease] DHCP Lease (in seconds)
 * @property {String} [dhcp_range_end] DHCP range end
 * @property {String} [dhcp_range_start] DHCP range start
 * @property {Number} [vlan_id] Vlan ID
 * @property {String} [wifi_broadcast] Wifi Broadcast
 * @property {String} [wifi_key] Wifi security key
 * @property {String} [wifi_security] Wifi security
 * @property {String} [wifi_ssid] Wifi SSID
 */

I would to use it as the @Body in a jsdoc for my create function:

/**
 * @function create
 * @name create
 * @description Create a connection
 * @path {POST} /connection
 * @header {String} Authorization JWT token
 * @header {String} Content-Type application/json
 * @auth No roles / permissions required
 * @body {Connection} Connection In {@link Connection} format
 * @code {200} If the request is successful
 * @code {500} IP Address is not valid
 * @code {500} IP host address XYZ cannot be 0 or 255
 * @since 1.0.0
 * @response {myJson} response
 * @response {Object} response.data Connection created
 */

Any ideas please as its not outputting in the generated html.

Thanks
Sharry

Suppress default params table for a function

I have a following code piece documented.

 /**
     * Requires `customerOrderId` and `role` parameters.
     * @path {PUT} /eta/update/:customerOrder/:role
     * @params :customerOrderId
     * @params :role
     */
    static async updateTimer(req, res)

I really like the output of parameters related to HTTP routing. However, I would like to suppress the parameters section, which is in fact not relevant to the function signature. Is there such an option?

image

This plugin is very useful!

Undefined when description is missing

When we don't have any description, documention includes undefined text.

screenshot 2017-09-19 20 41 33

What do you think about replacing ${e.doclet.description} with ${e.doclet.description || ''}?

add code columns to response

Hy,
first time i post an isssue sorry if this doesn't gone here :/
I wan't to know if it's possible to add the 'http response code' columns into the response.

exemple:
name|tpye|description|code

by the way thank for the @response and @code :)

Add escaping for parameter type

Bug with displaying array types, like:

@body {string[]} body_string_params - Array of string params     
@body {Object[]} body_object_params - Array of object params

When an array is passed as a type, the angle brackets are perceived as part of the HTML document. In HTML, it looks like:

<td class="type">
  Array.
  <object></object>
</td>

Actual result:
image
Expected result:
image

Difference between the parameters & route params

Both show, one with no Type

/**
 * @function remove
 * @name remove
 * @description blah blah
 * @path {DELETE} /abc/:id
 * @params {string} id Unique identifier
 * @header {string} Authorization JWT token
 * @header {string} Content-Type application/json
 * @auth restrictToRoles('superadmin')
 * @code {200} If the request is successful
 * @code {500} Issue with blah blah
 * @since 1.0.0
 * @response {Json} response In {@link Json} format
 * @response {Object} response.data Empty object
 */

Selection_626

Not sure if I'm doing something wrong

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.