Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate next/head to use React.createContext #6038

Merged
5 changes: 5 additions & 0 deletions packages/next-server/lib/head-context.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react'

const HeadManagerContext = React.createContext()

export default HeadManagerContext
timneutkens marked this conversation as resolved.
Show resolved Hide resolved
9 changes: 4 additions & 5 deletions packages/next-server/lib/head.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import sideEffect from './side-effect'
import HeadManagerContext from './head-context'

class Head extends React.Component {
static contextTypes = {
headManager: PropTypes.object
}
static contextType = HeadManagerContext
alexandernanberg marked this conversation as resolved.
Show resolved Hide resolved

render () {
return null
Expand Down Expand Up @@ -47,8 +46,8 @@ function mapOnServer (head) {
}

function onStateChange (head) {
if (this.context && this.context.headManager) {
this.context.headManager.updateHead(head)
if (this.context) {
this.context.updateHead(head)
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/next-server/lib/side-effect.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
static canUseDOM = typeof window !== 'undefined'

static contextTypes = WrappedComponent.contextTypes
alexandernanberg marked this conversation as resolved.
Show resolved Hide resolved
static contextType = WrappedComponent.contextType

// Try to use displayName of wrapped component
static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`
Expand Down
9 changes: 7 additions & 2 deletions packages/next/client/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import PageLoader from './page-loader'
import * as envConfig from 'next-server/config'
import ErrorBoundary from './error-boundary'
import Loadable from 'next-server/dist/lib/loadable'
import HeadManagerContext from 'next-server/dist/lib/head-context'

// Polyfill Promise globally
// This is needed because Webpack's dynamic loading(common chunks) code
Expand Down Expand Up @@ -181,7 +182,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
if (process.env.NODE_ENV === 'development') {
renderReactElement((
<RouterContext.Provider value={makePublicRouterInstance(router)}>
<App {...appProps} />
<HeadManagerContext.Provider value={headManager}>
<App {...appProps} />
</HeadManagerContext.Provider>
</RouterContext.Provider>
), appContainer)
} else {
Expand All @@ -196,7 +199,9 @@ async function doRender ({ App, Component, props, err, emitter: emitterProp = em
renderReactElement((
<ErrorBoundary onError={onError}>
<RouterContext.Provider value={makePublicRouterInstance(router)}>
<App {...appProps} />
<HeadManagerContext.Provider value={headManager}>
<App {...appProps} />
</HeadManagerContext.Provider>
</RouterContext.Provider>
</ErrorBoundary>
), appContainer)
Expand Down
20 changes: 5 additions & 15 deletions packages/next/pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,12 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'

export default class App extends Component {
static childContextTypes = {
headManager: PropTypes.object
}

static async getInitialProps ({ Component, router, ctx }) {
const pageProps = await loadGetInitialProps(Component, ctx)
return {pageProps}
}

getChildContext () {
const { headManager } = this.props
return {
headManager
}
}

// Kept here for backwards compatibility.
// When someone ended App they could call `super.componentDidCatch`. This is now deprecated.
componentDidCatch (err) {
Expand All @@ -28,9 +16,11 @@ export default class App extends Component {
render () {
const {router, Component, pageProps} = this.props
const url = createUrl(router)
return <Container>
<Component {...pageProps} url={url} />
</Container>
return (
<Container>
<Component {...pageProps} url={url} />
</Container>
)
}
}

Expand Down