closes #111 #112

Author: catmando

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

@@ -33,6 +33,19 @@ def initialize(native_element, type = nil, properties = {}, block = nil)
         @native = native_element
       end
 
+      def _update_ref(x)
+        @ref = x
+        @_child_element._update_ref(x) if @_child_element
+      end
+
+      def ref
+        @ref || raise("#{self} has not been mounted yet")
+      end
+
+      def dom_node
+        @type.is_a?(String) ? ref : ref.dom_node
+      end
+
       # Attach event handlers.
 
       def on(*event_names, &block)
@@ -49,8 +62,8 @@ def render(*props, &new_block)
         if props.empty?
           Hyperstack::Internal::Component::RenderingContext.render(self)
         else
-          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(props)
-          Hyperstack::Internal::Component::RenderingContext.render(
+          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(*props)
+          @_child_element = Hyperstack::Internal::Component::RenderingContext.render(
             Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
                         type, @properties.merge(props), block)
           )

ruby/hyper-component/lib/hyperstack/internal/component/react_wrapper.rb

@@ -178,7 +178,8 @@ def self.create_element(type, *args, &block)
           end
 
           # Convert Passed in properties
-          properties = convert_props(args)
+          ele = nil
+          properties = convert_props(type, { ref: ->(ref) { ele._update_ref(ref) } }, *args)
           params << properties.shallow_to_n
 
           # Children Nodes
@@ -190,14 +191,14 @@ def self.create_element(type, *args, &block)
               }
             }
           end
-          Hyperstack::Component::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+          ele = Hyperstack::Component::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
         end
 
         def self.clear_component_class_cache
           @@component_classes = {}
         end
 
-        def self.convert_props(args)
+        def self.convert_props(type, *args)
           # merge args together into a single properties hash
           properties = {}
           args.each do |arg|
@@ -234,14 +235,26 @@ def self.convert_props(args)
           # process properties according to react rules
           props = {}
           properties.each do |key, value|
-            if ["style", "dangerously_set_inner_HTML"].include? key
+            if %w[style dangerously_set_inner_HTML].include? key
               props[lower_camelize(key)] = value.to_n
 
-            elsif key == "className"
+            elsif key == :className
               props[key] = value.join(' ')
 
-            elsif key == "key"
-              props["key"] = value.to_key
+            elsif key == :key
+              props[:key] = value.to_key
+
+            elsif key == :init
+              if %w[select textarea].include? type
+                key = :defaultValue
+              elsif type == :input
+                key = if %w[radio checkbox].include? properties[:type]
+                        :defaultChecked
+                      else
+                        :defaultValue
+                      end
+              end
+              props[key] = value
 
             elsif key == 'ref'
               unless value.respond_to?(:call)

ruby/hyper-component/spec/client_features/misc_fixes_spec.rb

@@ -47,6 +47,7 @@ class TestComp < HyperComponent
     input.send_keys 'hello'
     expect(input.value).to eq('123hello4567890')
   end
+
   # it "and it can still use the deprecated mutate syntax" do
   #   mount "TestComp" do
   #     class TestComp < Hyperloop::Component

ruby/hyper-component/spec/client_features/refs_element_method_spec.rb

@@ -0,0 +1,63 @@
+require 'spec_helper'
+
+describe 'getting ref from an Element', js: true do
+  it 'the ref method will return the mounted component instance' do
+    mount 'TestComponent' do
+      class AnotherComponent < HyperComponent
+        render(DIV) { "another component"}
+      end
+      class TestComponent < HyperComponent
+        after_mount { raise "Failed" unless @another_component.ref.is_a? AnotherComponent }
+        render do
+          @another_component = AnotherComponent()
+        end
+      end
+    end
+    expect(page).to have_content('another component')
+  end
+
+  it 'the ref method has a dom_node method that works with native dom nodes' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        after_mount { raise "Failed" unless jQ[@another_component].html == 'my sweet div' }
+        render do
+          @another_component = DIV { 'my sweet div' }
+        end
+      end
+    end
+    expect(page).to have_content('my sweet div')
+  end
+
+  it 'the ref method has a dom_node method that works with application components' do
+    mount 'TestComponent' do
+      class AnotherComponent < HyperComponent
+        render(DIV) { "another component"}
+      end
+      class TestComponent < HyperComponent
+        after_mount { raise "Failed" unless jQ[@another_component].html == 'another component' }
+        render do
+          @another_component = AnotherComponent()
+        end
+      end
+    end
+    expect(page).to have_content('another component')
+  end
+
+  it 'the ref method has a dom_node method that works with application components' do
+    mount 'TestComponent' do
+      class AnotherComponent < HyperComponent
+        other :others
+        render(DIV) { "another component named #{@Others[:foo]}"}
+      end
+      class TestComponent < HyperComponent
+        after_mount { raise "Failed" unless @ref_1.ref == @ref_2.ref }
+        render do
+          @ref_1 = AnotherComponent().as_node
+          @ref_2 = @ref_1.render(foo: :bar)
+        end
+      end
+    end
+    expect(page).to have_content('another component named bar')
+  end
+
+end

ruby/hyper-component/spec/client_features/uncontrolled_components.rb

@@ -0,0 +1,65 @@
+require 'spec_helper'
+
+describe 'uncontrolled components initial value', js: true do
+  it 'with default (text) INPUT tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(INPUT, id: :input, init: 'some value')
+      end
+    end
+    expect(find('#input').value).to eq('some value')
+  end
+  it 'with text INPUT tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(INPUT, id: :input, type: :text, init: 'some value')
+      end
+    end
+    expect(find('#input').value).to eq('some value')
+  end
+  it 'with TEXTAREA tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(TEXTAREA, id: :input, init: 'some value')
+      end
+    end
+    expect(find('#input').value).to eq('some value')
+  end
+  it 'with SELECT tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(SELECT, id: :input, init: 'some value') do
+          OPTION(value: 'wrong value')
+          OPTION(id: :correct_option, value: 'some value')
+          OPTION(value: 'other value')
+        end
+      end
+    end
+    expect(find('#input').value).to eq('some value')
+    expect(find('#correct_option')).to be_selected
+  end
+  it 'with checkbox INPUT tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(DIV) do
+          INPUT(id: :input1, type: :checkbox, init: true)
+          INPUT(id: :input2, type: :checkbox, init: false)
+        end
+      end
+    end
+    expect(find('#input1')).to be_checked
+    expect(find('#input2')).not_to be_checked
+  end
+  it 'with radio INPUT tag' do
+    mount 'TestComponent' do
+      class TestComponent < HyperComponent
+        render(DIV) do
+          INPUT(id: :input1, type: :radio, init: true)
+          INPUT(id: :input2, type: :radio, init: false)
+        end
+      end
+    end
+    expect(find('#input1')).to be_checked
+    expect(find('#input2')).not_to be_checked
+  end
+end