1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/client/head-manager.js
2016-12-16 03:52:04 +05:30

89 lines
2.3 KiB
JavaScript

const DEFAULT_TITLE = ''
const DOMAttributeNames = {
acceptCharset: 'accept-charset',
className: 'class',
htmlFor: 'for',
httpEquiv: 'http-equiv'
}
export default class HeadManager {
constructor () {
this.requestId = null
}
updateHead (head) {
// perform batch update
window.cancelAnimationFrame(this.requestId)
this.requestId = window.requestAnimationFrame(() => {
this.requestId = null
this.doUpdateHead(head)
})
}
doUpdateHead (head) {
const tags = {}
head.forEach((h) => {
const components = tags[h.type] || []
components.push(h)
tags[h.type] = components
})
this.updateTitle(tags.title ? tags.title[0] : null)
const types = ['meta', 'base', 'link', 'style', 'script']
types.forEach((type) => {
this.updateElements(type, tags[type] || [])
})
}
updateTitle (component) {
let title
if (component) {
const { children } = component.props
title = typeof children === 'string' ? children : children.join('')
} else {
title = DEFAULT_TITLE
}
if (title !== document.title) document.title = title
}
updateElements (type, components) {
const headEl = document.getElementsByTagName('head')[0]
const oldTags = Array.prototype.slice.call(headEl.querySelectorAll(type + '.next-head'))
const newTags = components.map(reactElementToDOM).filter((newTag) => {
for (let i = 0, len = oldTags.length; i < len; i++) {
const oldTag = oldTags[i]
if (oldTag.isEqualNode(newTag)) {
oldTags.splice(i, 1)
return false
}
}
return true
})
oldTags.forEach((t) => t.parentNode.removeChild(t))
newTags.forEach((t) => headEl.appendChild(t))
}
}
function reactElementToDOM ({ type, props }) {
const el = document.createElement(type)
for (const p in props) {
if (!props.hasOwnProperty(p)) continue
if (p === 'children' || p === 'dangerouslySetInnerHTML') continue
const attr = DOMAttributeNames[p] || p.toLowerCase()
el.setAttribute(attr, props[p])
}
const { children, dangerouslySetInnerHTML } = props
if (dangerouslySetInnerHTML) {
el.innerHTML = dangerouslySetInnerHTML.__html || ''
} else if (children) {
el.textContent = typeof children === 'string' ? children : children.join('')
}
return el
}