showell / coffeescriptlinematcher

provides debugging support for CoffeeScript by matching JS lines to CS lines

CS/JS Code Browser

This project lets you see CS and JS code side by side, with lines matched up.

If you would like a tour of the tool, there is a screencast w/audio:

http://www.youtube.com/watch?v=dEze_TaORJs&feature=youtu.be (running time 8:54)

Or, just jump in!

Instructions

1. Download: git clone git://github.com/showell/CoffeeScriptLineMatcher.git
2. Find a directory that has .coffee and .js files in it.
3. (There's an examples directory in this repo; just run "find . -name '*.coffee' | xargs coffee -c" to get js files.)
4. Launch the web server, supplying the directory and port number as command line parameters: "node dashboard.js . 3000"
5. View your CS and JS code in the browser.

Example Usage

  /tmp > git clone git://github.com/showell/CoffeeScriptLineMatcher.git
  Cloning into CoffeeScriptLineMatcher...
  [snip...]
  
  /tmp > cd CoffeeScriptLineMatcher/
  
  /tmp/CoffeeScriptLineMatcher > find . -name '*.coffee' | xargs coffee -c
  
  /tmp/CoffeeScriptLineMatcher > node dashboard.js . 3000
  Server running at http://localhost:3000/

coffeescriptlinematcher's Issues

Refine dashboard.

Features:

1. Write tests on line matching.
2. Handle class methods: http://localhost:3000/view?FILE=/tmp/spine//src/spine.coffee

Provide a stdout command line version

I think this suggestion is better than my last 2 :-)

I am so far using editplus.com as my editor of choice. I tried JetBrains IntelliJ, JetBrains webstorm and sublime text 2. (fyi... I am on windows). Sticking with editplus for now as I have been using it for 10+ years and it just still feels right.

I have simple user commands setup (much like sublime, textmate):
CTRL-SHIFT
'c' : compile the open file to .js
's' : compile the coffee script file (coffee -p) to js and captures the output to a window in editplus
'w' : start a watch on a file and keep running it when I hit save.... captures output to a window in editplus
'r' : run the current file once and capture output to a window in editplus

It would be great to change my 's' (or create a new one) so that I can just run the CoffeeScriptLineMatcher as a command line and pass in the coffeescript file and have it dump (to a file or stdout) a pretty print text format of the compared source. Then I can suck this into the output window of my editor and never have to leave to the browser.

If you don't want to integrate compile etc commands into the web interface (agreed!), let me integrate the CoffeeScriptLineMatcher into my editor :-)

Tab width

The tabs are really wide on the CS side. I assume the right side looks good because it is spaces. Maybe the tabs on the left need converting to spaces? Unfortunately that takes a bit of an algorithm.

I hope I'm not being a pain. I would be happy to submit pulls but I thought it might be a lot easier for you to do than me. Let me know if you are too busy.

P.S. I use 4 spaces per tab. Maybe this could be a url option or a cslm.ini option?

show CS when JS is not current

Right now if the JS isn't current with CS, I show an error page. It would be better to at least show the CS, as this will help with some folk's workflows. It's true that most folks would just go to their editors, but it's easy enough for the tool to support this as well.

refactor code to generate main page

The current implementation of list_files is 35 lines long and kind of sloppy. Instead of building HTML as I walk the directory tree, I should create some sort of intermediate data structure. @mark-hahn, hopefully this refactoring will set the stage for a tree widget or something similar.

git problem

This gets a "No such file or directory" error from git.

git://github.com/showell/CoffeeScriptLineMatcher.git

I can't tell if it means a problem on my local pc or on github. Any ideas?

I got it running by downloading the repo manually so this is no big deal.

skips node_modules directory?

My directory tree contains a node_modules directory and it is not appearing in the cslm report. Is this intentional? I have a lot of my modules in there that I am trying to debug.

Page too wide for me

The page is so wide that in order to avoid horizontal scrolling I have to shrink it down to where the font is too small. I either need a bigger screen or better eyes.

Can you make the table have width=90% ?

anchors for line numbers

Right now to go to line numbers, you have to search for "cs:55" or "js:123" or similar using the browser search. There are a couple ways to increase usability:

1. Create anchors for each line number, so that tools can do something like "localhost:3000#jsline_3000
2. Add search boxes in the app, so you don't have to use the browser search feature and type the "cs:" or "js:" prefixes.

keystroke helpers

Since we are always looking up the js line number, we could make number keys jump down the page as we type. So when you type the two keys 83 it first goes to line 8 and then line 83. The space bar could clear the input.

Wrong file name and js source when using a subdir

I have a test.coffee in the main directory and a test.coffee in a sub directory. In the browser file list it shows only the subdirectory test.js file.

When you click on either of the test.coffee scripts it shows the test.js from the subdirectory file in both cases.

Does *.cof still have problems?

Ignore this. Everything is working ok. Delete this if you can.

auto-refresh is annoying at times

The auto-refresh feature is handy at times, but it's disruptive at other times, as you can lose your scroll position. A simple AJAX call could determine if the files have actually changed, and in most cases, you'd avoid the page refresh.

CS dashboard

This is a sketch of a CS dashboard. Here are the features:

1. launch web server (node.js)
2. main page shows all .coffee files and their corresponding .js file
3. be smart about guessing where .js files live (either in same directory or parallel directory).
4. color coding: GREEN = .js is current; YELLOW = .js file is behind .coffee; RED = .js missing
5. for each file, show side-by-side for CS vs. JS
6. about-page shows how to launch

APIs needed to build tool:

1. simple web server
2. traverse dirs, normalize paths
3. file status (when written)
4. side-by-side (done)

Remove compare lines that provide no value

Remove blank lines from the start of a block
Remove blank lines from the end of a block
Remove blank lines from the cs to js comparison if they provide no value.

In the following example remove:
js : 4
js:10
cs:3
cs:5
js:12
js:20

I would keep js:6,14,16,18

class FunctionBinding
  constructor: ->

  thisIsNotBound: ->

  thisIsBound: =>

Generates the following CS / JS compare:

-----
js:1 (function() {
js:2   var FunctionBinding,
js:3     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
js:4 
==============================================================
cs:1 class FunctionBinding
cs:2   constructor: ->
-----
js:5   FunctionBinding = (function() {
js:6 
js:7     function FunctionBinding() {
js:8       this.thisIsBound = __bind(this.thisIsBound, this);
js:9     }
js:10 
==============================================================
cs:3 
-----
==============================================================
cs:4   thisIsNotBound: ->
-----
js:11     FunctionBinding.prototype.thisIsNotBound = function() {};
js:12 
==============================================================
cs:5 
-----
==============================================================
cs:6   thisIsBound: =>
-----
js:13     FunctionBinding.prototype.thisIsBound = function() {};
js:14 
js:15     return FunctionBinding;
js:16 
js:17   })();
js:18 
js:19 }).call(this);
js:20 
==============================================================

Compile option

In the listing if there is no js file provide an option to compile it, compile all, start/stop watch and compile - could be a nice and simple interface to the command line?!? (not that its currently that hard)

Color Syntax

Color syntax would be a nice addition to this tool. People would still primarily view code in their editors, so it's not that crucial, but it would certainly be nice.

Does anybody know of a good lightweight color-syntax library that runs natively in CS/JS? I'm a big fan of pygments, but I don't want to introduce a Python dependency to this project, if I can avoid it.

Thinking outside the box, what would really be most helpful for this tool is to visually map CS code to JS code. For example, it would be nice if variable names were the same color in the CS panel as the JS panel, and you could arbitrarily assign colors to variable names.

Can logging be disabled?

I've got enough stuff clogging up my terminal. :-)