@react-aria/i18n 3.2.0 → 3.3.3

package/src/useMessageFormatter.ts

@@ -10,89 +10,31 @@
  * governing permissions and limitations under the License.
  */
 
-import IntlMessageFormat from 'intl-messageformat';
+import {LocalizedStrings, MessageDictionary, MessageFormatter} from '@internationalized/message';
+import {useCallback, useMemo} from 'react';
 import {useLocale} from './context';
 
-type MessageFormatterStrings = {
-  [lang: string]: {
-    [key: string]: string
-  }
-};
-
 type FormatMessage = (key: string, variables?: {[key: string]: any}) => string;
 
-const formatterCache = new Map();
+const cache = new WeakMap();
+function getCachedDictionary(strings: LocalizedStrings) {
+  let dictionary = cache.get(strings);
+  if (!dictionary) {
+    dictionary = new MessageDictionary(strings);
+    cache.set(strings, dictionary);
+  }
+
+  return dictionary;
+}
 
 /**
  * Handles formatting ICU Message strings to create localized strings for the current locale.
  * Automatically updates when the locale changes, and handles caching of messages for performance.
  * @param strings - A mapping of languages to strings by key.
  */
-export function useMessageFormatter(strings: MessageFormatterStrings): FormatMessage {
-  let {locale: currentLocale} = useLocale();
-
-  // Check the cache
-  let localeCache = formatterCache.get(strings);
-  if (localeCache && localeCache.has(currentLocale)) {
-    return localeCache.get(currentLocale);
-  }
-
-  // Add to the formatter cache if needed
-  if (!localeCache) {
-    localeCache = new Map();
-    formatterCache.set(strings, localeCache);
-  }
-
-  // Get the strings for the current locale
-  let localeStrings = selectLocale(strings, currentLocale);
-
-  // Create a new message formatter
-  let cache = {};
-  let formatMessage = (key, variables) => {
-    let message = cache[key + '.' + currentLocale];
-    if (!message) {
-      let msg = localeStrings[key];
-      if (!msg) {
-        throw new Error(`Could not find intl message ${key} in ${currentLocale} locale`);
-      }
-
-      message = new IntlMessageFormat(msg, currentLocale);
-      cache[key] = message;
-    }
-
-    return message.format(variables);
-  };
-
-  localeCache.set(currentLocale, formatMessage);
-  return formatMessage;
-}
-
-function selectLocale(strings, locale) {
-  // If there is an exact match, use it.
-  if (strings[locale]) {
-    return strings[locale];
-  }
-
-  // Attempt to find the closest match by language.
-  // For example, if the locale is fr-CA (French Canadian), but there is only
-  // an fr-FR (France) set of strings, use that.
-  let language = getLanguage(locale);
-  for (let key in strings) {
-    if (key.startsWith(language + '-')) {
-      return strings[key];
-    }
-  }
-
-  // Nothing close, use english.
-  return strings['en-US'];
-}
-
-function getLanguage(locale) {
-  // @ts-ignore
-  if (Intl.Locale) {
-    // @ts-ignore
-    return new Intl.Locale(locale).language;
-  }
-
-  return locale.split('-')[0];
+export function useMessageFormatter(strings: LocalizedStrings): FormatMessage {
+  let {locale} = useLocale();
+  let dictionary = useMemo(() => getCachedDictionary(strings), [strings]);
+  let formatter = useMemo(() => new MessageFormatter(locale, dictionary), [locale, dictionary]);
+  return useCallback((key, variables) => formatter.format(key, variables), [formatter]);
 }

package/src/useNumberFormatter.ts

@@ -10,42 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {numberFormatSignDisplayPolyfill} from './utils';
+import {NumberFormatOptions, NumberFormatter} from '@internationalized/number';
 import {useLocale} from './context';
-
-let formatterCache = new Map<string, Intl.NumberFormat>();
-
-let supportsSignDisplay = false;
-try {
-  // @ts-ignore
-  supportsSignDisplay = (new Intl.NumberFormat('de-DE', {signDisplay: 'exceptZero'})).resolvedOptions().signDisplay === 'exceptZero';
-  // eslint-disable-next-line no-empty
-} catch (e) {}
+import {useMemo} from 'react';
 
 /**
  * Provides localized number formatting for the current locale. Automatically updates when the locale changes,
  * and handles caching of the number formatter for performance.
  * @param options - Formatting options.
  */
-export function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat {
+export function useNumberFormatter(options: NumberFormatOptions = {}): Intl.NumberFormat {
   let {locale} = useLocale();
-
-  let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
-  if (formatterCache.has(cacheKey)) {
-    return formatterCache.get(cacheKey);
-  }
-
-  let numberFormatter = new Intl.NumberFormat(locale, options);
-  // @ts-ignore
-  let {signDisplay} = options || {};
-  formatterCache.set(cacheKey, (!supportsSignDisplay && signDisplay != null) ? new Proxy(numberFormatter, {
-    get(target, property) {
-      if (property === 'format') {
-        return (v) => numberFormatSignDisplayPolyfill(numberFormatter, signDisplay, v);
-      } else {
-        return target[property];
-      }
-    }
-  }) : numberFormatter);
-  return numberFormatter;
+  return useMemo(() => new NumberFormatter(locale, options), [locale, options]);
 }

package/src/utils.ts

@@ -31,36 +31,3 @@ export function isRTL(locale: string) {
   let lang = locale.split('-')[0];
   return RTL_LANGS.has(lang);
 }
-
-export function numberFormatSignDisplayPolyfill(numberFormat: Intl.NumberFormat, signDisplay: 'always' | 'exceptZero' | 'auto' | 'never', num: number) {
-  if (signDisplay === 'auto') {
-    return numberFormat.format(num);
-  } else if (signDisplay === 'never') {
-    return numberFormat.format(Math.abs(num));
-  } else {
-    let needsPositiveSign = false;
-    if (signDisplay === 'always') {
-      needsPositiveSign = num > 0 || Object.is(num, 0);
-    } else if (signDisplay === 'exceptZero') {
-      if (Object.is(num, -0) || Object.is(num, 0)) {
-        num = Math.abs(num);
-      } else {
-        needsPositiveSign = num > 0;
-      }
-    }
-
-    if (needsPositiveSign) {
-      let negative = numberFormat.format(-num);
-      let noSign = numberFormat.format(num);
-      // ignore RTL/LTR marker character
-      let minus = negative.replace(noSign, '').replace(/\u200e|\u061C/, '');
-      if ([...minus].length !== 1) {
-        console.warn('@react-aria/i18n polyfill for NumberFormat signDisplay: Unsupported case');
-      }
-      let positive = negative.replace(noSign, '!!!').replace(minus, '+').replace('!!!', noSign);
-      return positive;
-    } else {
-      return numberFormat.format(num);
-    }
-  }
-}

package/src/useNumberParser.ts

@@ -1,48 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {useCallback, useEffect, useRef} from 'react';
-import {useLocale} from './context';
-
-type NumberParser = {
-  parse: (value:string) => number
-}
-
-/**
- * Provides localized number parsing for the current locale.
- * Idea from https://observablehq.com/@mbostock/localized-number-parsing.
- */
-export function useNumberParser(): NumberParser {
-  let {locale} = useLocale();
-  const numberData = useRef({group: null, decimal: null, numeral: null, index: null});
-
-  useEffect(() => {
-    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
-    const numerals = [...new Intl.NumberFormat(locale, {useGrouping: false}).format(9876543210)].reverse();
-    const index = new Map(numerals.map((d, i) => [d, i]));
-    
-    numberData.current.group = new RegExp(`[${parts.find(d => d.type === 'group').value}]`, 'g');
-    numberData.current.decimal = new RegExp(`[${parts.find(d => d.type === 'decimal').value}]`);
-    numberData.current.numeral = new RegExp(`[${numerals.join('')}]`, 'g');
-    numberData.current.index = d => index.get(d);
-  },  [locale]);
-
-  const parse = useCallback((value:string) => {
-    value = value.trim()
-      .replace(numberData.current.group, '')
-      .replace(numberData.current.decimal, '.')
-      .replace(numberData.current.numeral, numberData.current.index);
-    return value ? +value : NaN;
-  }, []);
-
-  return  {parse};
-}