JSX Support

Rakefile

@@ -7,4 +7,4 @@ Rake::TestTask.new(:test) do |t|
   t.test_files = FileList['test/**/*_test.rb']
 end
 
-task :default => :spec
+task :default => :test

js/babel-plugin-sprockets-commoner-internal/index.js

@@ -242,7 +242,7 @@ module.exports = function (context) {
           opts = {
             globalNamespaces: [],
             // We can get these from Sprockets
-            extensions: ['.js', '.json', '.coffee', '.js.erb', '.coffee.erb']
+            extensions: ['.js', '.jsx', '.json', '.coffee', '.js.erb', '.jsx.erb', '.coffee.erb']
           };
 
           Object.assign(opts, state.opts, { basedir: dirname(state.file.opts.filename) });

lib/sprockets/commoner.rb

@@ -1,5 +1,6 @@
 require 'sprockets'
 require 'sprockets/commoner/json_processor'
+require 'sprockets/commoner/jsx_processor'
 require 'sprockets/commoner/processor'
 require 'sprockets/commoner/bundle'
 
@@ -10,8 +11,10 @@ def self.sprockets4?
     end
   end
 
+  register_mime_type "application/jsx", extensions: [".js.jsx",".jsx"], charset: :unicode
   register_postprocessor 'application/javascript', ::Sprockets::Commoner::Processor
   register_transformer 'application/json', 'application/javascript', ::Sprockets::Commoner::JSONProcessor
+  register_transformer 'application/jsx', 'application/javascript', ::Sprockets::Commoner::JSXProcessor
   register_bundle_metadata_reducer 'application/javascript', :commoner_enabled, false, :|
   register_bundle_metadata_reducer 'application/javascript', :commoner_required, Set.new, :+
   register_bundle_metadata_reducer 'application/javascript', :commoner_used_helpers, Set.new, :+

lib/sprockets/commoner/jsx_processor.rb

@@ -0,0 +1,9 @@
+module Sprockets
+  module Commoner
+    class JSXProcessor
+      def self.call(input)
+        { data: input[:data] }
+      end
+    end
+  end
+end

lib/sprockets/commoner/processor.rb

@@ -11,7 +11,7 @@ class Processor < Schmooze::Base
       BABELRC_FILE = '.babelrc'.freeze
       PACKAGE_JSON = 'package.json'.freeze
       JS_PACKAGE_PATH = File.expand_path('../../../js', __dir__)
-      ALLOWED_EXTENSIONS = /\.js(?:on)?(?:\.erb)?\z/
+      ALLOWED_EXTENSIONS = /\.js(?:on|x)?(?:\.erb)?\z/
 
       dependencies babel: 'babel-core', commoner: 'babel-plugin-sprockets-commoner-internal'
 

test/allowed_extensions_test.rb

@@ -0,0 +1,23 @@
+require 'test_helper'
+
+class AllowedExtensionsTest < MiniTest::Test
+  def setup
+    @env = Sprockets::Environment.new(File.join(__dir__, 'fixtures'))
+    @processor = Sprockets::Commoner::Processor.new(@env.root)
+  end
+
+  def test_allowed_extensions
+    assert @processor.send('should_process?', "#{@env.root}/my-lib.js")
+    assert @processor.send('should_process?', "#{@env.root}/my-lib.js.erb")
+    assert @processor.send('should_process?', "#{@env.root}/my-lib.json")
+    assert @processor.send('should_process?', "#{@env.root}/my-lib.json.erb")
+    assert @processor.send('should_process?', "#{@env.root}/myComponent.jsx")
+    assert @processor.send('should_process?', "#{@env.root}/myComponent.jsx.erb")
+  end
+
+  def test_forbidden_extensions
+    assert [email protected]('should_process?', "#{@env.root}/my-lib.jso")
+    assert [email protected]('should_process?', "#{@env.root}/my-lib.jsxon")
+    assert [email protected]('should_process?', "#{@env.root}/my-lib.jsonx")
+  end
+end

test/fixtures/package.json

@@ -2,6 +2,7 @@
   "private": true,
   "dependencies": {
     "babel-core": "6.9.1",
-    "babel-preset-es2015": "6.9.0"
+    "babel-preset-es2015": "6.9.0",
+    "babel-preset-react": "^6.16.0"
   }
 }

test/fixtures/react/.babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ["react"]
+}

test/fixtures/react/index.js

@@ -0,0 +1 @@
+require('./render');

test/fixtures/react/render.jsx

@@ -0,0 +1,4 @@
+ReactDOM.render(
+  <h1>Hello, world!</h1>,
+  document.getElementById('root')
+);

test/react_test.rb

@@ -0,0 +1,30 @@
+require 'test_helper'
+
+class ReactTest < MiniTest::Test
+  def setup
+    @env = Sprockets::Environment.new(File.join(__dir__, 'fixtures'))
+    @env.append_path File.join(__dir__, 'fixtures')
+  end
+
+  def test_react
+    assert asset = @env['react.js']
+    assert_equal <<-JS.chomp, asset.to_s.chomp
+!function(global) {
+var __commoner_initialize_module__ = function(f) {
+  var module = {exports: {}};
+  f.call(module.exports, module, module.exports);
+  return module.exports;
+};
+
+var __commoner_module__react$render_jsx = __commoner_initialize_module__(function (module, exports) {
+  ReactDOM.render(React.createElement(
+    'h1',
+    null,
+    'Hello, world!'
+  ), document.getElementById('root'));
+});
+var __commoner_module__react$index_js = {};
+}(typeof global != 'undefined' ? global : typeof window != 'undefined' ? window : this);
+JS
+  end
+end