move around static and dist folders to work with server bundle, and make preview generation work with this

.gitignore

@@ -7,6 +7,7 @@ dump.rdb
 public/*
 static/dist/
 static/css/app.min.css
+dist/
 alpha_editor_p5js_org.key
 alpha_editor_p5js_org.ca-bundle
 alpha_editor_p5js_org.crt

client/modules/IDE/components/PreviewFrame.jsx

@@ -5,7 +5,9 @@ import ReactDOM from 'react-dom';
 import srcDoc from 'srcdoc-polyfill';
 
 import loopProtect from 'loop-protect';
+import loopProtectScript from 'loop-protect/dist/loop-protect.min';
 import { JSHINT } from 'jshint';
+import decomment from 'decomment';
 import { getBlobUrl } from '../actions/files';
 import { resolvePathToFile } from '../../../../server/utils/filePath';
 import {
@@ -16,73 +18,9 @@ import {
   EXTERNAL_LINK_REGEX,
   NOT_EXTERNAL_LINK_REGEX
 } from '../../../../server/utils/fileUtils';
+import { hijackConsole, hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
+  from '../../../utils/consoleUtils';
 
-const decomment = require('decomment');
-
-const startTag = '@fs-';
-
-function getAllScriptOffsets(htmlFile) {
-  const offs = [];
-  let found = true;
-  let lastInd = 0;
-  let ind = 0;
-  let endFilenameInd = 0;
-  let filename = '';
-  let lineOffset = 0;
-  while (found) {
-    ind = htmlFile.indexOf(startTag, lastInd);
-    if (ind === -1) {
-      found = false;
-    } else {
-      endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3);
-      filename = htmlFile.substring(ind + startTag.length, endFilenameInd);
-      // the length of hijackConsoleErrorsScript is 33 lines
-      lineOffset = htmlFile.substring(0, ind).split('\n').length + 33;
-      offs.push([lineOffset, filename]);
-      lastInd = ind + 1;
-    }
-  }
-  return offs;
-}
-
-function hijackConsoleErrorsScript(offs) {
-  const s = `
-    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];
-    }
-    // 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 (url.match(${EXTERNAL_LINK_REGEX}) !== null && error.stack){
-          var errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
-          var fileInfo = getScriptOff(errorNum);
-          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
-        } else {
-          var fileInfo = getScriptOff(lineNumber);
-          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
-        }
-        window.parent.postMessage([{
-          method: 'error',
-          arguments: data,
-          source: fileInfo[1]
-        }], '*');
-      return false;
-    };
-  `;
-  return s;
-}
 
 class PreviewFrame extends React.Component {
 
@@ -202,8 +140,8 @@ class PreviewFrame extends React.Component {
     this.resolveStyles(sketchDoc, resolvedFiles);
 
     const scriptsToInject = [
-      '/loop-protect.min.js',
+      loopProtectScript,
-      '/hijackConsole.js'
+      hijackConsole
     ];
     const accessiblelib = sketchDoc.createElement('script');
     accessiblelib.setAttribute(
@@ -238,7 +176,7 @@ class PreviewFrame extends React.Component {
 
     scriptsToInject.forEach((scriptToInject) => {
       const script = sketchDoc.createElement('script');
-      script.src = scriptToInject;
+      script.text = scriptToInject;
       sketchDoc.head.appendChild(script);
     });
 

client/utils/consoleUtils.js

@@ -0,0 +1,104 @@
+import {
+  EXTERNAL_LINK_REGEX
+} from '../../server/utils/fileUtils';
+
+export const hijackConsole = `var iframeWindow = window;
+  var originalConsole = iframeWindow.console;
+  iframeWindow.console = {};
+  
+  var methods = [
+    'debug', 'clear', 'error', 'info', 'log', 'warn'
+  ];
+  
+  var consoleBuffer = [];
+  var LOGWAIT = 500;
+  
+  methods.forEach( function(method) {
+    iframeWindow.console[method] = function() {
+      originalConsole[method].apply(originalConsole, arguments);
+  
+      var args = Array.from(arguments);
+      args = args.map(function(i) {
+        // catch objects
+        return (typeof i === 'string') ? i : JSON.stringify(i);
+      });
+  
+      consoleBuffer.push({
+        method: method,
+        arguments: args,
+        source: 'sketch'
+      });
+    };
+  });
+  
+  setInterval(function() {
+    if (consoleBuffer.length > 0) {
+      window.parent.postMessage(consoleBuffer, '*');
+      consoleBuffer.length = 0;
+    }
+  }, LOGWAIT);`;
+
+export const hijackConsoleErrorsScript = (offs) => {
+  const s = `
+    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];
+    }
+    // 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 (url.match(${EXTERNAL_LINK_REGEX}) !== null && error.stack){
+          var errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
+          var fileInfo = getScriptOff(errorNum);
+          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
+        } else {
+          var fileInfo = getScriptOff(lineNumber);
+          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
+        }
+        window.parent.postMessage([{
+          method: 'error',
+          arguments: data,
+          source: fileInfo[1]
+        }], '*');
+      return false;
+    };
+  `;
+  return s;
+};
+
+export const startTag = '@fs-';
+
+export const getAllScriptOffsets = (htmlFile) => {
+  const offs = [];
+  let found = true;
+  let lastInd = 0;
+  let ind = 0;
+  let endFilenameInd = 0;
+  let filename = '';
+  let lineOffset = 0;
+  while (found) {
+    ind = htmlFile.indexOf(startTag, lastInd);
+    if (ind === -1) {
+      found = false;
+    } else {
+      endFilenameInd = htmlFile.indexOf('.js', ind + startTag.length + 3);
+      filename = htmlFile.substring(ind + startTag.length, endFilenameInd);
+      // the length of hijackConsoleErrorsScript is 33 lines
+      lineOffset = htmlFile.substring(0, ind).split('\n').length + 33;
+      offs.push([lineOffset, filename]);
+      lastInd = ind + 1;
+    }
+  }
+  return offs;
+};

index.js

@@ -1,7 +1,7 @@
 if (process.env.NODE_ENV === 'production') {
-  process.env.webpackAssets = JSON.stringify(require('./static/dist/manifest.json'));
+  process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json'));
-  process.env.webpackChunkAssets = JSON.stringify(require('./static/dist/chunk-manifest.json'));
+  process.env.webpackChunkAssets = JSON.stringify(require('./dist/static/chunk-manifest.json'));
-  require('./static/dist/server.bundle.js');
+  require('./dist/server.bundle.js');
 } else {
   require('babel-register');
   require('babel-polyfill');

server/server.js

@@ -56,7 +56,7 @@ app.options('*', corsMiddleware);
 
 // Body parser, cookie parser, sessions, serve public assets
 
-app.use(Express.static(path.resolve(__dirname, '../static'), {
+app.use(Express.static(path.resolve(__dirname, '../dist/static'), {
   maxAge: process.env.STATIC_MAX_AGE || (process.env.NODE_ENV === 'production' ? '1d' : '0')
 }));
 app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

server/views/index.js

@@ -11,7 +11,7 @@ export function renderIndex() {
       <meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
       <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
       <title>p5.js Web Editor</title>
-      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='/dist${assetsManifest['/app.css']}' />` : ''}
+      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
       <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel='shortcut icon' href='https://raw.githubusercontent.com/processing/p5.js-website-OLD/master/favicon.ico' type='image/x-icon'/ >
@@ -25,8 +25,8 @@ export function renderIndex() {
           window.webpackManifest = ${JSON.stringify(chunkManifest)};
           //]]>` : ''}
         </script>
-        <script src='${process.env.NODE_ENV === 'production' ? `/dist${assetsManifest['/vendor.js']}` : '/dist/vendor.js'}'></script>
+        <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/vendor.js']}` : '/vendor.js'}'></script>
-        <script src='${process.env.NODE_ENV === 'production' ? `/dist${assetsManifest['/app.js']}` : '/dist/app.js'}'></script>
+        <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
         <script>
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

static/hijackConsole.js

@@ -1,35 +0,0 @@
-var iframeWindow = window;
-var originalConsole = iframeWindow.console;
-iframeWindow.console = {};
-
-var methods = [
-  'debug', 'clear', 'error', 'info', 'log', 'warn'
-];
-
-var consoleBuffer = [];
-var LOGWAIT = 500;
-
-methods.forEach( function(method) {
-  iframeWindow.console[method] = function() {
-    originalConsole[method].apply(originalConsole, arguments);
-
-    var args = Array.from(arguments);
-    args = args.map(function(i) {
-      // catch objects
-      return (typeof i === 'string') ? i : JSON.stringify(i);
-    });
-
-    consoleBuffer.push({
-      method: method,
-      arguments: args,
-      source: 'sketch'
-    });
-  };
-});
-
-setInterval(function() {
-  if (consoleBuffer.length > 0) {
-    window.parent.postMessage(consoleBuffer, '*');
-    consoleBuffer.length = 0;
-  }
-}, LOGWAIT);

static/loop-protect.min.js

@@ -1,2 +0,0 @@
-/*! loop-protect | v1.0.1 | (c) 2016 Remy Sharp | http://jsbin.mit-license.org */
-!function(a,b){"use strict";"object"==typeof exports&&"object"==typeof module?module.exports=b(a):"function"==typeof define&&define.amd?define(b(a)):"object"==typeof exports?module.exports=b(a):a.loopProtect=b(a)}(this,function(a){"use strict";function b(a,b){if(0===a)return!1;var c=a,d=1,e=-1,f=-1;do{if(e=b[c].indexOf("*/"),f=b[c].indexOf("/*"),e!==-1&&d++,e===b[c].length-2&&f!==-1&&d--,f!==-1&&(d--,0===d))return!0;c-=1}while(c>=0);return!1}function c(a,b){for(var c;--a>-1;){if(c=b.substr(a,1),'"'===c||"'"===c||"."===c)return!0;if("/"===c||"*"===c){var d=b.substr(a-1,1);if("/"===d)return!0}}return!1}function d(a,b,c){h.lastIndex=0,i.lastIndex=0;var d=!1,e=c.slice(b).join("\n").substr(a).replace(i,"");return e.replace(h,function(a,b,c){var f=e.substr(0,c).replace(j,"").trim();0===f.length&&(d=!0)}),d}function e(a,e){function f(a,b,c){return b.slice(0,c)+"{;"+m+"({ line: "+a+", reset: true }); "+b.slice(c)}var h=[],j=a.split("\n"),l=!1,m=k.alias+".protect",n={},o={},p=null;return e||(e=0),j.forEach(function(a,k){if(g.lastIndex=0,i.lastIndex=0,!l){a.toLowerCase().indexOf("noprotect")!==-1&&(l=!0);var q=-1,r=-1,s=k,t=k-e+1,u="",v=!1,w=!1,x=!1,y=a.match(g)||[],z=y.length?y[0]:"",A=a.match(i)||[],B=0,C=0,D=!1;if(A.length&&(q=a.indexOf(A[1]),c(q,a)||b(k,j)||d(q,k,j)&&(p=k)),!n[k]){if(o[k])return void h.push(a);if(z&&1===y.length&&a.indexOf("jsbin")===-1){if(v="do"===z,r=q=a.indexOf(z),c(q,a))return void h.push(a);if(b(k,j))return void h.push(a);for(q=a.indexOf(z)+z.length,q===a.length&&q===a.length&&k<j.length-1&&(h.push(a),k++,a=j[k],n[k]=!0,q=0);q<a.length;){if(u=a.substr(q,1),"("===u&&B++,")"===u&&(B--,0===B&&x===!1&&(x=q)),"{"===u&&C++,"}"===u&&C--,0===B&&(";"===u||"{"===u)){if(";"===u)k!==s?(h[s]=h[s].substring(0,x+1)+"{\nif ("+m+"({ line: "+t+" })) break;\n"+h[s].substring(x+1),a+="\n}}\n"):a=a.substring(0,x+1)+"{\nif ("+m+"({ line: "+t+" })) break;\n"+a.substring(x+1)+"\n}}\n",D=!0;else if("{"===u){var E=";\nif ("+m+"({ line: "+t+" })) break;\n";a=a.substring(0,q+1)+E+a.substring(q+1),q+=E.length}if(k===s&&null===p?(a=f(t,a,r),q+=(";"+m+"({ line: "+k+", reset: true }); ").length):null===p?h[s]=f(t,h[s],r):(void 0===h[p]&&(p--,r=0),h[p]=f(t,h[p],r),p=null),v){for(w=!1;q<a.length;){if(u=a.substr(q,1),"{"===u&&C++,"}"===u&&C--,w=0===C,w&&a.indexOf("while")!==-1)return a+="}",h.push(a),void(n[k]=!0);q++,q===a.length&&k<j.length-1&&(h.push(a),n[k]=!0,k++,a=j[k],q=0)}return}if(D)return void h.push(a);for(;null!==a;){if(u=a.substr(q,1),"{"===u&&C++,"}"===u&&(C--,0===C))return a=a.substring(0,q+1)+"}"+a.substring(q+1),h.push(a),void(n[k]=!0);q++,q>=a.length&&(h.push(a),n[k]=!0,k++,a=j[k],q=0)}return}q++,q===a.length&&k<j.length-1&&(h.push(a),k++,a=j[k],n[k]=!0,q=0)}}else h.push(a)}}}),l?a:h.join("\n")}var f=null,g=/\b(for|while|do)\b/g,h=/\b(for|while|do)\b/,i=/\b(?!default:)([a-z_]{1}\w+:)/i,j=/(?:\/\*(?:[\s\S]*?)\*\/)|(?:([\s;])+\/\/(?:.*)$)/gm,k=e;return k.counters={},k.debug=function(a){f=a?function(){console.log.apply(console,[].slice.apply(arguments))}:function(){}},k.debug(!1),k.alias="loopProtect",k.protect=function(a){k.counters[a.line]=k.counters[a.line]||{};var b=k.counters[a.line],c=(new Date).getTime();return a.reset&&(b.time=c,b.hit=0,b.last=0),b.hit++,c-b.time>500?(k.hit(a.line),!0):(b.last++,!1)},k.hit=function(b){var c="Exiting potential infinite loop at line "+b+'. To disable loop protection: add "// noprotect" to your code';a.proxyConsole?a.proxyConsole.error(c):console.error(c)},k.reset=function(){k.counters={}},k});

webpack.config.dev.js

@@ -15,9 +15,9 @@ module.exports = {
     ]
   },
   output: {
-    path: `${__dirname}/dist/`,
+    path: `${__dirname}`,
     filename: 'app.js',
-    publicPath: '/dist/'
+    publicPath: '/'
   },
   resolve: {
     extensions: ['.js', '.jsx'],

webpack.config.prod.js

@@ -37,9 +37,9 @@ module.exports = {
     ]
   },
   output: {
-    path: `${__dirname}/static/dist`,
+    path: `${__dirname}/dist/static`,
     filename: '[name].[chunkhash].js',
-    publicPath: '/dist/'
+    publicPath: '/'
   },
 
   resolve: {

webpack.config.server.js

@@ -7,7 +7,7 @@ module.exports = {
   entry: path.resolve(__dirname, 'server/server.js'),
 
   output: {
-    path: __dirname + '/static/dist/',
+    path: __dirname + '/dist/',
     filename: 'server.bundle.js',
   },