Stencil v2.9 is here, jam packed with new features to improve the Stencil developer experience. We’ve been working hard on some highly anticipated features these past few weeks. Let’s start with the biggest feature of v2.9: sourcemaps!

Sourcemaps have been the most requested feature from the Stencil community and we are happy to announce that they are now available! Sourcemaps allow you to create a translation between your Stencil components written in Typescript/JSX and the JavaScript code that is generated by Stencil. This allows you to add breakpoints in your original source code and then step through your code in your browser or IDE. With the ability to inspect variable values, trace logic flow and more, source maps provide a huge improvement to the Stencil debugging experience. To see sourcemaps in action, check out our demo from the September Ionic event. You can also read about sourcemaps in the Stencil docs.

As if sourcemaps weren’t exciting enough, we’ve also added a few more exciting features. With Stencil v2.9, you can now import a single component when using the dist-custom-elements output target and all of the component’s children will be defined automatically. This means that you no longer need to manually define each component’s children. For details on how to use this feature, check out the Stencil docs.

We’ve also fixed and improved the stats output target, which provides insight into what Stencil produced during its compilation step. This includes all the files generated from any output targets prefixed with “dist”, the component definitions that each file may include, the original file size, and a map of all the files that are dependent on each other.

Smaller improvements in v2.9 include expanding the preamble to all of the JavaScript code produced by Stencil, and a JSDoc’s fix for lines including @return and @returns. For details on everything included in v2.9, checkout the changelog on Github.

With all of these improvements in Stencil v2.9, we could not be more excited to see what you build with Stencil. Be sure to let us know what you think of all these new features (@stenciljs 😉). Happy coding 😀.

Sign up for the Ionic Newsletter to get the latest news and updates!