feat: AOT compilation with icu-to-json (experiment)

packages/use-intl/package.json

@@ -62,7 +62,7 @@
  ],
  "dependencies": {
  "@formatjs/ecma402-abstract": "^1.11.4",
- "intl-messageformat": "^9.3.18"
+ "icu-to-json": "0.0.20"
  },
  "peerDependencies": {
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

packages/use-intl/src/core/MessageFormat.tsx

@@ -0,0 +1,9 @@
+import type {compile} from 'icu-to-json/compiler';
+
+type MessageFormat = Omit<
+ ReturnType<typeof compile>,
+ // TODO: Do we need the args?
+ 'args'
+>;
+
+export default MessageFormat;

packages/use-intl/src/core/MessageFormatCache.tsx

@@ -1,10 +1,9 @@
-// eslint-disable-next-line import/no-named-as-default -- False positive
-import type IntlMessageFormat from 'intl-messageformat';
+import MessageFormat from './MessageFormat';
 
 type MessageFormatCache = Map<
  /** Format: `${locale}.${namespace}.${key}.${message}` */
- string,
- IntlMessageFormat
+ string, // Could simplify the key here
+ MessageFormat
 >;
 
 export default MessageFormatCache;

packages/use-intl/src/core/createBaseTranslator.tsx

@@ -1,5 +1,7 @@
 // eslint-disable-next-line import/no-named-as-default -- False positive
-import IntlMessageFormat from 'intl-messageformat';
+// import IntlMessageFormat from 'intl-messageformat';
+import {evaluateAst} from 'icu-to-json';
+import {compile} from 'icu-to-json/compiler';
 import {
  cloneElement,
  isValidElement,
@@ -11,13 +13,14 @@ import AbstractIntlMessages from './AbstractIntlMessages';
 import Formats from './Formats';
 import {InitializedIntlConfig} from './IntlConfig';
 import IntlError, {IntlErrorCode} from './IntlError';
+import MessageFormat from './MessageFormat';
 import MessageFormatCache from './MessageFormatCache';
 import TranslationValues, {
  MarkupTranslationValues,
  RichTranslationValues
 } from './TranslationValues';
-import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
 import {defaultGetMessageFallback, defaultOnError} from './defaults';
+import getFormatters from './getFormatters';
 import MessageKeys from './utils/MessageKeys';
 import NestedKeyOf from './utils/NestedKeyOf';
 import NestedValueOf from './utils/NestedValueOf';
@@ -56,34 +59,6 @@ function resolvePath(
  return message;
 }
 
-function prepareTranslationValues(values: RichTranslationValues) {
- if (Object.keys(values).length === 0) return undefined;
-
- // Workaround for https://github.com/formatjs/formatjs/issues/1467
- const transformedValues: RichTranslationValues = {};
- Object.keys(values).forEach((key) => {
- let index = 0;
- const value = values[key];
-
- let transformed;
- if (typeof value === 'function') {
- transformed = (chunks: ReactNode) => {
- const result = value(chunks);
-
- return isValidElement(result)
- ? cloneElement(result, {key: key + index++})
- : result;
- };
- } else {
- transformed = value;
- }
-
- transformedValues[key] = transformed;
- });
-
- return transformedValues;
-}
-
 function getMessagesOrError<Messages extends AbstractIntlMessages>({
  messages,
  namespace,
@@ -224,7 +199,7 @@ function createBaseTranslatorImpl<
 
  const cacheKey = joinPath([locale, namespace, key, String(message)]);
 
- let messageFormat: IntlMessageFormat;
+ let messageFormat: MessageFormat;
  if (messageFormatCache?.has(cacheKey)) {
  messageFormat = messageFormatCache.get(cacheKey)!;
  } else {
@@ -252,18 +227,12 @@ function createBaseTranslatorImpl<
  }
 
  // Hot path that avoids creating an `IntlMessageFormat` instance
+ // TODO: We can get rid of this with icu-to-json
  const plainMessage = getPlainMessage(message as string, values);
  if (plainMessage) return plainMessage;
 
  try {
- messageFormat = new IntlMessageFormat(
- message,
- locale,
- convertFormatsToIntlMessageFormat(
- {...globalFormats, ...formats},
- timeZone
- )
- );
+ messageFormat = compile(message);
  } catch (error) {
  return getFallbackFromErrorAndNotify(
  key,
@@ -276,14 +245,25 @@ function createBaseTranslatorImpl<
  }
 
  try {
- const formattedMessage = messageFormat.format(
- // @ts-expect-error `intl-messageformat` expects a different format
- // for rich text elements since a recent minor update. This
- // needs to be evaluated in detail, possibly also in regards
- // to be able to format to parts.
- prepareTranslationValues({...defaultTranslationValues, ...values})
+ const evaluated = evaluateAst(
+ messageFormat.json,
+ locale,
+ {...defaultTranslationValues, ...values},
+ getFormatters(timeZone, formats, globalFormats)
  );
 
+ let formattedMessage;
+ if (evaluated.length === 0) {
+ // Empty
+ formattedMessage = '';
+ } else if (evaluated.length === 1) {
+ // Plain text
+ formattedMessage = evaluated[0];
+ } else {
+ // Rich text
+ formattedMessage = evaluated;
+ }
+
  if (formattedMessage == null) {
  throw new Error(
  process.env.NODE_ENV !== 'production'

packages/use-intl/src/core/getFormatters.tsx

@@ -0,0 +1,138 @@
+import Formats from './Formats';
+
+// Copied from intl-messageformat
+const defaults = {
+ number: {
+ integer: {maximumFractionDigits: 0},
+ currency: {style: 'currency'},
+ percent: {style: 'percent'}
+ },
+ date: {
+ short: {month: 'numeric', day: 'numeric', year: '2-digit'},
+ medium: {month: 'short', day: 'numeric', year: 'numeric'},
+ long: {month: 'long', day: 'numeric', year: 'numeric'},
+ full: {weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'}
+ },
+ time: {
+ short: {hour: 'numeric', minute: 'numeric'},
+ medium: {hour: 'numeric', minute: 'numeric', second: 'numeric'},
+ long: {
+ hour: 'numeric',
+ minute: 'numeric',
+ second: 'numeric',
+ timeZoneName: 'short'
+ },
+ full: {
+ hour: 'numeric',
+ minute: 'numeric',
+ second: 'numeric',
+ timeZoneName: 'short'
+ }
+ }
+} as const;
+
+type FormatNameOrArgs<Options> =
+ | string
+ | {
+ type: number; // TODO: Unused, is this necessary?
+ tokens: Array<unknown>; // TODO: Unused, is this necessary?
+ parsedOptions?: Options;
+ };
+
+export default function getFormatters(
+ timeZone?: string,
+ formats?: Partial<Formats>,
+ globalFormats?: Partial<Formats>
+) {
+ const formatters = {
+ date(
+ value: number | string,
+ locale: string,
+ formatNameOrArgs?: FormatNameOrArgs<Intl.DateTimeFormatOptions>
+ ) {
+ const allFormats = {
+ ...defaults.date,
+ // TODO: time & date vs dateTime. Maybe we should separate
+ // time and date, because ICU does this too?
+ ...globalFormats?.dateTime
+ };
+
+ const options: Intl.DateTimeFormatOptions = {timeZone};
+ if (formatNameOrArgs) {
+ if (typeof formatNameOrArgs === 'string') {
+ if (formatNameOrArgs in allFormats) {
+ Object.assign(options, (allFormats as any)[formatNameOrArgs]);
+ }
+ }
+ if (typeof formatNameOrArgs === 'object') {
+ Object.assign(options, formatNameOrArgs.parsedOptions);
+ }
+ }
+
+ // TODO: Use Intl.DateTimeFormat and caching?
+ return new Date(value).toLocaleDateString(locale, options);
+ },
+
+ time(
+ value: number | string,
+ locale: string,
+ formatNameOrArgs?: FormatNameOrArgs<Intl.DateTimeFormatOptions>
+ ) {
+ const allFormats = {
+ ...defaults.time,
+ ...globalFormats?.dateTime
+ };
+
+ const options: Intl.DateTimeFormatOptions = {timeZone};
+ if (formatNameOrArgs) {
+ if (typeof formatNameOrArgs === 'string') {
+ if (formatNameOrArgs in allFormats) {
+ Object.assign(options, (allFormats as any)[formatNameOrArgs]);
+ }
+ }
+ if (typeof formatNameOrArgs === 'object') {
+ Object.assign(options, formatNameOrArgs.parsedOptions);
+ }
+ }
+
+ // TODO: Use Intl.DateTimeFormat and caching?
+ return new Date(value).toLocaleTimeString(locale, options);
+ },
+
+ numberFmt(
+ value: number,
+ locale: string,
+ formatNameOrArgs?: FormatNameOrArgs<Intl.NumberFormatOptions>
+ ) {
+ const allFormats = {
+ ...defaults.number,
+ ...globalFormats?.number,
+ ...formats?.number
+ };
+
+ const options: Intl.NumberFormatOptions = {};
+ if (formatNameOrArgs) {
+ if (typeof formatNameOrArgs === 'string') {
+ // Based on https://github.com/messageformat/messageformat/blob/main/packages/runtime/src/fmt/number.ts
+ const [formatName, currency] = formatNameOrArgs.split(':') || [];
+
+ if (formatNameOrArgs in allFormats) {
+ Object.assign(options, (allFormats as any)[formatName]);
+ }
+ if (currency) {
+ options.currency = currency;
+ }
+ }
+ if (typeof formatNameOrArgs === 'object') {
+ Object.assign(options, formatNameOrArgs.parsedOptions);
+ }
+ }
+
+ // TODO: Caching?
+ const format = new Intl.NumberFormat(locale, options);
+ return format.format(value);
+ }
+ };
+
+ return formatters;
+}