Switch to RequireJS 0.24.0, from http://requirejs.org

Switching for all the reasons described in
 http://tagneto.blogspot.com/2010/03/commonjs-module-trade-offs.html
and the RequireJS 'why' section: http://requirejs.org/docs/why.html

It's the tersest syntax that can work, and it lends itself to recreating
the module source from the loader function.

browsercanvas.js

@@ -1,11 +1,8 @@
-module.declare(['ccanvas', 'events'], function(require, exports, module) {
-
-var ccanvas = require('ccanvas');
-var flapjax = require('events');
+define(["ccanvas", "events"], function(ccanvas, flapjax) {
 
 var USE_FRAME_TIMER = false;
 
-exports.initEventLoop = function(canvasId, drawFrame) {
+var initEventLoop = function(canvasId, drawFrame) {
   var canvas = ccanvas.make(canvasId);
   var canvasElem = document.getElementById(canvasId);
 
@@ -117,4 +114,5 @@ exports.initEventLoop = function(canvasId, drawFrame) {
   drawFrame(canvas, touchB, tickB);
 };
 
+    return { initEventLoop: initEventLoop };
 });

canvastest.html

@@ -29,89 +29,16 @@
   -webkit-user-select: none;
 }
 </style>
-<script type="text/javascript" src="bravojs/bravo.js"></script>
+
 <script type="text/javascript" src="global.js"></script>
+<script type="text/javascript" src="global-es5.js"></script>
 <script type="text/javascript" src="extensions.js"></script>
-<!--
-<script type="text/javascript" src="ccanvas.js"></script>
-<script type="text/javascript" src="events.js"></script>
--->
-<script type="text/javascript">
-// define setTimeout/clearTimeout for events.js
-bravojs.provideModule([], function(require, exports, module) {
-exports.setTimeout = window.setTimeout;
-exports.clearTimeout = window.clearTimeout;
-}, require.id('timeouts'));
-
-module.declare(['browsercanvas'],
-function(require, exports, module) {
-
-var browsercanvas = require('browsercanvas');
-
-/*
-if (window.navigator.userAgent.indexOf('iPhone') != -1) {
-  if (!window.navigator.standalone == true) {
-    // XXX display message prompting to add this app to the home screen
-  }
-}
-*/
 
-var drawFrame = function(canvas, touchB, tickB) {
-  var lastTouches = touchB.valueNow();
-  var sz = canvas.size();
-
-  canvas.resize(window.innerWidth, window.innerHeight,
-                window.devicePixelRatio || 1);
-  canvas.clearRect(0,0,sz.width, sz.height);
-
-  canvas.setFontHeight(20);
-  // XXX window.orientation is not reliable; the resize callback seems to occur
-  //     before window.orientation changes.  Just looking at the width/height
-  //     is probably better.
-  var orientation = (canvas.size().width > canvas.size().height) ?
-      "landscape" : "portrait";
-  var str = "Width: "+canvas.size().width+", "+
-            "Height: "+canvas.size().height+", "+
-            "O: "+orientation;
-  // work around iOS bug which clips text unless something *else*
-  // ensures that the invalidation rectangle is big enough.
-  var m = canvas.measureText(str);
-  canvas.setFill(canvas.makeColor(255,255,255));
-  canvas.beginPath();
-  canvas.rect(0.5, 0.5, 0.5+m.width, 0.5+m.height);
-  canvas.fill();
-
-  canvas.setFill(canvas.makeColor(0,0,0));
-  canvas.drawText(str, 0.5, 0.5+2*m.height);
-  canvas.drawText("Touches: "+lastTouches.length, 0.5, 0.5+3*m.height);
-
-  var amt = (tickB.valueNow() % sz.width) / sz.width; // 0-1
-  canvas.setFill(canvas.makeColor(Math.floor(amt*255),0,0));
-  canvas.beginPath();
-  canvas.rect(amt*sz.width, 0, 10, 50);
-  canvas.fill();
-
-  // draw a mark at every point
-  canvas.beginPath();
-  var size=50;
-  var i = 0;
-  while (i < lastTouches.length) {
-    /*
-    canvas.setFill(canvas.makeColor(Math.floor(amt*255),
-                                    Math.floor(lastTouches[i].force*255),
-                                    0));
-    */
-    canvas.rect(lastTouches[i].clientX-size,
-                lastTouches[i].clientY-size,
-                size*2, size*2);
-    i+=1;
-  }
-  canvas.fill();
-};
-
-browsercanvas.initEventLoop('canvas', drawFrame);
-
-});
+<script type="text/javascript" data-main="canvastest.js"
+        src="require.js"></script>
+<script type="text/javascript">
+define("timeouts", { setTimeout: window.setTimeout,
+                     clearTimeout: window.clearTimeout });
 </script>
 </head>
 <body><canvas id="canvas"></canvas></body>

canvastest.js

@@ -0,0 +1,67 @@
+define(["global.js","extensions.js","./browsercanvas"], function(_x, _y, browsercanvas) {
+
+/*
+if (window.navigator.userAgent.indexOf('iPhone') != -1) {
+  if (!window.navigator.standalone == true) {
+    // XXX display message prompting to add this app to the home screen
+  }
+}
+*/
+
+var drawFrame = function(canvas, touchB, tickB) {
+  var lastTouches = touchB.valueNow();
+  var sz = canvas.size();
+
+  canvas.resize(window.innerWidth, window.innerHeight,
+                window.devicePixelRatio || 1);
+  canvas.clearRect(0,0,sz.width, sz.height);
+
+  canvas.setFontHeight(20);
+  // XXX window.orientation is not reliable; the resize callback seems to occur
+  //     before window.orientation changes.  Just looking at the width/height
+  //     is probably better.
+  var orientation = (canvas.size().width > canvas.size().height) ?
+      "landscape" : "portrait";
+  var str = "Width: "+canvas.size().width+", "+
+            "Height: "+canvas.size().height+", "+
+            "O: "+orientation;
+  // work around iOS bug which clips text unless something *else*
+  // ensures that the invalidation rectangle is big enough.
+  var m = canvas.measureText(str);
+  canvas.setFill(canvas.makeColor(255,255,255));
+  canvas.beginPath();
+  canvas.rect(0.5, 0.5, 0.5+m.width, 0.5+m.height);
+  canvas.fill();
+
+  canvas.setFill(canvas.makeColor(0,0,0));
+  canvas.drawText(str, 0.5, 0.5+2*m.height);
+  canvas.drawText("Touches: "+lastTouches.length, 0.5, 0.5+3*m.height);
+
+  var amt = (tickB.valueNow() % sz.width) / sz.width; // 0-1
+  canvas.setFill(canvas.makeColor(Math.floor(amt*255),0,0));
+  canvas.beginPath();
+  canvas.rect(amt*sz.width, 0, 10, 50);
+  canvas.fill();
+
+  // draw a mark at every point
+  canvas.beginPath();
+  var size=50;
+  var i = 0;
+  while (i < lastTouches.length) {
+    /*
+    canvas.setFill(canvas.makeColor(Math.floor(amt*255),
+                                    Math.floor(lastTouches[i].force*255),
+                                    0));
+    */
+    canvas.rect(lastTouches[i].clientX-size,
+                lastTouches[i].clientY-size,
+                size*2, size*2);
+    i+=1;
+  }
+  canvas.fill();
+};
+
+// start it up!
+browsercanvas.initEventLoop('canvas', drawFrame);
+
+});

ccanvas.js

@@ -15,8 +15,8 @@
 
 // C. Scott Ananian, May 13 2011
 
-module.declare(function(require, exports, module) {
-exports.make = function(canvas_id) {
+define(function() {
+var make = function(canvas_id) {
     var canvasElem_ = canvas_id ?
         document.getElementById(canvas_id) :
 	document.createElement("canvas");
@@ -164,4 +164,5 @@ exports.make = function(canvas_id) {
         },
     };
 };
+    return { make: make };
 });

events.js

@@ -29,9 +29,9 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  */
-module.declare(['timeouts'], function(require, exports, module) {
-    var setTimeout = require('timeouts').setTimeout;
-    var clearTimeout = require('timeouts').clearTimeout;
+define(["./timeouts"], function(timeouts) {
+    var setTimeout = timeouts.setTimeout;
+    var clearTimeout = timeouts.clearTimeout;
 
     var slice = function(arr, start, stop) {
         return Array.prototype.slice.call(arr, start, stop);