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

Fix Issue #588. Only highlight runtime errors at the appropriate line… (#1136)

Browse source 
* Fix Issue #588. Only highlight runtime errors at the appropriate line for file in which the error occurred.

* Modifications to handle js in html <script> tag Part 1

* Correctly highlight errors in JavaScript in a <script> tag
This commit is contained in:
Jon Paul Gualdarrama 2019-08-27 13:02:07 -04:00 committed by Cassie Tarakajian
parent aa318e0d2d
commit 68c1e48c99
2 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/Editor.jsx
View file

@ -188,7 +188,7 @@ class Editor extends React.Component {
for (let i = 0; i < this._cm.lineCount(); i += 1) { for (let i = 0; i < this._cm.lineCount(); i += 1) {
this._cm.removeLineClass(i, 'background', 'line-runtime-error'); this._cm.removeLineClass(i, 'background', 'line-runtime-error');
} }
if (this.props.runtimeErrorWarningVisible && this._cm.getDoc().modeOption === 'javascript') { if (this.props.runtimeErrorWarningVisible) {
this.props.consoleEvents.forEach((consoleEvent) => { this.props.consoleEvents.forEach((consoleEvent) => {
if (consoleEvent.method === 'error') { if (consoleEvent.method === 'error') {
if (consoleEvent.data && if (consoleEvent.data &&
@ -197,7 +197,11 @@ class Editor extends React.Component {
consoleEvent.data[0].indexOf(')') > -1) { consoleEvent.data[0].indexOf(')') > -1) {
const n = consoleEvent.data[0].replace(')', '').split(' '); const n = consoleEvent.data[0].replace(')', '').split(' ');
const lineNumber = parseInt(n[n.length - 1], 10) - 1; const lineNumber = parseInt(n[n.length - 1], 10) - 1;
if (!Number.isNaN(lineNumber)) { const { source } = consoleEvent;
const fileName = this.props.file.name;
const errorFromJavaScriptFile = (`${source}.js` === fileName);
const errorFromIndexHTML = ((source === fileName) && (fileName === 'index.html'));
if (!Number.isNaN(lineNumber) && (errorFromJavaScriptFile || errorFromIndexHTML)) {
this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error'); this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
} }
} }

25
client/utils/consoleUtils.js
View file

@ -46,21 +46,36 @@ export const startTag = '@fs-';
export const getAllScriptOffsets = (htmlFile) => { export const getAllScriptOffsets = (htmlFile) => {
const offs = []; const offs = [];
let found = true; const hijackConsoleErrorsScriptLength = 36;
const embeddedJSStart = 'script crossorigin=""';
let foundJSScript = true;
let foundEmbeddedJS = true;
let lastInd = 0; let lastInd = 0;
let ind = 0; let ind = 0;
let endFilenameInd = 0; let endFilenameInd = 0;
let filename = ''; let filename = '';
let lineOffset = 0; let lineOffset = 0;
while (found) { while (foundJSScript) {
ind = htmlFile.indexOf(startTag, lastInd); ind = htmlFile.indexOf(startTag, lastInd);
if (ind === -1) { if (ind === -1) {
found = false; foundJSScript = false;
} else { } else {
endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3); endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3);
filename = htmlFile.substring(ind + startTag.length, endFilenameInd); filename = htmlFile.substring(ind + startTag.length, endFilenameInd);
// the length of hijackConsoleErrorsScript is 36 lines lineOffset = htmlFile.substring(0, ind).split('\n').length + hijackConsoleErrorsScriptLength;
lineOffset = htmlFile.substring(0, ind).split('\n').length + 36; offs.push([lineOffset, filename]);
lastInd = ind + 1;
}
}
lastInd = 0;
while (foundEmbeddedJS) {
ind = htmlFile.indexOf(embeddedJSStart, lastInd);
if (ind === -1) {
foundEmbeddedJS = false;
} else {
filename = 'index.html';
// not sure where the offset of 25 comes from
lineOffset = htmlFile.substring(0, ind).split('\n').length + 25;
offs.push([lineOffset, filename]); offs.push([lineOffset, filename]);
lastInd = ind + 1; lastInd = ind + 1;
} }