how can I enable a source map for coffeescript? - javascript

I recently discovered the existence of source maps in chrome via source debugging in the haxe language. It allows to debug generated javascript inside the chrome browser while seeing the bug reason in the original source code.
Has anyone written a source map generator for coffeescript / Is coffeescript source mappable ?
It would help debug the javascript generated by coffeescript.

Coffeescript 1.6 has native support for source maps.
Use the "--map" or "-m" option to enable it. Or if you use the npm compiler, you will have to add the sourceMap: true option.

npm install -g coffee-script
Should install coffee-script as a global module. Check version > 1.6 by typing
coffee -v
If you need help you can use. Use it to see meaning of options used below
coffee -h
For regular compilation use
coffee -mo script/ -cw src/
This should auto-generate maps files. I leave this running in terminal as I code, it compiles every time I save.
KNOWN BUG:
The current coffee-script compiler does not seem to handle different /src and /script directories. In map file you find that sources = {filename} rather than {relative file path}.
SOLUTION:
Keep your .coffee files in same directory as .js
Modify source directive manually in .map file. This will get overwritten again on next save

This has long been an active issue on the CoffeeScript project (indeed, it predates the source map standard). However, no (complete) CoffeeScript source map generator exists yet. For discussion, see https://github.com/jashkenas/coffee-script/issues/558
Source map support is also one of the goals of the "CoffeeScript Redux" compiler that was recently funded on Kickstarter (see http://www.kickstarter.com/projects/michaelficarra/make-a-better-coffeescript-compiler). That project has just begun; you can watch it at https://github.com/michaelficarra/CoffeeScriptRedux

Ps, if you're on vim, use:
au BufWritePost *.coffee silent make -m
which compiles with source map on file save. I've found it extremely handy when I want some random buffer to start compiling coffee for me.

Related

How to run (or build then run?) this Mozilla Rhino Debugger?

Would like to try this Rhino Debugger however having problems
I downloaded latest from here according to doc it says just simply run:
java org.mozilla.javascript.tools.debugger.Main [options] [filename.js] [script-arguments]
however..it's source code, so I probably need to build it first...(unless there are precompiled download out there?). Assuming I need to build it to get the jar file for debugger, I assume just build the build.gradle file at the root dir. Or run gradle tasks build ? When I do that I get error:
Execution failed for task ':checkstyleMain'.Unable to create a Checker: configLocation {C:\rhino\rhino-1.7.8\checkstyle.xml}, classpath {C:\rhino\rhino-1.7.8\buil
dGradle\classes\java\main;C:\rhino\rhino-1.7.8\buildGradle\resources\main}.
So..I'm a bit lost. Been ten years since I've worked with Java, but hopefully I'm missing something simple.
Any experienced Rhino JavaScript devs out there that can point me in the right direction? Should I just stick with using Eclipse? (Had that working, but I'm still curious about this debugger)
Download the latest rhino from the link you provided, at this time it is "rhino-1.7.8.zip". Unzip that and change directory to "rhino1.7.8/lib"; you need the "rhino-1.7.8.jar" in your CLASSPATH. Assuming you are in "rhino1.7.8/lib" that should be in your current folder, and you can then do
java -cp rhino-1.7.8.jar org.mozilla.javascript.tools.debugger.Main
Which should render like

Enable JavaScript debugging with IntelliJ and source maps

I am using IntelliJ 14.1.4 for creating a JavaScript application. For debugging, I fire up a webserver using Gulp. I then fire up the JavaScript debugging and connect with Chrome (via the plugin). I can debug "normal" JavaScript this way but when using source maps (created by browserify), IntelliJ does not trigger the break points anymore. If I use Chrome's debugging tools, everything works as expected but IntelliJ does not seem to being able to translate its break points.
Is there any way to make this work? I have spent quite some time researching the issue and as far as I understand it, IntelliJ supports source maps. Also, I was able to debug GWT generated JavaScript using this approach which uses source maps, as well.
Update: It seems like there is a current issue for this problem. If any workarround is know, I am happy to hear a solution.
The answer below solves the problem. Here is how I set up my gulp build:
bundler.bundle()
.pipe(exorcist('./build/bundle.js.map', null, null, '../src'))
with ./build being my build folder and ../src being the root of the JavaScript source files, relative to the build folder.
The current workaround is to use exorcist to generate external source maps. You can set the base path to evaluate paths from with the -b parameter, more info in their docs.
As an example, here's what my call to watchify looks like:
bin/watchify -d -v -p [tsify --target es5] -t debowerify js/tests/karma/**/*.ts -o 'bin/exorcist -b "js/compiled/" js/compiled/tests.js.map > js/compiled/tests.js'
Be aware that plugins and transforms might output weird paths when piped together; if your sourcemaps don't work, make sure browserify or watchify output the path properly. I once had browserify output "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" instead of "../../js/tests/karma/unit/Calculator.spec.ts", causing my maps to be useless.

Grunt concat: Use file instructions a la Codekit

I'm trying to convert a CodeKit project to use Grunt (so we can support our Windows friends).
In CodeKit, you can concatenate JS files by including concat instructions as comments in the files you want concatenated. For example, to prepend jquery.validate.js to your scripts.js file, you would add the following comment to scripts.js:
/* #codekit-prepend "jquery.validate.js" */
How can I configure grunt-concat (or a similar plugin) to concatenate JS files based on instructions within the files themselves? I'd prefer to have concat instructions in the files so it's more clear what's going on (as opposed to referring to Gruntfile.js).
I do not know about codekit syntax, but if all you need is the prepend feature, then take a look at https://github.com/miensol/grunt-concat-in-order, and specifically the filebased approach. You could customize the syntax to extract your codekit prepend syntax or replace that to something like #depend used in the example.
(for a cross platform example check out my fork, it has a windows safe example, using path.normalize)
I made a plugin for Grunt that understands the Kit language of CodeKit, as well as its #codekit-append and #codekit-prepend instructions. You can then build your projects both using Grunt and CodeKit interchangably without changing any code.
EDIT This functionality is still available through grunt-codekit version 0.4.x, but was removed in version 1.0.0 due to a general lack of interest. I am intending to split the functionality into a module of its own, but need some time to do it (or you can fork the code and create it yourself). Anyway, to simply use the 0.4 version you can do this npm install grunt-codekit#0.4.0 --save

How do you automagically minify your JS and CSS on OS X or in Webstorm?

I use two different IDE's based on what I'm doing. My primary IDE is Visual Studio, whereby I use Chirpy to mash and minify my code. It works flawlessly and I love it. Problem is that when I'm not on my Windows box, I don't have access to it.
When not using Visual Studio, I'm usually writing Javascript apps in Webstorm on my Macbook Pro. Here in lies the problem. I haven't found a Webstorm plugin or any other app that I can configure to watch my scripts and mash/minify them.
How do you Mac users mash/minify your JS and CSS at design time with minimal effort?
For those who have now updated to WebStorm 6, this functionality is in-built. Simply go to File (or whatever the Mac equivalent is) -> Settings -> File Watchers and define a file watcher for the type of file you need to watch.
The relevant help documentation is here - http://www.jetbrains.com/webstorm/webhelp/using-file-watchers.html
You could use YUI Compressor without Command Line with these little Apps:
http://www.webmaster-source.com/minimus/ – free
http://www.matmartinez.net/delivery/ – free
I'm neither a Mac nor Webstorm user, but this might still be relevant.
For javascript I use the closure compiler as part of an upload script to minify. It doesn't monitor the files, it runs when I run the upload (a bash file).
If you wanted to keep it all in the IDE, it looks like Webstorm has an Ant plugin http://plugins.intellij.net/plugin/?webide&id=4526 that you could use to execute the closure compiler.
If you can find a command line css minifier then you could put that in the Ant script as well.
I use lessc and uglifyjs to concatenate and minify my css and js files. Here's a makefile from Twitter Bootstrap that I used a modified version of:
https://github.com/twitter/bootstrap/blob/master/Makefile
It's simple since all I do is type make in the command line whenever I want to compile.
I use Minify. It's on the Mac App Store.
I developed it to support my own workflow. minifyapp.com

How can I compile CoffeeScript from .NET?

I want to write an HttpHandler that compiles CoffeeScript code on-the-fly and sends the resulting JavaScript code. I have tried MS [JScript][1] and IronJS without success. I don't want to use [Rhino][2] because the Java dependency would make it too difficult to distribute.
How can CoffeeScript be compiled from .NET?
CoffeeScript-dotnet
Command line tool for compiling CoffeeScript. Includes a file system watcher to automatically recompile CoffeeScripts when they change. Roughly equivalent to the coffee-script node package for linux / mac.
CoffeeSharp
Includes a command line tool similar to CoffeeScript-dotnet as well as a http handler that compiles CoffeeScripts when requested from an asp.net site.
SassAndCoffeeScript
Library for Asp.net mvc that compiles sass and coffeescript files on request. Also supports minification and combination.
Manually Compile With IronJS
IronJS is a .NET javascript interpreter that can successfully load the CoffeeScript compiler and compile CoffeeScript.
Manually Compile With Node.js
Get the node binaries and add the bin directory to your path. Write a node.js script to load the CoffeeScript compiler and your CoffeeScript files and save the compiled javascript.
CoffeeScript is now fully supported by Chirpy:
http://chirpy.codeplex.com/
You specifically said that you wanted to write a runtime compiler, so this may not be exactly what you are looking for, but if the main point is to have a way to generate the javascript result, the Mindscape Web Workbench is interesting. It is a free extension for Visual Studio.NET 2010 and available in the Extension Manager. It gives Intellisense, syntax highlighting and compiles to JS as you write. I am just getting started using it but looks promising. Scott Hanselman talks about it here. It also supports LESS and Sass.
I've managed to compile CoffeeScript from .NET using IKVM, jcoffeescript and Rhino. It was straightforward, except that the JCoffeeScriptCompiler constructor overload without parameters didn't work. It ran OK with a java.util.Collections.EMPTY_LIST as parameter.
This is how I did it:
Download IKVM, jcoffeescript and Rhino.
Run ikvmc against js.jar, creating js.dll.
Run ikvmc against the jcoffeescript jar.
Add a reference to the jcoffeescript dll in Visual Studio. More references may be needed, but you will be warned about those.
Run new org.jcoffeescript.JCoffeeScriptCompiler(java.util.Collections.EMPTY_LIST).compile() in your code.
The next step would be to create a build task and/or an HTTP handler.
Check out the new coffeescript-dotnet project, which uses the Jurassic JavaScript implementation.
Since the CoffeeScript compiler now runs on Internet Explorer, after a couple of recent tweaks, it should be good to go within other MS-flavors of JavaScript as well. Try including extras/coffee-script.js from the latest version, and you should be good to go with CoffeeScript.compile(code).
I tried running the bundled extras/coffee-script.js through Windows Based Script Host (or just wscript) and it didn't report any issues. I then added this line:
WScript.Echo(CoffeeScript.compile('a: 1'));
at the end of the file and run it through wscript again and it printed the resulting JavaScript correctly.
Are you using COM objects? Can you share some more of the code responsible for initialising the MScript object reference?
CoffeeScript in Visual Studio 2010
It's Chirpy's fork (chirpy is a tool for mashing, minifing, and validating javascript, stylesheet, and dotless files)
"OK, I think I got it working on my fork, based mostly on other peoples' work. Check it out:
http://chirpy.codeplex.com/SourceControl/network/Forks/Domenic/CoffeeScriptFixes"
from http://chirpy.codeplex.com/workitem/48
I don't have a direct answer, (I hope you find one), but maybe take a look at the following to see how it might be done.
Jint - JavaScript interpreter for .NET
Using IKVM to compile Rhino would get rid of the Java runtime requirement.
jcoffeescript. I haven't looked at jcoffeescript, but I think it depends on JRuby and Rhino. You could possibly IKVM.NET this as well.
IronJS now supports CoffeeScript and is generally faster than the other .NET JS engines:
I have a blog post about wiring the two together here:
http://otac0n.com/blog/2011/06/29/CoffeeDemo-A-Simple-Demo-Of-IronJS-Using-CoffeeScript.aspx
My main editor is VS 2010 and I love the WorkBench extension. it's nice it auto compiles to js everytime you hit save on your .coffee file, also introduces you to SASS which I had read about but never got around.
They offer a pay version to that will autmaically shrink/minify your js and css files as well, since your.coffee and .scss are your source files anyway.
I'd encourage all VS users to go ahead and install this especially if you run VS 2010.
The only knock, and someone please correct me or enlighten me, is that with .coffee syntax it's not highlighted the way say html, js, c# code is. it might be because I am using a color scheme from http://studiostyl.es/ and for the record http://studiostyl.es/schemes/coffee- just shares the name coffee no special syntax highlight support for coffeescript that I am aware of. but no reason not to start using the workbench addin today!
Okay workbench website claims: syntax highlighting so again maybe it's the studiostyle.es i chose.
I know this is old but I came here to answer a very similar question: How do I get my CoffeeScript to compile using Visual Studio 2012 Express? Note that the free Express version does not allow any extensions so I could not continue to use the Mindscape Workbench extension that had served me well for quite some time.
It turns out to be very easy. Just use NuGet to install the Jurassic-Coffee package and off you go.
One advantage of using this package over mindscape workbench is that you can reference your coffee directly from the script tags in the html. It minifies and caches the compiled JS so you only do work if the requested coffee file has changed.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="home.coffee"></script>
</head>
The mindscape workbench allows you to bundle together different coffescript files which is very handy for modularising your coffeescript. You can also do this using Jurassic Coffee by utilising the #= require statement to include other coffee module files, for example:
#= require Classes\GridWrapper.coffee
class UsersGrid
constructor:->
#grid = new GridWrapper()
I think having the #= require staement in the coffee file is actually cleaner and clearer than the mindscape workbench approach, which kind of hides all this behind their interface so you forget easily what dependencies you have.
Note
There is one potential gotcha. The Nuget installer will put in an httphandler entry into your web.config that may not be compatible with IIS Express integrated managed pipeline mode.
You might therefore see the following error:
An ASP.NET setting has been detected that does not apply in Integrated
managed pipeline mode.
To fix this just remove the handler shown below.
<system.web>
//other stuff
<httpHandlers>
<add type="JurassicCoffee.Web.JurassicCoffeeHttpHandler,JurassicCoffee" validate="false" path="*.coffee" verb="*" />
</httpHandlers>
</system.web>
You could simply write a port of it to C#. I have ported Jison to C# (which is the underlying project that makes CoffeeScript run). I would think it may be a bit different, but both Jison parsers work the same.
I have not pull requested it back yet to Jison's main architecture, but will be doing so soon.
https://github.com/robertleeplummerjr
Instead of shelling out to CScript you could shell out to Node.js (here are self-contained Windows binaries)
I've tried to compile the extras/coffee-script.js file, unmodified, to jsc, the JScript.NET compiler for .NET, and I got many errors. Here are the noteworthy ones:
'require' is a new reserved word and should not be used as an identifier
'ensure' is a new reserved word and should not be used as an identifier
Objects of type 'Global Object' do not have such a member
Other errors were caused by the above said errors.
You might also want to check out jurassic-coffee, it is also a coffee-script compiler running the original compiler in jurassic.
It features sprocket style "#= require file.coffee" or "#= require file.js" wich can be used to keep .coffee files modular and combined right before compilation as well as embedding .js files.
It sports a HttpHandler with file watchers for .js and .coffee files that keeps track of what .coffee files needs to be re-compiled and pass through to the compiled *.js files for the rest.
jurassic-coffee is also available as a Nuget package
https://github.com/creamdog/JurassicCoffee
I've done an HttpHandler that uses Windows Script Host behind the scenes: https://github.com/duncansmart/LessCoffee and works great (it also compiles *.less files).
It's on NuGet: http://nuget.org/List/Packages/LessCoffee
It's based on this simple wrapper: https://github.com/duncansmart/coffeescript-windows
I wrote an inteructive shell using v8.
https://github.com/mattn/coffee-script-v8
This work as single executable file. (Don't use external files)
It can't use require(). But enough to learn coffeescript.

Categories

Resources