reactrb 0.8.7 → 0.8.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ddbe495a34c70871decbabe9d4caf2816922686c
-  data.tar.gz: c04dd8a078c54622c08dc2442d593d21cea54fca
+  metadata.gz: 56bb10a0b7e0570fcd71cd6eb8a84b683d7c5477
+  data.tar.gz: 6f3556f79685a0ed59fa24e3adffe9865f2c37d7
 SHA512:
-  metadata.gz: d1465573197ce0818e16208eab0dd5155e6bb121ca1219df7ea9a12b2a44181e14c6b2fcb0076455ce9fd70441d4112b23d340afe12dc9d3c4c1f62d09caa28b
-  data.tar.gz: 87b26b83e9467871b9d3be9a7e905060e5ddbb4893b1ae10e63ae56f36bb74d512af5ded00b5392f9a77742398998617e94a8252dc263c924dd51c1a8b8ff319
+  metadata.gz: 659a94fbc934575d85084a11a0006ccb358abe68cf9a77553bf2d64e794bd5eb424ff1399dfaac62cb37d7b4c5c7ec5c00b225eae49939b01af24262de989b42
+  data.tar.gz: e42a8bf45da2475c6069b10956a770bdbffb73ee53cb96f72f1021a7e7e832b9cab9fc381e3ba11f29e08fbbccf3e513fa0ffbb1258cfa4c9ad6ef97024cc9d5

data/CHANGELOG.md

@@ -6,7 +6,7 @@ This project *tries* to adhere to [Semantic Versioning](http://semver.org/), eve
 Changes are grouped as follows:
 - **Added** for new features.
 - **Changed** for changes in existing functionality.
-- **Deprecated** for once-stable features removed in upcoming releases.
+- **Deprecated** for once-stable features to be removed in upcoming releases.
 - **Removed** for deprecated features removed in this release.
 - **Fixed** for any bug fixes.
 - **Security** to invite users to upgrade in case of vulnerabilities.
@@ -18,7 +18,35 @@ Whitespace conventions:
 - 1 spaces before normal text
  -->
 
+## [0.8.8] - 2016-07-13
 
+### Added
+
+- More helpful error messages on render failures (#152)
+- `Element#on('<my_event_name>')` subscribes `my_event_name` (#153)
+
+### Changed
+
+- `Element#on(:event)` subscribes to `on_event` for reactrb components and `onEvent` for native components. (#153)
+
+### Deprecated
+
+- `Element#(:event)` subscription to `_onEvent` is deprecated. Once you have changed params named `_on...` to `on_...` you can `require 'reactrb/new-event-name-convention.rb'` to avoid spurious react warning messages. (#153)
+
+
+### Fixed
+
+- when using the Element['#container'].render... method generates spurious react error (#154)
+
+
+
+
+## [0.8.7] - 2016-07-08
+
+
+### Fixed
+
+- Opal 0.10.x compatibility
 
 
 ## [0.8.6] - 2016-06-30

data/README.md

@@ -21,7 +21,7 @@ Install the gem, or load the js library
 
 + add `gem 'reactrb'` to your gem file or
 + `gem install reactrb` or
-+ install (or load via cdn) [inline-reactrb.js](http://github.com/reactrb/inline-reactrb)
++ install (or load via cdn) [reactrb-express.js](http://github.com/reactrb/reactrb-express)
 
 For gem installation it is highly recommended to read [the getting started section at reactrb.org](http://reactrb.org/docs/getting-started.html)
 

data/lib/react/api.rb

@@ -16,6 +16,7 @@ module React
     @@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
 

data/lib/react/component/class_methods.rb

@@ -2,6 +2,11 @@ module React
   module Component
     # class level methods (macros) for components
     module ClassMethods
+
+      def reactrb_component?
+        true
+      end
+      
       def backtrace(*args)
         @dont_catch_exceptions = (args[0] == :none)
         @backtrace_off = @dont_catch_exceptions || (args[0] == :off)
@@ -43,7 +48,7 @@ module React
             _componentValidator: %x{
               function(props, propName, componentName) {
                 var errors = #{validator.validate(Hash.new(`props`))};
-                var error = new Error(#{"In component `" + self.name + "`\n" + `errors`.join("\n")});
+                var error = new Error(#{"In component `#{name}`\n" + `errors`.join("\n")});
                 return #{`errors`.count > 0 ? `error` : `undefined`};
               }
             }

data/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 @@ module React
       @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

data/lib/react/rendering_context.rb

@@ -13,24 +13,12 @@ module React
 
     def self.render(name, *args, &block)
       remove_nodes_from_args(args)
-      @buffer = [] unless @buffer
+      @buffer ||= [] unless @buffer
       if block
         element = build do
           saved_waiting_on_resources = waiting_on_resources
           self.waiting_on_resources = nil
-          result = block.call
-          # Todo figure out how children rendering should happen, probably should have special method that pushes children into the buffer
-          # i.e. render_child/render_children that takes Element/Array[Element] and does the push into the buffer
-          if !name && (  # !name means called from outer render so we check that it has rendered correctly
-              (@buffer.count > 1) || # should only render one element
-              (@buffer.count == 1 && @buffer.last != result) || # it should return that element
-              (@buffer.count == 0 && !(result.is_a?(String) || (result.respond_to?(:acts_as_string?) && result.acts_as_string?) || result.is_a?(Element))) #for convience we will also convert the return value to a span if its a string
-            )
-            raise "a components render method must generate and return exactly 1 element or a string"
-          end
-
-          @buffer << result.to_s if result.is_a? String || (result.respond_to?(:acts_as_string?) && result.acts_as_string?) # For convience we push the last return value on if its a string
-          @buffer << result if result.is_a?(Element) && @buffer.count == 0
+          run_child_block(name.nil?, &block)
           if name
             buffer = @buffer.dup
             React.create_element(name, *args) { buffer }.tap do |element|
@@ -44,7 +32,6 @@ module React
         end
       elsif name.is_a? React::Element
         element = name
-        # I BELIEVE WAITING ON RESOURCES SHOULD ALREADY BE SET
       else
         element = React.create_element(name, *args)
         element.waiting_on_resources = waiting_on_resources
@@ -78,6 +65,51 @@ module React
         value.as_node if value.is_a?(Element) rescue nil
       end if args[0] && args[0].is_a?(Hash)
     end
+
+    # run_child_block gathers the element(s) generated by a child block.
+    # for example when rendering this div: div { "hello".span; "goodby".span }
+    # two child Elements will be generated.
+    #
+    # the final value of the block should either be
+    #   1 an object that responds to :acts_as_string?
+    #   2 a string,
+    #   3 an element that is NOT yet pushed on the rendering buffer
+    #   4 or the last element pushed on the buffer
+    #
+    # in case 1 we change the object to a string, and then it becomes case 2
+    # in case 2 we automatically push the string onto the buffer
+    # in case 3 we also push the Element onto the buffer IF the buffer is empty
+    # case 4 requires no special processing
+    #
+    # Once we have taken care of these special cases we do a check IF we are in an
+    # outer rendering scope.  In this case react only allows us to generate 1 Element
+    # so we insure that is the case, and also check to make sure that element in the buffer
+    # is the element returned
+
+    def self.run_child_block(is_outer_scope)
+      result = yield
+      result = result.to_s if result.try :acts_as_string?
+      @buffer << result if result.is_a?(String) || (result.is_a?(Element) && @buffer.empty?)
+      raise_render_error(result) if is_outer_scope && @buffer != [result]
+    end
+
+    # heurestically raise a meaningful error based on the situation
+
+    def self.raise_render_error(result)
+      improper_render 'A different element was returned than was generated within the DSL.',
+                      'Possibly improper use of Element#delete.' if @buffer.count == 1
+      improper_render "Instead #{@buffer.count} elements were generated.",
+                      'Do you want to wrap your elements in a div?' if @buffer.count > 1
+      improper_render "Instead the component #{result} was returned.",
+                      "Did you mean #{result}()?" if result.try :reactrb_component?
+      improper_render "Instead the #{result.class} #{result} was returned.",
+                      'You may need to convert this to a string.'
+    end
+
+    def self.improper_render(message, solution)
+      raise "a component's render method must generate and return exactly 1 element or a string.\n"\
+            "    #{message}  #{solution}"
+    end
   end
 
   class ::Object

data/lib/reactive-ruby/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '0.8.7'
+  VERSION = '0.8.8'
 end

data/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

data/spec/react/component_spec.rb

@@ -477,6 +477,77 @@ describe React::Component do
     end
   end
 
+  describe 'Anonymous Component' do
+    it "will not generate spurious warning messages" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello" 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)}
+      }
+      renderToDocument(foo)
+      `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+      expect(`log`).to eq([])
+    end
+  end
+
+  describe 'Render Error Handling' do
+    before(:each) do
+      %x{
+        window.test_log = [];
+        window.org_warn_console = window.console.warn;
+        window.org_error_console = window.console.error
+        window.console.warn = window.console.error = function(str){window.test_log.push(str)}
+      }
+    end
+    it "will generate a message if render returns something other than an Element or a String" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; Hash.new; end
+      end
+
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Instead the Hash \{\} was returned/
+    end
+    it "will generate a message if render returns a Component class" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; Foo; end
+      end
+
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Did you mean Foo()/
+    end
+    it "will generate a message if more than 1 element is generated" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello".span; "goodby".span; end
+      end
+
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Instead 2 elements were generated/
+    end
+    it "will generate a message if the element generated is not the element returned" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello".span; "goodby".span.delete; end
+      end
+
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /A different element was returned than was generated within the DSL/
+    end
+  end
+
   describe 'Event handling' do
     before do
       stub_const 'Foo', Class.new

data/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 @@ describe React::Element do
     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)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reactrb
 version: !ruby/object:Gem::Version
-  version: 0.8.7
+  version: 0.8.8
 platform: ruby
 authors:
 - David Chang
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-08 00:00:00.000000000 Z
+date: 2016-07-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -377,6 +377,7 @@ files:
 - lib/reactive-ruby/version.rb
 - lib/reactrb.rb
 - lib/reactrb/auto-import.rb
+- lib/reactrb/new-event-name-convention.rb
 - lib/sources/react-latest.js
 - lib/sources/react-v13.js
 - lib/sources/react-v14.js