search

ionic-team / stencil-ds-output-targets

These are output targets that can be added to Stencil for React and Angular.
https://stenciljs.com
MIT License
247 stars 110 forks source link

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

Open dgonzalezr opened 3 weeks ago

dgonzalezr commented 3 weeks ago

Prerequisites

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.

image

[!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[bot] commented 3 weeks ago

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 commented 2 weeks ago

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

christian-bromann commented 2 weeks ago

@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 commented 2 weeks ago

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: https://github.com/ionic-team/stencil-ds-output-targets/blob/f2421abcb6f2115737f9d1a3814b0509f934e9cf/packages/react-output-target/src/react/create-component.ts#L15-L17

Maybe I can use it as a starting point 🙂

christian-bromann commented 2 weeks ago

Maybe I can use it as a starting point 🙂

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