react-intl 6.0.5 → 6.0.6

package/examples/advanced/Advanced.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import {IntlProvider, FormattedMessage} from 'react-intl'
+
+type IntlProviderProps = React.ComponentProps<typeof IntlProvider>
+
+function loadLocaleData(locale: string) {
+  switch (locale) {
+    case 'fr':
+      return import('./compiled-lang/fr.json')
+    default:
+      return import('./compiled-lang/en.json')
+  }
+}
+
+interface Props {
+  locale: IntlProviderProps['locale']
+  messages: IntlProviderProps['messages']
+}
+
+const App: React.FC<Props> = props => {
+  return (
+    <IntlProvider
+      locale={props.locale}
+      defaultLocale="en"
+      messages={props.messages}
+    >
+      <p>
+        <span style={{fontSize: '30px'}}>AST</span>
+        <br />
+        <FormattedMessage id="simple" />
+        <br />
+        <FormattedMessage id="placeholder" values={{name: 'John'}} />
+        <br />
+        <FormattedMessage id="date" values={{ts: Date.now()}} />
+        <br />
+        <FormattedMessage id="time" values={{ts: Date.now()}} />
+        <br />
+        <FormattedMessage id="number" values={{num: Math.random() * 1000}} />
+        <br />
+        <FormattedMessage id="plural" values={{num: 1}} />
+        <br />
+        <FormattedMessage id="plural" values={{num: 99}} />
+        <br />
+        <FormattedMessage id="select" values={{gender: 'male'}} />
+        <br />
+        <FormattedMessage id="select" values={{gender: 'female'}} />
+        <br />
+        <FormattedMessage id="selectordinal" values={{order: 1}} />
+        <br />
+        <FormattedMessage id="selectordinal" values={{order: 2}} />
+        <br />
+        <FormattedMessage id="selectordinal" values={{order: 3}} />
+        <br />
+        <FormattedMessage id="selectordinal" values={{order: 4}} />
+        <br />
+        <FormattedMessage
+          id="richtext"
+          values={{num: 99, bold: (chunks: any) => <strong>{chunks}</strong>}}
+        />
+      </p>
+    </IntlProvider>
+  )
+}
+
+export async function bootstrapApplication(locale: string) {
+  const messages = await loadLocaleData(locale)
+  return <App locale={locale} messages={messages.default} />
+}

package/examples/advanced/compiled-lang/en.json

@@ -0,0 +1,77 @@
+{
+  "simple": [{"type": 0, "value": "Hello world"}],
+  "placeholder": [
+    {"type": 0, "value": "Hello "},
+    {"type": 1, "value": "name"}
+  ],
+  "date": [
+    {"type": 0, "value": "Hello "},
+    {"type": 3, "style": null, "value": "ts"}
+  ],
+  "time": [
+    {"type": 0, "value": "Hello "},
+    {"type": 4, "style": null, "value": "ts"}
+  ],
+  "number": [
+    {"type": 0, "value": "Hello "},
+    {"type": 2, "style": null, "value": "num"}
+  ],
+  "plural": [
+    {"type": 0, "value": "I have "},
+    {
+      "type": 6,
+      "pluralType": "cardinal",
+      "value": "num",
+      "offset": 0,
+      "options": {
+        "one": {"value": [{"type": 7}, {"type": 0, "value": " dog"}]},
+        "other": {"value": [{"type": 7}, {"type": 0, "value": " dogs"}]}
+      }
+    }
+  ],
+  "select": [
+    {"type": 0, "value": "I am a "},
+    {
+      "type": 5,
+      "value": "gender",
+      "options": {
+        "male": {"value": [{"type": 0, "value": "boy"}]},
+        "female": {"value": [{"type": 0, "value": "girl"}]}
+      }
+    }
+  ],
+  "selectordinal": [
+    {"type": 0, "value": "I am the "},
+    {
+      "type": 6,
+      "pluralType": "ordinal",
+      "value": "order",
+      "offset": 0,
+      "options": {
+        "one": {"value": [{"type": 7}, {"type": 0, "value": "st person"}]},
+        "two": {"value": [{"type": 7}, {"type": 0, "value": "nd person"}]},
+        "=3": {"value": [{"type": 7}, {"type": 0, "value": "rd person"}]},
+        "other": {"value": [{"type": 7}, {"type": 0, "value": "th person"}]}
+      }
+    }
+  ],
+  "richtext": [
+    {"type": 0, "value": "I have "},
+    {
+      "type": 8,
+      "value": "bold",
+      "children": [
+        {
+          "type": 6,
+          "pluralType": "cardinal",
+          "value": "num",
+          "offset": 0,
+          "options": {
+            "one": {"value": [{"type": 7}, {"type": 0, "value": " dog"}]},
+            "other": {"value": [{"type": 7}, {"type": 0, "value": " dogs"}]}
+          }
+        }
+      ]
+    }
+  ]
+}

package/examples/advanced/compiled-lang/fr.json

@@ -0,0 +1,77 @@
+{
+  "simple": [{"type": 0, "value": "Hello world"}],
+  "placeholder": [
+    {"type": 0, "value": "Hello "},
+    {"type": 1, "value": "name"}
+  ],
+  "date": [
+    {"type": 0, "value": "Hello "},
+    {"type": 3, "style": null, "value": "ts"}
+  ],
+  "time": [
+    {"type": 0, "value": "Hello "},
+    {"type": 4, "style": null, "value": "ts"}
+  ],
+  "number": [
+    {"type": 0, "value": "Hello "},
+    {"type": 2, "style": null, "value": "num"}
+  ],
+  "plural": [
+    {"type": 0, "value": "I have "},
+    {
+      "type": 6,
+      "pluralType": "cardinal",
+      "value": "num",
+      "offset": 0,
+      "options": {
+        "one": {"value": [{"type": 7}, {"type": 0, "value": " dog"}]},
+        "other": {"value": [{"type": 7}, {"type": 0, "value": " dogs"}]}
+      }
+    }
+  ],
+  "select": [
+    {"type": 0, "value": "I am a "},
+    {
+      "type": 5,
+      "value": "gender",
+      "options": {
+        "male": {"value": [{"type": 0, "value": "boy"}]},
+        "female": {"value": [{"type": 0, "value": "girl"}]}
+      }
+    }
+  ],
+  "selectordinal": [
+    {"type": 0, "value": "I am the "},
+    {
+      "type": 6,
+      "pluralType": "ordinal",
+      "value": "order",
+      "offset": 0,
+      "options": {
+        "one": {"value": [{"type": 7}, {"type": 0, "value": "st person"}]},
+        "two": {"value": [{"type": 7}, {"type": 0, "value": "nd person"}]},
+        "=3": {"value": [{"type": 7}, {"type": 0, "value": "rd person"}]},
+        "other": {"value": [{"type": 7}, {"type": 0, "value": "th person"}]}
+      }
+    }
+  ],
+  "richtext": [
+    {"type": 0, "value": "I have "},
+    {
+      "type": 8,
+      "value": "bold",
+      "children": [
+        {
+          "type": 6,
+          "pluralType": "cardinal",
+          "value": "num",
+          "offset": 0,
+          "options": {
+            "one": {"value": [{"type": 7}, {"type": 0, "value": " dog"}]},
+            "other": {"value": [{"type": 7}, {"type": 0, "value": " dogs"}]}
+          }
+        }
+      ]
+    }
+  ]
+}

package/examples/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Intl Explicit Example</title>
+  </head>
+  <body>
+    <div id="timezone"></div>
+    <div id="messages"></div>
+    <div id="hooks"></div>
+    <div id="advanced"></div>
+    <div id="injected"></div>
+    <div id="handlechange"></div>
+    <div id="static-type-safety-and-code-splitting"></div>
+    <div id="bug2727"></div>
+    <!-- Name of the bazel esbuild target -->
+    <script src="./main.js"></script>
+  </body>
+</html>

package/examples/index.tsx

@@ -0,0 +1,44 @@
+import 'core-js/stable'
+import '@formatjs/intl-pluralrules/polyfill'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import Timezone from './TimeZone'
+import Messages from './Messages'
+import Hooks from './Hooks'
+import {bootstrapApplication} from './advanced/Advanced'
+import Injected from './Injected'
+import HandleChange from './HandleChange'
+import StaticTypeSafetyAndCodeSplitting from './StaticTypeSafetyAndCodeSplitting/StaticTypeSafetyAndCodeSplitting'
+import {App as Bug2727} from './Bug2727'
+//polyfills
+import '@formatjs/intl-getcanonicallocales/polyfill'
+import '@formatjs/intl-locale/polyfill'
+
+import '@formatjs/intl-pluralrules/polyfill'
+import '@formatjs/intl-pluralrules/locale-data/en' // locale-data for en
+
+import '@formatjs/intl-numberformat/polyfill'
+import '@formatjs/intl-numberformat/locale-data/en' // locale-data for en
+
+import '@formatjs/intl-datetimeformat/polyfill'
+import '@formatjs/intl-datetimeformat/locale-data/en' // locale-data for en
+import '@formatjs/intl-datetimeformat/add-all-tz' // Add ALL tz data
+
+ReactDOM.render(<Timezone />, document.getElementById('timezone'))
+
+ReactDOM.render(<Messages />, document.getElementById('messages'))
+ReactDOM.render(<Hooks />, document.getElementById('hooks'))
+
+ReactDOM.render(<Injected />, document.getElementById('injected'))
+ReactDOM.render(<HandleChange />, document.getElementById('handlechange'))
+
+ReactDOM.render(
+  <StaticTypeSafetyAndCodeSplitting />,
+  document.getElementById('static-type-safety-and-code-splitting')
+)
+
+ReactDOM.render(<Bug2727 />, document.getElementById('bug2727'))
+
+bootstrapApplication('en').then(app => {
+  ReactDOM.render(app, document.getElementById('advanced'))
+})

package/examples/package.json

@@ -0,0 +1,20 @@
+{
+  "devDependencies": {
+    "@formatjs/intl-datetimeformat": "workspace:*",
+    "@formatjs/intl-getcanonicallocales": "workspace:*",
+    "@formatjs/intl-locale": "workspace:*",
+    "@formatjs/intl-numberformat": "workspace:*",
+    "@formatjs/intl-pluralrules": "workspace:*",
+    "@formatjs/ecma402-abstract": "workspace:*",
+    "@formatjs/icu-messageformat-parser": "workspace:*",
+    "@formatjs/intl": "workspace:*",
+    "@formatjs/intl-displaynames": "workspace:*",
+    "@formatjs/intl-listformat": "workspace:*",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/react": "16 || 17 || 18",
+    "hoist-non-react-statics": "^3.3.2",
+    "intl-messageformat": "workspace:*",
+    "react-intl": "workspace:*",
+    "tslib": "2.4.0"
+  }
+}

package/index.ts

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react'
+import {
+  createFormattedComponent,
+  createFormattedDateTimePartsComponent,
+} from './src/components/createFormattedComponent'
+import {
+  MessageDescriptor,
+  CustomFormatConfig,
+  FormatDateOptions,
+} from '@formatjs/intl'
+import {IntlListFormatOptions} from '@formatjs/intl-listformat'
+import {DisplayNamesOptions} from '@formatjs/intl-displaynames'
+import {NumberFormatOptions} from '@formatjs/ecma402-abstract'
+import injectIntl, {
+  Provider as RawIntlProvider,
+  Context as IntlContext,
+  WithIntlProps,
+  WrappedComponentProps,
+} from './src/components/injectIntl'
+import useIntl from './src/components/useIntl'
+import IntlProvider, {createIntl} from './src/components/provider'
+import FormattedRelativeTime from './src/components/relative'
+import FormattedPlural from './src/components/plural'
+import FormattedMessage from './src/components/message'
+import FormattedDateTimeRange from './src/components/dateTimeRange'
+export {
+  FormattedDateTimeRange,
+  FormattedMessage,
+  FormattedPlural,
+  FormattedRelativeTime,
+  IntlContext,
+  IntlProvider,
+  RawIntlProvider,
+  WithIntlProps,
+  WrappedComponentProps,
+  createIntl,
+  injectIntl,
+  useIntl,
+}
+export {IntlConfig, ResolvedIntlConfig, IntlShape} from './src/types'
+export {
+  createIntlCache,
+  MessageDescriptor,
+  IntlCache,
+  Formatters,
+  IntlFormatters,
+  FormatDisplayNameOptions,
+  FormatListOptions,
+  FormatPluralOptions,
+  FormatRelativeTimeOptions,
+  FormatNumberOptions,
+  FormatDateOptions,
+  CustomFormatConfig,
+  CustomFormats,
+  UnsupportedFormatterError,
+  InvalidConfigError,
+  MissingDataError,
+  MessageFormatError,
+  MissingTranslationError,
+  IntlErrorCode as ReactIntlErrorCode,
+  IntlError as ReactIntlError,
+} from '@formatjs/intl'
+
+export function defineMessages<
+  K extends keyof any,
+  T = MessageDescriptor,
+  U extends Record<K, T> = Record<K, T>
+>(msgs: U): U {
+  return msgs
+}
+
+export function defineMessage<T extends MessageDescriptor>(msg: T): T {
+  return msg
+}
+// IMPORTANT: Explicit here to prevent api-extractor from outputing `import('./src/types').CustomFormatConfig`
+export const FormattedDate: React.FC<
+  Intl.DateTimeFormatOptions &
+    CustomFormatConfig & {
+      value: string | number | Date | undefined
+    }
+> = createFormattedComponent('formatDate')
+export const FormattedTime: React.FC<
+  Intl.DateTimeFormatOptions &
+    CustomFormatConfig & {
+      value: string | number | Date | undefined
+    }
+> = createFormattedComponent('formatTime')
+// @ts-ignore issue w/ TS Intl types
+export const FormattedNumber: React.FC<
+  NumberFormatOptions &
+    CustomFormatConfig & {
+      value: number | bigint
+    }
+> = createFormattedComponent('formatNumber')
+export const FormattedList: React.FC<
+  IntlListFormatOptions & {
+    value: readonly React.ReactNode[]
+  }
+> = createFormattedComponent('formatList')
+export const FormattedDisplayName: React.FC<
+  DisplayNamesOptions & {
+    value: string | number | Record<string, unknown>
+  }
+> = createFormattedComponent('formatDisplayName')
+export const FormattedDateParts: React.FC<
+  FormatDateOptions & {
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
+> = createFormattedDateTimePartsComponent('formatDate')
+export const FormattedTimeParts: React.FC<
+  FormatDateOptions & {
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
+> = createFormattedDateTimePartsComponent('formatTime')
+
+export {
+  FormattedNumberParts,
+  FormattedListParts,
+} from './src/components/createFormattedComponent'
+export type {MessageFormatElement} from '@formatjs/icu-messageformat-parser'

package/jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  preset: 'ts-jest',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  testEnvironment: 'jsdom',
+  testRegex: ['/tests/(functional|unit)/.*\\.(ts|tsx)'],
+  testPathIgnorePatterns: [
+    'tests/functional/support',
+    '/tests/unit/testUtils',
+    '__snapshots__',
+  ],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  coverageReporters: ['lcov', 'text', 'text-summary', 'html'],
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
+  coverageThreshold: {
+    global: {
+      branches: 85,
+      functions: 100,
+      lines: 95,
+      statements: 95,
+    },
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
   "keywords": [
     "intl",
@@ -128,17 +128,21 @@
   "types": "index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@formatjs/ecma402-abstract": "1.11.8",
-    "@formatjs/icu-messageformat-parser": "2.1.4",
-    "@formatjs/intl": "2.3.1",
-    "@formatjs/intl-displaynames": "6.0.3",
-    "@formatjs/intl-listformat": "7.0.3",
+    "@formatjs/ecma402-abstract": "1.11.9",
+    "@formatjs/icu-messageformat-parser": "2.1.5",
+    "@formatjs/intl": "2.3.2",
+    "@formatjs/intl-displaynames": "6.1.0",
+    "@formatjs/intl-listformat": "7.1.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/react": "16 || 17 || 18",
     "hoist-non-react-statics": "^3.3.2",
-    "intl-messageformat": "10.1.1",
+    "intl-messageformat": "10.1.2",
     "tslib": "2.4.0"
   },
+  "devDependencies": {
+    "@formatjs/intl-numberformat": "8.1.0",
+    "@formatjs/intl-relativetimeformat": "11.1.0"
+  },
   "peerDependencies": {
     "react": "^16.6.0 || 17 || 18",
     "typescript": "^4.5"
@@ -152,4 +156,4 @@
     "ie 11"
   ],
   "gitHead": "773d6ebf881357f6e4c2dd7e8984b1bd0f69b4ca"
-}
+}

package/src/components/createFormattedComponent.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react'
+import {
+  FormatDateOptions,
+  FormatNumberOptions,
+  FormatListOptions,
+  FormatDisplayNameOptions,
+} from '@formatjs/intl'
+import {IntlShape} from '../types'
+import useIntl from './useIntl'
+import {Part} from '@formatjs/intl-listformat'
+
+enum DisplayName {
+  formatDate = 'FormattedDate',
+  formatTime = 'FormattedTime',
+  formatNumber = 'FormattedNumber',
+  formatList = 'FormattedList',
+  // Note that this DisplayName is the locale display name, not to be confused with
+  // the name of the enum, which is for React component display name in dev tools.
+  formatDisplayName = 'FormattedDisplayName',
+}
+
+enum DisplayNameParts {
+  formatDate = 'FormattedDateParts',
+  formatTime = 'FormattedTimeParts',
+  formatNumber = 'FormattedNumberParts',
+  formatList = 'FormattedListParts',
+}
+
+type Formatter = {
+  formatDate: FormatDateOptions
+  formatTime: FormatDateOptions
+  formatNumber: FormatNumberOptions
+  formatList: FormatListOptions
+  formatDisplayName: FormatDisplayNameOptions
+}
+
+export const FormattedNumberParts: React.FC<
+  Formatter['formatNumber'] & {
+    value: Parameters<IntlShape['formatNumber']>[0]
+
+    children(val: Intl.NumberFormatPart[]): React.ReactElement | null
+  }
+> = props => {
+  const intl = useIntl()
+  const {value, children, ...formatProps} = props
+  return children(intl.formatNumberToParts(value, formatProps))
+}
+FormattedNumberParts.displayName = 'FormattedNumberParts'
+
+export const FormattedListParts: React.FC<
+  Formatter['formatList'] & {
+    value: Parameters<IntlShape['formatList']>[0]
+
+    children(val: Part[]): React.ReactElement | null
+  }
+> = props => {
+  const intl = useIntl()
+  const {value, children, ...formatProps} = props
+  return children(intl.formatListToParts(value, formatProps))
+}
+FormattedNumberParts.displayName = 'FormattedNumberParts'
+
+export function createFormattedDateTimePartsComponent<
+  Name extends 'formatDate' | 'formatTime'
+>(
+  name: Name
+): React.FC<
+  Formatter[Name] & {
+    value: Parameters<IntlShape[Name]>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
+> {
+  type FormatFn = IntlShape[Name]
+  type Props = Formatter[Name] & {
+    value: Parameters<FormatFn>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
+
+  const ComponentParts: React.FC<Props> = props => {
+    const intl = useIntl()
+    const {value, children, ...formatProps} = props
+    const date = typeof value === 'string' ? new Date(value || 0) : value
+    const formattedParts: Intl.DateTimeFormatPart[] =
+      name === 'formatDate'
+        ? intl.formatDateToParts(date, formatProps)
+        : intl.formatTimeToParts(date, formatProps)
+
+    return children(formattedParts)
+  }
+  ComponentParts.displayName = DisplayNameParts[name]
+  return ComponentParts
+}
+
+export function createFormattedComponent<Name extends keyof Formatter>(
+  name: Name
+): React.FC<
+  Formatter[Name] & {
+    value: Parameters<IntlShape[Name]>[0]
+    children?(val: string): React.ReactElement | null
+  }
+> {
+  type FormatFn = IntlShape[Name]
+  type Props = Formatter[Name] & {
+    value: Parameters<FormatFn>[0]
+    children?(val: string): React.ReactElement | null
+  }
+
+  const Component: React.FC<Props> = props => {
+    const intl = useIntl()
+    const {value, children, ...formatProps} = props
+    // TODO: fix TS type definition for localeMatcher upstream
+    const formattedValue = intl[name](value as any, formatProps as any)
+
+    if (typeof children === 'function') {
+      return children(formattedValue as any)
+    }
+    const Text = intl.textComponent || React.Fragment
+    return <Text>{formattedValue}</Text>
+  }
+
+  Component.displayName = DisplayName[name]
+  return Component
+}

package/src/components/dateTimeRange.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import {FormatDateOptions} from '@formatjs/intl'
+import {DateTimeFormat} from '@formatjs/ecma402-abstract'
+import useIntl from './useIntl'
+
+interface Props extends FormatDateOptions {
+  from: Parameters<DateTimeFormat['formatRange']>[0]
+  to: Parameters<DateTimeFormat['formatRange']>[1]
+  children?(value: React.ReactNode): React.ReactElement | null
+}
+
+const FormattedDateTimeRange: React.FC<Props> = props => {
+  const intl = useIntl()
+
+  const {from, to, children, ...formatProps} = props
+  const formattedValue = intl.formatDateTimeRange(from, to, formatProps)
+
+  if (typeof children === 'function') {
+    return children(formattedValue as any)
+  }
+  const Text = intl.textComponent || React.Fragment
+  return <Text>{formattedValue}</Text>
+}
+
+FormattedDateTimeRange.displayName = 'FormattedDateTimeRange'
+export default FormattedDateTimeRange