mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Migrate next/head to use React.createContext (#6038)
Continuation of #5945
This commit is contained in:
parent
02ab732096
commit
ff5cf6d4de
3
packages/next-server/lib/head-manager-context.ts
Normal file
3
packages/next-server/lib/head-manager-context.ts
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
export const HeadManagerContext = React.createContext(null)
|
|
@ -1,11 +1,10 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import sideEffect from './side-effect'
|
import sideEffect from './side-effect'
|
||||||
|
import { HeadManagerContext } from './head-manager-context'
|
||||||
|
|
||||||
class Head extends React.Component {
|
class Head extends React.Component {
|
||||||
static contextTypes = {
|
static contextType = HeadManagerContext
|
||||||
headManager: PropTypes.object
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return null
|
return null
|
||||||
|
@ -47,8 +46,8 @@ function mapOnServer (head) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onStateChange (head) {
|
function onStateChange (head) {
|
||||||
if (this.context && this.context.headManager) {
|
if (this.context) {
|
||||||
this.context.headManager.updateHead(head)
|
this.context.updateHead(head)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,7 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
|
||||||
// Expose canUseDOM so tests can monkeypatch it
|
// Expose canUseDOM so tests can monkeypatch it
|
||||||
static canUseDOM = typeof window !== 'undefined'
|
static canUseDOM = typeof window !== 'undefined'
|
||||||
|
|
||||||
static contextTypes = WrappedComponent.contextTypes
|
static contextType = WrappedComponent.contextType
|
||||||
|
|
||||||
// Try to use displayName of wrapped component
|
// Try to use displayName of wrapped component
|
||||||
static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`
|
static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`
|
||||||
|
|
|
@ -35,8 +35,8 @@
|
||||||
"url": "0.11.0"
|
"url": "0.11.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^16.3.0",
|
"react": "^16.6.0",
|
||||||
"react-dom": "^16.3.0"
|
"react-dom": "^16.6.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@taskr/clear": "1.1.0",
|
"@taskr/clear": "1.1.0",
|
||||||
|
|
|
@ -8,6 +8,7 @@ import PageLoader from './page-loader'
|
||||||
import * as envConfig from 'next-server/config'
|
import * as envConfig from 'next-server/config'
|
||||||
import ErrorBoundary from './error-boundary'
|
import ErrorBoundary from './error-boundary'
|
||||||
import Loadable from 'next-server/dist/lib/loadable'
|
import Loadable from 'next-server/dist/lib/loadable'
|
||||||
|
import { HeadManagerContext } from 'next-server/dist/lib/head-manager-context'
|
||||||
|
|
||||||
// Polyfill Promise globally
|
// Polyfill Promise globally
|
||||||
// This is needed because Webpack's dynamic loading(common chunks) code
|
// This is needed because Webpack's dynamic loading(common chunks) code
|
||||||
|
@ -181,7 +182,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
renderReactElement((
|
renderReactElement((
|
||||||
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
||||||
<App {...appProps} />
|
<HeadManagerContext.Provider value={headManager}>
|
||||||
|
<App {...appProps} />
|
||||||
|
</HeadManagerContext.Provider>
|
||||||
</RouterContext.Provider>
|
</RouterContext.Provider>
|
||||||
), appContainer)
|
), appContainer)
|
||||||
} else {
|
} else {
|
||||||
|
@ -196,7 +199,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
|
||||||
renderReactElement((
|
renderReactElement((
|
||||||
<ErrorBoundary onError={onError}>
|
<ErrorBoundary onError={onError}>
|
||||||
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
<RouterContext.Provider value={makePublicRouterInstance(router)}>
|
||||||
<App {...appProps} />
|
<HeadManagerContext.Provider value={headManager}>
|
||||||
|
<App {...appProps} />
|
||||||
|
</HeadManagerContext.Provider>
|
||||||
</RouterContext.Provider>
|
</RouterContext.Provider>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
), appContainer)
|
), appContainer)
|
||||||
|
|
|
@ -91,8 +91,8 @@
|
||||||
"ws": "6.1.2"
|
"ws": "6.1.2"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^16.3.0",
|
"react": "^16.6.0",
|
||||||
"react-dom": "^16.3.0"
|
"react-dom": "^16.6.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/loader-utils": "1.1.3",
|
"@types/loader-utils": "1.1.3",
|
||||||
|
|
|
@ -1,24 +1,12 @@
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'
|
import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'
|
||||||
|
|
||||||
export default class App extends Component {
|
export default class App extends Component {
|
||||||
static childContextTypes = {
|
|
||||||
headManager: PropTypes.object
|
|
||||||
}
|
|
||||||
|
|
||||||
static async getInitialProps ({ Component, router, ctx }) {
|
static async getInitialProps ({ Component, router, ctx }) {
|
||||||
const pageProps = await loadGetInitialProps(Component, ctx)
|
const pageProps = await loadGetInitialProps(Component, ctx)
|
||||||
return {pageProps}
|
return {pageProps}
|
||||||
}
|
}
|
||||||
|
|
||||||
getChildContext () {
|
|
||||||
const { headManager } = this.props
|
|
||||||
return {
|
|
||||||
headManager
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Kept here for backwards compatibility.
|
// Kept here for backwards compatibility.
|
||||||
// When someone ended App they could call `super.componentDidCatch`. This is now deprecated.
|
// When someone ended App they could call `super.componentDidCatch`. This is now deprecated.
|
||||||
componentDidCatch (err) {
|
componentDidCatch (err) {
|
||||||
|
@ -28,9 +16,11 @@ export default class App extends Component {
|
||||||
render () {
|
render () {
|
||||||
const {router, Component, pageProps} = this.props
|
const {router, Component, pageProps} = this.props
|
||||||
const url = createUrl(router)
|
const url = createUrl(router)
|
||||||
return <Container>
|
return (
|
||||||
<Component {...pageProps} url={url} />
|
<Container>
|
||||||
</Container>
|
<Component {...pageProps} url={url} />
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue