feat: include `values` inside the attributes when generating `docs-vscode`output target

[IndyVC]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

When generating the docs-vscode output target, I am unable to get generate values inside the generated json.

Example output:

{
      "name": "evo-card",
      "description": {
        "kind": "markdown",
        "value": "Displays a card with a shadow."
      },
      "attributes": [
        {
          "name": "focused",
          "description": ""
        },
        {
          "name": "variant",
          "description": "The variant of the card."
        }
      ]
    }

attributes.values remain empty when trying jsdoc attributes like @type of @typdefs

Describe the Use Case

It would add intellisense of all possible values. Example: primary, secondary,...

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[IndyVC]

Just read the source code and this would do the trick:
@Prop() variant:'default'|'primary' = 'default'

Disadvantage is you lose the jsdoc on the value, in an enum you can specify what the value does, like this you cant.
Is there anything scheduled to support enums or is there a technical limitation due to being typescript?

[rwaskiewicz]

Hey @IndyVC 👋

I think I understand what you're asking for, but to make sure you and I are on the same page, can you provide a code sample of a Stencil component? I'd like to better understand that given that example component, what you see today and what you'd like to see. Thanks!

[IndyVC]

Example of a component:

import { Component, Host, Prop, h } from '@stencil/core';

enum CardVariant {
  /**
   * white background
   */
  DEFAULT = 'default',
  /**
   * glass morphism background
   */
  GLASS = 'glass',
}

/**
 * Displays a card with a shadow.
 */
@Component({
  tag: 'evo-card',
  styleUrl: 'evo-card.scss',
  shadow: true,
})
export class EvoCard {
  @Prop() focused = false;
  /**
   * The variant of the card.
   */
  @Prop() variant: CardVariant;
  render() {
    return (
      <Host evo-focused={this.focused} evo-variant={this.variant}>
        <article>
          <slot></slot>
        </article>
      </Host>
    );
  }
}

The generated vscode-docs would be:

{
      "name": "evo-card",
      "description": {
        "kind": "markdown",
        "value": "Displays a card with a shadow."
      },
      "attributes": [
        {
          "name": "focused",
          "description": ""
        },
        {
          "name": "variant",
          "description": "The variant of the card.",
		 "values": [{"name":"default","description":"white background"},{"name":"glass","description":"glass morphism background"}]
        }
      ]
    }

[rwaskiewicz]

Ah, I see, thanks! I'm going to label this to see what the community's level of interest in something like this is!