import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; import srcDoc from 'srcdoc-polyfill'; class PreviewFrame extends React.Component { componentDidMount() { this.hijackConsole(); if (this.props.isPlaying) { this.renderFrameContents(); } } componentDidUpdate(prevProps) { if (this.props.isPlaying !== prevProps.isPlaying) { this.renderSketch(); } if (this.props.isPlaying && this.props.content !== prevProps.content) { this.renderSketch(); } } componentWillUnmount() { ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body); } clearPreview() { const doc = ReactDOM.findDOMNode(this); doc.srcDoc = ''; } injectLocalFiles() { let htmlFile = this.props.htmlFile.content; this.props.jsFiles.forEach(jsFile => { const fileName = escapeStringRegexp(jsFile.name); const fileRegex = new RegExp(`([\s\S]*?)<\/script>`, 'gmi'); htmlFile = htmlFile.replace(fileRegex, ``); }); this.props.cssFiles.forEach(cssFile => { const fileName = escapeStringRegexp(cssFile.name); const fileRegex = new RegExp(``, 'gmi'); htmlFile = htmlFile.replace(fileRegex, ``); }); // const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); // const headRegex = new RegExp('head', 'i'); // let htmlHeadContents = htmlHead[0].split(headRegex)[1]; // htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); // htmlHeadContents += '\n'; // htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); return htmlFile; } hijackConsole() { const iframeWindow = ReactDOM.findDOMNode(this).contentWindow; const originalConsole = iframeWindow.console; iframeWindow.console = {}; const methods = [ 'debug', 'clear', 'error', 'info', 'log', 'warn' ]; methods.forEach((method) => { iframeWindow.console[method] = (...theArgs) => { originalConsole[method].apply(originalConsole, theArgs); // TO DO: do something with the arguments // window.alert(JSON.stringify(theArgs)); }; }); } renderSketch() { const doc = ReactDOM.findDOMNode(this); if (this.props.isPlaying) { // TODO add polyfill for this // doc.srcdoc = this.injectLocalFiles(); srcDoc.set(doc, this.injectLocalFiles()); } else { // doc.srcdoc = ''; srcDoc.set(doc, ''); doc.contentWindow.document.open(); doc.contentWindow.document.write(''); doc.contentWindow.document.close(); } } renderFrameContents() { const doc = ReactDOM.findDOMNode(this).contentDocument; if (doc.readyState === 'complete') { this.renderSketch(); } else { setTimeout(this.renderFrameContents, 0); } } render() { return ( ); } } PreviewFrame.propTypes = { isPlaying: PropTypes.bool.isRequired, head: PropTypes.object.isRequired, content: PropTypes.string.isRequired, htmlFile: PropTypes.shape({ content: PropTypes.string.isRequired }), jsFiles: PropTypes.array.isRequired, cssFiles: PropTypes.array.isRequired }; export default PreviewFrame;