https://github.com/jsoverson/jsconsole

JavaScript console/repl styled after chrome devtools.
https://github.com/jsoverson/jsconsole

Last synced: 4 days ago
JSON representation

JavaScript console/repl styled after chrome devtools.

• Host: GitHub
• URL: https://github.com/jsoverson/jsconsole
• Owner: jsoverson
• Created: 2015-04-15T23:44:56.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-04-16T05:00:21.000Z (over 9 years ago)
• Last Synced: 2024-11-02T05:03:25.563Z (9 days ago)
• Language: JavaScript
• Size: 1.51 MB
• Stars: 22
• Watchers: 4
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jsconsole

---------

Extensible repl based on CodeMirror. Defaults to evaluating JavaScript in the page's context but exposes a mechanism to override the evaluation logic.

[Demo here](http://jsoverson.github.io/jsconsole/)



## Usage

### Initialization

```html

  

  

  

  

  

  

  

  

  


  

    var elementId = 'container';

    var repl = new Console(elementId);

  


```

This will set up a devtools-like repl that can be interacted by a user.

## Programmatic API

### Console()

```javascript

var repl = new Console(elementId, { mode: "javascript", theme: "eclipse" });

```

### .exec()

```javascript

repl.exec("string of code")

```

### .evaluate()

Override .evaluate() to provide your own evaluation mechanism. Must return an output object that consists of:

- `completionValue` - the return value of the evaluated code

- `error` - whether or not the code caused an error

- `recoverable` - whether or not the error can be recovered from (since the code is attempted to be evaluated on every press of `enter`)

```javascript

// default logic

repl.evaluate = function(code) {

  var out = {};

  try {

    out.completionValue = eval.call(null, code);

  } catch(e) {

    out.error = true;

    out.completionValue = e;

    out.recoverable = (e instanceof SyntaxError && e.message.match('^Unexpected (token|end)'));

  }

  return out;

}

```

### .parseOutput()

Override `.parseOutput()` to alter the output of an evaluation.

`parseOutput` receives the output of an evaluation and must return an object that includes:

- `value` - the value as it was received.

- `type` - the type of the output

- `class` - the class applied to each line of the output

- `formatted` - the formatted string as it should be output in the console

```javascript

repl.parseOutput = function(value) {

  var type = typeof value;

  if (value instanceof Error) type = 'error';

  if (value === null) type = 'null';

  var output = {

    value : value,

    type : type,

    class : 'type-' + type

  };

  switch (type) {

    case "string":

      output.formatted =  '"' + value + '"';

      output.class = "string";

      break;

    case "undefined":

      output.formatted = "undefined";

      break;

    case "null":

      output.formatted = "null";

      break;

    case "object":

    case "array":

      // Todo: pretty print object output

      output.formatted = JSON.stringify(value);

      break;

    case "error":

      output.formatted = value.message.trim();

      break;

    default:

      output.formatted = value.toString().trim();

  }

  return output;

}

```

## Future

Themes. Support for varying themes would be nice. There is support to configure the codemirror themes but there is

enough on top of that to theme separately.

## Dependencies

CodeMirror : ~5.1.x