1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/packages/next-server/lib/head.js
Tim Neutkens 9890e06907
Dedupe only items with unique key (#5800)
Fixes #3705
Fixes #4656

- No longer automatically dedupe certain tags. Only the ones we know are *never* going to be duplicate like charSet, title etc.
- Fix `key=""` behavior, making sure that if a unique key is provided tags are deduped based on that.

For example:

```jsx
<meta property='fb:pages' content='one'>
<meta property='fb:pages' content='two'>
```

Would currently cause

```jsx
<meta property='fb:pages' content='two'>
```

### After this change:

```jsx
<meta property='fb:pages' content='one'>
<meta property='fb:pages' content='two'>
```

Then if you use next/head multiple times / want to be able to override:

```jsx
<meta property='fb:pages' content='one' key="not-unique-key">
<meta property='fb:pages' content='two' key="not-unique-key">
```

Would cause:

```jsx
<meta property='fb:pages' content='two'>
```

As `key` gets deduped correctly after this PR, similar to how React itself works.
2018-12-03 17:28:42 +01:00

112 lines
2.8 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import sideEffect from './side-effect'
class Head extends React.Component {
static contextTypes = {
headManager: PropTypes.object
}
render () {
return null
}
}
const NEXT_HEAD_IDENTIFIER = 'next-head'
export function defaultHead (className = NEXT_HEAD_IDENTIFIER) {
return [
<meta key='charSet' charSet='utf-8' className={className} />
]
}
function reduceComponents (components) {
return components
.map((component) => React.Children.toArray(component.props.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(Boolean)
.filter(unique())
.reverse()
.map((c, i) => {
const className = (c.props && c.props.className ? c.props.className + ' ' : '') + NEXT_HEAD_IDENTIFIER
const key = c.key || i
return React.cloneElement(c, { key, className })
})
}
function mapOnServer (head) {
return head
}
function onStateChange (head) {
if (this.context && this.context.headManager) {
this.context.headManager.updateHead(head)
}
}
const METATYPES = ['name', 'httpEquiv', 'charSet', 'itemProp']
/*
returns a function for filtering head child elements
which shouldn't be duplicated, like <title/>,
except we explicit allow it in ALLOWED_DUPLICATES array
*/
function unique () {
const keys = new Set()
const tags = new Set()
const metaTypes = new Set()
const metaCategories = {}
return (h) => {
if (h.key && h.key.indexOf('.$') === 0) {
if (keys.has(h.key)) return false
keys.add(h.key)
return true
}
switch (h.type) {
case 'title':
case 'base':
if (tags.has(h.type)) return false
tags.add(h.type)
break
case 'meta':
for (let i = 0, len = METATYPES.length; i < len; i++) {
const metatype = METATYPES[i]
if (!h.props.hasOwnProperty(metatype)) continue
if (metatype === 'charSet') {
if (metaTypes.has(metatype)) return false
metaTypes.add(metatype)
} else {
const category = h.props[metatype]
const categories = metaCategories[metatype] || new Set()
if (categories.has(category)) return false
categories.add(category)
metaCategories[metatype] = categories
}
}
break
}
return true
}
}
if (process.env.NODE_ENV === 'development') {
const exact = require('prop-types-exact')
Head.propTypes = exact({
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
})
}
export default sideEffect(reduceComponents, onStateChange, mapOnServer)(Head)