line-commenting prototype

_.md

[ Launch: line-commenting prototype ] 5835010 by enjalot
[ Launch: codemirror log line widget ] 5828116 by ejfox
[ Launch: codemirror log line widget ] 5564948 by ejfox
[ Launch: codemirror log line widget ] 5564930 by enjalot
[ Launch: codemirror log widget ] 5562666 by enjalot
[ Launch: codemirror widget test ] 5562642 by enjalot

config.json

{"description":"line-commenting prototype","endpoint":"","display":"div","public":true,"require":[{"name":"esprima","url":"http://esprima.org/esprima.js"},{"name":"escodegen","url":"http://esprima.org/test/3rdparty/escodegen.browser.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"log.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"esprima.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/1Ars3Oi.png"}

esprima.js

//this is where we use esprima to interperet our code
//mainly taken from https://github.com/nornagon/live/blob/master/xform.coffee


tributary.esprima = function(code, prefix) {
  if(!prefix) prefix = '';
  var parsed = esprima.parse(code, {loc:true});
  //console.log(parsed)
  __hasProp = {}.hasOwnProperty;

  var transformed;
  var $values = {};
  var id, nextId = 0;
  function replace(e) {
    /*
    //Check for number
    if (e.type === 'Literal' && typeof e.value === 'number') {
      id = nextId++;
      $values[prefix + id] = {
        value: e.value,
        loc: e.loc,
        __trib__: true
      };
      return {
        type: "MemberExpression",
        computed: true,
        object: {
          type: 'Identifier',
          name: '$values'
        },
        property: {
          type: 'Literal',
          value: prefix + '' + id
        }
      };
    //check for console.log
    } else */if(e.type === 'ExpressionStatement' && e.expression && e.expression.type === 'CallExpression') {
      var callee = e.expression.callee;
      if(callee.object && callee.object.name === 'console' && callee.property && callee.property.name === 'log') {
        callee.property.name = 'logJack';
        
        var pos = e.expression.loc.end;
        pos.line -= 1;
        var newArgs = [
          {
            "type": "ObjectExpression",
            "properties": [
              {
                "type": "Property",
                "key": {
                    "type": "Identifier",
                    "name": "line"
                },
                "value": {
                    "type": "Literal",
                    "value": pos.line,
                    "raw": pos.line + ""
                },
                "kind": "init"
              },
              {
                "type": "Property",
                "key": {
                    "type": "Identifier",
                    "name": "ch"
                },
                "value": {
                    "type": "Literal",
                    "value": pos.column,
                    "raw": pos.column + ""
                },
                "kind": "init"
              }
            ]
          },
          { 
          "type": "ArrayExpression",
           "elements": e['expression']['arguments']
          }
        ];
        e['expression']['arguments'] = newArgs;
        //console.log("pos", e, callee.loc.end);
        return transform(e,replace);
      }
    } else {
      return transform(e, replace);
    }
  }
  
  function transform(object, f) {
    var i, key, newObject, v, value, _i, _len;

    if (object instanceof Array) {
      newObject = [];
      for (i = _i = 0, _len = object.length; _i < _len; i = ++_i) {
        v = object[i];
        if (typeof v === 'object' && v !== null) {
          newObject[i] = f(v);
        } else {
          newObject[i] = v;
        }
      }
    } else {
      newObject = {};
      for (key in object) {
        if (!__hasProp.call(object, key)) continue;
        value = object[key];
        if (typeof value === 'object' && value !== null) {
          newObject[key] = f(value);
        } else {
          newObject[key] = value;
        }
      }
    }
    return newObject;
  }


  transformed = transform(parsed, replace)
  return { 
      ast: transformed, 
      values: $values 
  }
}

inlet.js

var options = {
  mode: 'javascript',
  lineNumbers: true,
  viewportMargin: Infinity,
  theme: 'vibrant-ink'
}

var display = d3.select("#display")
var editor = display.append("div").classed("editor", true)
.classed("test-editor", true);

var cm = CodeMirror(editor.node(), options);
cm.setValue("var x = 5\nconsole.log(\"x\",x);\nx = 1337;\nconsole.log(\"x\", x, x+42);")

var widgets = [];

editor.on("click", function() {
  console.log("editor click", arguments);
  //clear();
})

/*
display.append("button")
.text("clear")
.on("click", clear);
*/

function clear() {
  for(var i = widgets.length; i--;) {
    widgets.pop().clear(); //this remove's CodeMirror's handle to the widget;
  }
//  display.selectAll(".log-widget").remove()
}
console.log("hi");

cm.on("change", execute)

function execute() {
  //clear();
  var js = cm.getValue();
  //var transformed = tributary.esprima(js);
  //console.log("ast", transformed.ast);
  
  //var values = 'var $values = ' + JSON.stringify(transformed.values) + '\n';
  //var code = values + escodegen.generate(transformed.ast);
  var code = js;
  //console.log("code", code);
  
  try {
    eval(code);
  } catch(e) { }
  
}









authorColor = d3.scale.category10()

function addComment(commentString, line, authID) {
  line = line - 1
  
  var authColor = authorColor(authID);
  
  
  var widget = display.append("div")
  .html("<span class='comment-author-icon' style='background-color: "+authColor+"'></span><strong>User"+authID+":</strong> "+commentString)
    .classed("comment-widget", true)
	.style("color", authColor)
  
  var lwidget = cm.addLineWidget(line, widget.node());
  widgets.push(lwidget);
  //console.log.apply(console, args);

}

addComment("Why use X as the variable name?", 1, 1);
addComment("Because it's the best!", 1, 2);
addComment("I have something to say", 3, 3);








/*

if (typeof console !== "undefined") {
  console.logJack = function(pos, args) {
    var text = JSON.stringify(args)
    text = text.slice(1, text.length-1);
    var widget = display.append("div")
      .text("Hello, world!")
      .classed("log", true)
    var lwidget = cm.addLineWidget(pos.line, widget.node());
    widgets.push(lwidget);
    console.log.apply(console, args);
  }
}
*/
execute()

style.css

.test-editor {
  width: 100%;
  height: 100%;
}

.test-editor .CodeMirror {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}

.comment-widget {
  font-size: 0.85em;
  /*border: 1px solid red;*/
  opacity: 1;
  background: rgba(250,250,250,0.95);
  padding: 0;
  //padding-left: 1.2em;
  //padding: 0.2em;
}
.comment-author-icon {
  display: inline-block;
  vertical-align: middle;
  width: 0.5em;
  height: 1em;
  margin: 1px;
  margin-left: 0;
  margin-right: 0.25em;
  //background-color: red;
}