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.

Sign up for GitHub

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

WIP: Using React.createContext instead of ChildContext #5935

Closed
wants to merge 5 commits into from
+51 −55
Closed

WIP: Using React.createContext instead of ChildContext #5935

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db3ca84
convert headManager context to use new React createContext
chrislloyd Dec 23, 2018
f67a9ec
Pass React.contextType down through withSideEffect HoC
chrislloyd Dec 23, 2018
0b034ba
Move _document's _documentProps to React.createContext
chrislloyd Dec 23, 2018
6434d62
Move DocumentPropsContext provider to renderDocument to retain backwa…
chrislloyd Dec 23, 2018
6386a7a
Merge branch 'canary' into context
chrislloyd Dec 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/next-server/lib/head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React from 'react'
import PropTypes from 'prop-types'
import sideEffect from './side-effect'

export const HeadManagerContext = React.createContext()

class Head extends React.Component {
static contextTypes = {
headManager: PropTypes.object
}
static contextType = HeadManagerContext

render () {
return null
Expand Down Expand Up @@ -47,8 +47,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
2 changes: 2 additions & 0 deletions packages/next-server/lib/side-effect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
// Expose canUseDOM so tests can monkeypatch it
static canUseDOM = typeof window !== 'undefined'

// Both of these are needed for React 16/17 interop
static contextTypes = WrappedComponent.contextTypes
static contextType = WrappedComponent.contextType

// Try to use displayName of wrapped component
static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`
Expand Down
12 changes: 6 additions & 6 deletions packages/next/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { execOnce, loadGetInitialProps } from 'next-server/dist/lib/utils'
import { HeadManagerContext } from 'next-server/dist/lib/head'
import { makePublicRouterInstance } from 'next/router'

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

Expand All @@ -15,9 +15,7 @@ export default class App extends Component {
}

getChildContext () {
const { headManager } = this.props
return {
headManager,
router: makePublicRouterInstance(this.props.router)
}
}
Expand All @@ -31,9 +29,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 <HeadManagerContext.Provider value={this.props.headManager}>
<Container>
<Component {...pageProps} url={url} />
</Container>
</HeadManagerContext.Provider>
}
}

Expand Down
47 changes: 19 additions & 28 deletions packages/next/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,39 @@ const Fragment = React.Fragment || function Fragment ({ children }) {
return <div>{children}</div>
}

const DocumentPropsContext = React.createContext();

export default class Document extends Component {
static childContextTypes = {
_documentProps: PropTypes.any
}

static getInitialProps ({ renderPage }) {
const { html, head } = renderPage()
const styles = flush()
return { html, head, styles }
}

getChildContext () {
return { _documentProps: this.props }
}

render () {
return <html>
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
return <DocumentPropsContext.Provider value={this.props}>
Copy link
Member

@timneutkens timneutkens Dec 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a breaking change, as users implement render() in a custom document: https://github.com/zeit/next.js#custom-document

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The best way to do this is adding the provider to renderDocument in packages/next-server/server/render.tsx

<html>
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
</DocumentPropsContext.Provider>
}
}

export class Head extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
static contextType = DocumentPropsContext

static propTypes = {
nonce: PropTypes.string,
crossOrigin: PropTypes.string
}

getCssLinks () {
const { assetPrefix, files } = this.context._documentProps
const { assetPrefix, files } = this.context
if(!files || files.length === 0) {
return null
}
Expand All @@ -67,7 +62,7 @@ export class Head extends Component {
}

getPreloadDynamicChunks () {
const { dynamicImports, assetPrefix } = this.context._documentProps
const { dynamicImports, assetPrefix } = this.context
return dynamicImports.map((bundle) => {
return <link
rel='preload'
Expand All @@ -81,7 +76,7 @@ export class Head extends Component {
}

getPreloadMainLinks () {
const { assetPrefix, files } = this.context._documentProps
const { assetPrefix, files } = this.context
if(!files || files.length === 0) {
return null
}
Expand All @@ -104,7 +99,7 @@ export class Head extends Component {
}

render () {
const { head, styles, assetPrefix, __NEXT_DATA__ } = this.context._documentProps
const { head, styles, assetPrefix, __NEXT_DATA__ } = this.context
const { page, buildId } = __NEXT_DATA__
const pagePathname = getPagePathname(page)

Expand Down Expand Up @@ -135,22 +130,18 @@ export class Head extends Component {
}

export class Main extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
static contextType = DocumentPropsContext

render () {
const { html } = this.context._documentProps
const { html } = this.context
return (
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
)
}
}

export class NextScript extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
static contextType = DocumentPropsContext

static propTypes = {
nonce: PropTypes.string,
Expand Down