| 1 |
/** |
| 2 |
* NOTE: This is a fork of the original ServerSideRenderX component. |
| 3 |
* You can find more about that project here: https://github.com/dgwyer/server-side-render-x |
| 4 |
* |
| 5 |
* Changes: |
| 6 |
* - some minor clean up was done to remove references to variables which were never actually used. |
| 7 |
*/ |
| 8 |
|
| 9 |
/** |
| 10 |
* External dependencies |
| 11 |
*/ |
| 12 |
import {isEqual, debounce} from 'lodash'; |
| 13 |
|
| 14 |
/** |
| 15 |
* WordPress dependencies |
| 16 |
*/ |
| 17 |
const {Component, RawHTML, Fragment} = wp.element; |
| 18 |
import { __ } from '@wordpress/i18n' |
| 19 |
const apiFetch = wp.apiFetch; |
| 20 |
const {addQueryArgs} = wp.url; |
| 21 |
const {Placeholder} = wp.components; |
| 22 |
|
| 23 |
export function rendererPath(block, attributes = null, urlQueryArgs = {}) { |
| 24 |
return addQueryArgs(`/wp/v2/block-renderer/${block}`, { |
| 25 |
context: 'edit', |
| 26 |
...(null !== attributes ? {attributes} : {}), |
| 27 |
...urlQueryArgs, |
| 28 |
}); |
| 29 |
} |
| 30 |
|
| 31 |
export class ServerSideRenderX extends Component { |
| 32 |
constructor(props) { |
| 33 |
super(props); |
| 34 |
this.state = { |
| 35 |
response: null, |
| 36 |
prevResponse: null, |
| 37 |
}; |
| 38 |
} |
| 39 |
|
| 40 |
componentDidMount() { |
| 41 |
this.isStillMounted = true; |
| 42 |
this.fetch(this.props); |
| 43 |
// Only debounce once the initial fetch occurs to ensure that the first |
| 44 |
// renders show data as soon as possible. |
| 45 |
this.fetch = debounce(this.fetch, 500); |
| 46 |
} |
| 47 |
|
| 48 |
componentWillUnmount() { |
| 49 |
this.isStillMounted = false; |
| 50 |
} |
| 51 |
|
| 52 |
componentDidUpdate(prevProps) { |
| 53 |
if (!isEqual(prevProps, this.props)) { |
| 54 |
this.fetch(this.props); |
| 55 |
} |
| 56 |
} |
| 57 |
|
| 58 |
fetch(props) { |
| 59 |
if (!this.isStillMounted) { |
| 60 |
return; |
| 61 |
} |
| 62 |
if (null !== this.state.response) { |
| 63 |
this.setState((state) => ({ |
| 64 |
response: null, |
| 65 |
prevResponse: state.response, |
| 66 |
})); |
| 67 |
} |
| 68 |
const {block, attributes = null, urlQueryArgs = {}} = props; |
| 69 |
|
| 70 |
const path = rendererPath(block, attributes, urlQueryArgs); |
| 71 |
// Store the latest fetch request so that when we process it, we can |
| 72 |
// check if it is the current request, to avoid race conditions on slow networks. |
| 73 |
const fetchRequest = (this.currentFetchRequest = apiFetch({path}) |
| 74 |
.then((response) => { |
| 75 |
if (this.isStillMounted && fetchRequest === this.currentFetchRequest && response) { |
| 76 |
this.setState({response: response.rendered}); |
| 77 |
} |
| 78 |
}) |
| 79 |
.catch((error) => { |
| 80 |
if (this.isStillMounted && fetchRequest === this.currentFetchRequest) { |
| 81 |
this.setState({ |
| 82 |
response: { |
| 83 |
error: true, |
| 84 |
errorMsg: error.message, |
| 85 |
}, |
| 86 |
}); |
| 87 |
} |
| 88 |
})); |
| 89 |
return fetchRequest; |
| 90 |
} |
| 91 |
|
| 92 |
render() { |
| 93 |
const {right, top, unit} = this.props.spinnerLocation; |
| 94 |
const response = this.state.response; |
| 95 |
const prevResponse = this.state.prevResponse; |
| 96 |
let prevResponseHTML = ''; |
| 97 |
if (prevResponse !== null) { |
| 98 |
prevResponseHTML = `<div style="position:relative;"><div style="position:absolute;right:${right}${unit};top:${top}${unit};z-index:1"><span class="components-spinner"></span></div>${prevResponse}</div>`; |
| 99 |
} |
| 100 |
|
| 101 |
const { |
| 102 |
className, |
| 103 |
EmptyResponsePlaceholder = ({className}) => ( |
| 104 |
<Placeholder className={className}>{__('Block rendered as empty.')}</Placeholder> |
| 105 |
), |
| 106 |
ErrorResponsePlaceholder = ({response, className}) => { |
| 107 |
const errorMessage = sprintf( |
| 108 |
// translators: %s: error message describing the problem |
| 109 |
__('Error loading block: %s'), |
| 110 |
response.errorMsg |
| 111 |
); |
| 112 |
return <Placeholder className={className}>{errorMessage}</Placeholder>; |
| 113 |
}, |
| 114 |
} = this.props; |
| 115 |
|
| 116 |
if (response === '') { |
| 117 |
return <EmptyResponsePlaceholder response={response} {...this.props} />; |
| 118 |
} else if (!response) { |
| 119 |
return ( |
| 120 |
<Fragment> |
| 121 |
<RawHTML key="html" className={className}> |
| 122 |
{prevResponseHTML} |
| 123 |
</RawHTML> |
| 124 |
</Fragment> |
| 125 |
); |
| 126 |
} else if (response.error) { |
| 127 |
return <ErrorResponsePlaceholder response={response} {...this.props} />; |
| 128 |
} |
| 129 |
|
| 130 |
return ( |
| 131 |
<RawHTML key="html" className={className}> |
| 132 |
{response} |
| 133 |
</RawHTML> |
| 134 |
); |
| 135 |
} |
| 136 |
} |
| 137 |
|
| 138 |
export default ServerSideRenderX; |
| 139 |
|
