terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Apply sideEffect at DidMount on the client side (#5068)

Browse source 
Fixes #5038

The problem with `constructor` is that it doesn't have `context` yet when being called. It's also considered unsafe to add a side-effect on constructor except when server-rendering
This commit is contained in:
Tim Neutkens 2018-09-02 19:18:20 +02:00 committed by GitHub
parent 33067a5862
commit a0aaa933de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
lib/side-effect.js
View file

@ -58,10 +58,15 @@ export default function withSideEffect (reduceComponentsToState, handleStateChan
constructor (props) {
super(props)
if (!SideEffect.canUseDOM) {
mountedInstances.add(this)
emitChange(this)
}
}
componentDidMount () {
mountedInstances.add(this)
emitChange(this)
}
componentDidUpdate () {
emitChange(this)
}

24
test/integration/basic/pages/dynamic/head.js Normal file
View file

@ -0,0 +1,24 @@
import dynamic from 'next/dynamic'
import Head from 'next/head'
const Test = dynamic({
loader: async () => {
// component
return () => {
return <div className='dynamic-style'>
<Head>
<style dangerouslySetInnerHTML={{ __html: `
.dynamic-style {
background-color: green;
height: 200px;
}
`}} />
</Head>
test
</div>
}
},
ssr: false
})
export default Test

16
test/integration/basic/test/dynamic.js
View file

@ -27,6 +27,22 @@ export default (context, render) => {
}
}
})
it('should render the component Head content', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/dynamic/head')
await check(() => browser.elementByCss('body').text(), /test/)
const backgroundColor = await browser.elementByCss('.dynamic-style').getComputedCss('background-color')
const height = await browser.elementByCss('.dynamic-style').getComputedCss('height')
expect(height).toBe('200px')
expect(backgroundColor).toBe('rgba(0, 128, 0, 1)')
} finally {
if (browser) {
browser.close()
}
}
})
})
describe('ssr:false option', () => {
it('Should render loading on the server side', async () => {