Applied node style dependency management, using browserify now to bundle the code

Jakefile.js

@@ -2,16 +2,20 @@
  * Jake build script
  */
 var jake = require('jake'),
-    fs = require('fs'),
+    browserify = require('browserify'),
     path = require('path');
 
 require('jake-utils');
 
+// constants
+var VIS = './vis.js';
+var VIS_MIN = './vis.min.js';
+
 /**
  * default task
  */
 desc('Execute all tasks: build all libraries');
-task('default', ['vis'], function () {
+task('default', ['build', 'minify'], function () {
     console.log('done');
 });
 
@@ -19,10 +23,7 @@ task('default', ['vis'], function () {
  * build the visualization library vis.js
  */
 desc('Build the visualization library vis.js');
-task('vis', function () {
-    var VIS = './vis.js';
-    var VIS_MIN = './vis.min.js';
-
+task('build', {async: true}, function () {
     // concatenate and stringify css files
     var result = concat({
         src: [
@@ -35,44 +36,36 @@ task('vis', function () {
     });
     var cssText = JSON.stringify(result.code);
 
-    // concatenate the script files
-    concat({
-        dest: VIS,
-        src: [
-            './src/module.js',
-
-            './src/util.js',
-            './src/events.js',
-            './src/timestep.js',
-            './src/dataset.js',
-            './src/stack.js',
-            './src/range.js',
-            './src/controller.js',
-
-            './src/component/component.js',
-            './src/component/panel.js',
-            './src/component/rootpanel.js',
-            './src/component/timeaxis.js',
-            './src/component/itemset.js',
-            './src/component/item/*.js',
-
-            './src/visualization/timeline.js',
-
-            // TODO: do not package moment.js with vis.js.
-            './lib/moment.js'
-        ],
-
-        header: read('./src/header.js') + '\n' +
-            '(function () { ', // start of closure
-
-        separator: '\n',
-
-        // Note: we insert the css as a string in the javascript code here
-        //       the css will be injected on load of the javascript library
-        footer: 'loadCss(' + cssText + ');\n' +
-            '})();' // end of closure
+    // bundle the script files
+    // TODO: do not package moment.js with vis.js.
+    var b = browserify();
+    b.add('./src/vis.js');
+    b.bundle({
+        standalone: 'vis'
+    }, function (err, code) {
+        // add header and footer
+        var lib =
+            read('./src/header.js') +
+            code +
+            read('./src/module.js') +
+            '\nloadCss(' + cssText + ');\n';  // inline css
+
+        // write bundled file
+        write(VIS, lib);
+        console.log('created ' + VIS);
+
+        // update version number and stuff in the javascript files
+        replacePlaceholders(VIS);
+
+        complete();
     });
+});
 
+/**
+ * minify the visualization library vis.js
+ */
+desc('Minify the visualization library vis.js');
+task('minify', function () {
     // minify javascript
     minify({
         src: VIS,
@@ -81,40 +74,22 @@ task('vis', function () {
     });
 
     // update version number and stuff in the javascript files
-    [VIS, VIS_MIN].forEach(function (file) {
-        replace({
-            replacements: [
-                {pattern: '@@name',    replacement: 'vis.js'},
-                {pattern: '@@date',    replacement: today()},
-                {pattern: '@@version', replacement: version()}
-            ],
-            src: file
-        });
-    });
+    replacePlaceholders(VIS_MIN);
 
-    console.log('created vis.js library');
+    console.log('created ' + VIS_MIN);
 });
 
 /**
- * Recursively remove a directory and its files
- * https://gist.github.com/tkihira/2367067
- * @param {String} dir
+ * replace version, date, and name placeholders in the provided file
+ * @param {String} filename
  */
-var rmdir = function(dir) {
-    var list = fs.readdirSync(dir);
-    for(var i = 0; i < list.length; i++) {
-        var filename = path.join(dir, list[i]);
-        var stat = fs.statSync(filename);
-
-        if(filename == "." || filename == "..") {
-            // pass these files
-        } else if(stat.isDirectory()) {
-            // rmdir recursively
-            rmdir(filename);
-        } else {
-            // rm fiilename
-            fs.unlinkSync(filename);
-        }
-    }
-    fs.rmdirSync(dir);
+var replacePlaceholders = function (filename) {
+    replace({
+        replacements: [
+            {pattern: '@@name',    replacement: 'vis.js'},
+            {pattern: '@@date',    replacement: today()},
+            {pattern: '@@version', replacement: version()}
+        ],
+        src: filename
+    });
 };

README.md

@@ -111,18 +111,26 @@ To build the library from source, clone the project from github
     git clone git://github.com/almende/vis.git
 
 The project uses [jake](https://github.com/mde/jake) as build tool.
+The build script uses [Browserify](http://browserify.org/) to
+bundle the source code into a library,
+and uses [UglifyJS](http://lisperator.net/uglifyjs/) to minify the code.
+The source code uses the module style of node (require and module.exports) to
+organize dependencies.
+
+To install all dependencies and build the library, run `npm install` in the
+root of the project.
+
+    cd vis
+    npm install
+
 To be able to run jake from the command line, jake must be installed globally:
 
     sudo npm install -g jake
 
 Then, the project can be build by executing jake in the root of the project:
 
-    cd vis
     jake
 
-This will build the library for each of the components. The built libraries can
-be found in the directory `bin`, and includes examples.
-
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vis",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "A dynamic, browser-based visualization library.",
     "homepage": "http://visjs.org/",
     "repository": {
@@ -20,7 +20,12 @@
         "network",
         "browser"
     ],
-    "dependencies": {},
+    "scripts": {
+        "prepublish": "jake"
+    },
+    "dependencies": {
+        "moment": "latest"
+    },
     "devDependencies": {
         "jake": ">= 0.5.9",
         "jake-utils": ">= 0.0.18",

src/component/component.js

@@ -1,3 +1,5 @@
+var util = require('./../util');
+
 /**
  * Prototype for visual components
  */
@@ -116,4 +118,4 @@ Component.prototype.on = function (event, callback) {
 };
 
 // exports
-vis.component.Component = Component;
+module.exports = exports = Component;

src/component/item/item.js

@@ -1,3 +1,4 @@
+var Component = require('../component');
 
 /**
  * @constructor Item
@@ -33,4 +34,4 @@ Item.prototype.unselect = function () {
 };
 
 // exports
-vis.component.item.Item = Item;
+module.exports = exports = Item;

src/component/item/itembox.js

@@ -1,3 +1,6 @@
+var util = require('../../util'),
+    Item = require('./item');
+
 /**
  * @constructor ItemBox
  * @extends Item
@@ -272,4 +275,4 @@ ItemBox.prototype.reposition = function () {
 };
 
 // exports
-vis.component.item.box = ItemBox;
+module.exports = exports = ItemBox;

src/component/item/itempoint.js

@@ -1,3 +1,6 @@
+var util = require('../../util'),
+    Item = require('./item');
+
 /**
  * @constructor ItemPoint
  * @extends Item
@@ -208,4 +211,4 @@ ItemPoint.prototype.reposition = function () {
 };
 
 // exports
-vis.component.item.point = ItemPoint;
+module.exports = exports = ItemPoint;

src/component/item/itemrange.js

@@ -1,3 +1,6 @@
+var util = require('../../util'),
+    Item = require('./item');
+
 /**
  * @constructor ItemRange
  * @extends Item
@@ -217,4 +220,4 @@ ItemRange.prototype.reposition = function () {
 };
 
 // exports
-vis.component.item.range = ItemRange;
+module.exports = exports = ItemRange;

src/component/itemset.js

@@ -1,3 +1,11 @@
+var util = require('../util'),
+    DataSet = require('../dataset'),
+    Panel = require('./panel'),
+    Stack = require('../stack'),
+    ItemBox = require('./item/itembox'),
+    ItemRange = require('./item/itemrange'),
+    ItemPoint = require('./item/itempoint');
+
 /**
  * An ItemSet holds a set of items and ranges which can be displayed in a
  * range. The width is determined by the parent of the ItemSet, and the height
@@ -54,6 +62,13 @@ function ItemSet(parent, depends, options) {
 
 ItemSet.prototype = new Panel();
 
+// available item types will be registered here
+ItemSet.types = {
+    box: ItemBox,
+    range: ItemRange,
+    point: ItemPoint
+};
+
 /**
  * Set options for the ItemSet. Existing options will be extended/overwritten.
  * @param {Object} [options] The following options are available:
@@ -189,7 +204,7 @@ ItemSet.prototype.repaint = function () {
                 var type = itemData.type ||
                     (itemData.start && itemData.end && 'range') ||
                     'box';
-                var constructor = vis.component.item[type];
+                var constructor = ItemSet.types[type];
 
                 // TODO: how to handle items with invalid data? hide them and give a warning? or throw an error?
                 if (item) {
@@ -499,4 +514,4 @@ ItemSet.prototype.toScreen = function(time) {
 };
 
 // exports
-vis.component.ItemSet = ItemSet;
+module.exports = exports = ItemSet;

src/component/panel.js

@@ -1,3 +1,6 @@
+var util = require('../util'),
+    Component = require('./component');
+
 /**
  * A panel can contain components
  * @param {Component} [parent]
@@ -101,4 +104,4 @@ Panel.prototype.reflow = function () {
 };
 
 // exports
-vis.component.Panel = Panel;
+module.exports = exports = Panel;

src/component/rootpanel.js

@@ -1,3 +1,6 @@
+var util = require('../util'),
+    Panel = require('./panel');
+
 /**
  * A root panel can hold components. The root panel must be initialized with
  * a DOM element as container.
@@ -200,4 +203,4 @@ RootPanel.prototype._updateEventEmitters = function () {
 };
 
 // exports
-vis.component.RootPanel = RootPanel;
+module.exports = exports = RootPanel;

src/component/timeaxis.js

@@ -1,3 +1,7 @@
+var util = require('../util'),
+    TimeStep = require('../timestep'),
+    Component = require('./component');
+
 /**
  * A horizontal time axis
  * @param {Component} parent
@@ -524,4 +528,4 @@ TimeAxis.prototype._updateConversion = function() {
 };
 
 // exports
-vis.component.TimeAxis = TimeAxis;
+module.exports = exports = TimeAxis;

src/controller.js

@@ -1,3 +1,6 @@
+var util = require('./util'),
+    Component = require('./component/component');
+
 /**
  * @constructor Controller
  *
@@ -139,4 +142,5 @@ Controller.prototype.reflow = function () {
 };
 
 // exports
-vis.Controller = Controller;
+module.exports = exports = Controller;
+

src/dataset.js

@@ -1,3 +1,5 @@
+var util = require('./util');
+
 /**
  * DataSet
  *
@@ -547,4 +549,4 @@ DataSet.prototype._appendRow = function (dataTable, columns, item) {
 };
 
 // exports
-vis.DataSet = DataSet;
+module.exports = exports = DataSet;

src/events.js

@@ -1,4 +1,3 @@
-
 /**
  * Event listener (singleton)
  */
@@ -116,4 +115,4 @@ var events = {
 };
 
 // exports
-vis.events = events;
+module.exports = exports = events;

src/module.js

@@ -1,19 +1,3 @@
-// Define namespace vis
-var vis = {
-    component: {
-        item: {}
-    }
-};
-
-/**
- * CommonJS module exports
- */
-if (typeof exports !== 'undefined') {
-    exports = vis;
-}
-if (typeof module !== 'undefined') {
-    module.exports = vis;
-}
 
 /**
  * AMD module exports
@@ -24,14 +8,6 @@ if (typeof(define) === 'function') {
     });
 }
 
-/**
- * Window exports
- */
-if (typeof window !== 'undefined') {
-    // attach the module to the window, load as a regular javascript file
-    window['vis'] = vis;
-}
-
 /**
  * load css from text
  * @param {String} css    Text containing css

src/range.js

@@ -1,3 +1,6 @@
+var util = require('./util'),
+    events = require('./events');
+
 /**
  * @constructor Range
  * A Range controls a numeric range with a start and end value.
@@ -524,4 +527,4 @@ Range.prototype.move = function(moveFactor) {
 };
 
 // exports
-vis.Range = Range;
+module.exports = exports = Range;

src/stack.js

@@ -1,3 +1,5 @@
+var util = require('./util');
+
 /**
  * @constructor Stack
  * Stacks items on top of each other.
@@ -157,4 +159,4 @@ Stack.prototype.collision = function(a, b, margin) {
 };
 
 // exports
-vis.Stack = Stack;
+module.exports = exports = Stack;

src/timestep.js

@@ -1,4 +1,7 @@
-/**
+var util = require('./util'),
+    moment = require('moment');
+
+    /**
  * @constructor  TimeStep
  * The class TimeStep is an iterator for dates. You provide a start date and an
  * end date. The class itself determines the best scale (step size) based on the
@@ -449,5 +452,5 @@ TimeStep.prototype.getLabelMajor = function(date) {
     }
 };
 
-// export
-vis.TimeStep = TimeStep;
+// exports
+module.exports = exports = TimeStep;

src/util.js

@@ -780,6 +780,5 @@ if(!Array.isArray) {
     };
 }
 
-
-// export
-vis.util = util;
+// exports
+module.exports = exports = util;

src/vis.js

@@ -0,0 +1,31 @@
+/**
+ * vis.js library exports
+ */
+var vis = {
+    Controller: require('./controller'),
+    DataSet: require('./dataset'),
+    events: require('./events'),
+    Range: require('./range'),
+    Stack: require('./stack'),
+    TimeStep: require('./timestep'),
+    util: require('./util'),
+
+    component: {
+        item: {
+            Item: '../../Item',
+            ItemBox: '../../ItemBox',
+            ItemPoint: '../../ItemPoint',
+            ItemRange: '../../ItemRange'
+        },
+
+        Component: require('./component/component'),
+        Panel: require('./component/panel'),
+        RootPanel: require('./component/rootpanel'),
+        ItemSet: require('./component/itemset'),
+        TimeAxis: require('./component/timeaxis')
+    },
+
+    Timeline: require('./visualization/timeline')
+};
+
+module.exports = exports = vis;

src/visualization/timeline.js

@@ -1,3 +1,12 @@
+var util = require('./../util'),
+    moment = require('moment'),
+    Range = require('../range'),
+    Controller = require('../controller'),
+    Component = require('../component/component'),
+    RootPanel = require('../component/rootpanel'),
+    TimeAxis = require('../component/timeaxis'),
+    ItemSet = require('../component/itemset');
+
 /**
  * Create a timeline visualization
  * @param {HTMLElement} container
@@ -140,4 +149,4 @@ Timeline.prototype.setData = function(data) {
 };
 
 // exports
-vis.Timeline = Timeline;
+module.exports = exports = Timeline;

test/timeline.html

@@ -2,6 +2,13 @@
 <html>
 <head>
     <title></title>
+    <script>
+        function require() {}
+        var module = {
+            exports: {}
+        };
+        var exports = module.exports;
+    </script>
     <script src="../lib/moment.min.js"></script>
     <script src="../src/module.js"></script>
     <script src="../src/util.js"></script>