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

react-router-v3: Add UNSAFE_ prefixes to deprecated lifecycle methods #6883

Merged
merged 4 commits into from
Aug 23, 2019
Merged

react-router-v3: Add UNSAFE_ prefixes to deprecated lifecycle methods #6883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
42288f9
Dynamically prefix deprecated lifecycle methods with 'UNSAFE_' depend…
liuyenwei Aug 22, 2019
8bf8521
Update transform of unsafe lifecycle methods
liuyenwei Aug 22, 2019
a7e642c
update comments
liuyenwei Aug 22, 2019
628612a
fix typo
liuyenwei Aug 23, 2019
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
24 changes: 22 additions & 2 deletions modules/ContextUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'

// Works around issues with context updates failing to propagate.
Expand All @@ -14,13 +15,15 @@ function makeContextName(name) {
return `@@contextSubscriber/${name}`
}

const prefixUnsafeLifecycleMethods = parseFloat(React.version) >= 16.3
Copy link

Choose a reason for hiding this comment

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

@timdorr as I mentioned over in reduxjs/react-redux#1383 (comment) , this parses the latest version of React (16.10.1) as 16.1, so this is broken.


export function ContextProvider(name) {
const contextName = makeContextName(name)
const listenersKey = `${contextName}/listeners`
const eventIndexKey = `${contextName}/eventIndex`
const subscribeKey = `${contextName}/subscribe`

return {
const config = {
childContextTypes: {
[contextName]: contextProviderShape.isRequired
},
Expand All @@ -34,11 +37,13 @@ export function ContextProvider(name) {
}
},

// this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
componentWillMount() {
this[listenersKey] = []
this[eventIndexKey] = 0
},

// this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
componentWillReceiveProps() {
this[eventIndexKey]++
},
Expand All @@ -60,6 +65,14 @@ export function ContextProvider(name) {
}
}
}

if (prefixUnsafeLifecycleMethods) {
config.UNSAFE_componentWillMount = config.componentWillMount
config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps
delete config.componentWillMount
delete config.componentWillReceiveProps
}
return config
}

export function ContextSubscriber(name) {
Expand All @@ -68,7 +81,7 @@ export function ContextSubscriber(name) {
const handleContextUpdateKey = `${contextName}/handleContextUpdate`
const unsubscribeKey = `${contextName}/unsubscribe`

return {
const config = {
contextTypes: {
[contextName]: contextProviderShape
},
Expand All @@ -93,6 +106,7 @@ export function ContextSubscriber(name) {
)
},

// this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
componentWillReceiveProps() {
if (!this.context[contextName]) {
return
Expand All @@ -118,4 +132,10 @@ export function ContextSubscriber(name) {
}
}
}

if (prefixUnsafeLifecycleMethods) {
config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps
delete config.componentWillReceiveProps
}
return config
}
11 changes: 11 additions & 0 deletions modules/Router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const propTypes = {
matchContext: object
}

const prefixUnsafeLifecycleMethods = parseFloat(React.version) >= 16.3

/**
* A <Router> is a high-level API for automatically setting up
* a router that renders a <RouterContext> with all the props
Expand Down Expand Up @@ -91,6 +93,7 @@ const Router = createReactClass({
)
},

// this method will be updated to UNSAFE_componentWillMount below for React versions >= 16.3
componentWillMount() {
this.transitionManager = this.createTransitionManager()
this.router = this.createRouterObject(this.state)
Expand All @@ -107,6 +110,7 @@ const Router = createReactClass({
})
},

// this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3
/* istanbul ignore next: sanity check */
componentWillReceiveProps(nextProps) {
warning(
Expand Down Expand Up @@ -150,4 +154,11 @@ const Router = createReactClass({

})

if (prefixUnsafeLifecycleMethods) {
Router.prototype.UNSAFE_componentWillReceiveProps = Router.prototype.componentWillReceiveProps
Router.prototype.UNSAFE_componentWillMount = Router.prototype.componentWillMount
delete Router.prototype.componentWillReceiveProps
delete Router.prototype.componentWillMount
}

export default Router
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@
"mocha": "^5.0.4",
"pretty-bytes": "^4.0.2",
"qs": "^6.2.1",
"react": "^16.8.6",
"react": "^16.9.0",
"react-addons-css-transition-group": "^15.6.0",
"react-dom": "^16.8.6",
"react-dom": "^16.9.0",
"rimraf": "^2.5.4",
"style-loader": "^0.16.1",
"webpack": "^1.13.1",
Expand Down
27 changes: 13 additions & 14 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5053,15 +5053,15 @@ react-addons-css-transition-group@^15.6.0:
dependencies:
react-transition-group "^1.2.0"

react-dom@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
react-dom@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
scheduler "^0.15.0"

react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
Expand All @@ -5079,15 +5079,14 @@ react-transition-group@^1.2.0:
prop-types "^15.5.6"
warning "^3.0.0"

react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
react@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"

read-pkg-up@^1.0.1:
version "1.0.1"
Expand Down Expand Up @@ -5392,10 +5391,10 @@ sax@^1.2.4, sax@~1.2.1:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
scheduler@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
Expand Down