requirejs/require-cs

An AMD loader plugin for CoffeeScript

RequireJS

RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but it can be used in other JavaScript environments, like Rhino and Node. It implements the Asynchronous Module API.

RequireJS uses plain script tags to load modules/files, so it should allow for easy debugging. It can be used simply to load existing JavaScript files, so you can add it to your existing project without having to re-write your JavaScript files.

RequireJS includes an optimization tool you can run as part of your packaging steps for deploying your code. The optimization tool can combine and minify your JavaScript files to allow for better performance.

If the JavaScript file defines a JavaScript module via define(), then there are other benefits RequireJS can offer: improvements over traditional CommonJS modules and loading multiple versions of a module in a page. RequireJS also has a plugin system that supports features like i18n string bundles, and text file dependencies.

RequireJS does not have any dependencies on a JavaScript framework.

RequireJS works in IE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, and Opera 10+.

Latest Release

License

MIT

Code of Conduct

jQuery Foundation Code of Conduct.

Directories

• dist: Scripts and assets to generate the requirejs.org docs, and for generating a require.js release.
• docs: The raw HTML files for the requirejs.org docs. Only includes the body of each page. Files in dist are used to generate a complete HTML page.
• tests: Tests for require.js.
• testBaseUrl.js: A file used in the tests inside tests. Purposely placed outside the tests directory for testing paths that go outside a baseUrl.
• updatesubs.sh: Updates projects that depend on require.js Assumes the projects are siblings to this directory and have specific names. Useful to copy require.js to dependent projects easily while in development.

Tests

This repo assumes some other repos are checked out as siblings to this repo:

git clone https://github.com/requirejs/text.git
git clone https://github.com/requirejs/i18n.git
git clone https://github.com/requirejs/domReady.git
git clone https://github.com/requirejs/requirejs.git

So when the above clones are done, the directory structure should look like:

• domReady
• i18n
• text
• requirejs (this repo)

You will need to be connected to the internet because the JSONP and remoteUrls tests access the internet to complete their tests.

Serve the directory with these 4 siblings from a web server. It can be a local web server.

Open requirejs/tests/index.html in all the browsers, click the arrow button to run all the tests.

require-cs's Issues

doesn't optimize

I just cloned the project and run ./build.sh and give the following ouput
Tracing dependencies for: main

Tracing dependencies for: coffee-script
Uglifying file: /Workspace/test/require-cs/demo-build/lib/regular.js
Uglifying file: /Workspace/test/require-cs/demo-build/lib/require.js
Uglifying file: /Workspace/test/require-cs/demo-build/lib/main.js
Uglifying file: /Workspace/test/require-cs/demo-build/lib/domReady.js
Uglifying file: /Workspace/test/require-cs/demo-build/build.js

lib/main.js
----------------
/Workspace/test/require-cs/cs.js
lib/domReady.js
cs!controller
cs!util
cs!view
lib/regular.js
cs!csmain
lib/main.js 

but in folder demo-build there this:

controller.coffee
csmain.coffee
domReady.js
main.js
regular.js
require.js
util.coffee
view.coffee

and the browser is making request for coffee files.
What I'am doing wrong?

node version: v0.8.7 and I cloned master

pragmasOnSave should be pragmas?

I don't know what the difference between pragmasOnSave and pragmas (in build.js) is but the fix for #3 wasn't working until I changed pragmasOnSave to pragmas in my local project. Consider updating the demo or adding clarifying documentation.

module.config() doesn't work transparently for built modules

I have a setup similar to this:

On a script tag:

var config = {
  my_cs_module: {
    foo: "Bar"
  }
};
require({config: config}, ["my_module"], function(MyModule) { /* ... */ });

my_module.js:

define(["cs!my_cs_module"], function(MyCsModule) { /* .... */ });

my_cs_module.coffee

define ['module'], (module) ->
  foo = module.config().foo

When working with separate files, this works fine (foo has the expected value), but when using a optimized file that includes my_cs_module as a dependency, it doesn't.
By taking a look at the module object I was able to see that, on the built file, module.id is cs!my_cs_module, while when the module is loaded by the plugin it is just my_cs_module.

It can be worked around easily by providing both my_cs_module and cs!my_cs_module keys on config, but I wanted to make sure if I'm missing something, or if it is really a bug.

require-cs with scripts that don't 'define'

Reposting from a thread on the requirejs mailing list.

I'm seeing unexpected behavior when using require-cs to load a CoffeeScript file that does not call 'define'. Given a call

require(['cs!foo'],function() {
// do stuff with foo loaded
});

the plugin will successfully load, compile and execute the file 'foo.coffee'. If 'foo.coffee' doesn't call define, however, the script with then attempts to load 'foo.js', which in my cases does not exist. Since the load of 'foo.js' fails, require seems to think that the 'foo' module hasn't loaded properly, and so does not run the "do stuff" code in the provided function.

Note that if 'cs!foo' is replaced with 'bar', with 'bar.js' containing the equivalent JavaScript code, things work as expected; 'bar.js' is loaded and run, followed by the function passed to 'require'.

A complete example is on github:

https://github.com/christophercurrie/rcstest

and also on Cloud9, which should in theory let you test it out quickly (haven't tried this yet):

http://c9.io/christophercurrie/rcstest

RequireJS error callback not used for CoffeeScript not found errors.

If I try to load a CoffeeScript file that doesn't exist:

  require(['cs!some/module'], function(m) {
  }, function(err) {
    console.log(err.toString());
  });

then instead of the error callback catching it, it throws the error entirely. Ideally, the same error callback could be triggered.

The error message is:

  Uncaught Error: fromText eval for some/module failed: ReferenceError: Not is not defined 

Duplicate coffeescript helper functions like __extend

When using the class syntax coffeescript drops in some methods like __extend.

class Foo extends Baz

Drops in code like this:

var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
  function ctor() { this.constructor = child; }
  ctor.prototype = parent.prototype;
  child.prototype = new ctor;
  child.__super__ = parent.prototype;
  return child;
};

Every time you use extends you get that block of code defined inside the module. So if you have 20 sub class modules, you'll have that code 20 times.

I'm not sure whose burden this issue is...

Entry point issue

I include the following script tag in the head of the page:

<script type='text/javascript' src='requirejs.js' data-main='cs!main'></script>

In the console, I see a request to main.cs run fine. There is then an additional call to main.js, and a script error notice in the debugger.

The debug log is -

GET file://localhost/Users/guybedford/Projects/test/www/js/main.coffee?bust=1340365609996 cs.js:66
GET file://localhost/Users/guybedford/Projects/test/www/js/main.js?bust=1340365609996 requirejs.js:1831
Uncaught Error: Script error
http://requirejs.org/docs/errors.html#scripterror requirejs.js:175
makeError requirejs.js:175
context.onScriptError requirejs.js:1649
Uncaught Error: Load timeout for modules: cs!main_unnormalized2,cs!main
http://requirejs.org/docs/errors.html#timeout

add "main" option to bower.json

This exists in package.json but not in bower.json. Please add it.

How to actually run demo project?

I don't see how to actually run the demo project. There's the obvious build.sh but no bootstrapper file or webserver to start the app with.

Doesn't work when building

If I run the build command I just get a duplicate of everything. The only difference appears to be a build.txt file.

Source maps

This is not an urgent request - just some consideration as to how this could be implemented.

CoffeeScript Redux supports source maps generation (Ryan Florence has a good write up here http://ryanflorence.com/2012/coffeescript-source-maps/)

It does support the browser environment as well, but needs the source-maps dependency to generate the source map. The source-map module is fully AMD compatible in the browser which is a big bonus.

So it may take some work to get CoffeeScriptRedux to work with source map generation in the browser within AMD, but it looks like it may be possible, perhaps with a CoffeeScriptRedux pull request or two.

Then, the question is how to populate the source map within eval'd code generated from CoffeeScript. Looking through the spec, I can't see if this is straightforward or not.

One way might be to set the source map as a data-url within the sourceMap comment. This is worth testing to see if it is supported.

Getting this source maps support is quite crucial to long-term buy in for require-cs. I'm very much a fan of the dynamic compilation that AMD implies for a development environment. If we miss crucial features like this, static compilation may win by adoption though.

stubModules doesn't seem to work when cs is defined in packages

I'm using require-cs from bower and I've added the packages option to my build file. However when I run the optimizer it seems that the cs module does not get replaced by a stub.

This is what my build file looks like.

({
  baseUrl: ".",
  appDir: ".",
  dir: "../lib",
  stubModules: ['cs'],
  packages: [
    {
      name: 'cs',
      location: '../public/components/require-cs',
      main: 'cs'
    },
    {
      name: 'coffee-script',
      location: '../public/components/coffee-script',
      main: 'index'
    }
  ],
  modules: [
    {
      name: 'bootstrap',
      include: [
        'cs!common/controllers/head',
        'cs!common/directives/container',
        'cs!common/directives/nav',
        'cs!common/services/layout',
        'cs!common/services/user',
      ],
      exclude: ['coffee-script']
    },
    {
      name: 'landing/main',
      include: [
        'cs!landing/main',
        'cs!landing/controllers/login',
        'cs!landing/controllers/register'
      ],
      exclude: ['coffee-script', 'bootstrap'],
      create: true
    }
  ],
  paths: {
    jquery: '../public/components/jquery/jquery',
    angular: '../public/components/angular/angular',
    angularResource: '../public/components/angular-resource/angular-resource',
    text: '../public/components/requirejs-text/text',
  },
  shim: {
    angular: {
      exports: 'angular'
    },
    angularResource: {
      deps: ['angular'],
      exports: 'angular.resource'
    },
    angularMocks: {
      deps:['angular'], 
      exports:'angular.mock'
    },
    priority: [
      'angular'
    ]
  }
})

Long time no update

CoffeeScript is now 1.7.1.

And it's quite complicated to use this plugin comparing to other plugins.

receiving error when using built file

Hi,

I am building a project with bunch of JS files and one Coffescript file using r.js and the file is built just fine.

However when I try to load a page with aggregated file, I receive "Uncaught Error: Cannot dynamically load CoffeeScript".

So it appears that function
"
load: function () {
throw new Error('Cannot dynamically load CoffeeScript');
}
"
is being called.

Can you suggest me any advice on what I may be doing wrong?

Thank you,
Vlad

Dependency resolution broken

Hi,

I'm not sure whether this is a problem with requirejs or the cs plugin but I'm reporting it here (for now) nonetheless.

Taking the demo bundled with the plugin and modifying it slightly creates a reproducable test case:

Create a demo/lib/viewmain.js:

require({
    paths: {
        cs: '../../cs'
    }
}, ['cs!view']);

Alter demo/build.js thusly:

({
    appDir: '.',
    baseUrl: 'lib',
    //Uncomment to turn off uglify minification.
    //optimize: 'none',
    dir: '../demo-build',
    paths: {
         cs: '../../cs'
    },
    modules: [
        {
            name: "viewmain"
        },
        {
            name: "main",
            exclude: ["viewmain"]
        }
    ]
})

Running build.sh yields:

Tracing dependencies for: viewmain

Tracing dependencies for: main
Uglifying file: /root/rcs/demo-build/build.js
Uglifying file: /root/rcs/demo-build/lib/main.js
Uglifying file: /root/rcs/demo-build/lib/viewmain.js
Uglifying file: /root/rcs/demo-build/lib/require.js

lib/viewmain.js
----------------
lib/../../cs.js
cs!util
cs!view
lib/viewmain.js

lib/main.js
----------------
lib/../../cs.js
cs!controller
cs!util
cs!view
cs!csmain
lib/main.js

...With the unfortunate result that cs!view and cs!util are included in both output files.

My gut feeling is that this is a problem within the requirejs plugin architecture, but felt I should raise it here first in case you are aware and/or in a better position to comment about something I am doing wrong! :-)

sourceMap Location comment in Internet Explorer

Discovered http://www.trdev.co.uk/2011/05/17/ie-gotchas-using-the-coffeescript-plugin-for-requirejs/

My scenario is a little bit different. My main app template has a conditional comment. Loads after this via ajax do not have conditional comments, so the cs.js adds the @sourcemap url which causes IE to break.

I had to add /*@cc_on @*/ before your /*@if (@_jscript) @else @*/ check to allow IE to function properly.

support for literate coffeescript files

introduced in coffeescript 1.5.0

shim dependencies don't appear to be honored when using require-cs

Reposting from a thread on the requirejs mailing list.

Assume a CoffeeScript module that depends on a legacy script that doesn't call 'define'. This module is being written such that using it as an AMD module is optional. Since the legacy script doesn't have a standardized module name, I don't wish to hardcode the dependency to the legacy script the CoffeeScript module itself, but instead use the 'shim' configuration to enforce the dependency between the CoffeeScript module and the legacy module.

require({
  paths: {
    "legacy": "/path/to/legacy.js"
  },
  shim: {
    "csmodule": ["legacy"]
  }
}, ["cs!csmodule"], function () {});

This works fine if "csmodule" is instead a JavaScript module; the "legacy" script is loaded first, and then the JavaScript version of "csmodule". However, when using the "cs" loader plugin and a CoffeeScript module, the dependency is ignored and "legacy" is never loaded.

A complete minimal example is on Github:

https://github.com/christophercurrie/rcsshimdep

And Cloud9:

http://c9.io/christophercurrie/rcsshimdep

require() with text plugin does not work with relative paths

relative require calls with text! plugin throws an NS_ERROR_DOM_BAD_URI in firefox
After that a timeout error occurs with url: cs!app/App_unnormalized2,cs!app/App,text!app/mytext.txt_unnormalized3,text!app/mytext.txt

Code:

define (require) ->
    console.log require "text!./mytext.txt"

A port for coco?

Hi jr,

Would you consider making a port of this for coco?

Update README for coffee-script support

As pointed out in #61 (comment) by @felixrabe, the readme is outdated wrt coffee-script configuration. Fix that!

Build tool does not include coffeescript files

I'm having a problem with the r.js build tool when including coffeescript files.

The coffeescript files seem to be ignored by r.js when doing a build. I am defining my coffeescript modules like so (for views/feed.js):

define 'views/feed', ['jquery', 'views'], ($, Views) ->
  ...

I have a setup where I develop locally and compile and execute coffeescript files on the fly in the browser. When deploying I optimize those files using r.js into a single js file excluding the cs.js.

When running in "development mode" where the cs.js is downloaded and coffescript is run in the browser, defining the module name this way works (as well as leaving off the module name). However when running r.js it misses the coffeescript files. I've found that if I use a define statement like the following, the r.js build works but the cs.js plugin stops working when in "development- mode".

define 'cs!views/feed', ['jquery', 'views'], ($, Views) ->
  ...

Maybe the build script is using the fullName when it should be using the name not including the plugin name?

My build profile looks like the following:

({
    appDir: "../static/js",
    baseUrl: ".",
    dir: "../tmp/static/js",
    //This pragma excludes the CoffeeScript compiler code
    //from the optimized source, since all CoffeeScript files
    //are converted and inlined into the main.js built file.
    //If you still want to allow dynamic loading of CoffeeScript
    //files after a build, comment out the pragmasOnSave section.
    pragmasOnSave: {
        excludeCoffeeScript: true
    },
    modules: [
        {
            name: "main-all"
        }
    ]
}

main-all.js looks like (there is a mixture of cs and js modules):

require([
    'views/edit',
    'cs!views/feed'
]

Deep dependency in webworkers could not be solved correctly

Check with below demo and the code:

• http://playground.wahlque.org/tutorials/coffeescript/004-webworkers/
• https://github.com/Wahlque/tutorials/blob/master/coffeescript/004-webworkers/multiplication.coffee#L17
• https://github.com/Wahlque/tutorials/blob/master/coffeescript/004-webworkers/multiplication.coffee#L23

From line 17 to line 23, I add cases one by one to increase the complexity, and the cases failed from the fifth.

In summary,

• All modules are downloaded by browser
• If a module referenced by the first layer and the module do not dependent with others, it will be work.
• If a module referenced by the first layer and the module dependent with others, the other module will be a null value in the scope, and then the program failed

It might be some kind of scoping problem, I think.

Auto-detect js/coffee files

This is just a suggestion..

I personally don't like the 'cs!' prefix to define coffeescript dependencies.
Could the require-cs plugin not be smart enough to check for the existence of .coffee files?
E.g first checking .coffee file and if nout found fallback on .js file?

require(['cs!app'], function (app) {
  ..
});

would then be just:

require(['app'], function (app) {
  ..
});

Allow named modules

See if named modules can be allowed in the coffeescript. It may be enough to have the plugin do a regexp for it manually and replace when it needs to call load.fromText() to generate the new module. Needs investigation.

JSONP

Hi,

require-cs is actually using XHR to fetch coffeescript files. Thus and as the doc mentions it, it is restricted to the same origin policy.

But, why not using JSONP here —so we can fetch files across domains?

Thank you

Circular Dependencies with cs plugin don't work well.

ref http://requirejs.org/docs/api.html#circular and https://github.com/jrburke/requirejs/tree/master/tests

# onecs.coffee
define [ "require", "cs!twocs" ], (require, two) ->
  console.log two
  one = 
    size: "large"
    doSomething: ->
      require "cs!twocs"

  one

# twocs.coffee
define [ "require", "cs!onecs" ], (require, one) ->
  console.log one
  size: "small"
  color: "redtwo"
  doSomething: ->
    require("onecs").doSomething()

# circular-tests-cs.js
require({
        baseUrl: "./"
    },
    ["require", "cs!twocs"],
    function(require, two) {
        var args = two.doSomething();
        doh.register(
            "circular",
            [
                function circular(t) {
                    t.is("small", args.size);
                    t.is("redtwo", args.color);
                }
            ]
        );
        doh.run();
    }
);

#circular-cs.html
<!DOCTYPE html>
<html>
<head>
    <title>require.js: Circular Test</title>
    <script type="text/javascript" src="../require.js"></script>
    <script type="text/javascript" src="doh/runner.js"></script>
    <script type="text/javascript" src="doh/_browserRunner.js"></script>
    <script type="text/javascript" src="circular-tests-cs.js"></script>
</head>
<body>
    <h1>require.js: Circular Test</h1>
    <p>Check console for messages</p>
</body>
</html>

Uncaught Error: Load timeout for modules: cs!twocs cs!onecs

What should I do ?

my English is not good.

Demo Build doesn't work?

I cloned your repository and ran ./build.sh. After running; demo-build/lib/main.js looks like:

function(){define("cs",{version:"0.2.1",load:function(a,b,c,d){}})})(),require({paths:{cs:"../../cs"}},["cs!csmain"]),define("main",function(){})
which seems to be missing all the coffee script code. What am I doing wrong or what is broken?

Thank you!

Optimization adds large amounts of CoffeeScript interpreter to results

I'm not convinced that after optimization (ie. JavaScript has been generated from the CoffeeScript) that we need to include the CoffeeScript interpreter within the optimized output.

I have a (rudimentary) proof of concept that prevents this from occurring - if you think it's worth it, I'll fork and push my changes.

IcedCoffeeScript is not supported

When I try to use require-cs with IcedCoffeeScript (http://maxtaco.github.com/coffee-script/extras/coffee-script.js), I get the following javascript error:

Uncaught Error: Mismatched anonymous define() module: function (){return CoffeeScript.iced}

This is because IcedCoffeeScript for some reason defines two anonymous modules instead of one.

Although this error does not prevent CoffeeScript from loading and compiling normally, there's another ICS-specific issue:

Whenever a .coffee file contains ICS keywords (defer, await), there is the following error thrown:

Module name 'iced-coffee-script' has not been loaded yet for context: _

This is because ICS adds this line to the JS code:

  iced = require('iced-coffee-script').iced;

It by default assumes that it is in node mode. When I try to override ICS's runtime mode like this:

require.config({
    CoffeeScript: {
        runtime: 'inline' // or 'window'
    },
// [...]

It stops adding the require line, but I start getting the following errors everywhere:

"__extends is not defined"

I couldn't find out why this happens.

Please include copies of the MIT and BSD license

It would be great from a distribution packaging point of view if you could include copies of both the MIT and BSD licenses with your software.

Thanks!

Confusing directions, especially step 3

Step 3 says "Reference CoffeeScript files via the cs! plugin name:" But I don't see where coffee-script.js is referenced...is that what "app" is suppose to represent? Where is coffee-script.js supposed to be located? In the root directory?

Also, here's a typo: "You that by using a "raw" GitHub URL. It takes the form of:"

volo compatibility

If I download this module with:

volo add require-cs

It downloads a folder "require-cs" into my project.

I want to just use "cs!" to require my scripts, but I can't add this with a path config as the relative dependency on CoffeeScript.js breaks.

Thus I'm left with the option of creating a wrapper plugin cs.js in the app folder as my only option. Perhaps this process should be automated?

cs files are undefined in windows phone 8 / 'access denied' in ie10

I'm using cordova 2.6 with windows phone 8, and the cs! plugin returns undefined for all coffee files. The same code works in other platforms/browsers.IE/WP8 is painful as usual.

In IE10, i see an 'access denied' in the console. It cannot drill down to the exact line in the source, and shows the error line in index.html itself. On seeing the 'network' panel (yup ie10 has this too !), I can see that all js files are loaded correctly, and the last js files to be loaded were coffee-script.js and cs.js. It halted when trying to load the first coffee file. (I am using the file:// protocol... )

In WP8 (which uses IE10 internally), I dont see any error in the console of visual studio, its just that the objects returned by the cs! plugin are undefined.

My main goal is to get my requirejs/coffeescript app working in win phone 8. It works awesome in other platforms/browsers but all things M$... Much thanks in advance.

Optimizer looks for files .js instead of .coffee when one exists

The problem is the optimizer looks for .js file when one exists.
The main file looks as follows:

require(['cs!coffee/models/Account'], function (Account) {
    // ...
});

Then, when I run Grunt task, following is printed:

>> Error: ENOENT: no such file or directory, open
>> '/home/dc/kiapp/assets/js/coffee/models/Account.js'

As you see, cs looks for .js file. Note that when I type a file that doesn't exist:

require(['cs!coffee/models/AccountABCDEF'], function (Account) {
    // ...
});

Optimizer does look for .coffee file!

>> Error: ENOENT: no such file or directory, open
>> '/home/dc/kiapp/assets/js/coffee/models/AccountABCDEF.coffee'

Environment unsupported in WebWorkers

I want to use cs plugin in webworkers, and I just got a "Environment unsupported" error.
Require.js itself support webworkers, but is it possible to use cs in webworkers via require.js?

How to reproduce:

The code you can try is at here:
https://github.com/Wahlque/tutorials/tree/master/coffeescript/004-webworkers
But you should load all the env from
https://github.com/Wahlque/playground

Hence you can clone the playground repository, and serve it in localhost and then hit the link:
http://localhost/tutorials/coffeescript/004-webworkers/

Cross domain

Would you consider using the same approach here as the text plugin?

I really think this is the way to go actually, although ideally it should apply to template and css plugins as well. Happy to get involved in this area as it is on my critical path right now, so let me know how I can go about it in a way that is useful here as well.

main.js should have a `define` instead (or in addition to) `require`

The example code can result in a race condition whereby require does not work as designed.

Here is a post on StackOverflow detailing the issue. Basically the order demanded by require() was not being honoured when main.js (or its equivalent) uses require. In other words, require(['main'], code) did not load the dependencies of main before calling code.

To solve the problem in the example, unless I misunderstand something, main.js should essentially become:

require.config({
  paths: {
     cs: '../../cs',
    'coffee-script': '../../coffee-script'
  }
});

define(['cs!csmain']);

I hope this is a helpful suggestion/comment. I certainly spent quite a lot of time tracking down the problem. :)

Creating npm package for require-cs

Could we create a npm package for require-cs?

I am exploring to use AMD in CoffeeScript over node.js, I want a way to unify my code for the client side and the server side. So I started to write a wrapper for require-cs: https://github.com/mountain/camel

It is very simple but worked. But if a npm package for require-cs exists, it would be great.