Skip to content

Conversation

@paulvisciano
Copy link
Contributor

What is the current behavior?

The extends functionality for Stencil components (allowing component classes to extend from other Stencil-decorated base classes) lacked comprehensive test coverage. While basic functionality existed, there were no detailed test cases demonstrating:

  • Complex inheritance patterns (multi-level inheritance, abstract classes, mixins)
  • Decorator inheritance and conflicts (@prop, @State, @method, @watch, @listen)
  • Controller patterns using inheritance vs composition
  • Edge cases like duplicate decorator names and mixed decorator types
  • Real-world scaling scenarios with multiple components and controllers

What is the new behavior?

With this PR there is now complete test coverage for the extends functionality, including detailed test cases demonstrating how you can move logic out of the Component into a separate Controller class either relying purely on inheritance or using a combo of inheritance & composition, as well as edge cases.

Documentation

https://paulvisciano.github.io/stencil-core/?path=/docs/testing-behavior-extends-overview--docs

Does this introduce a breaking change?

  • Yes
  • No

Testing

During local testing I have ran into some concurrency issues, most likely due to resource constraints (running too many workers). When I have tried to run the tests in isolation they all pass. Hoping none of those are present in CI.

Other information

paulvisciano and others added 16 commits November 24, 2025 07:34
… type in inheritance chains

Test Case stenciljs#13 - Decorator Conflicts
Features:
- Duplicate @prop names (component overrides base)
- Duplicate @State names (component overrides base)
- Duplicate @method names (component overrides base)
- Compiler precedence rules (component decorators take precedence)
Test Case stenciljs#10 - Event Handling Inheritance
Features:
- Inherits base class window/document/host listeners
- Handles child class window/document/host listeners
- Child override event handler takes precedence over base
- Handles event bubbling correctly
- Tracks events in combined event log
Test Case stenciljs#11 - Watch Decorator Inheritance
Features:
- Inherits base class @watch decorators
- Handles child class @watch decorators
- Executes watch handlers in correct order (base first, then child)
- Child override watch handler takes precedence over base
- Reactive property chains work correctly
- Tracks watch calls in combined watch log
… name

Test Case stenciljs#18 - Mixed Decorator Types
Features:
- @prop in Base, @State in Component (same name)
- @State in Base, @prop in Component (same name)
- @method in Base, @prop in Component (same name)
- Component decorator type takes precedence
- Runtime behavior verification
…rollers

Test Case stenciljs#15 - Inheritance-Based Scaling
Features:
- 3 components (TextInput, RadioGroup, CheckboxGroup) using inheritance
- 2 controllers (ValidationController, FocusController) via inheritance
- Lifecycle methods called correctly
- Validation triggers on blur
- Focus tracking works
- Controllers use inheritance pattern
…rollers

Test Case stenciljs#16 - Composition-Based Scaling
Features:
- 3 components (TextInput, RadioGroup, CheckboxGroup) using composition
- 2 controllers (ValidationController, FocusController) via composition
- Lifecycle methods called automatically via ReactiveControllerHost
- Validation triggers on blur
- Focus tracking works
- Controllers are properly composed (not inherited)
@paulvisciano paulvisciano requested a review from a team as a code owner December 8, 2025 04:15
@paulvisciano paulvisciano added this pull request to the merge queue Dec 10, 2025
Merged via the queue into stenciljs:main with commit 81bead7 Dec 10, 2025
69 checks passed
@paulvisciano paulvisciano deleted the extends-coverage branch December 10, 2025 07:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants