react-intl 6.0.5 → 6.0.6

package/src/utils.ts

@@ -0,0 +1,77 @@
+import {ResolvedIntlConfig} from './types'
+import * as React from 'react'
+import {FormatXMLElementFn} from 'intl-messageformat'
+import {invariant} from '@formatjs/ecma402-abstract'
+
+import {DEFAULT_INTL_CONFIG as CORE_DEFAULT_INTL_CONFIG} from '@formatjs/intl'
+
+export function invariantIntlContext(intl?: any): asserts intl {
+  invariant(
+    intl,
+    '[React Intl] Could not find required `intl` object. ' +
+      '<IntlProvider> needs to exist in the component ancestry.'
+  )
+}
+
+export const DEFAULT_INTL_CONFIG: Pick<
+  ResolvedIntlConfig,
+  | 'fallbackOnEmptyString'
+  | 'formats'
+  | 'messages'
+  | 'timeZone'
+  | 'textComponent'
+  | 'defaultLocale'
+  | 'defaultFormats'
+  | 'onError'
+> = {
+  ...CORE_DEFAULT_INTL_CONFIG,
+  textComponent: React.Fragment,
+}
+
+/**
+ * Takes a `formatXMLElementFn`, and composes it in function, which passes
+ * argument `parts` through, assigning unique key to each part, to prevent
+ * "Each child in a list should have a unique "key"" React error.
+ * @param formatXMLElementFn
+ */
+export function assignUniqueKeysToParts(
+  formatXMLElementFn: FormatXMLElementFn<React.ReactNode>
+): FormatXMLElementFn<React.ReactNode> {
+  return function (parts: any) {
+    // eslint-disable-next-line prefer-rest-params
+    return formatXMLElementFn(React.Children.toArray(parts)) as any
+  }
+}
+
+export function shallowEqual<
+  T extends Record<string, unknown> = Record<string, unknown>
+>(objA?: T, objB?: T) {
+  if (objA === objB) {
+    return true
+  }
+
+  if (!objA || !objB) {
+    return false
+  }
+
+  var aKeys = Object.keys(objA)
+  var bKeys = Object.keys(objB)
+  var len = aKeys.length
+
+  if (bKeys.length !== len) {
+    return false
+  }
+
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i]
+
+    if (
+      objA[key] !== objB[key] ||
+      !Object.prototype.hasOwnProperty.call(objB, key)
+    ) {
+      return false
+    }
+  }
+
+  return true
+}

package/tests/functional/index.ts

@@ -0,0 +1,18 @@
+import * as p from 'path'
+import buildTests from './support/build'
+import formatTests from './support/format'
+
+import {main} from '../../package.json'
+const Main = p.resolve(__dirname, '../../', main)
+const builds = {
+  Main,
+  // 'IIFE-dev': p.join(p.dirname(Main), 'react-intl.iife.js'),
+  // 'IIFE-no-parser-dev': p.join(p.dirname(Main), 'react-intl-no-parser.iife.js'),
+}
+
+Object.keys(builds).forEach(name => {
+  describe(name, () => {
+    buildTests(builds[name])
+    formatTests(require(builds[name]), name.includes('no-parser'))
+  })
+})

package/tests/functional/support/build.ts

@@ -0,0 +1,16 @@
+import * as ReactIntl from '../../../'
+
+export default function (buildPath) {
+  describe('build', () => {
+    it('evaluates', () => {
+      expect(require(buildPath)).toBeDefined()
+    })
+
+    Object.keys(ReactIntl).forEach(name =>
+      it(name, function () {
+        const ReactIntlBuild = require(buildPath)
+        expect(typeof ReactIntlBuild[name]).toBe(typeof ReactIntl[name])
+      })
+    )
+  })
+}

package/tests/functional/support/format.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+
+import * as IReactIntl from '../../../'
+import {parse} from '@formatjs/icu-messageformat-parser'
+import {render, screen} from '@testing-library/react'
+
+export default function (ReactIntl: typeof IReactIntl, noParser?: boolean) {
+  describe('format', () => {
+    const {
+      IntlProvider,
+      FormattedDate,
+      FormattedTime,
+      FormattedRelativeTime,
+      FormattedNumber,
+      FormattedMessage,
+    } = ReactIntl
+
+    const renderWithIntlProvider = (Element: JSX.Element, providerProps = {}) =>
+      render(
+        <IntlProvider locale="en" {...providerProps}>
+          {Element}
+        </IntlProvider>
+      )
+
+    it('formats dates', () => {
+      const date = new Date()
+      const el = (
+        <span data-testid="test">
+          <FormattedDate value={date} month="numeric" />
+        </span>
+      )
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent(
+        String(date.getMonth() + 1)
+      )
+    })
+
+    it('formats times', () => {
+      const date = new Date()
+      const el = (
+        <span data-testid="test">
+          <FormattedTime value={date} />
+        </span>
+      )
+
+      const hours = date.getHours()
+      const minutes = date.getMinutes()
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent(
+        `${hours > 12 ? hours % 12 : hours || '12'}:` +
+          `${minutes < 10 ? `0${minutes}` : minutes} ` +
+          `${hours < 12 ? 'AM' : 'PM'}`
+      )
+    })
+
+    it('formats relative time', () => {
+      const el = (
+        <span data-testid="test">
+          <FormattedRelativeTime value={-1} />
+        </span>
+      )
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent('1 second ago')
+    })
+
+    it('formats numbers with thousands separators', () => {
+      const el = (
+        <span data-testid="test">
+          <FormattedNumber value={1000} />
+        </span>
+      )
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent('1,000')
+    })
+
+    it('formats numbers with decimal separators', () => {
+      const el = (
+        <span data-testid="test">
+          <FormattedNumber value={0.1} minimumFractionDigits={2} />
+        </span>
+      )
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent('0.10')
+    })
+
+    it('pluralizes labels in strings', () => {
+      const message =
+        'You have {emails, plural, one {# email} other {# emails}}.'
+      const el = (
+        <span data-testid="test">
+          <FormattedMessage
+            id="foo"
+            defaultMessage={noParser ? parse(message) : message}
+            values={{
+              emails: 1000,
+            }}
+          />
+        </span>
+      )
+
+      renderWithIntlProvider(el)
+      expect(screen.getByTestId('test')).toHaveTextContent(
+        'You have 1,000 emails.'
+      )
+    })
+  })
+}

package/tests/perf/index.tsx

@@ -0,0 +1,196 @@
+import {Suite} from 'benchmark'
+import * as React from 'react'
+import * as ReactDOMServer from 'react-dom/server'
+const {
+  IntlProvider,
+  FormattedNumber,
+  FormattedDate,
+  FormattedMessage,
+  // FormattedRelativeTime,
+} = require('../../dist/react-intl')
+import {parse, MessageFormatElement} from '@formatjs/icu-messageformat-parser'
+
+const suite = new Suite('renderToString', {
+  onCycle: function (e: any) {
+    console.log(String(e.target))
+  },
+})
+
+suite.on('error', function (e: any) {
+  console.log(e)
+  throw e.target.error
+})
+
+suite.add('<div>', function () {
+  ReactDOMServer.renderToString(<div />)
+})
+
+suite.add('100 x <div/>', function () {
+  const divs = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    divs.push(<div key={i} />)
+  }
+  ReactDOMServer.renderToString(<IntlProvider locale="en">{divs}</IntlProvider>)
+})
+
+suite.add('100 x <FormattedNumber>', function () {
+  let formattedNumbers = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    formattedNumbers.push(<FormattedNumber value={i} key={i} />)
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en">{formattedNumbers}</IntlProvider>
+  )
+})
+
+suite.add('100 x <FormattedDate>', function () {
+  let now = Date.now()
+  let formattedDates = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    formattedDates.push(<FormattedDate value={now - 1000 * 60 * i} key={i} />)
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en">{formattedDates}</IntlProvider>
+  )
+})
+
+suite.add('100 x <FormattedMessage>', function () {
+  let messages: Record<number, string> = {}
+  let formattedMessages = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    messages[i] = `message ${i}`
+    formattedMessages.push(<FormattedMessage id={`${i}`} key={i} />)
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en" messages={messages}>
+      {formattedMessages}
+    </IntlProvider>
+  )
+})
+
+suite.add('100 x <FormattedMessage> with placeholder', function () {
+  let messages: Record<number, string> = {}
+  let formattedMessages = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    const varName = `var${i}`
+    messages[i] = `{${varName}, plural, 
+    zero {{${varName}, number} message} 
+    one {{${varName}, number} message} 
+    few {{${varName}, number} message} 
+    many {{${varName}, number} message} 
+    other {{${varName}, number} messages}
+  }`
+    formattedMessages.push(
+      <FormattedMessage id={`${i}`} values={{[varName]: i}} key={i} />
+    )
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en" messages={messages}>
+      {formattedMessages}
+    </IntlProvider>
+  )
+})
+
+let messageAsts: Record<number, MessageFormatElement[]> = {}
+for (let i = 0, len = 100; i < len; i += 1) {
+  const varName = `var${i}`
+  messageAsts[i] = parse(
+    `{${varName}, plural, 
+      zero {{${varName}, number} message} 
+      one {{${varName}, number} message} 
+      few {{${varName}, number} message} 
+      many {{${varName}, number} message} 
+      other {{${varName}, number} messages}
+    }`
+  )
+}
+
+suite.add('100 x <FormattedMessage> with placeholder in AST form', function () {
+  let formattedMessages = []
+
+  for (let i = 0, len = 100; i < len; i += 1) {
+    const varName = `var${i}`
+    formattedMessages.push(
+      <FormattedMessage id={`${i}`} values={{[varName]: i}} key={i} />
+    )
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en" messages={messageAsts}>
+      {formattedMessages}
+    </IntlProvider>
+  )
+})
+
+suite.add('100 x <FormattedMessage> with placeholder, cached', function () {
+  let messages: Record<number, string> = {}
+  let formattedMessages = []
+  for (let i = 0, len = 100; i < len; i += 1) {
+    messages[i] = `{var0, plural, 
+      zero {{var0, number} message} 
+      one {{var0, number} message} 
+      few {{var0, number} message} 
+      many {{var0, number} message} 
+      other {{var0, number} messages}
+    }`
+    formattedMessages.push(
+      <FormattedMessage id={`${i}`} values={{var0: i}} key={i} />
+    )
+  }
+
+  ReactDOMServer.renderToString(
+    <IntlProvider locale="en" messages={messages}>
+      {formattedMessages}
+    </IntlProvider>
+  )
+})
+
+const cachedAst = parse(
+  `{var0, plural, 
+    zero {{var0, number} message} 
+    one {{var0, number} message} 
+    few {{var0, number} message} 
+    many {{var0, number} message} 
+    other {{var0, number} messages}
+  }`
+)
+suite.add(
+  '100 x <FormattedMessage> with placeholder, cached in AST form',
+  function () {
+    let messages: Record<number, MessageFormatElement[]> = {}
+    let formattedMessages = []
+    for (let i = 0, len = 100; i < len; i += 1) {
+      messages[i] = cachedAst
+      formattedMessages.push(
+        <FormattedMessage id={`${i}`} values={{var0: i}} key={i} />
+      )
+    }
+
+    ReactDOMServer.renderToString(
+      <IntlProvider locale="en" messages={messages}>
+        {formattedMessages}
+      </IntlProvider>
+    )
+  }
+)
+
+// suite.add('100 x <FormattedRelative>', function() {
+//   let formattedRelativeTimes = [];
+//   for (let i = 0, len = 100; i < len; i += 1) {
+//     formattedRelativeTimes.push(
+//       <FormattedRelativeTime value={-60 * i} key={i} />
+//     );
+//   }
+
+//   ReactDOMServer.renderToString(
+//     <IntlProvider locale="en">
+//       <div>{formattedRelativeTimes}</div>
+//     </IntlProvider>
+//   );
+// });
+
+suite.run()

package/tests/setup.js

@@ -0,0 +1,10 @@
+if (process.version.startsWith('v12')) {
+  delete Intl.NumberFormat
+}
+require('@formatjs/intl-displaynames/polyfill')
+require('@formatjs/intl-displaynames/locale-data/en')
+require('@formatjs/intl-numberformat/polyfill')
+require('@formatjs/intl-numberformat/locale-data/en')
+require('@formatjs/intl-numberformat/locale-data/es')
+// add custom jest matchers from jest-dom
+require('@testing-library/jest-dom/extend-expect')

package/tests/unit/components/__snapshots__/displayName.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FormattedDisplayName /> accepts Intl.DisplayNames options 1`] = `
+<div>
+  <span
+    data-testid="comp"
+  >
+    Chinese Yuan
+  </span>
+</div>
+`;
+
+exports[`<FormattedDisplayName /> renders an empty <> when the underlying DisplayNames would return undefined 1`] = `
+<div>
+  <span
+    data-testid="comp"
+  />
+</div>
+`;

package/tests/unit/components/__snapshots__/message.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FormattedMessage> accepts string as \`tagName\` prop 1`] = `
+<div>
+  <span
+    data-testid="comp"
+  >
+    <p>
+      Hello, World!
+    </p>
+  </span>
+</div>
+`;
+
+exports[`<FormattedMessage> rich text supports rich-text message formatting w/ nested tag 1`] = `
+<span
+  data-testid="comp"
+>
+  Hello, 
+  <b>
+    Jest
+    <i>
+      !
+    </i>
+  </b>
+</span>
+`;
+
+exports[`<FormattedMessage> rich text supports rich-text message formatting w/ nested tag, chunks merged 1`] = `
+<span
+  data-testid="comp"
+>
+  Hello, 
+  <b>
+    Jest
+    <i>
+      !
+    </i>
+  </b>
+</span>
+`;

package/tests/unit/components/__snapshots__/relative.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FormattedRelativeTime> supports function-as-child pattern 1`] = `
+<span
+  data-testid="comp"
+>
+  <b>
+    Jest
+  </b>
+</span>
+`;

package/tests/unit/components/__snapshots__/useIntl.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useIntl() hook should work when switching locale on provider 1`] = `
+<span
+  data-testid="comp"
+>
+  $10,000.00
+</span>
+`;
+
+exports[`useIntl() hook should work when switching locale on provider 2`] = `
+<span
+  data-testid="comp"
+>
+  10.000,00 US$
+</span>
+`;
+
+exports[`useIntl() hook should work when switching locale on provider 3`] = `
+<span
+  data-testid="comp"
+>
+  $10,000.00
+</span>
+`;