MetaSkills.net

Interactive JavaScript Console With TextMate

Posted On: July 8th, 2010 by kencollins

Last week I started reading JavaScript: The Good Parts by Douglas Crockford. It was on my list of long overdue things to do. While reading it, I wanted to be able to kick some simple JavaScript examples around. As rubyist we have it good, irb let's us fire up an interactive console anytime we want. But with JavaScript, options are limited. Sure you could install Johnson/EnvJS, Rhino or some other JavaScript engine. Maybe even load up firebug or the web inspector. But who wants to load a browser to play with JS?

Luckily if your are on a Mac, you do not have to worry about any of that. You already have a JavaScript engine installed. Where? Thanks to Safari's SquirrelFish Extreme (SFX), it is right in your system's library at this full path /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc. Instead of adding that to my path, I created a symlink to in my opt's bin directory (seeing how I have MacPorts). For instance.

  sudo ln -s /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc /opt/local/bin

Assuming you just did that command in your own bin path of choice, you can now just type jsc and start typing JavaScript just as you easily as if you were in an irb prompt. Fun, but we can do better.

Creating A TextMate Bundle To Run JavaScript

So I was inspired by this article that explained how easy it is to make a TextMate bundle to run JavaScript thru JSLint and decided to make one to run the same JavaScript in an the interactive console for SFX. I wont go thru the details of how to add a simple TextMate bundle command, but the following picture and code sample shows the Run JSConsole command I made. The command resides in my own bundle namespace.

TextMate Bundle Window
1
2
3
4
5
6
7
8
9
10
11
12
13

#!/usr/bin/env ruby

require ENV['TM_SUPPORT_PATH'] + '/lib/escape.rb'

def terminal_script_filepath
  %|tell application "Terminal"
      activate
      do script "jsc -i #{e_as(e_sh(ENV['TM_FILEPATH']))}"
    end tell|
end

open("|osascript", "w") { |io| io << terminal_script_filepath }

With that simple bundle command done, you can now use the Command-R keyboard shortcut to load the windows JavaScript file into a newly opened terminal window running in the SFX console. Pictures below.

TextMate Windows With JavaScript
Mac OS Terminal App Lauanched From TextMate JavaScript

Great, Now What?

My simple script just loads the whole file, it does not take into account TM's selected text. Nor does it do anything with selected files. I would love to see someone write a TextMate bundle that could preload up jQuery/Prototype or a set of files. The ultimate would be a bundle command that executed and updated markers like the Ruby bundle can do. Sadly, I do not have that much time on my hands :)

andrew

  HOMEPAGE  | July 8th, 2010 at 10:49 PM
andrew that font look terrible, even the terminal font look better :D....there are many tricks to smooth it.......

Derek Gathright

  HOMEPAGE  | July 8th, 2010 at 10:56 PM
Derek Gathright Thanks for sharing. I'd skip the symlink and just add it to $PATH export PATH=$PATH:/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/

bohdan

  HOMEPAGE  | July 9th, 2010 at 04:42 AM
bohdan @andrew textmate's defult font smoothing (anti-aliasing) is terrible as well - i'd prefer windows' sub-pixel rendering over mac's 3-pixel-thick letters. I wish mac had an option for sub-pixel anti-aliasing too... :(

Ken Collins

  HOMEPAGE  | July 9th, 2010 at 07:55 AM
Ken Collins

LOL, ya'll are commenting on a scaled down graphic converted to a 64-color GIF. The text/font is way better than shown here. Moot too :)

Haris Amin

  HOMEPAGE  | July 9th, 2010 at 10:23 AM
Haris Amin very cool, on a sidenote, what's the code syntax highlighting tool you're using?

Ken Collins

  HOMEPAGE  | July 9th, 2010 at 10:26 AM
Ken Collins

@Haris Thanks for the comment. I am using an old version of Mephisto which itself is using CodeRay. More information can be found here on my blog about my theme and styles for Mephisto.

josh

  HOMEPAGE  | July 10th, 2010 at 11:35 AM
josh Thanks Ken this is very useful. This didn't work for me at first, but then I realized that I'd changed my Textmate Ruby (can't remember why; maybe had to do with rvm and jRuby?). Anyways, replacing: #!/usr/bin/env ruby with: ${TM_RUBY:-/usr/bin/env ruby} <<"[RUBY]" -rcgi ...did the trick.

Jonathan Julian

  HOMEPAGE  | July 12th, 2010 at 02:16 PM
Jonathan Julian Here is a simpler TextMate command to run JavasScript with the jsc. This one does not open a Terminal, it just displays output in a new TextMate pop-up window. Go to your Bundle Editor, choose New Command Save: Current File Input: Selected Text or Document Output: Show as HTML Activation: <map> /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc "$TM_FILEPATH" | ruby -e 'puts "
#{STDIN.read}
"' Click on a different command in the bundle editor to save it. One word of warning: jsc is not very good at reporting errors. I usually use spidermonkey because of that reason. Download to ~/spidermonkey, compile, and then use this TextMate command: ~/spidermonkey/js/src/Darwin_DBG.OBJ/js "$TM_FILEPATH" | ruby -e 'puts "
#{STDIN.read}
"'

Jonathan Julian

  HOMEPAGE  | July 12th, 2010 at 02:20 PM
Jonathan Julian Yikes. HTML is *not* escaped in comments! Those commands are:

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc "$TM_FILEPATH" | ruby -e 'puts "<pre>#{STDIN.read}</pre>"'

and

~/spidermonkey/js/src/Darwin_DBG.OBJ/js "$TM_FILEPATH" | ruby -e 'puts "<pre>#{STDIN.read}</pre>"'

Victor

  HOMEPAGE  | July 18th, 2010 at 10:15 AM
Victor

Or you can install node.js, which uses Google’s v8 engine and you can use node in the terminal to get an IRB like interface…

Leave a Comment

Name (required)
Email (will not be published)
Website
Comment