closes #252 #262 #263

Author: catmando

hyper-react.gemspec

@@ -38,6 +38,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'opal-rails', '~> 0.9.4'
   spec.add_development_dependency 'opal-rspec'
   spec.add_development_dependency 'puma'
+  spec.add_development_dependency 'pry'
   spec.add_development_dependency 'rails', '>= 4.0.0'
   spec.add_development_dependency 'rails-controller-testing'
   spec.add_development_dependency 'rake'

lib/hyper-react.rb

@@ -39,6 +39,7 @@ class Component
   require 'react/rendering_context'
   require 'react/state'
   require 'react/object'
+  require 'react/to_key'
   require 'react/ext/opal-jquery/element'
   require 'reactive-ruby/isomorphic_helpers'
   require 'rails-helpers/top_level_rails_component'

lib/react/ext/opal-jquery/element.rb

@@ -23,4 +23,15 @@ def self.[](selector)
 
     React.render(React.create_element(`#{self.to_n}._reactrb_component_class`), self)
   end
+
+  # mount_components is useful for dynamically generated page segments for example
+  # see react-rails documentation for more details
+
+  %x{
+    $.fn.mount_components = function() {
+      this.each(function(e) { ReactRailsUJS.mountComponents(e[0]) })
+      return this;
+    }
+  }
+  Element.expose :mount_components
 end if Object.const_defined?('Element')

lib/react/object.rb

@@ -12,20 +12,4 @@ def const_missing(const_name)
       React::Component::Tags.html_tag_class_for(const_name) || raise(e)
     end
   end
-
-  def to_key
-    object_id
-  end
-end
-
-class Number
-  def to_key
-    self
-  end
-end
-
-class Boolean
-  def to_key
-    self
-  end
 end

lib/react/to_key.rb

@@ -0,0 +1,26 @@
+# to_key method returns a suitable unique id that can be used as
+# a react `key`.  Other classes may override to_key as needed
+# for example hyper_mesh returns the object id of the internal
+# backing record.
+#
+# to_key is automatically called on objects passed as keys for
+# example Foo(key: my_object) results in Foo(key: my_object.to_key)
+class Object
+  def to_key
+    object_id
+  end
+end
+
+# for Number to_key can just be the number itself
+class Number
+  def to_key
+    self
+  end
+end
+
+# for Boolean to_key can be true or false
+class Boolean
+  def to_key
+    self
+  end
+end

lib/reactive-ruby/rails/component_mount.rb

@@ -12,9 +12,9 @@ def react_component(name, props = {}, options = {}, &block)
           options = context_initializer_options(options, name)
         end
         props = serialized_props(props, name, controller)
-        super(top_level_name, props, options, &block).gsub("\n","")
-          .gsub(/(<script>.*<\/script>)<\/div>$/,'</div>\1').html_safe +
-          footers
+        result = super(top_level_name, props, options, &block).gsub("\n","")
+        result = result.gsub(/(<script.*<\/script>)<\/div>$/,'</div>\1').html_safe
+        result + footers
       end
 
       private

lib/reactive-ruby/serializers.rb

@@ -1,12 +1,20 @@
-[Bignum, FalseClass, Fixnum, Float, Integer, NilClass, String, Symbol, Time, TrueClass].each do |klass|
-  klass.send(:define_method, :react_serializer) do 
+[FalseClass, Float, Integer, NilClass, String, Symbol, Time, TrueClass].each do |klass|
+  klass.send(:define_method, :react_serializer) do
     as_json
   end
 end
 
+if Gem::Version.new(RUBY_VERSION) < Gem::Version.new('2.4.0')
+  [Bignum, Fixnum].each do |klass|
+    klass.send(:define_method, :react_serializer) do
+      as_json
+    end
+  end
+end
+
 BigDecimal.send(:define_method, :react_serializer) { as_json } rescue nil
 
-Array.send(:define_method, :react_serializer) do 
+Array.send(:define_method, :react_serializer) do
   self.collect { |e| e.react_serializer }.as_json
 end
 

lib/reactive-ruby/server_rendering/contextual_renderer.rb

@@ -14,6 +14,11 @@ def initialize(options = {})
         ComponentLoader.new(v8_context).load
       end
 
+      def before_render(*args)
+        # the base class clears the log history... we don't want that as it is taken
+        # care of in IsomorphicHelpers.load_context
+      end
+
       def render(component_name, props, prerender_options)
         if prerender_options.is_a?(Hash)
           if !v8_runtime? && prerender_options[:context_initializer]

spec/react/dsl_spec.rb

@@ -103,7 +103,7 @@ def render
         end
       end
     end
-    expect(page.body[-80..-19]).to match(/(<div data-reactroot=""|<div)><span>hello<(br|br\/|br \/)><\/span><\/div>/)
+    expect(page.body[-285..-233]).to match(/(<div data-reactroot=""|<div)><span>hello<(br|br\/|br \/)><\/span><\/div>/)
   end
 
   it "has a .td short hand String method" do
@@ -197,7 +197,7 @@ class Foo < React::Component::Base
         'raised for sure!'
       end
     end.to eq('raised for sure!')
-      
+
   end
 
   it "will treat the component class name as a first class component name" do

spec/react/element_spec.rb

@@ -28,7 +28,7 @@ def render
           end
         end
       end
-      expect(page.body[-80..-19]).to match(/<input (type="text" value=""|value="" type="text").*\/>/)
+      expect(page.body[-285..-233]).to match(/<input (type="text" value=""|value="" type="text").*\/>/)
     end
   end
 
@@ -62,7 +62,7 @@ def render
     end
 
     it 'will subscribe to a native components event param' do
-      
+
       evaluate_ruby do
         "this makes sure everything is loaded"
       end
@@ -84,7 +84,7 @@ class Foo < React::Component::Base
     end
 
     it 'will subscribe to a component event param with a non-default name' do
-      
+
       evaluate_ruby do
         class Foo < React::Component::Base
           param :my_event, type: Proc, default: nil, allow_nil: true

spec/react/opal_jquery_extensions_spec.rb

@@ -67,5 +67,28 @@ def render
       expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
           .not_to match(/Exception|Error/)
     end
+
+    it "can dynamically mount components" do
+      on_client do
+        class DynoMount < Hyperloop::Component
+          render(DIV) { 'I got rendered' }
+        end
+      end
+      mount 'MountPoint' do
+        class MountPoint < Hyperloop::Component
+          render(DIV) do
+            # simulate what react-rails render_component output
+            DIV(
+              'data-react-class' => 'React.TopLevelRailsComponent',
+              'data-react-props' => '{"render_params": {}, "component_name": "DynoMount", "controller": ""}'
+            )
+          end
+        end
+      end
+      evaluate_ruby do
+        Element['body'].mount_components
+      end
+      expect(page).to have_content('I got rendered')
+    end
   end
 end