runem / web-component-analyzer

CLI that analyzes web components and emits documentation
https://runem.github.io/web-component-analyzer
MIT License
501 stars 63 forks source link

Support property and attribute with different types/descriptions #158

Open adriengibrat opened 4 years ago

adriengibrat commented 4 years ago

I reproduced a native button behaviour in one of my component:

But I can't make web-component-analyzer understand that specific case, it alway merge attribute and property with same name and the property type & description overwrite attribute :/

A [minimal example to reproduce](https://runem.github.io/web-component-analyzer/?code=%2F**%0A%20*%20A%20form%20button%0A%20*%20%40attribute%20%7BString%7D%20form%20-%20The%20id%20of%20a%20form%20to%20attach%0A%20*%2F%0Aexport%20class%20FormButton%20extends%20HTMLElement%20%7B%0A%20%20%2F**%0A%20%20%20*%20Attached%20form%0A%20%20%20*%20%40property%20form%20-%20Attached%20form%0A%20%20%20*%20%40type%20%7BHTMLFormElement%7Cnull%7D%0A%20%20%20*%20%40readonly%0A%20%20%20*%2F%0A%20%20get%20form()%20%7B%0A%20%20%20%20const%20id%20%3D%20this.getAttribute(%27form%27)%3B%0A%20%20%20%20return%20id%20%26%26%20this.ownerDocument.querySelector(%60%23%24%7Bid%7D%60)%20%7C%7C%20this.closest.(%27form%27)%3B%0A%20%20%7D%0A%0A%20%20static%20get%20observedAttributes()%20%7B%0A%20%20%20%20return%20%5B%22form%22%5D%3B%0A%20%20%7D%0A%7D%0AcustomElements.define(%22form-button%22%2C%20FormButton)%3B) the issue:

/**
 * A form button
 * @attribute {String} form - The id of a form to attach
 */
export class FormButton extends HTMLElement {
  /**
   * Attached form
   * @property form - Attached form
   * @type {HTMLFormElement|null}
   * @readonly
   */
  get form() {
    const id = this.getAttribute('form');
    return id && this.ownerDocument.querySelector(`#${id}`) || this.closest.('form');
  }
}
customElements.define("form-button", FormButton);

output

# form-button

A form button

## Properties

| Property | Attribute | Type                    | Description   |
|----------|-----------|-------------------------|---------------|
| `form`   | `form`    | `HTMLFormElement\|null` | Attached form |

same in json...

P.S. Thanks for this awesome project, I'm using it to generate custom-elements.json consumed by storybook docs addon.

tevey commented 3 years ago

Any update on this?