refactored handling of tags and method_missing

# Conflicts:
#	.rubocop.yml
#	lib/react/api.rb
#	lib/react/component.rb
#	lib/react/top_level.rb
#	spec/react/component_spec.rb

Author: catmando

lib/react/api.rb

@@ -1,13 +1,39 @@
 require 'react/native_library'
 
 module React
+  # Provides the internal mechanisms to interface between reactrb and native components
+  # the code will attempt to create a js component wrapper on any rb class that has a
+  # render (or possibly _render_wrapper) method.  The mapping between rb and js components
+  # is kept in the @@component_classes hash.
+
+  # Also provides the mechanism to build react elements
+
+  # TOOO - the code to deal with components should be moved to a module that will be included
+  # in a class which will then create the JS component for that class.  That module will then
+  # be included in React::Component, but can be used by any class wanting to become a react
+  # component (but without other DSL characteristics.)
   class API
     @@component_classes = {}
 
     def self.import_native_component(opal_class, native_class)
       @@component_classes[opal_class] = native_class
     end
 
+    def self.eval_native_react_component(name)
+      component = `eval(name)`
+      raise "#{name} is not defined" if `#{component} === undefined`
+      unless `#{component}.prototype !== undefined && !!#{component}.prototype.isReactComponent`
+        raise 'does not appear to be a native react component'
+      end
+      component
+    end
+
+    def self.native_react_component?(name)
+      eval_native_react_component(name)
+    rescue
+      nil
+    end
+
     def self.create_native_react_class(type)
       raise "Provided class should define `render` method"  if !(type.method_defined? :render)
       render_fn = (type.method_defined? :_render_wrapper) ? :_render_wrapper : :render
@@ -74,7 +100,7 @@ def self.create_element(type, properties = {}, &block)
         params << @@component_classes[type]
       elsif type.kind_of?(Class)
         params << create_native_react_class(type)
-      elsif React.html_tag?(type)
+      elsif React::Component::Tags::HTML_TAGS.include?(type)
         params << type
       elsif type.is_a? String
         return React::Element.new(type)
@@ -108,8 +134,6 @@ def self.convert_props(properties)
           props["className"] = value
         elsif ["style", "dangerously_set_inner_HTML"].include? key
           props[lower_camelize(key)] = value.to_n
-        elsif React::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
-          value.each { |k, v| props["#{key}-#{k.tr('_', '-')}"] = v.to_n }
         else
           props[React.html_attr?(lower_camelize(key)) ? lower_camelize(key) : key] = value
         end

lib/react/component.rb

@@ -1,9 +1,7 @@
 require 'react/ext/string'
 require 'react/ext/hash'
 require 'active_support/core_ext/class/attribute'
-require 'active_support/core_ext/module/introspection'
 require 'react/callbacks'
-require 'react/children'
 require 'react/rendering_context'
 require 'react/observable'
 require 'react/state'
@@ -17,6 +15,8 @@ module Component
     def self.included(base)
       base.include(API)
       base.include(Callbacks)
+      base.include(Tags)
+      base.include(DslInstanceMethods)
       base.class_eval do
         class_attribute :initial_state
         define_callback :before_mount
@@ -27,28 +27,6 @@ def self.included(base)
         define_callback :before_unmount
       end
       base.extend(ClassMethods)
-
-      if base.name
-        parent = base.name.split("::").inject([Module]) { |nesting, next_const| nesting + [nesting.last.const_get(next_const)] }[-2]
-        class << parent
-          def method_missing(n, *args, &block)
-            name = n
-            if name =~ /_as_node$/
-              node_only = true
-              name = name.gsub(/_as_node$/, "")
-            end
-            begin
-              name = const_get(name)
-            rescue Exception
-              name = nil
-            end
-            unless name && name.method_defined?(:render)
-              return super
-            end
-            React::RenderingContext.build_or_render(node_only, name, *args, &block)
-          end
-        end
-      end
     end
 
     def initialize(native_element)
@@ -59,30 +37,9 @@ def render
       raise "no render defined"
     end unless method_defined?(:render)
 
-    def children
-      Children.new(`#{@native}.props.children`)
-    end
-
-    def params
-      @params ||= self.class.props_wrapper.new(self)
-    end
-
-    def props
-      Hash.new(`#{@native}.props`)
-    end
-
-    def refs
-      Hash.new(`#{@native}.refs`)
-    end
-
-    def state
-      @state_wrapper ||= StateWrapper.new(@native, self)
-    end
-
     def update_react_js_state(object, name, value)
       if object
-        set_state({"***_state_updated_at-***" => Time.now.to_f,
-                   "#{object.class.to_s+'.' unless object == self}#{name}" => value})
+        set_state({"***_state_updated_at-***" => Time.now.to_f, "#{object.class.to_s+'.' unless object == self}#{name}" => value})
       else
         set_state({name => value})
       end rescue nil
@@ -94,11 +51,10 @@ def emit(event_name, *args)
 
     def component_will_mount
       IsomorphicHelpers.load_context(true) if IsomorphicHelpers.on_opal_client?
+      @props_wrapper = self.class.props_wrapper.new(Hash.new(`#{@native}.props`))
       set_state! initial_state if initial_state
       State.initialize_states(self, initial_state)
-      State.set_state_context_to(self) do
-        self.run_callback(:before_mount)
-      end
+      State.set_state_context_to(self) { self.run_callback(:before_mount) }
     rescue Exception => e
       self.class.process_exception(e, self)
     end
@@ -113,23 +69,26 @@ def component_did_mount
     end
 
     def component_will_receive_props(next_props)
-      # need to rethink how this works in opal-react, or if its actually that
-      # useful within the react.rb environment for now we are just using it to
-      # clear processed_params
-      State.set_state_context_to(self) do
-        self.run_callback(:before_receive_props, next_props)
-      end
+      # need to rethink how this works in opal-react, or if its actually that useful within the react.rb environment
+      # for now we are just using it to clear processed_params
+      State.set_state_context_to(self) { self.run_callback(:before_receive_props, Hash.new(next_props)) }
     rescue Exception => e
       self.class.process_exception(e, self)
     end
 
+    def props_changed?(next_props)
+      return true unless props.keys.sort == next_props.keys.sort
+      props.detect { |k, v| `#{next_props[k]} != #{params[k]}`}
+    end
+
     def should_component_update?(next_props, next_state)
       State.set_state_context_to(self) do
+        next_props = Hash.new(next_props)
         if self.respond_to?(:needs_update?)
-          !!self.needs_update?(next_props, next_state)
+          !!self.needs_update?(next_props, Hash.new(next_state))
         elsif false # switch to true to force updates per standard react
           true
-        elsif props != next_props
+        elsif props_changed? next_props
           true
         elsif `!next_state != !#{@native}.state`
           true
@@ -144,16 +103,15 @@ def should_component_update?(next_props, next_state)
     end
 
     def component_will_update(next_props, next_state)
-      State.set_state_context_to(self) do
-        self.run_callback(:before_update, next_props, next_state)
-      end
+      State.set_state_context_to(self) { self.run_callback(:before_update, Hash.new(next_props), Hash.new(next_state)) }
+      @props_wrapper = self.class.props_wrapper.new(Hash.new(next_props), @props_wrapper)
     rescue Exception => e
       self.class.process_exception(e, self)
     end
 
     def component_did_update(prev_props, prev_state)
       State.set_state_context_to(self) do
-        self.run_callback(:after_update, prev_props, prev_state)
+        self.run_callback(:after_update, Hash.new(prev_props), Hash.new(prev_state))
         State.update_states_to_observe
       end
     rescue Exception => e
@@ -169,47 +127,14 @@ def component_will_unmount
       self.class.process_exception(e, self)
     end
 
-    def p(*args, &block)
-      if block || args.count == 0 || (args.count == 1 && args.first.is_a?(Hash))
-        _p_tag(*args, &block)
-      else
-        Kernel.p(*args)
-      end
-    end
-
-    def component?(name)
-      name_list = name.split("::")
-      [self.class, *self.class.parents].each do |scope|
-        component = name_list.inject(scope) do |scope, class_name|
-          scope.const_get(class_name)
-        end rescue nil
-        return component if component && component.method_defined?(:render)
-      end
-      nil
-    end
-
-    def method_missing(n, *args, &block)
-      # TODO deprecate and remove - done so that params shadow tags, no longer
-      # needed
-      return props[n] if props.key?(n)
-      name = n
-      if name =~ /_as_node$/
-        node_only = true
-        name = name.gsub(/_as_node$/, "")
-      end
-      unless (React.html_tag?(name) || name == 'present'  || name == '_p_tag' || (name = component?(name, self)))
-        return super
-      end
-
-      if name == "present"
-        name = args.shift
-      end
+    attr_reader :waiting_on_resources
 
-      if name == "_p_tag"
-        name = "p"
+    def _render_wrapper
+      State.set_state_context_to(self) do
+        React::RenderingContext.render(nil) {render || ""}.tap { |element| @waiting_on_resources = element.waiting_on_resources if element.respond_to? :waiting_on_resources }
       end
-
-      React::RenderingContext.build_or_render(node_only, name, *args, &block)
+    rescue Exception => e
+      self.class.process_exception(e, self)
     end
 
     def watch(value, &on_change)
@@ -220,18 +145,5 @@ def define_state(*args, &block)
       State.initialize_states(self, self.class.define_state(*args, &block))
     end
 
-    attr_reader :waiting_on_resources
-
-    def _render_wrapper
-      State.set_state_context_to(self) do
-        React::RenderingContext.render(nil) {render || ""}.tap do |element|
-          if element.respond_to?(:waiting_on_resources)
-            @waiting_on_resources = element.waiting_on_resources
-          end
-        end
-      end
-    rescue Exception => e
-      self.class.process_exception(e, self)
-    end
   end
 end

lib/react/component/class_methods.rb

@@ -2,20 +2,21 @@ module React
   module Component
     module ClassMethods
       def backtrace(*args)
-        @backtrace_off = (args[0] == :off)
+        @dont_catch_exceptions = (args[0] == :none)
+        @backtrace_off = @dont_catch_exceptions || (args[0] == :off)
       end
 
       def process_exception(e, component, reraise = nil)
         message = ["Exception raised while rendering #{component}"]
-        if e.backtrace && e.backtrace.length > 1 && !@backtrace_off  # seems like e.backtrace is empty in safari???
+        if e.backtrace && e.backtrace.length > 1 && !@backtrace_off
           message << "    #{e.backtrace[0]}"
           message += e.backtrace[1..-1].collect { |line| line }
         else
           message[0] += ": #{e.message}"
         end
         message = message.join("\n")
         `console.error(message)`
-        raise e if reraise
+        raise e if reraise || @dont_catch_exceptions
       end
 
       def deprecation_warning(message)
@@ -180,9 +181,14 @@ def export_component(opts = {})
         Native(`window`)[first_name] = add_item_to_tree(Native(`window`)[first_name], [React::API.create_native_react_class(self)] + export_name[1..-1].reverse).to_n
       end
 
-      def imports(native_component_name)
-        React::API.import_native_component(native_component_name, self)
+      def imports(component_name)
+        React::API.import_native_component(self,
+                                           React::API.eval_native_react_component(component_name))
         render {} # define a dummy render method - will never be called...
+      rescue Exception => e # rubocop:disable Lint/RescueException : we need to catch everything!
+        raise "#{self} cannot import '#{component_name}': #{e.message}."
+        # rubocop:enable Lint/RescueException
+      ensure
         self
       end
 

lib/react/component/dsl_instance_methods.rb

@@ -0,0 +1,57 @@
+module React
+  module Component
+    module DslInstanceMethods
+      def children
+        if `#{@native}.props.children==undefined`
+          nodes = []
+        else
+          nodes = [`#{@native}.props.children`].flatten
+        end
+        class << nodes
+          include Enumerable
+
+          def to_n
+            self
+          end
+
+          def each(&block)
+            if block_given?
+              %x{
+                    React.Children.forEach(#{self.to_n}, function(context){
+              #{yield React::Element.new(`context`)}
+                    })
+              }
+              nil
+            else
+              Enumerator.new(`React.Children.count(#{self.to_n})`) do |y|
+                %x{
+                      React.Children.forEach(#{self.to_n}, function(context){
+                #{y << Element.new(`context`)}
+                      })
+                }
+              end
+            end
+          end
+        end
+
+        nodes
+      end
+
+      def params
+        @props_wrapper
+      end
+
+      def props
+        Hash.new(`#{@native}.props`)
+      end
+
+      def refs
+        Hash.new(`#{@native}.refs`)
+      end
+
+      def state
+        @state_wrapper ||= StateWrapper.new(@native, self)
+      end
+    end
+  end
+end

lib/react/component/props_wrapper.rb

@@ -1,5 +1,11 @@
 module React
   module Component
+
+    def deprecated_params_method(name, *args, &block)
+      self.class.deprecation_warning "Direct access to param `#{name}`.  Use `params.#{name}` instead."
+      params.send(name, *args, &block)
+    end
+
     class PropsWrapper
       attr_reader :component