Search code examples
javascriptreactjsecmascript-6jsdocecmascript-2016

Documentation examples for non-trivial ES6 code


I am struggling to find decent documentation samples/references to document ES6 code, like some sort of cheatsheet for ES6 documentation.

I'd like to align on JSDoc documentation, however amongst the most common answers to this question, I can only manage to find trivial code documentation, and not documentation that fits new ES6+/React syntaxes or more complex params like Arrays, maps, param deserializations, etc..

For instance does-javascript-have-a-standard-for-commenting-functions gives only documentation examples regarding regular JS function with standard params.

I'd like to find rules / nice way to document something like this, how to indicate params that are required or not, etc.

An exemple of method I'd like to document

const signInWithCredentials = ({ emails, password, authentication_code }, options) => {

}

I can think of something like this

**
 * Attempts sign in with any possible credentials pair
 * (Provide either email + password, or an authentication_code and a provider name in the options
 * @param { 
 *   emails: { Array<String> },
 *   password: { String },
 *   authentication_code: { String }
 * } - credentials
 * @param { Object } - options
 * @param { String } - options.provider

But I'm not really sure how to handle deserialized params that don't really have a name function({ param1, param2 }), are nested function({ param1: { nestedParam1, nestedParam2 }) or are renamed function({ param1: name1 }) and how to handle composed types like an array of xxx

I am already using PropTypes for several method declarations but they only work when using React components, but are less useful when writing utility functions, etc. outside of react.


Solution

  • Nevermind, I just realized the JSDoc had an official page with documentation samples and that this included a section regarding destructuration

    http://usejsdoc.org/tags-param.html

    Documenting a destructuring parameter
    /**
     * Assign the project to an employee.
     * @param {Object} employee - The employee who is responsible for the project.
     * @param {string} employee.name - The name of the employee.
     * @param {string} employee.department - The employee's department.
     */
    Project.prototype.assign = function({ name, department }) {
        // ...
    };