Merge pull request #16 from zetachang/native-element

zetachang · zetachang · commit 46de6b0f9ee2 · 2015-04-01T20:10:02.000+08:00
Native React::Element
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,7 @@
+## edge (upcoming 0.2.0)
+
+*  Deprecating `jsx` helper
+*  Deprecating `React::Element.new`, use `React.create_element` instead
+*  `React::Element` is now toll-free bridge to [ReactElement](http://facebook.github.io/react/docs/glossary.html#react-elements)
+*  `React::Element#props` now return a `Hash` rather than a `Native`
+*  `React::Element#children` now handling empty child & single child correctly
diff --git a/README.md b/README.md
@@ -150,12 +150,12 @@ class App
   include React::Component
 
   def render
-    jsx(%x{
+    %x{
       <div>
         <h1>Outer</h1>
         <Fancy>{ #{5.times.to_a.join(",")} }</Fancy>
       </div>
-    })
+    }
   end
 end
 
diff --git a/example/basic-jsx/Gemfile.lock b/example/basic-jsx/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ../..
   specs:
-    react.rb (0.0.2)
+    react.rb (0.1.0)
       opal (~> 0.6.0)
       opal-activesupport
       sprockets-es6
@@ -10,7 +10,7 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    babel-source (4.7.3)
+    babel-source (4.7.16)
     babel-transpiler (0.6.0)
       babel-source (>= 4.0, < 5)
       execjs (~> 2.0)
diff --git a/example/basic-jsx/example.jsx.rb b/example/basic-jsx/example.jsx.rb
@@ -8,19 +8,16 @@ class Clock
   def render
     message = "React has been successfully running for #{params[:elapsed].round} seconds."
 
-    jsx %x{
-      <p>{#{message}}</p>
-    }
+    
+    `<p>{#{message}}</p>`
   end
 end
 
 class ExampleApp
   include React::Component
 
   def render
-    jsx(%x{
-      <Clock elapsed={#{params[:elapsed]}} />
-    })
+    `<Clock elapsed={#{params[:elapsed]}} />`
   end
 end
 
@@ -29,7 +26,7 @@ def render
 start = Time.now
 
 $window.every(0.05) do
-  element = React::Element.new(`<ExampleApp elapsed={#{Time.now - start}}/>`)
+  element = `<ExampleApp elapsed={#{Time.now - start}}/>`
   container = `document.getElementById('container')`
   React.render element, container
 end
diff --git a/example/react-tutorial/Gemfile.lock b/example/react-tutorial/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
@@ -21,19 +27,23 @@ GEM
     rack (1.6.0)
     rack-protection (1.5.3)
       rack
-    react-source (0.12.2)
-    sinatra (1.4.5)
+    react-source (0.13.1)
+    ref (1.0.5)
+    sinatra (1.4.6)
       rack (~> 1.4)
       rack-protection (~> 1.4)
-      tilt (~> 1.3, >= 1.3.4)
+      tilt (>= 1.3, < 3)
     source_map (3.0.1)
       json
-    sprockets (2.12.3)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
+    sprockets (3.0.0.rc.1)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    tilt (1.4.1)
+    sprockets-es6 (0.6.0)
+      babel-transpiler
+      sprockets (~> 3.0.0.beta)
+    therubyracer (0.12.1)
+      libv8 (~> 3.16.14.0)
+      ref
+    tilt (2.0.1)
 
 PLATFORMS
   ruby
diff --git a/example/react-tutorial/config.ru b/example/react-tutorial/config.ru
@@ -42,7 +42,7 @@ get '/' do
         <link rel="stylesheet" href="base.css" />
         <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
-        <script src="/assets/react-with-addons.min.js"></script>
+        <script src="/assets/react-with-addons.js"></script>
         <script src="/assets/example.js"></script>
       </head>
       <body>
diff --git a/example/react-tutorial/example.rb b/example/react-tutorial/example.rb
@@ -100,5 +100,5 @@ def render
 
 
 Document.ready? do
-  React.render React.create_element(CommentBox, url: "comments.json", poll_interval: 2000), Element.find('#content').get(0)
+  React.render React.create_element(CommentBox, url: "comments.json", poll_interval: 2000), `document.getElementById('content')`
 end
diff --git a/example/todos/Gemfile b/example/todos/Gemfile
@@ -6,6 +6,6 @@ gem 'opal-jquery',    :github => 'opal/opal-jquery'
 gem 'vienna',         :github => 'opal/vienna', :ref => '593335cbd7fb99ce471fa720e9b9c849d99b8dda'
 gem 'opal-haml',      :github => 'opal/opal-haml'
 gem 'opal-rspec',     '0.3.0.beta2'
-gem 'react.rb', :path => "../.."
+gem 'react.rb', '~> 0.0.2'
 gem 'thin'
 gem 'react-source'
diff --git a/example/todos/Gemfile.lock b/example/todos/Gemfile.lock
@@ -32,13 +32,6 @@ GIT
       opal-activesupport
       opal-jquery
 
-PATH
-  remote: ../..
-  specs:
-    react.rb (0.0.1)
-      opal (~> 0.6.0)
-      opal-activesupport
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -56,6 +49,9 @@ GEM
     rack (1.5.2)
     rake (10.1.1)
     react-source (0.12.2)
+    react.rb (0.0.2)
+      opal (~> 0.6.0)
+      opal-activesupport
     source_map (3.0.1)
       json
     sprockets (2.12.3)
@@ -79,6 +75,6 @@ DEPENDENCIES
   opal-rspec (= 0.3.0.beta2)
   rake
   react-source
-  react.rb!
+  react.rb (~> 0.0.2)
   thin
   vienna!
diff --git a/lib/react/api.rb b/lib/react/api.rb
@@ -32,7 +32,7 @@ def self.create_element(type, properties = {}, &block)
         end
       end
 
-      return React::Element.new(`React.createElement.apply(null, #{params})`)
+      return `React.createElement.apply(null, #{params})`
     end
 
     def self.clear_component_class_cache
diff --git a/lib/react/component.rb b/lib/react/component.rb
@@ -77,10 +77,6 @@ def p(*args, &block)
       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
diff --git a/lib/react/element.rb b/lib/react/element.rb
@@ -1,63 +1,97 @@
 require "./ext/string"
 
 module React
-  class Element
-    include Native
-
-    alias_native :element_type, :type
-    alias_native :props, :props
-
-    def initialize(native_element)
-      @native = native_element
+  class Element < `(function(){var f = new Function();f.prototype = Object.getPrototypeOf(React.createElement(''));return f})()`
+    def self.new
+      raise "use React.create_element instead"
     end
-
+    
+    def element_type
+      `self.type`
+    end
+    
+    def key
+      Native(`self.key`)
+    end
+    
+    def props
+      Hash.new(`self.props`)
+    end
+    
+    def ref
+      Native(`self.ref`)
+    end
+    
     def on(event_name)
       name = event_name.to_s.event_camelize
+      
+      
       if React::Event::BUILT_IN_EVENTS.include?("on#{name}")
-        self.props["on#{name}"] = %x{
+        prop_key = "on#{name}"
+        callback =  %x{
           function(event){
             #{yield React::Event.new(`event`)}
           }
         }
       else
-        self.props["_on#{name}"] = %x{
+        prop_key = "_on#{name}"
+        callback = %x{
           function(){
             #{yield *Array(`arguments`)}
           }
         }
       end
+      
+      `self.props[#{prop_key}] = #{callback}`
+      
       self
     end
 
     def children
-      nodes = self.props.children
-      class << nodes
-        include Enumerable
-
-        def to_n
-          self
+      nodes = `self.props.children`
+      
+      if `React.Children.count(nodes)` == 0
+        `[]`
+      elsif `React.Children.count(nodes)` == 1
+        if `(typeof nodes === 'string') || (typeof nodes === 'number')`
+          [nodes]
+        else
+          `[React.Children.only(nodes)]`
         end
+      else
+        # Not sure the overhead of doing this..
+        class << nodes
+          include Enumerable
+
+          def to_n
+            self
+          end
 
-        def each(&block)
-          if block_given?
-            %x{
-              React.Children.forEach(#{self.to_n}, function(context){
-                #{block.call(React::Element.new(`context`))}
-              })
-            }
-          else
-            Enumerator.new(`React.Children.count(#{self.to_n})`) do |y|
+          def each(&block)
+            if block_given?
               %x{
                 React.Children.forEach(#{self.to_n}, function(context){
-                  #{y << React::Element.new(`context`)}
+                  #{block.call(`context`)}
                 })
               }
+            else
+              Enumerator.new(`React.Children.count(#{self.to_n})`) do |y|
+                %x{
+                  React.Children.forEach(#{self.to_n}, function(context){
+                    #{y << `context`}
+                  })
+                }
+              end
             end
           end
         end
+        
+        nodes
       end
-
-      nodes
+    end
+  
+    def to_n
+      self
     end
   end
 end
diff --git a/lib/react/top_level.rb b/lib/react/top_level.rb
@@ -27,21 +27,21 @@ def self.create_element(type, properties = {}, &block)
   end
 
   def self.render(element, container)
-    component = Native(`React.render(#{element.to_n}, container, function(){#{yield if block_given?}})`)
+    component = Native(`React.render(#{element}, container, function(){#{yield if block_given?}})`)
     component.class.include(React::Component::API)
     component
   end
 
   def self.is_valid_element(element)
-    element.kind_of?(React::Element) && `React.isValidElement(#{element.to_n})`
+    `React.isValidElement(#{element})`
   end
 
   def self.render_to_string(element)
-    `React.renderToString(#{element.to_n})`
+    `React.renderToString(#{element})`
   end
 
   def self.render_to_static_markup(element)
-    `React.renderToStaticMarkup(#{element.to_n})`
+    `React.renderToStaticMarkup(#{element})`
   end
 
   def self.unmount_component_at_node(node)
diff --git a/spec/component_spec.rb b/spec/component_spec.rb
@@ -594,21 +594,4 @@ def render
       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
diff --git a/spec/element_spec.rb b/spec/element_spec.rb
diff --git a/spec/react_spec.rb b/spec/react_spec.rb
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
