cem-tools
cem-tools copied to clipboard
[expanded-types] Can't pick a type from an interface
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'"
}
},
...
"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";
...
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
@nikita-rudenko Closing as this has moved to the WC Toolkit. Please let me know if you are still experiencing any issues.