Add Transformers (source & browserify)

README.md

@@ -2,6 +2,8 @@
 
 > Grunt task for compiling [Facebook React](http://facebook.github.io/react/)'s .jsx templates into .js
 
+It also works great with `grunt-browserify`!
+
 ## Getting Started
 This plugin requires Grunt `~0.4.0`
 
@@ -37,6 +39,39 @@ grunt.initConfig({
 })
 ```
 
+### Recommended Usage
+Writing your applications in CommonJS format will allow you to use [Browserify](http://browserify.org/) to
+concatenate your files.  Plus, with `grunt-react`, your templates will be converted from JSX to JS *automatically*!
+
+First, install `grunt-browserify` to your project:
+
+```shell
+npm install grunt-browserify --save-dev
+```
+
+Second, register `grunt-browserify` in your Gruntfile:
+
+```js
+grunt.loadNpmTasks('grunt-browserify')
+```
+
+Finally, add the following task to your Gruntfile:
+
+```js
+browserify:     {
+  options:      {
+    transform:  [ require('grunt-react').browserify ]
+  },
+  app:          {
+    src:        'path/to/source/main.js',
+    dest:       'path/to/target/output.js'
+  }
+}
+```
+
+You've successfully concatenated your JSX & JS files into one file!
+
+
 ### Options
 
 #### options.extension

lib/transformers.js

@@ -0,0 +1,32 @@
+/**
+ * Module Dependencies
+ */
+
+var path          = require('path')
+var tools         = path.dirname(require.resolve('react-tools'))
+var visitors      = require(path.join(tools, 'vendor/fbtransform/visitors')).transformVisitors;
+var transform     = require(path.join(tools, 'vendor/fbtransform/lib/transform')).transform;
+var through       = require('through')
+
+/**
+ * Exports
+ */
+
+var Transformers = {};
+
+Transformers.source = function(source) {
+  return transform(visitors.react, source).code;
+};
+
+Transformers.browserify = function(file) {
+  var source  = '';
+
+  return through(function(data) {
+    source += data;
+  }, function() {
+    this.queue(Transformers.source(source));
+    this.queue(null);
+  });
+};
+
+module.exports = Transformers;

main.js

@@ -0,0 +1,11 @@
+/**
+ * Module Dependencies
+ */
+
+var Transformers  = require('./lib/transformers.js');
+
+/**
+ * Exports
+ */
+
+module.exports = Transformers;

package.json

@@ -21,7 +21,7 @@
       "url": "https://github.com/ericclemmons/grunt-react/blob/master/LICENSE-MIT"
     }
   ],
-  "main": "Gruntfile.js",
+  "main": "main.js",
   "engines": {
     "node": ">= 0.8.0"
   },
@@ -44,6 +44,7 @@
     "jsx"
   ],
   "dependencies": {
-    "react-tools": "~0.3.3"
+    "react-tools": "~0.3.3",
+    "through": "~2.3.4"
   }
 }

test/react_test.js

@@ -2,26 +2,6 @@
 
 var grunt = require('grunt');
 
-/*
-  ======== A Handy Little Nodeunit Reference ========
-  https://github.com/caolan/nodeunit
-
-  Test methods:
-    test.expect(numAssertions)
-    test.done()
-  Test assertions:
-    test.ok(value, [message])
-    test.equal(actual, expected, [message])
-    test.notEqual(actual, expected, [message])
-    test.deepEqual(actual, expected, [message])
-    test.notDeepEqual(actual, expected, [message])
-    test.strictEqual(actual, expected, [message])
-    test.notStrictEqual(actual, expected, [message])
-    test.throws(block, [error], [message])
-    test.doesNotThrow(block, [error], [message])
-    test.ifError(value)
-*/
-
 exports.react = {
   setUp: function(done) {
     done();

test/transformers_test.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var Transformers  = require('../lib/transformers');
+var fs            = require('fs');
+
+exports.transformers = {
+  setUp: function(done) {
+    done();
+  },
+  source_js: function(test) {
+    test.expect(1);
+
+    var source    = fs.readFileSync('tmp/default_options/js/fixture.js').toString();
+    var actual    = Transformers.source(source);
+    var expected  = fs.readFileSync('tmp/default_options/js/fixture.js').toString();
+
+    test.equal(actual, expected, 'should leave vanilla JS alone');
+    test.done();
+  },
+  source_jsx: function(test) {
+    test.expect(1);
+
+    var source    = fs.readFileSync('tmp/default_options/js/fixture-jsx.js').toString();
+    var actual    = Transformers.source(source);
+    var expected  = fs.readFileSync('test/expected/default_options').toString();
+
+    test.equal(actual, expected, 'should convert JSX into JS');
+    test.done();
+  }
+};