TL;DR

Stencil now correctly displays default prop values in documentation and resolves minor compiler warnings, improving the developer experience.

Fixes Worth Knowing

• Prop defaults are now accurately shown in generated documentation.
• Compiler warnings related to annotations and sourcemaps have been suppressed, reducing noise during builds.
• The referrerPolicy attribute (browser security setting) is now included in the type definitions for <img> elements.

TL;DR

Stencil now correctly handles file paths when building collections (groups of related components), resolving a potential issue with deployment and asset loading.

Fixes Worth Knowing

• Compiler: Fixed an issue where incorrect file paths were generated for collections, which could prevent assets from loading correctly after deployment.

TL;DR

Stencil v4 removes several deprecated features and drops support for older tools, requiring updates to your build process and code to ensure compatibility.

Breaking

• Deprecated APIs Removed: The connect and context APIs are no longer available. (Component data handling)
• Node Version: Node 14 is no longer supported. (JavaScript runtime)
• In-Browser Compilation: Compilation within the browser is removed. (Development workflow)
• CSS & Shadow DOM Shims: CSS variable and shadow DOM shims have been removed. (Browser compatibility)
• Dynamic Imports: The dynamic import shim is no longer included. (Module loading)

Before You Upgrade

• Review the v4.0.0 Migration Guide for detailed upgrade instructions.
• Ensure your Node.js version is 16 or higher.

TL;DR

Stencil now uses file system events for faster updates in watch mode, improving developer workflow.

Fixes Worth Knowing

• Watch mode now correctly detects file changes, resolving issues with slow or missing updates during development. (Watch mode: automatic recompilation on changes)

TL;DR

Stencil now supports TypeScript 5, improving developer experience and enabling access to the latest language features.

Breaking

• TypeScript version must be updated to 5.0 or higher (programming language).
• Node.js version 16.14 or higher is now required (JavaScript runtime).

Before You Upgrade

• Update your project’s TypeScript dependency to version 5.0 or greater.
• Ensure you are using Node.js version 16.14 or higher.

TL;DR

Stencil now correctly handles components with existing constructors, resolving issues when using decorators (code annotations).

Fixes Worth Knowing

Documentation generation is improved by preventing duplicate entries, making the documentation more concise and accurate.

TL;DR

Stencil now correctly clones slotted content, resolving display issues, and improves style handling by allowing styles() to use template literals (text templates).

New

• Component styles can now be defined using template literals within the styles() method, offering a more concise and readable syntax.

Fixes Worth Knowing

• Slotted content (elements placed inside a component’s slots) is now cloned correctly, fixing visual glitches and ensuring expected behavior when manipulating slotted elements.

TL;DR

Stencil now allows customizing asset paths and hooking into CustomEvent creation, improving integration with frameworks like Vue.

New

• Asset Path Customization: Configure the base URL for assets.
• Custom Event Hooking: Modify CustomEvents (UI events) before they are dispatched, enabling better compatibility with frameworks that enforce naming conventions.