r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix crash on save-and-play when not logged in

Browse source
This commit is contained in:
Ruben van de Ven 2020-10-09 17:21:16 +02:00
parent 8ebe30af90
commit bc83555cab
1 changed files with 57 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -59,6 +59,7 @@ class PreviewFrame extends React.Component {
}
componentDidUpdate(prevProps) {
// console.log(this.props, prevProps);
if (shouldRenderSketch(this.props, prevProps)) this.renderSketch();
// small bug - if autorefresh is on, and the usr changes files
// in the sketch, preview will reload
@ -330,12 +331,12 @@ class PreviewFrame extends React.Component {
renderSketch() {
const doc = this.iframeElement;
// const localFiles = this.injectLocalFiles();
console.log('renderSketch()', this.props);
// console.trace('renderSketch()', this.props);
const changedFiles = this.props.files.filter(file => file.changed);
const filesRequiringReload = changedFiles.filter(file => !file.content.startsWith('// liveUpdate'));
const filesToHotSwap = changedFiles.filter(file => filesRequiringReload.indexOf(file) === -1);
console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap);
// console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap);
let saving;
if (changedFiles.length > 0) {
@ -345,62 +346,67 @@ class PreviewFrame extends React.Component {
saving = new Promise((resolve, err) => resolve());
}
saving.catch(() => {
console.log('Error saving... not authenticated?');
window.location.href = '/login';
});
if (saving === null) {
// console.log('Error saving... not authenticated?');
this.props.stopSketch(); // prevent crazy loop of renderSketch() through componentDidUpdate()
} else {
saving.catch(() => {
// console.log('Error when saving... not authenticated? Redirect!');
this.props.stopSketch(); // prevent crazy loop of renderSketch() through componentDidUpdate()
});
saving.then(() => {
if (this.props.isPlaying) {
this.props.clearConsole();
doc.removeAttribute('srcdoc');
const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`;
// console.log('FILES', this.props.files, doc.src, source, lastUpdate);
if (doc.src === source) {
// const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate);
if (this.props.unsavedChanges) {
// console.log('unsaved changes');
}
saving.then(() => {
if (this.props.isPlaying) {
this.props.clearConsole();
doc.removeAttribute('srcdoc');
const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`;
// console.log('FILES', this.props.files, doc.src, source, lastUpdate);
if (doc.src === source) {
// const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate);
if (this.props.unsavedChanges) {
// console.log('unsaved changes');
}
console.log('doc', doc);
// we need a hard reload
if (filesRequiringReload.length > 0) {
doc.src = source; // for now...
// console.log('doc', doc);
// we need a hard reload
if (filesRequiringReload.length > 0) {
doc.src = source; // for now...
} else {
// if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) {
// const headEl = doc.contentWindow.document.querySelector('head');
// const srcEl = doc.contentWindow.document.createElement('script');
// srcEl.src = '/assets/hotswap.js';
// headEl.appendChild(srcEl);
// }
console.log('Hot swap (..append):', filesToHotSwap);
const headEl = doc.contentWindow.document.querySelector('head');
const updatevar = Date.now();
filesToHotSwap.forEach((file) => {
// doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*');
const srcEl = doc.contentWindow.document.createElement('script');
srcEl.src = `${file.name}?changed=${updatevar}`;
srcEl.onload = 'setupAssets();'; // (re)load assets
headEl.appendChild(srcEl);
});
}
// if ( this.props.htmlFile.content === doc.contentWindow)
// TODO: don't set, but update only (will be hard... :-P)
} else {
// if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) {
// const headEl = doc.contentWindow.document.querySelector('head');
// const srcEl = doc.contentWindow.document.createElement('script');
// srcEl.src = '/assets/hotswap.js';
// headEl.appendChild(srcEl);
// }
console.log('Hot swap (..append):', filesToHotSwap);
const headEl = doc.contentWindow.document.querySelector('head');
const updatevar = Date.now();
filesToHotSwap.forEach((file) => {
// doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*');
const srcEl = doc.contentWindow.document.createElement('script');
srcEl.src = `${file.name}?changed=${updatevar}`;
srcEl.onload = 'setupAssets();'; // (re)load assets
headEl.appendChild(srcEl);
});
doc.src = source;
}
// lastUpdate = new Date();
if (this.props.endSketchRefresh) {
this.props.endSketchRefresh();
}
// if ( this.props.htmlFile.content === doc.contentWindow)
// TODO: don't set, but update only (will be hard... :-P)
} else {
doc.src = source;
doc.removeAttribute('src');
doc.srcdoc = '';
srcDoc.set(doc, ' ');
}
// lastUpdate = new Date();
if (this.props.endSketchRefresh) {
this.props.endSketchRefresh();
}
} else {
doc.removeAttribute('src');
doc.srcdoc = '';
srcDoc.set(doc, ' ');
}
});
});
}
}
render() {