What is the current behavior?

A Stencil component can only extend from another, single class.

Dynamic, mixin style behaviour (as outlined here) being hard in Stencil as it relies on static analysis to extract component meta.

GitHub Issue Number: #3162 I think?

What is the new behavior?

A new core Mixin helper function to extend from. This provides a predictable pattern to pull apart for Static analysis.
The function accepts mixin-factory-functions as arguments and the end result is typed appropriately with all relevant Stencil-related meta being merged correctly.

e.g.

const AWrap = (Base) => {class A extends Base { propA = A }; return A;}
const BWrap = (Base) => {class B extends Base { propB = B }; return B;}
const CWrap = (Base) => {class C extends Base { propC = C }; return C;}

@Component(...) 
class X extends Mixin(AWrap, BWrap, CWrap) {
   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
}

Documentation

stenciljs/site#1545

Does this introduce a breaking change?

• Yes
• No

Testing

• spec tests
• component / wdio tests

Other information