reactrb 0.8.8 → 0.9.0

data/lib/react/component/class_methods.rb

@@ -6,21 +6,21 @@ module React
       def reactrb_component?
         true
       end
-      
+
       def backtrace(*args)
         @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
-          append_backtrace(message, e.backtrace)
-        else
-          message[0] += ": #{e.message}"
+      def process_exception(e, component, reraise = @dont_catch_exceptions)
+        unless @dont_catch_exceptions
+          message = ["Exception raised while rendering #{component}: #{e.message}"]
+          if e.backtrace && e.backtrace.length > 1 && !@backtrace_off
+            append_backtrace(message, e.backtrace)
+          end
+          `console.error(#{message.join("\n")})`
         end
-        `console.error(#{message.join("\n")})`
-        raise e if reraise || @dont_catch_exceptions
+        raise e if reraise
       end
 
       def append_backtrace(message_array, backtrace)
@@ -29,17 +29,28 @@ module React
       end
 
       def render(container = nil, params = {}, &block)
-        define_method :render do
-          if container
+        if container
+          container = container.type if container.is_a? React::Element
+          define_method :render do
             React::RenderingContext.render(container, params) { instance_eval(&block) if block }
-          else
-            instance_eval(&block)
           end
+        else
+          define_method(:render) { instance_eval(&block) }
         end
       end
 
+      # method missing will assume the method is a class name, and will treat this a render of
+      # of the component, i.e. Foo::Bar.baz === Foo::Bar().baz
+
+      def method_missing(name, *args, &children)
+        Object.method_missing(name, *args, &children) unless args.empty?
+        React::RenderingContext.render(
+          self, class: React::Element.haml_class_name(name), &children
+        )
+      end
+
       def validator
-        @validator ||= Validator.new(self)
+        @validator ||= Validator.new(props_wrapper)
       end
 
       def prop_types
@@ -70,10 +81,6 @@ module React
         @props_wrapper ||= Class.new(PropsWrapper)
       end
 
-      def define_param(name, param_type)
-        props_wrapper.define_param(name, param_type, self)
-      end
-
       def param(*args)
         if args[0].is_a? Hash
           options = args[0]
@@ -92,22 +99,11 @@ module React
         end
       end
 
-      def required_param(name, options = {})
-        React::Component.deprecation_warning "`required_param` is deprecated, use `param` instead."
-        validator.requires(name, options)
-      end
-
-      alias_method :require_param, :required_param
-
-      def optional_param(name, options = {})
-        React::Component.deprecation_warning "`optional_param` is deprecated, use `param param_name: default_value` instead."
-        validator.optional(name, options)
-      end
-
       def collect_other_params_as(name)
         validator.allow_undefined_props = true
-        define_method(name) do
-          @_all_others ||= self.class.validator.undefined_props(props)
+        validator_in_lexical_scope = validator
+        props_wrapper.define_method(name) do
+          @_all_others ||= validator_in_lexical_scope.undefined_props(props)
         end
 
         validator_in_lexial_scope = validator

data/lib/react/component/dsl_instance_methods.rb

@@ -1,44 +1,14 @@
+require "react/children"
+
 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
+        Children.new(`#{@native}.props.children`)
       end
 
       def params
-        @props_wrapper
+        @params ||= self.class.props_wrapper.new(self)
       end
 
       def props

data/lib/react/component/params.rb

@@ -0,0 +1,6 @@
+module React
+  module Component
+    module Params
+    end
+  end
+end

data/lib/react/component/props_wrapper.rb

@@ -7,16 +7,10 @@ module React
     end
 
     class PropsWrapper
-      attr_reader :props
+      attr_reader :component
 
-      def self.define_param(name, param_type, owner)
-        owner.define_method("#{name}") do |*args, &block|
-          deprecated_params_method("#{name}", *args, &block)
-        end
+      def self.define_param(name, param_type)
         if param_type == Observable
-          owner.define_method("#{name}!") do |*args|
-            deprecated_params_method("#{name}!", *args)
-          end
           define_method("#{name}") do
             value_for(name)
           end
@@ -39,10 +33,8 @@ module React
           end
         else
           define_method("#{name}") do
-            if @processed_params.has_key? name
-              @processed_params[name]
-            else
-              @processed_params[name] = if param_type.respond_to? :_react_param_conversion
+            fetch_from_cache(name) do
+              if param_type.respond_to? :_react_param_conversion
                 param_type._react_param_conversion props[name]
               elsif param_type.is_a?(Array) &&
                 param_type[0].respond_to?(:_react_param_conversion)
@@ -57,21 +49,8 @@ module React
         end
       end
 
-      def unchanged_processed_params(new_props)
-        Hash[
-          *@processed_params.collect do |key, value|
-            [key, value] if @props[key].equal? new_props[key] # `#{@props[key]} == #{new_props[key]}`
-          end.compact.flatten(1)
-        ]
-      end
-
-      def initialize(props, current_props_wrapper=nil)
-        @props = props || {}
-        @processed_params = if current_props_wrapper
-          current_props_wrapper.unchanged_processed_params(props)
-        else
-          {}
-        end
+      def initialize(component)
+        @component = component
       end
 
       def [](prop)
@@ -80,6 +59,22 @@ module React
 
       private
 
+      def fetch_from_cache(name)
+        last, value = cache[name]
+        return value if last.equal?(props[name])
+        yield.tap do |value|
+          cache[name] = [props[name], value]
+        end
+      end
+
+      def cache
+        @cache ||= Hash.new { |h, k| h[k] = [] }
+      end
+
+      def props
+        component.props
+      end
+
       def value_for(name)
         self[name].instance_variable_get("@value") if self[name]
       end

data/lib/react/component/should_component_update.rb

@@ -0,0 +1,98 @@
+module React
+  module Component
+    #
+    # React assumes all components should update, unless a component explicitly overrides
+    # the shouldComponentUpdate method.  Reactrb does an explicit check doing a shallow
+    # compare of params, and using a timestamp to determine if state has changed.
+
+    # If needed components can provide their own #needs_update? method which will be
+    # passed the next params and state opal hashes.
+
+    # Attached to these hashes is a #changed? method that returns whether the hash contains
+    # changes as calculated by the base mechanism.  This way implementations of #needs_update?
+    # can use the base comparison mechanism as needed.
+
+    # For example
+    # def needs_update?(next_params, next_state)
+    #   # use a special comparison method
+    #   return false if next_state.changed? || next_params.changed?
+    #   # do some other special checks
+    # end
+
+    # Note that beginning in 0.9 we will use standard ruby compare on all params further reducing
+    # the need for needs_update?
+    #
+    module ShouldComponentUpdate
+      def should_component_update?(native_next_props, native_next_state)
+        State.set_state_context_to(self, false) do
+          next_params = Hash.new(native_next_props)
+          # rubocop:disable Style/DoubleNegation # we must return true/false to js land
+          if respond_to?(:needs_update?)
+            !!call_needs_update(next_params, native_next_state)
+          else
+            !!(props_changed?(next_params) || native_state_changed?(native_next_state))
+          end
+          # rubocop:enable Style/DoubleNegation
+        end
+      end
+
+      # create opal hashes for next params and state, and attach
+      # the changed? method to each hash
+
+      def call_needs_update(next_params, native_next_state)
+        component = self
+        next_params.define_singleton_method(:changed?) do
+          component.props_changed?(self)
+        end
+        next_state = Hash.new(native_next_state)
+        next_state.define_singleton_method(:changed?) do
+          component.native_state_changed?(native_next_state)
+        end
+        needs_update?(next_params, next_state)
+      end
+
+      # Whenever state changes, reactrb updates a timestamp on the state object.
+      # We can rapidly check for state changes comparing the incoming state time_stamp
+      # with the current time stamp.
+
+      # Different versions of react treat empty state differently, so we first
+      # convert anything that looks like an empty state to "false" for consistency.
+
+      # Then we test if one state is empty and the other is not, then we return false.
+      # Then we test if both states are empty we return true.
+      # If either state does not have a time stamp then we have to assume a change.
+      # Otherwise we check time stamps
+
+      # rubocop:disable Metrics/MethodLength # for effeciency we want this to be one method
+      def native_state_changed?(next_state)
+        %x{
+          var current_state = #{@native}.state
+          var normalized_next_state =
+            !#{next_state} || Object.keys(#{next_state}).length === 0 || #{nil} == #{next_state} ?
+            false : #{next_state}
+          var normalized_current_state =
+            !current_state || Object.keys(current_state).length === 0 || #{nil} == current_state ?
+            false : current_state
+          if (!normalized_current_state != !normalized_next_state) return(true)
+          if (!normalized_current_state && !normalized_next_state) return(false)
+          if (!normalized_current_state['***_state_updated_at-***'] ||
+              !normalized_next_state['***_state_updated_at-***']) return(true)
+          return (normalized_current_state['***_state_updated_at-***'] !=
+                  normalized_next_state['***_state_updated_at-***'])
+        }
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      # Do a shallow compare on the two hashes. Starting in 0.9 we will do a deep compare.
+
+      def props_changed?(next_params)
+        Component.deprecation_warning(
+          "Using shallow incoming params comparison.\n"\
+          'Do a require "reactrb/deep-compare, to get 0.9 behavior'
+        )
+        (props.keys.sort != next_params.keys.sort) ||
+          next_params.detect { |k, v| `#{v} != #{@native}.props[#{k}]` }
+      end
+    end
+  end
+end

data/lib/react/component/tags.rb

@@ -1,3 +1,15 @@
+# class HtmlTagWrapper
+#   def initialize(name)
+#     @name = name
+#   end
+#   def to_s
+#     @name
+#   end
+#   def method_missing(n)
+#
+# end
+
+
 module React
   module Component
     # contains the name of all HTML tags, and the mechanism to register a component
@@ -10,7 +22,10 @@ module React
                      main map mark menu menuitem meta meter nav noscript object ol optgroup option
                      output p param picture pre progress q rp rt ruby s samp script section select
                      small source span strong style sub summary sup table tbody td textarea tfoot th
-                     thead time title tr track u ul var video wbr)
+                     thead time title tr track u ul var video wbr) +
+                  # The SVG Tags
+                  %w(circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline
+                  radialGradient rect stop svg text tspan)
 
       # note: any tag can end in _as_node but this is deprecated
 
@@ -26,18 +41,42 @@ module React
 
       # define each predefined tag as an instance method
 
+
+
+
       HTML_TAGS.each do |tag|
         define_method(tag) do |*params, &children|
-          React::RenderingContext.render(tag, *params, &children)
+          if tag == 'p'
+            if children || params.count == 0 || (params.count == 1 && params.first.is_a?(Hash))
+              React::RenderingContext.render(tag, *params, &children)
+            else
+              Kernel.p(*params)
+            end
+          else
+            React::RenderingContext.render(tag, *params, &children)
+          end
+        end
+        if tag != :div
+          alias_method tag.upcase, tag
+          const_set tag.upcase, tag
+        else
+          alias_method tag.upcase, tag
+          #const_set tag.upcase, React.create_element(tag)
+          #Object.const_set tag.upcase, Class.new(HtmlTagWrapper)
         end
-        alias_method tag.upcase, tag
-        const_set tag.upcase, tag
         # handle deprecated _as_node style
         define_method("#{tag}_as_node") do |*params, &children|
           React::RenderingContext.build_only(tag, *params, &children)
         end
       end
 
+      def self.html_tag_class_for(tag)
+        downcased_tag = tag.downcase
+        if tag =~ /[A-Z]+/ && HTML_TAGS.include?(downcased_tag)
+          Object.const_set tag, React.create_element(downcased_tag)
+        end
+      end
+
       # use method_missing to look up component names in the form of "Foo(..)"
       # where there is no preceeding scope.
 
@@ -92,6 +131,8 @@ module React
 
       def lookup_const(name)
         return nil unless name =~ /^[A-Z]/
+        #html_tag = React::Component::Tags.html_tag_class(name)
+        #return html_tag if html_tag
         scopes = self.class.name.to_s.split('::').inject([Module]) do |nesting, next_const|
           nesting + [nesting.last.const_get(next_const)]
         end.reverse

data/lib/react/element.rb

@@ -36,7 +36,7 @@ module React
 
     def on(*event_names, &block)
       event_names.each { |event_name| merge_event_prop!(event_name, &block) }
-      @native = `React.cloneElement(#{to_n}, #{properties.to_n})`
+      @native = `React.cloneElement(#{to_n}, #{properties.shallow_to_n})`
       self
     end
 
@@ -44,15 +44,14 @@ module React
     # 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 = {})
+    def render(props = {}, &new_block)
       if props.empty?
         React::RenderingContext.render(self)
       else
+        props = API.convert_props(props)
         React::RenderingContext.render(
-          Element.new(
-            `React.cloneElement(#{to_n}, #{API.convert_props(props)})`,
-            type, properties.merge(props), block
-          )
+          Element.new(`React.cloneElement(#{to_n}, #{props.shallow_to_n})`,
+                      type, properties.merge(props), block),
         )
       end
     end
@@ -78,20 +77,34 @@ module React
     # 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.gsub(/__|_/, '__' => '_', '_' => '-')
-      new_props = properties.dup
-      new_props[:class] = "\
-        #{class_name} #{new_props[:class]} #{args.delete(:class)} #{args.delete(:className)}\
-      ".split(' ').uniq.join(' ')
-      new_props.merge! args
+      return dup.render.method_missing(class_name, args, &new_block) unless rendered?
       React::RenderingContext.replace(
         self,
-        RenderingContext.build { RenderingContext.render(type, new_props, &new_block) }
+        RenderingContext.build do
+          RenderingContext.render(type, build_new_properties(class_name, args), &new_block)
+        end
       )
     end
 
+    def rendered?
+      React::RenderingContext.rendered? self
+    end
+
+    def self.haml_class_name(class_name)
+      class_name.gsub(/__|_/, '__' => '_', '_' => '-')
+    end
+
     private
 
+    def build_new_properties(class_name, args)
+      class_name = self.class.haml_class_name(class_name)
+      new_props = properties.dup
+      new_props[:className] = "\
+        #{class_name} #{new_props[:className]} #{args.delete(:class)} #{args.delete(:className)}\
+      ".split(' ').uniq.join(' ')
+      new_props.merge! args
+    end
+
     # 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