mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
![Michael Fix](/assets/img/avatar_default.png)
~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
82 lines
2.2 KiB
JavaScript
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
|
|
}
|
|
}
|