Add gulp build of commonFramework

client/commonFramework/create-editor.js

@@ -1,24 +1,25 @@
 window.common = (function(global) {
   const {
+    Rx: { Subject, Observable },
     CodeMirror,
     emmetCodeMirror,
     common = { init: [] }
   } = global;
 
-  const { challengeType = '0' } = common;
+  const { challengeType = '0', challengeTypes } = common;
 
   if (
     !CodeMirror ||
-    challengeType === '0' ||
-    challengeType === '7'
+    challengeType === challengeTypes.BONFIRE ||
+    challengeType === challengeTypes.ZIPLINE ||
+    challengeType === challengeTypes.VIDEO ||
+    challengeType === challengeTypes.STEP ||
+    challengeType === challengeTypes.HIKES
   ) {
     common.editor = {};
     return common;
   }
 
-  var delay;
-  var codeStorageFactory = common.codeStorageFactory;
-
   var editor = CodeMirror.fromTextArea(
     document.getElementById('codeEditor'),
     {
@@ -37,22 +38,12 @@ window.common = (function(global) {
 
   editor.setSize('100%', 'auto');
 
-  var codeStorage = common.codeStorage =
-    codeStorageFactory(editor, common.challengeName);
+  common.editorKeyUp$ = Observable.fromEventPattern(
+    () => editor.on('keyup'),
+    () => editor.off('keyup')
+  );
 
-  editor.on('keyup', function() {
-    clearTimeout(codeStorage.updateTimeoutId);
-    codeStorage.updateTimeoutId = setTimeout(
-      codeStorage.updateStorage.bind(codeStorage),
-      codeStorage.updateWait
-    );
-  });
-
-  // Initialize CodeMirror editor with a nice html5 canvas demo.
-  editor.on('keyup', function() {
-    clearTimeout(delay);
-    delay = setTimeout(common.updatePreview, 300);
-  });
+  common.editorExecute$ = new Subject();
 
   editor.setOption('extraKeys', {
     Tab: function(cm) {
@@ -72,11 +63,11 @@ window.common = (function(global) {
       }
     },
     'Ctrl-Enter': function() {
-      common.executeChallenge(true);
+      common.editorExecute$.onNext();
       return false;
     },
     'Cmd-Enter': function() {
-      common.executeChallenge(true);
+      common.editorExecute$.onNext();
       return false;
     }
   });
@@ -104,12 +95,12 @@ window.common = (function(global) {
     );
   }
   common.init.push(function() {
-    var editorValue;
+    let editorValue;
     if (common.codeUri.isAlive()) {
       editorValue = common.codeUri.parse();
     } else {
-      editorValue = codeStorage.isAlive() ?
-        codeStorage.getStoredValue() :
+      editorValue = common.codeStorage.isAlive() ?
+        common.codeStorage.getStoredValue() :
         common.seed;
     }
 

client/commonFramework/init.js

@@ -85,5 +85,4 @@ window.common = (function(global) {
   };
 
   return common;
-})();
-
+})(window);

client/commonFramework/phone-scroll-lock.js

@@ -129,4 +129,4 @@ window.common = (function({ common = { init: [] }}) {
   });
 
   return common;
-}());
+}(window));

gulpfile.js

@@ -106,8 +106,22 @@ var paths = {
     'client/plugin.js'
   ],
 
-  dependents: [
-    'client/commonFramework.js'
+  commonFramework: [
+    'init',
+    'code-storage',
+    'code-uri',
+    'create-editor',
+    'detect-loops-stream',
+    'display-test-results',
+    'execute-challenge-stream',
+    'out-display',
+    'phone-scroll-lock',
+    'report-issue',
+    'run-tests-stream',
+    'show-completion',
+    'step-challenge',
+    'test-script-stream',
+    'update-preview'
   ],
 
   less: './client/less/main.less',
@@ -133,6 +147,12 @@ var webpackOptions = {
   devtool: 'inline-source-map'
 };
 
+function formatCommonFrameworkPaths() {
+  return this.map(function(script) {
+    return 'client/commonFramework/' + script + '.js';
+  });
+}
+
 function errorHandler() {
   var args = Array.prototype.slice.call(arguments);
 
@@ -405,9 +425,10 @@ gulp.task('dependents', ['js'], function() {
     path.join(__dirname, paths.manifest, 'js-manifest.json')
   );
 
-  return gulp.src(paths.dependents)
+  return gulp.src(formatCommonFrameworkPaths.call(paths.commonFramework))
     .pipe(plumber({ errorHandler: errorHandler }))
     .pipe(babel())
+    .pipe(concat('commonFramework.js'))
     .pipe(__DEV__ ? gutil.noop() : uglify())
     .pipe(revReplace({ manifest: manifest }))
     .pipe(gulp.dest(dest))
@@ -474,7 +495,10 @@ gulp.task('watch', watchDependents, function() {
   gulp.watch(paths.js, ['js']);
   gulp.watch(paths.challenges, ['test-challenges', 'reload']);
   gulp.watch(paths.js, ['js', 'dependents']);
-  gulp.watch(paths.dependents, ['dependents']);
+  gulp.watch(
+    formatCommonFrameworkPaths.call(paths.commonFramework),
+    ['dependents']
+  );
   gulp.watch(paths.manifest + '/*.json', ['build-manifest-watch']);
   gulp.watch(webpackConfig.output.path + '/bundle.js', ['pack-watch-manifest']);
 });

server/views/coursewares/showHTML.jade

@@ -1,8 +1,8 @@
 extends ../layout-wide
 block content
-    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
-    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
-    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
+    link(rel='stylesheet', href='/bower_components/CodeMirror/lib/codemirror.css')
+    link(rel='stylesheet', href='/bower_components/CodeMirror/addon/lint/lint.css')
+    link(rel='stylesheet', href='/bower_components/Codemirror/theme/monokai.css')
     link(rel='stylesheet', href='/css/ubuntu.css')
     .row.courseware-height
         .col-md-3.col-lg-3
@@ -87,6 +87,10 @@ block content
       common.dashedName = !{JSON.stringify(dashedName)};
 
       common.started = Math.floor(Date.now());
+      common.init.push(function() {
+        common.editor.setOption('lint', false);
+        common.editor.setOption('mode', 'text/html');
+      });
 
     include ../partials/challenge-footer
     script.
@@ -96,5 +100,3 @@ block content
         }
       });
 
-      editor.setOption('lint', false);
-      editor.setOption("mode", "text/html");