closes #43 #44 #46

Author: catmando

HYPERLOOP_VERSION

@@ -1 +1 @@
-0.99.1
+0.99.2

ruby/hyper-component/Gemfile.lock

@@ -1,17 +1,9 @@
-GIT
-  remote: https://github.com/opal/opal-jquery.git
-  revision: 6249dfaf406ecd7199079b4f4d9dc67cfdf4d602
-  branch: master
-  specs:
-    opal-jquery (0.4.3)
-      opal (>= 0.10.0, < 0.12.0)
-
 PATH
   remote: ../hyper-spec
   specs:
-    hyper-spec (1.0.0.lap28)
+    hyper-spec (0.99.1)
       capybara
-      chromedriver-helper
+      chromedriver-helper (= 1.2.0)
       libv8 (~> 6.3.0)
       method_source
       mini_racer (~> 0.1.15)
@@ -28,14 +20,14 @@ PATH
 PATH
   remote: ../hyper-store
   specs:
-    hyper-store (1.0.0.lap28)
-      hyperloop-config (= 1.0.0.lap28)
+    hyper-store (0.99.1)
+      hyperloop-config (= 0.99.1)
       opal (>= 0.11.0, < 0.12.0)
 
 PATH
   remote: ../hyperloop-config
   specs:
-    hyperloop-config (1.0.0.lap28)
+    hyperloop-config (0.99.1)
       libv8 (~> 6.3.0)
       mini_racer (~> 0.1.15)
       opal (>= 0.11.0, < 0.12.0)
@@ -45,9 +37,9 @@ PATH
 PATH
   remote: .
   specs:
-    hyper-component (1.0.0.lap28)
-      hyper-store (= 1.0.0.lap28)
-      hyperloop-config (= 1.0.0.lap28)
+    hyper-component (0.99.1)
+      hyper-store (= 0.99.1)
+      hyperloop-config (= 0.99.1)
       libv8 (~> 6.3.0)
       mini_racer (~> 0.1.15)
       opal (>= 0.11.0, < 0.12.0)
@@ -113,7 +105,7 @@ GEM
       babel-source (>= 4.0, < 6)
       execjs (~> 2.0)
     builder (3.2.3)
-    capybara (3.7.2)
+    capybara (3.8.2)
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.8)
@@ -148,7 +140,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    libv8 (6.3.292.48.1)
+    libv8 (6.3.292.48.1-x86_64-darwin-15)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -185,6 +177,8 @@ GEM
     opal-browser (0.2.0)
       opal
       paggio
+    opal-jquery (0.4.3)
+      opal (>= 0.10.0, < 0.12.0)
     opal-rails (0.9.5)
       jquery-rails
       opal (>= 0.11.0, < 0.12)
@@ -309,7 +303,7 @@ GEM
       equalizer (~> 0.0.9)
       parser (>= 2.3.1.2, < 2.6)
       procto (~> 0.0.2)
-    webdrivers (3.4.0)
+    webdrivers (3.4.1)
       nokogiri (~> 1.6)
       rubyzip (~> 1.0)
       selenium-webdriver (~> 3.0)
@@ -333,7 +327,7 @@ DEPENDENCIES
   listen
   mime-types
   nokogiri
-  opal-jquery!
+  opal-jquery
   opal-rails (~> 0.9.4)
   opal-rspec
   pry

ruby/hyper-component/lib/hyper-component.rb

@@ -25,7 +25,7 @@ class Component
   require 'react/state'
   require 'react/object'
   require 'react/to_key'
-  require 'react/ext/opal-jquery/element'
+  #require 'react/ext/opal-jquery/element' # now have to manually require this
   require 'reactive-ruby/isomorphic_helpers'
   require 'react/top_level'
   require 'react/top_level_render'

ruby/hyper-component/lib/react/api.rb

@@ -238,7 +238,9 @@ def self.convert_props(args)
         elsif key == "key"
           props["key"] = value.to_key
 
-        elsif key == 'ref' && value.is_a?(Proc)
+        elsif key == 'ref' && value.respond_to?(:call)
+          # currently react still accepts the syntax ref: :foo meaning set refs.foo to the ref.
+          # in hyperstack release 0.1 we can put this behavior on a switch or use the notation `ref_key: :foo` for old school
           props[key] = %x{
                           function(dom_node){
                             if (dom_node !== null && dom_node.__opalInstance !== undefined && dom_node.__opalInstance !== null) {

ruby/hyper-component/lib/react/ext/opal-jquery/element.rb

@@ -13,15 +13,21 @@ def self.[](selector)
   end
 
   define_method :render do |container = nil, params = {}, &block|
+    # create an invisible component class and hang it off the DOM element
     if `#{self.to_n}._reactrb_component_class === undefined`
-      `#{self.to_n}._reactrb_component_class = #{Class.new(Hyperloop::Component)}`
+      klass = Class.new(Hyperloop::Component) do
+        # react won't rerender the components unless it sees some params
+        # changing, so we just copy them all in, but we still just reuse
+        # the render macro to define the action
+        others :all_the_params
+      end
+      `#{self.to_n}._reactrb_component_class = #{klass}`
+    else
+      klass = `#{self.to_n}._reactrb_component_class`
     end
-    klass = `#{self.to_n}._reactrb_component_class`
-    klass.class_eval do
-      render(container, params, &block)
-    end
-
-    React.render(React.create_element(`#{self.to_n}._reactrb_component_class`), self)
+    # define / redefine the render method
+    klass.render(container, params, &block)
+    React.render(React.create_element(klass, {container: container, params: params, block: block}), self)
   end
 
   # mount_components is useful for dynamically generated page segments for example
@@ -34,4 +40,4 @@ def self.[](selector)
     }
   }
   Element.expose :mount_components
-end if Object.const_defined?('Element')
+end

ruby/hyper-component/lib/react/top_level_render.rb

@@ -16,7 +16,9 @@ def self.render(element, container)
     else
       native = `ReactDOM.render(#{element.to_n}, container)`
     end
-    
+
+    return unless `#{native} !== null`
+
     if `#{native}.__opalInstance !== undefined && #{native}.__opalInstance !== null`
       `#{native}.__opalInstance`
     elsif `ReactDOM.findDOMNode !== undefined && #{native}.nodeType === undefined`

ruby/hyper-component/spec/react/opal_jquery_extensions_spec.rb

@@ -2,13 +2,39 @@
 
 describe 'opal-jquery extensions', js: true do
   describe 'Element' do
-    xit 'will reuse the wrapper component class for the same Element' do
-      evaluate_ruby do
+    it 'renders a top level component using render with a block' do
+      expect_evaluate_ruby do
         class Foo < Hyperloop::Component
           param :name
           def render
             "hello #{params.name}"
           end
+        end
+        test_div = Element.new(:div)
+        test_div.render { Foo(name: 'fred') }
+        Element[test_div].find('span').html
+      end.to eq('hello fred')
+    end
+
+    it 'renders a top level component using render with a container and params ' do
+      expect_evaluate_ruby do
+        test_div = Element.new(:div)
+        test_div.render(SPAN, id: :render_test_span) { 'hello' }
+        Element[test_div].find('#render_test_span').html
+      end.to eq('hello')
+    end
+
+    it 'will reuse the wrapper component class for the same Element' do
+      evaluate_ruby do
+        class Foo < Hyperloop::Component
+          param :name
+          before_mount do
+            @render_count = 0
+          end
+
+          def render
+            "hello #{params.name} render-count: #{@render_count += 1}"
+          end
 
           def self.rec_cnt
             @@rec_cnt ||= 0
@@ -24,28 +50,21 @@ def self.rec_cnt
         test_div.render { Foo(name: 'fred') }
         test_div.render { Foo(name: 'freddy') }
         [ Element[test_div].find('span').html, Foo.rec_cnt]
-      end.to eq(['hello freddy', 0])
-    end
-
-    it 'renders a top level component using render with a block' do
+      end.to eq(['hello freddy render-count: 2', 0])
       expect_evaluate_ruby do
-        class Foo < Hyperloop::Component
-          param :name
-          def render
-            "hello #{params.name}"
-          end
-        end
         test_div = Element.new(:div)
-        test_div.render { Foo(name: 'fred') }
-        Element[test_div].find('span').html
-      end.to eq('hello fred')
+        test_div.render(Foo, name: 'fred')
+        test_div.render(Foo, name: 'freddy')
+        [ Element[test_div].find('span').html, Foo.rec_cnt]
+      end.to eq(['hello freddy render-count: 2', 0])
     end
 
-    it 'renders a top level component using render with a container and params ' do
-      expect_evaluate_ruby do
+    it 'will use the ref call back to get the component' do
+      expect_promise do
         test_div = Element.new(:div)
-        test_div.render(:span, id: :render_test_span) { 'hello' }
-        Element[test_div].find('#render_test_span').html
+        Promise.new.then { |c| Element[c].html }.tap do |p|
+          test_div.render(SPAN, id: :render_test_span, ref: p.method(:resolve)) { 'hello' }
+        end
       end.to eq('hello')
     end
 

ruby/hyper-component/spec/react/refs_callback_spec.rb

@@ -30,7 +30,7 @@ def my_bar=(bars)
         end
 
         def render
-          React.create_element(Bar, ref: method(:my_bar=).to_proc)
+          React.create_element(Bar, ref: method(:my_bar=))
         end
       end
 
@@ -85,7 +85,7 @@ def self.rec_cnt
         after_mount { mutate.unmount true }
 
         render do
-          Unmountable(ref: method(:ref_rec).to_proc) unless state.unmount 
+          Unmountable(ref: method(:ref_rec).to_proc) unless state.unmount
         end
       end
     end

ruby/hyper-component/spec/test_app/app/views/components.rb

@@ -2,6 +2,7 @@
 if React::IsomorphicHelpers.on_opal_client?
   require 'browser'
   require 'browser/delay'
+  require 'react/ext/opal-jquery/element'
 end
 require 'react/server'
 require 'react/test/utils'