From 42288f9890e943538fc701221fd1261b742023f9 Mon Sep 17 00:00:00 2001 From: Yen-Wei Liu Date: Thu, 22 Aug 2019 01:42:29 -0700 Subject: [PATCH 1/4] Dynamically prefix deprecated lifecycle methods with 'UNSAFE_' depending on React version Bump React version --- modules/ContextUtils.js | 9 ++++++--- modules/Router.js | 6 ++++-- package.json | 4 ++-- yarn.lock | 27 +++++++++++++-------------- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/modules/ContextUtils.js b/modules/ContextUtils.js index 5ebe06b480..c80ec511b9 100644 --- a/modules/ContextUtils.js +++ b/modules/ContextUtils.js @@ -1,3 +1,4 @@ +import React from 'react' import PropTypes from 'prop-types' // Works around issues with context updates failing to propagate. @@ -14,6 +15,8 @@ function makeContextName(name) { return `@@contextSubscriber/${name}` } +const prefixUnsafeLicycleMethods = parseFloat(React.version) >= 16.3 + export function ContextProvider(name) { const contextName = makeContextName(name) const listenersKey = `${contextName}/listeners` @@ -34,12 +37,12 @@ export function ContextProvider(name) { } }, - componentWillMount() { + [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillMount`]() { this[listenersKey] = [] this[eventIndexKey] = 0 }, - componentWillReceiveProps() { + [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`]() { this[eventIndexKey]++ }, @@ -93,7 +96,7 @@ export function ContextSubscriber(name) { ) }, - componentWillReceiveProps() { + [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`]() { if (!this.context[contextName]) { return } diff --git a/modules/Router.js b/modules/Router.js index 4082ec1419..71e34bcfe9 100644 --- a/modules/Router.js +++ b/modules/Router.js @@ -23,6 +23,8 @@ const propTypes = { matchContext: object } +const prefixUnsafeLicycleMethods = parseFloat(React.version) >= 16.3 + /** * A is a high-level API for automatically setting up * a router that renders a with all the props @@ -91,7 +93,7 @@ const Router = createReactClass({ ) }, - componentWillMount() { + [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillMount`]() { this.transitionManager = this.createTransitionManager() this.router = this.createRouterObject(this.state) @@ -108,7 +110,7 @@ const Router = createReactClass({ }, /* istanbul ignore next: sanity check */ - componentWillReceiveProps(nextProps) { + [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`](nextProps) { warning( nextProps.history === this.props.history, 'You cannot change ; it will be ignored' diff --git a/package.json b/package.json index fa93fb06b3..e9a7f96270 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 66894113bd..b2647d1278 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -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" From 8bf85217c790529eb9c13a14658a14403a699bac Mon Sep 17 00:00:00 2001 From: Yen-Wei Liu Date: Thu, 22 Aug 2019 13:49:29 -0700 Subject: [PATCH 2/4] Update transform of unsafe lifecycle methods --- modules/ContextUtils.js | 26 ++++++++++++++++++++------ modules/Router.js | 15 ++++++++++++--- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/modules/ContextUtils.js b/modules/ContextUtils.js index c80ec511b9..d491c52f6e 100644 --- a/modules/ContextUtils.js +++ b/modules/ContextUtils.js @@ -15,7 +15,7 @@ function makeContextName(name) { return `@@contextSubscriber/${name}` } -const prefixUnsafeLicycleMethods = parseFloat(React.version) >= 16.3 +const prefixUnsafeLifeycleMethods = parseFloat(React.version) >= 16.3 export function ContextProvider(name) { const contextName = makeContextName(name) @@ -23,7 +23,7 @@ export function ContextProvider(name) { const eventIndexKey = `${contextName}/eventIndex` const subscribeKey = `${contextName}/subscribe` - return { + const config = { childContextTypes: { [contextName]: contextProviderShape.isRequired }, @@ -37,12 +37,12 @@ export function ContextProvider(name) { } }, - [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillMount`]() { + componentWillMount() { this[listenersKey] = [] this[eventIndexKey] = 0 }, - [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`]() { + componentWillReceiveProps() { this[eventIndexKey]++ }, @@ -63,6 +63,14 @@ export function ContextProvider(name) { } } } + + if (prefixUnsafeLifeycleMethods) { + config.UNSAFE_componentWillMount = config.componentWillMount + config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps + delete config.componentWillMount + delete config.componentWillReceiveProps + } + return config } export function ContextSubscriber(name) { @@ -71,7 +79,7 @@ export function ContextSubscriber(name) { const handleContextUpdateKey = `${contextName}/handleContextUpdate` const unsubscribeKey = `${contextName}/unsubscribe` - return { + const config = { contextTypes: { [contextName]: contextProviderShape }, @@ -96,7 +104,7 @@ export function ContextSubscriber(name) { ) }, - [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`]() { + componentWillReceiveProps() { if (!this.context[contextName]) { return } @@ -121,4 +129,10 @@ export function ContextSubscriber(name) { } } } + + if (prefixUnsafeLifeycleMethods) { + config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps + delete config.componentWillReceiveProps + } + return config } diff --git a/modules/Router.js b/modules/Router.js index 71e34bcfe9..aa2d29a7a0 100644 --- a/modules/Router.js +++ b/modules/Router.js @@ -23,7 +23,7 @@ const propTypes = { matchContext: object } -const prefixUnsafeLicycleMethods = parseFloat(React.version) >= 16.3 +const prefixUnsafeLifeycleMethods = parseFloat(React.version) >= 16.3 /** * A is a high-level API for automatically setting up @@ -93,7 +93,8 @@ const Router = createReactClass({ ) }, - [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillMount`]() { + // this method will be updated to UNSAFE_componentWillMount below if supported + componentWillMount() { this.transitionManager = this.createTransitionManager() this.router = this.createRouterObject(this.state) @@ -109,8 +110,9 @@ const Router = createReactClass({ }) }, + // this method will be updated to UNSAFE_componentWillReceiveProps below if supported /* istanbul ignore next: sanity check */ - [`${prefixUnsafeLicycleMethods && 'UNSAFE_'}componentWillReceiveProps`](nextProps) { + componentWillReceiveProps(nextProps) { warning( nextProps.history === this.props.history, 'You cannot change ; it will be ignored' @@ -152,4 +154,11 @@ const Router = createReactClass({ }) +if (prefixUnsafeLifeycleMethods) { + 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 From a7e642c9799ec32f350044eddb315a3c7c7d3213 Mon Sep 17 00:00:00 2001 From: Yen-Wei Liu Date: Thu, 22 Aug 2019 13:51:42 -0700 Subject: [PATCH 3/4] update comments --- modules/ContextUtils.js | 3 +++ modules/Router.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/modules/ContextUtils.js b/modules/ContextUtils.js index d491c52f6e..9092b363a7 100644 --- a/modules/ContextUtils.js +++ b/modules/ContextUtils.js @@ -37,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]++ }, @@ -104,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 diff --git a/modules/Router.js b/modules/Router.js index aa2d29a7a0..114fd1b5e0 100644 --- a/modules/Router.js +++ b/modules/Router.js @@ -93,7 +93,7 @@ const Router = createReactClass({ ) }, - // this method will be updated to UNSAFE_componentWillMount below if supported + // 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) @@ -110,7 +110,7 @@ const Router = createReactClass({ }) }, - // this method will be updated to UNSAFE_componentWillReceiveProps below if supported + // this method will be updated to UNSAFE_componentWillReceiveProps below for React versions >= 16.3 /* istanbul ignore next: sanity check */ componentWillReceiveProps(nextProps) { warning( From 628612ae050362a7557bb6fcad0d34e6786f590e Mon Sep 17 00:00:00 2001 From: Yen-Wei Liu Date: Fri, 23 Aug 2019 10:00:11 -0700 Subject: [PATCH 4/4] fix typo --- modules/ContextUtils.js | 6 +++--- modules/Router.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/ContextUtils.js b/modules/ContextUtils.js index 9092b363a7..cbfec30572 100644 --- a/modules/ContextUtils.js +++ b/modules/ContextUtils.js @@ -15,7 +15,7 @@ function makeContextName(name) { return `@@contextSubscriber/${name}` } -const prefixUnsafeLifeycleMethods = parseFloat(React.version) >= 16.3 +const prefixUnsafeLifecycleMethods = parseFloat(React.version) >= 16.3 export function ContextProvider(name) { const contextName = makeContextName(name) @@ -66,7 +66,7 @@ export function ContextProvider(name) { } } - if (prefixUnsafeLifeycleMethods) { + if (prefixUnsafeLifecycleMethods) { config.UNSAFE_componentWillMount = config.componentWillMount config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps delete config.componentWillMount @@ -133,7 +133,7 @@ export function ContextSubscriber(name) { } } - if (prefixUnsafeLifeycleMethods) { + if (prefixUnsafeLifecycleMethods) { config.UNSAFE_componentWillReceiveProps = config.componentWillReceiveProps delete config.componentWillReceiveProps } diff --git a/modules/Router.js b/modules/Router.js index 114fd1b5e0..300fcf31f5 100644 --- a/modules/Router.js +++ b/modules/Router.js @@ -23,7 +23,7 @@ const propTypes = { matchContext: object } -const prefixUnsafeLifeycleMethods = parseFloat(React.version) >= 16.3 +const prefixUnsafeLifecycleMethods = parseFloat(React.version) >= 16.3 /** * A is a high-level API for automatically setting up @@ -154,7 +154,7 @@ const Router = createReactClass({ }) -if (prefixUnsafeLifeycleMethods) { +if (prefixUnsafeLifecycleMethods) { Router.prototype.UNSAFE_componentWillReceiveProps = Router.prototype.componentWillReceiveProps Router.prototype.UNSAFE_componentWillMount = Router.prototype.componentWillMount delete Router.prototype.componentWillReceiveProps