web-component-analyzer icon indicating copy to clipboard operation
web-component-analyzer copied to clipboard

Boolean attributes

Open FluorescentHallucinogen opened this issue 4 years ago • 3 comments

I'm writing a vanilla native web component, not using TypeScript and any web component libraries like LitElement, etc.

My web component has a supported property and a corresponding HTML element attribute with the same name:

/**
 * @attribute supported
 * @property supported
 * @type {?boolean}
 * @readonly
 */
this.supported;

Is this JSDoc annotation correct?

Does web-component-analyzer support @readonly?

I need that @type and @readonly will be applied to both the property and the attribute, not to only the property.

Technically, HTML element attributes are always strings (complex data like arrays and objects should be serialized as JSON strings). But as an author, I know the original type. What type should I declare for attributes in JSDoc (actual or original)?

Moreover, since my attribute is boolean, if the corresponding property is true, the attribute is present in the HTML markup:

<my-component supported><my-component>

but does the supported attribute has a value in this case? If so, which one? What type is it?

If the corresponding property is false, the attribute is just missing in the HTML markup:

<my-component><my-component>

but does the supported attribute has a value in this case? If so, which one? What type is it?

FluorescentHallucinogen avatar Dec 06 '20 13:12 FluorescentHallucinogen

@runem @bennypowers @daKmoR @justinfagnani @thepassle @robdodson @adriengibrat PTAL.

FluorescentHallucinogen avatar Dec 06 '20 13:12 FluorescentHallucinogen

IIRC

/**
 * @attr {Boolean} supported
 */

https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc

bennypowers avatar Dec 06 '20 17:12 bennypowers

First of all, I don't think it's a good idea to tag so much of people (mostly unrelated to this project) during the weekend 🙁

When in doubt, please check with the tests, this project has a bunch of those including this one:

https://github.com/runem/web-component-analyzer/blob/bd0cff338b12a61a1de26d30618eae73ff3228d1/test/flavors/jsdoc/member-test.ts#L83-L89

web-padawan avatar Dec 06 '20 18:12 web-padawan