Load iFrame on page load

client/commonFramework/add-faux-stream.js

@@ -1,35 +1,22 @@
 window.common = (function(global) {
   const {
-    $,
-    Rx: { Observable, Disposable },
     common = { init: [] }
   } = global;
 
 
-  function getFaux() {
+  const faux$ = common.getScriptContent$('/js/faux.js').shareReplay();
-    return new Observable(function(observer) {
-      const jqXHR = $.get('/js/faux.js')
-        .success(data => observer.onNext(data))
-        .fail(e => observer.onError(e))
-        .always(() => observer.onCompleted());
 
-      return new Disposable(() => {
+  common.hasJs = function hasJs(code = '') {
-        jqXHR.abort();
+    return code.match(/\<\s?script\s?\>/gi) &&
-      });
+      code.match(/\<\s?\/\s?script\s?\>/gi);
-    });
+  };
-  }
-
-  const faux$ = getFaux().shareReplay();
-
-  common.safeHTMLRun = function safeHTMLRun(code) {
-    if (!code.match(/\<script\>/gi)) {
-      return Observable.just(code);
-    }
 
+  common.addFaux$ = function addFaux$(code) {
     // grab user javaScript
     var scriptCode = code
       .split(/\<\s?script\s?\>/gi)[1]
       .split(/\<\s?\/\s?script\s?\>/gi)[0];
+
     return faux$.map(faux => faux + scriptCode);
   };
 

client/commonFramework/end.js

@@ -71,24 +71,24 @@ $(document).ready(function() {
       }
     );
 
+  if (challengeType === challengeTypes.HTML) {
     var $preview = $('#preview');
-  if ($preview.html()) {
+    return Observable.fromCallback($preview.ready, $preview)()
-    $preview.load(function() {
+      .delay(500)
-      common.executeChallenge()
+      .flatMap(() => common.executeChallenge$())
       .subscribe(
-          ({ output = '' }) => {
+        ({ code, tests }) => {
-            common.updateOutputDisplay(output);
+          common.displayTestResults(tests);
         },
         ({ err }) => {
-            common.updateOutputDisplay('' + err);
+          console.error(err);
         }
       );
-    });
+  }
-  } else if (
+
-    challengeType !== '2' &&
+  if (
-    challengeType !== '3' &&
+    challengeType === challengeTypes.BONFIRE &&
-    challengeType !== '4' &&
+    challengeType === challengeTypes.JS
-    challengeType !== '7'
   ) {
     Observable.just({})
       .delay(500)

client/commonFramework/execute-challenge-stream.js

@@ -84,9 +84,28 @@ window.common = (function(global) {
         // add head and tail and detect loops
         return Observable.just({ code: head + code + tail, original: code });
       })
-      .map(data => {
+      .flatMap(data => {
         if (common.challengeType === common.challengeTypes.HTML) {
-          return common.getScriptCode(data);
+
+          if (common.hasJs(code)) {
+            return common.addFaux$(data)
+              .flatMap(code => common.detectLoops$(code))
+              .flatMap(({ err }) => {
+                if (err) {
+                  return Observable.throw({ err });
+                }
+                return common.runPreviewTests$({
+                  code: data.code,
+                  tests: common.tests.slice()
+                });
+              });
+          }
+
+          return common.updatePreview$(data.code)
+            .flatMap(code => common.runPreviewTests$({
+              code,
+              tests: common.tests.slice()
+            }));
         }
 
         return common.addTestsToString(Object.assign(
@@ -95,8 +114,7 @@ window.common = (function(global) {
             code: common.removeComments(code),
             tests: common.tests.slice()
           }
-        ));
+        ))
-      })
         .flatMap(common.detectLoops$)
         .flatMap(({ err, code, data, userTests, original }) => {
             if (err) {
@@ -110,6 +128,7 @@ window.common = (function(global) {
               original,
               output: data.output.replace(/\\\"/gi, '')
             });
+        });
       })
       .catch(e => {
         return e && e.err ?

client/commonFramework/init.js

@@ -3,7 +3,7 @@ window.common = (function(global) {
   // all classes should be stored here
   // called at the beginning of dom ready
   const {
-    Rx: { config },
+    Rx: { Disposable, Observable, config },
     common = { init: [] }
   } = global;
 
@@ -86,5 +86,21 @@ window.common = (function(global) {
     return code.replace(regexp, text);
   };
 
+  common.getScriptContent$ = function getScriptContent$(script) {
+    return Observable.create(function(observer) {
+      const jqXHR = $.get(script)
+        .success(data => {
+          observer.onNext(data);
+          observer.onCompleted();
+        })
+        .fail(e => observer.onError(e))
+        .always(() => observer.onCompleted());
+
+      return new Disposable(() => {
+        jqXHR.abort();
+      });
+    });
+  };
+
   return common;
 })(window);

client/commonFramework/output-display.js

@@ -5,12 +5,12 @@ window.common = (function(global) {
     common = { init: [] }
   } = global;
 
-  const { challengeType = '0' } = common;
+  const { challengeTypes, challengeType = '0' } = common;
 
   if (
     !CodeMirror ||
-    challengeType === '0' ||
+    challengeType !== challengeTypes.JS ||
-    challengeType === '7'
+    challengeType !== challengeTypes.BONFIRE
   ) {
     common.updateOutputDisplay = () => {};
     common.appendToOutputDisplay = () => {};

client/commonFramework/update-preview.js

@@ -1,4 +1,4 @@
-window.common = (function({ common = { init: [] } }) {
+window.common = (function({ Rx: { Observable }, common = { init: [] } }) {
   var libraryIncludes = `
 <link
   rel='stylesheet'
@@ -19,21 +19,29 @@ window.common = (function({ common = { init: [] } }) {
 </style>
   `;
 
-  var iFrameScript = "<script src='/js/iFrameScripts.js'></script>";
+  const iFrameScript$ =
+    common.getScriptContent$('/js/iFrameScripts.js').shareReplay();
 
+  // runPreviewTests$ should be set up in the preview window
+  common.runPreviewTests$ =
+    () => Observable.throw({ err: new Error('run preview not enabled') });
 
-  common.updatePreview = function updatePreview(code = '', shouldTest = false) {
+  common.updatePreview$ = function updatePreview$(code = '') {
     const previewFrame = document.getElementById('preview');
     const preview = previewFrame.contentDocument ||
       previewFrame.contentWindow.document;
     if (!preview) {
-      return code;
+      return Observable.just(code);
     }
-    preview.open();
-    preview.write(libraryIncludes + code + (shouldTest ? iFrameScript : ''));
-    preview.close();
 
-    return code;
+    return iFrameScript$
+      .map(script => `<script>${script}</script>`)
+      .doOnNext(script => {
+        preview.open();
+        preview.write(libraryIncludes + code + script);
+        preview.close();
+      })
+      .map(() => code);
   };
 
   return common;

client/iFrameScripts.js

@@ -2,15 +2,19 @@
 window.$ = parent.$;
 window.$(function() {
   var _ = parent._;
+  var Rx = parent.Rx;
   var chai = parent.chai;
-  var expect = chai.expect;
+  var assert = chai.assert;
   var tests = parent.tests;
   var common = parent.common;
-  var editorValue = common.editor.getValue();
+  var code = common.editor.getValue();
   var editor = common.editor;
 
-  var userTests = common.tests.map(test => {
+  common.runPreviewTests$ =
-    var userTest = {};
+    function runPreviewTests$({ tests = [], ...rest }) {
+      return Rx.Observable.from(tests)
+        .map(test => {
+          const userTest = {};
           try {
             /* eslint-disable no-eval */
             eval(test);
@@ -24,5 +28,10 @@ window.$(function() {
               .replace(/\'/g, '')
               .replace(/\)/, '');
           }
-  });
+          return userTest;
+        })
+        .toArray()
+        .map(tests => ({ ...rest, tests }));
+    };
+
 });