hyper-component 0.99.6 → 1.0.alpha1

data/lib/hyperstack/internal/component/should_component_update.rb

@@ -0,0 +1,101 @@
+module Hyperstack
+  module Internal
+    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?(next_props, next_state)
+          observing do
+            # rubocop:disable Style/DoubleNegation # we must return true/false to js land
+            if respond_to?(:needs_update?)
+              !!call_needs_update(next_props, next_state)
+            else
+              (props_changed?(next_props) || native_state_changed?(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, next_state)
+          component = self
+          next_params.define_singleton_method(:changed?) do
+            component.props_changed?(self)
+          end
+          next_state.define_singleton_method(:changed?) do
+            component.native_state_changed?(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.
+
+        # we receive a Opal Ruby Hash here, always, so the Hash is either empty or filled
+        # Hash is converted to native object
+        # if the Hash was empty, the Object has no keys
+
+        # 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_hash)
+          # next_state = next_state_hash.to_n
+          # %x{
+          #   var current_state = #{@__hyperstack_component_native}.state
+          #   var normalized_next_state =
+          #     !next_state || Object.keys(next_state).length === 0 ? false : next_state
+          #   var normalized_current_state =
+          #     !current_state || Object.keys(current_state).length === 0 ? 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(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-***'])
+          # }
+          state_hash = Hash.new(`#{@__hyperstack_component_native}.state`)
+          next_state_hash != state_hash
+        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_props)
+          props = Hash.new(`#{@__hyperstack_component_native}.props`)
+          next_props != props
+        end
+      end
+    end
+  end
+end

data/lib/hyperstack/internal/component/tags.rb

@@ -0,0 +1,109 @@
+module Hyperstack
+  module Internal
+    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)
+
+        # the present method is retained as a legacy behavior
+        # def present(component, *params, &children)
+        #   RenderingContext.render(component, *params, &children)
+        # end
+
+        # define each predefined tag (upcase) as an instance method and a constant
+        # deprecated: define each predefined tag (downcase) as the alias of the instance method
+
+        HTML_TAGS.each do |tag|
+
+          define_method(tag.upcase) do |*params, &children|
+            RenderingContext.render(tag, *params, &children)
+          end
+
+          const_set tag.upcase, tag
+        end
+
+        # this is used for haml style (i.e. DIV.foo.bar) class tags which is deprecated
+        def self.html_tag_class_for(tag)
+          downcased_tag = tag.downcase
+          if tag =~ /^[A-Z]+$/ && HTML_TAGS.include?(downcased_tag)
+            Object.const_set tag, ReactWrapper.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)
+          component = find_component(name)
+          return RenderingContext.render(component, *params, &children) if component
+          super
+        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)
+            tag_names_module = Module.new do
+              define_method name do |*params, &children|
+                RenderingContext.render(component, *params, &children)
+              end
+              # handle deprecated _as_node style
+              define_method "#{name}_as_node" do |*params, &children|
+                RenderingContext.build_only(component, *params, &children)
+              end
+            end
+            parent.extend(tag_names_module)
+          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 || Object._reactrb_import_component_class(name)
+        end
+
+        def lookup_const(name)
+          return nil unless name =~ /^[A-Z]/
+          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
+end
+
+unless Object.respond_to? :_reactrb_import_component_class
+  class Object
+    def self._reactrb_import_component_class(_name)
+      nil
+    end
+  end
+end

data/lib/hyperstack/internal/component/top_level_rails_component.rb

@@ -0,0 +1,83 @@
+module Hyperstack
+  module Internal
+    module Component
+      class TopLevelRailsComponent
+        include Hyperstack::Component
+
+        def self.search_path
+          @search_path ||= [Object]
+        end
+
+        export_component
+
+        param :component_name
+        param :controller
+        param :render_params
+
+        backtrace :off
+
+        def render
+          top_level_render
+        end
+
+        def top_level_render
+          paths_searched = []
+          component = nil
+          if @ComponentName.start_with?('::')
+            # if absolute path of component is given, look it up and fail if not found
+            paths_searched << @ComponentName
+            component = begin
+                          Object.const_get(@ComponentName)
+                        rescue NameError
+                          nil
+                        end
+          else
+            # if relative path is given, look it up like this
+            # 1) we check each path + controller-name + component-name
+            # 2) if we can't find it there we check each path + component-name
+            # if we can't find it we just try const_get
+            # so (assuming controller name is Home)
+            # ::Foo::Bar will only resolve to some component named ::Foo::Bar
+            # but Foo::Bar will check (in this order) ::Home::Foo::Bar, ::Components::Home::Foo::Bar, ::Foo::Bar, ::Components::Foo::Bar
+            self.class.search_path.each do |scope|
+              paths_searched << "#{scope.name}::#{@Controller}::#{@ComponentName}"
+              component = begin
+                            scope.const_get(@Controller, false).const_get(@ComponentName, false)
+                          rescue NameError
+                            nil
+                          end
+              break if component != nil
+            end
+            unless component
+              self.class.search_path.each do |scope|
+                paths_searched << "#{scope.name}::#{@ComponentName}"
+                component = begin
+                              scope.const_get(@ComponentName, false)
+                            rescue NameError
+                              nil
+                            end
+                break if component != nil
+              end
+            end
+          end
+          return RenderingContext.render(component, @RenderParams) if component && component.method_defined?(:render)
+          raise "Could not find component class '#{@ComponentName}' for @Controller '#{@Controller}' in any component directory. Tried [#{paths_searched.join(", ")}]"
+        end
+      end
+    end
+  end
+end
+
+class Module
+  def add_to_react_search_path(replace_search_path = nil)
+    if replace_search_path
+      Hyperstack::Internal::Component::TopLevelRailsComponent.search_path = [self]
+    elsif !Hyperstack::Internal::Component::TopLevelRailsComponent.search_path.include? self
+      Hyperstack::Internal::Component::TopLevelRailsComponent.search_path << self
+    end
+  end
+end
+
+module Components
+  add_to_react_search_path
+end

data/lib/hyperstack/internal/component/validator.rb

@@ -0,0 +1,149 @@
+module Hyperstack
+  module Internal
+    module Component
+      class Validator
+
+        attr_accessor :errors
+        attr_reader :props_wrapper
+        private :errors, :props_wrapper
+
+        def copy(new_props_wrapper)
+          Validator.new(new_props_wrapper).tap do |c|
+            %i[@allow_undefined_props @rules @errors].each do |var|
+              c.instance_variable_set(var, instance_variable_get(var).dup)
+            end
+          end
+        end
+
+        def initialize(props_wrapper = Class.new(PropsWrapper))
+          @props_wrapper = props_wrapper
+        end
+
+        def self.build(&block)
+          new.build(&block)
+        end
+
+        def build(&block)
+          instance_eval(&block)
+          self
+        end
+
+        def requires(name, options = {})
+          options[:required] = true
+          define_rule(name, options)
+        end
+
+        def optional(name, options = {})
+          options[:required] = false
+          define_rule(name, options)
+        end
+
+        def event(name)
+          rules[name] = coerce_native_hash_values(default: nil, type: Proc, allow_nil: true)
+        end
+
+        def all_other_params(name)
+          @allow_undefined_props = true
+          props_wrapper.define_all_others(name) { |props| props.reject { |name, value| rules[name] } }
+        end
+
+        def validate(props)
+          self.errors = []
+          validate_undefined(props) unless allow_undefined_props?
+          props = coerce_native_hash_values(defined_props(props))
+          validate_required(props)
+          props.each do |name, value|
+            validate_types(name, value)
+            validate_allowed(name, value)
+          end
+          errors
+        end
+
+        def default_props
+          rules
+            .select {|key, value| value.keys.include?("default") }
+            .inject({}) {|memo, (k,v)| memo[k] = v[:default]; memo}
+        end
+
+        private
+
+        def defined_props(props)
+          props.select { |name| rules.keys.include?(name) }
+        end
+
+        def allow_undefined_props?
+          !!@allow_undefined_props
+        end
+
+        def rules
+          @rules ||= { children: { required: false } }
+        end
+
+        def define_rule(name, options = {})
+          rules[name] = coerce_native_hash_values(options)
+          props_wrapper.define_param(name, options[:type], options[:alias])
+        end
+
+        def errors
+          @errors ||= []
+        end
+
+        def validate_types(prop_name, value)
+          return unless klass = rules[prop_name][:type]
+          if !klass.is_a?(Array)
+            allow_nil = !!rules[prop_name][:allow_nil]
+            type_check("`#{prop_name}`", value, klass, allow_nil)
+          elsif klass.length > 0
+            validate_value_array(prop_name, value)
+          else
+            allow_nil = !!rules[prop_name][:allow_nil]
+            type_check("`#{prop_name}`", value, Array, allow_nil)
+          end
+        end
+
+        def type_check(prop_name, value, klass, allow_nil)
+          return if allow_nil && value.nil?
+          return if value.is_a?(klass)
+          return if klass.respond_to?(:_react_param_conversion) &&
+            klass._react_param_conversion(value, :validate_only)
+          errors << "Provided prop #{prop_name} could not be converted to #{klass}"
+        end
+
+        def validate_allowed(prop_name, value)
+          return unless values = rules[prop_name][:values]
+          return if values.include?(value)
+          errors << "Value `#{value}` for prop `#{prop_name}` is not an allowed value"
+        end
+
+        def validate_required(props)
+          (rules.keys - props.keys).each do |name|
+            next unless rules[name][:required]
+            errors << "Required prop `#{name}` was not specified"
+          end
+        end
+
+        def validate_undefined(props)
+          (props.keys - rules.keys).each do |prop_name|
+            errors <<  "Provided prop `#{prop_name}` not specified in spec"
+          end
+        end
+
+        def validate_value_array(name, value)
+          klass = rules[name][:type]
+          allow_nil = !!rules[name][:allow_nil]
+          value.each_with_index do |item, index|
+            type_check("`#{name}`[#{index}]", Native(item), klass[0], allow_nil)
+          end
+        rescue NoMethodError
+          errors << "Provided prop `#{name}` was not an Array"
+        end
+
+        def coerce_native_hash_values(hash)
+          hash.each do |key, value|
+            hash[key] = Native(value)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/react/react-source.rb

@@ -9,9 +9,9 @@ if RUBY_ENGINE == 'opal'
   require 'react.js'
   require "react-server.js"
 else
-  require "react/config"
+  require "hyperstack/internal/component"
   require "react/rails/asset_variant"
-  variant = Hyperloop.env.production? ? 'production' : 'development'
+  variant = Hyperstack.env.production? ? 'production' : 'development'
   react_directory = React::Rails::AssetVariant.new({environment: variant}).react_directory
   Opal.append_path react_directory.untaint
 end