feat: Use React.Fragment as default textComponent (#1326)

* feat: Use React.Fragment as default textComponent
- Fix some `any` casting
- Fix tests
- Add pre-commit
- Update upgrade guide

Author: longlho

docs/Upgrade-Guide.md

@@ -14,6 +14,11 @@
 - `addLocaleData` has been removed. See [Migrate to using native Intl APIs](#migrate-to-using-native-intl-apis) for more details.
 - `ReactIntlLocaleData` has been removed. See [Migrate to using native Intl APIs](#migrate-to-using-native-intl-apis) for more details.
 - `intlShape` has been removed. See [TypeScript Support](#typescript-support) for more details.
+- Change default `textComponent` in `IntlProvider` to `React.Fragment`. In order to keep the old behavior, you can explicitly set `textComponent` to `span`.
+
+```tsx
+<IntlProvider textComponent="span" />
+```
 
 ### Use React 16.3 and upwards
 

package.json

@@ -111,6 +111,7 @@
     "intl-pluralrules": "^1.0.1",
     "jest": "^24.8.0",
     "mkdirp": "^0.5.1",
+    "pre-commit": "^1.2.2",
     "prettier": "^1.6.1",
     "progress": "^2.0.3",
     "promise-queue": "^2.2.5",
@@ -149,5 +150,9 @@
     "examples:link": "yarn link && babel-node scripts/examples yarn link react-intl",
     "preversion": "yarn run clean && yarn run build && yarn run test:all",
     "prepare": "yarn run clean && yarn run build"
-  }
+  },
+  "pre-commit": [
+    "format:fix",
+    "lint:fix"
+  ]
 }

src/components/message.tsx

@@ -74,8 +74,10 @@ export class BaseFormattedMessage extends React.Component<Props> {
   }
 
   render() {
-    const {formatMessage = defaultFormatMessage, textComponent: Text = 'span'} =
-      this.props.intl || {};
+    const {
+      formatMessage = defaultFormatMessage,
+      textComponent: Text = React.Fragment,
+    } = this.props.intl || {};
 
     const {
       id,

src/components/provider.tsx

@@ -6,16 +6,19 @@
 
 import * as React from 'react';
 import withIntl, {Provider, WrappedComponentProps} from './injectIntl';
-import IntlMessageFormat from 'intl-messageformat';
-import IntlRelativeFormat from 'intl-relativeformat';
-import memoizeIntlConstructor from 'intl-format-cache';
+
 import * as invariant_ from 'invariant';
 // Since rollup cannot deal with namespace being a function,
 // this is to interop with TypeScript since `invariant`
 // does not export a default
 // https://github.com/rollup/rollup/issues/1267
 const invariant = invariant_;
-import {createError, filterProps, DEFAULT_INTL_CONFIG} from '../utils';
+import {
+  createError,
+  filterProps,
+  DEFAULT_INTL_CONFIG,
+  DEFAULT_FORMATTERS,
+} from '../utils';
 import {IntlConfig, IntlShape, IntlFormatters} from '../types';
 import {formatters} from '../format';
 import areIntlLocalesSupported from 'intl-locales-supported';
@@ -34,15 +37,6 @@ const intlConfigPropNames: Array<keyof IntlConfig> = [
 
   'onError',
 ];
-const intlFormatPropNames: Array<keyof IntlFormatters> = [
-  'formatDate',
-  'formatTime',
-  'formatRelative',
-  'formatNumber',
-  'formatPlural',
-  'formatMessage',
-  'formatHTMLMessage',
-];
 
 function getConfig(filteredProps: OptionalIntlConfig): IntlConfig {
   let config: IntlConfig = {
@@ -86,20 +80,38 @@ function getConfig(filteredProps: OptionalIntlConfig): IntlConfig {
   return config;
 }
 
-function getBoundFormatFns(config: IntlConfig, state: State) {
+function getBoundFormatFns(config: IntlConfig, state: State): IntlFormatters {
   const formatterState = {...state.context.formatters, now: state.context.now};
 
-  return intlFormatPropNames.reduce(
-    (boundFormatFns: IntlFormatters, name) => {
-      boundFormatFns[name] = (formatters[name] as any).bind(
-        undefined,
-        config,
-        formatterState
-      );
-      return boundFormatFns;
-    },
-    {} as any
-  ) as IntlFormatters;
+  return {
+    formatNumber: formatters.formatNumber.bind(
+      undefined,
+      config,
+      formatterState
+    ),
+    formatRelative: formatters.formatRelative.bind(
+      undefined,
+      config,
+      formatterState
+    ),
+    formatDate: formatters.formatDate.bind(undefined, config, formatterState),
+    formatTime: formatters.formatTime.bind(undefined, config, formatterState),
+    formatPlural: formatters.formatPlural.bind(
+      undefined,
+      config,
+      formatterState
+    ),
+    formatMessage: formatters.formatMessage.bind(
+      undefined,
+      config,
+      formatterState
+    ),
+    formatHTMLMessage: formatters.formatHTMLMessage.bind(
+      undefined,
+      config,
+      formatterState
+    ),
+  };
 }
 
 interface InternalProps {
@@ -149,15 +161,7 @@ class IntlProvider extends React.PureComponent<ResolvedProps, State> {
     // `<IntlProvider>`, then its formatters will be used. Otherwise, this
     // memoize the `Intl*` constructors and cache them for the lifecycle of
     // this IntlProvider instance.
-    const {
-      formatters = {
-        getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat),
-        getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat),
-        getMessageFormat: memoizeIntlConstructor(IntlMessageFormat),
-        getRelativeFormat: memoizeIntlConstructor(IntlRelativeFormat),
-        getPluralRules: memoizeIntlConstructor(Intl.PluralRules),
-      },
-    } = intlContext || {};
+    const {formatters = DEFAULT_FORMATTERS} = intlContext || {};
 
     this.state = {
       context: {

src/format.ts

@@ -26,7 +26,7 @@ import {
   MessageDescriptor,
 } from './types';
 
-import {createError, defaultErrorHandler, escape, filterProps} from './utils';
+import {createError, escape, filterProps} from './utils';
 
 const DATE_TIME_FORMAT_OPTIONS: Array<keyof Intl.DateTimeFormatOptions> = [
   'localeMatcher',

src/utils.ts

@@ -11,6 +11,10 @@ file in the root directory of React's source tree.
 
 import * as invariant_ from 'invariant';
 import {IntlConfig} from './types';
+import * as React from 'react';
+import IntlMessageFormat from 'intl-messageformat';
+import IntlRelativeFormat from 'intl-relativeformat';
+import memoizeIntlConstructor from 'intl-format-cache';
 // Since rollup cannot deal with namespace being a function,
 // this is to interop with TypeScript since `invariant`
 // does not export a default
@@ -87,10 +91,18 @@ export const DEFAULT_INTL_CONFIG: Pick<
   formats: {},
   messages: {},
   timeZone: undefined,
-  textComponent: 'span',
+  textComponent: React.Fragment,
 
   defaultLocale: 'en',
   defaultFormats: {},
 
   onError: defaultErrorHandler,
 };
+
+export const DEFAULT_FORMATTERS = {
+  getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat),
+  getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat),
+  getMessageFormat: memoizeIntlConstructor(IntlMessageFormat),
+  getRelativeFormat: memoizeIntlConstructor(IntlRelativeFormat),
+  getPluralRules: memoizeIntlConstructor(Intl.PluralRules),
+};

test/functional/support/format.jsx

@@ -23,7 +23,7 @@ export default function(ReactIntl) {
       const date = new Date();
       const el = <FormattedDate id="test" value={date} month="numeric" />;
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe(String(date.getMonth() + 1));
     });
 
@@ -34,7 +34,7 @@ export default function(ReactIntl) {
       const hours = date.getHours();
       const minutes = date.getMinutes();
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe(
         `${hours > 12 ? hours % 12 : hours || '12'}:` +
           `${minutes < 10 ? `0${minutes}` : minutes} ` +
@@ -48,14 +48,14 @@ export default function(ReactIntl) {
         <FormattedRelative id="test" value={now - 1000} initialNow={now} />
       );
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe('1 second ago');
     });
 
     it('formats numbers with thousands separators', () => {
       const el = <FormattedNumber id="test" value={1000} />;
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe('1,000');
     });
 
@@ -64,7 +64,7 @@ export default function(ReactIntl) {
         <FormattedNumber id="test" value={0.1} minimumFractionDigits={2} />
       );
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe('0.10');
     });
 
@@ -79,7 +79,7 @@ export default function(ReactIntl) {
         />
       );
 
-      const rendered = renderWithIntlProvider(el).find('#test > span');
+      const rendered = renderWithIntlProvider(el);
       expect(rendered.text()).toBe('You have 1,000 emails.');
     });
   });

test/unit/components/date.jsx

@@ -54,7 +54,7 @@ describe('<FormattedDate>', () => {
 
     const rendered = shallowDeep(<FormattedDate value={date} />, 2);
 
-    expect(rendered.type()).toBe('span');
+    expect(typeof rendered.type()).toBe('symbol');
     expect(rendered.text()).toBe(intl.formatDate(date));
   });
 

test/unit/components/html-message.jsx

@@ -42,7 +42,7 @@ describe('<FormattedHTMLMessage>', () => {
 
     const rendered = shallowDeep(<FormattedHTMLMessage {...descriptor} />, 2);
 
-    expect(rendered.type()).toBe('span');
+    expect(typeof rendered.type()).toBe('symbol');
     expect(rendered.prop('dangerouslySetInnerHTML')).toEqual({
       __html: intl.formatHTMLMessage(descriptor),
     });

test/unit/components/message.jsx

@@ -43,21 +43,21 @@ describe('<FormattedMessage>', () => {
       2
     );
 
-    expect(rendered.type()).toBe('span');
+    expect(typeof rendered.type()).toBe('symbol');
     expect(rendered.text()).toBe('Hello');
 
     expect(consoleError).toHaveBeenCalledTimes(1);
   });
 
-  it('renders a formatted message in a <span>', () => {
+  it('renders a formatted message in a <>', () => {
     const FormattedMessage = mockContext(intl);
     const descriptor = {
       id: 'hello',
       defaultMessage: 'Hello, World!',
     };
 
     const rendered = shallowDeep(<FormattedMessage {...descriptor} />, 2);
-    expect(rendered.type()).toBe('span');
+    expect(typeof rendered.type()).toBe('symbol');
     expect(rendered.text()).toBe(intl.formatMessage(descriptor));
   });
 
@@ -122,7 +122,7 @@ describe('<FormattedMessage>', () => {
       2
     );
 
-    expect(rendered.type()).toBe('span');
+    expect(typeof rendered.type()).toBe('symbol');
     expect(rendered.text()).toBe(intl.formatMessage(descriptor, values));
   });