change console throttling to batch deliver messages

client/modules/IDE/components/Console.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
  *  How many console messages to store
  *  @type {Number}
  */
-const consoleMax = 100;
+const consoleMax = 200;
 
 class Console extends React.Component {
 
@@ -27,18 +27,22 @@ class Console extends React.Component {
     if (nextProps.isPlaying && !this.props.isPlaying) {
       this.children = [];
     } else if (nextProps.consoleEvent !== this.props.consoleEvent && this.props.isPlaying) {
-      const args = nextProps.consoleEvent.arguments;
+      nextProps.consoleEvent.forEach(consoleEvent => {
+        if (consoleEvent.source === 'sketch') {
+          const args = consoleEvent.arguments;
           Object.keys(args).forEach((key) => {
             if (args[key].includes('Exiting potential infinite loop')) {
               this.props.stopSketch();
               this.props.expandConsole();
-          this.appendConsoleEvent(nextProps.consoleEvent);
+              this.appendConsoleEvent(consoleEvent);
             }
           });
           if (nextProps.isExpanded) {
-        this.appendConsoleEvent(nextProps.consoleEvent);
+            this.appendConsoleEvent(consoleEvent);
           }
         }
+      });
+    }
   }
 
   shouldComponentUpdate(nextProps) {
@@ -90,7 +94,7 @@ class Console extends React.Component {
 }
 
 Console.propTypes = {
-  consoleEvent: PropTypes.object,
+  consoleEvent: PropTypes.array,
   isPlaying: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   collapseConsole: PropTypes.func.isRequired,

client/modules/IDE/components/PreviewFrame.js

@@ -42,29 +42,11 @@ function hijackConsoleLogsScript() {
       'debug', 'clear', 'error', 'info', 'log', 'warn'
     ];
 
-
-    function throttle(fn, threshhold, scope) {
-      var last, deferTimer;
-      return function() {
-        var context = scope || this;
-        var now = +new Date,
-            args = arguments;
-        if (last && now < last + threshhold) {
-          // hold on to it
-          clearTimeout(deferTimer);
-          deferTimer = setTimeout(function() {
-            last = now;
-            fn.apply(context, args);
-          }, threshhold);
-        } else {
-          last = now;
-          fn.apply(context, args);
-        }
-      };
-    }
+    var consoleBuffer = [];
+    var LOGWAIT = 500;
 
     methods.forEach( function(method) {
-      iframeWindow.console[method] = throttle(function() {
+      iframeWindow.console[method] = function() {
         originalConsole[method].apply(originalConsole, arguments);
 
         var args = Array.from(arguments);
@@ -73,14 +55,20 @@ function hijackConsoleLogsScript() {
           return (typeof i === 'string') ? i : JSON.stringify(i);
         });
 
-        // post message to parent window
-        window.parent.postMessage({
+        consoleBuffer.push({
           method: method,
           arguments: args,
           source: 'sketch'
-        }, '*');
-      }, 100);
         });
+      };
+    });
+
+    setInterval(function() {
+      if (consoleBuffer.length > 0) {
+        window.parent.postMessage(consoleBuffer, '*');
+        consoleBuffer.length = 0;
+      }
+    }, LOGWAIT);
   </script>`;
   return s;
 }
@@ -133,9 +121,7 @@ class PreviewFrame extends React.Component {
 
     if (this.props.dispatchConsoleEvent) {
       window.addEventListener('message', (msg) => {
-        if (msg.data.source === 'sketch') {
         this.props.dispatchConsoleEvent(msg);
-        }
       });
     }
   }

client/modules/IDE/pages/IDEView.js

@@ -415,7 +415,7 @@ IDEView.propTypes = {
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
     isTextOutputPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.object,
+    consoleEvent: PropTypes.array,
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
     consoleIsExpanded: PropTypes.bool.isRequired,

client/modules/IDE/reducers/ide.js

@@ -3,10 +3,7 @@ import * as ActionTypes from '../../../constants';
 const initialState = {
   isPlaying: false,
   isTextOutputPlaying: false,
-  consoleEvent: {
-    method: undefined,
-    arguments: []
-  },
+  consoleEvent: [],
   modalIsVisible: false,
   sidebarIsExpanded: false,
   consoleIsExpanded: false,