cem-tools icon indicating copy to clipboard operation
cem-tools copied to clipboard

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

Open nikita-rudenko opened this issue 1 year ago • 2 comments

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'"
    }
},
...

nikita-rudenko avatar Apr 02 '24 08:04 nikita-rudenko

"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 avatar May 08 '24 16:05 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

break-stuff avatar Feb 17 '25 21:02 break-stuff

@nikita-rudenko Closing as this has moved to the WC Toolkit. Please let me know if you are still experiencing any issues.

break-stuff avatar Nov 10 '25 12:11 break-stuff