Allow React extensions to return an element asynchronously

[lemonmade]

Background

This PR expands the ability for an extension to return its initial UI asynchronously by bringing it to the React library. Now, when a function registers an async function that returns a React element, we will wait for that promise to resolve before mounting the resulting element. The example below shows how a developer could use this to indicate that their extension is not ready to render, until a direct API access call is resolved:

import {reactExtension, Text} from '@shopify/ui-extensions-react/checkout';

export default reactExtension('Checkout::Dynamic::Render', async ({query}) => {
  const data = await query(`query Recommendations { productRecommendations { id title } }`);
  return <Extension initialData={data} />;
});

function Extension({initialData}) {
  return <Text>{JSON.stringify(initialData)}</Text>
}

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[robin-drexler]

Shouldn't that be in the try/catch? If render throws we wouldn't reach the console.error, would we?

[lemonmade]

Good call, I will move the try/catch around the whole function body.

[lemonmade]

err actually @marvinhagemeister do you know if the console.error is even needed anymore? I feel like we should be doing that in the sandbox instead.

[vividviolet]

Instead of adding to the worker should the Host actually catch the error before calling render/load and handle them accordingly? I think it worked for POS when they were trying to catch errors importing the script (see Shopify/cli#1385 (comment)).

[lemonmade]

@vividviolet yeah, I think it would be better if we removed the log here and just keep the reject(), which is needed since the error can come from the new Promise() callback. Then, the host sandbox can catch this error and do whatever it likes. Just want to wait for confirmation from Marvin about whether this log is still needed to avoid errors printing weirdly in React.

[vividviolet]

Looks great - can we please update the main README for @shopify/ui-extensions-react with the example for fetching data async?

Should we update the vanilla JS version to just do await renderResults to match or is there a reason why we need to explicitly check for a promise?

[vividviolet]

Instead of adding to the worker should the Host actually catch the error before calling render/load and handle them accordingly? I think it worked for POS when they were trying to catch errors importing the script (see Shopify/cli#1385 (comment)).