tkh44/babel-plugin-sitrep

Log all assignments and the return value of a function with a simple comment

babel-plugin-sitrep

Log all assignments and the return value of a function with a simple comment

Example

In

// sitrep
function bar () {
  var a = 'foo'
  const b = 'bar'
  let c = [a, b].map(x => x)
  return c.join('-')
}

// sitrep
var cb = x => x.charAt(0)

// sitrep
var cb = x => {
  x = x + 2
  x.charAt(0)
  return x
}

// sitrep
var a = function () {
  return 'foo'
}

const obj = {
  // sitrep
  fn() {
    let a = 5
    return a + 5
  }
}

class Boom {
  // sitrep
  fire() {
    let a = 2
    return a + 5
  }
}

// sitrep prefix
function bar () {
  var a = 'foo'
  return a
}

↓ ↓ ↓ ↓ ↓ ↓

Out

// sitrep
function bar () {
  console.groupCollapsed('bar');

  var a = 'foo';
  console.log('a: ', a);
  const b = 'bar';
  console.log('b: ', b);
  let c = [a, b].map(x => x);
  console.log('c: ', c);

  var _returnValue = c.join('-');

  console.log('Return Value:', _returnValue);
  console.groupEnd('bar');
  return _returnValue;
}

// sitrep
var cb = function (x) {
  console.groupCollapsed('cb');

  var _returnValue3 = x.charAt(0);

  console.log('Return Value:', _returnValue3);
  console.groupEnd('cb');
  return _returnValue3;
};

// sitrep
var cb = function (x) {
  console.groupCollapsed('cb');

  x = x + 2;
  console.log('x: ', x);
  x.charAt(0);
  var _returnValue4 = x;
  console.log('Return Value:', _returnValue4);
  console.groupEnd('cb');
  return _returnValue4;
};

// sitrep
var a = function () {
  console.groupCollapsed('a');
  var _returnValue5 = 'foo';
  console.log('Return Value:', _returnValue5);
  console.groupEnd('a');

  return _returnValue5;
};

const obj = {
  // sitrep
  fn() {
    console.groupCollapsed('fn');

    let a = 5;
    console.log('a: ', a);

    var _returnValue6 = a + 5;

    console.log('Return Value:', _returnValue6);
    console.groupEnd('fn');
    return _returnValue6;
  }
};

class Boom {
  // sitrep
  fire() {
    console.groupCollapsed('fire');

    let a = 2;
    console.log('a: ', a);

    var _returnValue7 = a + 5;

    console.log('Return Value:', _returnValue7);
    console.groupEnd('fire');
    return _returnValue7;
  }
}

// sitrep prefix
function bar () {
  console.groupCollapsed('(prefix) bar');

  var a = 'foo';
  console.log('a: ', a);

  var _returnValue8 = c.join('-');

  console.log('Return Value:', _returnValue8);
  console.groupEnd('(prefix) bar');
  return _returnValue8;
}

Installation

npm install --save-dev babel-plugin-sitrep

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["sitrep"]
}

Via CLI

babel --plugins sitrep script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["sitrep"]
});

Options

label

string, defaults to sitrep.

This option changes the label that enables the plugin

Example

If we set label to "log-all-the-things"

In

// log-all-the-things
function fn(a) {
  a = a.map(x => x)
  return a
}

↓ ↓ ↓ ↓ ↓ ↓

Out

// log-all-the-things
function fn(a) {
  console.groupCollapsed("fn");

  a = a.map(x => x);
  console.log("a: ", a);
  var _returnValue = a;
  console.log("Return Value:", _returnValue);
  console.groupEnd("fn");
  return _returnValue;
}

collapsed

boolean, defaults to true.

This option enables the following:

• Collapse the group of console logs associated with a function

babel-plugin-sitrep's Issues

Use console.groupCollapsed

console.groupCollapsed(fn.name)
...rest
console.groupEnd()

Needs a better name for discoverability

Suggestions

• logger
• linelogger
• logs

Feel free to add more.

Unknown plugin "sitrep".

I've been waiting a full 59 minutes for you to complete this plugin, but still, any time I try it out, I get Unknown plugin "sitrep" specificied in blah blah blah.

What do I pay you for?!

(╯°□°）╯︵ ┻━┻

Babel v7 (and future)

Is this compatible with Babel v7? All of the plugins and presets are now namespaced in the @babel/plugin- format. (e.g. @babel/plugin-proposal-object-rest-spread)

Console.groups?

I dig where you're going with this – not sure if you've already thought of it but groups like console.group('function bar()'); would really help when you're logging a ton of stuff.

Support for spread operator

First of all, thanks a lot for this amazing plugin. It helps a lot while debugging the code and saves a lot of time from writing manual console logs!

const { a, b, c, d } = data;

When I try to use spread operator as above, I get the below error

Module build failed: TypeError: Property arguments[0] of CallExpression expected node to be of a type ["Expression","SpreadElement"] but instead got "ObjectPattern"

Support for transform-es2015-classes?

Is there any way of persuading this to work with the transform-es2015-classes plugin (part of the es2015 babel preset) ?

AFAICT sitrep works fine with regular functions and class-methods if you're just compiling to native classes, but if you're using transform-es2015-classes then this source file:

class Foo {
  // sitrep
  logit(a) {
    var b = a * 2
    return b
  }
}

gets transformed to this:

let Foo = function () {
  function Foo() {
    _classCallCheck(this, Foo);
  }

  _createClass(Foo, [{
    key: 'logit',

    // sitrep
    value: function logit(a) {
      var b = a * 2;
      return b;
    }
  }]);

  return Foo;
}();

and the sitrep transform doesn't kick in.

Bug with for loops

Thanks for this very useful plugin!
I found that it doesn't work when there is a 'for of" loop in the function:

// sitrep
function test() {
    var arr = [0, 1, 2];
    var sum = 0;
    for (const value of arr) {
        sum += value;
    }
    return sum;
}

console.log(test());

$ babel sitrep.js --plugins sitrep
Error: sitrep.js: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (node_modules/babel-cli/node_modules/babel-traverse/lib/path/modification.js:175:13)
    at VariableDeclaration.decls.forEach.dec (node_modules/babel-plugin-sitrep/src/index.js:95:16)
    at Array.forEach (<anonymous>)
    at VariableDeclaration (node_modules/babel-plugin-sitrep/src/index.js:75:15)
    at NodePath._call (node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (node_modules/babel-cli/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (node_modules/babel-cli/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (node_modules/babel-cli/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (node_modules/babel-cli/node_modules/babel-traverse/lib/context.js:192:19)

optional log prefix

Would be nice if // sitrep foo added foo in front of all log messages…

Can't get it to work

Hi, i'm a beginner in terms of babel an ECMAScript 6 and i need help to use this plugin.
i would like to use it but i can't get it to work.
I installed the package and i'm trying to use it with .babelrc method.
In my project i got babelify with browserify.
Here is the code:

// sitrep
function bar () {
  var a = 'foo'
  const b = 'bar'
  let c = [a, b].map(x => x)
  return c.join('-')
}
console.log(bar());

Here is the compiled one:

function bar() {
    var a = 'foo';
    var b = 'bar';
    var c = [a, b].map(function (x) {
        return x;
    });
    return c.join('-');
}
console.log(bar());

As you can see it doesn't inserte the console logs.
Can you help me please?
Thank you very much.

Event bug

// sitrep
  handleclick = (e) =>{
    const foo = e.target.innerText;
    //some actions based on foo
  }

Or

handleclick = (e) =>{
  // sitrep
  const foo = e.target.innerText;
  //some actions based on foo
  }

The above code does not log any value.
Where as the same works fine with a console.log .

Add ability to avoid deep sitrep

Hi! Thanks for this plugin.

What do you think about skipping applying sitrep to second-level functions, like in first example with .map, where sitrep has been applied to .map callback?