How to upgrade react-output-target from 0.5.x to 0.7.x

[kurtinatlanta]

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

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.5.3

Current Behavior

I am able to use the output of a Stencil build that produces lazy-loading custom elements, via the dist output target, with version 0.5.3 of the react-output-target.

My understanding of how the latest react-output-target works is that it requires the use of the statically linked custom elements generated with the dist-custom-elements output target.

Expected Behavior

The lazy-loadable custom elements can still be wrapped for use in a React app using the dist output target or deeper documentation on how to continue to use the lazy-loadable custom elements at runtime. Or, deeper documentation on how to convert from one to the other without creating version mismatches across various builds of the custom elements.

For example, currently, the generated React wrappers only change when a custom element class is created or deleted from the library. We can build and deploy many versions (builds) of the Stencil-based custom elements without having to rebuild the React wrappers, or the apps that use the wrappers.

Steps to Reproduce

Start with a Stencil library that also generates React wrappers using version 0.5.x of the react-output-target along with the dist output target. Successfully build and wrap the components.

Upgrade to the latest react-output-target. The build will fail as it requires the use of the dist-custom-elements target, which will then generate code that imports the custom element classes instead of just their types.

Code Reproduction URL

https://no.url

Additional Information

My speculation is that this change was made in order to support server-side rendering, which would need the custom element available at render time on the server. This is a good goal, but it should not come at the cost of forcing applications that are not using server-side rendering, and want/need the lazy-loaded custom element to still have React wrappers available, to completely redo those applications or figure out how to reinvent the wrapping process.

I brought this up in the Ionic discord and @christian-bromann asked that I submit an issue here.

[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