lib/hyperstack/component/element.rb in hyper-component-1.0.alpha1.3 vs lib/hyperstack/component/element.rb in hyper-component-1.0.alpha1.4

@@ -31,10 +31,23 @@
         @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
         @block = block
         @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)
         event_names.each { |event_name| merge_event_prop!(event_name, &block) }
         @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})`
@@ -43,18 +56,18 @@
 
       # Render element into DOM in the current rendering context.
       # Used for elements that are not yet in DOM, i.e. they are provided as children
       # or they have been explicitly removed from the rendering context using the delete method.
 
-      def render(*props, &new_block)
+      def render(*props)
         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(@type, @properties, *props)
+          @_child_element = Hyperstack::Internal::Component::RenderingContext.render(
             Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
-                        type, @properties.merge(props), block)
+                        type, props, block)
           )
         end
       end
 
       # Delete (remove) element from rendering context, the element may later be added back in
@@ -94,22 +107,30 @@
         else
           merge_component_event_prop! "on_#{event_name}", &block
         end
       end
 
-      def merge_built_in_event_prop!(prop_name)
+      def merge_built_in_event_prop!(prop_name, &block)
         @properties.merge!(
           prop_name => %x{
             function(){
               var react_event = arguments[0];
               var all_args;
               var other_args;
               if (arguments.length > 1) {
                 all_args = Array.prototype.slice.call(arguments);
                 other_args = all_args.slice(1, arguments.length);
-                return #{yield(Event.new(`react_event`), *(`other_args`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), *(`other_args`), &block
+                  )
+                };
               } else {
-                return #{yield(Event.new(`react_event`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), &block
+                  )
+                };
               }
             }
           }
         )
       end