2019-01-25 16:43:12 +01:00
|
|
|
import React from "react";
|
|
|
|
|
import withSideEffect from "./side-effect";
|
2019-04-11 20:59:26 +02:00
|
|
|
import {AmpModeContext} from './amphtml-context';
|
2019-01-25 16:43:12 +01:00
|
|
|
import { HeadManagerContext } from "./head-manager-context";
|
2019-04-11 20:59:26 +02:00
|
|
|
import { isAmp } from './amp'
|
2019-01-25 16:43:12 +01:00
|
|
|
|
2019-03-27 17:46:44 +01:00
|
|
|
type WithIsAmp = {
|
|
|
|
|
isAmp?: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function defaultHead(className = 'next-head', isAmp = false) {
|
|
|
|
|
const head = [
|
2019-01-25 16:43:12 +01:00
|
|
|
<meta key="charSet" charSet="utf-8" className={className} />,
|
|
|
|
|
];
|
2019-03-27 17:46:44 +01:00
|
|
|
if (!isAmp) {
|
|
|
|
|
head.push(
|
|
|
|
|
<meta key="viewport" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" className={className} />,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return head;
|
2019-01-25 16:43:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onlyReactElement(
|
|
|
|
|
list: Array<React.ReactElement<any>>,
|
|
|
|
|
child: React.ReactChild,
|
|
|
|
|
): Array<React.ReactElement<any>> {
|
|
|
|
|
// React children can be "string" or "number" in this case we ignore them for backwards compat
|
|
|
|
|
if (typeof child === "string" || typeof child === "number") {
|
|
|
|
|
return list;
|
|
|
|
|
}
|
|
|
|
|
// Adds support for React.Fragment
|
|
|
|
|
if (child.type === React.Fragment) {
|
|
|
|
|
return list.concat(
|
|
|
|
|
React.Children.toArray(child.props.children).reduce((
|
|
|
|
|
fragmentList: Array<React.ReactElement<any>>,
|
|
|
|
|
fragmentChild: React.ReactChild,
|
|
|
|
|
): Array<React.ReactElement<any>> => {
|
|
|
|
|
if (
|
|
|
|
|
typeof fragmentChild === "string" ||
|
|
|
|
|
typeof fragmentChild === "number"
|
|
|
|
|
) {
|
|
|
|
|
return fragmentList;
|
|
|
|
|
}
|
|
|
|
|
return fragmentList.concat(fragmentChild);
|
|
|
|
|
},
|
|
|
|
|
[]),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return list.concat(child);
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-27 17:46:44 +01:00
|
|
|
const METATYPES = ["name", "httpEquiv", "charSet", "viewport", "itemProp"];
|
2019-01-25 16:43:12 +01:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
returns a function for filtering head child elements
|
|
|
|
|
which shouldn't be duplicated, like <title/>
|
|
|
|
|
Also adds support for deduplicated `key` properties
|
|
|
|
|
*/
|
|
|
|
|
function unique() {
|
|
|
|
|
const keys = new Set();
|
|
|
|
|
const tags = new Set();
|
|
|
|
|
const metaTypes = new Set();
|
|
|
|
|
const metaCategories: { [metatype: string]: Set<string> } = {};
|
|
|
|
|
|
|
|
|
|
return (h: React.ReactElement<any>) => {
|
|
|
|
|
if (h.key && typeof h.key !== 'number' && 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;
|
|
|
|
|
|
2019-03-27 17:46:44 +01:00
|
|
|
if (metatype === "charSet" || metatype === "viewport") {
|
2019-01-25 16:43:12 +01:00
|
|
|
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;
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @param headElement List of multiple <Head> instances
|
|
|
|
|
*/
|
2019-03-27 17:46:44 +01:00
|
|
|
function reduceComponents(headElements: Array<React.ReactElement<any>>, props: WithIsAmp) {
|
2019-01-25 16:43:12 +01:00
|
|
|
return headElements
|
|
|
|
|
.reduce(
|
|
|
|
|
(list: React.ReactChild[], headElement: React.ReactElement<any>) => {
|
|
|
|
|
const headElementChildren = React.Children.toArray(
|
|
|
|
|
headElement.props.children,
|
|
|
|
|
);
|
|
|
|
|
return list.concat(headElementChildren);
|
|
|
|
|
},
|
|
|
|
|
[],
|
|
|
|
|
)
|
|
|
|
|
.reduce(onlyReactElement, [])
|
|
|
|
|
.reverse()
|
2019-03-27 17:46:44 +01:00
|
|
|
.concat(defaultHead('', props.isAmp))
|
2019-01-25 16:43:12 +01:00
|
|
|
.filter(unique())
|
|
|
|
|
.reverse()
|
|
|
|
|
.map((c: React.ReactElement<any>, i: number) => {
|
|
|
|
|
const className =
|
|
|
|
|
(c.props && c.props.className ? c.props.className + " " : "") +
|
|
|
|
|
"next-head";
|
|
|
|
|
const key = c.key || i;
|
|
|
|
|
return React.cloneElement(c, { key, className });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-27 17:46:44 +01:00
|
|
|
const Effect = withSideEffect<WithIsAmp>();
|
2019-01-25 16:43:12 +01:00
|
|
|
|
|
|
|
|
function Head({ children }: { children: React.ReactNode }) {
|
|
|
|
|
return (
|
2019-04-11 20:59:26 +02:00
|
|
|
<AmpModeContext.Consumer>
|
|
|
|
|
{(ampMode) => (
|
2019-03-27 17:46:44 +01:00
|
|
|
<HeadManagerContext.Consumer>
|
|
|
|
|
{(updateHead) => (
|
|
|
|
|
<Effect
|
|
|
|
|
reduceComponentsToState={reduceComponents}
|
|
|
|
|
handleStateChange={updateHead}
|
2019-04-11 20:59:26 +02:00
|
|
|
isAmp={isAmp(ampMode)}
|
2019-03-27 17:46:44 +01:00
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</Effect>
|
|
|
|
|
)}
|
|
|
|
|
</HeadManagerContext.Consumer>
|
2019-01-25 16:43:12 +01:00
|
|
|
)}
|
2019-04-11 20:59:26 +02:00
|
|
|
</AmpModeContext.Consumer>
|
2019-01-25 16:43:12 +01:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Head.rewind = Effect.rewind;
|
|
|
|
|
|
|
|
|
|
export default Head;
|
