bug: globalScript not supporting async

[mikaelkaron]

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

Current Behavior

according to the globalScript documentation the exported method supports async, however when testing this the bootstrapping is not_ async.

With a little bit debugging I can see that the generated bootstrap methods won't await my code.

const globalScripts = () => {
  appComponentsGlobalScript();
  initialize();
};

patchBrowser().then(options => {
  globalScripts();
  return bootstrapLazy(JSON.parse('lotsOfJsonHere'), options);
});

Expected Behavior

That my async code is properly awaited before bootstrapLazy is executed

Steps to Reproduce

just export an async method in globalScripts file and put something in componentDidLoad on a component - check order of execution.

I've done this in the reprocuction URL with four console.log statements.

The expected order should be:

global:start 
global:end
component:willLoad 
component:didLoad 

The current order:

global:start 
component:willLoad 
component:didLoad 
global:end 

Code Reproduction URL

https://codesandbox.io/s/stencil-globalscript-bug-r87gn2

Additional Information

No response

[alicewriteswrongs]

Hey @mikaelkaron thanks for reporting this issue and for providing a repro! I was able to reproduce the issue and confirm that this is a bug in the code that Stencil uses to generate the relevant entry point. Ideally in this case Stencil would detect whether the globalScripts function is async and, if so, produce code that awaits it before continuing on. I'm going to add this to our backlog and the team will take a look. Thanks again for the detailed issue and repro case!

[ghost]

Where is this at in your backlog? Any idea when the fix will be available?

Hey @mikaelkaron thanks for reporting this issue and for providing a repro! I was able to reproduce the issue and confirm that this is a bug in the code that Stencil uses to generate the relevant entry point. Ideally in this case Stencil would detect whether the globalScripts function is async and, if so, produce code that awaits it before continuing on. I'm going to add this to our backlog and the team will take a look. Thanks again for the detailed issue and repro case!

[christian-bromann]

@metsylvainlajoie happy to take a look!

[christian-bromann]

@mikaelkaron @metsylvainlajoie I raised a PR with a fix for this in #5158. However before we move on with this I would be interested in your use case here. Respecting an async function would mean that the screen would stay blank until the global script resolves. That seems to result in a bad user experience but I might have not enough context to understand in what way you are using global scripts. I want to make sure we are fixing the right problem at hand,

Therefore can you elaborate how you use global scripts? Thanks a lot for providing more information.

[tanner-reits]

A fix for this was included in today's v4.12.2 release!

[ghost]

Hi Reits, great news and thank you for the update. We will merge the latest code and remove the “temporary” fixed we had in there until this! Thank you. From: Tanner Reits ***@***.***> Sent: Monday, February 12, 2024 11:52 AM To: ionic-team/stencil ***@***.***> Cc: Lajoie, Sylvain ***@***.***>; Mention ***@***.***> Subject: [EXT] Re: [ionic-team/stencil] bug: `globalScript` not supporting `async` (Issue #3392) CAUTION: This email originated from outside MetLife. Do not click links, open attachments or forward unless you recognize the sender and their email address and if you were expecting an email from them. If you suspect this email is phishing, report it by clicking on the Report Phishing button or forward it to ***@***.******@***.***>. A fix for this was included in today's v4.12.2<https://github.com/ionic-team/stencil/releases/tag/v4.12.2> release! — Reply to this email directly, view it on GitHub<#3392 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXST46XG54BWM7SR6JSZISTYTJCBPAVCNFSM5XKXZC52U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJTHEYTGNBZGQYQ>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>> The information contained in this message may be CONFIDENTIAL and is for the intended addressee only. Any unauthorized use, dissemination of the information, or copying of this message is prohibited. If you are not the intended addressee, please notify the sender immediately and delete this message.

[joewoodhouse]

@tanner-reits I've not got to the bottom of it yet but I have a Stencil app that uses jeep-sqlite, which has started failing to run on the latest stencil version. By process of elimination I found this build (4.12.2) to be the problem, I'll hopefully get to the bottom of it, but something to do with how the custom elements are loaded onto the page seems to have changed