Farewell CoffeeScript

We are breaking up. I'm sorry, it's not you, it's me. I really like
you, but I feel like now is that time in my life where I grow up
and face some big challenges and decisions.
The first time I saw you, I couldn't take my eyes off of your
beautiful list comprehensions. Your arrow functions were amazing.
I bet you remember all the special moments we had together. It was
pretty fantastic. It was love at first sight.

You remind me of my parents, Mr. Python and Mrs. Ruby, who taught
me great things in life. But now, I can make my own decisions
independently of my parents. As I said, there's nothing really wrong
with you. It's just that I need to go dangerous, I need to live that
adventure that every man is called to. To take my backpack and just
go, discover the world out there.

With you, I don't have my freedom to name my own functions. I can't
make classes the way I want to. You don't let me do that. And I know
your intentions are the best, please don't get offended here. I know
you are trying to save me against evil code and odd bugs. But I have
grown up and those aren't issues anymore. Also, in the end of the
day, your generated JavaScript is just about 5% more verbose than
actual CoffeeScript code, so I don't see real benefit.

I think I'll survive. This time, I actually believe I can JavaScript.
I don't particularly like it, I miss you sometimes, my dear.
But I got courage. This will be tough, but it's my destiny. It's what
I'm called to do. Sorry.

TODO

@@ -50,6 +50,7 @@ DONE Render nondraggable Completion for output diagram
 DONE Controller logic to include completion time
 DONE Update examples with regard to completion time
 DONE New Model View Interpreter architecture, for OperatorsMenu
+TODO Replace CoffeeScript with JavaScript
 TODO Lower bound on completion time, no earlier than any marble time
   - Marble has a static subject for mousedown event, which covers all instances
   of marble. Each subject notification points to the marble instance's id. ALSO

gulpfile.js

@@ -1,5 +1,4 @@
 var gulp = require('gulp');
-var coffee = require('gulp-coffee');
 var less = require('gulp-less');
 var browserify = require('gulp-browserify');
 var uglify = require('gulp-uglify');
@@ -9,13 +8,6 @@ var path = require('path');
 
 // Based on https://github.com/deepak1556/gulp-browserify/issues/7
 
-gulp.task('coffee', function() {
-  gutil.log(gutil.colors.yellow("Compiling CoffeeScript..."));
-  return gulp.src(['./src/**/*.coffee'])
-    .pipe(coffee({bare: true}).on('error', gutil.log))
-    .pipe(gulp.dest('./build/src'));
-});
-
 gulp.task('less', function() {
   gutil.log(gutil.colors.yellow("Compiling LESS styles..."));
   gulp.src('./styles/main.less')
@@ -25,19 +17,19 @@ gulp.task('less', function() {
     .pipe(gulp.dest('./dist/css'));
 });
 
-gulp.task('dev-browserify', ['coffee'], function() {
+gulp.task('dev-browserify', [], function() {
   gutil.log(gutil.colors.yellow("Packing with browserify..."));
-  return gulp.src(['./build/src/**/*.js'])
+  return gulp.src(['./src/**/*.js'])
     .pipe(browserify({
       insertGlobals: true,
       debug: true
     }))
     .pipe(gulp.dest('./build/browserified-js'));
 });
 
-gulp.task('browserify', ['coffee'], function() {
+gulp.task('browserify', [], function() {
   gutil.log(gutil.colors.yellow("Packing with browserify..."));
-  return gulp.src(['./build/src/**/*.js'])
+  return gulp.src(['./src/**/*.js'])
     .pipe(browserify({
       insertGlobals: false,
       debug: false,
@@ -57,7 +49,7 @@ gulp.task('uglify', ['browserify'], function() {
 gulp.task('post-clean-up', ['uglify'], function() {
   gutil.log(gutil.colors.yellow("Cleaning up temporary files..."));
   return gulp.src(
-      [__dirname+'/build/src/**/*', __dirname+'/build/browserified-js/**/*'],
+      [__dirname+'/build/browserified-js/**/*'],
       {read: false}
     )
     .pipe(rimraf());
@@ -74,7 +66,7 @@ gulp.task('default', function() {
   gulp.run('dev-build');
 
   gutil.log("Watching for changes...");
-  gulp.watch(['./src/**/*.coffee', './styles/**/*.less'], function(event) {
+  gulp.watch(['./src/**/*.js', './styles/**/*.less'], function(event) {
     if (event.path) {
       gutil.log("Change detected in ", gutil.colors.magenta(event.path));
     } else {

package.json

@@ -17,10 +17,8 @@
   },
   "devDependencies": {
     "browserify": "~2.36.0",
-    "coffeeify": "~0.6.0",
     "gulp": "~3.8.6",
     "gulp-browserify": "^0.5.0",
-    "gulp-coffee": "^2.1.1",
     "gulp-less": "^1.3.2",
     "gulp-rimraf": "^0.1.0",
     "gulp-uglify": "^0.3.1",
@@ -30,7 +28,7 @@
   },
   "scripts": {
     "preinstall": "rm -rf build && rm -rf node_modules",
-    "postinstall": "mkdir build && mkdir build/src && ln -s ../build/src node_modules/rxmarbles && ln -s ../package.json node_modules/package.json",
+    "postinstall": "ln -s ../src node_modules/rxmarbles && ln -s ../package.json node_modules/package.json",
     "update-gh-pages": "git checkout gh-pages && git merge master && rm dist/js/app.js && gulp build && git add dist/js/app.js && git commit --amend --no-edit && git push origin gh-pages && git checkout master"
   }
 }

src/app.js

@@ -0,0 +1,31 @@
+/*
+ * App entry-point.
+ */
+var Package = require('package.json');
+var binder = require('rxmarbles/binder');
+var Sandbox = require('rxmarbles/views/sandbox');
+var OperatorsMenuModel = require('rxmarbles/models/operators-menu');
+var OperatorsMenuView = require('rxmarbles/views/operators-menu');
+var OperatorsMenuInterpreter = require('rxmarbles/interpreters/operators-menu');
+var DOMDelegator = require('dom-delegator');
+var Utils = require('rxmarbles/views/utils');
+
+var domDelegator = DOMDelegator();
+
+var sandboxContainer = document.querySelector(".js-sandboxContainer");
+sandboxContainer.innerHTML = "";
+sandboxContainer.appendChild(Sandbox.render());
+
+binder(OperatorsMenuModel, OperatorsMenuView, OperatorsMenuInterpreter);
+// binder(SandboxModel, SandboxView, SandboxInterpreter);
+
+Utils.renderVTreeStream(OperatorsMenuView.vtree$, ".js-operatorsMenuContainer");
+
+var versionElement = document.querySelector("a.js-appVersion");
+versionElement.textContent = "v" + Package.version;
+versionElement.href = "https://github.com/staltz/rxmarbles/releases/tag/v" + Package.version;
+
+var rxVersion = Package.dependencies.rx.replace(/(~|\^|\.\+)*/g, "");
+var rxElement = document.querySelector("a.js-rxjsVersion");
+rxElement.textContent = "RxJS v" + rxVersion;
+rxElement.href = "https://github.com/Reactive-Extensions/RxJS/tree/v" + rxVersion;

src/binder.js

@@ -0,0 +1,8 @@
+/*
+ * Important Model-View-Interpreter binding function.
+ */
+module.exports = function(model, view, interpreter) {
+  view.observe(model);
+  interpreter.observe(view);
+  model.observe(interpreter);
+};

src/data/boolean-examples.js

@@ -0,0 +1,48 @@
+var Rx = require('rx');
+
+module.exports = {
+  "all": {
+    "label": "all(x => x < 10)",
+    "inputs": [
+      [{t:5, d:1}, {t:15, d:2}, {t:25, d:3}, {t:35, d:4}, {t:65, d:5}, 80]
+    ],
+    "apply": function(inputs) {
+      return inputs[0].all(function(x) { return x.content < 10; });
+    }
+  },
+
+  "any": {
+    "label": "any(x => x > 10)",
+    "inputs": [
+      [{t:5, d:2}, {t:15, d:30}, {t:25, d:22}, {t:35, d:5}, {t:45, d:60}, {t:55, d:1}]
+    ],
+    "apply": function(inputs) {
+      return inputs[0].any(function(x) { return x.content > 10; });
+    }
+  },
+
+  "contains": {
+    "label": "contains(22)",
+    "inputs": [
+      [{t:5, d:2}, {t:15, d:30}, {t:25, d:22}, {t:35, d:5}, {t:45, d:60}, {t:55, d:1}]
+    ],
+    "apply": function(inputs) {
+      return inputs[0].contains({ content: 22 }, function(x, y) {
+        return x.content === y.content;
+      });
+    }
+  },
+
+  "sequenceEqual": {
+    "label": "sequenceEqual",
+    "inputs": [
+      [{t:5, d:1}, {t:15, d:2}, {t:25, d:3}, {t:35, d:4}, {t:65, d:5}, 85],
+      [{t:2, d:1}, {t:20, d:2}, {t:40, d:3}, {t:70, d:4}, {t:77, d:5}, 85]
+    ],
+    "apply": function(inputs) {
+      return inputs[0].sequenceEqual(inputs[1], function(x, y) {
+        return x.content === y.content;
+      });
+    }
+  }
+};

src/data/combine-examples.js

@@ -0,0 +1,72 @@
+var Rx = require('rx');
+
+module.exports = {
+  "combineLatest": {
+    "label": "combineLatest((x, y) => \"\" + x + y)",
+    "inputs": [
+      [{t:0, d:1}, {t:20, d:2}, {t:65, d:3}, {t:75, d:4}, {t:92, d:5}],
+      [{t:10, d:"A"}, {t:25, d:"B"}, {t:50, d:"C"}, {t:57, d:"D"}]
+    ],
+    "apply": function(inputs) {
+      return Rx.Observable.combineLatest(inputs[0], inputs[1], function(x, y) {
+        return "" + x.content + y.content;
+      });
+    }
+  },
+
+  "concat": {
+    "label": "concat",
+    "inputs": [
+      [{t:0, d:1}, {t:15, d:1}, {t:50, d:1}, 57],
+      [{t:0, d:2}, {t:8, d:2}, 12]
+    ],
+    "apply": function(inputs) {
+      return Rx.Observable.concat(inputs);
+    }
+  },
+
+  "merge": {
+    "label": "merge",
+    "inputs": [
+      [{t:0, d:20}, {t:15, d:40}, {t:30, d:60}, {t:45, d:80}, {t:60, d:100}],
+      [{t:37, d:1}, {t:68, d:1}]
+    ],
+    "apply": function(inputs) {
+      return Rx.Observable.merge(inputs);
+    }
+  },
+
+  "sample": {
+    "label": "sample",
+    "inputs": [
+      [{t:0, d:1}, {t:20, d:2}, {t:40, d:3}, {t:60, d:4}, {t:80, d:5}],
+      [{t:10, d:"A"}, {t:25, d:"B"}, {t:33, d:"C"}, {t:70, d:"D"}, 90]
+    ],
+    "apply": function(inputs) {
+      return inputs[0].sample(inputs[1]);
+    }
+  },
+
+  "startWith": {
+    "label": "startWith(1)",
+    "inputs": [
+      [{t:30, d:2}, {t:40, d:3}]
+    ],
+    "apply": function(inputs, scheduler) {
+      return inputs[0].startWith(scheduler, 1);
+    }
+  },
+
+  "zip": {
+    "label": "zip",
+    "inputs": [
+      [{t:0, d:1}, {t:20, d:2}, {t:65, d:3}, {t:75, d:4}, {t:92, d:5}],
+      [{t:10, d:"A"}, {t:25, d:"B"}, {t:50, d:"C"}, {t:57, d:"D"}]
+    ],
+    "apply": function(inputs) {
+      return Rx.Observable.zip(inputs[0], inputs[1], function(x, y) {
+        return "" + x.content + y.content;
+      });
+    }
+  }
+};