fix: incorrect locale caching in message formatter

src/runtime/modules/formatters.ts

@@ -29,6 +29,16 @@ type MemoizedDateTimeFormatterFactoryOptional = MemoizedIntlFormatterOptional<
   Intl.DateTimeFormatOptions
 >;
 
+type MemoizedMessageFormatterFactory = (options: {
+  message: string;
+  locale: string;
+}) => IntlMessageFormat;
+
+type MemoizedMessageFormatterFactoryOptional = (
+  message: string,
+  locale?: string,
+) => IntlMessageFormat;
+
 const getIntlFormatterOptions = (
   type: 'time' | 'number' | 'date',
   name: string,
@@ -90,6 +100,13 @@ const createTimeFormatter: MemoizedDateTimeFormatterFactory = monadicMemoize(
   },
 );
 
+const createMessageFormatter: MemoizedMessageFormatterFactory = monadicMemoize(
+  ({ message, locale }) =>
+    new IntlMessageFormat(message, locale, getOptions().formats, {
+      ignoreTag: getOptions().ignoreTag,
+    }),
+);
+
 export const getNumberFormatter: MemoizedNumberFormatterFactoryOptional = ({
   locale = getCurrentLocale(),
   ...args
@@ -105,10 +122,8 @@ export const getTimeFormatter: MemoizedDateTimeFormatterFactoryOptional = ({
   ...args
 } = {}) => createTimeFormatter({ locale, ...args });
 
-export const getMessageFormatter = monadicMemoize(
+export const getMessageFormatter: MemoizedMessageFormatterFactoryOptional = (
+  message,
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  (message: string, locale: string = getCurrentLocale()!) =>
-    new IntlMessageFormat(message, locale, getOptions().formats, {
-      ignoreTag: getOptions().ignoreTag,
-    }),
-);
+  locale = getCurrentLocale()!,
+) => createMessageFormatter({ message, locale });

src/runtime/modules/memoize.ts

@@ -1,9 +1,11 @@
-// eslint-disable-next-line @typescript-eslint/ban-types
-type MemoizedFunction = <F extends Function>(fn: F) => F;
+type MemoizedFunction<T, R> = (arg: T) => R;
 
-const monadicMemoize: MemoizedFunction = (fn) => {
+const monadicMemoize = <T, R>(
+  fn: MemoizedFunction<T, R>,
+): MemoizedFunction<T, R> => {
   const cache = Object.create(null);
-  const memoizedFn: any = (arg: unknown) => {
+
+  return (arg) => {
     const cacheKey = JSON.stringify(arg);
 
     if (cacheKey in cache) {
@@ -12,8 +14,6 @@ const monadicMemoize: MemoizedFunction = (fn) => {
 
     return (cache[cacheKey] = fn(arg));
   };
-
-  return memoizedFn;
 };
 
 export { monadicMemoize };

test/runtime/modules/formatters.test.ts

@@ -210,4 +210,34 @@ describe('message formatter', () => {
       }),
     ).toBe('Page: <soan class="text-bold">2/10</soan>');
   });
+
+  it('formats a message with interpolated number according to the provided locale', () => {
+    expect(
+      getMessageFormatter('{count, number} pages', 'en').format({
+        count: 10_000,
+      }),
+    ).toBe('10,000 pages');
+
+    expect(
+      getMessageFormatter('{count, number} pages', 'nl').format({
+        count: 10_000,
+      }),
+    ).toBe('10.000 pages');
+  });
+
+  it('formats a message with interpolated number according to the currently set locale', () => {
+    locale.set('en');
+    expect(
+      getMessageFormatter('{count, number} pages').format({
+        count: 10_000,
+      }),
+    ).toBe('10,000 pages');
+
+    locale.set('nl');
+    expect(
+      getMessageFormatter('{count, number} pages').format({
+        count: 10_000,
+      }),
+    ).toBe('10.000 pages');
+  });
 });