Merge pull request #94 from yining1023/livecoding

detect infinite loop

client/constants.js

@@ -85,5 +85,8 @@ export const SET_THEME = 'SET_THEME';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 
+export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
+export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';
+
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/ide.js

@@ -170,3 +170,14 @@ export function setUnsavedChanges(value) {
   };
 }
 
+export function detectInfiniteLoops() {
+  return {
+    type: ActionTypes.DETECT_INFINITE_LOOPS
+  };
+}
+
+export function resetInfiniteLoops() {
+  return {
+    type: ActionTypes.RESET_INFINITE_LOOPS
+  };
+}

client/modules/IDE/components/Editor.js

@@ -15,6 +15,7 @@ import 'codemirror/addon/lint/html-lint';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/keymap/sublime';
 import 'codemirror/addon/search/jump-to-line';
+
 import { JSHINT } from 'jshint';
 window.JSHINT = JSHINT;
 import { CSSLint } from 'csslint';
@@ -27,15 +28,16 @@ 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) {
     super(props);
     this.tidyCode = this.tidyCode.bind(this);
   }
-
   componentDidMount() {
     this.beep = new Audio(beepUrl);
+    this.widgets = [];
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
       theme: `p5-${this.props.theme}`,
       value: this.props.file.content,
@@ -47,23 +49,30 @@ class Editor extends React.Component {
       gutters: ['CodeMirror-lint-markers'],
       keyMap: 'sublime',
       lint: {
-        onUpdateLinting: debounce(2000, (annotations) => {
-          this.props.clearLintMessage();
-          annotations.forEach((x) => {
-            if (x.from.line > -1) {
-              this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
+        onUpdateLinting: () => {
+          debounce(2000, (annotations) => {
+            this.props.clearLintMessage();
+            annotations.forEach((x) => {
+              if (x.from.line > -1) {
+                this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
+              }
+            });
+            if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
+              this.beep.play();
             }
           });
-          if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
-            this.beep.play();
-          }
-        })
+        }
       }
     });
 
-    this._cm.on('change', debounce(200, () => {
+    this._cm.on('change', debounce(1000, () => {
       this.props.setUnsavedChanges(true);
       this.props.updateFileContent(this.props.file.name, this._cm.getValue());
+      this.checkForInfiniteLoop((infiniteLoop, prevs) => {
+        if (!infiniteLoop && prevs) {
+          this.props.startSketch();
+        }
+      });
     }));
 
     this._cm.on('keyup', () => {
@@ -132,6 +141,69 @@ class Editor extends React.Component {
     }
   }
 
+  checkForInfiniteLoop(callback) {
+    const prevIsplaying = this.props.isPlaying;
+    let infiniteLoop = false;
+    let prevLine;
+    this.props.stopSketch();
+    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';
+
+    loopProtect.hit = (line) => {
+      if (line !== prevLine) {
+        this.props.detectInfiniteLoops();
+        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);
+
+    const iframeForLoop = document.getElementById('iframeForLoop');
+    if (iframeForLoop === null) {
+      iframe = document.createElement('iframe');
+      iframe.id = 'iframeForLoop';
+      iframe.style.display = 'none';
+      document.body.appendChild(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();
+    }
+    callback(infiniteLoop, prevIsplaying, prevLine);
+  }
+
   _cm: CodeMirror.Editor
 
   render() {
@@ -197,7 +269,13 @@ Editor.propTypes = {
   closeEditorOptions: PropTypes.func.isRequired,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
+  infiniteLoop: PropTypes.bool.isRequired,
+  detectInfiniteLoops: PropTypes.func.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired,
+  stopSketch: PropTypes.func.isRequired,
+  startSketch: PropTypes.func.isRequired,
+  isPlaying: PropTypes.bool.isRequired,
+  theme: PropTypes.string.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/PreviewFrame.js

@@ -205,7 +205,12 @@ class PreviewFrame extends React.Component {
 
   renderSketch() {
     const doc = ReactDOM.findDOMNode(this);
-    if (this.props.isPlaying) {
+    if (this.props.infiniteLoop) {
+      this.props.resetInfiniteLoops();
+      doc.srcdoc = '';
+      srcDoc.set(doc, '  ');
+    }
+    if (this.props.isPlaying && !this.props.infiniteLoop) {
       srcDoc.set(doc, this.injectLocalFiles());
     } else {
       doc.srcdoc = '';
@@ -250,7 +255,9 @@ PreviewFrame.propTypes = {
   cssFiles: PropTypes.array.isRequired,
   files: PropTypes.array.isRequired,
   dispatchConsoleEvent: PropTypes.func,
-  children: PropTypes.element
+  children: PropTypes.element,
+  infiniteLoop: PropTypes.bool.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired
 };
 
 export default PreviewFrame;

client/modules/IDE/components/Toolbar.js

@@ -55,10 +55,11 @@ class Toolbar extends React.Component {
           className="toolbar__play-sketch-button"
           onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
           aria-label="play sketch"
+          disabled={this.props.infiniteLoop}
         >
           <InlineSVG src={playUrl} alt="Play Sketch" />
         </button>
-        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
+        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch" disabled={this.props.infiniteLoop} >
           <InlineSVG src={playUrl} alt="Play only visual Sketch" />
         </button>
         <button
@@ -128,7 +129,8 @@ Toolbar.propTypes = {
     isEditingName: PropTypes.bool
   }).isRequired,
   showEditProjectName: PropTypes.func.isRequired,
-  hideEditProjectName: PropTypes.func.isRequired
+  hideEditProjectName: PropTypes.func.isRequired,
+  infiniteLoop: PropTypes.bool.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -192,6 +192,7 @@ class IDEView extends React.Component {
           setTextOutput={this.props.setTextOutput}
           owner={this.props.project.owner}
           project={this.props.project}
+          infiniteLoop={this.props.ide.infiniteLoop}
         />
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
@@ -273,6 +274,12 @@ 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}
+                  stopSketch={this.props.stopSketch}
+                  startSketch={this.props.startSketch}
+                  isPlaying={this.props.ide.isPlaying}
                   theme={this.props.preferences.theme}
                 />
                 <Console
@@ -309,6 +316,8 @@ 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}
                 />
               </div>
             </SplitPane>
@@ -412,12 +421,15 @@ IDEView.propTypes = {
     shareModalVisible: PropTypes.bool.isRequired,
     editorOptionsVisible: PropTypes.bool.isRequired,
     keyboardShortcutVisible: PropTypes.bool.isRequired,
-    unsavedChanges: PropTypes.bool.isRequired
+    unsavedChanges: PropTypes.bool.isRequired,
+    infiniteLoop: PropTypes.bool.isRequired,
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   startTextOutput: PropTypes.func.isRequired,
   stopTextOutput: PropTypes.func.isRequired,
+  detectInfiniteLoops: PropTypes.func.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string.isRequired,

client/modules/IDE/reducers/ide.js

@@ -16,7 +16,8 @@ const initialState = {
   shareModalVisible: false,
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,
-  unsavedChanges: false
+  unsavedChanges: false,
+  infiniteLoop: false
 };
 
 const ide = (state = initialState, action) => {
@@ -73,6 +74,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { keyboardShortcutVisible: false });
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
+    case ActionTypes.DETECT_INFINITE_LOOPS:
+      return Object.assign({}, state, { infiniteLoop: true });
+    case ActionTypes.RESET_INFINITE_LOOPS:
+      return Object.assign({}, state, { infiniteLoop: false });
     default:
       return state;
   }

client/styles/components/_editor.scss

@@ -95,3 +95,11 @@
     display: block;
   }
 }
+
+.lint-error {
+  font-family: Inconsolata, monospace;
+  font-size: 100%;
+  background: rgba($console-error-color, 0.3);
+  color: $console-error-color;
+  padding: 2px 5px 3px;
+}

client/styles/components/_toolbar.scss

@@ -4,6 +4,18 @@
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
+		&:disabled {
+			cursor: auto;
+			& g {
+				fill: getThemifyVariable('button-border-color');
+			}
+			&:hover {
+				background-color: getThemifyVariable('toolbar-button-background-color');
+				& g {
+					fill: getThemifyVariable('button-border-color');
+				}
+			}
+	    }
 	}
 	margin-right: #{15 / $base-font-size}rem;
 	& span {

package.json

@@ -83,6 +83,7 @@
     "jshint": "^2.9.2",
     "jszip": "^3.0.0",
     "jszip-utils": "0.0.2",
+    "loop-protect": "git+https://git@github.com/sagar-sm/loop-protect.git",
     "moment": "^2.14.1",
     "mongoose": "^4.4.16",
     "node-uuid": "^1.4.7",