Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
4.23.0
Stencil Framework Output Target
React
Stencil Framework Output Target Version
0.8.1
Current Behavior
When using the react bundled component, @Prop are not set on the connectedCallback step (though attributes are).
This is visible when your @Prop is using camelCase, ex: @Prop() myProp: string;
Ex:
<MyComponent
myProp="jsx case"
my-prop="html case"
/>
connectedCallback() {
console.log(`connectedCallback > myProp: ${this.myProp}`) // => print "html case"
}
componentWillLoad() {
console.log(`componentWillLoad > myProp: ${this.myProp}`) // => print "jsx case"
}
Expected Behavior
Props should be accessible during the connectedCallback lifecycle step, as it was the case in previous version.
<MyComponent
myProp="jsx case"
/>
connectedCallback() {
console.log(`connectedCallback > myProp: ${this.myProp}`) // => should print "jsx case"
}
Steps to Reproduce
- Follow the project creation guide for React: https://stenciljs.com/docs/react
- Add a camelCase Prop to the component
- Build stencil lib and react lib
- Use the React component in an app
(you can clone this reproduction project to reproduce it more quickly, the steps are detailed in the README)
Code Reproduction URL
https://github.com/dpellier/stencil-react-connected-callback-issue
Additional Information
The issue did appear when migrating from v0.5.3 to 0.8.1.
By diggin a bit, we ended up on the following https://lit.dev/docs/frameworks/react/#how-it-works
Seems this may be caused by moving to a lit wrapper that attachs props later on the lifecycle.
But this is quite a major breaking changes if this means we can't use the connectedCallback the same way anymore.