Move opal-jquery extension to separate file

Author: zetachang

config.ru

@@ -2,7 +2,6 @@ require 'bundler'
 Bundler.require
 
 require "opal/rspec"
-require "opal-jquery"
 
 Opal::Config.arity_check_enabled = true
 

lib/hyper-react.rb

@@ -28,6 +28,7 @@
   require 'react/rendering_context'
   require 'react/state'
   require 'react/object'
+  require "react/ext/opal-jquery/element"
   require 'reactive-ruby/isomorphic_helpers'
   require 'rails-helpers/top_level_rails_component'
   require 'reactive-ruby/version'

lib/react/ext/opal-jquery/element.rb

@@ -0,0 +1,26 @@
+Element.instance_eval do
+  def self.find(selector)
+    selector = begin
+      selector.dom_node
+    rescue
+      selector
+    end if `#{selector}.$dom_node !== undefined`
+    `$(#{selector})`
+  end
+
+  def self.[](selector)
+    find(selector)
+  end
+
+  define_method :render do |container = nil, params = {}, &block|
+    if `#{self.to_n}._reactrb_component_class === undefined`
+      `#{self.to_n}._reactrb_component_class = #{Class.new(React::Component::Base)}`
+    end
+    klass = `#{self.to_n}._reactrb_component_class`
+    klass.class_eval do
+      render(container, params, &block)
+    end
+
+    React.render(React.create_element(`#{self.to_n}._reactrb_component_class`), self)
+  end
+end if Object.const_defined?('Element')

lib/react/top_level.rb

@@ -103,30 +103,3 @@ def self.unmount_component_at_node(node)
   end
 
 end
-
-Element.instance_eval do
-  def self.find(selector)
-    selector = begin
-      selector.dom_node
-    rescue
-      selector
-    end if `#{selector}.$dom_node !== undefined`
-    `$(#{selector})`
-  end
-
-  def self.[](selector)
-    find(selector)
-  end
-
-  define_method :render do |container = nil, params = {}, &block|
-    if `#{self.to_n}._reactrb_component_class === undefined`
-      `#{self.to_n}._reactrb_component_class = #{Class.new(React::Component::Base)}`
-    end
-    klass = `#{self.to_n}._reactrb_component_class`
-    klass.class_eval do
-      render(container, params, &block)
-    end
-
-    React.render(React.create_element(`#{self.to_n}._reactrb_component_class`), self)
-  end
-end if Object.const_defined?('Element')

spec/react/opal_jquery_extensions_spec.rb

@@ -1,66 +1,68 @@
 require 'spec_helper'
 
 if opal?
-describe 'Element' do
-  after(:each) do
-    React::API.clear_component_class_cache
-  end
+describe 'opal-jquery extensions' do
+  describe 'Element' do
+    after(:each) do
+      React::API.clear_component_class_cache
+    end
 
-  it 'will reuse the wrapper componet class for the same Element' do
-    stub_const 'Foo', Class.new(React::Component::Base)
-    Foo.class_eval do
-      param :name
-      def render
-        "hello #{params.name}"
-      end
+    it 'will reuse the wrapper componet class for the same Element' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :name
+        def render
+          "hello #{params.name}"
+        end
 
-      def component_will_unmount
+        def component_will_unmount
 
+        end
       end
-    end
 
-    expect_any_instance_of(Foo).to_not receive(:component_will_unmount)
+      expect_any_instance_of(Foo).to_not receive(:component_will_unmount)
 
-    test_div = Element.new(:div)
-    test_div.render { Foo(name: 'fred') }
-    test_div.render { Foo(name: 'freddy') }
-    expect(Element[test_div].find('span').html).to eq('hello freddy')
-  end
+      test_div = Element.new(:div)
+      test_div.render { Foo(name: 'fred') }
+      test_div.render { Foo(name: 'freddy') }
+      expect(Element[test_div].find('span').html).to eq('hello freddy')
+    end
 
-  it 'renders a top level component using render with a block' do
-    stub_const 'Foo', Class.new(React::Component::Base)
-    Foo.class_eval do
-      param :name
-      def render
-        "hello #{params.name}"
+    it 'renders a top level component using render with a block' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :name
+        def render
+          "hello #{params.name}"
+        end
       end
+      test_div = Element.new(:div)
+      test_div.render { Foo(name: 'fred') }
+      expect(Element[test_div].find('span').html).to eq('hello fred')
     end
-    test_div = Element.new(:div)
-    test_div.render { Foo(name: 'fred') }
-    expect(Element[test_div].find('span').html).to eq('hello fred')
-  end
 
-  it 'renders a top level component using render with a container and params ' do
-    test_div = Element.new(:div)
-    test_div.render(:span, id: :render_test_span) { 'hello' }
-    expect(Element[test_div].find('#render_test_span').html).to eq('hello')
-  end
+    it 'renders a top level component using render with a container and params ' do
+      test_div = Element.new(:div)
+      test_div.render(:span, id: :render_test_span) { 'hello' }
+      expect(Element[test_div].find('#render_test_span').html).to eq('hello')
+    end
 
-  it 'will find the DOM node given a react element' do
-    stub_const 'Foo', Class.new(React::Component::Base)
-    Foo.class_eval do
-      def render
-        div { 'hello' }
+    it 'will find the DOM node given a react element' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        def render
+          div { 'hello' }
+        end
       end
-    end
 
-    expect(Element[renderToDocument(Foo)].html).to eq('hello')
-  end
+      expect(Element[renderToDocument(Foo)].html).to eq('hello')
+    end
 
-  it "accepts plain js object as selector" do
-    expect {
-      Element[`window`]
-    }.not_to raise_error
+    it "accepts plain js object as selector" do
+      expect {
+        Element[`window`]
+      }.not_to raise_error
+    end
   end
 end
 end