bug: dist-custom-elements issues when used inside www output target app

[MarkChrisLevy]

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

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:

• custom-element component is not loaded at all, an error is thrown: trying to lazily load component ... with style mode "undefined", but it does not exist.
• life-cycle methods (e.g. componentDidLoad) are not called for custom-element components, if those methods were not defined in the app source code

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.

[rwaskiewicz]

👋

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]

Setting externalRuntime = true doesn't fix the loading issue - in the example component (https://github.com/MarkChrisLevy/stencil-www-issues2/blob/0d2c42bffd81cb1bd2052464bcf253a99f8187f2/stencil.config.ts#L10) it was already set to true.

My changes, that fixes loading issue were made without wider knowledge of Stencil guts, so it is very likely that it will not be helpful at all...