Protect void elements from translations which try to set their children (#155)

A broken translation may accidentally set a value which <Localized> will
normally insert as a child of its wrapped component. For void elements we need
to actively forbid this because React throws when trying to set children of
void elements, breaking the entire app.

Author: stasm

fluent-react/src/localized.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { isReactLocalization } from './localization';
 import { parseMarkup } from './markup';
+import VOID_ELEMENTS from '../vendor/voidElementTags';
 
 /*
  * Prepare props passed to `Localized` for formatting.
@@ -111,7 +112,15 @@ export default class Localized extends Component {
       }
     }
 
-    // If the message has a null value, we're onl interested in its attributes.
+    // If the wrapped component is a known void element, explicitly dismiss the
+    // message value and do not pass it to cloneElement in order to avoi the
+    // "void element tags must neither have `children` nor use
+    // `dangerouslySetInnerHTML`" error.
+    if (elem.type in VOID_ELEMENTS) {
+      return cloneElement(elem, 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) {

fluent-react/test/localized_void_test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+import { MessageContext } from '../../fluent/src';
+import ReactLocalization from '../src/localization';
+import { Localized } from '../src/index';
+
+suite('Localized - void elements', function() {
+  test('do not render the value in void elements', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+foo = FOO
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo">
+        <input />
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.ok(wrapper.contains(
+      <input />
+    ));
+  });
+
+  test('render attributes in void elements', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+foo =
+    .title = TITLE
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo" attrs={{title: true}}>
+        <input />
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.ok(wrapper.contains(
+      <input title="TITLE" />
+    ));
+  });
+
+  test('render attributes but not value in void elements', function() {
+    const mcx = new MessageContext();
+    const l10n = new ReactLocalization([mcx]);
+
+    mcx.addMessages(`
+foo = FOO
+    .title = TITLE
+`)
+
+    const wrapper = shallow(
+      <Localized id="foo" attrs={{title: true}}>
+        <input />
+      </Localized>,
+      { context: { l10n } }
+    );
+
+    assert.ok(wrapper.contains(
+      <input title="TITLE" />
+    ));
+  });
+});

fluent-react/vendor/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

fluent-react/vendor/README.md

@@ -0,0 +1,18 @@
+# Void HTML Elements
+
+This directory contains MIT-licensed source files from React DOM's codebase
+which define a list of void HTML elements. React DOM doesn't allow these
+elements to contain any children.
+
+In `fluent-react`, a broken translation may have a value where none is
+expected. `<Localized>` components must protect wrapped void elements from
+having this unexpected value inserted as children. React throws when trying
+to set children of void elements, breaking the entire app.
+
+See [PR #155](https://github.com/projectfluent/fluent.js/pull/155) for more
+information.
+
+The files were sourced from the `v16.2.0` tag of React DOM:
+
+  - [omittedCloseTags.js](https://github.com/facebook/react/blob/v16.2.0/packages/react-dom/src/shared/omittedCloseTags.js),
+  - [voidElementTags.js](https://github.com/facebook/react/blob/v16.2.0/packages/react-dom/src/shared/voidElementTags.js).

fluent-react/vendor/omittedCloseTags.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in this directory.
+ */
+
+// For HTML, certain tags should omit their close tag. We keep a whitelist for
+// those special-case tags.
+
+var omittedCloseTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  // NOTE: menuitem's close tag should be omitted, but that causes problems.
+};
+
+export default omittedCloseTags;

fluent-react/vendor/voidElementTags.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in this directory.
+ */
+
+import omittedCloseTags from './omittedCloseTags';
+
+// For HTML, certain tags cannot have children. This has the same purpose as
+// `omittedCloseTags` except that `menuitem` should still have its closing tag.
+
+var voidElementTags = {
+  menuitem: true,
+  ...omittedCloseTags,
+};
+
+export default voidElementTags;