How to document LWC Salesforce components public variables with JSDoc?

Question

JSDoc skips my public LWC variables. Here is an example:

    /**
     * SomePublicVarName mode - default is false.
     * 
     * @type {boolean}
     */
    @api 
    somePublicVarName = false;

If I convert that to a function or a public getter/setter, then I can see it in the output. Is there a way around that? Can I change JSDoc parsing behavior? I read in the docs I can use a configuration file, but I don't know if this is a use case for it. I also tried to add the @public JSDoc property hopping that would fix the issue, but it didn't help.

Sebastiano Schwarz · Accepted Answer · 2022-04-24 13:59:40Z

Proper use of JSDoc comments in LWC

You need to take care of the correct class documentation in order for this to work. For example, a correctly annotated Hello World LWC could look like this:

import { api, LightningElement } from 'lwc';

/**
 * An example LWC that adds a classic greeting to any page.
 * @alias HelloWorld
 * @extends LightningElement
 * @hideconstructor
 *
 * @example
 * <c-hello-world name="World"></c-hello-world>
 */
export default class HelloWorld extends LightningElement {
  /**
   * Enter the name of the person to greet.
   * @type {string}
   * @default 'World'
   */
  @api name = 'World';
}

Generate LWC code documentation

After you have properly annotated your components as just shown, you can then generate a well-formatted document using jsdoc.app.

To do this, you must first install the appropriate node package, for example globally as follows:

npm install -g jsdoc

Furthermore, a jsdoc.config.json file must be located in the root directory of the project, which may look like the following:

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc", "closure"]
  },
  "source": {
    "include": ["force-app/main/default/lwc"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "plugins": [],
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": false
  },
  "opts": {
    "destination": "docs",
    "recurse": true,
    "readme": "README.md"
  }
}

Then the documentation can be generated as follows:

jsdoc -c jsdoc.config.json

Setup guide

I also published a guide on how to use JSDoc for Lightning Web Components with step by step instructions and detailed explanations:

Write and generate LWC code documentation using JSDoc

Florian G · Accepted Answer · 2022-02-28 19:16:32Z

1

My issue was resolved by also adding a js doc on top of the class declaration itself. In this js doc I used @alias.

See this post: https://salesforce.stackexchange.com/questions/370416/how-to-document-lwc-salesforce-components-public-variables-with-jsdoc

answered Feb 28, 2022 at 19:16

Florian G

6171 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to document LWC Salesforce components public variables with JSDoc?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related