react.rb 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d41b80ffb70a0cfd51d99327653c12283fc4507c
-  data.tar.gz: 7cf663a17b5c5ff75ada548badd48b47394a96b1
+  metadata.gz: 2dbadd7b8df4dbcfb57fd8b20da802307d913740
+  data.tar.gz: 649ec20f57caec86097ad8abdfd2075abf3d8997
 SHA512:
-  metadata.gz: 0d1ecf283bed8249da9f488f5ceb37fdd398cc06ac7d83643be535b13df18a4e8bb69d000fc25e22b44189738e7170f7e2af9b2c6cc1827fd8410e6095cc9590
-  data.tar.gz: a785b76558b4c9832aa8ba53db2fbf28a07a0993b5bf83e32a4042157293a9ba1c658296d0733c5855cc6d108ca1215cb9ec005392a8485893cd41fbf1a7e984
+  metadata.gz: 0ce9d3607ecca7d4891b0ba96dca4ebe5bcd950ff8092a3bd569cbd0da536a4c0f2bbc96faa6e17361875f07b0620bfd3aa13958edc96d7c51225af17d5ed053
+  data.tar.gz: a351a443594be61d7759cf02242a42424e2048a520aa2cac19208d533b358b50d33b9f09d37a1e3dbf32218f95d8d797b2ec19915dd9215d81b3a4be12820fec

data/README.md

@@ -1,6 +1,6 @@
 # React.rb
 
-**React.rb is a [Opal Ruby](http://opalrb.org) wrapper of [React.js library](http://facebook.github.io/react/)**.
+**React.rb is an [Opal Ruby](http://opalrb.org) wrapper of [React.js library](http://facebook.github.io/react/)**.
 
 It let you write reactive UI component with Ruby's elegancy and compiled to run in Javascript. :heart:
 
@@ -16,6 +16,7 @@ and in your Opal application,
 ```ruby
 require "opal"
 require "react"
+
 React.render(React.create_element('h1'){ "Hello World!" }, `document.body`)
 ```
 
@@ -34,12 +35,14 @@ class HelloMessage
   end
 end
 
-React.render_static_markup(React.create_element(HelloMessage)) # => '<div>Hello World!</div>'
+puts React.render_to_static_markup(React.create_element(HelloMessage))
+
+# => '<div>Hello World!</div>'
 ```
 
 ### More complicated one
 
-To hook into native ReactComponent life cycle, the native `this` will be passed to the class's initializer. And all corresponding life cycle methods (`componentDidMount`, etc) will be invoked on the instance using the corresponding snake-case method name.
+To hook into native ReactComponent life cycle, the native `this` will be passed to the class's initializer. And all corresponding life cycle methods (`componentDidMount`, etc) will be invoked on the instance using the snake-case method name.
 
 ```ruby
 class HelloMessage
@@ -64,7 +67,7 @@ puts React.render_to_static_markup(React.create_element(HelloMessage, name: 'Joh
 
 ### React::Component
 
-Hey, we are using Ruby, simply include `React::Component` to save your typing and have some handy method defined.
+Hey, we are using Ruby, simply include `React::Component` to save your typing and have some handy methods defined.
 
 ```ruby
 class HelloMessage
@@ -99,8 +102,11 @@ class App
 end
 
 puts React.render_to_static_markup(React.create_element(App))
+
 # => '<div><span>Default greeting: Cool! John!</span></div>'
+
 React.render(React.create_element(App), `document.body`)
+
 # mounted!
 ```
 
@@ -111,7 +117,7 @@ React.render(React.create_element(App), `document.body`)
 
 ### Props validation
 
-How about props validation? Inspired from [Grape API](https://github.com/intridea/grape), props validation rule could be created easily through `params` class method as below,
+How about props validation? Inspired by [Grape API](https://github.com/intridea/grape), props validation rule could be created easily through `params` class method as below,
 
 ```ruby
 class App
@@ -131,6 +137,55 @@ class App
 end
 ```
 
+### Mixins
+
+Simply create a Ruby module to encapsulate the behavior. Example below is modified from the original [React.js Exmaple on Mixin](http://facebook.github.io/react/docs/reusable-components.html#mixins). [Opal Browser](https://github.com/opal/opal-browser) syntax are used here to make it cleaner.
+
+```ruby
+module SetInterval
+  def self.included(base)
+    base.class_eval do
+      before_mount { @interval = [] }
+      before_unmount do
+        # abort associated timer of a component right before unmount
+        @interval.each { |i| i.abort }
+      end
+    end
+  end
+
+  def set_interval(seconds, &block)
+    @interval << $window.every(seconds, &block)
+  end
+end
+
+class TickTock
+  include React::Component
+  include SetInterval
+
+  define_state(:seconds) { 0 }
+
+  before_mount do
+    set_interval(1) { self.seconds = self.seconds + 1 }
+    set_interval(1) { puts "Tick!" }
+  end
+
+  def render
+    span do
+      "React has been running for: #{self.seconds}"
+    end
+  end
+end
+
+React.render(React.create_element(TickTock), $document.body.to_n)
+
+$window.after(5) do
+  React.unmount_component_at_node($document.body.to_n)
+end
+
+# => Tick!
+# => ... for 5 times then stop ticking after 5 seconds
+```
+
 ## Example
 
 * React Tutorial: see [example/react-tutorial](example/react-tutorial), the original CommentBox example.
@@ -138,7 +193,6 @@ end
 
 ## TODOS
 
-* Mixins examples
 * Documentation
 * API wrapping coverage of the original js library (pretty close though)
 * React Native?

data/lib/react/api.rb

@@ -18,35 +18,44 @@ module React
               return #{type.respond_to?(:initial_state) ? type.initial_state.to_n : `{}`};
             },
             componentWillMount: function() {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.component_will_mount if type.method_defined? :component_will_mount};
             },
             componentDidMount: function() {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.component_did_mount if type.method_defined? :component_did_mount};
             },
             componentWillReceiveProps: function(next_props) {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.component_will_receive_props(`next_props`) if type.method_defined? :component_will_receive_props};
             },
             shouldComponentUpdate: function(next_props, next_state) {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.should_component_update?(`next_props`, `next_state`) if type.method_defined? :should_component_update?};
             },
             componentWillUpdate: function(next_props, next_state) {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.component_will_update(`next_props`, `next_state`) if type.method_defined? :component_will_update};
             },
             componentDidUpdate: function(prev_props, prev_state) {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.component_did_update(`prev_props`, `prev_state`) if type.method_defined? :component_did_update};
             },
             componentWillUnmount: function() {
-              instance = #{type.new(`this`)};
+              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() {
-              instance = #{type.new(`this`)};
+              var instance = this._getOpalInstance.apply(this);
               return #{`instance`.render.to_n};
             }
           })

data/lib/react/component.rb

@@ -69,8 +69,16 @@ module React
       self.run_callback(:before_unmount)
     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 method_missing(name, *args, &block)
-      unless (React::HTML_TAGS.include?(name) || name == 'present')
+      unless (React::HTML_TAGS.include?(name) || name == 'present' || name == '_p_tag')
         return super
       end
 
@@ -78,6 +86,10 @@ module React
         name = args.shift
       end
 
+      if name == "_p_tag"
+        name = "p"
+      end
+
       @buffer = [] unless @buffer
       if block
         current = @buffer

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = "0.0.1"
-end
+  VERSION = "0.0.2"
+end

data/react.rb.gemspec

@@ -8,6 +8,7 @@ Gem::Specification.new do |s|
   s.email        = 'zeta11235813@gmail.com'
   s.homepage     = 'https://github.com/zetachang/react.rb'
   s.summary      = 'Opal Ruby wrapper of React.js library.'
+  s.license      = 'MIT'
   s.description  = "Write reactive UI component with Ruby's elegancy and compiled to run in Javascript."
 
   s.files          = `git ls-files`.split("\n")

data/spec/component_spec.rb

@@ -536,6 +536,47 @@ describe React::Component do
       element = React.create_element(Foo)
       expect(React.render_to_static_markup(element)).to eq("<div></div>")
     end
+
+    it "should redefine `p` to make method missing work" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        def render
+          p(class_name: "foo") do
+            p
+            div { "lorem ipsum" }
+            p(id: "10")
+          end
+        end
+      end
+
+      element = React.create_element(Foo)
+      expect(React.render_to_static_markup(element)).to eq("<p class=\"foo\"><p></p><div>lorem ipsum</div><p id=\"10\"></p></p>")
+    end
+
+    it "should only override `p` in render context" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        before_mount do
+          p "first"
+        end
+
+        after_mount do
+          p "second"
+        end
+
+        def render
+          div
+        end
+      end
+
+      expect(Kernel).to receive(:p).with("first")
+      expect(Kernel).to receive(:p).with("second")
+      renderToDocument(Foo)
+    end
   end
 
   describe "isMounted()" do

data/spec/react_spec.rb

@@ -1,6 +1,10 @@
 require "spec_helper"
 
 describe React do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+
   describe "is_valid_element" do
     it "should return true if passed a valid element" do
       element = React::Element.new(`React.createElement('div')`)
@@ -79,6 +83,43 @@ describe React do
       it "should raise error if provided class doesn't defined `render`" do
         expect { React.create_element(Array) }.to raise_error
       end
+
+      it "should use the same instance for the same ReactComponent" do
+        Foo.class_eval do
+          attr_accessor :a
+          def initialize(n)
+            self.a = 10
+          end
+
+          def component_will_mount
+            self.a = 20
+          end
+
+          def render
+            React.create_element("div") { self.a.to_s }
+          end
+        end
+
+        expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>20</div>")
+      end
+
+      it "should match the instance cycle to ReactComponent life cycle" do
+        `var count = 0;`
+
+        Foo.class_eval do
+          def initialize
+            `count = count + 1;`
+          end
+          def render
+            React.create_element("div")
+          end
+        end
+
+        renderToDocument(Foo)
+        renderToDocument(Foo)
+
+        expect(`count`).to eq(2)
+      end
     end
 
     describe "create element with properties" do

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react.rb
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - David Chang
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-22 00:00:00.000000000 Z
+date: 2015-02-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -155,7 +155,8 @@ files:
 - vendor/active_support/core_ext/kernel/singleton_class.rb
 - vendor/active_support/core_ext/module/remove_method.rb
 homepage: https://github.com/zetachang/react.rb
-licenses: []
+licenses:
+- MIT
 metadata: {}
 post_install_message: 
 rdoc_options: []