No Canvas Support :(

Trellus

EVER Version 1.1.0

Trellus is a documentation tool to illustrate functions in JavaScript.

The complexity of the diagrams increases as functions get more complex.

Because this tool was developed with JavaScript in mind, there is an assumption that these diagrams are created with both a function declaration and a particular way of calling that function.

In JavaScript, context matters to non-local inputs (aka. "free variables") and because you can use bind, call and this to manipulate the implicit parameter, a function definition alone is not necessarily enough to generate a diagram. You may need a function call as well.

Trellus was originally created by Evan Burchard to demonstrate functions in the book, "Refactoring JavaScript," and is available for free at refactoringjs.com.

The project is available for contributions on GitHub. If you have any ideas for extensions or have trouble making Trell.us work for one of your functions, feel free to submit an issue there.

The overall layout deserves a bit more explanation:

Anyways, this will probably be easier to understand after working a bit with the examples.

(psst... click these)


function add(first, second){
  return first + second;
};
        

function log(someString){
  console.log(someString);
};
      

function canDrive(age){
  if(age > 16){
    return true;
  }else{
    return false;
  }
};
      

function canDrive(age){
  ...
};
assert(canDrive(18) === true);
      

function canDrive(age){
  ...
};
assert(canDrive(18) === true);
assert(canDrive(7) === false);
      

// from outer perspective
function outer(){
  return function inner(){
    return 5;
  };
};
      

// from inner perspective
function outer(){
  return function inner(){
    return 5;
  };
};
      

container = {
  type: 'bag',
  name(){ return this.type }
};
// diagram the expected "this"
container.name();
      

container = {
  type: 'bag',
  name(){ return this.type }
};
package = {
  type: 'box'
};

// these return box because the implicit param
// is 'package', not 'container'
container.name.call(package);
container.name.apply(package);
container.name.bind(package).call();

      


function curriedAdd(first){
  return function(paramToFill){
    return first + paramToFill;
  };
};

// This function accepts one input
// at a time (it is curried).
curriedAdd(3)(4);

// This is actually two function calls, but the
// currying pattern is very common.

// Assuming we apply both arguments at once, instead
// of diagramming both functions, Trellus
// uses a shorthand (small circle) at the junction
// between the input lines (at the top)
// and the large circle.

      

What is the function's name?

How many lines does it have?

What type does the function return?

Is the function private?

How many code paths are there?

How many code paths are tested?

What are the explicit input parameter types to your function?
(separate with commas)

What is the implicit input (if any)? Do you use "this" inside of the function? If so, what kind of "this" is it?

List any non-local inputs. (separate with commas)

Is the function curried?

Describe the side effect(s) if any: