Opal Array#to_n is deep transform

Author: zetachang

lib/react/api.rb

@@ -67,16 +67,16 @@ def self.create_element(type, properties = {}, &block)
            props[React::ATTRIBUTES.include?(lower_camelize(key)) ? lower_camelize(key) : key] = value
          end
       end
-      params << props
+      params << props.shallow_to_n
 
       # Children Nodes
       if block_given?
         children = [yield].flatten.each do |ele|
-          params << ele
+          params << ele.to_n
         end
       end
 
-      return React::Element.new(`React.createElement.apply(null, #{params.to_n})`)
+      return React::Element.new(`React.createElement.apply(null, #{params})`)
     end
 
     def self.clear_component_class_cache

lib/react/component.rb

@@ -1,6 +1,7 @@
 require "./ext/string"
 require 'active_support/core_ext/class/attribute'
 require 'react/callbacks'
+require "react/ext/hash"
 
 module React
   module Component
@@ -159,7 +160,7 @@ module API
       def set_props(prop, &block)
         raise "No native ReactComponent associated" unless @native
         %x{
-          #{@native}.setProps(#{prop.to_n}, function(){
+          #{@native}.setProps(#{prop.shallow_to_n}, function(){
             #{block.call if block}
           });
         }
@@ -168,7 +169,7 @@ def set_props(prop, &block)
       def set_props!(prop, &block)
         raise "No native ReactComponent associated" unless @native
         %x{
-          #{@native}.replaceProps(#{prop.to_n}, function(){
+          #{@native}.replaceProps(#{prop.shallow_to_n}, function(){
             #{block.call if block}
           });
         }
@@ -177,7 +178,7 @@ def set_props!(prop, &block)
       def set_state(state, &block)
         raise "No native ReactComponent associated" unless @native
         %x{
-          #{@native}.setState(#{state.to_n}, function(){
+          #{@native}.setState(#{state.shallow_to_n}, function(){
             #{block.call if block}
           });
         }
@@ -186,7 +187,7 @@ def set_state(state, &block)
       def set_state!(state, &block)
         raise "No native ReactComponent associated" unless @native
         %x{
-          #{@native}.replaceState(#{state.to_n}, function(){
+          #{@native}.replaceState(#{state.shallow_to_n}, function(){
             #{block.call if block}
           });
         }

lib/react/ext/hash.rb

@@ -0,0 +1,9 @@
+class Hash
+  def shallow_to_n
+    hash = `{}`
+    self.map do |key, value|
+       `hash[#{key}] = #{value}`
+    end
+    hash
+  end
+end

spec/component_spec.rb

@@ -236,11 +236,11 @@ def render
         define_state :foo
 
         before_mount do
-          self.foo = {a: 10}
+          self.foo = [{a: 10}]
         end
 
         def render
-          div { self.foo[:a] }
+          div { self.foo[0][:a] }
         end
       end
 
@@ -271,11 +271,11 @@ def render
       it "should access nested params as orignal Ruby object" do
         Foo.class_eval do
           def render
-            React.create_element("div") { params[:prop][:foo] }
+            React.create_element("div") { params[:prop][0][:foo] }
           end
         end
 
-        element = renderToDocument(Foo, prop: {foo: 10})
+        element = renderToDocument(Foo, prop: [{foo: 10}])
         expect(element.getDOMNode.textContent).to eq("10")
       end
     end