bug: `connectedCallback` does not work as expected when `async`

[jgroth]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

v2.15.0

Current Behavior

According to the documentation, connectedCallback will run before componentWillLoad. However, when connectedCallback is async it will not wait for the promise from connectedCallback before running componentWillLoad. I'm not sure if this should work or not since the documentation is a bit vague. For connectedCallback it says

This lifecycle hook follows the same semantics as the one described by the Custom Elements Spec

But further down it also says

Lifecycle methods can also return promises which allows the method to asynchronously retrieve data or perform any async tasks. A great example of this is fetching data to be rendered in a component

Expected Behavior

Either componentWillLoad should not run until connectedCallback has resolved its promise when it is async, or the documentation should be more clear on how this is supposed to work.

Steps to Reproduce

Clone the repo and npm start to see the behavior

Code Reproduction URL

https://github.com/jgroth/stencil-connected-callback

Additional Information

Might be related to #2954

[rwaskiewicz]

Thanks for the report! I'm going to label this to get it ingested to get looked into further

[adrianschmidt]

It's not super explicit from the reproduction code, but note that the value 'init' is never rendered, because the render method does wait for the async componentWillLoad. It's just the async componentConnected that it doesn't wait for.

[adrianschmidt]

Stencil exports the following ComponentInterface:

export interface ComponentInterface {
    connectedCallback?(): void;
    disconnectedCallback?(): void;
    ...
}

So I think this issue can be resolved by simply changing the docs from:

Lifecycle methods can also return promises which allows […]

to:

Some lifecycle methods can also return promises which allows […]