(@fluent/react) Add useTranslate

Author: macabeus

fluent-react/example/src/Hello.tsx

@@ -1,29 +1,23 @@
 import React, { useState } from "react";
-import { Localized } from "@fluent/react";
+import { useTranslate } from "@fluent/react";
 
 export function Hello() {
     let [userName, setUserName] = useState("");
+    const { t, tAttributes } = useTranslate()
 
     return (
         <div>
             {userName ?
-                <Localized id="hello" vars={{ userName }}>
-                    <h1>{'Hello, { $userName }!'}</h1>
-                </Localized>
-                :
-                <Localized id="hello-no-name">
-                    <h1>Hello, stranger!</h1>
-                </Localized>
+                <h1>{t('hello', { userName })}</h1>
+                : <h1>{t('hello-no-name')}</h1>
             }
 
-            <Localized id="type-name" attrs={{ placeholder: true }}>
-                <input
-                    type="text"
-                    placeholder="Type your name"
-                    onChange={evt => setUserName(evt.target.value)}
-                    value={userName}
-                />
-            </Localized>
+            <input
+                type="text"
+                placeholder={tAttributes('type-name').placeholder}
+                onChange={evt => setUserName(evt.target.value)}
+                value={userName}
+            />
         </div>
     );
 }

fluent-react/src/index.ts

@@ -22,3 +22,4 @@ export { LocalizationProvider } from "./provider";
 export { withLocalization, WithLocalizationProps } from "./with_localization";
 export { Localized, LocalizedProps } from "./localized";
 export { MarkupParser } from "./markup";
+export { useTranslate } from "./useTranslate";

fluent-react/src/useTranslate.ts

@@ -0,0 +1,96 @@
+import { useContext } from "react";
+import { FluentContext } from "./context";
+import { ReactLocalization } from "./localization";
+import { FluentArgument, FluentBundle } from "@fluent/bundle";
+
+type Message = Exclude<ReturnType<FluentBundle["getMessage"]>, undefined>
+
+// Using ReactLocalization and a id, return its bundle and message object
+// if both exists, otherwise return null for boths
+type getBundleAndMessage = (
+  (l10n: ReactLocalization, id: string) =>
+  ({ bundle: FluentBundle; msg: Message } | { bundle: null; msg: null })
+)
+const getBundleAndMessage: getBundleAndMessage = (l10n, id) => {
+  const bundle = l10n.getBundle(id);
+  const msg = bundle?.getMessage(id);
+
+  if (bundle === null || msg === undefined) {
+    return { bundle: null, msg: null };
+  }
+
+  return { bundle, msg };
+};
+
+type TFunction = (id: string, vars?: Record<string, FluentArgument>) => string
+type TAttributesFunction = (
+  (id: string, vars?: Record<string, FluentArgument>) =>
+  { [key in string]: string }
+)
+
+type useTranslate = () => { t: TFunction; tAttributes: TAttributesFunction }
+
+/*
+ * The `useTranslate` hook uses the FluentContext to return two functions
+ * to get the translated messages from Fluent's bundle:
+ * - t: get the root message from the given id
+ * - tAttributes: get the attributes message from the given id
+ */
+export const useTranslate: useTranslate = () => {
+  const l10n = useContext(FluentContext);
+
+  if (!l10n) {
+    // Return fallbacks functions
+    const t: TFunction = () => "";
+    const tAttributes: TAttributesFunction = () => ({});
+
+    return { t, tAttributes };
+  }
+
+  const t: TFunction = (id, vars) => {
+    const { bundle, msg } = getBundleAndMessage(l10n, id);
+
+    if (bundle === null || msg === null) {
+      // Return as fallback an empty string.
+      return "";
+    }
+
+    // Format the message and return that
+    const errors: Array<Error> = [];
+    const msgValue = msg.value || "";
+    const messageFormatted = bundle.formatPattern(msgValue, vars, errors);
+
+    errors.forEach(error => l10n.reportError(error));
+
+    return messageFormatted;
+  };
+
+  const tAttributes: TAttributesFunction = (id, vars) => {
+    const { bundle, msg } = getBundleAndMessage(l10n, id);
+
+    if (bundle === null || msg === null) {
+      // Return as fallback an empty object.
+      return {};
+    }
+
+    // Format all atributes and return that
+    const errors: Array<Error> = [];
+    const messagesFormatted = Object
+      .keys(msg.attributes)
+      .reduce(
+        (acc, key) => {
+          acc[key] = bundle.formatPattern(msg.attributes[key], vars, errors);
+          return acc;
+        },
+        {} as { [key in string]: string }
+      );
+
+    errors.forEach(error => l10n.reportError(error));
+
+    return messagesFormatted;
+  };
+
+  return { t, tAttributes };
+};
+
+export default useTranslate;