p5.js-web-editor/client/modules/IDE/components/PreviewFrame.js

316 lines
9.7 KiB
JavaScript
Raw Normal View History

2016-06-27 19:47:48 +00:00
import React, { PropTypes } from 'react';
2016-06-23 22:29:55 +00:00
import ReactDOM from 'react-dom';
2016-07-11 19:22:29 +00:00
import escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill';
2016-06-23 22:29:55 +00:00
2016-10-05 17:58:45 +00:00
import loopProtect from 'loop-protect';
import { getBlobUrl } from '../actions/files';
2016-08-28 13:52:57 +00:00
const startTag = '@fs-';
2016-10-25 22:38:20 +00:00
const MEDIA_FILE_REGEX = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json|txt|csv|svg|obj|mp4|ogg|webm|mov)('|")$/i;
const STRING_REGEX = /(['"])((\\\1|.)*?)\1/gm;
2016-08-28 13:52:57 +00:00
2016-08-27 17:54:20 +00:00
function getAllScriptOffsets(htmlFile) {
2016-08-28 13:52:57 +00:00
const offs = [];
let found = true;
let lastInd = 0;
let ind = 0;
let endFilenameInd = 0;
let filename = '';
let lineOffset = 0;
2016-08-27 17:54:20 +00:00
while (found) {
2016-08-28 13:52:57 +00:00
ind = htmlFile.indexOf(startTag, lastInd);
if (ind === -1) {
2016-08-27 17:54:20 +00:00
found = false;
} else {
2016-08-28 13:52:57 +00:00
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]);
2016-08-27 17:54:20 +00:00
lastInd = ind + 1;
}
}
2016-08-27 17:54:20 +00:00
return offs;
}
function hijackConsoleLogsScript() {
const s = `<script>
var iframeWindow = window;
var originalConsole = iframeWindow.console;
iframeWindow.console = {};
var methods = [
'debug', 'clear', 'error', 'info', 'log', 'warn'
];
var consoleBuffer = [];
var LOGWAIT = 500;
methods.forEach( function(method) {
iframeWindow.console[method] = function() {
originalConsole[method].apply(originalConsole, arguments);
var args = Array.from(arguments);
args = args.map(function(i) {
// catch objects
return (typeof i === 'string') ? i : JSON.stringify(i);
});
consoleBuffer.push({
method: method,
arguments: args,
source: 'sketch'
});
};
});
setInterval(function() {
if (consoleBuffer.length > 0) {
window.parent.postMessage(consoleBuffer, '*');
consoleBuffer.length = 0;
}
}, LOGWAIT);
</script>`;
return s;
}
function hijackConsoleErrorsScript(offs) {
2016-08-28 13:52:57 +00:00
const s = `<script>
2016-08-27 17:54:20 +00:00
function getScriptOff(line) {
2016-08-28 13:52:57 +00:00
var offs = ${offs};
2016-08-27 17:54:20 +00:00
var l = 0;
var file = '';
for (var i=0; i<offs.length; i++) {
var n = offs[i][0];
if (n < line && n > l) {
l = n;
file = offs[i][1];
}
}
return [line - l, file];
}
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
window.onerror = function (msg, url, lineNumber, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
var data = {};
if (string.indexOf(substring) !== -1){
data = 'Script Error: See Browser Console for Detail';
} else {
var fileInfo = getScriptOff(lineNumber);
data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
}
2016-10-08 23:18:38 +00:00
window.parent.postMessage([{
method: 'error',
arguments: data,
source: 'sketch'
2016-10-08 23:18:38 +00:00
}], '*');
return false;
};
</script>`;
2016-08-28 13:52:57 +00:00
return s;
}
2016-06-23 22:29:55 +00:00
class PreviewFrame extends React.Component {
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
}
2016-08-17 22:13:17 +00:00
if (this.props.dispatchConsoleEvent) {
window.addEventListener('message', (msg) => {
this.props.dispatchConsoleEvent(msg);
2016-08-17 22:13:17 +00:00
});
}
2016-06-23 22:29:55 +00:00
}
2016-06-27 19:47:48 +00:00
componentDidUpdate(prevProps) {
// if sketch starts or stops playing, want to rerender
2016-06-27 19:47:48 +00:00
if (this.props.isPlaying !== prevProps.isPlaying) {
2016-07-11 19:22:29 +00:00
this.renderSketch();
2016-09-28 19:20:54 +00:00
return;
2016-06-27 19:47:48 +00:00
}
2016-09-28 22:05:14 +00:00
// if the user explicitly clicks on the play button
if (this.props.isPlaying && this.props.previewIsRefreshing) {
2016-06-27 19:47:48 +00:00
this.renderSketch();
2016-09-28 22:05:14 +00:00
return;
2016-06-27 19:47:48 +00:00
}
2016-08-17 22:13:17 +00:00
2016-10-08 22:52:32 +00:00
if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) {
this.renderSketch();
return;
}
// small bug - if autorefresh is on, and the usr changes files
// in the sketch, preview will reload
2016-06-27 19:47:48 +00:00
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
}
2016-06-23 22:29:55 +00:00
clearPreview() {
2016-07-11 19:22:29 +00:00
const doc = ReactDOM.findDOMNode(this);
doc.srcDoc = '';
}
injectLocalFiles() {
let htmlFile = this.props.htmlFile.content;
2016-08-28 13:52:57 +00:00
let scriptOffs = [];
2016-07-20 01:36:21 +00:00
// have to build the array manually because the spread operator is only
// one level down...
htmlFile = hijackConsoleLogsScript() + htmlFile;
2016-09-07 02:37:29 +00:00
const mediaFiles = this.props.files.filter(file => file.url);
const textFiles = this.props.files.filter(file => file.name.match(/(.+\.json$|.+\.txt$|.+\.csv$)/i) && file.url === undefined);
2016-07-20 01:36:21 +00:00
const jsFiles = [];
this.props.jsFiles.forEach(jsFile => {
const newJSFile = { ...jsFile };
2016-10-25 22:38:20 +00:00
let jsFileStrings = newJSFile.content.match(STRING_REGEX);
2016-07-21 04:05:47 +00:00
jsFileStrings = jsFileStrings || [];
2016-07-19 23:36:50 +00:00
jsFileStrings.forEach(jsFileString => {
2016-10-25 22:38:20 +00:00
if (jsFileString.match(MEDIA_FILE_REGEX)) {
2016-07-20 01:36:21 +00:00
const filePath = jsFileString.substr(1, jsFileString.length - 2);
const filePathArray = filePath.split('/');
const fileName = filePathArray[filePathArray.length - 1];
mediaFiles.forEach(file => {
2016-07-19 23:36:50 +00:00
if (file.name === fileName) {
2016-10-19 19:33:14 +00:00
newJSFile.content = newJSFile.content.replace(filePath, file.url); // eslint-disable-line
2016-07-19 23:36:50 +00:00
}
});
textFiles.forEach(file => {
if (file.name === fileName) {
const blobURL = getBlobUrl(file);
this.props.setBlobUrl(file, blobURL);
newJSFile.content = newJSFile.content.replace(filePath, blobURL);
}
});
2016-07-19 23:36:50 +00:00
}
});
2016-10-06 17:01:48 +00:00
newJSFile.content = loopProtect(newJSFile.content);
jsFiles.push(newJSFile);
2016-07-19 23:36:50 +00:00
});
2016-07-11 19:22:29 +00:00
2016-10-25 22:38:20 +00:00
const cssFiles = [];
this.props.cssFiles.forEach(cssFile => {
const newCSSFile = { ...cssFile };
let cssFileStrings = newCSSFile.content.match(STRING_REGEX);
cssFileStrings = cssFileStrings || [];
cssFileStrings.forEach(cssFileString => {
if (cssFileString.match(MEDIA_FILE_REGEX)) {
const filePath = cssFileString.substr(1, cssFileString.length - 2);
const filePathArray = filePath.split('/');
const fileName = filePathArray[filePathArray.length - 1];
mediaFiles.forEach(file => {
if (file.name === fileName) {
newCSSFile.content = newCSSFile.content.replace(filePath, file.url); // eslint-disable-line
}
});
}
});
cssFiles.push(newCSSFile);
});
2016-07-19 23:36:50 +00:00
jsFiles.forEach(jsFile => {
2016-07-11 19:22:29 +00:00
const fileName = escapeStringRegexp(jsFile.name);
const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
2016-08-28 13:52:57 +00:00
const replacementString = `<script data-tag="${startTag}${jsFile.name}">\n${jsFile.content}\n</script>`;
htmlFile = htmlFile.replace(fileRegex, replacementString);
2016-07-11 19:22:29 +00:00
});
2016-10-25 22:38:20 +00:00
cssFiles.forEach(cssFile => {
2016-07-12 01:54:08 +00:00
const fileName = escapeStringRegexp(cssFile.name);
const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi');
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
});
2016-10-06 17:01:48 +00:00
const htmlHead = htmlFile.match(/(?:<head.*?>)([\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 += '<script type="text/javascript" src="/loop-protect.min.js"></script>\n';
2016-08-15 16:12:25 +00:00
if (this.props.textOutput || this.props.isTextOutputPlaying) {
2016-08-15 22:06:09 +00:00
htmlHeadContents += '<script src="/loadData.js"></script>\n';
2016-08-12 19:50:33 +00:00
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
2016-08-19 16:44:44 +00:00
htmlHeadContents += '<script type="text/javascript" src="/ntc.min.js"></script>';
2016-08-12 19:50:33 +00:00
}
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
2016-08-28 13:52:57 +00:00
scriptOffs = getAllScriptOffsets(htmlFile);
htmlFile += hijackConsoleErrorsScript(JSON.stringify(scriptOffs));
2016-07-11 19:22:29 +00:00
return htmlFile;
2016-06-23 22:29:55 +00:00
}
renderSketch() {
2016-07-11 19:22:29 +00:00
const doc = ReactDOM.findDOMNode(this);
if (this.props.isPlaying) {
srcDoc.set(doc, this.injectLocalFiles());
2016-10-08 22:52:32 +00:00
if (this.props.endSketchRefresh) {
this.props.endSketchRefresh();
}
2016-07-11 19:22:29 +00:00
} else {
doc.srcdoc = '';
srcDoc.set(doc, ' ');
2016-07-11 19:22:29 +00:00
}
2016-06-23 22:29:55 +00:00
}
2016-06-27 19:47:48 +00:00
renderFrameContents() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc.readyState === 'complete') {
2016-06-27 21:22:54 +00:00
this.renderSketch();
2016-06-27 19:47:48 +00:00
} else {
setTimeout(this.renderFrameContents, 0);
2016-06-23 22:29:55 +00:00
}
}
render() {
2016-06-27 19:47:48 +00:00
return (
<iframe
className="preview-frame"
2016-08-10 21:24:52 +00:00
aria-label="sketch output"
role="main"
2016-07-13 19:23:48 +00:00
tabIndex="0"
2016-06-27 19:47:48 +00:00
frameBorder="0"
2016-10-06 17:01:48 +00:00
ref="iframe"
2016-06-27 19:47:48 +00:00
title="sketch output"
2016-10-19 17:03:19 +00:00
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms"
/>
2016-06-27 19:47:48 +00:00
);
2016-06-23 22:29:55 +00:00
}
}
2016-06-27 19:47:48 +00:00
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
isTextOutputPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
2016-08-17 22:13:17 +00:00
content: PropTypes.string,
2016-07-11 19:22:29 +00:00
htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired
}),
2016-07-12 01:54:08 +00:00
jsFiles: PropTypes.array.isRequired,
2016-07-19 23:36:50 +00:00
cssFiles: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
2016-08-17 22:13:17 +00:00
dispatchConsoleEvent: PropTypes.func,
children: PropTypes.element,
2016-09-28 22:05:14 +00:00
autorefresh: PropTypes.bool.isRequired,
endSketchRefresh: PropTypes.func.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired,
2016-10-08 22:52:32 +00:00
fullView: PropTypes.bool,
setBlobUrl: PropTypes.func.isRequired
2016-06-27 19:47:48 +00:00
};
2016-06-23 22:29:55 +00:00
export default PreviewFrame;