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