[React] bug: properties are not available when the component calls connectedCallback when using the react wrapper

[dgonzalezr]

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.20.0

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.6.0

Current Behavior

After the latest changes carried on this PR, when using the library react output target, the properties are not available when the component calls connectedCallback, they are undefined, and become available when calling componentWillLoad. Eg:

<MyComponent first="John" middle="Doe" />

this.first and this.middle are undefined when connectedCallback is called.

Important

Please, note that this only happens when using the wrapper component generated by v0.6.0 of @stencil/react-output-target. If I use the web component, the properties values are available on connectedCallback. For the previous version of the output target, everything works as expected.

Expected Behavior

Properties should be accessible on connectedCallback if their value has been set directly.

Steps to Reproduce

Follow the steps described in the Issue 1 of the reproduction code below

Code Reproduction URL

https://github.com/dgonzalezr/nx-stencil

Additional Information

No response

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

[dgonzalezr]

I just tested with the latest react-output-target v0.7.1, and the issue persists.

[christian-bromann]

@dgonzalezr thanks for filing the issue. Our team hasn't been able to take a look at this yet. If you are blocked by this I suggest to help us find a resolution to this as we can't provide an ETA due to a lot of competing resources. We are happy to assist on any technical questions. Cheers!

[dgonzalezr]

Hi @christian-bromann, thank you for jumping in. I'm not completely blocked by this issue, as I can shift the logic to componentWillLoad() as a workaround. However, my concern is that componentWillLoad() is triggered only once, whereas connectedCallback() is activated each time the component is attached or moved within the DOM. I will try to make some time and look into it. In the Discord thread @sean-perkins suggested:

For the other issue it is possible we need to adjust our really slim wrapper around @lit/react to wait for the element to be defined before rendering the component wrapper:

stencil-ds-output-targets/packages/react-output-target/src/react/create-component.ts

Lines 15 to 17 in f2421ab

	if (typeof defineCustomElement !== 'undefined') {
	defineCustomElement();
	}

Maybe I can use it as a starting point 🙂

[christian-bromann]

Maybe I can use it as a starting point 🙂

Yes, awesome! Let me know if you have any questions.