remove dead code, fix linting errors, get infinite loop functionality working

client/modules/IDE/actions/ide.js

@@ -183,9 +183,10 @@ export function setUnsavedChanges(value) {
   };
 }
 
-export function detectInfiniteLoops() {
+export function detectInfiniteLoops(message) {
   return {
-    type: ActionTypes.DETECT_INFINITE_LOOPS
+    type: ActionTypes.DETECT_INFINITE_LOOPS,
+    message
   };
 }
 

client/modules/IDE/components/Console.js

@@ -20,30 +20,23 @@ class Console extends React.Component {
      *  @type {Array}
      */
     this.children = [];
+    this.appendConsoleEvent = this.appendConsoleEvent.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.isPlaying && !this.props.isPlaying) {
       this.children = [];
-    } else if (nextProps.consoleEvent !== this.props.consoleEvent) {
+    } else if (nextProps.consoleEvent !== this.props.consoleEvent && this.props.isPlaying) {
       const args = nextProps.consoleEvent.arguments;
       Object.keys(args).forEach((key) => {
         if (args[key].includes('Exiting potential infinite loop')) {
-          // stop sketch
-          // dispatch infinite loop found
           this.props.stopSketch();
-          this.props.detectInfiniteLoops();
+          this.props.expandConsole();
+          this.appendConsoleEvent(nextProps.consoleEvent);
         }
       });
       if (nextProps.isExpanded) {
-        // const args = nextProps.consoleEvent.arguments;
+        this.appendConsoleEvent(nextProps.consoleEvent);
-        const method = nextProps.consoleEvent.method;
-        const nextChild = (
-          <div key={this.children.length} className={`preview-console__${method}`}>
-            {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
-          </div>
-        );
-        this.children.push(nextChild);
       }
     }
   }
@@ -58,6 +51,17 @@ class Console extends React.Component {
     this.refs.console_messages.scrollTop = this.refs.console_messages.scrollHeight;
   }
 
+  appendConsoleEvent(consoleEvent) {
+    const args = consoleEvent.arguments;
+    const method = consoleEvent.method;
+    const nextChild = (
+      <div key={this.children.length} className={`preview-console__${method}`}>
+        {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
+      </div>
+    );
+    this.children.push(nextChild);
+  }
+
   render() {
     const childrenToDisplay = this.children.slice(-consoleMax);
     const consoleClass = classNames({
@@ -92,7 +96,6 @@ Console.propTypes = {
   collapseConsole: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
-  detectInfiniteLoops: PropTypes.func.isRequired
 };
 
 export default Console;

client/modules/IDE/components/Editor.js

@@ -28,7 +28,6 @@ const downArrowUrl = require('../../../images/down-arrow.svg');
 import classNames from 'classnames';
 
 import { debounce } from 'throttle-debounce';
-import loopProtect from 'loop-protect';
 
 class Editor extends React.Component {
   constructor(props) {
@@ -66,17 +65,12 @@ class Editor extends React.Component {
       }
     });
 
-    this._cm.on('change', debounce(1000, () => {
+    this._cm.on('change', debounce(200, () => {
       this.props.setUnsavedChanges(true);
       this.props.updateFileContent(this.props.file.name, this._cm.getValue());
       if (this.props.autorefresh && this.props.isPlaying) {
         this.props.startRefreshSketch();
       }
-      // this.checkForInfiniteLoop((infiniteLoop, prevs) => {
-      //   if (!infiniteLoop && prevs && this.props.autorefresh) {
-      //     this.props.startRefreshSketch();
-      //   }
-      // });
     }));
 
     this._cm.on('keyup', () => {
@@ -123,14 +117,6 @@ class Editor extends React.Component {
     if (this.props.theme !== prevProps.theme) {
       this._cm.setOption('theme', `p5-${this.props.theme}`);
     }
-
-    if (this.props.infiniteLoop && this.props.infiniteLoop !== prevProps.infiniteLoop) {
-      const msg = document.createElement('div');
-      const loopError = 'Loop is taking too long to run. This might be an infinite loop.';
-      msg.appendChild(document.createTextNode(loopError));
-      msg.className = 'lint-error';
-      this.widgets.push(this._cm.addLineWidget(1, msg, { coverGutter: false, noHScroll: true }));
-    }
   }
 
   componentWillUnmount() {
@@ -153,77 +139,6 @@ class Editor extends React.Component {
     }
   }
 
-  checkForInfiniteLoop(callback) {
-    const prevIsplaying = this.props.isPlaying;
-    let infiniteLoop = false;
-    let prevLine;
-    this.props.resetInfiniteLoops();
-    let iframe;
-
-    for (let i = 0; i < this.widgets.length; ++i) {
-      this._cm.removeLineWidget(this.widgets[i]);
-    }
-    this.widgets.length = 0;
-
-    loopProtect.alias = 'protect';
-
-    let foundInfiniteLoop = false;
-    loopProtect.hit = (line) => {
-      foundInfiniteLoop = true;
-      if (line !== prevLine) {
-        this.props.detectInfiniteLoops();
-        this.props.stopSketch();
-        infiniteLoop = true;
-        callback(infiniteLoop, prevIsplaying);
-        const msg = document.createElement('div');
-        const loopError = `line ${line}: This loop is taking too long to run. This might be an infinite loop.`;
-        msg.appendChild(document.createTextNode(loopError));
-        msg.className = 'lint-error';
-        this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
-        prevLine = line;
-      }
-    };
-
-    const processed = loopProtect(this.props.file.content);
-
-    let iframeForLoop = document.getElementById('iframeForLoop');
-    if (iframeForLoop === null) {
-      iframe = document.createElement('iframe');
-      iframe.id = 'iframeForLoop';
-      iframe.style.display = 'none';
-      document.body.appendChild(iframe);
-      iframeForLoop = iframe;
-    } else {
-      iframeForLoop.srcdoc = '';
-    }
-    const win = iframeForLoop.contentWindow;
-    const doc = win.document;
-    doc.open();
-
-    win.protect = loopProtect;
-
-    doc.write(`<!DOCTYPE html>
-      <html>
-        <head>
-          <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
-          <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
-        </head>
-        <body>
-          <script> 
-            ${processed}
-          </script>
-        </body>
-      </html>`);
-    win.onerror = () => true;
-    doc.close();
-
-    setTimeout(() => {
-      if (!foundInfiniteLoop) {
-        callback(infiniteLoop, prevIsplaying, prevLine);
-      }
-    }, 200);
-  }
-
   _cm: CodeMirror.Editor
 
   render() {
@@ -289,14 +204,10 @@ Editor.propTypes = {
   closeEditorOptions: PropTypes.func.isRequired,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
-  infiniteLoop: PropTypes.bool.isRequired,
-  detectInfiniteLoops: PropTypes.func.isRequired,
-  resetInfiniteLoops: PropTypes.func.isRequired,
   startRefreshSketch: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   isPlaying: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
-  stopSketch: PropTypes.func.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/PreviewFrame.js

@@ -217,20 +217,16 @@ class PreviewFrame extends React.Component {
     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';
-    htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
 
     if (this.props.textOutput || this.props.isTextOutputPlaying) {
-      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 src="/loadData.js"></script>\n';
       htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
       htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
       htmlHeadContents += '<script type="text/javascript" src="/ntc.min.js"></script>';
-      htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
     }
 
+    htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
+
     scriptOffs = getAllScriptOffsets(htmlFile);
     htmlFile += hijackConsoleErrorsScript(JSON.stringify(scriptOffs));
 
@@ -238,9 +234,8 @@ class PreviewFrame extends React.Component {
   }
 
   renderSketch() {
-    this.props.resetInfiniteLoops();
     const doc = ReactDOM.findDOMNode(this);
-    if (this.props.isPlaying && !this.props.infiniteLoop) {
+    if (this.props.isPlaying) {
       srcDoc.set(doc, this.injectLocalFiles());
       this.props.endSketchRefresh();
     } else {
@@ -288,8 +283,6 @@ PreviewFrame.propTypes = {
   files: PropTypes.array.isRequired,
   dispatchConsoleEvent: PropTypes.func,
   children: PropTypes.element,
-  infiniteLoop: PropTypes.bool.isRequired,
-  resetInfiniteLoops: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   endSketchRefresh: PropTypes.func.isRequired,
   previewIsRefreshing: PropTypes.bool.isRequired,

client/modules/IDE/components/Toolbar.js

@@ -72,7 +72,7 @@ class Toolbar extends React.Component {
         >
           <InlineSVG src={stopUrl} alt="Stop Sketch" />
         </button>
-        {/* <div className="toolbar__autorefresh">
+        <div className="toolbar__autorefresh">
           <input
             id="autorefresh"
             type="checkbox"
@@ -84,7 +84,7 @@ class Toolbar extends React.Component {
           <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
             Auto-refresh
           </label>
-        </div> */}
+        </div>
         <div className={nameContainerClass}>
           <a
             className="toolbar__project-name"

client/modules/IDE/pages/IDEView.js

@@ -277,9 +277,6 @@ class IDEView extends React.Component {
                   closeEditorOptions={this.props.closeEditorOptions}
                   showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
                   setUnsavedChanges={this.props.setUnsavedChanges}
-                  infiniteLoop={this.props.ide.infiniteLoop}
-                  detectInfiniteLoops={this.props.detectInfiniteLoops}
-                  resetInfiniteLoops={this.props.resetInfiniteLoops}
                   isPlaying={this.props.ide.isPlaying}
                   theme={this.props.preferences.theme}
                   startRefreshSketch={this.props.startRefreshSketch}
@@ -293,7 +290,6 @@ class IDEView extends React.Component {
                   expandConsole={this.props.expandConsole}
                   collapseConsole={this.props.collapseConsole}
                   stopSketch={this.props.stopSketch}
-                  detectInfiniteLoops={this.props.detectInfiniteLoops}
                 />
               </SplitPane>
               <div>
@@ -322,8 +318,6 @@ class IDEView extends React.Component {
                   isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
                   textOutput={this.props.preferences.textOutput}
                   dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                  infiniteLoop={this.props.ide.infiniteLoop}
-                  resetInfiniteLoops={this.props.resetInfiniteLoops}
                   autorefresh={this.props.preferences.autorefresh}
                   previewIsRefreshing={this.props.ide.previewIsRefreshing}
                   endSketchRefresh={this.props.endSketchRefresh}
@@ -433,7 +427,8 @@ IDEView.propTypes = {
     keyboardShortcutVisible: PropTypes.bool.isRequired,
     unsavedChanges: PropTypes.bool.isRequired,
     infiniteLoop: PropTypes.bool.isRequired,
-    previewIsRefreshing: PropTypes.bool.isRequired
+    previewIsRefreshing: PropTypes.bool.isRequired,
+    infiniteLoopMessage: PropTypes.string.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,

client/modules/IDE/reducers/ide.js

@@ -18,7 +18,8 @@ const initialState = {
   keyboardShortcutVisible: false,
   unsavedChanges: false,
   infiniteLoop: false,
-  previewIsRefreshing: false
+  previewIsRefreshing: false,
+  infiniteLoopMessage: ''
 };
 
 const ide = (state = initialState, action) => {
@@ -74,9 +75,9 @@ const ide = (state = initialState, action) => {
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
     case ActionTypes.DETECT_INFINITE_LOOPS:
-      return Object.assign({}, state, { infiniteLoop: true });
+      return Object.assign({}, state, { infiniteLoop: true, infiniteLoopMessage: action.message });
     case ActionTypes.RESET_INFINITE_LOOPS:
-      return Object.assign({}, state, { infiniteLoop: false });
+      return Object.assign({}, state, { infiniteLoop: false, infiniteLoopMessage: '' });
     case ActionTypes.START_SKETCH_REFRESH:
       return Object.assign({}, state, { previewIsRefreshing: true });
     case ActionTypes.END_SKETCH_REFRESH: