Add support for Fragments in Head (vercel#3502)

* Add support for Fragments in Head.

* Add test cases

* Check if Component has custom key

* Upgrade to React 16.2.0

lib/head.js

@@ -21,6 +21,12 @@ function reduceComponents (components) {
   .map((c) => c.props.children)
   .map((children) => React.Children.toArray(children))
   .reduce((a, b) => a.concat(b), [])
+  .reduce((a, b) => {
+    if (React.Fragment && b.type === React.Fragment) {
+      return a.concat(React.Children.toArray(b.props.children))
+    }
+    return a.concat(b)
+  }, [])
   .reverse()
   .concat(...defaultHead())
   .filter((c) => !!c)
@@ -54,7 +60,7 @@ function unique () {
   const metaCategories = {}
 
   return (h) => {
-    if (h.key) {
+    if (h.key && h.key.startsWith('.$')) {
       if (keys.has(h.key)) return false
       keys.add(h.key)
     }

package.json

@@ -105,7 +105,7 @@
     "webpack-hot-middleware": "2.19.1",
     "write-file-webpack-plugin": "4.2.0",
     "xss-filters": "1.2.7",
-    "uglifyjs-webpack-plugin": "^1.1.1"    
+    "uglifyjs-webpack-plugin": "^1.1.1"
   },
   "devDependencies": {
     "@taskr/babel": "1.1.0",
@@ -131,8 +131,8 @@
     "node-notifier": "5.1.2",
     "nyc": "11.2.1",
     "portfinder": "1.0.13",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
     "standard": "9.0.2",
     "taskr": "1.1.0",
     "wd": "1.4.1"

test/integration/basic/pages/head.js

@@ -10,6 +10,11 @@ export default () => <div>
 
     <meta content='my meta' />
 
+    <React.Fragment>
+      <title>Fragment title</title>
+      <meta content='meta fragment' />
+    </React.Fragment>
+
     {/* the following 2 links tag will be rendered both */}
     <link rel='stylesheet' href='/dup-style.css' />
     <link rel='stylesheet' href='/dup-style.css' />

test/integration/basic/test/rendering.js

@@ -38,6 +38,12 @@ export default function ({ app }, suiteName, render, fetch) {
       expect(html).not.toContain('<link rel="stylesheet" href="dedupe-style.css" class="next-head"/><link rel="stylesheet" href="dedupe-style.css" class="next-head"/>')
     })
 
+    test('header helper renders Fragment children', async () => {
+      const html = await (render('/head'))
+      expect(html).toContain('<title class="next-head">Fragment title</title>')
+      expect(html).toContain('<meta content="meta fragment" class="next-head"/>')
+    })
+
     it('should render the page with custom extension', async () => {
       const html = await render('/custom-extension')
       expect(html).toContain('<div>Hello</div>')

yarn.lock

@@ -4803,9 +4803,9 @@ react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
-react-dom@16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+react-dom@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -4828,9 +4828,9 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
-react@16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"