1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/lib/side-effect.js
Tim Neutkens a0aaa933de
Apply sideEffect at DidMount on the client side (#5068)
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
2018-09-02 19:18:20 +02:00

87 lines
2.4 KiB
JavaScript

import React, { Component } from 'react'
import { getDisplayName } from './utils'
export default function withSideEffect (reduceComponentsToState, handleStateChangeOnClient, mapStateOnServer) {
if (typeof reduceComponentsToState !== 'function') {
throw new Error('Expected reduceComponentsToState to be a function.')
}
if (typeof handleStateChangeOnClient !== 'function') {
throw new Error('Expected handleStateChangeOnClient to be a function.')
}
if (typeof mapStateOnServer !== 'undefined' && typeof mapStateOnServer !== 'function') {
throw new Error('Expected mapStateOnServer to either be undefined or a function.')
}
return function wrap (WrappedComponent) {
if (typeof WrappedComponent !== 'function') {
throw new Error('Expected WrappedComponent to be a React component.')
}
const mountedInstances = new Set()
let state
function emitChange (component) {
state = reduceComponentsToState([...mountedInstances])
if (SideEffect.canUseDOM) {
handleStateChangeOnClient.call(component, state)
} else if (mapStateOnServer) {
state = mapStateOnServer(state)
}
}
class SideEffect extends Component {
// Expose canUseDOM so tests can monkeypatch it
static canUseDOM = typeof window !== 'undefined'
static contextTypes = WrappedComponent.contextTypes
// Try to use displayName of wrapped component
static displayName = `SideEffect(${getDisplayName(WrappedComponent)})`
static peek () {
return state
}
static rewind () {
if (SideEffect.canUseDOM) {
throw new Error('You may only call rewind() on the server. Call peek() to read the current state.')
}
const recordedState = state
state = undefined
mountedInstances.clear()
return recordedState
}
constructor (props) {
super(props)
if (!SideEffect.canUseDOM) {
mountedInstances.add(this)
emitChange(this)
}
}
componentDidMount () {
mountedInstances.add(this)
emitChange(this)
}
componentDidUpdate () {
emitChange(this)
}
componentWillUnmount () {
mountedInstances.delete(this)
emitChange(this)
}
render () {
return <WrappedComponent>{ this.props.children }</WrappedComponent>
}
}
return SideEffect
}
}