159 lines
4.6 KiB
JavaScript
159 lines
4.6 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import escapeStringRegexp from 'escape-string-regexp';
|
|
import srcDoc from 'srcdoc-polyfill';
|
|
|
|
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>`;
|
|
|
|
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(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
|
|
htmlFile = htmlFile.replace(fileRegex, `<script>\n${jsFile.content}\n</script>`);
|
|
});
|
|
|
|
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;
|
|
|
|
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 (
|
|
<iframe
|
|
className="preview-frame"
|
|
frameBorder="0"
|
|
title="sketch output"
|
|
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
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,
|
|
dispatchConsoleEvent: PropTypes.func.isRequired,
|
|
children: PropTypes.element
|
|
};
|
|
|
|
export default PreviewFrame;
|