bug: Loss of ts type after packing

[wabi-habi]

Prerequisites

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

Stencil Version

^4.0.1

Current Behavior

Example: The component has a prop parameter of color, which has a parameter type of MyColor | string.

type MyColor = 'red' | 'pink'

@Prop() color: MyColor | string

But in the readme.md file generated by packaging, the type of color is left as string! So there is no ts prompt when using the component!

Expected Behavior

The MyColor type should not be lost.

System Info

No response

Steps to Reproduce

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

type MyColor = 'pink' | 'red'

@Component({
  tag: 'my-component',
})
export class MyConponent {
  /**
   * color
   */
  @Prop() color: MyColor | string;

  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }
}

Code Reproduction URL

The above steps are a complete reproduction of the code

Additional Information

No response

[rwaskiewicz]

Hey @wabi-habi 👋

I think there are a few separate things going on here:

1. But in the readme.md file generated by packaging, the type of color is left as string!

This is a known issue, and is currently being tracked by #3603

2. So there is no ts prompt when using the component!

Can you clarify which output target are you using to generated the README for us please? And which editor you're not seeing the prompts in?

[wabi-habi]

Hey @wabi-habi 👋

I think there are a few separate things going on here:

1. But in the readme.md file generated by packaging, the type of color is left as string!

This is a known issue, and is currently being tracked by #3603

2. So there is no ts prompt when using the component!

Can you clarify which output target are you using to generated the README for us please? And which editor you're not seeing the prompts in?

Hey there, I'm using the default packaging configuration, no changes, and the editor is vscode.

[rwaskiewicz]

Hey there, I'm using the default packaging configuration, no changes, and the editor is vscode.

Ah, I see.

For what it's worth, the default generated docs (README.md files) do not affect/play a role in type generation in any IDE. We do however, have a docs-vscode output target to help inform VS Code about custom elements that can be added to your stencil.config.ts to help with some intellisense in HTML files (docs).

However, without configuring this functionality, I am able to get Intellisense on the component in the reproduction case:

This requires the dev server to be running or a build of Stencil to have occurred in order for typings to be generated. Work related to removing this limitation is related to #3534.

Since this issue relates to an existing one, I'm going to close this out. Thanks!

[wabi-habi]

Hey there, I'm using the default packaging configuration, no changes, and the editor is vscode.

Ah, I see.

For what it's worth, the default generated docs (README.md files) do not affect/play a role in type generation in any IDE. We do however, have a docs-vscode output target to help inform VS Code about custom elements that can be added to your stencil.config.ts to help with some intellisense in HTML files (docs).

However, without configuring this functionality, I am able to get Intellisense on the component in the reproduction case:

This requires the dev server to be running or a build of Stencil to have occurred in order for typings to be generated. Work related to removing this limitation is related to #3534.

Since this issue relates to an existing one, I'm going to close this out. Thanks!

You misunderstood me, I meant that the d.ts file generated has only string in its type, which results in no hints for the color value.

[rwaskiewicz]

You misunderstood me, I meant that the d.ts file generated has only string in its type, which results in no hints for the color value.

That's a result of how TypeScript interprets MyColor in the @Prop color's type. In the reproduction case, it's typed as:

type MyColor = 'red' | 'pink';

where color is typed as:

@Prop() color: MyColor | string

since 'red' and 'pink' are subtypes of string, TypeScript widens the types to string.

We can observe this behavior outside of Stencil, in the TS Playground.

In the image below, I've typed out MyColor and a variable color (same thing we have in the Stencil example, just without Stencil). The type hints widen to string when I hover over color:

If I remove string from the typing of color, then it can be constrained to 'pink' | 'red':

Here, Stencil is just following TypeScript's lead as to how these typings can be represented. Hope that makes sense!

[wabi-habi]

You misunderstood me, I meant that the d.ts file generated has only string in its type, which results in no hints for the color value.

That's a result of how TypeScript interprets MyColor in the @Prop color's type. In the reproduction case, it's typed as:

type MyColor = 'red' | 'pink';

where color is typed as:

@Prop() color: MyColor | string

since 'red' and 'pink' are subtypes of string, TypeScript widens the types to string.

We can observe this behavior outside of Stencil, in the TS Playground.

In the image below, I've typed out MyColor and a variable color (same thing we have in the Stencil example, just without Stencil). The type hints widen to string when I hover over color:

If I remove string from the typing of color, then it can be constrained to 'pink' | 'red':

Here, Stencil is just following TypeScript's lead as to how these typings can be represented. Hope that makes sense!

Okay, thanks. I think I got it.