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

189 lines
5.8 KiB
JavaScript
Raw Normal View History

2016-06-27 21:47:48 +02:00
import React, { PropTypes } from 'react';
2016-06-24 00:29:55 +02:00
import ReactDOM from 'react-dom';
2016-07-11 21:22:29 +02:00
import escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill';
2016-06-24 00:29:55 +02:00
const hijackConsoleScript = `<script>
document.addEventListener('DOMContentLoaded', function() {
var iframeWindow = window;
var originalConsole = iframeWindow.console;
iframeWindow.console = {};
var methods = [
'debug', 'clear', 'error', 'info', 'log', 'warn'
];
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);
});
// post message to parent window
window.parent.postMessage({
method: method,
arguments: args,
source: 'sketch'
}, '*');
};
});
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
window.onerror = function (msg, url, lineNo, 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 {
data = msg + ' Line: ' + lineNo + 'column: ' + columnNo;
}
window.parent.postMessage({
method: 'error',
arguments: data,
source: 'sketch'
}, '*');
return false;
};
});
</script>`;
2016-06-24 00:29:55 +02:00
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);
}
});
2016-06-24 00:29:55 +02:00
}
2016-06-27 21:47:48 +02:00
componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) {
2016-07-11 21:22:29 +02:00
this.renderSketch();
2016-06-27 21:47:48 +02:00
}
if (this.props.isPlaying && this.props.content !== prevProps.content) {
this.renderSketch();
}
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
}
2016-06-24 00:29:55 +02:00
clearPreview() {
2016-07-11 21:22:29 +02:00
const doc = ReactDOM.findDOMNode(this);
doc.srcDoc = '';
}
injectLocalFiles() {
let htmlFile = this.props.htmlFile.content;
2016-07-20 03:36:21 +02:00
// have to build the array manually because the spread operator is only
// one level down...
const jsFiles = [];
this.props.jsFiles.forEach(jsFile => {
const newJSFile = { ...jsFile };
2016-07-21 06:05:47 +02:00
let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
jsFileStrings = jsFileStrings || [];
2016-07-20 01:36:50 +02:00
jsFileStrings.forEach(jsFileString => {
2016-07-21 20:18:38 +02:00
if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg)('|")$/)) {
2016-07-20 03:36:21 +02:00
const filePath = jsFileString.substr(1, jsFileString.length - 2);
let fileName = filePath;
if (fileName.match(/^\.\//)) {
fileName = fileName.substr(2, fileName.length - 1);
} else if (fileName.match(/^\//)) {
fileName = fileName.substr(1, fileName.length - 1);
}
2016-07-20 01:36:50 +02:00
this.props.files.forEach(file => {
if (file.name === fileName) {
2016-07-20 03:36:21 +02:00
newJSFile.content = newJSFile.content.replace(filePath, file.blobURL); // eslint-disable-line
2016-07-20 01:36:50 +02:00
}
});
}
});
2016-07-20 03:36:21 +02:00
jsFiles.push(newJSFile);
2016-07-20 01:36:50 +02:00
});
2016-07-11 21:22:29 +02:00
2016-07-20 01:36:50 +02:00
jsFiles.forEach(jsFile => {
2016-07-11 21:22:29 +02:00
const fileName = escapeStringRegexp(jsFile.name);
const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
htmlFile = htmlFile.replace(fileRegex, `<script>\n${jsFile.content}\n</script>`);
});
2016-07-12 03:54:08 +02:00
this.props.cssFiles.forEach(cssFile => {
const fileName = escapeStringRegexp(cssFile.name);
const fileRegex = new RegExp(`<link.*?href=('|")((\.\/)|\/)?${fileName}('|").*?>`, 'gmi');
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
});
// 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 += '<link rel="stylesheet" type="text/css" href="/preview-styles.css" />\n';
// htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
htmlFile += hijackConsoleScript;
2016-07-11 21:22:29 +02:00
return htmlFile;
2016-06-24 00:29:55 +02:00
}
renderSketch() {
2016-07-11 21:22:29 +02:00
const doc = ReactDOM.findDOMNode(this);
if (this.props.isPlaying) {
srcDoc.set(doc, this.injectLocalFiles());
2016-07-11 21:22:29 +02:00
} else {
doc.srcdoc = '';
srcDoc.set(doc, ' ');
2016-07-11 21:22:29 +02:00
}
2016-06-24 00:29:55 +02:00
}
2016-06-27 21:47:48 +02:00
renderFrameContents() {
const doc = ReactDOM.findDOMNode(this).contentDocument;
if (doc.readyState === 'complete') {
2016-06-27 23:22:54 +02:00
this.renderSketch();
2016-06-27 21:47:48 +02:00
} else {
setTimeout(this.renderFrameContents, 0);
2016-06-24 00:29:55 +02:00
}
}
render() {
2016-06-27 21:47:48 +02:00
return (
<iframe
className="preview-frame"
2016-07-13 21:23:48 +02:00
role="region"
tabIndex="0"
2016-06-27 21:47:48 +02:00
frameBorder="0"
title="sketch output"
2016-07-11 23:32:13 +02:00
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
/>
2016-06-27 21:47:48 +02:00
);
2016-06-24 00:29:55 +02:00
}
}
2016-06-27 21:47:48 +02:00
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
2016-07-11 21:22:29 +02:00
content: PropTypes.string.isRequired,
htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired
}),
2016-07-12 03:54:08 +02:00
jsFiles: PropTypes.array.isRequired,
2016-07-20 01:36:50 +02:00
cssFiles: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
dispatchConsoleEvent: PropTypes.func.isRequired,
children: PropTypes.element
2016-06-27 21:47:48 +02:00
};
2016-06-24 00:29:55 +02:00
export default PreviewFrame;