From 23d5341e7cbb9026ef5a71f5cf4c0326e771ecb3 Mon Sep 17 00:00:00 2001
From: Lauren McCarthy <laurmccarthy@gmail.com>
Date: Fri, 26 Aug 2016 14:22:58 -0400
Subject: [PATCH 1/3] getting a little closer with console output line number
 #36

---
 client/modules/IDE/components/PreviewFrame.js | 110 +++++++++++-------
 1 file changed, 66 insertions(+), 44 deletions(-)

diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index a7fd872a..9d505e51 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -3,55 +3,74 @@ import ReactDOM from 'react-dom';
 import escapeStringRegexp from 'escape-string-regexp';
 import srcDoc from 'srcdoc-polyfill';
 
-const hijackConsoleScript = `<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    var iframeWindow = window;
-    var originalConsole = iframeWindow.console;
-    iframeWindow.console = {};
 
-    var methods = [
-      'debug', 'clear', 'error', 'info', 'log', 'warn'
-    ];
+/**
+ * Stringify all of the console objects from an array for proxying
+ */
+function stringifyArgs(args) {
+  var newArgs = [];
+  // TODO this was forEach but when the array is [undefined] it wouldn't
+  // iterate over them
+  var i = 0, length = args.length, arg;
+  for(; i < length; i++) {
+    arg = args[i];
+    if (typeof arg === 'undefined') {
+      newArgs.push('undefined');
+    } else {
+      newArgs.push(stringify(arg));
+    }
+  }
+  return newArgs;
+};
 
-    methods.forEach( function(method) {
-      iframeWindow.console[method] = function() {
-        originalConsole[method].apply(originalConsole, arguments);
+function hijackConsoleScript(lineOffset) {
+  return `<script>
+    document.addEventListener('DOMContentLoaded', function() {
+      var iframeWindow = window;
+      var originalConsole = iframeWindow.console;
+      iframeWindow.console = {};
 
-        var args = Array.from(arguments);
-        args = args.map(function(i) {
-          // catch objects
-          return (typeof i === 'string') ? i : JSON.stringify(i);
-        });
+      var methods = [
+        'debug', 'clear', 'error', 'info', 'log', 'warn'
+      ];
 
-        // post message to parent window
-        window.parent.postMessage({
-          method: method,
-          arguments: args,
-          source: 'sketch'
-        }, '*');
+      methods.forEach( function(method) {
+        iframeWindow.console[method] = function() {
+          originalConsole[method].apply(originalConsole, arguments);
+
+          var args = Array.from(arguments);
+          args = stringifyArgs(args);
+
+          // post message to parent window
+          window.parent.postMessage({
+            method: method,
+            arguments: args,
+            source: 'sketch'
+          }, '*');
+        };
+      });
+
+      // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
+      window.onerror = function (msg, url, lineNumber, columnNo, error) {
+          var string = msg.toLowerCase();
+          var substring = "script error";
+          var data = {};
+
+          if (string.indexOf(substring) !== -1){
+            data = 'Script Error: See Browser Console for Detail';
+          } else {
+            data = msg + ' (Line: ' + (lineNumber - `+lineOffset+`) + ')';
+          }
+          window.parent.postMessage({
+            method: 'error',
+            arguments: data,
+            source: 'sketch'
+          }, '*');
+        return false;
       };
     });
-
-    // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
-    window.onerror = function (msg, url, lineNumber, columnNo, error) {
-        var string = msg.toLowerCase();
-        var substring = "script error";
-        var data = {};
-
-        if (string.indexOf(substring) > -1){
-          data = 'Script Error: See Browser Console for Detail';
-        } else {
-          data = msg + ' Line: ' + lineNumber + 'column: ' + columnNo;
-        }
-        window.parent.postMessage({
-          method: 'error',
-          arguments: data,
-          source: 'sketch'
-        }, '*');
-      return false;
-    };
-  });
-</script>`;
+  </script>`;
+}
 
 class PreviewFrame extends React.Component {
 
@@ -146,7 +165,10 @@ class PreviewFrame extends React.Component {
       htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
     }
 
-    htmlFile += hijackConsoleScript;
+    var lineOffset = htmlFile.substring(0, htmlFile.indexOf('<script>')).split('\n').length;
+    console.log(lineOffset)
+
+    htmlFile += hijackConsoleScript(lineOffset);
 
     return htmlFile;
   }

From 402e9bc95e1d15f0075afa7e0cdd83cc7a475464 Mon Sep 17 00:00:00 2001
From: Lauren McCarthy <laurmccarthy@gmail.com>
Date: Sat, 27 Aug 2016 13:54:20 -0400
Subject: [PATCH 2/3] fixes line numbers closes #36

---
 client/modules/IDE/components/PreviewFrame.js | 66 ++++++++++++-------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 9d505e51..228c5f8d 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -3,28 +3,44 @@ import ReactDOM from 'react-dom';
 import escapeStringRegexp from 'escape-string-regexp';
 import srcDoc from 'srcdoc-polyfill';
 
-
-/**
- * Stringify all of the console objects from an array for proxying
- */
-function stringifyArgs(args) {
-  var newArgs = [];
-  // TODO this was forEach but when the array is [undefined] it wouldn't
-  // iterate over them
-  var i = 0, length = args.length, arg;
-  for(; i < length; i++) {
-    arg = args[i];
-    if (typeof arg === 'undefined') {
-      newArgs.push('undefined');
+function getAllScriptOffsets(htmlFile) {
+  var offs = [];
+  var found = true;
+  var lastInd = 0;
+  var startTag = 'filestart-';
+  while (found) {
+    var ind = htmlFile.indexOf(startTag, lastInd);
+    if (ind == -1) {
+      found = false;
     } else {
-      newArgs.push(stringify(arg));
+      var endFilenameInd = htmlFile.indexOf('.js', ind+startTag.length);
+      var filename = htmlFile.substring(ind+startTag.length, endFilenameInd);
+      var lineOffset = htmlFile.substring(0, ind).split('\n').length;
+      offs.push([lineOffset, filename+'.js']);
+      lastInd = ind + 1;
     }
   }
-  return newArgs;
-};
+  return offs;
+}
 
-function hijackConsoleScript(lineOffset) {
+function hijackConsoleScript(offs) {
   return `<script>
+
+    function getScriptOff(line) {
+      var offs = `+offs+`;
+      var l = 0;
+      var file = '';
+      for (var i=0; i<offs.length; i++) {
+        var n = offs[i][0];
+        if (n < line && n > l) {
+          l = n;
+          file = offs[i][1];
+        }
+      }
+      return [line - l, file];
+    }
+
+
     document.addEventListener('DOMContentLoaded', function() {
       var iframeWindow = window;
       var originalConsole = iframeWindow.console;
@@ -39,7 +55,10 @@ function hijackConsoleScript(lineOffset) {
           originalConsole[method].apply(originalConsole, arguments);
 
           var args = Array.from(arguments);
-          args = stringifyArgs(args);
+          args = args.map(function(i) {
+            // catch objects
+            return (typeof i === 'undefined') ? 'undefined' : JSON.stringify(i);
+          });
 
           // post message to parent window
           window.parent.postMessage({
@@ -59,7 +78,8 @@ function hijackConsoleScript(lineOffset) {
           if (string.indexOf(substring) !== -1){
             data = 'Script Error: See Browser Console for Detail';
           } else {
-            data = msg + ' (Line: ' + (lineNumber - `+lineOffset+`) + ')';
+            var fileInfo = getScriptOff(lineNumber);
+            data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
           }
           window.parent.postMessage({
             method: 'error',
@@ -144,7 +164,7 @@ class PreviewFrame extends React.Component {
     jsFiles.forEach(jsFile => {
       const fileName = escapeStringRegexp(jsFile.name);
       const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
-      htmlFile = htmlFile.replace(fileRegex, `<script>\n${jsFile.content}\n</script>`);
+      htmlFile = htmlFile.replace(fileRegex, `<script data-tag="filestart-`+jsFile.name+`">\n${jsFile.content}\n</script>`);
     });
 
     this.props.cssFiles.forEach(cssFile => {
@@ -165,10 +185,8 @@ class PreviewFrame extends React.Component {
       htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
     }
 
-    var lineOffset = htmlFile.substring(0, htmlFile.indexOf('<script>')).split('\n').length;
-    console.log(lineOffset)
-
-    htmlFile += hijackConsoleScript(lineOffset);
+    var scriptOffs = getAllScriptOffsets(htmlFile);
+    htmlFile += hijackConsoleScript(JSON.stringify(scriptOffs));
 
     return htmlFile;
   }

From f936d98f7658ba90c436329ccb03f2dcf33be00c Mon Sep 17 00:00:00 2001
From: Lauren McCarthy <laurmccarthy@gmail.com>
Date: Sun, 28 Aug 2016 09:52:57 -0400
Subject: [PATCH 3/3] fixing linting errors

---
 client/components/Nav.js                      |  3 +-
 client/modules/IDE/components/PreviewFrame.js | 41 +++++++++++--------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 13950578..3fa29e7f 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -65,7 +65,8 @@ function Nav(props) {
                 </p>
               </li>
             );
-          } else {
+          }
+          if (!props.user.authenticated) {
             return (
               <li className="nav__item">
                 <p className="nav__open">
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 228c5f8d..a62e7127 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -3,20 +3,26 @@ import ReactDOM from 'react-dom';
 import escapeStringRegexp from 'escape-string-regexp';
 import srcDoc from 'srcdoc-polyfill';
 
+
+const startTag = 'filestart-';
+
 function getAllScriptOffsets(htmlFile) {
-  var offs = [];
-  var found = true;
-  var lastInd = 0;
-  var startTag = 'filestart-';
+  const offs = [];
+  let found = true;
+  let lastInd = 0;
+  let ind = 0;
+  let endFilenameInd = 0;
+  let filename = '';
+  let lineOffset = 0;
   while (found) {
-    var ind = htmlFile.indexOf(startTag, lastInd);
-    if (ind == -1) {
+    ind = htmlFile.indexOf(startTag, lastInd);
+    if (ind === -1) {
       found = false;
     } else {
-      var endFilenameInd = htmlFile.indexOf('.js', ind+startTag.length);
-      var filename = htmlFile.substring(ind+startTag.length, endFilenameInd);
-      var lineOffset = htmlFile.substring(0, ind).split('\n').length;
-      offs.push([lineOffset, filename+'.js']);
+      endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3);
+      filename = htmlFile.substring(ind + startTag.length, endFilenameInd);
+      lineOffset = htmlFile.substring(0, ind).split('\n').length;
+      offs.push([lineOffset, filename]);
       lastInd = ind + 1;
     }
   }
@@ -24,10 +30,9 @@ function getAllScriptOffsets(htmlFile) {
 }
 
 function hijackConsoleScript(offs) {
-  return `<script>
-
+  const s = `<script>
     function getScriptOff(line) {
-      var offs = `+offs+`;
+      var offs = ${offs};
       var l = 0;
       var file = '';
       for (var i=0; i<offs.length; i++) {
@@ -90,6 +95,7 @@ function hijackConsoleScript(offs) {
       };
     });
   </script>`;
+  return s;
 }
 
 class PreviewFrame extends React.Component {
@@ -134,6 +140,7 @@ class PreviewFrame extends React.Component {
 
   injectLocalFiles() {
     let htmlFile = this.props.htmlFile.content;
+    let scriptOffs = [];
 
     // have to build the array manually because the spread operator is only
     // one level down...
@@ -141,9 +148,10 @@ class PreviewFrame extends React.Component {
     this.props.jsFiles.forEach(jsFile => {
       const newJSFile = { ...jsFile };
       let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
+      const jsFileRegex = /^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json)('|")$/i;
       jsFileStrings = jsFileStrings || [];
       jsFileStrings.forEach(jsFileString => {
-        if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json)('|")$/i)) {
+        if (jsFileString.match(jsFileRegex)) {
           const filePath = jsFileString.substr(1, jsFileString.length - 2);
           let fileName = filePath;
           if (fileName.match(/^\.\//)) {
@@ -164,7 +172,8 @@ class PreviewFrame extends React.Component {
     jsFiles.forEach(jsFile => {
       const fileName = escapeStringRegexp(jsFile.name);
       const fileRegex = new RegExp(`<script.*?src=('|")((\.\/)|\/)?${fileName}('|").*?>([\s\S]*?)<\/script>`, 'gmi');
-      htmlFile = htmlFile.replace(fileRegex, `<script data-tag="filestart-`+jsFile.name+`">\n${jsFile.content}\n</script>`);
+      const replacementString = `<script data-tag="${startTag}${jsFile.name}">\n${jsFile.content}\n</script>`;
+      htmlFile = htmlFile.replace(fileRegex, replacementString);
     });
 
     this.props.cssFiles.forEach(cssFile => {
@@ -185,7 +194,7 @@ class PreviewFrame extends React.Component {
       htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
     }
 
-    var scriptOffs = getAllScriptOffsets(htmlFile);
+    scriptOffs = getAllScriptOffsets(htmlFile);
     htmlFile += hijackConsoleScript(JSON.stringify(scriptOffs));
 
     return htmlFile;