[expanded-types] Can't pick a type from an interface

[nikita-rudenko]

Let's say in a file with Lit component I have an interface that describes props:

export interface ButtonProps {
  variant: 'primary' | 'secondary' | 'tertiary'
  size: 'sm' | 'md' | 'lg'
}

Then I reference it for a property:

export class Button extends LitElement {
  @property({ type: String })
  variant: ButtonProps["variant"] = "primary";
 ...

There is no expandedType generated in custom-elements.json. The result looks like this:

...
{
  "kind": "field",
  "name": "variant",
  "type": {
     "text": "ButtonProps[\"variant\"]"
   },
   "default": "\"primary\"",
   "attribute": "variant"
},
...

Expected result:

...
{
  "kind": "field",
  "name": "variant",
  "type": {
     "text": "ButtonProps[\"variant\"]"
   },
   "default": "\"primary\"",
   "attribute": "variant",
   "expandedType": {
     "text": "'primary' | 'secondary' | 'tertiary'"
    }
},
...

[break-stuff]

"computed types" like these, generics, and other TS functions are difficult for the analyzer to parse. I haven't found a good way to do that yet.

Out of curiosity if you set it to a new type, does it work?

type ButtonVariants = ButtonProps["variant"];

export class Button extends LitElement {
  @property({ type: String })
  variant: ButtonVariants = "primary";
 ...

[break-stuff]

It looks like this is working in my new package: https://wc-toolkit.com/documentation/type-parser/

Here is an example: https://stackblitz.com/edit/stackblitz-starters-but1bogc?file=src%2Fmy-component.ts