rwaskiewicz
commented
2 years ago 👋
First, thanks for the detailed report! It was super helpful 🙂
I confirmed that this is indeed an issue - specifically the issue appears to be that Stencil doesn't assign an internal ID to components are compiled using dist-custom-elements with an externalized runtime. So when we try to use the lazy load runtime on such components, the loading fails due to that lack of ID.
A potential workaround here (depending on one's use case) is to not externalize the runtime (by setting externalRuntime: false) in the component library using dist-custom-elements.
I haven't taken a close look at the changes made in https://github.com/CODE-AND-MORE/stencil/tree/codeandmore-2.12.1 too closely yet. In the mean time, I'll label this issue to get it ingested and discuss with the team some of our options here.
MarkChrisLevy
alexabreu
Prerequisites
Stencil Version
2.12.1
Current Behavior
If stencil is used as a standalone app compiler (www output target) there are two issues with components compiled with dist-custom-elements output target:
Expected Behavior
Components compiled with dist-custom-elements should be loaded and life-cycle methods should be executed.
Steps to Reproduce
Loading issue To test this issue clone repo https://github.com/MarkChrisLevy/stencil-www-issues1, run npm install, npm start. The source code of a custom-element component is in other repo: https://github.com/MarkChrisLevy/stencil-www-issues2
Life-cycle methods issue Because current stencil doesn't load custom-element components you have to install my stencil build, where loading issue is fixed: npm install github:CODE-AND-MORE/stencil-core-build --no-save, then npm start, in the browser open the console - there should be "Yee, app-external did load!", but because of the issue it is not there. To make life-cycle methods executed open src/Root.tsx and uncomment componentDidLoad method, reload and you will see in the console that app-external and app-root are loaded.
Code Reproduction URL
https://github.com/MarkChrisLevy/stencil-www-issues1
Additional Information
This issue was already reported in #2531, but because it was reported for Stencil 1.x I decided to open new issue.
In my comment to #2531 I described few changes, that I made in order to fix loading issues (and some other stuff related to custom-elements-bundle output target) - all changes are available here: https://github.com/CODE-AND-MORE/stencil/tree/codeandmore-2.12.1
I would like to make a PR to fix those issues, but I need some guidance from Stencil team, to make sure that my solution is acceptable by Stencil.
Life-cycle methods issue is easy to fix, but... it touches the very basic idea how Stencil runtime works. Right now, when project is built, Stencil writes different kind of flags, those flags decides whether some functionality should be run in the runtime or not... and when in a project there is a life-cycle method e.g. componentDidLoad, Stencil writes a flag, that runtime should run componentDidLoad, if there were no such a method in a project it will not be called in the runtime which applies to external components as well. Because of the "flagging" there can be other issues, so I think that Stencil team must look at this issue from much wider point of view.