Relative paths and curl.js

Question

I have a project laid out this way:

• lib/
  • bar.js
  • curl.js
• src/
  • foo.js
• test/
  • test.html

In my test/test.html file, I have the following

<script type="text/javascript" src="../lib/curl.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

  curl(['../src/foo'], function (Foo) {
    console.log(Foo);
  });

</script>

This fails and the only work around I see is to include the following before I load curl.js:

<script>

  curl = {
    paths: {
      src: '../src'
    }
  };

</script>

So my first question is why do I have to setup paths this way if I just want to link to a single file in the src/ directory.

Assuming that first issue is fixed, my second problem is within src/foo.js. I want to have a dependency on lib/bar.js in that file, so I write the following:

define(['../lib/bar'], function (Bar) {
  return Bar;
});

Alas, this doesn't work as curl.js is trying to load test/lib/bar.js and not lib/bar.js as I wish it would. If the only option is to specify a paths object for curl, is it possible to do that within the src/foo.js module or does it have to be all done in the test/test.html file?

Answer 1

So my first question is why do I have to setup paths this way if I just want to link to a single file in the src/ directory.

Good question. This looks like it could be called a bug. We should probably fix this, but imho, it's not a major one. Let me explain....

curl.js is geared towards complex projects in which modules are bundled into "packages" -- very similar in concept to CommonJS/NodeJS packages. In packages, it doesn't make sense to use "../" to navigate out of a package and into another one. In fact, many of us believe that this should generate an error. curl.js unfortunately just silently fails in this case (that is definitely a bug imho).

The bug you're seeing may be that curl.js is applying the package-navigation logic when you're not using packages. (Hm, sounding more like a bug to me all the time. :) )

So, generally, curl.js requires a configuration. The most essential piece of this config is baseUrl. baseUrl tells curl where the root of the application resides. In your case it's ".." (you could also write it as "../" but curl will cut off the trailing "/" internally anyways.

You don't have to pre-configure curl with a global. You can also include the configuration the first time you call curl() like this.

curl({ baseUrl: '..' }, ['src/foo'], function (Foo) {
    console.log(Foo);
});

I think that answers your second question, too. You can use baseUrl instead of configuring paths. However, paths will eventually come in handy once you start organizing your modules. For instance, paths can translate a messy path like this "lib/jquery-1.8.0/jquery.min.js" into just "jquery".

curl({ baseUrl: '..', paths: { "lib/jquery-1.8.0/jquery.min.js": "jquery" });

I actually recommend packages over paths. As more people start writing CommonJS packages that can run in both node and the browsers, it could become unavoidable. Furthermore, we're planning to build curl.js's compile-to-javascript capabilities around packages.

Hope I helped. :)