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
Michael Fix 9532cc1256 Remove old UNSAFE_ lifecycle methods (#5020)
~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
2018-08-25 17:26:11 +02:00

82 lines
2.2 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)
mountedInstances.add(this)
emitChange(this)
}
componentDidUpdate () {
emitChange(this)
}
componentWillUnmount () {
mountedInstances.delete(this)
emitChange(this)
}
render () {
return <WrappedComponent>{ this.props.children }</WrappedComponent>
}
}
return SideEffect
}
}