Victus Spiritus

As my client side CoffeeScript hacks grow larger¹, I'm finding the constraint of keeping all the code in html script tags wrapper on page to be awkward. One little project that I'm hoping to have time for this weekend requires combining several html5 canvas effects, they may share some common elements, and each is growing unwieldy for their separate html header tags.

Here's what I'd like to see in my html file:

So far I haven't got the above setup to work and have had to fall back on keeping all my CoffeeScript in the html file (yuck).

Update

After more searching I found trusty Trevor Burnham debugging and patching browser CoffeeScript in the following issue:

Under the patch, you can now write

<script type="text/javascript" src="coffee-script.js"></script>
<script type="text/coffeescript" src="one.coffee"></script>
<script type="text/coffeescript">
  console.log 'two'
</script>
<script type="text/coffeescript" src="three.coffee"></script>

and be certain that one.coffee will run first, then the inline code, then three.coffee.

Note, however, that there are no guarantees with respect to the order of mixed JavaScript and CoffeeScript code, except that any JavaScript code that comes before coffee-script.js will of course run before any CoffeeScript. This should probably be mentioned in the docs.

I recognize a simple solution is to compile the CoffeeScript to JavaScript once and just include it normally. I also understand that clients will be compiling CoffeeScript each time to JavaScript on their local systems, and this is a waste of clock cycles. But my goal is to have cleanly readable CoffeeScript available for each visitor, with dependencies limited to Jeremy's CoffeeScript interpreter and any web browser with JavaScript. It lowers the barrier to entry for folks who aren't comfortable with installing node and maintaining up to date packages, and allows CoffeeScript coding for folks who don't have administrative privileges on their local hosts.

Notes:

1. Here are a few client side CoffeeScript hacks:
   • Client side intro
   • Html5 Layered Ripple
   • html5 chaos