Run rename-unsafe-lifecycles as preparation for React 17 (#4907)

https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles

lib/link.js

@@ -2,12 +2,23 @@
 
 import { resolve, format, parse } from 'url'
 import React, { Component, Children } from 'react'
+import {polyfill} from 'react-lifecycles-compat'
 import PropTypes from 'prop-types'
 import exact from 'prop-types-exact'
 import Router, { _rewriteUrlForNextExport } from './router'
 import { warn, execOnce, getLocationOrigin } from './utils'
 
-export default class Link extends Component {
+function isLocal (href) {
+  const url = parse(href, false, true)
+  const origin = parse(getLocationOrigin(), false, true)
+
+  return !url.host ||
+    (url.protocol === origin.protocol && url.host === origin.host)
+}
+
+const warnLink = execOnce(warn)
+
+class Link extends Component {
   constructor (props, ...rest) {
     super(props, ...rest)
     this.formatUrls(props)
@@ -35,7 +46,8 @@ export default class Link extends Component {
     ]).isRequired
   })
 
-  componentWillReceiveProps (nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps (nextProps) {
     this.formatUrls(nextProps)
   }
 
@@ -157,12 +169,6 @@ export default class Link extends Component {
   }
 }
 
-function isLocal (href) {
+// Make UNSAFE_ compatible with version of React under 16.3
-  const url = parse(href, false, true)
+polyfill(Link)
-  const origin = parse(getLocationOrigin(), false, true)
+export default Link
-
-  return !url.host ||
-    (url.protocol === origin.protocol && url.host === origin.host)
-}
-
-const warnLink = execOnce(warn)

lib/side-effect.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import {polyfill} from 'react-lifecycles-compat'
 import { getDisplayName } from './utils'
 
 export default function withSideEffect (reduceComponentsToState, handleStateChangeOnClient, mapStateOnServer) {
@@ -56,7 +57,8 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
         return recordedState
       }
 
-      componentWillMount () {
+      // eslint-disable-next-line camelcase
+      UNSAFE_componentWillMount () {
         mountedInstances.add(this)
         emitChange(this)
       }
@@ -75,6 +77,9 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
       }
     }
 
+    // Make UNSAFE_ compatible with version of React under 16.3
+    polyfill(SideEffect)
+
     return SideEffect
   }
 }

package.json

@@ -89,6 +89,7 @@
     "prop-types": "15.6.0",
     "prop-types-exact": "1.1.1",
     "react-error-overlay": "4.0.0",
+    "react-lifecycles-compat": "3.0.4",
     "react-loadable": "5.4.0",
     "recursive-copy": "2.0.6",
     "resolve": "1.5.0",

test/integration/basic/pages/nav/url-prop-change.js

@@ -10,7 +10,8 @@ export default class UrlPropChange extends React.Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps (nextProps) {
     this.setState(() => {
       return {
         previousUrl: this.props.url,

test/integration/basic/pages/stateful.js

@@ -8,7 +8,8 @@ export default class Statefull extends Component {
     this.state = { answer: null }
   }
 
-  componentWillMount () {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount () {
     this.setState({ answer: 42 })
   }
 

yarn.lock

@@ -6553,6 +6553,10 @@ react-error-overlay@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-lifecycles-compat@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-loadable@5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.4.0.tgz#3b6b7d51121a7868fd155be848a36e02084742c9"