import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill';
import loopProtect from 'loop-protect';
const startTag = '@fs-';
function getAllScriptOffsets(htmlFile) {
const offs = [];
let found = true;
let lastInd = 0;
let ind = 0;
let endFilenameInd = 0;
let filename = '';
let lineOffset = 0;
while (found) {
ind = htmlFile.indexOf(startTag, lastInd);
if (ind === -1) {
found = false;
} else {
endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3);
filename = htmlFile.substring(ind + startTag.length, endFilenameInd);
lineOffset = htmlFile.substring(0, ind).split('\n').length;
offs.push([lineOffset, filename]);
lastInd = ind + 1;
}
}
return offs;
}
function hijackConsoleLogsScript() {
const s = ``;
return s;
}
function hijackConsoleErrorsScript(offs) {
const s = ``;
return s;
}
class PreviewFrame extends React.Component {
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
}
if (this.props.dispatchConsoleEvent) {
window.addEventListener('message', (msg) => {
if (msg.data.source === 'sketch') {
this.props.dispatchConsoleEvent(msg);
}
});
}
}
componentDidUpdate(prevProps) {
// if sketch starts or stops playing, want to rerender
if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch();
return;
}
// if the user explicitly clicks on the play button
if (this.props.isPlaying && this.props.previewIsRefreshing) {
this.renderSketch();
return;
}
// small bug - if autorefresh is on, and the usr changes files
// in the sketch, preview will reload
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
}
clearPreview() {
const doc = ReactDOM.findDOMNode(this);
doc.srcDoc = '';
}
injectLocalFiles() {
loopProtect.alias = 'protect';
let htmlFile = this.props.htmlFile.content;
let scriptOffs = [];
// have to build the array manually because the spread operator is only
// one level down...
htmlFile = hijackConsoleLogsScript() + htmlFile;
const mediaFiles = this.props.files.filter(file => file.url);
const jsFiles = [];
this.props.jsFiles.forEach(jsFile => {
const newJSFile = { ...jsFile };
let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
const jsFileRegex = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json)('|")$/i;
jsFileStrings = jsFileStrings || [];
jsFileStrings.forEach(jsFileString => {
if (jsFileString.match(jsFileRegex)) {
const filePath = jsFileString.substr(1, jsFileString.length - 2);
const filePathArray = filePath.split('/');
const fileName = filePathArray[filePathArray.length - 1];
mediaFiles.forEach(file => {
if (file.name === fileName) {
newJSFile.content = newJSFile.content.replace(filePath, file.blobURL); // eslint-disable-line
}
});
}
});
jsFiles.push(loopProtect(newJSFile));
});
jsFiles.forEach(jsFile => {
const fileName = escapeStringRegexp(jsFile.name);
const fileRegex = new RegExp(`([\s\S]*?)<\/script>`, 'gmi');
const replacementString = ``;
htmlFile = htmlFile.replace(fileRegex, replacementString);
});
this.props.cssFiles.forEach(cssFile => {
const fileName = escapeStringRegexp(cssFile.name);
const fileRegex = new RegExp(``, 'gmi');
htmlFile = htmlFile.replace(fileRegex, ``);
});
if (this.props.textOutput || this.props.isTextOutputPlaying) {
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';
htmlHeadContents += '\n';
htmlHeadContents += '\n';
htmlHeadContents += '';
htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`);
}
scriptOffs = getAllScriptOffsets(htmlFile);
htmlFile += hijackConsoleErrorsScript(JSON.stringify(scriptOffs));
return htmlFile;
}
renderSketch() {
const doc = ReactDOM.findDOMNode(this);
if (this.props.isPlaying && !this.props.infiniteLoop) {
srcDoc.set(doc, this.injectLocalFiles());
this.props.endSketchRefresh();
} 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 (
);
}
}
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
isTextOutputPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
content: PropTypes.string,
htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired
}),
jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
dispatchConsoleEvent: PropTypes.func,
children: PropTypes.element,
infiniteLoop: PropTypes.bool.isRequired,
resetInfiniteLoops: PropTypes.func.isRequired,
autorefresh: PropTypes.bool.isRequired,
endSketchRefresh: PropTypes.func.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired,
};
export default PreviewFrame;