mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Move next/head to Typescript (#6131)
Solves a bunch of inconsistencies in handling React elements too.
This commit is contained in:
Tim Neutkens
GitHub
parent
6c49bee959
commit
adfdc79842
|
|
@ -33,7 +33,11 @@
|
|||
"git add"
|
||||
],
|
||||
"*.ts": [
|
||||
"tslint -c tslint.json 'packages/**/*.ts'",
|
||||
"tslint -c tslint.json 'packages/**/*.ts' --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.tsx": [
|
||||
"tslint -c tslint.json 'packages/**/*.ts' --fix",
|
||||
"git add"
|
||||
],
|
||||
"packages/**/bin/*": [
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
import React from 'react'
|
||||
import withSideEffect from './side-effect'
|
||||
import { HeadManagerContext } from './head-manager-context'
|
||||
|
||||
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 })
|
||||
})
|
||||
}
|
||||
|
||||
const METATYPES = ['name', 'httpEquiv', 'charSet', 'itemProp']
|
||||
|
||||
/*
|
||||
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 = {}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const Effect = withSideEffect()
|
||||
|
||||
function Head ({children}) {
|
||||
return <HeadManagerContext.Consumer>
|
||||
{(updateHead) => <Effect reduceComponentsToState={reduceComponents} handleStateChange={updateHead}>{children}</Effect>}
|
||||
</HeadManagerContext.Consumer>
|
||||
}
|
||||
|
||||
Head.rewind = Effect.rewind
|
||||
|
||||
export default Head
|
||||
135
packages/next-server/lib/head.tsx
Normal file
135
packages/next-server/lib/head.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import React from "react";
|
||||
import withSideEffect from "./side-effect";
|
||||
import { HeadManagerContext } from "./head-manager-context";
|
||||
|
||||
export function defaultHead(className = 'next-head') {
|
||||
return [
|
||||
<meta key="charSet" charSet="utf-8" className={className} />,
|
||||
];
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
const METATYPES = ["name", "httpEquiv", "charSet", "itemProp"];
|
||||
|
||||
/*
|
||||
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;
|
||||
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param headElement List of multiple <Head> instances
|
||||
*/
|
||||
function reduceComponents(headElements: Array<React.ReactElement<any>>) {
|
||||
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()
|
||||
.concat(defaultHead(''))
|
||||
.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 });
|
||||
});
|
||||
}
|
||||
|
||||
const Effect = withSideEffect();
|
||||
|
||||
function Head({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<HeadManagerContext.Consumer>
|
||||
{(updateHead) => (
|
||||
<Effect
|
||||
reduceComponentsToState={reduceComponents}
|
||||
handleStateChange={updateHead}
|
||||
>
|
||||
{children}
|
||||
</Effect>
|
||||
)}
|
||||
</HeadManagerContext.Consumer>
|
||||
);
|
||||
}
|
||||
|
||||
Head.rewind = Effect.rewind;
|
||||
|
||||
export default Head;
|
||||
|
|
@ -2,53 +2,53 @@ import React, { Component } from 'react'
|
|||
|
||||
const isServer = typeof window === 'undefined'
|
||||
|
||||
type State = React.DetailedReactHTMLElement<any, any>[] | undefined
|
||||
type State = Array<React.ReactElement<any>> | undefined
|
||||
|
||||
type SideEffectProps = {
|
||||
reduceComponentsToState: (components: React.ReactElement<any>[]) => State,
|
||||
handleStateChange?: (state: State) => void
|
||||
reduceComponentsToState: (components: Array<React.ReactElement<any>>) => State,
|
||||
handleStateChange?: (state: State) => void,
|
||||
}
|
||||
|
||||
export default function withSideEffect () {
|
||||
export default function withSideEffect() {
|
||||
const mountedInstances: Set<any> = new Set()
|
||||
let state: State
|
||||
|
||||
function emitChange (component: React.Component<SideEffectProps>) {
|
||||
function emitChange(component: React.Component<SideEffectProps>) {
|
||||
state = component.props.reduceComponentsToState([...mountedInstances])
|
||||
if(component.props.handleStateChange) {
|
||||
if (component.props.handleStateChange) {
|
||||
component.props.handleStateChange(state)
|
||||
}
|
||||
}
|
||||
|
||||
class SideEffect extends Component<SideEffectProps> {
|
||||
// Used when server rendering
|
||||
static rewind () {
|
||||
static rewind() {
|
||||
const recordedState = state
|
||||
state = undefined
|
||||
mountedInstances.clear()
|
||||
return recordedState
|
||||
}
|
||||
|
||||
constructor (props: any) {
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
if (isServer) {
|
||||
mountedInstances.add(this)
|
||||
emitChange(this)
|
||||
}
|
||||
}
|
||||
componentDidMount () {
|
||||
componentDidMount() {
|
||||
mountedInstances.add(this)
|
||||
emitChange(this)
|
||||
}
|
||||
componentDidUpdate () {
|
||||
componentDidUpdate() {
|
||||
emitChange(this)
|
||||
}
|
||||
componentWillUnmount () {
|
||||
componentWillUnmount() {
|
||||
mountedInstances.delete(this)
|
||||
emitChange(this)
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue