9

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.

3
  • Are you documenting above the class as well (export default class yourLWC extends LightningElement)? In my quick test, I didn't seem to have any issues with pulling documation off of public properties of my LWC Feb 28 at 15:34
  • 1
    Yeah this is what I have, but thank you for your comment. I'm going to try with a blank LWC component and see if I have the same issue.
    – Florian G
    Feb 28 at 15:42
  • I just tried with a blank component and I have the same issue. javascript import { LightningElement, api } from 'lwc'; export default class TestComponent extends LightningElement { /** * @type {boolean} */ @api someProp; } I used this command to generate the doc: npx jsdoc force-app/main/default/lwc/testComponent/testComponent.js
    – Florian G
    Feb 28 at 15:46

2 Answers 2

6

It pulls the public properties as long as the class is documented as well. I've used alias as it'll show as export if you don't add one and I've added hideconstructor to remove it showing new exports().

import { LightningElement,api } from 'lwc';
/**
 * An example of a LWC documented with jsdoc
 * @alias JsDocExampleLWC
 * @hideconstructor
 */
export default class JsDocExample extends LightningElement {
    /**
     * @type {boolean}
     */
    @api someProp; 
}

enter image description here

3

Proper use of JSDoc comments in LWC

As also suggested in the accepted answer already, you need to take care of the correct class documentation as well. 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 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 initially had the same difficulties. Therefore, I also published a short guide on how to properly use JSDoc for Lightning Web Components with step by step instructions and more detailed explanations, this could help anyone trying to use it:

Write and generate LWC code documentation using JSDoc

2
  • Appreciate the link/write-up - you may want to consider an edit to your answer to add some details from it? The reason link only answers are discouraged is if the link breaks, there's nothing left in the answer. Apr 23 at 14:34
  • 1
    You are right of course, I have adjusted my answer with an essential excerpt of the information Apr 24 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.