codemirror log widget

_.md

[ Launch: codemirror log widget ] 5562666 by enjalot
[ Launch: codemirror widget test ] 5562642 by enjalot

config.json

{"description":"codemirror log widget","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/HYzS5Cj.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);")


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

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

function clear() {
  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);
  
  console.log("code", code);
  
  try {
    eval(code);
  } catch(e) { }
  
}

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(text)
      .classed("log-widget", true)
    cm.addWidget(pos, widget.node());
    console.log.apply(console, args);
  }
}

execute()

style.css

.test-editor {
  width: 400px;
  height: 400px;
}

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

.log-widget {
  border: 1px solid red;
  background: rgba(240,240,240,0.5);
}