react.rb 0.0.2 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2dbadd7b8df4dbcfb57fd8b20da802307d913740
-  data.tar.gz: 649ec20f57caec86097ad8abdfd2075abf3d8997
+  metadata.gz: c1e1e89f7d83f0101d262fc4249dedea946c4af1
+  data.tar.gz: ea0be5738084717bcc7388913225388086d67c7f
 SHA512:
-  metadata.gz: 0ce9d3607ecca7d4891b0ba96dca4ebe5bcd950ff8092a3bd569cbd0da536a4c0f2bbc96faa6e17361875f07b0620bfd3aa13958edc96d7c51225af17d5ed053
-  data.tar.gz: a351a443594be61d7759cf02242a42424e2048a520aa2cac19208d533b358b50d33b9f09d37a1e3dbf32218f95d8d797b2ec19915dd9215d81b3a4be12820fec
+  metadata.gz: a52fc1017a3b72de35f702ecdee98e467b210b2d32dd236a7741a73a53874ddabf8b8711e335668f08e0321d1caa135a5519bcb13b402d219e4ddfc1c50ba45c
+  data.tar.gz: 7dd1646fc98747735c9511d96ef08a859834897781daa9f9029a6902ecb021f9972d7432ce635875e126666eded3ec4d440d5d50d3d2c078db65e9017a4866e0

data/Gemfile.lock

@@ -1,16 +1,22 @@
 PATH
   remote: .
   specs:
-    react.rb (0.0.1)
+    react.rb (0.1.0)
       opal (~> 0.6.0)
       opal-activesupport
+      sprockets-es6
+      therubyracer
 
 GEM
   remote: https://rubygems.org/
   specs:
-    hike (1.2.3)
+    babel-source (4.7.16)
+    babel-transpiler (0.6.0)
+      babel-source (>= 4.0, < 5)
+      execjs (~> 2.0)
+    execjs (2.4.0)
     json (1.8.2)
-    multi_json (1.10.1)
+    libv8 (3.16.14.7)
     opal (0.6.3)
       source_map
       sprockets
@@ -24,17 +30,21 @@ GEM
     rack-protection (1.5.3)
       rack
     react-source (0.12.2)
+    ref (1.0.5)
     sinatra (1.4.5)
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (~> 1.3, >= 1.3.4)
     source_map (3.0.1)
       json
-    sprockets (2.12.3)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
+    sprockets (3.0.0.beta.10)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
+    sprockets-es6 (0.6.0)
+      babel-transpiler
+      sprockets (~> 3.0.0.beta)
+    therubyracer (0.12.1)
+      libv8 (~> 3.16.14.0)
+      ref
     tilt (1.4.1)
 
 PLATFORMS

data/README.md

@@ -1,8 +1,11 @@
 # React.rb
 
+[![Gem Version](https://badge.fury.io/rb/react.rb.svg)](http://badge.fury.io/rb/react.rb)
+[![Code Climate](https://codeclimate.com/github/zetachang/react.rb/badges/gpa.svg)](https://codeclimate.com/github/zetachang/react.rb)
+
 **React.rb is an [Opal Ruby](http://opalrb.org) wrapper of [React.js library](http://facebook.github.io/react/)**.
 
-It let you write reactive UI component with Ruby's elegancy and compiled to run in Javascript. :heart:
+It lets you write reactive UI components, with Ruby's elegance and compiled to run in JavaScript. :heart:
 
 ## Installation
 
@@ -115,6 +118,51 @@ React.render(React.create_element(App), `document.body`)
 * Use helper method `define_state` to create setter & getter of `this.state` for you
 * For the detailed mapping to the original API, see [this issue](https://github.com/zetachang/react.rb/issues/2) for reference. Complete reference will come soon.
 
+### Element Building DSL
+
+As a replacement of JSX, include `React::Component` and you can build `React.Element` hierarchy without all the `React.create_element` noises.
+
+```ruby
+def render
+  div do
+    h1 { "Title" }
+    h2 { "subtitle"}
+    div(class_name: 'fancy', id: 'foo') { span { "some text #{interpolation}"} }
+    present FancyElement, fancy_props: '10'
+  end
+end
+```
+
+## JSX Support
+
+Not a fan of using element building DSL? Use file extension `.jsx.rb` to get JSX fragment compiled.
+
+```ruby
+# app.jsx.rb
+class Fancy
+  def render
+    React.create_element('div') { "fancy" }
+  end
+end
+
+class App
+  include React::Component
+
+  def render
+    jsx(%x{
+      <div>
+        <h1>Outer</h1>
+        <Fancy>{ #{5.times.to_a.join(",")} }</Fancy>
+      </div>
+    })
+  end
+end
+
+React.expose_native_class(Fancy)
+
+React.render React.create_element(App), `document.body`
+``` 
+
 ### Props validation
 
 How about props validation? Inspired by [Grape API](https://github.com/intridea/grape), props validation rule could be created easily through `params` class method as below,
@@ -190,6 +238,7 @@ end
 
 * React Tutorial: see [example/react-tutorial](example/react-tutorial), the original CommentBox example.
 * TodoMVC: see [example/todos](example/todos), your beloved TodoMVC <3.
+* JSX Example: see [example/basic-jsx](example/basic-jsx).
 
 ## TODOS
 

data/example/basic-jsx/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'react.rb', :path => '../..'
+gem 'sinatra'
+gem 'react-source'
+gem 'opal-browser'

data/example/basic-jsx/Gemfile.lock

@@ -0,0 +1,57 @@
+PATH
+  remote: ../..
+  specs:
+    react.rb (0.0.2)
+      opal (~> 0.6.0)
+      opal-activesupport
+      sprockets-es6
+      therubyracer
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    babel-source (4.7.3)
+    babel-transpiler (0.6.0)
+      babel-source (>= 4.0, < 5)
+      execjs (~> 2.0)
+    execjs (2.4.0)
+    json (1.8.2)
+    libv8 (3.16.14.7)
+    opal (0.6.3)
+      source_map
+      sprockets
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-browser (0.2.0.beta1)
+      opal (~> 0.6.0)
+      paggio
+    paggio (0.2.4)
+    rack (1.6.0)
+    rack-protection (1.5.3)
+      rack
+    react-source (0.12.2)
+    ref (1.0.5)
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    source_map (3.0.1)
+      json
+    sprockets (3.0.0.beta.8)
+      rack (~> 1.0)
+    sprockets-es6 (0.6.0)
+      babel-transpiler
+      sprockets (~> 3.0.0.beta)
+    therubyracer (0.12.1)
+      libv8 (~> 3.16.14.0)
+      ref
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  opal-browser
+  react-source
+  react.rb!
+  sinatra

data/example/basic-jsx/config.ru

@@ -0,0 +1,38 @@
+# config.ru
+require 'bundler'
+Bundler.require
+
+Opal::Processor.source_map_enabled = true
+
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.main = 'example'
+  s.debug = true
+}
+
+map opal.source_maps.prefix do
+  run opal.source_maps
+end
+
+map '/assets' do
+  run opal.sprockets
+end
+
+get '/' do
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Hello React</title>
+        <script src="/assets/react-with-addons.js"></script>
+      </head>
+      <body>
+        <div id="container"></div>
+        <script src="/assets/example.js"></script>
+      </body>
+    </html>
+  HTML
+end
+
+run Sinatra::Application

data/example/basic-jsx/example.jsx.rb

@@ -0,0 +1,35 @@
+require "opal"
+require "react"
+require "browser"
+
+class Clock
+  include React::Component
+
+  def render
+    message = "React has been successfully running for #{params[:elapsed].round} seconds."
+
+    jsx %x{
+      <p>{#{message}}</p>
+    }
+  end
+end
+
+class ExampleApp
+  include React::Component
+
+  def render
+    jsx(%x{
+      <Clock elapsed={#{params[:elapsed]}} />
+    })
+  end
+end
+
+React.expose_native_class(Clock, ExampleApp)
+
+start = Time.now
+
+$window.every(0.05) do
+  element = React::Element.new(`<ExampleApp elapsed={#{Time.now - start}}/>`)
+  container = `document.getElementById('container')`
+  React.render element, container
+end

data/lib/react.rb

@@ -7,9 +7,11 @@ if RUBY_ENGINE == 'opal'
   require "react/api"
   require "react/validator"
 else
+  require "tilt"
   require "opal"
   require "react/version"
   require "opal-activesupport"
+  require "react/ext/jsx_support"
 
   Opal.append_path File.expand_path('../', __FILE__).untaint
   Opal.append_path File.expand_path('../../vendor', __FILE__).untaint

data/lib/react/api.rb

@@ -8,60 +8,7 @@ module React
       # Component Spec or Nomral DOM
       if type.kind_of?(Class)
         raise "Provided class should define `render` method"  if !(type.method_defined? :render)
-        @@component_classes[type.to_s] ||= %x{
-          React.createClass({
-            propTypes: #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`},
-            getDefaultProps: function(){
-              return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
-            },
-            getInitialState: function(){
-              return #{type.respond_to?(:initial_state) ? type.initial_state.to_n : `{}`};
-            },
-            componentWillMount: function() {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_will_mount if type.method_defined? :component_will_mount};
-            },
-            componentDidMount: function() {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_did_mount if type.method_defined? :component_did_mount};
-            },
-            componentWillReceiveProps: function(next_props) {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_will_receive_props(`next_props`) if type.method_defined? :component_will_receive_props};
-            },
-            shouldComponentUpdate: function(next_props, next_state) {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.should_component_update?(`next_props`, `next_state`) if type.method_defined? :should_component_update?};
-            },
-            componentWillUpdate: function(next_props, next_state) {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_will_update(`next_props`, `next_state`) if type.method_defined? :component_will_update};
-            },
-            componentDidUpdate: function(prev_props, prev_state) {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_did_update(`prev_props`, `prev_state`) if type.method_defined? :component_did_update};
-            },
-            componentWillUnmount: function() {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.component_will_unmount if type.method_defined? :component_will_unmount};
-            },
-            _getOpalInstance: function() {
-              if (this.__opalInstance == undefined) {
-                var instance = #{type.new(`this`)};
-              } else {
-                var instance = this.__opalInstance;
-              }
-              this.__opalInstance = instance;
-              return instance;
-            },
-            render: function() {
-              var instance = this._getOpalInstance.apply(this);
-              return #{`instance`.render.to_n};
-            }
-          })
-        }
-
-        params << @@component_classes[type.to_s]
+        params << self.native_component_class(type)
       else
         raise "#{type} not implemented" unless HTML_TAGS.include?(type)
         params << type
@@ -71,7 +18,7 @@ module React
       props = {}
       properties.map do |key, value|
          if key == "class_name" && value.is_a?(Hash)
-           props[lower_camelize(key)] = `React.addons.classSet(#{value.to_n})`
+           props[lower_camelize(key)] = value.inject([]) {|ary, (k,v)| v ? ary.push(k) : ary}.join(" ")
          else
            props[React::ATTRIBUTES.include?(lower_camelize(key)) ? lower_camelize(key) : key] = value
          end
@@ -92,6 +39,61 @@ module React
       @@component_classes = {}
     end
 
+    def self.native_component_class(type)
+      @@component_classes[type.to_s] ||= %x{
+        React.createClass({
+          propTypes: #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`},
+          getDefaultProps: function(){
+            return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
+          },
+          getInitialState: function(){
+            return #{type.respond_to?(:initial_state) ? type.initial_state.to_n : `{}`};
+          },
+          componentWillMount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_mount if type.method_defined? :component_will_mount};
+          },
+          componentDidMount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_did_mount if type.method_defined? :component_did_mount};
+          },
+          componentWillReceiveProps: function(next_props) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_receive_props(`next_props`) if type.method_defined? :component_will_receive_props};
+          },
+          shouldComponentUpdate: function(next_props, next_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.should_component_update?(`next_props`, `next_state`) if type.method_defined? :should_component_update?};
+          },
+          componentWillUpdate: function(next_props, next_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_update(`next_props`, `next_state`) if type.method_defined? :component_will_update};
+          },
+          componentDidUpdate: function(prev_props, prev_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_did_update(`prev_props`, `prev_state`) if type.method_defined? :component_did_update};
+          },
+          componentWillUnmount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_unmount if type.method_defined? :component_will_unmount};
+          },
+          _getOpalInstance: function() {
+            if (this.__opalInstance == undefined) {
+              var instance = #{type.new(`this`)};
+            } else {
+              var instance = this.__opalInstance;
+            }
+            this.__opalInstance = instance;
+            return instance;
+          },
+          render: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.render.to_n};
+          }
+        })
+      }
+    end
+
     private
 
     def self.lower_camelize(snake_cased_word)

data/lib/react/component.rb

@@ -77,6 +77,10 @@ module React
       end
     end
 
+    def jsx(native)
+      React::Element.new(native)
+    end
+
     def method_missing(name, *args, &block)
       unless (React::HTML_TAGS.include?(name) || name == 'present' || name == '_p_tag')
         return super

data/lib/react/ext/jsx_support.rb

@@ -0,0 +1,16 @@
+require "execjs"
+require "sprockets"
+require "sprockets/es6"
+
+module ExecJS
+  class Runtime
+    alias_method :orig_compile, :compile
+    def compile(source)
+      context = orig_compile("var console = {error: function(){}, log: function(){}, warn: function(){}, info: function(){}};" + source)
+      context
+    end
+  end
+end
+
+Sprockets.register_mime_type 'text/jsx', extensions: ['.jsx']
+Sprockets.register_transformer 'text/jsx', 'application/javascript', Sprockets::ES6.new('whitelist' => ['react'])

data/lib/react/top_level.rb

@@ -47,4 +47,10 @@ module React
   def self.unmount_component_at_node(node)
     `React.unmountComponentAtNode(node)`
   end
+
+  def self.expose_native_class(*args)
+    args.each do |klass|
+      `window[#{klass.to_s}] = #{React::API.native_component_class(klass)}`
+    end
+  end
 end

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = "0.0.2"
+  VERSION = "0.1.0"
 end

data/react.rb.gemspec

@@ -18,6 +18,8 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency 'opal', '~> 0.6.0'
   s.add_runtime_dependency 'opal-activesupport'
+  s.add_runtime_dependency 'sprockets-es6'
+  s.add_runtime_dependency 'therubyracer'
   s.add_development_dependency 'react-source', '~> 0.12'
   s.add_development_dependency 'opal-rspec', '~> 0.3.0.beta3'
   s.add_development_dependency 'sinatra'

data/spec/component_spec.rb

@@ -594,4 +594,21 @@ describe React::Component do
       expect(component.mounted?).to eq(true)
     end
   end
+
+  describe "Helpers" do
+    describe "jsx" do
+      it "should wrap passed JS object to React::Element" do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+
+          def foo
+            jsx(`React.createElement('div')`)
+          end
+        end
+
+        expect(Foo.new.foo).to be_kind_of(React::Element)
+      end
+    end
+  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react.rb
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.1.0
 platform: ruby
 authors:
 - David Chang
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-25 00:00:00.000000000 Z
+date: 2015-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -38,6 +38,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: sprockets-es6
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: therubyracer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: react-source
   requirement: !ruby/object:Gem::Requirement
@@ -107,6 +135,10 @@ files:
 - LICENSE
 - README.md
 - config.ru
+- example/basic-jsx/Gemfile
+- example/basic-jsx/Gemfile.lock
+- example/basic-jsx/config.ru
+- example/basic-jsx/example.jsx.rb
 - example/react-tutorial/Gemfile
 - example/react-tutorial/Gemfile.lock
 - example/react-tutorial/README.md
@@ -137,6 +169,7 @@ files:
 - lib/react/element.rb
 - lib/react/event.rb
 - lib/react/ext/hash.rb
+- lib/react/ext/jsx_support.rb
 - lib/react/ext/string.rb
 - lib/react/top_level.rb
 - lib/react/validator.rb