fluent-react: Make getMessageContext async

[stasm]

It would be great to allow async iterables returned by generateMessages. We'd need to move l10n.getMessageContext out of Localized.render and possibly cache it?

fluent.js/fluent-react/src/localized.js

Line 111 in beabada

const mcx = l10n.getMessageContext(id);

[zbraniecki]

@hkasemir - did you said you had an idea how to approach this?

[stasm]

fluent-react landed in Firefox Devtools this week. Due to no support for async iterables, it needed to use the trick I suggested in fluent-react-for-gecko.

I got curious: what would it take to add support for async iterables to fluent-react? The main challenge is to avoid calling an async API for every <Localized> component, which would have an adverse effect on performance due to the number of Promises created. I was able to create a PoC which uses async iterables of contexts but continues to use mapContextSync. I'll push the code to a branch early next week.

I needed to make a few changes to CachedAsyncIterable. I opened projectfluent/cached-iterable#1 to discuss them.

I also revived the discussion in #133 because ultimately, this boils down to which browsers we want fluent and fluent-react to support. Async iterables are a new technology and are only natively supported in Firefox 57+ and Chrome 63+. We need to transpile them for other browsers but different browser require different levels of transpilation.

I might not be able to make my PoC into a landable PR due to other commitments but I'll be more than happy to mentor someone who'd like to own this feature.

[stasm]

I opened a WIP PR with a proposed solution to this: #223.