Challenge now display console.log in output window

2016-05-27 17:11:25 -07:00
parent 256182836a
commit 2466d66eb1
10 changed files with 127 additions and 55 deletions
--- a/client/frame-runner.js
+++ b/client/frame-runner.js
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
      output = eval(source);
      /* eslint-enable no-eval */
    } catch (e) {
-      output = e.message;
+      output = e.message + '\n' + e.stack;
      window.__err = e;
    }
    return output;
@@ -68,17 +68,6 @@ document.addEventListener('DOMContentLoaded', function() {
      .toArray();
  };

-  // used when updating preview without running tests
-  document.__checkPreview$ = function checkPreview$(args) {
-    if (window.__err) {
-      return Rx.Observable.throw(window.__err);
-    }
-    return Rx.Observable.just(args);
-  };
-
-  // now that the runPreviewTest$ is defined
-  // we set the subject to true
-  // this will let the updatePreview
-  // script now that we are ready.
+  // notify that the window methods are ready to run
  frameReady.onNext(null);
 });
--- a/client/rechallenge/transformers.js
+++ b/client/rechallenge/transformers.js
@@ -1,6 +1,8 @@
 import { Observable } from 'rx';
 import loopProtect from 'loop-protect';

+import { updateContents } from '../../common/utils/polyvinyl';
+
 loopProtect.hit = function hit(line) {
  var err = 'Error: Exiting potential infinite loop at line ' +
    line +
@@ -16,8 +18,7 @@ const transformersForHtmlJS = {
    {
      name: 'add-loop-protect',
      transformer: function addLoopProtect(file) {
-        file.contents = loopProtect(file.contents);
-        return file;
+        return updateContents(loopProtect(file.contents), file);
      }
    }
  ]
--- a/client/sagas/execute-challenge-saga.js
+++ b/client/sagas/execute-challenge-saga.js
@@ -7,7 +7,7 @@ import types from '../../common/app/routes/challenges/redux/types';
 import {
  frameMain,
  frameTests,
-  frameOutput
+  initOutput
 } from '../../common/app/routes/challenges/redux/actions';
 import { setExt, updateContents } from '../../common/utils/polyvinyl';

@@ -98,18 +98,36 @@ export default function executeChallengeSaga(action$, getState) {

          return Observable.combineLatest(head$, frameRunner$)
            .map(([ head, frameRunner ]) => {
-              return head + `<body>${source}</body>` + frameRunner;
-            })
-            .map(build => ({ source, build }));
+              const body = `
+                <body>
+                  <!-- fcc-start-source -->
+                    ${source}
+                  <!-- fcc-end-source -->
+                </body>`;
+              return {
+                build: head + body + frameRunner,
+                source,
+                head
+              };
+            });
        })
        .flatMap(payload => {
-          const actions = [];
-          actions.push(frameMain(payload));
-          if (type !== types.updateMain) {
+          const actions = [
+            frameMain(payload)
+          ];
+          if (type === types.executeChallenge) {
            actions.push(frameTests(payload));
-            actions.push(frameOutput(payload));
          }
          return Observable.from(actions, null, null, Scheduler.default);
-        });
+        })
+        .startWith((
+          type === types.executeChallenge ?
+            initOutput('// running test') :
+            null
+        ))
+        .catch(error => Observable.just({
+          type: 'app.error',
+          error
+        }));
    });
 }
--- a/client/sagas/frame-saga.js
+++ b/client/sagas/frame-saga.js
@@ -1,9 +1,9 @@
 import Rx, { Observable, Subject } from 'rx';
-import tape from 'tape';
+import loopProtect from 'loop-protect';
 import types from '../../common/app/routes/challenges/redux/types';
 import {
  updateOutput
-} from '../../common/app/routes/challenges/redux/types';
+} from '../../common/app/routes/challenges/redux/actions';
 import {
  updateTests
 } from '../../common/app/routes/challenges/redux/actions';
@@ -11,7 +11,6 @@ import {
 // we use three different frames to make them all essentially pure functions
 const mainId = 'fcc-main-frame';
 const testId = 'fcc-test-frame';
-const outputId = 'fcc-output-frame';

 const createHeader = (id = mainId) => `
  <script>
@@ -38,22 +37,45 @@ function getFrameDocument(document, id = mainId) {
  if (!frame) {
    frame = createFrame(document, id);
  }
-  return frame.contentDocument || frame.contentWindow.document;
+  frame.contentWindow.loopProtect = loopProtect;
+  return {
+    frame: frame.contentDocument || frame.contentWindow.document,
+    frameWindow: frame.contentWindow
+  };
 }

-function frameMain({ build } = {}, document) {
-  const main = getFrameDocument(document);
+const consoleReg = /(?:\b)console(\.log\S+)/g;
+const sourceReg =
+  /(<!-- fcc-start-source -->)([\s\S]*?)(?=<!-- fcc-end-source -->)/g;
+function proxyConsole(build, source) {
+  const newSource = source.replace(consoleReg, (match, methodCall) => {
+    return 'window.__console' + methodCall;
+  });
+  return build.replace(sourceReg, '\$1' + newSource);
+}
+
+function buildProxyConsole(window, proxyLogger$) {
+  const oldLog = window.console.log.bind(console);
+  window.__console = {};
+  window.__console.log = function proxyConsole(...args) {
+    proxyLogger$.onNext(args);
+    return oldLog(...args);
+  };
+}
+
+function frameMain({ build, source } = {}, document, proxyLogger$) {
+  const { frame: main, frameWindow } = getFrameDocument(document);
  refreshFrame(main);
+  buildProxyConsole(frameWindow, proxyLogger$);
  main.open();
-  main.write(createHeader() + build);
+  main.write(createHeader() + proxyConsole(build, source));
  main.close();
 }

 function frameTests({ build, source } = {}, document) {
-  const tests = getFrameDocument(document, testId);
+  const { frame: tests } = getFrameDocument(document, testId);
  refreshFrame(tests);
  tests.Rx = Rx;
-  tests.tape = tape;
  tests.__source = source;
  tests.open();
  tests.write(createHeader(testId) + build);
@@ -62,32 +84,33 @@ function frameTests({ build, source } = {}, document) {

 export default function frameSaga(actions$, getState, { window, document }) {
  window.__common = {};
+  window.__common.shouldRun = () => true;
+  const proxyLogger$ = new Subject();
  const runTests$ = window.__common[testId + 'Ready$'] =
    new Subject();
-  const updateOutput$ = window.__common[outputId + 'Ready$'] =
-    new Subject();
-  window.__common.shouldRun = () => true;
  const result$ = actions$
    .filter(({ type }) => (
      type === types.frameMain ||
-      type === types.frameTests
+      type === types.frameTests ||
+      type === types.frameOutput
    ))
    .map(action => {
      if (action.type === types.frameMain) {
-        return frameMain(action.payload, document);
+        return frameMain(action.payload, document, proxyLogger$);
      }
-      if (action.type === types.frameTests) {
-        return frameTests(action.payload, document);
-      }
-      return null;
+      return frameTests(action.payload, document);
    });

  return Observable.merge(
-    updateOutput$.map(updateOutput),
+    proxyLogger$.map(args => {
+      return updateOutput(args);
+    }),
    runTests$.flatMap(() => {
-      const frame = getFrameDocument(document, testId);
+      const { frame } = getFrameDocument(document, testId);
      const { tests } = getState().challengesApp;
-      return frame.__runTests$(tests).map(updateTests);
+      return frame.__runTests$(tests)
+        .map(updateTests)
+        .concat(Observable.just(updateOutput('// tests completed')).delay(250));
    }),
    result$
  );