refactor(i18n): Switch to useLocalizedStringFormatter

packages/components/dev/test/locales/bar.locale.json

@@ -1 +1,4 @@
-{ "bar": "baz" }
+{
+  "bar": "test with variable {var}",
+  "bar.simple": "test simple variable"
+}

packages/components/dev/test/locales/foo.locale.json

@@ -1 +1,4 @@
-{ "foo": "bar" }
+{
+  "foo": "bar {var}",
+  "foo.simple": "test simple variable"
+}

packages/components/dev/viteI18nPlugin.test.ts

@@ -76,9 +76,11 @@ describe("vite i18n plugin", () => {
       expect(load).toBeDefined();
       expect(load.code).toBeDefined();
       expect(load.code).toMatchInlineSnapshot(`
-        "export default {"bar":{ "bar": "baz" }
-        ,"foo":{ "foo": "bar" }
-        };"
+        "export default {"bar": {  "bar": (args) => \`test with variable \${args.var}\`,
+          "bar.simple": \`test simple variable\`,
+        },"foo": {  "foo": (args) => \`bar \${args.var}\`,
+          "foo.simple": \`test simple variable\`,
+        }};"
       `);
     }
   });
@@ -110,8 +112,9 @@ describe("vite i18n plugin", () => {
       expect(load).toBeDefined();
       expect(load.code).toBeDefined();
       expect(load.code).toMatchInlineSnapshot(`
-        "export default {"bar":{ "bar": "baz" }
-        };"
+        "export default {"bar": {  "bar": (args) => \`test with variable \${args.var}\`,
+          "bar.simple": \`test simple variable\`,
+        }};"
       `);
     }
   });

packages/components/dev/viteI18nPlugin.ts

@@ -2,6 +2,7 @@ import type { Plugin } from "vite";
 import path from "path";
 import * as fs from "fs";
 import crypt from "crypto";
+import { compileStrings } from "@internationalized/string-compiler";
 
 export const moduleSuffix = ".locale.json";
 export const moduleId = `\x00${moduleSuffix}@`;
@@ -19,6 +20,15 @@ export const generateVirtualFileId = (filePath: string): string => {
   return `${moduleId}${virtualFileId}`;
 };
 
+const compileLocalString = (localesString: string): string => {
+  return (
+    compileStrings(JSON.parse(localesString))
+      // we create our own virtual file, so we
+      // don't need the export from compileStrings
+      .replace("module.exports =", "")
+  );
+};
+
 const generateComponentIntlContent = (
   filePath: string,
   languageKey: string,
@@ -32,11 +42,13 @@ const generateComponentIntlContent = (
       const match = filePath.match(importPathInfosRegEx);
 
       const fileContent = fs.readFileSync(filePath, "utf8");
-      langObject.push(`"${match && match[3]}":${fileContent}`);
+      langObject.push(
+        `"${match && match[3]}":${compileLocalString(fileContent)}`,
+      );
     });
   } else {
     const fileContent = fs.readFileSync(filePath, "utf8");
-    langObject.push(`"${languageKey}":${fileContent}`);
+    langObject.push(`"${languageKey}":${compileLocalString(fileContent)}`);
   }
 
   return `{${langObject.join(",")}}`;

packages/components/package.json

@@ -275,6 +275,7 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
+    "@internationalized/string-compiler": "^3.2.4",
     "@mittwald/react-tunnel": "workspace:^",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.24.1",

packages/components/src/components/List/components/Footer/PaginationInfos/PaginationInfos.tsx

@@ -1,5 +1,5 @@
 import locales from "../../../locales/*.locale.json";
-import { useMessageFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "react-aria";
 import type { TextProps } from "@/components/Text";
 import { Text } from "@/components/Text";
 import type { FC } from "react";
@@ -8,17 +8,17 @@ import { useList } from "@/components/List/hooks/useList";
 import { Skeleton } from "@/components/Skeleton";
 
 export const PaginationInfos: FC<TextProps> = (props) => {
-  const stringFormatter = useMessageFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales);
 
   const list = useList();
   const pagination = list.batches;
   const isFiltered = list.isFiltered() && !list.loader.manualFiltering;
   const isInitiallyLoading = list.loader.useIsInitiallyLoading();
   const isEmpty = list.useIsEmpty();
 
-  const totalItemsCount = pagination.getTotalItemsCount();
-  const filteredItemsCount = pagination.getFilteredItemsCount();
-  const visibleItemsCount = pagination.getVisibleItemsCount();
+  const totalItemsCount = pagination.getTotalItemsCount() ?? 0;
+  const filteredItemsCount = pagination.getFilteredItemsCount() ?? 0;
+  const visibleItemsCount = pagination.getVisibleItemsCount() ?? 0;
 
   if (isEmpty) {
     return null;
@@ -27,13 +27,13 @@ export const PaginationInfos: FC<TextProps> = (props) => {
   const text = isInitiallyLoading ? (
     <Skeleton width="200px" />
   ) : isFiltered ? (
-    stringFormatter("list.paginationInfoFiltered", {
+    stringFormatter.format("list.paginationInfoFiltered", {
       visibleItemsCount,
       filteredItemsCount,
       totalItemsCount,
     })
   ) : (
-    stringFormatter("list.paginationInfo", {
+    stringFormatter.format("list.paginationInfo", {
       visibleItemsCount,
       totalItemsCount,
     })

packages/components/src/components/TextFieldBase/TextFieldBase.tsx

@@ -8,7 +8,7 @@ import { ClearPropsContext, PropsContextProvider } from "@/lib/propsContext";
 import { FieldError } from "@/components/FieldError";
 import { FieldDescription } from "@/components/FieldDescription";
 import locales from "./locales/*.locale.json";
-import { useMessageFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "react-aria";
 
 export interface TextFieldBaseProps
   extends PropsWithChildren<Omit<Aria.TextFieldProps, "children">> {
@@ -25,7 +25,7 @@ export const TextFieldBase = forwardRef<HTMLInputElement, TextFieldBaseProps>(
 
     const rootClassName = clsx(styles.formField, className);
 
-    const translate = useMessageFormatter(locales);
+    const translation = useLocalizedStringFormatter(locales);
 
     const propsContext: PropsContext = {
       Label: {
@@ -49,10 +49,13 @@ export const TextFieldBase = forwardRef<HTMLInputElement, TextFieldBaseProps>(
       }
     };
 
-    const charactersCountDescription = translate("textFieldBase.characters", {
-      count: charactersCount,
-      maxCount: props.maxLength ?? 0,
-    });
+    const charactersCountDescription = translation.format(
+      "textFieldBase.characters",
+      {
+        count: charactersCount,
+        maxCount: props.maxLength ?? 0,
+      },
+    );
 
     return (
       <ClearPropsContext>

packages/components/src/lib/react/components/Translate/Translate.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import type { LocalizedStrings } from "react-aria";
-import { useMessageFormatter } from "react-aria";
+import { useLocalizedStringFormatter } from "react-aria";
 
 interface Props {
   locales: LocalizedStrings;
@@ -10,8 +10,8 @@ interface Props {
 
 export const Translate: FC<Props> = (props) => {
   const { children, locales, variables } = props;
-  const formatter = useMessageFormatter(locales);
-  return formatter(children, variables);
+  const translator = useLocalizedStringFormatter(locales);
+  return translator.format(children, variables);
 };
 
 export default Translate;

yarn.lock

@@ -3504,7 +3504,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.7.8":
+"@formatjs/icu-messageformat-parser@npm:2.7.8, @formatjs/icu-messageformat-parser@npm:^2.4.0":
   version: 2.7.8
   resolution: "@formatjs/icu-messageformat-parser@npm:2.7.8"
   dependencies:
@@ -3583,6 +3583,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@internationalized/string-compiler@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "@internationalized/string-compiler@npm:3.2.4"
+  dependencies:
+    "@formatjs/icu-messageformat-parser": "npm:^2.4.0"
+  checksum: 10c0/751f3214b37e7facac67c26eb028da09061ae0d5bb11c814ac798e9fb87001f5c3ce4a071c24e79f1fbe47fdb56a1e04d78e23850b1fd6b319a61d720c6628ed
+  languageName: node
+  linkType: hard
+
 "@internationalized/string@npm:^3.2.3":
   version: 3.2.3
   resolution: "@internationalized/string@npm:3.2.3"
@@ -4079,6 +4088,7 @@ __metadata:
   dependencies:
     "@chakra-ui/live-region": "npm:^2.1.0"
     "@faker-js/faker": "npm:^8.4.1"
+    "@internationalized/string-compiler": "npm:^3.2.4"
     "@mittwald/flow-design-tokens": "workspace:^"
     "@mittwald/react-tunnel": "workspace:^"
     "@mittwald/react-use-promise": "npm:^2.3.13"