Add getFragment method to ReactLocalization

fluent-react/src/localization.ts

@@ -1,6 +1,6 @@
 import { FluentBundle, FluentVariable } from "@fluent/bundle";
 import { mapBundleSync } from "@fluent/sequence";
-import { Fragment, ReactElement, createElement, isValidElement, ReactFragment, cloneElement, ReactNode } from "react";
+import { Fragment, ReactElement, createElement, isValidElement, cloneElement } from "react";
 import { CachedSyncIterable } from "cached-iterable";
 import { createParseMarkup, MarkupParser } from "./markup.js";
 import voidElementTags from "../vendor/voidElementTags.js";
@@ -44,15 +44,15 @@ export class ReactLocalization {
 
   getString(
     id: string,
-    args?: Record<string, FluentVariable> | null,
+    vars?: Record<string, FluentVariable> | null,
     fallback?: string
   ): string {
     const bundle = this.getBundle(id);
     if (bundle) {
       const msg = bundle.getMessage(id);
       if (msg && msg.value) {
         let errors: Array<Error> = [];
-        let value = bundle.formatPattern(msg.value, args, errors);
+        let value = bundle.formatPattern(msg.value, vars, errors);
         for (let error of errors) {
           this.reportError(error);
         }
@@ -79,44 +79,15 @@ export class ReactLocalization {
     return fallback || id;
   }
 
-  getFragment(
-    id: string,
-    args?: {
-      vars?: Record<string, FluentVariable>,
-      elems?: Record<string, ReactElement>,
-    },
-    fallback?: string
-  ): ReactFragment {
-    return this.getElement(createElement(Fragment, null, fallback || id), id, args);
-  }
-
   getElement(
-    component: ReactNode | Array<ReactNode>,
+    componentToRender: ReactElement,
     id: string,
     args?: {
       vars?: Record<string, FluentVariable>,
       elems?: Record<string, ReactElement>,
       attrs?: Record<string, boolean>;
     },
   ): ReactElement {
-    let componentToRender: ReactNode | null;
-
-    // Validate that the child element isn't an array that contains multiple
-    // elements.
-    if (Array.isArray(component)) {
-      if (component.length > 1) {
-        throw new Error(
-          "Expected to receive a single React node element to inject a localized string into."
-        );
-      }
-
-      // If it's an array with zero or one element, we can directly get the first
-      // one.
-      componentToRender = component[0];
-    } else {
-      componentToRender = component ?? null;
-    }
-
     const bundle = this.getBundle(id);
     if (bundle === null) {
       if (!id) {
@@ -149,22 +120,6 @@ export class ReactLocalization {
 
     let errors: Array<Error> = [];
 
-    // Check if the component to render is a valid element -- if not, then
-    // it's either null or a simple fallback string. No need to localize the
-    // attributes.
-    if (!isValidElement(componentToRender)) {
-      if (msg.value) {
-        // Replace the fallback string with the message value;
-        let value = bundle.formatPattern(msg.value, args?.vars, errors);
-        for (let error of errors) {
-          this.reportError(error);
-        }
-        return createElement(Fragment, null, value);
-      }
-
-      return createElement(Fragment, null, componentToRender);
-    }
-
     let localizedProps: Record<string, string> | undefined;
     // The default is to forbid all message attributes. If the attrs prop exists
     // on the Localized instance, only set message attributes which have been
@@ -217,6 +172,10 @@ export class ReactLocalization {
     if (args?.elems) {
       elemsLower = new Map();
       for (let [name, elem] of Object.entries(args?.elems)) {
+        // Ignore elems which are not valid React elements.
+        if (!isValidElement(elem)) {
+          continue;
+        }
         elemsLower.set(name.toLowerCase(), elem);
       }
     }
@@ -230,19 +189,10 @@ export class ReactLocalization {
       }
 
       const childName = nodeName.toLowerCase();
+      const sourceChild = elemsLower?.get(childName);
 
       // If the child is not expected just take its textContent.
-      if (
-        !elemsLower ||
-        !Object.prototype.hasOwnProperty.call(elemsLower, childName)
-      ) {
-        return textContent;
-      }
-
-      const sourceChild = elemsLower.get(childName);
-
-      // Ignore elems which are not valid React elements.
-      if (!isValidElement(sourceChild)) {
+      if (!sourceChild) {
         return textContent;
       }
 

fluent-react/src/localized.ts

@@ -1,4 +1,5 @@
-import {
+import React, {
+  isValidElement,
   ReactElement,
   ReactNode,
   useContext,
@@ -45,7 +46,40 @@ export function Localized(props: LocalizedProps): ReactElement {
     );
   }
 
-  return l10n.getElement(children, id, { attrs, vars, elems });
+  let componentToRender: ReactNode | null;
+
+  // Validate that the child element isn't an array that contains multiple
+  // elements.
+  if (Array.isArray(children)) {
+    if (children.length > 1) {
+      throw new Error(
+        "Expected to receive a single React element to localize."
+      );
+    }
+
+    // If it's an array with zero or one element, we can directly get the first
+    // one.
+    componentToRender = children[0];
+  } else {
+    componentToRender = children ?? null;
+  }
+
+  // Check if the component to render is a valid element -- if not, then
+  // it's either null or a simple fallback string. No need to localize the
+  // attributes or replace.
+  if (!isValidElement(componentToRender)) {
+    return React.createElement(
+      React.Fragment,
+      null,
+      l10n.getString(
+        id,
+        vars,
+        typeof componentToRender === "string" ? componentToRender : undefined,
+      ),
+    );
+  }
+
+  return l10n.getElement(componentToRender, id, { attrs, vars, elems });
 }
 
 export default Localized;

fluent-react/test/localized_render.test.js

@@ -557,7 +557,7 @@ foo = Message
     expect(renderer.toJSON()).toMatchInlineSnapshot(`"Message"`);
   });
 
-  test("render without a fallback and no message returns nothing", () => {
+  test("render without a fallback and no message returns the message ID", () => {
     jest.spyOn(console, "warn").mockImplementation(() => {});
     const bundle = new FluentBundle();
 
@@ -567,7 +567,7 @@ foo = Message
       </LocalizationProvider>
     );
 
-    expect(renderer.toJSON()).toMatchInlineSnapshot(`null`);
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`"foo"`);
     expect(console.warn.mock.calls).toMatchInlineSnapshot(`
       Array [
         Array [

fluent-react/test/use_localization.test.js

@@ -13,7 +13,7 @@ function DummyComponent() {
   return (
     <div>
       <p>{l10n.getString("foo")}</p>
-      <p>{l10n.getFragment("bar", { elems: { elem: <b/> } })}</p>
+      <p>{l10n.getElement(<></>, "bar", { elems: { elem: <b/> } })}</p>
       {l10n.getElement(<p/>, "bar", { elems: { elem: <i/> }, attrs: { "title": true } })}
     </div>
   );