WIP

# Conflicts:
#	.rubocop.yml -> removed
#	config.ru -> removed
#	lib/react/component.rb
#	lib/react/native_library.rb
#	lib/reactive-ruby/rails/controller_helper.rb -> removed
#	spec/react/dsl_spec.rb
#	spec/spec_helper.rb -> removed

Author: catmando

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.

lib/react/api.rb

@@ -5,7 +5,7 @@ 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.create_native_react_class(type)

lib/react/component.rb

@@ -29,7 +29,8 @@ def self.included(base)
       base.extend(ClassMethods)
 
       if base.name
-        class << base.parent
+        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$/

lib/react/component/class_methods.rb

@@ -27,14 +27,20 @@ def deprecation_warning(message)
         end
       end
 
-      def render(*args, &block)
-        if args[0].is_a? Hash
-          define_method :render do
-            yield
+      def render(container=nil, params={}, &block)
+        if container
+          if block
+            define_method :render do
+              send(container, params) { instance_eval &block }
+            end
+          else
+            define_method :render do
+              send(container, params)
+            end
           end
         else
           define_method :render do
-            send *args, &block
+            instance_eval &block
           end
         end
       end
@@ -174,6 +180,12 @@ def export_component(opts = {})
         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(native_component_name)
+        React::API.import_native_component(native_component_name, self)
+        render {} # define a dummy render method - will never be called...
+        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 } }

lib/react/native_library.rb

@@ -1,53 +1,88 @@
 module React
+  # NativeLibrary handles importing JS libraries
+  # Importing native components is handled by the
+  # React::Base.
   class NativeLibrary
-    def self.renames_and_exclusions
-      @renames_and_exclusions ||= {}
-    end
+    class << self
+      def imports(native_name)
+        @native_prefix = "#{native_name}."
+        self
+      end
 
-    def self.libraries
-      @libraries ||= []
-    end
+      def rename(rename_list)
+        # rename_list is a hash in the form: native_name => ruby_name, native_name => ruby_name
+        rename_list.each do |js_name, ruby_name|
+          native_name = lookup_native_name(js_name)
+          if lookup_native_name(js_name)
+            create_wrapper(native_name, ruby_name)
+          else
+            raise "class #{name} < React::NativeLibrary could not import #{js_name}. "\
+            "Native value #{scope_native_name(js_name)} is undefined."
+          end
+        end
+      end
 
-    def self.const_missing(name)
-      if renames_and_exclusions.has_key? name
-        if native_name = renames_and_exclusions[name]
-          native_name
+      def import_const_from_native(klass, const_name)
+        puts "#{klass} is importing_const_from_native: #{const_name}"
+        if klass.defined? const_name
+          klass.const_get const_name
         else
-          super
+          native_name = lookup_native_name(const_name) ||
+                        lookup_native_name(const_name[0].downcase + const_name[1..-1])
+          wrapper = create_wrapper(klass, native_name, const_name) if native_name
+          puts "created #{wrapper} for #{const_name}"
+          wrapper
         end
-      else
-        libraries.each do |library|
-          native_name = "#{library}.#{name}"
-          native_component = `eval(#{native_name})` rescue nil
-          React::API.import_native_component(name, native_component) and return name if native_component && `native_component != undefined`
+      end
+
+      def find_and_render_component(container_class, component_name, args, block, &_failure)
+        puts "#{self} is registering #{method_name}"
+        component_class = import_const_from_native(container_class, method_name)
+        if component_class < React::Component::Base
+          React::RenderingContext.build_or_render(nil, component_class, *args, &block)
+        else
+          yield method_name
         end
-        name
       end
-    end
 
-    def self.method_missing(n, *args, &block)
-      name = n
-      if name =~ /_as_node$/
-        node_only = true
-        name = name.gsub(/_as_node$/, "")
+      def const_missing(const_name)
+        import_const_from_native(self, const_name) || super
       end
-      unless name = const_get(name)
-        return super
+
+      def method_missing(method_name, *args, &block)
+        find_and_render_component(self, method_name, args, block) do
+          raise "could not import a react component named: #{scope_native_name method_name}"
+        end
       end
-      React::RenderingContext.build_or_render(node_only, name, *args, &block)
-    rescue
-    end
 
-    def self.imports(library)
-      libraries << library
-    end
+      private
 
-    def self.rename(rename_list={})
-      renames_and_exclusions.merge!(rename_list.invert)
-    end
+      def lookup_native_name(js_name)
+        native_name = scope_native_name(js_name)
+        `eval(#{native_name}) !== undefined && native_name`
+      rescue
+        nil
+      end
 
-    def self.exclude(*exclude_list)
-      renames_and_exclusions.merge(Hash[exclude_list.map {|k| [k, nil]}])
+      def scope_native_name(js_name)
+        "#{@native_prefix}#{js_name}"
+      end
+
+      def create_wrapper(klass, native_name, ruby_name)
+        if React::API.import_native_component native_name
+          puts "create wrapper(#{klass.inspect}, #{native_name}, #{ruby_name})"
+          new_klass = Class.new
+          klass.const_set ruby_name, new_klass
+          new_class.class_eval do
+            include React::Component::Base
+            imports native_name
+          end
+          puts "successfully created #{klass.inspect}.#{ruby_name} wrapper class for #{native_name}"
+        else
+          puts "creating wrapper class #{klass}::#{ruby_name} for #{native_name}"
+          klass.const_set ruby_name, Class.new(React::NativeLibrary).imports(native_name)
+        end
+      end
     end
   end
 end

lib/reactive-ruby/rails/component_mount.rb

@@ -10,7 +10,9 @@ def setup(controller)
       def react_component(name, props = {}, options = {}, &block)
         options = context_initializer_options(options, name) if options[:prerender]
         props = serialized_props(props, name, controller)
-        super(top_level_name, props, options, &block) + footers
+        super(top_level_name, props, options, &block).gsub("\n","")
+          .gsub(/(<script>.*<\/script>)<\/div>$/,'</div>\1').html_safe +
+          footers
       end
 
       private

lib/reactrb/auto-import.rb

@@ -0,0 +1,24 @@
+# rubocop:disable Style/FileName
+# require 'reactrb/auto-import' to automatically
+# import JS libraries and components when they are detected
+class Object
+  class << self
+    alias _reactrb_original_const_missing const_missing
+
+    def const_missing(const_name)
+      # Opal uses const_missing to initially define things,
+      # so we always call the original, and respond to the exception
+      _reactrb_original_const_missing(const_name)
+    rescue StandardError => e
+      puts "Object const_missing: #{const_name}"
+      React::NativeLibrary.import_const_from_native(Object, const_name) || raise(e)
+    end
+
+    def xmethod_missing(method_name, *args, &block)
+      puts "Object method_missing: #{method_name}"
+      React::NativeLibrary.register_method(Object, method_name, args, block) do
+        _reactrb_original_const_missing(method_name, *args, &block)
+      end
+    end
+  end
+end

spec/react/dsl_spec.rb

@@ -3,16 +3,46 @@
 if opal?
 describe 'the React DSL' do
 
-  it "can define the render method with the render macro", only: true do
-    stub_const 'Foo', Class.new
-    Foo.class_eval do
-      include React::Component
-      render(:div, class: :foot) do
-        "hello"
+  context "render macro" do
+
+    it "can define the render method with the render macro with a html tag container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render(:div, class: :foo) do
+          "hello"
+        end
       end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div class="foo">hello</div>')
+    end
+
+    it "can define the render method with the render macro without a container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render do
+          "hello"
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello</span>')
+    end
+
+    it "can define the render method with the render macro with a application defined container" do
+      stub_const 'Bar', Class.new(React::Component::Base)
+      Bar.class_eval do
+        param :p1
+        render { "hello #{params.p1}" }
+      end
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render Bar, p1: "fred"
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello fred</span>')
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div class="foot">hello</div>')
   end
 
   it "will turn the last string in a block into a element" do

spec/react/native_library_spec.rb

@@ -1,10 +1,248 @@
-require 'spec_helper'
+if false
+  #require 'spec_helper'
+#require 'reactrb/auto-import'
 
 if opal?
-describe React::NativeLibrary do
-  it "will import a React.js library into the Ruby name space"              # class BS < NativeLibrary; imports 'ReactBootstrap'; end
-  it "exclude specific components from a library"                           # exclude "Modal" # can't access BS.Modal
-  it "rename specific components from a library"                            # rename "Modal" => "FooBar"  # BS.FooBar connects to ReactBootstrap.Modal
-  it "can importan multiple libraries into one class"                       
+
+module NativeLibraryTestModule
+  class Component < React::Component::Base
+    param :time_stamp
+    render { puts "about to render Component"; NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+
+  class NestedComponent < React::Component::Base
+    param :time_stamp
+    render { puts "about to render NestedComponent"; NativeLibrary::NativeNestedLibrary::NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+end
+
+describe "React::NativeLibrary", only: true do
+
+  after(:each) do
+    %x{
+      delete window.NativeLibrary;
+      delete window.NativeComponent;
+      delete window.nativeLibrary;
+      delete window.nativeComponent;
+      delete window.NativeObject;
+    }
+    Object.send :remove_const, :NativeLibrary
+    Object.send :remove_const, :NativeComponent
+  end
+
+  # it "will import a React.js library into the Ruby name space" do
+  #   %x{
+  #     window.NativeLibrary = {
+  #       NativeComponent: React.createClass({
+  #         displayName: "HelloMessage",
+  #         render: function render() {
+  #           return React.createElement("div", null, "Hello ", this.props.name);
+  #         }
+  #       })
+  #     }
+  #   }
+  #   stub_const 'Foo', Class.new(React::NativeLibrary)
+  #   Foo.class_eval do
+  #     imports "NativeLibrary"
+  #   end
+  #   expect(React.render_to_static_markup(
+  #     React.create_element(Foo::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+  # end
+  #
+  # it "will rename an imported a React.js component" do
+  #   %x{
+  #     window.NativeLibrary = {
+  #       NativeComponent: React.createClass({
+  #         displayName: "HelloMessage",
+  #         render: function render() {
+  #           return React.createElement("div", null, "Hello ", this.props.name);
+  #         }
+  #       })
+  #     }
+  #   }
+  #   stub_const 'Foo', Class.new(React::NativeLibrary)
+  #   Foo.class_eval do
+  #     imports "NativeLibrary"
+  #     rename "NativeComponent" => "Bar"
+  #   end
+  #   expect(React.render_to_static_markup(
+  #     React.create_element(Foo::Bar, name: "There"))).to eq('<div>Hello There</div>')
+  # end
+  #
+  # it "will give a reasonable error when failing to import a renamed component" do
+  #   %x{
+  #     window.NativeLibrary = {
+  #       NativeComponent: React.createClass({
+  #         displayName: "HelloMessage",
+  #         render: function render() {
+  #           return React.createElement("div", null, "Hello ", this.props.name);
+  #         }
+  #       })
+  #     }
+  #   }
+  #   stub_const 'Foo', Class.new(React::NativeLibrary)
+  #   expect do
+  #     Foo.class_eval do
+  #       imports "NativeLibrary"
+  #       rename "MispelledComponent" => "Bar"
+  #     end
+  #   end.to raise_error(/could not import MispelledComponent/)
+  # end
+  #
+  # it "will import a single React.js component into the ruby name space" do
+  #   %x{
+  #     window.NativeComponent = React.createClass({
+  #       displayName: "HelloMessage",
+  #       render: function render() {
+  #         return React.createElement("div", null, "Hello ", this.props.name);
+  #       }
+  #     })
+  #   }
+  #   stub_const 'Foo', Class.new(React::Component::Base)
+  #   Foo.class_eval do
+  #     imports "NativeComponent"
+  #   end
+  #   expect(React.render_to_static_markup(
+  #     React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+  #
+  # end
+  #
+  # it "will import a name scoped React.js component into the ruby name space" do
+  #   %x{
+  #     window.NativeLibrary = {
+  #       NativeComponent: React.createClass({
+  #         displayName: "HelloMessage",
+  #         render: function render() {
+  #           return React.createElement("div", null, "Hello ", this.props.name);
+  #         }
+  #       })
+  #     }
+  #   }
+  #   stub_const 'Foo', Class.new(React::Component::Base)
+  #   Foo.class_eval do
+  #     imports "NativeLibrary.NativeComponent"
+  #   end
+  #   expect(React.render_to_static_markup(
+  #     React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+  #
+  # end
+  #
+  # it "will give a meaningful error if the React.js component is invalid" do
+  #   %x{
+  #     window.NativeObject = {}
+  #   }
+  #   stub_const 'Foo', Class.new(React::Component::Base)
+  #   expect do
+  #     Foo.class_eval do
+  #       imports "NativeComponent"
+  #     end
+  #   end.to raise_error(/Cannot import NativeComponent: /)
+  #   expect do
+  #     Foo.class_eval do
+  #       imports "NativeObject"
+  #     end
+  #   end.to raise_error("Cannot import NativeObject: not a react native component")
+  # end
+
+  context "automatic importing" do
+
+    it "will automatically import a React.js component when referenced in another component" do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::Component, time_stamp: Time.now))).to eq('<div>Hello There</div>')
+    end
+
+    # it "will automatically import a React.js component when referenced in another component" do
+    #   stub_const 'Foo', Class.new(React::Component::Base)
+    #   Foo.class_eval do
+    #     render { NativeComponent(name: "There") }
+    #   end
+    #   %x{
+    #     window.NativeComponent = React.createClass({
+    #       displayName: "HelloMessage",
+    #       render: function render() {
+    #         return React.createElement("div", null, "Hello ", this.props.name);
+    #       }
+    #     })
+    #   }
+    #   expect(React.render_to_static_markup(
+    #     React.create_element(Foo))).to eq('<div>Hello There</div>')
+    # end
+
+    # it "will automatically import a React.js component when referenced as a constant" do
+    #   %x{
+    #     window.NativeComponent = React.createClass({
+    #       displayName: "HelloMessage",
+    #       render: function render() {
+    #         return React.createElement("div", null, "Hello ", this.props.name);
+    #       }
+    #     })
+    #   }
+    #   expect(React.render_to_static_markup(
+    #     React.create_element(NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    # end
+
+    it "will automatically import a native library containing a React.js component" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+            NativeComponent: React.createClass({
+              displayName: "HelloMessage",
+              render: function render() {
+                return React.createElement("div", null, "Hello ", this.props.name);
+              }
+            })
+          }
+        }
+      }
+
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))).to eq('<div>Hello There</div>')
+    end
+
+    # it "the library and components can begin with lower case letters" do
+    #   %x{
+    #     window.nativeLibrary = {
+    #       nativeComponent: React.createClass({
+    #         displayName: "HelloMessage",
+    #         render: function render() {
+    #           return React.createElement("div", null, "Hello ", this.props.name);
+    #         }
+    #       })
+    #     }
+    #   }
+    #   expect(React.render_to_static_markup(
+    #     React.create_element(NativeLibrary::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    # end
+
+    it "will produce a sensible error if the component is not in the library" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+          }
+        }
+      }
+      #expect do
+        begin
+          `debugger`
+          x = React.render_to_static_markup(React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))
+          puts x
+        rescue Exception => e
+          `debugger`
+          nil
+        end
+      #end.to raise_error("could not import a react component named: #{NativeLibrary.NativeNestedLibrary.NestedComponent}")
+
+    end
+
+  end
+end
 end
 end