CommonJS Support (with refactored internals)

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 test/d3.chart.test-build.js
+test/sample-cjs-app/packaged.js
 bower_components/

Gruntfile.js

@@ -2,27 +2,17 @@ module.exports = function(grunt) {
 
 	"use strict";
 
-	grunt.initConfig({
-		meta: {
-			pkg: grunt.file.readJSON("package.json"),
-			srcFiles: [
-				"src/init.js",
-				"src/layer.js",
-				"src/layer-extensions.js",
-				"src/chart.js",
-				"src/chart-extensions.js"
-			]
-		}
-	});
-
 	grunt.loadTasks("build/tasks");
 
-	grunt.registerTask("build", ["concat:release", "uglify"]);
+	grunt.registerTask("build", ["webpack:dist", "webpack:dist-min"]);
 
 	grunt.registerTask("test-unit", ["mocha:unit"]);
 	grunt.registerTask(
 		"test-build",
-		["concat:test", "mocha:exportsAmd", "mocha:exportsGlobal"]
+		[
+			"webpack:test", "browserify", "mocha:exportsAmd",
+			"mocha:exportsCommonjs", "mocha:exportsGlobal"
+		]
 	);
 	grunt.registerTask("test", ["jshint", "jscs", "test-unit", "test-build"]);
 

build/tasks/browserify.js

@@ -0,0 +1,20 @@
+module.exports = function(grunt) {
+	"use strict";
+
+	grunt.config.set("browserify", {
+		"test-app": {
+			files: {
+				"test/sample-cjs-app/packaged.js": [
+					"test/sample-cjs-app/main.js"
+				]
+			},
+			options: {
+				alias: {
+					"d3.chart": "./test/d3.chart.test-build.js"
+				}
+			}
+		}
+	});
+
+	grunt.loadNpmTasks("grunt-browserify");
+};

build/tasks/jshint.js

@@ -6,7 +6,7 @@ module.exports = function(grunt) {
 			options: {
 				jshintrc: "src/.jshintrc"
 			},
-			src: ["<%= meta.srcFiles %>"]
+			src: ["src/*.js"]
 		},
 		examples: {
 			options: {

build/tasks/mocha.js

@@ -37,6 +37,16 @@ module.exports = function(grunt) {
 				}
 			}
 		},
+		exportsCommonjs: {
+			src: ["test/index.html"],
+			options: {
+				page: {
+					settings: {
+						userAgent: "PhantomJS:testSource(commonjs)"
+					}
+				}
+			}
+		},
 		exportsGlobal: {
 			src: ["test/index.html"],
 			options: {

build/tasks/webpack.js

@@ -0,0 +1,31 @@
+var webpack = require("webpack");
+
+module.exports = function(grunt) {
+	"use strict";
+
+	grunt.config.set("webpack", {
+		options: require("../webpack.config.js"),
+		dist: {
+			output: {
+				filename: "d3.chart.js"
+			}
+		},
+		"dist-min": {
+			output: {
+				filename: "d3.chart.min.js",
+				sourceMapFilename: "d3.chart.min.map",
+			},
+			devtool: "source-map",
+			plugins: [
+				new webpack.optimize.UglifyJsPlugin()
+			]
+		},
+		test: {
+			output: {
+				filename: "test/d3.chart.test-build.js"
+			}
+		}
+	});
+
+	grunt.loadNpmTasks("grunt-webpack");
+};

build/webpack.config.js

@@ -0,0 +1,38 @@
+"use strict";
+var webpack = require("webpack");
+
+var pkg = require("../package.json");
+var now = new Date();
+
+function pad(num) {
+	return (num < 10 ? "0" : "") + num;
+}
+
+var banner = [
+	pkg.name + " - v" + pkg.version,
+	"License: " + pkg.license,
+	"Date: " + now.getFullYear() + "-" + pad(now.getMonth()) + "-" +
+		pad(now.getDate())
+].join("\n");
+
+module.exports = {
+	context: "src",
+	entry: "./chart-extensions",
+	output: {
+		/**
+		 * Ensure the name of the exported AMD module is "d3.chart". This makes
+		 * the browser global somewhat awkward to use (`window["d3.chart"]`),
+		 * but consumers in those contexts are most likely referencing the
+		 * function through the `d3` global.
+		 */
+		library: "d3.chart",
+		libraryTarget: "umd",
+		umdNamedDefine: true
+	},
+	plugins: [
+		new webpack.BannerPlugin(banner)
+	],
+	externals: {
+		d3: true
+	}
+};

package.json

@@ -21,13 +21,21 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "d3": "^3.5.12",
     "grunt": "~0.4.0",
+    "grunt-browserify": "^4.0.1",
     "grunt-cli": "~0.1.11",
     "grunt-contrib-concat": "~0.1.3",
     "grunt-contrib-jshint": "^0.9.2",
     "grunt-contrib-uglify": "~0.1.1",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-jscs": "^1.8.0",
-    "grunt-mocha": "~0.4.6"
+    "grunt-mocha": "~0.4.6",
+    "grunt-webpack": "^1.0.11",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
+  },
+  "peerDependencies": {
+    "d3": "3.x.x"
   }
 }

readme.md

@@ -21,15 +21,24 @@ You can also install it via [npm](http://npmjs.org) by running:
 
     $ npm install d3.chart
 
-Otherwise, you can download it directly and embed it using a script tag.
+Otherwise, you can download it directly from this repository.
 
-`d3.chart` depends on D3.js, so include it only *after* D3.js has been
-defined in the document, e.g.
+## Using
 
-```html
-<script src="scripts/lib/d3.v3.min.js"></script>
-<script src="scripts/lib/d3.chart.min.js"></script>
-```
+d3.chart implements "UMD", making it convenient to consume from a number of
+environments:
+
+- The library may be loaded in a web browser directly via HTML `<script>`
+  tags--just be sure to load it *after* D3.js, e.g.
+
+  ```html
+  <script src="scripts/lib/d3.v3.min.js"></script>
+  <script src="scripts/lib/d3.chart.min.js"></script>
+  ```
+- From [AMD](https://github.com/amdjs/amdjs-api)-enabled environments, simply
+  add an entry for "d3.chart" in your `paths` configuration.
+- Consuming using [CommonJS modules](http://wiki.commonjs.org/wiki/Modules/1.1)
+  (e.g. via tools like [Browserify](http://browserify.org/)) should "just work"
 
 ## Build Instructions
 

src/.jshintrc

@@ -3,10 +3,7 @@
   "browser": true,
   "globalstrict": true,
   "globals": {
-    "hasOwnProp": true,
-    "d3": true,
-    "d3cAssert": true,
-    "Layer": true,
-    "Chart": true
+    "require": false,
+    "define": false
   }
 }

src/assert.js

@@ -0,0 +1,10 @@
+define(function(require, exports, module) {
+	"use strict";
+
+	module.exports = function(test, message) {
+		if (test) {
+			return;
+		}
+		throw new Error("[d3.chart] " + message);
+	};
+});