Pseudo-localization support

[cungminh2710]

Hi team, I'm looking to implement pseudo-localization into our setup ofreact-intl. Currently, every messages will fallback to English source which is not ideal. It would great if we can have pseudo language at runtime (instead of run extract->compile every time a message is created)

Do you have a recommended way to do so?

Is it possible to add a message transformer to the IntlProvider? Happy to work on a PR if you are happy with the approach

[amcoder]

We are using pseudo-localization via @formatjs/cli compile. Doing it at runtime is interesting though. You could wrap the intl.formatMessage call and pseudo-localize there. You'd need to create it using createIntl and then use RawIntlProvider.

[cungminh2710]

Thanks for your suggestion. Yeah doing it at runtime is better for DX imo. I managed to get something like this working:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createIntl, createIntlCache, IntlProvider, MessageFormatElement, RawIntlProvider } from 'react-intl';
import { generateENXC } from '@cungminh2710/pseudolocalize';
import IntlMessageFormat from 'intl-messageformat';

function loadLocaleData(locale: string) {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache();

function App(props) {
	const intl = createIntl(
		{
			locale,
			messages,
		},
		cache
	);

        if (process.env.NODE_ENV === 'development') {
		intl.formatMessage = (descriptor, values, opts) => {
			if (!descriptor.defaultMessage) return '';
			const message = new IntlMessageFormat(generateENXC(descriptor.defaultMessage), locale, undefined, opts).format(
				values
			);
			if (typeof message === 'string') return message;
			else return '';
		};
	}


	return (
		<RawIntlProvider value={intl}>
		  <MainApp />
		</RawIntlProvider>
	)
}

async function bootstrapApplication(locale, mainDiv) {
  const messages = await loadLocaleData(locale)
  ReactDOM.render(<App locale={locale} messages={messages} />, mainDiv)
}

If you're okay with the above approach, can I contribute to docs to add more info about pseudo-localize usage?