@discord/intl 0.26.2 → 0.26.4

package/dist/format.d.ts

@@ -20,12 +20,33 @@ import { AstNode } from '@discord/intl-ast';
 import type { RichTextTagNames } from './types';
 import { FormatConfigType } from './data-formatters/config';
 import { DataFormatters } from './data-formatters';
+export interface BuilderContext {
+    keyPrefix: string;
+}
 export declare abstract class FormatBuilder<Result, ObjectType = Result extends object ? Result : never> {
+    context: BuilderContext;
+    constructor(context: BuilderContext);
     abstract pushRichTextTag(tag: RichTextTagNames, children: Result[], control: Result[]): void;
     abstract pushLiteralText(text: string): void;
     abstract pushObject(value: ObjectType): void;
     abstract finish(): Result[];
 }
-export type FormatBuilderConstructor<Result> = new () => FormatBuilder<Result>;
-export declare function bindFormatValuesWithBuilder<T, ObjectType, Builder extends FormatBuilder<T, ObjectType>, FormatConfig extends FormatConfigType>(builder: Builder, nodes: AstNode[], locales: string | string[], formatters: DataFormatters<FormatConfig>, formatConfig: FormatConfig, values?: Record<string, string | object>, currentPluralValue?: number, originalMessage?: string): void;
-export declare function bindFormatValues<Result, FormatConfig extends FormatConfigType>(Builder: FormatBuilderConstructor<Result>, nodes: string | AstNode[], locales: string | string[], dataFormatters: DataFormatters<FormatConfig>, formatConfig: FormatConfig, values?: Record<string, string | object>, currentPluralValue?: number): Result[];
+export type FormatBuilderConstructor<Result> = new (context: BuilderContext) => FormatBuilder<Result>;
+export interface BindFormatValuesBase<FormatConfig extends FormatConfigType> {
+    originalMessage?: string;
+    nodes: string | AstNode[];
+    locales: string | string[];
+    dataFormatters: DataFormatters<FormatConfig>;
+    formatConfig: FormatConfig;
+    values: Record<string, string | object>;
+    currentPluralValue?: number;
+    keyPrefix: string;
+}
+export interface BindFormatValuesParams<Result, FormatConfig extends FormatConfigType> extends BindFormatValuesBase<FormatConfig> {
+    Builder: FormatBuilderConstructor<Result>;
+}
+export interface BindFormatValuesWithBuilderParams<T, ObjectType, Builder extends FormatBuilder<T, ObjectType>, FormatConfig extends FormatConfigType> extends BindFormatValuesBase<FormatConfig> {
+    builder: Builder;
+}
+export declare function bindFormatValuesWithBuilder<T, ObjectType, Builder extends FormatBuilder<T, ObjectType>, FormatConfig extends FormatConfigType>(params: BindFormatValuesWithBuilderParams<T, ObjectType, Builder, FormatConfig>): void;
+export declare function bindFormatValues<Result, FormatConfig extends FormatConfigType>(params: BindFormatValuesParams<Result, FormatConfig>): Result[];

package/dist/format.js

@@ -31,6 +31,9 @@ function isRichTextTag(name) {
     return name[0] === '$';
 }
 class FormatBuilder {
+    constructor(context) {
+        this.context = context;
+    }
 }
 exports.FormatBuilder = FormatBuilder;
 class MissingValueError extends Error {
@@ -41,15 +44,16 @@ class MissingValueError extends Error {
         this.nodeType = nodeType;
     }
 }
-function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, formatConfig, values = {}, currentPluralValue, originalMessage) {
+function bindFormatValuesWithBuilder(params) {
     var _a;
+    const { builder, originalMessage, nodes, locales, values, dataFormatters, formatConfig, currentPluralValue, keyPrefix, } = params;
     // Hot path for static messages that are just parsed as a single string element.
     if (nodes.length === 1 && typeof nodes[0] === 'string') {
         builder.pushLiteralText(nodes[0]);
         return;
     }
-    let keyIndex = 0;
-    for (const node of nodes) {
+    for (let keyIndex = 0; keyIndex < nodes.length; keyIndex++) {
+        const node = nodes[keyIndex];
         if (typeof node === 'string') {
             builder.pushLiteralText(node);
             continue;
@@ -61,7 +65,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 // numeric values are replaced, otherwise the value is completed ignored?
                 // Behavior copied from FormatJS directly.
                 if (typeof currentPluralValue === 'number') {
-                    const value = formatters.formatNumber(currentPluralValue);
+                    const value = dataFormatters.formatNumber(currentPluralValue);
                     builder.pushLiteralText(value);
                 }
                 continue;
@@ -100,7 +104,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                     : nodeStyle != null
                         ? (0, icu_skeleton_parser_1.parseDateTimeSkeleton)(nodeStyle)
                         : undefined;
-                builder.pushLiteralText(formatters.formatDate(value, style));
+                builder.pushLiteralText(dataFormatters.formatDate(value, style));
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Time: {
@@ -112,7 +116,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                     : nodeStyle != null
                         ? (0, icu_skeleton_parser_1.parseDateTimeSkeleton)(nodeStyle)
                         : undefined;
-                builder.pushLiteralText(formatters.formatTime(value, style));
+                builder.pushLiteralText(dataFormatters.formatTime(value, style));
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Number: {
@@ -127,15 +131,33 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 const scaledValue = 
                 // @ts-expect-error This is a weird cast that's not accurate, but works in the short term.
                 typeof value !== 'number' ? value : value * ((_a = style === null || style === void 0 ? void 0 : style.scale) !== null && _a !== void 0 ? _a : 1);
-                builder.pushLiteralText(formatters.formatNumber(scaledValue, style));
+                builder.pushLiteralText(dataFormatters.formatNumber(scaledValue, style));
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Tag: {
                 const children = node[2 /* AstNodeIndices.Children */];
                 const control = node[3 /* AstNodeIndices.Control */];
-                const appliedChildren = bindFormatValues(builder.constructor, children, locales, formatters, formatConfig, values, currentPluralValue);
+                const appliedChildren = bindFormatValues({
+                    Builder: builder.constructor,
+                    nodes: children,
+                    locales,
+                    dataFormatters: dataFormatters,
+                    formatConfig,
+                    values,
+                    currentPluralValue,
+                    keyPrefix: `${keyPrefix}.${keyIndex}`,
+                });
                 const appliedControl = control != null
-                    ? bindFormatValues(builder.constructor, control, locales, formatters, formatConfig, values, currentPluralValue)
+                    ? bindFormatValues({
+                        Builder: builder.constructor,
+                        nodes: control,
+                        locales,
+                        dataFormatters: dataFormatters,
+                        formatConfig,
+                        values,
+                        currentPluralValue,
+                        keyPrefix: `${keyPrefix}.${keyIndex}-control`,
+                    })
                     : [];
                 if (isRichTextTag(variableName)) {
                     builder.pushRichTextTag(variableName, appliedChildren, appliedControl);
@@ -144,7 +166,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                     if (typeof value !== 'function') {
                         throw `expected a function type for a Tag formatting value, ${variableName}. got ${typeof value}: ${value}`;
                     }
-                    let chunks = value(appliedChildren, `${keyIndex++}`);
+                    let chunks = value(appliedChildren, `${keyPrefix}.${keyIndex}`);
                     chunks = Array.isArray(chunks) ? chunks : [chunks];
                     for (const chunk of chunks) {
                         if (typeof chunk === 'string') {
@@ -164,7 +186,15 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 if (option == null) {
                     throw `${requestedOption} is not a known option for select value ${variableName}. Valid options are ${Object.keys(options).join(', ')}`;
                 }
-                bindFormatValuesWithBuilder(builder, option, locales, formatters, formatConfig, values);
+                bindFormatValuesWithBuilder({
+                    builder,
+                    nodes: option,
+                    locales,
+                    dataFormatters,
+                    formatConfig,
+                    values,
+                    keyPrefix: `${keyPrefix}.${keyIndex}`,
+                });
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Plural: {
@@ -176,7 +206,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                     const exactSelector = `=${value}`;
                     if (exactSelector in options)
                         return options[exactSelector];
-                    const rule = formatters.getPluralRules({ type: pluralType }).select(
+                    const rule = dataFormatters.getPluralRules({ type: pluralType }).select(
                     // @ts-expect-error Assert this `as number` properly.
                     value - (offset !== null && offset !== void 0 ? offset : 0));
                     return (_a = options[rule]) !== null && _a !== void 0 ? _a : options.other;
@@ -184,22 +214,41 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 if (option == null) {
                     throw `${value} is not a known option for plural value ${variableName}. Valid options are ${Object.keys(options).join(', ')}`;
                 }
-                bindFormatValuesWithBuilder(builder, option, locales, formatters, formatConfig, values, 
-                // @ts-expect-error assert this `as number` properly
-                value - (offset !== null && offset !== void 0 ? offset : 0));
+                bindFormatValuesWithBuilder({
+                    builder,
+                    nodes: option,
+                    locales,
+                    dataFormatters,
+                    formatConfig,
+                    values,
+                    // @ts-expect-error assert this `as number` properly
+                    currentPluralValue: value - (offset !== null && offset !== void 0 ? offset : 0),
+                    keyPrefix: `${keyPrefix}.${keyIndex}`,
+                });
                 break;
             }
         }
     }
 }
-function bindFormatValues(Builder, nodes, locales, dataFormatters, formatConfig, values = {}, currentPluralValue) {
-    const builder = new Builder();
+function bindFormatValues(params) {
+    const { Builder, originalMessage, nodes, locales, dataFormatters, formatConfig, values, currentPluralValue, keyPrefix, } = params;
+    const builder = new Builder({ keyPrefix });
     if (typeof nodes === 'string') {
         builder.pushLiteralText(nodes);
         return builder.finish();
     }
     else {
-        bindFormatValuesWithBuilder(builder, nodes, locales, dataFormatters, formatConfig, values, currentPluralValue);
+        bindFormatValuesWithBuilder({
+            builder,
+            originalMessage,
+            nodes,
+            locales,
+            dataFormatters,
+            formatConfig,
+            values,
+            currentPluralValue,
+            keyPrefix,
+        });
         return builder.finish();
     }
 }

package/dist/formatters/react.d.ts

@@ -6,7 +6,7 @@
 import type { AnyIntlMessage, FormatterImplementation, FunctionTypes, RichTextFormattingMap } from '../types';
 import * as React from 'react';
 import { IntlManager } from '../intl-manager';
-import { FormatBuilderConstructor } from '../format';
+import { BuilderContext, FormatBuilder, FormatBuilderConstructor } from '../format';
 export type ReactHandlerEvent = React.MouseEvent | React.KeyboardEvent;
 export type ReactClickHandler = (e: ReactHandlerEvent) => void;
 export type ReactFunctionTypes = FunctionTypes<React.ReactNode, ReactClickHandler | {
@@ -18,6 +18,9 @@ export type ReactFunctionTypes = FunctionTypes<React.ReactNode, ReactClickHandle
     onContextMenu: ReactClickHandler;
 }>;
 export declare const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']>;
+export type ReactBuilder = {
+    new (context: BuilderContext): FormatBuilder<React.ReactNode>;
+};
 /**
  * A type representing any message that has been formatted using one of the
  * default React formatting methods in the `@discord/intl` system. Use this

package/dist/formatters/react.js

@@ -29,7 +29,7 @@ function createReactBuilder(richTextElements) {
             this.result = [];
         }
         pushRichTextTag(tag, children, control) {
-            this.result.push(richTextElements[tag](children, `${this._nodeKey++}`, control));
+            this.result.push(richTextElements[tag](children, `${this.context.keyPrefix}.tag-${this._nodeKey++}`, control));
         }
         pushLiteralText(text) {
             const last = this.result[this.result.length - 1];

package/dist/intl-manager.js

@@ -93,7 +93,15 @@ class IntlManager {
         return resolved.reserialize();
     }
     bindFormatValues(Builder, message, values) {
-        return (0, format_1.bindFormatValues)(Builder, message.ast, [this.currentLocale, this.defaultLocale], this.data, this.formatConfig, values);
+        return (0, format_1.bindFormatValues)({
+            Builder,
+            nodes: message.ast,
+            locales: [this.currentLocale, this.defaultLocale],
+            dataFormatters: this.data,
+            formatConfig: this.formatConfig,
+            values,
+            keyPrefix: '',
+        });
     }
 }
 exports.IntlManager = IntlManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discord/intl",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "license": "MIT",
   "description": "Client runtime for managing messages and translations in a React project.",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
     "@formatjs/intl": "^2.10.1",
     "@intrnl/xxhash64": "^0.1.2",
     "intl-messageformat": "^10.5.11",
-    "@discord/intl-ast": "0.26.2"
+    "@discord/intl-ast": "0.26.4"
   },
   "devDependencies": {
     "@formatjs/intl-durationformat": "^0.7.3",

package/src/format.ts

@@ -20,7 +20,7 @@
 import {
   parseDateTimeSkeleton,
   parseNumberSkeleton,
-  parseNumberSkeletonFromString,
+  parseNumberSkeletonFromString
 } from '@formatjs/icu-skeleton-parser';
 
 import { AstNode, AstNodeIndices, FormatJsNodeType } from '@discord/intl-ast';
@@ -36,13 +36,22 @@ function isRichTextTag(name: string) {
   return name[0] === '$';
 }
 
+export interface BuilderContext {
+  keyPrefix: string;
+}
+
 export abstract class FormatBuilder<Result, ObjectType = Result extends object ? Result : never> {
+  constructor(public context: BuilderContext) {}
   abstract pushRichTextTag(tag: RichTextTagNames, children: Result[], control: Result[]): void;
   abstract pushLiteralText(text: string): void;
   abstract pushObject(value: ObjectType): void;
   abstract finish(): Result[];
 }
 
+export type FormatBuilderConstructor<Result> = new (
+  context: BuilderContext,
+) => FormatBuilder<Result>;
+
 class MissingValueError extends Error {
   constructor(
     public variableName: string,
@@ -55,31 +64,56 @@ class MissingValueError extends Error {
   }
 }
 
-export type FormatBuilderConstructor<Result> = new () => FormatBuilder<Result>;
+export interface BindFormatValuesBase<FormatConfig extends FormatConfigType> {
+  originalMessage?: string;
+  nodes: string | AstNode[];
+  locales: string | string[];
+  dataFormatters: DataFormatters<FormatConfig>;
+  formatConfig: FormatConfig;
+  values: Record<string, string | object>;
+  currentPluralValue?: number;
+  keyPrefix: string;
+}
+
+export interface BindFormatValuesParams<Result, FormatConfig extends FormatConfigType>
+  extends BindFormatValuesBase<FormatConfig> {
+  Builder: FormatBuilderConstructor<Result>;
+}
+
+export interface BindFormatValuesWithBuilderParams<
+  T,
+  ObjectType,
+  Builder extends FormatBuilder<T, ObjectType>,
+  FormatConfig extends FormatConfigType,
+> extends BindFormatValuesBase<FormatConfig> {
+  builder: Builder;
+}
 
 export function bindFormatValuesWithBuilder<
   T,
   ObjectType,
   Builder extends FormatBuilder<T, ObjectType>,
   FormatConfig extends FormatConfigType,
->(
-  builder: Builder,
-  nodes: AstNode[],
-  locales: string | string[],
-  formatters: DataFormatters<FormatConfig>,
-  formatConfig: FormatConfig,
-  values: Record<string, string | object> = {},
-  currentPluralValue?: number,
-  originalMessage?: string,
-) {
+>(params: BindFormatValuesWithBuilderParams<T, ObjectType, Builder, FormatConfig>) {
+  const {
+    builder,
+    originalMessage,
+    nodes,
+    locales,
+    values,
+    dataFormatters,
+    formatConfig,
+    currentPluralValue,
+    keyPrefix,
+  } = params;
   // Hot path for static messages that are just parsed as a single string element.
   if (nodes.length === 1 && typeof nodes[0] === 'string') {
     builder.pushLiteralText(nodes[0]);
     return;
   }
 
-  let keyIndex = 0;
-  for (const node of nodes) {
+  for (let keyIndex = 0; keyIndex < nodes.length; keyIndex++) {
+    const node = nodes[keyIndex];
     if (typeof node === 'string') {
       builder.pushLiteralText(node);
       continue;
@@ -91,7 +125,7 @@ export function bindFormatValuesWithBuilder<
         // numeric values are replaced, otherwise the value is completed ignored?
         // Behavior copied from FormatJS directly.
         if (typeof currentPluralValue === 'number') {
-          const value = formatters.formatNumber(currentPluralValue);
+          const value = dataFormatters.formatNumber(currentPluralValue);
           builder.pushLiteralText(value);
         }
         continue;
@@ -132,7 +166,7 @@ export function bindFormatValuesWithBuilder<
             : nodeStyle != null
               ? parseDateTimeSkeleton(nodeStyle)
               : undefined;
-        builder.pushLiteralText(formatters.formatDate(value as number | Date, style));
+        builder.pushLiteralText(dataFormatters.formatDate(value as number | Date, style));
         break;
       }
       case FormatJsNodeType.Time: {
@@ -145,7 +179,7 @@ export function bindFormatValuesWithBuilder<
             : nodeStyle != null
               ? parseDateTimeSkeleton(nodeStyle)
               : undefined;
-        builder.pushLiteralText(formatters.formatTime(value as number | Date, style));
+        builder.pushLiteralText(dataFormatters.formatTime(value as number | Date, style));
         break;
       }
       case FormatJsNodeType.Number: {
@@ -163,33 +197,35 @@ export function bindFormatValuesWithBuilder<
         const scaledValue =
           // @ts-expect-error This is a weird cast that's not accurate, but works in the short term.
           typeof value !== 'number' ? (value as number) : (value as number) * (style?.scale ?? 1);
-        builder.pushLiteralText(formatters.formatNumber(scaledValue, style));
+        builder.pushLiteralText(dataFormatters.formatNumber(scaledValue, style));
         break;
       }
 
       case FormatJsNodeType.Tag: {
         const children = node[AstNodeIndices.Children];
         const control = node[AstNodeIndices.Control];
-        const appliedChildren = bindFormatValues(
-          builder.constructor as FormatBuilderConstructor<T>,
-          children,
+        const appliedChildren = bindFormatValues({
+          Builder: builder.constructor as FormatBuilderConstructor<T>,
+          nodes: children,
           locales,
-          formatters,
+          dataFormatters: dataFormatters,
           formatConfig,
           values,
           currentPluralValue,
-        );
+          keyPrefix: `${keyPrefix}.${keyIndex}`,
+        });
         const appliedControl =
           control != null
-            ? bindFormatValues(
-                builder.constructor as FormatBuilderConstructor<T>,
-                control,
+            ? bindFormatValues({
+                Builder: builder.constructor as FormatBuilderConstructor<T>,
+                nodes: control,
                 locales,
-                formatters,
+                dataFormatters: dataFormatters,
                 formatConfig,
                 values,
                 currentPluralValue,
-              )
+                keyPrefix: `${keyPrefix}.${keyIndex}-control`,
+              })
             : [];
         if (isRichTextTag(variableName)) {
           builder.pushRichTextTag(
@@ -201,7 +237,7 @@ export function bindFormatValuesWithBuilder<
           if (typeof value !== 'function') {
             throw `expected a function type for a Tag formatting value, ${variableName}. got ${typeof value}: ${value}`;
           }
-          let chunks = value(appliedChildren, `${keyIndex++}`);
+          let chunks = value(appliedChildren, `${keyPrefix}.${keyIndex}`);
           chunks = Array.isArray(chunks) ? chunks : [chunks];
           for (const chunk of chunks) {
             if (typeof chunk === 'string') {
@@ -221,7 +257,15 @@ export function bindFormatValuesWithBuilder<
         if (option == null) {
           throw `${requestedOption} is not a known option for select value ${variableName}. Valid options are ${Object.keys(options).join(', ')}`;
         }
-        bindFormatValuesWithBuilder(builder, option, locales, formatters, formatConfig, values);
+        bindFormatValuesWithBuilder({
+          builder,
+          nodes: option,
+          locales,
+          dataFormatters,
+          formatConfig,
+          values,
+          keyPrefix: `${keyPrefix}.${keyIndex}`,
+        });
         break;
       }
 
@@ -233,7 +277,7 @@ export function bindFormatValuesWithBuilder<
           const exactSelector = `=${value}`;
           if (exactSelector in options) return options[exactSelector];
 
-          const rule = formatters.getPluralRules({ type: pluralType }).select(
+          const rule = dataFormatters.getPluralRules({ type: pluralType }).select(
             // @ts-expect-error Assert this `as number` properly.
             (value as number) - (offset ?? 0),
           );
@@ -244,16 +288,18 @@ export function bindFormatValuesWithBuilder<
           throw `${value} is not a known option for plural value ${variableName}. Valid options are ${Object.keys(options).join(', ')}`;
         }
 
-        bindFormatValuesWithBuilder(
+        bindFormatValuesWithBuilder({
           builder,
-          option,
+          nodes: option,
           locales,
-          formatters,
+          dataFormatters,
           formatConfig,
           values,
           // @ts-expect-error assert this `as number` properly
-          (value as number) - (offset ?? 0),
-        );
+          currentPluralValue: (value as number) - (offset ?? 0),
+          keyPrefix: `${keyPrefix}.${keyIndex}`,
+        });
+
         break;
       }
     }
@@ -261,28 +307,35 @@ export function bindFormatValuesWithBuilder<
 }
 
 export function bindFormatValues<Result, FormatConfig extends FormatConfigType>(
-  Builder: FormatBuilderConstructor<Result>,
-  nodes: string | AstNode[],
-  locales: string | string[],
-  dataFormatters: DataFormatters<FormatConfig>,
-  formatConfig: FormatConfig,
-  values: Record<string, string | object> = {},
-  currentPluralValue?: number,
+  params: BindFormatValuesParams<Result, FormatConfig>,
 ): Result[] {
-  const builder = new Builder();
+  const {
+    Builder,
+    originalMessage,
+    nodes,
+    locales,
+    dataFormatters,
+    formatConfig,
+    values,
+    currentPluralValue,
+    keyPrefix,
+  } = params;
+  const builder = new Builder({ keyPrefix });
   if (typeof nodes === 'string') {
     builder.pushLiteralText(nodes);
     return builder.finish();
   } else {
-    bindFormatValuesWithBuilder(
+    bindFormatValuesWithBuilder({
       builder,
+      originalMessage,
       nodes,
       locales,
       dataFormatters,
       formatConfig,
       values,
       currentPluralValue,
-    );
+      keyPrefix,
+    });
     return builder.finish();
   }
 }

package/src/formatters/react.ts

@@ -8,11 +8,11 @@ import type {
   FormatterImplementation,
   FunctionTypes,
   RichTextFormattingMap,
-  RichTextTagNames,
+  RichTextTagNames
 } from '../types';
 import * as React from 'react';
 import { IntlManager } from '../intl-manager';
-import { FormatBuilder, FormatBuilderConstructor } from '../format';
+import { BuilderContext, FormatBuilder, FormatBuilderConstructor } from '../format';
 
 export type ReactHandlerEvent = React.MouseEvent | React.KeyboardEvent;
 export type ReactClickHandler = (e: ReactHandlerEvent) => void;
@@ -35,6 +35,10 @@ export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFuncti
   $p: (content, key) => h('p', { key }, content),
 };
 
+export type ReactBuilder = {
+  new (context: BuilderContext): FormatBuilder<React.ReactNode>;
+};
+
 /**
  * Creates a new `FormatBuilder` class that constructs a React element tree
  * from the message using the given `richTextElements` to apply formatting.
@@ -42,9 +46,9 @@ export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFuncti
  * overrides for rendering elements like links, paragraphs, and code blocks.
  * @param richTextElements
  */
-function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>): {
-  new (): FormatBuilder<React.ReactNode>;
-} {
+function createReactBuilder(
+  richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>,
+): ReactBuilder {
   return class extends FormatBuilder<React.ReactNode> {
     _nodeKey: number = 0;
     result: React.ReactNode[] = [];
@@ -54,7 +58,13 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
       children: React.ReactNode[],
       control: React.ReactNode[],
     ) {
-      this.result.push(richTextElements[tag](children, `${this._nodeKey++}`, control));
+      this.result.push(
+        richTextElements[tag](
+          children,
+          `${this.context.keyPrefix}.tag-${this._nodeKey++}`,
+          control,
+        ),
+      );
     }
 
     pushLiteralText(text: string) {

package/src/intl-manager.ts

@@ -1,11 +1,6 @@
 import { DEFAULT_FORMAT_CONFIG, type FormatConfigType } from './data-formatters/config';
 import { bindFormatValues, FormatBuilderConstructor } from './format';
-import type {
-  FormatterImplementation,
-  IntlMessageGetter,
-  RequiredFormatValues,
-  TypedIntlMessageGetter,
-} from './types';
+import type { FormatterImplementation, IntlMessageGetter, RequiredFormatValues, TypedIntlMessageGetter } from './types';
 import { InternalIntlMessage } from './message';
 import { DataFormatters, makeDataFormatters } from './data-formatters';
 
@@ -193,13 +188,14 @@ export class IntlManager<
     message: InternalIntlMessage,
     values: Record<string, any>,
   ): T[] {
-    return bindFormatValues(
+    return bindFormatValues({
       Builder,
-      message.ast,
-      [this.currentLocale, this.defaultLocale],
-      this.data,
-      this.formatConfig,
+      nodes: message.ast,
+      locales: [this.currentLocale, this.defaultLocale],
+      dataFormatters: this.data,
+      formatConfig: this.formatConfig,
       values,
-    );
+      keyPrefix: '',
+    });
   }
 }