Quick tip: How to document a dojo AMD module for JSDoc 3

Unfortunately, JSDoc 3 does not fully support documenting AMD style modules that return a declare function, e.g.:

define(['dojo/_base/declare'], function(declare) {
    ...
    return declare([], {
        ...
    });
});

But with a bit of verbosity each module and the class will be properly documented:

/**
 * Module returning a class to create and handle the legend for absolute values of the mapping application.
 * @module NAFIDAS/mapping/LegendProportional
 * @see NAFIDAS.mapping.LegendProportional
 */
define([
    'dojo/_base/declare',
    'NAFIDAS/mapping/Legend',
    ...
], function(declare, Legend, ...) {

    /**
     * Class to create and handle the legend for absolute values of the mapping application.
     * @class NAFIDAS.mapping.LegendProportional
     * @extends {NAFIDAS.mapping.Legend}
     * @property {String} templateString
     * @property {Object} surface reference to gfx surface
     * @property {Object} surfaceSize dimensions of the surface
     * @property {Number} surfaceSize.w width
     * @property {Number} surfaceSize.h height
     * @property {Number} minVirtSpacing defines minimal vertical spacing of legend items
     */
    return declare([Legend, ...], /** @lends NAFIDAS.mapping.LegendProportional.prototype */ {

        templateString: template,
        surface: null,
        surfaceSize: {
            w: 300,
            h: 90
        },
        minVirtSpacing: 14,
         ...

        /**
         * Calculates and sets the canvas height.
         * If there are negative and positive numbers, canvas height has to be enlarged 
         * by the height of the smaller maximum circle.
         * @return {*}
         * @private
         */
        _setSizes: function() {
           ...
        },

        /**
         * Returns a radius calculated proportionally from the maximum value and area.
         * @param {Number} val value
         * @param {Number} maxVal maximum value
         * @param {Number} maxArea maximum area
         * @return {Number}
         */
        calcRadiusFromValue: function(val, maxVal, maxArea) {
            ...
        },

        ...

    });
});

jsdoc-output-modulejsdoc-output-classRunning JsDoc 3 with the code documented above will generate the nicely formatted HTML output below:Another option would be to use dojo’s own doc parser with dojo inline documentation instead of JsDoc 3, but that does not integrate well with an IDE such as PhpStorm (no or only partial code assist).

BTW, if you want to see the documented code in action head over to to he mapping application of the Swiss National Forest Inventory.

Leave a Reply

Your email address will not be published. Required fields are marked *