closes ruby-hyperloop#252 ruby-hyperloop#262 ruby-hyperloop#263

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