Classic CommonJS modules assume a synchronous execution environment (for the purposes of “require”) with a specialized loader mechanism that evaluates the module in its proper context and takes care of namespacing it. If you want to use CommonJS modules in the browser you can either:
- Leave the source code as it is and use an XHR-based loader that uses eval to perform the namespacing trick. In order to deal with the synchronous require assumption you can use some combination of deferring the evaluation of the module until you think you have all the dependencies and synchronous XHR. Commonly, regular expressions are used to figure out the dependencies, but one could also use some form of static analysis. Examples of browser-based CommonJS loaders supporting this are teleport and yabble.
- Wrap your source code in boilerplate that takes care of the namespacing. This can be done via a build system or done permanently in the source. Pretty much every browser-based CommonJS loader supports this, with RequireJS being the only one I’m going to name-check because there are too many of these suckers as is.
The synchronous idiom for module “foo” might look like this:
var bar = require("bar"); var baz = require("baz"); exports.doStuff = function() { return "awwww yeah."; }; |
The asynchronous module definition for “foo” might look like this, noting that there are actually a couple of possible variations on this:
require.def("foo", ["exports", "bar", "baz"], function(exports, bar, baz) { exports.doStuff = function() { return "awwww yeah."; }; ); |
The thing that may jump out at you is that the asynchronous wrapping means that the body of our module actually lives inside a function definition within the argument list of a function call. Let’s assume you enjoy the finer things in life and are using emacs and js2-mode for your javascript editing. js2-mode will helpfully suggest indenting 14 characters because that puts us 2 characters in from the enclosing function call’s opening paren.
That indentation could drive a man crazy and was really my only reason for avoiding the asynchronous idiom. Thankfully, emacs being what it is, I was able to make it do what I roughly what I want:
;; Check if the suggested indentation is due to require.def(). If it is, force ;; the indentation down to zero. We detect this case by checking whether the ;; parse depth is 2 and the last top-level point was preceded by require.def. (defun require-def-deindent (list index) (when (and (eq (nth 0 parse-status) 2) (save-excursion (let ((tl-point (syntax-ppss-toplevel-pos parse-status))) (goto-char tl-point) (backward-word 2) (equal "require.def" (buffer-substring (point) tl-point)))) ;; only intercede if they are suggesting what the sexprs suggest (let ((suggested-column (js-proper-indentation parse-status))) (eq (nth index list) suggested-column)) ) (indent-line-to 0) 't )) ;; Uncomment the following to enable the hook if you want tab to always slam you ;; to column 0 rather than doing the cycle thing. (With the newline hook in ;; place, I haven't seen the need yet.) ;(add-hook 'js2-indent-hook 'require-def-deindent) ;; Unfortunately, js2-enter-key turns off the bounce indent logic so we need to ;; intentionally do something to get our helper invoked. In this case, we use ;; advice but we could also mess with the keybinding. ;; This assumes js2-enter-indents-newline is enabled / desired. (defadvice js2-enter-key (around js2-enter-key-around) "Trigger require-def-deindent on enter for the newline." ad-do-it (let ((parse-status (save-excursion (parse-partial-sexp (point-min) (point-at-bol)))) positions) (push (current-column) positions) (require-def-deindent positions 0))) (ad-activate 'js2-enter-key) |
If you paste the above into your .emacs and have sufficient emacs karma, hopefully the above will work for you too.
UPDATE (2011/1/1):
The AMD idiom has settled on using “define” instead of “require.def”, so here is the above code modified to this end:
;; --- CommonJS AMD define() compensation ;; Check if the suggested indentation is due to define(). If it is, force ;; the indentation down to zero. We detect this case by checking whether the ;; parse depth is 2 and the last top-level point was preceded by define. (defun require-def-deindent (list index) (when (and (eq (nth 0 parse-status) 2) (save-excursion (let ((tl-point (syntax-ppss-toplevel-pos parse-status))) (goto-char tl-point) (backward-word 1) (equal "define" (buffer-substring (point) tl-point)))) ;; only intercede if they are suggesting what the sexprs suggest (let ((suggested-column (js-proper-indentation parse-status))) (eq (nth index list) suggested-column)) ) (indent-line-to 0) 't )) ;; Uncomment the following to enable the hook if you want tab to always slam you ;; to column 0 rather than doing the cycle thing. (With the newline hook in ;; place, I haven't seen the need yet.) ;(add-hook 'js2-indent-hook 'require-def-deindent) ;; Unfortunately, js2-enter-key turns off the bounce indent logic so we need to ;; intentionally do something to get our helper invoked. In this case, we use ;; advice but we could also mess with the keybinding. ;; This assumes js2-enter-indents-newline is enabled / desired. (defadvice js2-enter-key (around js2-enter-key-around) "Trigger require-def-deindent on enter for the newline." ad-do-it (let ((parse-status (save-excursion (parse-partial-sexp (point-min) (point-at-bol)))) positions) (push (current-column) positions) (require-def-deindent positions 0))) (ad-activate 'js2-enter-key) ;; (end define compensation) |
