Merge pull request #24 from staylor/fragments

Support Fragment within Helmet

Author: staylor

__tests__/__snapshots__/fragment.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`misc parses Fragments 1`] = `"Hello"`;
+
+exports[`misc parses nested Fragments 1`] = `"Baz"`;

__tests__/fragment.test.js

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import Helmet from '../src';
+import Provider from '../src/Provider';
+
+Helmet.defaultProps.defer = false;
+
+const mount = document.getElementById('mount');
+
+const render = node => {
+  ReactDOM.render(<Provider>{node}</Provider>, mount);
+};
+
+describe('fragments', () => {
+  it('parses Fragments', () => {
+    render(
+      <Helmet>
+        <Fragment>
+          <title>Hello</title>
+        </Fragment>
+      </Helmet>
+    );
+
+    expect(document.title).toMatchSnapshot();
+  });
+
+  it('parses nested Fragments', () => {
+    render(
+      <Helmet>
+        <Fragment>
+          <title>Foo</title>
+          <Fragment>
+            <title>Bar</title>
+            <Fragment>
+              <title>Baz</title>
+            </Fragment>
+          </Fragment>
+        </Fragment>
+      </Helmet>
+    );
+
+    expect(document.title).toMatchSnapshot();
+  });
+});

src/constants.js

@@ -28,6 +28,7 @@ export const TAG_NAMES = {
   SCRIPT: 'script',
   STYLE: 'style',
   TITLE: 'title',
+  FRAGMENT: 'Symbol(react.fragment)',
 };
 
 export const VALID_TAG_NAMES = Object.keys(TAG_NAMES).map(name => TAG_NAMES[name]);

src/index.js

@@ -179,9 +179,18 @@ export default class Helmet extends Component {
         return obj;
       }, {});
 
-      this.warnOnInvalidChildren(child, nestedChildren);
+      let { type } = child;
+      if (typeof type === 'symbol') {
+        type = type.toString();
+      } else {
+        this.warnOnInvalidChildren(child, nestedChildren);
+      }
+
+      switch (type) {
+        case TAG_NAMES.FRAGMENT:
+          newProps = this.mapChildrenToProps(nestedChildren, newProps);
+          break;
 
-      switch (child.type) {
         case TAG_NAMES.LINK:
         case TAG_NAMES.META:
         case TAG_NAMES.NOSCRIPT: