hyper-react 0.10.0

data/lib/react-sources/react-server.js

@@ -0,0 +1,2 @@
+// A placeholder file to prevent file not found error of requireing
+// `react-server` in react/react-source

data/lib/react/api.rb

@@ -0,0 +1,162 @@
+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)
+      opal_class.instance_variable_set("@native_import", true)
+      @@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`
+      is_component_class = `#{component}.prototype !== undefined` &&
+                            (`!!#{component}.prototype.isReactComponent` ||
+                             `!!#{component}.prototype.render`)
+      is_functional_component = `typeof #{component} === "function"`
+      is_not_using_react_v13 = `!window.React.version.match(/0\.13/)`
+      unless is_component_class || (is_not_using_react_v13 && is_functional_component)
+        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
+      # this was hashing type.to_s, not sure why but .to_s does not work as it Foo::Bar::View.to_s just returns "View"
+      @@component_classes[type] ||= %x{
+        React.createClass({
+          displayName: #{type.name},
+          propTypes: #{type.respond_to?(:prop_types) ? type.prop_types.to_n : `{}`},
+          getDefaultProps: function(){
+            return #{type.respond_to?(:default_props) ? type.default_props.to_n : `{}`};
+          },
+          mixins: #{type.respond_to?(:native_mixins) ? type.native_mixins : `[]`},
+          statics: #{type.respond_to?(:static_call_backs) ? type.static_call_backs.to_n : `{}`},
+          componentWillMount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_mount if type.method_defined? :component_will_mount};
+          },
+          componentDidMount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_did_mount if type.method_defined? :component_did_mount};
+          },
+          componentWillReceiveProps: function(next_props) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_receive_props(Hash.new(`next_props`)) if type.method_defined? :component_will_receive_props};
+          },
+          shouldComponentUpdate: function(next_props, next_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.should_component_update?(Hash.new(`next_props`), Hash.new(`next_state`)) if type.method_defined? :should_component_update?};
+          },
+          componentWillUpdate: function(next_props, next_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_update(Hash.new(`next_props`), Hash.new(`next_state`)) if type.method_defined? :component_will_update};
+          },
+          componentDidUpdate: function(prev_props, prev_state) {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_did_update(Hash.new(`prev_props`), Hash.new(`prev_state`)) if type.method_defined? :component_did_update};
+          },
+          componentWillUnmount: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.component_will_unmount if type.method_defined? :component_will_unmount};
+          },
+          _getOpalInstance: function() {
+            if (this.__opalInstance == undefined) {
+              var instance = #{type.new(`this`)};
+            } else {
+              var instance = this.__opalInstance;
+            }
+            this.__opalInstance = instance;
+            return instance;
+          },
+          render: function() {
+            var instance = this._getOpalInstance.apply(this);
+            return #{`instance`.send(render_fn).to_n};
+          }
+        })
+      }
+    end
+
+    def self.create_element(type, properties = {}, &block)
+      params = []
+
+      # Component Spec, Normal DOM, String or Native Component
+      if @@component_classes[type]
+        params << @@component_classes[type]
+      elsif type.kind_of?(Class)
+        params << create_native_react_class(type)
+      elsif React::Component::Tags::HTML_TAGS.include?(type)
+        params << type
+      elsif type.is_a? String
+        return React::Element.new(type)
+      else
+        raise "#{type} not implemented"
+      end
+
+      # Convert Passed in properties
+      properties = convert_props(properties)
+      params << properties.shallow_to_n
+
+      # Children Nodes
+      if block_given?
+        [yield].flatten.each do |ele|
+          params << ele.to_n
+        end
+      end
+      React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+    end
+
+    def self.clear_component_class_cache
+      @@component_classes = {}
+    end
+
+    def self.convert_props(properties)
+      raise "Component parameters must be a hash. Instead you sent #{properties}" unless properties.is_a? Hash
+      props = {}
+      properties.map do |key, value|
+        if key == "class_name" && value.is_a?(Hash)
+          props[lower_camelize(key)] = `React.addons.classSet(#{value.to_n})`
+        elsif key == "class"
+          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
+      end
+      props
+    end
+
+    private
+
+    def self.lower_camelize(snake_cased_word)
+      words = snake_cased_word.split('_')
+      result = [words.first]
+      result.concat(words[1..-1].map {|word| word[0].upcase + word[1..-1] })
+      result.join('')
+    end
+  end
+end

data/lib/react/callbacks.rb

@@ -0,0 +1,42 @@
+require 'active_support/core_ext/class/attribute'
+
+module React
+  module Callbacks
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    def run_callback(name, *args)
+      self.class.callbacks_for(name).each do |callback|
+        if callback.is_a?(Proc)
+          instance_exec(*args, &callback)
+        else
+          send(callback, *args)
+        end
+      end
+    end
+
+    module ClassMethods
+      def define_callback(callback_name)
+        attribute_name = "_#{callback_name}_callbacks"
+        class_attribute(attribute_name)
+        self.send("#{attribute_name}=", [])
+        define_singleton_method(callback_name) do |*args, &block|
+          callbacks = self.send(attribute_name)
+          callbacks.concat(args)
+          callbacks.push(block) if block_given?
+          self.send("#{attribute_name}=", callbacks)
+        end
+      end
+
+      def callbacks_for(callback_name)
+        attribute_name = "_#{callback_name}_callbacks"
+        if superclass.respond_to? :callbacks_for
+          superclass.callbacks_for(callback_name)
+        else
+          []
+        end + self.send(attribute_name)
+      end
+    end
+  end
+end

data/lib/react/children.rb

@@ -0,0 +1,30 @@
+module React
+  class Children
+    include Enumerable
+
+    def initialize(children)
+      @children = children
+    end
+
+    def each(&block)
+      return to_enum(__callee__) { length } unless block_given?
+      return [] unless length > 0
+      collection = []
+      %x{
+        React.Children.forEach(#{@children}, function(context){
+          #{
+            element = React::Element.new(`context`)
+            block.call(element)
+            collection << element
+          }
+        })
+      }
+      collection
+    end
+
+    def length
+      @length ||= `React.Children.count(#{@children})`
+    end
+    alias_method :size, :length
+  end
+end

data/lib/react/component.rb

@@ -0,0 +1,139 @@
+require 'react/ext/string'
+require 'react/ext/hash'
+require 'active_support/core_ext/class/attribute'
+require 'react/callbacks'
+require 'react/rendering_context'
+require 'react/observable'
+require 'react/state'
+require 'react/component/api'
+require 'react/component/class_methods'
+require 'react/component/props_wrapper'
+require 'native'
+
+module React
+  module Component
+    def self.included(base)
+      base.include(API)
+      base.include(Callbacks)
+      base.include(Tags)
+      base.include(DslInstanceMethods)
+      base.include(ShouldComponentUpdate)
+      base.class_eval do
+        class_attribute :initial_state
+        define_callback :before_mount
+        define_callback :after_mount
+        define_callback :before_receive_props
+        define_callback :before_update
+        define_callback :after_update
+        define_callback :before_unmount
+      end
+      base.extend(ClassMethods)
+    end
+
+    def self.deprecation_warning(message)
+      @deprecation_messages ||= []
+      message = "Warning: Deprecated feature used in #{name}. #{message}"
+      unless @deprecation_messages.include? message
+        @deprecation_messages << message
+        IsomorphicHelpers.log message, :warning
+      end
+    end
+
+    def initialize(native_element)
+      @native = native_element
+    end
+
+    def emit(event_name, *args)
+      params["_on#{event_name.to_s.event_camelize}"].call(*args)
+    end
+
+    def component_will_mount
+      IsomorphicHelpers.load_context(true) if IsomorphicHelpers.on_opal_client?
+      set_state! initial_state if initial_state
+      State.initialize_states(self, initial_state)
+      State.set_state_context_to(self) { run_callback(:before_mount) }
+    rescue Exception => e
+      self.class.process_exception(e, self)
+    end
+
+    def component_did_mount
+      State.set_state_context_to(self) do
+        run_callback(:after_mount)
+        State.update_states_to_observe
+      end
+    rescue Exception => e
+      self.class.process_exception(e, self)
+    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) { self.run_callback(:before_receive_props, Hash.new(next_props)) }
+    rescue Exception => e
+      self.class.process_exception(e, self)
+    end
+
+    def component_will_update(next_props, next_state)
+      State.set_state_context_to(self) { self.run_callback(:before_update, Hash.new(next_props), Hash.new(next_state)) }
+    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, Hash.new(prev_props), Hash.new(prev_state))
+        State.update_states_to_observe
+      end
+    rescue Exception => e
+      self.class.process_exception(e, self)
+    end
+
+    def component_will_unmount
+      State.set_state_context_to(self) do
+        self.run_callback(:before_unmount)
+        State.remove
+      end
+    rescue Exception => e
+      self.class.process_exception(e, self)
+    end
+
+    attr_reader :waiting_on_resources
+
+    def update_react_js_state(object, name, value)
+      if object
+        name = "#{object.class}.#{name}" unless object == self
+        set_state(
+          '***_state_updated_at-***' => Time.now.to_f,
+          name => value
+        )
+      else
+        set_state name => value
+      end
+    end
+
+    def render
+      raise 'no render defined'
+    end unless method_defined?(:render)
+
+    def _render_wrapper
+      State.set_state_context_to(self, true) do
+        element = React::RenderingContext.render(nil) { render || '' }
+        @waiting_on_resources =
+          element.waiting_on_resources if element.respond_to? :waiting_on_resources
+        element
+      end
+    # rubocop:disable Lint/RescueException # we want to catch all exceptions regardless
+    rescue Exception => e
+      # rubocop:enable Lint/RescueException
+      self.class.process_exception(e, self)
+    end
+
+    def watch(value, &on_change)
+      Observable.new(value, on_change)
+    end
+
+    def define_state(*args, &block)
+      State.initialize_states(self, self.class.define_state(*args, &block))
+    end
+  end
+end

data/lib/react/component/api.rb

@@ -0,0 +1,50 @@
+module React
+  module Component
+    module API
+      def dom_node
+        if !(`typeof ReactDOM === 'undefined' || typeof ReactDOM.findDOMNode === 'undefined'`)
+          `ReactDOM.findDOMNode(#{self}.native)` # v0.14.0
+        elsif !(`typeof React.findDOMNode === 'undefined'`)
+          `React.findDOMNode(#{self}.native)`    # v0.13.0
+        else
+          `#{self}.native.getDOMNode`            # v0.12.0
+        end
+      end
+
+      def mounted?
+        `#{self}.native.isMounted()`
+      end
+
+      def force_update!
+        `#{self}.native.forceUpdate()`
+      end
+
+      def set_props(prop, &block)
+        set_or_replace_state_or_prop(prop, 'setProps', &block)
+      end
+
+      def set_props!(prop, &block)
+        set_or_replace_state_or_prop(prop, 'replaceProps', &block)
+      end
+
+      def set_state(state, &block)
+        set_or_replace_state_or_prop(state, 'setState', &block)
+      end
+
+      def set_state!(state, &block)
+        set_or_replace_state_or_prop(state, 'replaceState', &block)
+      end
+
+      private
+
+      def set_or_replace_state_or_prop(state_or_prop, method, &block)
+        raise "No native ReactComponent associated" unless @native
+        %x{
+          #{@native}[#{method}](#{state_or_prop.shallow_to_n}, function(){
+            #{block.call if block}
+          });
+        }
+      end
+    end
+  end
+end

data/lib/react/component/base.rb

@@ -0,0 +1,9 @@
+module React
+  module Component
+    class Base
+      def self.inherited(child)
+        child.include(Component)
+      end
+    end
+  end
+end

data/lib/react/component/class_methods.rb

@@ -0,0 +1,214 @@
+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)
+      end
+
+      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
+        raise e if reraise
+      end
+
+      def append_backtrace(message_array, backtrace)
+        message_array << "    #{backtrace[0]}"
+        backtrace[1..-1].each { |line| message_array << line }
+      end
+
+      def render(container = nil, params = {}, &block)
+        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 }
+          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(props_wrapper)
+      end
+
+      def prop_types
+        if self.validator
+          {
+            _componentValidator: %x{
+              function(props, propName, componentName) {
+                var errors = #{validator.validate(Hash.new(`props`))};
+                var error = new Error(#{"In component `#{name}`\n" + `errors`.join("\n")});
+                return #{`errors`.count > 0 ? `error` : `undefined`};
+              }
+            }
+          }
+        else
+          {}
+        end
+      end
+
+      def default_props
+        validator.default_props
+      end
+
+      def params(&block)
+        validator.build(&block)
+      end
+
+      def props_wrapper
+        @props_wrapper ||= Class.new(PropsWrapper)
+      end
+
+      def param(*args)
+        if args[0].is_a? Hash
+          options = args[0]
+          name = options.first[0]
+          default = options.first[1]
+          options.delete(name)
+          options.merge!({default: default})
+        else
+          name = args[0]
+          options = args[1] || {}
+        end
+        if options[:default]
+          validator.optional(name, options)
+        else
+          validator.requires(name, options)
+        end
+      end
+
+      def collect_other_params_as(name)
+        validator.allow_undefined_props = true
+        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
+        props_wrapper.define_method(name) do
+          @_all_others ||= validator_in_lexial_scope.undefined_props(props)
+        end
+      end
+
+      def define_state(*states, &block)
+        default_initial_value = (block && block.arity == 0) ? yield : nil
+        states_hash = (states.last.is_a?(Hash)) ? states.pop : {}
+        states.each { |name| states_hash[name] = default_initial_value }
+        (self.initial_state ||= {}).merge! states_hash
+        states_hash.each do |name, initial_value|
+          define_state_methods(self, name, &block)
+        end
+      end
+
+      def export_state(*states, &block)
+        default_initial_value = (block && block.arity == 0) ? yield : nil
+        states_hash = (states.last.is_a?(Hash)) ? states.pop : {}
+        states.each { |name| states_hash[name] = default_initial_value }
+        State.initialize_states(self, states_hash)
+        states_hash.each do |name, initial_value|
+          define_state_methods(self, name, self, &block)
+          define_state_methods(singleton_class, name, self, &block)
+        end
+      end
+
+      def define_state_methods(this, name, from = nil, &block)
+        this.define_method("#{name}") do
+          React::Component.deprecation_warning "Direct access to state `#{name}`.  Use `state.#{name}` instead." if from.nil? || from == this
+          State.get_state(from || self, name)
+        end
+        this.define_method("#{name}=") do |new_state|
+          React::Component.deprecation_warning "Direct assignment to state `#{name}`.  Use `#{(from && from != this) ? from : 'state'}.#{name}!` instead."
+          yield name, State.get_state(from || self, name), new_state if block && block.arity > 0
+          State.set_state(from || self, name, new_state)
+        end
+        this.define_method("#{name}!") do |*args|
+          React::Component.deprecation_warning "Direct access to state `#{name}`.  Use `state.#{name}` instead."  if from.nil? or from == this
+          if args.count > 0
+            yield name, State.get_state(from || self, name), args[0] if block && block.arity > 0
+            current_value = State.get_state(from || self, name)
+            State.set_state(from || self, name, args[0])
+            current_value
+          else
+            current_state = State.get_state(from || self, name)
+            yield name, State.get_state(from || self, name), current_state if block && block.arity > 0
+            State.set_state(from || self, name, current_state)
+            Observable.new(current_state) do |update|
+              yield name, State.get_state(from || self, name), update if block && block.arity > 0
+              State.set_state(from || self, name, update)
+            end
+          end
+        end
+      end
+
+      def native_mixin(item)
+        native_mixins << item
+      end
+
+      def native_mixins
+        @native_mixins ||= []
+      end
+
+      def static_call_back(name, &block)
+        static_call_backs[name] = block
+      end
+
+      def static_call_backs
+        @static_call_backs ||= {}
+      end
+
+      def export_component(opts = {})
+        export_name = (opts[:as] || name).split('::')
+        first_name = export_name.first
+        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(component_name)
+        React::API.import_native_component(
+          self, React::API.eval_native_react_component(component_name)
+        )
+        define_method(: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
+
+      def add_item_to_tree(current_tree, new_item)
+        if Native(current_tree).class != Native::Object || new_item.length == 1
+          new_item.inject { |a, e| { e => a } }
+        else
+          Native(current_tree)[new_item.last] = add_item_to_tree(
+            Native(current_tree)[new_item.last], new_item[0..-2]
+          )
+          current_tree
+        end
+      end
+    end
+  end
+end