Making fallback definition optional

[psimk]

Currently whenever you use the <Localized /> component and don't pass any children it will will fallback to returning the full message. Even if the id, attributes and any of the used HTML markup is correctly defined.

Example: .ftl

query-no-results = Oops, looks like the query: <query>{ $query }</query>, can not be found.

.jsx

<Localized
  id="query-no-results"
  $query="Why is Fluent so sleek"
  query={<b />}
/>

output

Oops, looks like the query: <query>{ Why is Fluent so sleek }</query>, can not be found.

For our use case the production environment will always have the correctly defined ftl messages and their attributes. This makes the jsx look a bit bloated, but more importantly defining the fallback children each time is redundant as in our case it would be the same message that we previously defined in our ftl bundle, which might also lead to inconsistencies between the .ftl file and the .jsx

As a workaround we're passing <React.Fragment/> as the child of <Localized />

Example: .jsx

<Localized
  id="query-no-results"
  $query="Why is Fluent so sleek"
  query={<b />}
>
  <React.Fragment/>
</Localized>

Maybe it would be possible to solve this by adding an extra prop to the <Localized /> component, which when set, would make the <Localized/> component act in the same way as in the above workaround example, replacing the undefined children with a React.Fragment.

.jsx

<Localized
  id="query-no-results"
  $query="Why is Fluent so sleek"
  query={<b />}
  noFallback  // NEW
/>