🚀 Proud to share that a new feature I implemented has been merged into the StencilJS core lib!

As StencilJS devs, we often define component properties with default values like this:

@Prop() foo: string = 'bar';        

✅ Seems simple enough, right?

But here’s the catch...

When StencilJS generated the public types file (components.d.ts), it didn’t include the default value. So if you were consuming the component in another app, you'd see this:

interface MyComponent {
  foo: string;
}        

🤔 Not very helpful. Devs would have to dig into the source code just to find out what the default was. Redundant and time-consuming.

🛠️ So I built a feature to solve this.

Stencil now automatically adds a @default JSDoc tag in the types file when a default value is defined in the component:

interface MyComponent {
  /**
   * @default 'bar'
   */
  foo: string;
}        

🙌 No more guesswork. No extra docs to maintain. Just clear, helpful component APIs out of the box.

📌 Merged PR: https://github.com/stenciljs/core/pull/6264

Proud to contribute this quality-of-life feature to an open-source project powering design systems and web components across the web. 💪

#opensource #webdevelopment #stenciljs #developerexperience