reactrb 0.8.3 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1c3ebf7952a5d8a3c923961b2c0d58b6c0ecf85
-  data.tar.gz: 5aa6a7e1fa5dfee1160e2bb0931f316b3d80aa4d
+  metadata.gz: 2958d070204fb5e6864522685980645766fe0c7c
+  data.tar.gz: a6a28802f1b4711703ee21fce59648ab020d4b68
 SHA512:
-  metadata.gz: 11064c43d167ff250020f53fe3ffa3e84dfc1477b06014d2c11703ecc0265601214991e5d9576a362bf2aa027efd81e523833a946cdc729cd747dccdfec682a8
-  data.tar.gz: 8b8c60d6b48489c5f0008133ef431e0b282f4218c69059f61b07b2ef680cb4629837058ea30b9ee26bbab4e6cf7418e10cd15c3591da4cf15567e0f3b824ae88
+  metadata.gz: c9b615808c1a56ea6ce344c902387dc2d27d21e971fbea47e2191439bf7e46ae5efd0f523a5f09a282c863247005f9071d6337a4e521567b1d06cdd95a515620
+  data.tar.gz: 6b17254733aaa175a56bfc8ec4a22601af4579758363a941c79bc514fd6276e911e3d89191dd6f48f6d0de4d543639bfe373350dec0ad4e1adc9339abf8e01cf

data/.rubocop.yml

@@ -0,0 +1,8 @@
+Metrics/LineLength:
+  Max: 100
+
+Style/MutableConstant:
+  Enabled: false
+
+Lint/LiteralInCondition:
+  Enabled: false

data/component-name-lookup.md

@@ -0,0 +1,145 @@
+#### Notes on how component names are looked up
+
+Given:
+
+```ruby
+
+class Blat < React::Component::Base
+
+  render do
+    Bar()      
+    Foo::Bar()
+  end
+
+end
+
+class Bar < React::Component::Base
+end
+
+module Foo
+
+  class Bar < React::Component::Base
+
+    render do
+      Blat()
+      Baz()
+    end
+  end
+
+  class Baz < React::Component::Base
+  end
+
+end
+```
+
+The problem is that method lookup is different than constant lookup.  We can prove it by running this code:
+
+```ruby
+def try_it(test, &block)
+  puts "trying #{test}"
+  result = yield
+  puts "success#{': '+result.to_s if result}"
+rescue Exception => e
+  puts "failed: #{e}"
+ensure
+  puts "---------------------------------"
+end
+
+module Boom
+
+  Bar = 12
+
+  def self.Bar
+    puts "   Boom::Bar says hi"
+  end
+
+  class Baz
+    def doit
+      try_it("Bar()") { Bar() }
+      try_it("Boom::Bar()") {Boom::Bar()}
+      try_it("Bar") { Bar }
+      try_it("Boom::Bar") { Boom::Bar }
+    end
+  end
+end
+
+
+
+Boom::Baz.new.doit
+```
+
+which prints:
+
+```text
+trying Bar()
+failed: Bar: undefined method `Bar' for #<Boom::Baz:0x774>
+---------------------------------
+trying Boom::Bar()
+   Boom::Bar says hi
+success
+---------------------------------
+trying Bar
+success: 12
+---------------------------------
+trying Boom::Bar
+success: 12
+---------------------------------
+```
+
+[try-it](http://opalrb.org/try/?code:def%20try_it(test%2C%20%26block)%0A%20%20puts%20%22trying%20%23%7Btest%7D%22%0A%20%20result%20%3D%20yield%0A%20%20puts%20%22success%23%7B%27%3A%20%27%2Bresult.to_s%20if%20result%7D%22%0Arescue%20Exception%20%3D%3E%20e%0A%20%20puts%20%22failed%3A%20%23%7Be%7D%22%0Aensure%0A%20%20puts%20%22---------------------------------%22%0Aend%0A%0Amodule%20Boom%0A%20%20%0A%20%20Bar%20%3D%2012%0A%20%20%0A%20%20def%20self.Bar%0A%20%20%20%20puts%20%22%20%20%20Boom%3A%3ABar%20says%20hi%22%0A%20%20end%0A%0A%20%20class%20Baz%0A%20%20%20%20def%20doit%0A%20%20%20%20%20%20try_it(%22Bar()%22)%20%7B%20Bar()%20%7D%0A%20%20%20%20%20%20try_it(%22Boom%3A%3ABar()%22)%20%7BBoom%3A%3ABar()%7D%0A%20%20%20%20%20%20try_it(%22Bar%22)%20%7B%20Bar%20%7D%0A%20%20%20%20%20%20try_it(%22Boom%3A%3ABar%22)%20%7B%20Boom%3A%3ABar%20%7D%0A%20%20%20%20end%0A%20%20end%0Aend%0A%20%20%0A%0A%0ABoom%3A%3ABaz.new.doit)
+
+
+What we need to do is:
+
+1. when defining a component class `Foo`, also define in the same scope that Foo is being defined a method `self.Foo` that will accept Foo's params and child block, and render it.
+
+2. As long as a name is qualified with at least one scope (i.e. `ModName::Foo()`) everything will work out, but if we say just `Foo()` then the only way I believe out of this is to handle it via method_missing, and let method_missing do a const_get on the method_name (which will return the class) and then render that component.
+
+#### details
+
+To define `self.Foo` in the same scope level as the class `Foo`, we need code like this:
+
+```ruby
+def register_component_dsl_method(component)
+  split_name = component.name && component.name.split('::')
+  return unless split_name && split_name.length > 2
+  component_name = split_name.last
+  parent = split_name.inject([Module]) { |nesting, next_const| nesting + [nesting.last.const_get(next_const)] }[-2]
+  class << parent
+    define_method component_name do |*args, &block|
+      React::RenderingContext.render(name, *args, &block)
+    end
+    define_method "#{component_name}_as_node" do |*args, &block|
+      React::Component.deprecation_warning("..._as_node is deprecated.  Render component and then use the .node method instead")
+      send(component_name, *args, &block).node
+    end
+  end
+end
+
+module React
+  module Component
+    def self.included(base)
+      ...
+      register_component_dsl_method(base.name)
+    end
+  end
+end
+```
+
+The component's method_missing function will look like this:
+
+```ruby
+def method_missing(name, *args, &block)
+  if name =~ /_as_node$/
+    React::Component.deprecation_warning("..._as_node is deprecated.  Render component and then use the .node method instead")
+    method_missing(name.gsub(/_as_node$/,""), *args, &block).node
+  else
+    component = const_get name if defined? name
+    React::RenderingContext.render(nil, component, *args, &block)
+  end
+end
+```
+
+### other related issues
+
+The Kernel#p method conflicts with the <p> tag.   However the p method can be invoked on any object so we are going to go ahead and use it, and deprecate the para method.

data/config.ru

@@ -18,7 +18,6 @@ else
   run Opal::Server.new { |s|
     s.main = 'opal/rspec/sprockets_runner'
     s.append_path 'spec'
-    #s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
     s.debug = true
     s.index_path = 'spec/index.html.erb'
   }

data/lib/react/api.rb

@@ -1,11 +1,38 @@
 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.to_s] = 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` || `!!#{component}.prototype.render`)
+        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)
@@ -74,7 +101,7 @@ module React
         params << @@component_classes[type]
       elsif type.kind_of?(Class)
         params << create_native_react_class(type)
-      elsif HTML_TAGS.include?(type)
+      elsif React::Component::Tags::HTML_TAGS.include?(type)
         params << type
       elsif type.is_a? String
         return React::Element.new(type)
@@ -108,6 +135,8 @@ module React
           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::ATTRIBUTES.include?(lower_camelize(key)) ? lower_camelize(key) : key] = value
         end

data/lib/react/component.rb

@@ -15,6 +15,8 @@ module React
     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
@@ -25,28 +27,14 @@ module React
         define_callback :before_unmount
       end
       base.extend(ClassMethods)
+    end
 
-      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
+    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
 
@@ -58,64 +46,6 @@ module React
       raise "no render defined"
     end unless method_defined?(:render)
 
-    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
-
-    def children
-      nodes = if `#{@native}.props.children==undefined`
-        []
-      else
-        [`#{@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){
-            #{block.call(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 << React::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
-      #raise "No native ReactComponent associated" unless @native
-      @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})
@@ -206,46 +136,14 @@ module React
       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("::")
-      scope_list = self.class.name.split("::").inject([Module]) { |nesting, next_const| nesting + [nesting.last.const_get(next_const)] }.reverse
-      scope_list.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)
-      return props[n] if props.key? n # TODO deprecate and remove - done so that params shadow tags, no longer needed
-      name = n
-      if name =~ /_as_node$/
-        node_only = true
-        name = name.gsub(/_as_node$/, "")
-      end
-      unless (HTML_TAGS.include?(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)
@@ -256,14 +154,5 @@ module React
       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 { |element| @waiting_on_resources = element.waiting_on_resources if element.respond_to? :waiting_on_resources }
-      end
-    rescue Exception => e
-      self.class.process_exception(e, self)
-    end
   end
 end

data/lib/react/component/class_methods.rb

@@ -1,29 +1,35 @@
 module React
   module Component
+    # class level methods (macros) for components
     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???
-          message << "    #{e.backtrace[0]}"
-          message += e.backtrace[1..-1].collect { |line| line }
+        if e.backtrace && e.backtrace.length > 1 && !@backtrace_off
+          append_backtrace(message, e.backtrace)
         else
           message[0] += ": #{e.message}"
         end
-        message = message.join("\n")
-        `console.error(message)`
-        raise e if reraise
+        `console.error(#{message.join("\n")})`
+        raise e if reraise || @dont_catch_exceptions
       end
 
-      def deprecation_warning(message)
-        @deprecation_messages ||= []
-        message = "Warning: Deprecated feature used in #{self.name}. #{message}"
-        unless @deprecation_messages.include? message
-          @deprecation_messages << message
-          IsomorphicHelpers.log message, :warning
+      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)
+        define_method :render do
+          if container
+            React::RenderingContext.render(container, params) { instance_eval(&block) if block }
+          else
+            instance_eval(&block)
+          end
         end
       end
 
@@ -82,14 +88,14 @@ module React
       end
 
       def required_param(name, options = {})
-        deprecation_warning "`required_param` is deprecated, use `param` instead."
+        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 = {})
-        deprecation_warning "`optional_param` is deprecated, use `param param_name: default_value` instead."
+        React::Component.deprecation_warning "`optional_param` is deprecated, use `param param_name: default_value` instead."
         validator.optional(name, options)
       end
 
@@ -128,16 +134,16 @@ module React
 
       def define_state_methods(this, name, from = nil, &block)
         this.define_method("#{name}") do
-          self.class.deprecation_warning "Direct access to state `#{name}`.  Use `state.#{name}` instead." if from.nil? || from == this
+          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|
-          self.class.deprecation_warning "Direct assignment to state `#{name}`.  Use `#{(from && from != this) ? from : 'state'}.#{name}!` instead."
+          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|
-          self.class.deprecation_warning "Direct access to state `#{name}`.  Use `state.#{name}` instead."  if from.nil? or from == this
+          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)
@@ -172,16 +178,33 @@ module React
       end
 
       def export_component(opts = {})
-        export_name = (opts[:as] || name).split("::")
+        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
+        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 { |memo, sub_name| { sub_name => memo } }
+          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])
+          Native(current_tree)[new_item.last] = add_item_to_tree(
+            Native(current_tree)[new_item.last], new_item[0..-2]
+          )
           current_tree
         end
       end