CODEWITHSUNDEEP
javascriptcoffeescript
Phat Albert
Phat Albert

Reputation: 383

Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?

Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript there?

<script type="text/coffeescript">
    square = (x) -> x * x
    list = [1, 2, 3, 4, 5]        
    squares = (square num for num in list)
</script>

The CoffeeScript compiler is written in JavaScript, so can I send it to the client to compile/run this code in the client's browser?

Upvotes: 38

Views: 11833

Answers (4)

jashkenas
jashkenas

Reputation: 3377

Perhaps you're looking for this?

"text/coffeescript" Script Tags

While it’s not recommended for serious use, CoffeeScripts may be included directly within the browser using <script type="text/coffeescript"> tags. The source includes a compressed and minified version of the compiler (Download current version here, 77k when gzipped) as docs/v2/browser-compiler-legacy/coffeescript.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.

The usual caveats about CoffeeScript apply — your inline scripts will run within a closure wrapper, so if you want to expose global variables or functions, attach them to the window object.

<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>

<script type="text/coffeescript">
square = (x) -> x * x
list = [1, 2, 3, 4, 5]        
squares = (square num for num in list)

console.log squares
</script>

Upvotes: 23

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 383010

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>CoffeScript on browser</title>
  </head>
  <body>
    <script type="text/coffeescript">
      alert 'It works!'
    </script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
  </body>
</html>
  • CoffeeScript has to be loaded after the script you want to run.
  • if using src you must be able to access the file via XMLHTTPRequest, in particular it fails on browsers with file://.

Upvotes: 2

PandaWood
PandaWood

Reputation: 8343

The answer is yes. I won't repeat @Trevor's excellent answer, but rather just provide an example of what you're thinking about:

http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/

Basically you

  1. Tag your coffeescript with the text/coffeescript
  2. Include coffee-script.js after all coffeescript on the page (the compiler will evaluate and compile all coffeescript in order)

Sample HTML below

<html>
  <head>
    <title>In-Browser test</title>
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&#8221;> </script>
    <script type=”text/coffeescript”>
      $ -> $(‘#header‘).css ‘background-color‘, ‘green‘
    </script>
    <script type=”text/javascript” src=”http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js&#8221;> </script>
  </head>
  <body>
    <h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>
  </body>
</html>

Upvotes: 8

Trevor Burnham
Trevor Burnham

Reputation: 77416

Jeremy already has this one, but let me add some important details and caveats:

  1. At 39k gzipped (compare to jQuery at 29k), coffee-script.js is a big file; so unless you're actually letting your users run their own CoffeeScript, you really shouldn't use it in production.
  2. As mentioned in the documentation, each CoffeeScript snippet will be in its own anonymous closure. So your example snippet wouldn't do anything—squares wouldn't be visible outside of the script. Instead, you'd want to change it to window.squares = ....
  3. All CoffeeScript code, whether external or inline, will run after all JavaScript code on the page. That's because coffee-script.js doesn't read your <script type="text/coffeescript> tags until after the document is ready, by which time your JavaScripts have already run.
  4. Remote CoffeeScripts are loaded via XMLHTTPRequest, which means that they must be hosted on the same domain as your site. (Certain browsers—Chrome, at least—also have a problem with doing XMLHTTPRequests on file:// paths.)
  5. Currently, the order in which different remote CoffeeScripts run is not guaranteed. I submitted a patch for this, but it's not officially a part of CoffeeScript yet. See this pull request.

So, you might want to look at some alternatives for serving CoffeeScript as compiled JavaScript instead. If you're developing for a Ruby or Python server, there are plugins available. I've tried to list them all at http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins.

If you're developing a site without a backend, a tool I highly recommend looking at is Middleman, which lets you work with CoffeeScript (as well as Haml and Sass, if you want) during development, then compile and minify it for production deployment.

Upvotes: 50

Related Questions