archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove old UNSAFE_ lifecycle methods (#5020)

Browse source 
~I am not sure if this is a valid fix yet, but I was going to let CI run the tests for me. I'll close and look into it if the build fails.~

Let me know if this will cause issues, but I don't think it should. The React docs recommends moving `componentWillMount` logic into the constructor
This commit is contained in:
Michael Fix 2018-08-25 08:26:11 -07:00 committed by Tim Neutkens
parent 4c6ec18d89
commit 9532cc1256
6 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
lib/side-effect.js
View file

@ -1,5 +1,4 @@
import React, { Component } from 'react'
import {polyfill} from 'react-lifecycles-compat'
import { getDisplayName } from './utils'
export default function withSideEffect (reduceComponentsToState, handleStateChangeOnClient, mapStateOnServer) {
@ -57,6 +56,12 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
return recordedState
}
constructor (props) {
super(props)
mountedInstances.add(this)
emitChange(this)
}
componentDidUpdate () {
emitChange(this)
}
@ -66,20 +71,11 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
emitChange(this)
}
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount () {
mountedInstances.add(this)
emitChange(this)
}
render () {
return <WrappedComponent>{ this.props.children }</WrappedComponent>
}
}
// Make UNSAFE_ compatible with version of React under 16.3
polyfill(SideEffect)
return SideEffect
}
}

1
package.json
View file

@ -96,7 +96,6 @@
"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",

15
test/integration/basic/pages/nav/head-1.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
export default (props) => <div id='head-1'>
<Head>
<meta
name='description'
content='Head One'
/>
</Head>
<Link href='/nav/head-2'>
<a id='to-head-2'>to head 2</a>
</Link>
</div>

15
test/integration/basic/pages/nav/head-2.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
export default (props) => <div id='head-2'>
<Head>
<meta
name='description'
content='Head Two'
/>
</Head>
<Link href='/nav/head-1'>
<a id='to-head-1'>to head 1</a>
</Link>
</div>

18
test/integration/basic/test/client-navigation.js
View file

@ -692,5 +692,23 @@ export default (context, render) => {
browser.close()
})
})
describe('updating head while client routing', () => {
it('should update head during client routing', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/nav/head-1')
expect(await browser.elementByCss('meta[name="description"]').getAttribute('content')).toBe('Head One')
await browser.elementByCss('#to-head-2').click().waitForElementByCss('#head-2')
expect(await browser.elementByCss('meta[name="description"]').getAttribute('content')).toBe('Head Two')
await browser.elementByCss('#to-head-1').click().waitForElementByCss('#head-1')
expect(await browser.elementByCss('meta[name="description"]').getAttribute('content')).toBe('Head One')
} finally {
if (browser) {
browser.close()
}
}
})
})
})
}

4
yarn.lock
View file

@ -6481,10 +6481,6 @@ 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"