2016-10-07 01:57:31 +00:00
|
|
|
import React from 'react'
|
2017-04-10 18:35:26 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2016-10-07 01:57:31 +00:00
|
|
|
import sideEffect from './side-effect'
|
2019-01-14 00:59:26 +00:00
|
|
|
import { HeadManagerContext } from './head-manager-context'
|
2016-10-07 01:57:31 +00:00
|
|
|
|
|
|
|
class Head extends React.Component {
|
2019-01-14 00:59:26 +00:00
|
|
|
static contextType = HeadManagerContext
|
2016-10-07 01:57:31 +00:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-08-24 22:19:54 +00:00
|
|
|
const NEXT_HEAD_IDENTIFIER = 'next-head'
|
|
|
|
|
|
|
|
export function defaultHead (className = NEXT_HEAD_IDENTIFIER) {
|
2018-09-29 04:52:36 +00:00
|
|
|
return [
|
|
|
|
<meta key='charSet' charSet='utf-8' className={className} />
|
|
|
|
]
|
2016-11-17 23:06:54 +00:00
|
|
|
}
|
|
|
|
|
2016-10-07 01:57:31 +00:00
|
|
|
function reduceComponents (components) {
|
|
|
|
return components
|
2018-08-24 22:19:54 +00:00
|
|
|
.map((component) => React.Children.toArray(component.props.children))
|
2018-03-27 18:11:03 +00:00
|
|
|
.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()
|
2018-08-25 08:00:57 +00:00
|
|
|
.concat(defaultHead(''))
|
2018-08-24 22:19:54 +00:00
|
|
|
.filter(Boolean)
|
2018-03-27 18:11:03 +00:00
|
|
|
.filter(unique())
|
|
|
|
.reverse()
|
2018-09-29 04:52:36 +00:00
|
|
|
.map((c, i) => {
|
2018-08-24 22:19:54 +00:00
|
|
|
const className = (c.props && c.props.className ? c.props.className + ' ' : '') + NEXT_HEAD_IDENTIFIER
|
2018-09-29 04:52:36 +00:00
|
|
|
const key = c.key || i
|
|
|
|
return React.cloneElement(c, { key, className })
|
2018-03-27 18:11:03 +00:00
|
|
|
})
|
2016-10-07 01:57:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function mapOnServer (head) {
|
|
|
|
return head
|
|
|
|
}
|
|
|
|
|
|
|
|
function onStateChange (head) {
|
2019-01-14 00:59:26 +00:00
|
|
|
if (this.context) {
|
|
|
|
this.context.updateHead(head)
|
2016-10-07 01:57:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-03 16:28:42 +00:00
|
|
|
const METATYPES = ['name', 'httpEquiv', 'charSet', 'itemProp']
|
2016-10-07 01:57:31 +00:00
|
|
|
|
2018-06-01 11:12:33 +00:00
|
|
|
/*
|
|
|
|
returns a function for filtering head child elements
|
|
|
|
which shouldn't be duplicated, like <title/>,
|
|
|
|
except we explicit allow it in ALLOWED_DUPLICATES array
|
|
|
|
*/
|
2016-10-07 01:57:31 +00:00
|
|
|
|
|
|
|
function unique () {
|
2017-10-31 21:52:51 +00:00
|
|
|
const keys = new Set()
|
2016-10-07 01:57:31 +00:00
|
|
|
const tags = new Set()
|
|
|
|
const metaTypes = new Set()
|
|
|
|
const metaCategories = {}
|
|
|
|
|
|
|
|
return (h) => {
|
2018-02-19 14:47:50 +00:00
|
|
|
if (h.key && h.key.indexOf('.$') === 0) {
|
2017-10-31 21:52:51 +00:00
|
|
|
if (keys.has(h.key)) return false
|
|
|
|
keys.add(h.key)
|
2018-12-03 16:28:42 +00:00
|
|
|
return true
|
2017-10-31 21:52:51 +00:00
|
|
|
}
|
2016-10-07 01:57:31 +00:00
|
|
|
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
|
|
|
|
|
2016-10-17 00:00:17 +00:00
|
|
|
if (metatype === 'charSet') {
|
2016-10-07 01:57:31 +00:00
|
|
|
if (metaTypes.has(metatype)) return false
|
|
|
|
metaTypes.add(metatype)
|
|
|
|
} else {
|
|
|
|
const category = h.props[metatype]
|
|
|
|
const categories = metaCategories[metatype] || new Set()
|
2018-12-03 16:28:42 +00:00
|
|
|
if (categories.has(category)) return false
|
2016-10-07 01:57:31 +00:00
|
|
|
categories.add(category)
|
|
|
|
metaCategories[metatype] = categories
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-28 22:04:35 +00:00
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
const exact = require('prop-types-exact')
|
|
|
|
|
|
|
|
Head.propTypes = exact({
|
2019-01-10 11:53:43 +00:00
|
|
|
children: PropTypes.node.isRequired
|
2018-10-28 22:04:35 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2016-10-07 01:57:31 +00:00
|
|
|
export default sideEffect(reduceComponents, onStateChange, mapOnServer)(Head)
|