import React from 'react'; import ReactDOM from 'react-dom'; class PreviewFrame extends React.Component { componentDidMount() { if (this.props.isPlaying) { this.renderFrameContents(); } } renderFrameContents() { let doc = ReactDOM.findDOMNode(this).contentDocument; if(doc.readyState === 'complete') { renderSketch(); } else { setTimeout(this.renderFrameContents, 0); } } renderSketch() { let doc = ReactDOM.findDOMNode(this).contentDocument; this.clearPreview(); ReactDOM.render(this.props.head, doc.head); let p5Script = doc.createElement('script'); p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js'); doc.body.appendChild(p5Script); let sketchScript = doc.createElement('script'); sketchScript.textContent = this.props.content; doc.body.appendChild(sketchScript); } clearPreview() { let doc = ReactDOM.findDOMNode(this).contentDocument; doc.write(''); doc.close(); } componentDidUpdate(prevProps, prevState) { if (this.props.isPlaying != prevProps.isPlaying) { if (this.props.isPlaying) { this.renderSketch(); } else { this.clearPreview(); } } if (this.props.isPlaying && this.props.content != prevProps.content) { this.renderSketch(); } } componentWillUnmount() { ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body); } render() { return ; } } export default PreviewFrame;