@discord/intl 0.1.3-rc.0 → 0.2.0

package/src/formatters/ast.ts

@@ -0,0 +1,155 @@
+import {
+  AnyIntlMessage,
+  FormatterImplementation,
+  FunctionTypes,
+  type RichTextFormattingMap,
+  RichTextTagNames,
+} from '../types';
+import { IntlManager } from '../intl-manager';
+import { FormatBuilder } from '../format';
+
+/**
+ * Types for formatting functions when calling `formatToParts`, ensuring the
+ * functions yield value AST nodes.
+ */
+export type AstFunctionTypes = FunctionTypes<RichTextNode>;
+
+// This structure aims to match `simple-markdown`'s AST, but that type is very
+// loosely defined as just "type" and "arbitrary map of content". This is more
+// explicit and type-safe.
+export enum RichTextNodeType {
+  Text = 'text',
+  Strong = 'strong',
+  Emphasis = 'emphasis',
+  Code = 'code',
+  Link = 'link',
+  Paragraph = 'paragraph',
+  /**
+   * A special extension for when the value of a placeholder is an object.
+   * Rather than casting to a string here, the object is preserved as-is for a
+   * future formatter to render as appropriate (i.e., using an object as a
+   * value when formatting to an AST should keep that object structure so that
+   * the final AST is accurate for what the user expects, but when rendering to
+   * a plain string, the final formatter can just cast that object to a string
+   * using its `toString` method or some other mechanism).
+   */
+  Object = 'object',
+}
+
+const RICH_TEXT_TAG_TYPES: Record<RichTextTagNames, RichTextNodeType> = {
+  $_: RichTextNodeType.Text,
+  $b: RichTextNodeType.Strong,
+  $i: RichTextNodeType.Emphasis,
+  $code: RichTextNodeType.Code,
+  $link: RichTextNodeType.Link,
+  $p: RichTextNodeType.Paragraph,
+};
+
+interface RichTextNodeBase<ContentType> {
+  type: RichTextNodeType;
+  content: ContentType;
+}
+interface RichTextTextNode extends RichTextNodeBase<string> {
+  type: RichTextNodeType.Text;
+}
+interface RichTextStrongNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Strong;
+}
+interface RichTextEmphasisNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Emphasis;
+}
+interface RichTextCodeNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Code;
+}
+interface RichTextParagraphNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Paragraph;
+}
+interface RichTextLinkNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Link;
+  target: string;
+}
+interface RichTextObjectNode extends RichTextNodeBase<object> {
+  type: RichTextNodeType.Object;
+}
+
+export type RichTextNode =
+  | RichTextTextNode
+  | RichTextStrongNode
+  | RichTextEmphasisNode
+  | RichTextCodeNode
+  | RichTextParagraphNode
+  | RichTextLinkNode
+  | RichTextObjectNode;
+
+const AST_RICH_TEXT_ELEMENTS: RichTextFormattingMap<AstFunctionTypes['hook']> = {
+  $_: () => ({ type: RichTextNodeType.Text, content: '' }),
+  $b: (content) => ({ type: RichTextNodeType.Strong, content }),
+  $code: (content) => ({ type: RichTextNodeType.Code, content }),
+  $i: (content) => ({ type: RichTextNodeType.Emphasis, content }),
+  $link: ([target, ...content]) => ({
+    type: RichTextNodeType.Link,
+    target: target.content as string,
+    content,
+  }),
+  $p: (content) => ({ type: RichTextNodeType.Paragraph, content }),
+};
+
+class AstBuilder extends FormatBuilder<RichTextNode> {
+  result: RichTextNode[] = [];
+
+  pushRichTextTag(tag: RichTextTagNames, children: RichTextNode[]) {
+    if (!(tag in AST_RICH_TEXT_ELEMENTS)) {
+      throw `${tag} is not a known rich text formatting tag`;
+    }
+    const result = AST_RICH_TEXT_ELEMENTS[tag](children);
+    if (Array.isArray(result)) {
+      this.result.push(...result);
+    } else {
+      this.result.push(result);
+    }
+  }
+
+  pushLiteralText(text: string) {
+    const last = this.result[this.result.length - 1];
+    if (last.type === RichTextNodeType.Text) {
+      last.content += text;
+    } else {
+      this.result.push({ type: RichTextNodeType.Text, content: text });
+    }
+  }
+
+  pushObject(value: object) {
+    this.result.push({ type: RichTextNodeType.Object, content: value });
+  }
+
+  finish(): RichTextNode[] {
+    return this.result;
+  }
+}
+
+/**
+ * Format the given message in the current locale with the provided values.
+ * The returned values is _always_ an Array of parts, even if the message is
+ * a simple string value.
+ *
+ * This function is the basis of how messages are normally formatted, and can
+ * be used anywhere. However, it is not reactive and only functions on the
+ * data that is currently loaded and known. For a reactive function that
+ * automatically updates when the locale changes or when new data is loaded,
+ * use `format`, which will wrap the formatting in a React component that
+ * subscribes to the current locale and state of loaded messages.
+ */
+export function formatToAst(
+  this: IntlManager,
+  message: AnyIntlMessage,
+  values: object,
+): RichTextNode[] {
+  if (typeof message === 'string') return [{ type: RichTextNodeType.Text, content: message }];
+
+  return this.bindFormatValues(AstBuilder, message, values);
+}
+
+export const astFormatter: FormatterImplementation<AstFunctionTypes, RichTextNode[]> = {
+  format: formatToAst,
+  builder: AstBuilder,
+};

package/src/formatters/index.ts

@@ -0,0 +1,9 @@
+export { astFormatter, type AstFunctionTypes, type RichTextNode, RichTextNodeType } from './ast';
+export { markdownFormatter, type MarkdownFunctionTypes } from './markdown';
+export {
+  reactFormatter,
+  makeReactFormatter,
+  DEFAULT_REACT_RICH_TEXT_ELEMENTS,
+  type ReactFunctionTypes,
+} from './react';
+export { stringFormatter, type StringFunctionTypes } from './string';

package/src/formatters/markdown.ts

@@ -0,0 +1,54 @@
+/**
+ * Similar to `formatToPlainString`, format the given message with the provided
+ * values, but convert all rich text formatting back to Markdown syntax rather
+ * than rendering the actual rich content. The result is a plain string that
+ * can be sent through a separate Markdown renderer to get an equivalent
+ * result to formatting this message directly.
+ */
+import {
+  AnyIntlMessage,
+  FormatterImplementation,
+  FunctionTypes,
+  RichTextFormattingMap,
+  RichTextTagNames,
+} from '../types';
+import { IntlManager } from '../intl-manager';
+import { FormatBuilderConstructor } from '../format';
+import { StringBuilder } from './string';
+
+export type MarkdownFunctionTypes = FunctionTypes<string>;
+
+const MARKDOWN_RICH_TEXT_ELEMENTS: RichTextFormattingMap<MarkdownFunctionTypes['hook']> = {
+  $_: () => '',
+  $b: (content) => '**' + content.join('') + '**',
+  $code: (content) => '`' + content.join('') + '`',
+  $i: (content) => '*' + content.join('') + '*',
+  $link: ([target, ...content]) => '[' + content.join('') + '](' + target + ')',
+  $p: (content) => content.join('') + '\n\n',
+};
+
+class MarkdownBuilder extends StringBuilder {
+  result: string = '';
+
+  pushRichTextTag(tag: RichTextTagNames, children: string[]) {
+    this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children);
+  }
+}
+
+export function formatToMarkdownString(
+  this: IntlManager,
+  message: AnyIntlMessage,
+  values: object,
+  Builder: FormatBuilderConstructor<string> = MarkdownBuilder,
+): string {
+  if (typeof message === 'string') return message;
+
+  const result = this.bindFormatValues(Builder, message, values);
+  // MarkdownBuilder always creates a single-element array with the string value.
+  return result[0];
+}
+
+export const markdownFormatter: FormatterImplementation<MarkdownFunctionTypes, string> = {
+  format: formatToMarkdownString,
+  builder: MarkdownBuilder,
+};

package/src/formatters/react.ts

@@ -0,0 +1,100 @@
+/**
+ * Format the given message as a React component, allowing it to listen for
+ * and respond to updates about the current locale and other relevant
+ * information.
+ */
+import type {
+  AnyIntlMessage,
+  FormatterImplementation,
+  FunctionTypes,
+  RichTextFormattingMap,
+  RichTextTagNames,
+} from '../types';
+import * as React from 'react';
+import { IntlManager } from '../intl-manager';
+import { FormatBuilder, FormatBuilderConstructor } from '../format';
+
+export type ReactHandlerEvent = React.MouseEvent | React.KeyboardEvent;
+export type ReactClickHandler = (e: ReactHandlerEvent) => void;
+
+export type ReactFunctionTypes = FunctionTypes<
+  React.ReactNode,
+  | ReactClickHandler
+  | { onClick: ReactClickHandler }
+  | { onContextMenu: ReactClickHandler }
+  | { onClick: ReactClickHandler; onContextMenu: ReactClickHandler }
+>;
+
+const h = React.createElement;
+export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']> = {
+  $_: () => '',
+  $b: (content) => h('strong', undefined, content),
+  $code: (content) => h('code', undefined, content),
+  $i: (content) => h('em', undefined, content),
+  // $link will always be [href, <empty>, ...content]
+  $link: ([href, ...content]) => h('a', { href }, content),
+  $p: (content) => h('p', undefined, content),
+};
+
+/**
+ * Creates a new `FormatBuilder` class that constructs a React element tree
+ * from the message using the given `richTextElements` to apply formatting.
+ * This allows consumers to inject their own design system components and
+ * overrides for rendering elements like links, paragraphs, and code blocks.
+ * @param richTextElements
+ */
+function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>): {
+  new (): FormatBuilder<React.ReactNode>;
+} {
+  return class extends FormatBuilder<React.ReactNode> {
+    result: React.ReactNode[] = [];
+
+    pushRichTextTag(tag: RichTextTagNames, children: React.ReactNode[]) {
+      this.result.push(richTextElements[tag](children));
+    }
+
+    pushLiteralText(text: string) {
+      this.result.push(text);
+    }
+
+    pushObject(value: object) {
+      // @ts-expect-error this is technically invalid, but we'll just assume that if a format returns
+      // an object, it'll be acting as some form of ReactNode.
+      this.result.push(value);
+    }
+
+    finish(): React.ReactNode[] {
+      return this.result;
+    }
+  };
+}
+
+export function formatReact(
+  this: IntlManager,
+  message: AnyIntlMessage,
+  values: object,
+  Builder: FormatBuilderConstructor<React.ReactElement>,
+): React.ReactElement {
+  if (typeof message === 'string') {
+    return React.createElement(React.Fragment, undefined, message);
+  }
+
+  const parts = this.bindFormatValues(Builder, message, values);
+  return React.createElement(React.Fragment, undefined, parts);
+}
+
+/**
+ * Create a new React formatter with the given rich text elements replacing the defaults. Use this
+ * function to inject custom components for things like links and paragraphs, which may be best
+ * suited to use components from a Design System or other library rather than native DOM elements.
+ */
+export function makeReactFormatter(
+  richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>,
+): FormatterImplementation<ReactFunctionTypes, React.ReactElement, React.ReactNode> {
+  return {
+    format: formatReact,
+    builder: createReactBuilder(richTextElements),
+  };
+}
+
+export const reactFormatter = makeReactFormatter(DEFAULT_REACT_RICH_TEXT_ELEMENTS);

package/src/formatters/string.ts

@@ -0,0 +1,62 @@
+/**
+ * Format the given message with the provided values, removing any styling
+ * and non-textual content from the message, returning a plain string.
+ */
+import { AnyIntlMessage, FormatterImplementation, FunctionTypes, RichTextTagNames } from '../types';
+import { FormatBuilder } from '../format';
+import { IntlManager } from '../intl-manager';
+
+/**
+ * Types for formatting functions when calling `bindFormatValues`, ensuring the
+ * functions always yield plain strings.
+ */
+export type StringFunctionTypes = FunctionTypes<string>;
+
+export class StringBuilder extends FormatBuilder<string> {
+  result: string = '';
+
+  pushRichTextTag(tag: RichTextTagNames, children: string[]) {
+    // Plain string formatting ignores rich text tags and just takes the
+    // visible content from the children. This means the `target` element
+    // of a link is ignored, otherwise all the children are just joined
+    // together directly.
+    if (tag === '$link') {
+      this.result += children.slice(1).join('');
+      return;
+    }
+    this.result += children.join('');
+  }
+
+  pushLiteralText(text: string) {
+    this.result += text;
+  }
+
+  pushObject(value: object) {
+    // Objects are only included in the result if they specify a toString value directly.
+    // Otherwise, they would be rendered as `[object Object]`, which is never helpful.
+    if ('toString' in value) {
+      this.result += value.toString();
+    }
+  }
+
+  finish(): string[] {
+    return [this.result];
+  }
+}
+
+export function formatToPlainString(
+  this: IntlManager,
+  message: AnyIntlMessage,
+  values: object,
+): string {
+  if (typeof message === 'string') return message;
+
+  const result = this.bindFormatValues(StringBuilder, message, values);
+  // StringBuilder always creates a single element array with the string value.
+  return result[0];
+}
+
+export const stringFormatter: FormatterImplementation<StringFunctionTypes, string> = {
+  format: formatToPlainString,
+  builder: StringBuilder,
+};

package/src/index.ts

@@ -1,8 +1,8 @@
-import { IntlManager } from './intl-manager';
-import { IntlManagerReact } from './react';
+import * as React from 'react';
+import { RichTextNode } from './formatters';
 
-export { IntlManager, createLoader, DEFAULT_LOCALE } from './intl-manager';
-export { IntlManagerReact } from './react';
+export { IntlManager, createLoader, DEFAULT_LOCALE, type FormatFunction } from './intl-manager';
+export * from './formatters';
 
 export type * from './types.d.ts';
 
@@ -21,7 +21,7 @@ export type * from './types.d.ts';
  * intl message, even if the actual value comes from elsewhere (like a
  * user-generated string).
  */
-export type ReactIntlMessage = string | ReturnType<IntlManagerReact<any>['format']>;
+export type ReactIntlMessage = string | React.ReactElement;
 
 /**
  * The return value of `formatToParts` from `@discord/intl`, this type
@@ -33,4 +33,4 @@ export type ReactIntlMessage = string | ReturnType<IntlManagerReact<any>['format
  * from a call to `formatToParts`, meaning they are intended to be fully static
  * structures passed around for custom rendering functions to use.
  */
-export type IntlMessageAst = ReturnType<IntlManager<any, any>['formatToParts']>;
+export type IntlMessageAst = RichTextNode;

package/src/intl-manager.ts

@@ -1,30 +1,16 @@
 import { createIntl, IntlShape } from '@formatjs/intl';
-import {
-  Formats,
-  Formatters,
-  IntlMessageFormat,
-  PART_TYPE as FormatPartType,
-} from 'intl-messageformat';
+import { Formats, Formatters, IntlMessageFormat } from 'intl-messageformat';
 
 import { LocaleId, LocaleImportMap, MessageLoader } from './message-loader';
 
 import type {
-  FunctionTypeMap,
+  FormatterImplementation,
   IntlMessageGetter,
   RequiredFormatValues,
-  RichTextElementMap,
   TypedIntlMessageGetter,
 } from './types';
-
-/**
- * Types for formatting functions when calling `formatToParts`, ensuring the
- * functions yield value AST nodes.
- */
-type AstFunctionTypes = {
-  link: undefined | object | ((children: object) => Array<string | any>);
-  hook: undefined | object | ((children: object) => Array<string | any>);
-  handler: undefined | object | ((children: object) => Array<string | any>);
-};
+import { InternalIntlMessage } from './message';
+import { bindFormatValues, FormatBuilderConstructor } from './format';
 
 /**
  * Fallback locale used for all internationalization when an operation in the
@@ -32,26 +18,35 @@ type AstFunctionTypes = {
  */
 export const DEFAULT_LOCALE: string = 'en-US';
 
-export class IntlManager<
-  DefaultElements extends RichTextElementMap,
-  FunctionTypes extends FunctionTypeMap,
-> {
+type FormatterReturnType<F extends FormatterImplementation<any, any>> =
+  F extends FormatterImplementation<any, infer Return> ? Return : never;
+
+type FormatterFunctionTypes<F extends FormatterImplementation<any, any>> =
+  F extends FormatterImplementation<infer Functions, any> ? Functions : never;
+
+export type FormatFunction<F extends FormatterImplementation<any, any>> = <
+  T extends IntlMessageGetter,
+>(
+  this: IntlManager,
+  message: T,
+  values: RequiredFormatValues<T, FormatterFunctionTypes<F>>,
+) => FormatterReturnType<F>;
+
+type ThisWithFormatters<
+  This,
+  T extends Record<string, FormatterImplementation<any, any>>,
+> = This & {
+  [K in keyof T]: FormatFunction<T[K]>;
+};
+
+export class IntlManager {
   defaultLocale: string;
   currentLocale: string;
   intl: IntlShape;
 
-  /**
-   * When formatting tag elements like `<b>value</b>`, these functions will
-   * automatically be used by all messages, unless they are explicitly removed
-   * for a specific call, either by overriding the value or by calling a
-   * dedicated method like `formatToPlainString` which will remove all
-   * rich elements from the string and return only the plain text result.
-   */
-  defaultRichTextElements: DefaultElements;
-
   _localeSubscriptions: Set<(locale: string) => void>;
 
-  constructor(defaultLocale: string = DEFAULT_LOCALE, defaultRichTextElements: DefaultElements) {
+  constructor(defaultLocale: string = DEFAULT_LOCALE) {
     this.defaultLocale = defaultLocale;
     this.currentLocale = defaultLocale;
     this.intl = createIntl({
@@ -60,10 +55,38 @@ export class IntlManager<
       locale: defaultLocale,
     });
 
-    this.defaultRichTextElements = defaultRichTextElements;
     this._localeSubscriptions = new Set();
   }
 
+  /**
+   * Add a set of formatter implementations to this manager, making each available as a direct
+   * property
+   */
+  withFormatters<const T extends Record<string, FormatterImplementation<any, any>>>(
+    formatters: T,
+  ): ThisWithFormatters<this, T> {
+    for (const [name, formatter] of Object.entries(formatters)) {
+      this[name] = this.makeFormatFunction(formatter);
+    }
+
+    return this as ThisWithFormatters<this, T>;
+  }
+
+  /**
+   * Return a new function bound to this manager that uses the given `FormatterImplementation` to
+   * format a message after it has been resolved for the current locale and potentially processed in
+   * other ways by the manager.
+   */
+  makeFormatFunction<F extends FormatterImplementation<any, any>>({
+    format,
+    builder,
+  }: F): FormatFunction<FormatterReturnType<F>> {
+    const formatter = format.bind(this);
+    return (message, values) => {
+      return formatter(message(this.currentLocale), values, builder);
+    };
+  }
+
   /**
    * Set the locale for this package to use. This is a global change, and all
    * methods on this object will use this locale for formatting.
@@ -89,124 +112,23 @@ export class IntlManager<
   };
 
   /**
-   * Format the given message in the current locale with the provided values.
-   * The returned values is _always_ an Array of parts, even if the message is
-   * a simple string value.
-   *
-   * This function is the basis of how messages are normally formatted, and can
-   * be used anywhere. However, it is not reactive and only functions on the
-   * data that is currently loaded and known. For a reactive function that
-   * automatically updates when the locale changes or when new data is loaded,
-   * use `format`, which will wrap the formatting in a React component that
-   * subscribes to the current locale and state of loaded messages.
+   * For static messages with no rich text and no dynamic placeholders, use this method to
+   * immediately return the plain string value of the message in the current locale.
    */
-  formatToParts<T extends TypedIntlMessageGetter<undefined>>(message: T): Array<string | any>;
-  formatToParts<T extends IntlMessageGetter>(
-    message: T,
-    values: RequiredFormatValues<T, DefaultElements, AstFunctionTypes>,
-  ): Array<string | any>;
-  formatToParts<T extends IntlMessageGetter>(
-    message: T,
-    values?: RequiredFormatValues<T, DefaultElements, AstFunctionTypes>,
-  ): Array<string | any> {
-    if (typeof message === 'string') return [message];
-    const resolvedMessage = typeof message === 'function' ? message(this.currentLocale) : message;
-    if (typeof resolvedMessage === 'string') return [resolvedMessage];
-
-    const resolvedValues =
-      values != null
-        ? { ...this.defaultRichTextElements, ...values }
-        : this.defaultRichTextElements;
-    const parts = resolvedMessage.formatToParts(
-      this.intl.formatters as Formatters,
-      this.intl.formats as Formats,
-      resolvedValues,
-    );
-
-    const result = [];
-    let inLiteral = false;
-    for (const part of parts) {
-      // This condition merges consecutive literal elements (static strings)
-      // into single parts to reduce the number of nodes in the result. This
-      // condition will never be true on the first loop, ensuring that the
-      // array must at least have one entry before it attempts to concatenate
-      // onto that value again.
-      if (inLiteral && (inLiteral = part.type === FormatPartType.literal)) {
-        result[result.length - 1] += part.value;
-        continue;
-      }
-
-      inLiteral = part.type === FormatPartType.literal;
-      result.push(part.value);
-    }
-
-    return result;
+  string<T extends TypedIntlMessageGetter<undefined>>(message: T): string {
+    // TODO: Figure out how to make this typing exact.
+    return message(this.currentLocale).message;
   }
 
-  /**
-   * For messages with no formatting values (i.e., plain strings, they can skip
-   * a majority of the processing work and just resolve the message itself for
-   * the current locale, then return the plain string directly.
-   *
-   * This is separate from `formatToPlainString`, which still allows for
-   * formatting variables and other elements but reduces the output to only
-   * include textual elements in a plain string.
-   */
-  string(message: TypedIntlMessageGetter<undefined>): string {
-    // TODO(faulty): Optimize this so that plain strings are hotpathed even faster.
-    return this.formatToPlainString(message);
-  }
-
-  /**
-   * Format the given message with the provided values, removing any styling
-   * and non-textual content from the message, returning a plain string.
-   */
-  formatToPlainString<T extends TypedIntlMessageGetter<undefined>>(message: T): string;
-  formatToPlainString<T extends IntlMessageGetter>(
-    message: T,
-    values: RequiredFormatValues<T, DefaultElements, FunctionTypes>,
-  ): string;
-  formatToPlainString<T extends IntlMessageGetter>(
-    message: T,
-    values?: RequiredFormatValues<T, DefaultElements, FunctionTypes>,
-  ): string {
-    if (typeof message === 'string') return message;
-    const resolvedMessage = message(this.currentLocale);
-    if (typeof resolvedMessage === 'string') return resolvedMessage;
-
-    // No need to pass in `defaultRichTextElements`, since the stylistic tags
-    // will be removed from the string anyway.
-    return resolvedMessage.formatToPlainString(
-      this.intl.formatters as Formatters,
-      this.intl.formats as Formats,
-      values,
-    );
-  }
-
-  /**
-   * Similar to `formatToPlainString`, format the given message with the provided
-   * values, but convert all rich text formatting back to Markdown syntax rather
-   * than rendering the actual rich content. The result is a plain string that
-   * can be sent through a separate Markdown renderer to get an equivalent
-   * result to formatting this message directly.
-   */
-  formatToMarkdownString<T extends TypedIntlMessageGetter<undefined>>(message: T): string;
-  formatToMarkdownString<T extends IntlMessageGetter>(
-    message: T,
-    values: RequiredFormatValues<T, DefaultElements, FunctionTypes>,
-  ): string;
-  formatToMarkdownString<T extends IntlMessageGetter>(
-    message: T,
-    values?: RequiredFormatValues<T, DefaultElements, FunctionTypes>,
-  ): string {
-    // TODO(faulty): Implement the markdown syntax conversion here.
-    if (typeof message === 'string') return message;
-    const resolvedMessage = message(this.currentLocale);
-    if (typeof resolvedMessage === 'string') return resolvedMessage;
-
-    // No need to pass in `defaultRichTextElements`, since the stylistic tags
-    // will be removed from the string anyway.
-    return resolvedMessage.formatToPlainString(
+  bindFormatValues<T>(
+    Builder: FormatBuilderConstructor<T>,
+    message: InternalIntlMessage,
+    values: Record<string, any>,
+  ): T[] {
+    return bindFormatValues(
+      Builder,
+      message.ast,
+      [this.currentLocale, this.defaultLocale],
       this.intl.formatters as Formatters,
       this.intl.formats as Formats,
       values,