hyper-react 0.10.0

data/lib/react/component/dsl_instance_methods.rb

@@ -0,0 +1,27 @@
+require "react/children"
+
+module React
+  module Component
+    module DslInstanceMethods
+      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
+    end
+  end
+end

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

@@ -0,0 +1,83 @@
+module React
+  module Component
+
+    def deprecated_params_method(name, *args, &block)
+      React::Component.deprecation_warning"Direct access to param `#{name}`.  Use `params.#{name}` instead."
+      params.send(name, *args, &block)
+    end
+
+    class PropsWrapper
+      attr_reader :component
+
+      def self.define_param(name, param_type)
+        if param_type == Observable
+          define_method("#{name}") do
+            value_for(name)
+          end
+          define_method("#{name}!") do |*args|
+            current_value = value_for(name)
+            if args.count > 0
+              props[name].call args[0]
+              current_value
+            else
+              # rescue in case we in middle of render... What happens during a
+              # render that causes exception?
+              # Where does `dont_update_state` come from?
+              props[name].call current_value unless @dont_update_state rescue nil
+              props[name]
+            end
+          end
+        elsif param_type == Proc
+          define_method("#{name}") do |*args, &block|
+            props[name].call(*args, &block) if props[name]
+          end
+        else
+          define_method("#{name}") do
+            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)
+                props[name].collect do |param|
+                  param_type[0]._react_param_conversion param
+                end
+              else
+                props[name]
+              end
+            end
+          end
+        end
+      end
+
+      def initialize(component)
+        @component = component
+      end
+
+      def [](prop)
+        props[prop]
+      end
+
+      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
+    end
+  end
+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

@@ -0,0 +1,144 @@
+# 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
+    # class as a new tag
+    module Tags
+      HTML_TAGS = %w(a abbr address area article aside audio b base bdi bdo big blockquote body br
+                     button canvas caption cite code col colgroup data datalist dd del details dfn
+                     dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
+                     h6 head header hr html i iframe img input ins kbd keygen label legend li link
+                     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) +
+                  # 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
+
+      # the present method is retained as a legacy behavior
+
+      def present(component, *params, &children)
+        React::RenderingContext.render(component, *params, &children)
+      end
+
+      def present_as_node(component, *params, &children)
+        React::RenderingContext.build_only(component, *params, &children)
+      end
+
+      # define each predefined tag as an instance method
+
+
+
+
+      HTML_TAGS.each do |tag|
+        define_method(tag) do |*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
+        # 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.
+
+      def method_missing(name, *params, &children)
+        if name =~ /_as_node$/
+          # handle deprecated _as_node style
+          component = find_component(name.gsub(/_as_node$/, ''))
+          return React::RenderingContext.build_only(component, *params, &children) if component
+        else
+          component = find_component(name)
+          return React::RenderingContext.render(component, *params, &children) if component
+        end
+        Object.method_missing(name, *params, &children)
+      end
+
+      # install methods with the same name as the component in the parent class/module
+      # thus component names in the form Foo::Bar(...) will work
+
+      class << self
+        def included(component)
+          _name, parent = find_name_and_parent(component)
+          class << parent
+            define_method _name do |*params, &children|
+              React::RenderingContext.render(component, *params, &children)
+            end
+            # handle deprecated _as_node style
+            define_method "#{_name}_as_node" do |*params, &children|
+              React::RenderingContext.build_only(component, *params, &children)
+            end
+          end
+        end
+
+        private
+
+        def find_name_and_parent(component)
+          split_name = component.name && component.name.split('::')
+          if split_name && split_name.length > 1
+            [split_name.last, split_name.inject([Module]) { |a, e| a + [a.last.const_get(e)] }[-2]]
+          end
+        end
+      end
+
+      private
+
+      def find_component(name)
+        component = lookup_const(name)
+        if component && !component.method_defined?(:render)
+          raise "#{name} does not appear to be a react component."
+        end
+        component
+      end
+
+      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
+        scope = scopes.detect { |s| s.const_defined?(name) }
+        scope.const_get(name) if scope
+      end
+    end
+  end
+end

data/lib/react/element.rb

@@ -0,0 +1,168 @@
+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
+
+    alias_native :element_type, :type
+    alias_native :props, :props
+
+    attr_reader :type
+    attr_reader :properties
+    attr_reader :block
+
+    attr_accessor :waiting_on_resources
+
+    def initialize(native_element, type, properties, block)
+      @type = type
+      @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
+      @block = block
+      @native = native_element
+    end
+
+    # 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.shallow_to_n})`
+      self
+    end
+
+    # 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)
+      if props.empty?
+        React::RenderingContext.render(self)
+      else
+        props = API.convert_props(props)
+        React::RenderingContext.render(
+          Element.new(`React.cloneElement(#{to_n}, #{props.shallow_to_n})`,
+                      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)
+      return dup.render.method_missing(class_name, args, &new_block) unless rendered?
+      React::RenderingContext.replace(
+        self,
+        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
+    # 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 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