Announcing Stencil v2.16

After a few patch releases, the next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you’ll really enjoy. We’ve also implemented some bug fixes that are sure to improve the Stencil developer experience. This release is filled with contributions from the community. As always, we are incredibly grateful for all the ways the community makes Stencil better. Now without further ado, let’s see what’s inside Stencil v2.16.

Vite Support

Perhaps one of the most exciting features of Stencil v2.16 is support for Vite! Vite is a modern build tool that has been growing in popularity and we want to ensure that Stencil can be used alongside modern technologies. So with the release of Stencil v2.16, Stencil components can now be utilized in applications that use Vite as their bundler. It is important to note that this does not introduce the ability for Stencil’s compiler to use bundlers other than Rollup under the hood. We’d like to thank @johnjenkins for their PR and @PrinceManfred for providing test cases. This feature would not have been possible without their contributions.

Custom HTMLElement Type

Another great feature included in the v2.16 release is a custom HTMLElement type for event targets. This feature allows developers to access all the public methods available on the host element when a custom event is emitted. Here is an example of how this could be used:

<ion-infinite onIonInfinite={ev => ev.target.complete()} />

Shoutout to @sean-perkins for his work on landing this feature.

Bugs

In addition to these exciting new features, we’ve also squashed some bugs in this release. In previous Stencil versions, some conditions could result in Stencil running a build twice when the stencil build command was executed. This sometimes affected the documentation that Stencil generates. In v2.16, this is no longer an issue as Stencil builds only once when prompted. Much thanks goes to @danschultz and @dmartinjs for reporting and investigating this issue.

We’ve also improved the implementation of the mock doc Node.contains method, which previously only looked for nodes one level deep. The method now recursively searches all child nodes of the given node. Huge shoutout to @erwinheitzman for reporting and patching this issue. For more information on the Node.contains method, check out the official documentation.

Become a Contributor

We hope you find these features and fixes helpful. If there is something you would like to see in a future version of Stencil, create an issue or submit a pull request. We’re always looking for new ways to improve the Stencil development experience. Until the next release, happy coding!