allow Localized with no children

fluent-react/src/localized.js

@@ -1,4 +1,4 @@
-import { isValidElement, cloneElement, Component, Children } from "react";
+import { isValidElement, cloneElement, Component } from "react";
 import PropTypes from "prop-types";
 
 import { isReactLocalization } from "./localization";
@@ -82,18 +82,23 @@ export default class Localized extends Component {
   render() {
     const { l10n } = this.context;
     const { id, attrs, children } = this.props;
-    const elem = Children.only(children);
+
+    // Validate that children isn't an array
+    if (Array.isArray(children)) {
+      throw new Error("<Localized/> expected to receive a single " +
+        "React node child");
+    }
 
     if (!l10n) {
       // Use the wrapped component as fallback.
-      return elem;
+      return children;
     }
 
     const mcx = l10n.getMessageContext(id);
 
     if (mcx === null) {
       // Use the wrapped component as fallback.
-      return elem;
+      return children;
     }
 
     const msg = mcx.getMessage(id);
@@ -103,6 +108,13 @@ export default class Localized extends Component {
       attrs: messageAttrs
     } = l10n.formatCompound(mcx, msg, args);
 
+    // Check if the fallback is a valid element -- if not then it's not
+    // markup (e.g. nothing or a fallback string) so just use the
+    // formatted message value
+    if (!isValidElement(children)) {
+      return messageValue;
+    }
+
     // The default is to forbid all message attributes. If the attrs prop exists
     // on the Localized instance, only set message attributes which have been
     // explicitly allowed by the developer.
@@ -120,21 +132,21 @@ export default class Localized extends Component {
     // message value and do not pass it to cloneElement in order to avoid the
     // "void element tags must neither have `children` nor use
     // `dangerouslySetInnerHTML`" error.
-    if (elem.type in VOID_ELEMENTS) {
-      return cloneElement(elem, localizedProps);
+    if (children.type in VOID_ELEMENTS) {
+      return cloneElement(children, localizedProps);
     }
 
     // If the message has a null value, we're only interested in its attributes.
     // Do not pass the null value to cloneElement as it would nuke all children
     // of the wrapped component.
     if (messageValue === null) {
-      return cloneElement(elem, localizedProps);
+      return cloneElement(children, localizedProps);
     }
 
     // If the message value doesn't contain any markup nor any HTML entities,
     // insert it as the only child of the wrapped component.
     if (!reMarkup.test(messageValue)) {
-      return cloneElement(elem, localizedProps, messageValue);
+      return cloneElement(children, localizedProps, messageValue);
     }
 
     // If the message contains markup, parse it and try to match the children
@@ -167,7 +179,7 @@ export default class Localized extends Component {
       return cloneElement(sourceChild, null, childNode.textContent);
     });
 
-    return cloneElement(elem, localizedProps, ...translatedChildren);
+    return cloneElement(children, localizedProps, ...translatedChildren);
   }
 }
 
@@ -176,5 +188,5 @@ Localized.contextTypes = {
 };
 
 Localized.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node
 };

fluent-react/test/localized_render_test.js

@@ -262,4 +262,65 @@ foo = { $arg }
     const { args } = format.getCall(0);
     assert.deepEqual(args[1], { arg: 'ARG' });
   });
+
+  test('render with a string fallback and no message returns the fallback',
+  function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    const wrapper = shallow(
+      <Localized id="foo">
+        String fallback
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'String fallback');
+  });
+
+  test('render with a string fallback returns the message', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+    mcx.addMessages(`
+foo = Test message
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo">
+        String fallback
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'Test message');
+  });
+
+  test('render without a fallback returns the message', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+foo = Message
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo" />,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), 'Message');
+  });
+
+  test('render without a fallback and no message returns nothing',
+  function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    const wrapper = shallow(
+      <Localized id="foo" />,
+      { context: { l10n } }
+    );
+
+    assert.equal(wrapper.text(), '');
+  });
 });

fluent-react/test/localized_valid_test.js

@@ -45,13 +45,11 @@ suite('Localized - validation', function() {
   });
 
   test('without a child', function() {
-    function render() {
-      shallow(
-        <Localized />,
-        { context: { l10n: new ReactLocalization([]) } }
-      );
-    }
-    assert.throws(render, /a single React element child/);
+    const wrapper = shallow(
+      <Localized />,
+      { context: { l10n: new ReactLocalization([]) } }
+    );
+    assert.equal(wrapper.length, 1);
   });
 
   test('with multiple children', function() {
@@ -64,7 +62,7 @@ suite('Localized - validation', function() {
         { context: { l10n: new ReactLocalization([]) } }
       );
     }
-    assert.throws(render, /a single React element child/);
+    assert.throws(render, /a single React node child/);
   });
 
   test('without id', function() {