Using Promises in script tag not working?

Question

My below code is used to append scripts in DOM using promises. (All below code executes inside iframe for A-frame technology and my code is being generated using Google Blockly[Block-based coding] )

 export const appendScript = async({ src, aframeWindow, code, id }, doc, callback, ) => new Promise(resolve => { const startDate = new Date(); const script = doc.createElement('script'); if (src) script.src = src; if (code) { script.text = code; } if (id) { script.id = id; } doc.head.appendChild(script); if (callback) callback(); if (code) { if (callback) { callback(); } console.log(aframeWindow.onGreenPlayButtonClicked, "===="); // undefined when code string contains await outside ongreenplaybuttonclicked fn resolve('resolved'); } else { script.addEventListener('load', () => { const endDate = new Date(); const seconds = (endDate.getTime() - startDate.getTime()) / 1000; console.log('script loaded: ', src, `took ${seconds} to load`); resolve('resolve2'); }); } });

The below script is my function that calls appendscript.

 const callAppendScript = async code => { const CODE_VERSION = aframeWindow.CODE_VERSION; code = ` async function main(inPlayMode) { let CURRENT_CODE_VERSION = CODE_VERSION; ${code}; } main(); `; let x = await appendScript({ code, aframeWindow, id: 'code' }, aframeWindow.document, ); } callAppendScript(code);

My code string 1 that generates : (donot work)

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; greeting = await HatchTranslateEngine.translate(`Hello`, 'en'); //async window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { await MinecraftAvatar.speakSound(greeting, true) }; } main();

My code string 2 that generates : (works)

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; greeting = Hatch.convert(`Hello`, 'jp'); //syncrhonous window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { await MinecraftAvatar.speakSound(greeting, true) }; } main();

My code string 3 that generates: (still works)

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { greeting = await HatchTranslateEngine.translate(`Hello`, 'en'); //async this still works (inside playbtn) await MinecraftAvatar.speakSound(greeting, true) }; } main();

Whenever i click play button, callAppendScript(code) gets executed , and when it does so,

For code string 1 , it gives me undefined in aframeWindow.onGreenPlayButtonClicked (incorrect) For code string 2 , it gives me function signature of onGreenPlayButtonClicked in aframeWindow.onGreenPlayButtonClicked (correct)

So, why is it not working for case 1 , I tried everything but could not figure it out. I only found out that for any await keyword that is outside onGreenPlayButtonClicked, I get aframeWindow.onGreenPlayButtonClicked which is inside appendScript function.

Thankyou

Answer 1

Nothing in the appendScript waits for the promise that the main() call returns. If you are asynchronously initialising onGreenPlayButtonClicked , it won't be immediately available after appending the script element.

I would suggest you try

const callAppendScript = async code => {
  const CODE_VERSION = aframeWindow.CODE_VERSION;
  code = `
    async function main(inPlayMode) {
      let CURRENT_CODE_VERSION = CODE_VERSION;
      ${code};
    }
    // no main() call here
  `;
  await appendScript({
    code,
    aframeWindow,
    id: 'code'
  }, aframeWindow.document);

  console.log(aframeWindow.onGreenPlayButtonClicked, "before");
  await main();
//^^^^^^^^^^^^
  console.log(aframeWindow.onGreenPlayButtonClicked, "after");
}