Strictly validate children

Author: stasm

fluent-react/src/localized.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, createElement } from "react";
+import { ReactElement, ReactNode, createElement, isValidElement } from "react";
 import PropTypes from "prop-types";
 import { FluentVariable } from "@fluent/bundle";
 import { LocalizedElement } from "./localized_element";
@@ -22,9 +22,18 @@ export function Localized(props: LocalizedProps): ReactElement {
     return createElement(LocalizedText, props);
   }
 
-  // Redirect to LocalizedElement for element children. Only a single element
-  // child is supported; LocalizedElement enforces this requirement.
-  return createElement(LocalizedElement, props);
+  if (isValidElement(props.children)) {
+    // Redirect to LocalizedElement for element children. Only a single element
+    // child is supported; LocalizedElement enforces this requirement.
+    return createElement(LocalizedElement, props);
+  }
+
+  throw new Error(
+    "<Localized> can be used either similar to <LocalizedElement>, " +
+    "in which case it expects a single React element child, or similar to " +
+    "<LocalizedText>, in which case it expects a single string-typed child " +
+    "or no children at all."
+  );
 }
 
 Localized.propTypes = {

fluent-react/src/localized_element.ts

@@ -50,8 +50,7 @@ export function LocalizedElement(props: LocalizedElementProps): ReactElement {
 
   // Check if the child inside <LocalizedElement> is a valid element.
   if (!isValidElement(child)) {
-    throw new Error("<LocalizedElement/> expected to receive a single " +
-      "React element child");
+    throw new Error("<LocalizedElement> expected a single React element child");
   }
 
   const l10n = useContext(FluentContext);

fluent-react/src/localized_text.ts

@@ -35,6 +35,11 @@ export interface LocalizedTextProps {
 export function LocalizedText(props: LocalizedTextProps): ReactElement {
   const { id, vars, children: child = null } = props;
 
+  if (child !== null && typeof child !== "string") {
+    throw new Error("<LocalizedText> expected a single string-typed child " +
+      "or no children.");
+  }
+
   const l10n = useContext(FluentContext);
   if (!l10n) {
     // Use the child as fallback.