This is the first beta release of React Intl v2!
React Intl v2 has been promoted from preview release to beta because we feel it's now feature complete and ready to move forward towards a release candidate once the test suite has been filled out and the docs have been updated.
Details and discussion: #162
$ npm install react-intl@nextNew Breaking Changes
Removed Function-As-Child Support from <IntlProvider>
In the last React Intl v2 preview release support for React 0.13 was dropped. This meant that <IntlProvider> no longer needs to support the function-as-child pattern, because in React 0.14 context is parent-based.
Renamed <FormattedRelative>'s now prop to initialNow
This change is to align with <IntlProvider>'s new initialNow prop, and the new stabilized initial rendering and "ticking" of relative times.
Removed Experimental <FormattedGroup> Component
The React Intl v2 preview releases contained an undocumented, experimental <FormattedGroup> component which has now been removed. This component took the function-as-child pattern to its extreme and in real apps it was never needed.
New Features
Added Stabilized "now" Time and "tick" Support to Relative Times
A new initialNow prop has been added to <IntlProvider> to stabilize the reference time when formatting relative times during the initial render. This prop should be set when rendering a universal/isomorphic React app on the server and client so the initial client render will match the server's checksum.
On the server, Date.now() should be captured before calling ReactDOM.renderToString() and passed to <IntlProvider>. This "now" value needs to be serialized to the client so it can also pass the same value to <IntlProvider> when it calls React.render().
Relatives times formatted via <FormattedRelative> will now "tick" and stay up to date over time. The <FormattedRelative> component's now prop has been renamed, initialNow to match and override the same prop on <IntlProvider>. It also has a new updateInterval prop which accepts a number of milliseconds for the maximum speed at which relative times should be updated (defaults to 10 seconds).
Special care has been taken in the scheduling algorithm to display accurate information while reducing unnecessary re-renders. The algorithm will update the relative time at its next "interesting" moment; e.g., "1 minute ago" to "2 minutes ago" will use a delay of 60 seconds even if updateInterval is set to 1 second.
See: #186
Added Fallback Process When Locale Data is Missing
A common problem people are facing is having some parts of the app, namely the ones that use <FormattedDate>, <FormattedNumber>, and <FormattedTime> rendering properly in the locale they set. While other components like <FormattedMessage>, <FormattedPlural>, and <FormattedRelative> render in English. This is happening because the locale data hasn't been loaded and registered with React Intl.
Now, a warning will be logged when this situation is encountered and the app will fallback to rendering everything in the default locale: English.
Added displayName to Components
All React Intl components now define a diaplayName static property so that are easier to see in the React DevTools when running minified code. Uglify was minifying <IntlProvider> to <b> which was extremely confusing.
Improved Babel Plugin
babel-plugin-react-intl@1.0.0-beta-5 now has improved error and warning messages, including a warning when someone is using the Babel plugin and also using <FormattedPlural> since strings are not extracted from <FormattedPlural>.
Backslash-escaping issues when extracting messages have been addressed. intl-messageformat-parser@1.2.0 has been released with support for escaping backslashes themselves.
One wrinkle with strings declared in JSX is that they are double-escaped like XML/HTML. This means that if backslash-escaping is needed when using <FormattedMessage>, this must be taken into account, or be wrapped in {} to make it an JSX expression and define the string in JavaScript. A warning has been added when this pattern is detected with a helpful message on how to resolve it.
See: formatjs/babel-plugin-react-intl#13 (comment)
See: http://facebook.github.io/react/docs/jsx-gotchas.html
Bugfixes
- Fixed
shouldComponentUpdate()implementation for<FormattedMessage>and<FormattedHTMLMessage>. - Fixed
injectIntl()to work with stateless component functions. - Fixed function-as-child calls to use function invocation instead of method invocation.
- Fixed formatjs/babel-plugin-react-intl#13: Backslash-escaping now works correctly with messages extracted via the Babel plugin.