closes #153

Author: catmando

lib/react/api.rb

@@ -16,6 +16,7 @@ class API
     @@component_classes = {}
 
     def self.import_native_component(opal_class, native_class)
+      opal_class.instance_variable_set("@native_import", true)
       @@component_classes[opal_class] = native_class
     end
 

lib/react/element.rb

@@ -1,6 +1,18 @@
 require 'react/ext/string'
 
 module React
+  #
+  # Wraps the React Native element class
+  #
+  # adds the #on method to add event handlers to the element
+  #
+  # adds the #render method to place elements in the DOM and
+  # #delete (alias/deprecated #as_node) method to remove elements from the DOM
+  #
+  # handles the haml style class notation so that
+  #  div.bar.blat becomes div(class: "bar blat")
+  # by using method missing
+  #
   class Element
     include Native
 
@@ -20,58 +32,124 @@ def initialize(native_element, type, properties, block)
       @native = native_element
     end
 
-    def on(event_name)
-      name = event_name.to_s.event_camelize
-      props = if React::Event::BUILT_IN_EVENTS.include?("on#{name}")
-        {"on#{name}" => %x{
-          function(event){
-            #{yield React::Event.new(`event`)}
-          }
-        }}
-      else
-        {"_on#{name}" => %x{
-          function(){
-            #{yield *Array(`arguments`)}
-          }
-        }}
-      end
-      @native = `React.cloneElement(#{self.to_n}, #{props.to_n})`
-      @properties.merge! props
+    # Attach event handlers.
+
+    def on(*event_names, &block)
+      event_names.each { |event_name| merge_event_prop!(event_name, &block) }
+      @native = `React.cloneElement(#{to_n}, #{properties.to_n})`
       self
     end
 
-    def render(props = {})  # for rendering children
+    # 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 = {})
       if props.empty?
         React::RenderingContext.render(self)
       else
         React::RenderingContext.render(
           Element.new(
-            `React.cloneElement(#{self.to_n}, #{API.convert_props(props)})`,
-            type,
-            properties.merge(props),
-            block
+            `React.cloneElement(#{to_n}, #{API.convert_props(props)})`,
+            type, properties.merge(props), block
           )
         )
       end
     end
 
+    # Delete (remove) element from rendering context, the element may later be added back in
+    # using the render method.
+
+    def delete
+      React::RenderingContext.delete(self)
+    end
+
+    # Deprecated version of delete method
+
+    def as_node
+      React::RenderingContext.as_node(self)
+    end
+
+    # Any other method applied to an element will be treated as class name (haml style) thus
+    # div.foo.bar(id: :fred) is the same as saying div(class: "foo bar", id: :fred)
+    #
+    # single underscores become dashes, and double underscores become a single underscore
+    #
+    # params may be provide to each class (but typically only to the last for easy reading.)
+
     def method_missing(class_name, args = {}, &new_block)
-      class_name = class_name.split("__").collect { |s| s.gsub("_", "-") }.join("_")
+      class_name = class_name.gsub(/__|_/, '__' => '_', '_' => '-')
       new_props = properties.dup
-      new_props["class"] = "#{new_props['class']} #{class_name} #{args.delete("class")} #{args.delete('className')}".split(" ").uniq.join(" ")
+      new_props[:class] = "\
+        #{class_name} #{new_props[:class]} #{args.delete(:class)} #{args.delete(:className)}\
+      ".split(' ').uniq.join(' ')
       new_props.merge! args
       React::RenderingContext.replace(
         self,
-        React::RenderingContext.build { React::RenderingContext.render(type, new_props, &new_block) }
+        RenderingContext.build { RenderingContext.render(type, new_props, &new_block) }
       )
     end
 
-    def as_node
-      React::RenderingContext.as_node(self)
+    private
+
+    # built in events, events going to native components, and events going to reactrb
+
+    # built in events will have their event param translated to the Event wrapper
+    # and the name will camelcased and have on prefixed, so :click becomes onClick.
+    #
+    # events emitting from native components are assumed to have the same camel case and
+    # on prefixed.
+    #
+    # events emitting from reactrb components will just have on_ prefixed.  So
+    # :play_button_pushed attaches to the :on_play_button_pushed param
+    #
+    # in all cases the default name convention can be overriden by wrapping in <...> brackets.
+    # So on("<MyEvent>") will attach to the "MyEvent" param.
+
+    def merge_event_prop!(event_name, &block)
+      if event_name =~ /^<(.+)>$/
+        merge_component_event_prop! event_name.gsub(/^<(.+)>$/, '\1'), &block
+      elsif React::Event::BUILT_IN_EVENTS.include?(name = "on#{event_name.event_camelize}")
+        merge_built_in_event_prop! name, &block
+      elsif @type.instance_variable_get('@native_import')
+        merge_component_event_prop! name, &block
+      else
+        merge_deprecated_component_event_prop! event_name, &block
+        merge_component_event_prop! "on_#{event_name}", &block
+      end
     end
 
-    def delete
-      React::RenderingContext.delete(self)
+    def merge_built_in_event_prop!(prop_name)
+      @properties.merge!(
+        prop_name => %x{
+          function(event){
+            return #{yield(React::Event.new(`event`))}
+          }
+        }
+      )
+    end
+
+    def merge_component_event_prop!(prop_name)
+      @properties.merge!(
+        prop_name => %x{
+          function(){
+            return #{yield(*Array(`arguments`))}
+          }
+        }
+      )
+    end
+
+    def merge_deprecated_component_event_prop!(event_name)
+      prop_name = "_on#{event_name.event_camelize}"
+      fn = %x{function(){#{
+        React::Component.deprecation_warning(
+          "In future releases React::Element#on('#{event_name}') will no longer respond "\
+          "to the '#{prop_name}' emitter.\n"\
+          "Rename your emitter param to 'on_#{event_name}' or use .on('<#{prop_name}>')"
+        )}
+        return #{yield(*Array(`arguments`))}
+      }}
+      @properties.merge!(prop_name => fn)
     end
   end
 end

lib/reactrb/new-event-name-convention.rb

@@ -0,0 +1,11 @@
+# rubocop:disable Style/FileName
+# require 'reactrb/new-event-name-convention' to remove missing param declaration "_onXXXX"
+if RUBY_ENGINE == 'opal'
+  # removes generation of the deprecated "_onXXXX" event param syntax
+  module React
+    class Element
+      def merge_deprecated_component_event_prop!(event_name)
+      end
+    end
+  end
+end

spec/react/element_spec.rb

@@ -1,6 +1,8 @@
 require "spec_helper"
 
 if opal?
+# require 'reactrb/new-event-name-convention' # this require will get rid of any error messages but
+# the on method will no longer attach to the param prefixed with _on
 describe React::Element do
   it 'bridges `type` of native React.Element attributes' do
     element = React.create_element('div')
@@ -17,7 +19,79 @@
     end
   end
 
-  describe 'Event subscription' do
+  describe 'Component Event Subscription' do
+
+    it 'will subscribe to a component event param' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :on_event, type: Proc, default: nil, allow_nil: true
+        def render
+          params.on_event
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to multiple component event params' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :on_event1, type: Proc, default: nil, allow_nil: true
+        param :on_event2, type: Proc, default: nil, allow_nil: true
+        def render
+          params.on_event1+params.on_event2
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event1, :event2) {'works!'})).to eq('<span>works!works!</span>')
+    end
+
+    it 'will subscribe to a native components event param' do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("span", null, this.props.onEvent());
+          }
+        })
+      }
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        imports "NativeComponent"
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to a component event param with a non-default name' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :my_event, type: Proc, default: nil, allow_nil: true
+        def render
+          params.my_event
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on("<my_event>") {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to a component event param using the deprecated naming convention and generate a message' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :_onEvent, type: Proc, default: nil, allow_nil: true
+        def render
+          params._onEvent
+        end
+      end
+      %x{
+        var log = [];
+        var org_warn_console =  window.console.warn;
+        var org_error_console = window.console.error;
+        window.console.warn = window.console.error = function(str){log.push(str)}
+      }
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
+      `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+      expect(`log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `on_event` not specified in spec", "Warning: Deprecated feature used in React::Component. In future releases React::Element#on('event') will no longer respond to the '_onEvent' emitter.\nRename your emitter param to 'on_event' or use .on('<_onEvent>')"])
+    end
+  end
+
+  describe 'Builtin Event subscription' do
     it 'is subscribable through `on(:event_name)` method' do
       expect { |b|
         element = React.create_element("div").on(:click, &b)