import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import escapeStringRegexp from 'escape-string-regexp'; import srcDoc from 'srcdoc-polyfill'; const hijackConsoleScript = ``; class PreviewFrame extends React.Component { componentDidMount() { if (this.props.isPlaying) { this.renderFrameContents(); } window.addEventListener('message', (msg) => { if (msg.data.source === 'sketch') { this.props.dispatchConsoleEvent(msg); } }); } 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`); htmlFile += hijackConsoleScript; return htmlFile; } renderSketch() { const doc = ReactDOM.findDOMNode(this); if (this.props.isPlaying) { srcDoc.set(doc, this.injectLocalFiles()); } else { doc.srcdoc = ''; srcDoc.set(doc, ' '); } } renderFrameContents() { const doc = ReactDOM.findDOMNode(this).contentDocument; if (doc.readyState === 'complete') { this.renderSketch(); } else { setTimeout(this.renderFrameContents, 0); } } render() { return (