(@fluent/react) Refac useTranslate to return a ReactLocalization

Author: macabeus

fluent-react/example/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Localized } from "@fluent/react";
 import { FluentDateTime } from "@fluent/bundle";
 import { Hello } from "./Hello";
-import { LocalizedSignIn } from "./SignIn";
+import { SignIn } from "./SignIn";
 
 export function App() {
     let [date] = useState(() => new Date());
@@ -36,6 +36,6 @@ export function App() {
             </p>
         </Localized>
 
-        <LocalizedSignIn />
+        <SignIn />
     </>;
 }

fluent-react/example/src/Hello.tsx

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

fluent-react/example/src/SignIn.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Localized, withLocalization, WithLocalizationProps } from "@fluent/react";
+import { Localized, useTranslate } from "@fluent/react";
+
+export function SignIn() {
+  const { l10n } = useTranslate()
 
-function SignIn(props: WithLocalizationProps) {
   function showAlert(id: string) {
-    const { getString } = props;
-    alert(getString(id));
+    alert(l10n.getString(id));
   }
 
   return (
@@ -21,5 +22,3 @@ function SignIn(props: WithLocalizationProps) {
     </div>
   );
 }
-
-export const LocalizedSignIn = withLocalization(SignIn);

fluent-react/src/useTranslate.ts

@@ -1,96 +1,28 @@
 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 };
+// Implementation of null object pattern for ReactLocalization
+const fallbackL10n: ReactLocalization = {
+  getString: id => id,
+  getBundle: () => null,
+  bundles: [],
+  parseMarkup: null,
+  reportError: () => undefined,
 };
 
-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
- */
+* The `useTranslate` hook returns the FluentContext
+*/
+type useTranslate = () => { l10n: ReactLocalization }
 export const useTranslate: useTranslate = () => {
   const l10n = useContext(FluentContext);
 
   if (!l10n) {
-    // Return fallbacks functions
-    const t: TFunction = () => "";
-    const tAttributes: TAttributesFunction = () => ({});
-
-    return { t, tAttributes };
+    return { l10n: fallbackL10n };
   }
 
-  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 };
+  return { l10n };
 };
 
 export default useTranslate;