react-intl 6.0.6 → 6.1.1

package/examples/advanced/Advanced.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,77 +0,0 @@
-{
-  "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

@@ -1,77 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-<!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

@@ -1,44 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,127 +0,0 @@
-/*
- * 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

@@ -1,27 +0,0 @@
-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/src/components/createFormattedComponent.tsx

@@ -1,123 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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