reactrb 0.8.8 → 0.9.0

data/.travis.yml

@@ -4,6 +4,26 @@ rvm:
   - 2.0.0
   - 2.1
   - jruby-19mode
+before_script:
+  - phantomjs --version
 script:
   - bundle exec rake test_app
   - bundle exec rake
+gemfile:
+  - gemfiles/opal_0.8_react_13.gemfile
+  - gemfiles/opal_0.8_react_14.gemfile
+  - gemfiles/opal_0.8_react_15.gemfile
+  - gemfiles/opal_0.9_react_13.gemfile
+  - gemfiles/opal_0.9_react_14.gemfile
+  - gemfiles/opal_0.9_react_15.gemfile
+
+# These two setup seems to run indefinitely long
+# further investigation required.
+matrix:
+  exclude:
+  - rvm: jruby-19mode
+    gemfile: gemfiles/opal_0.9_react_13.gemfile
+  - rvm: jruby-19mode
+    gemfile: gemfiles/opal_0.9_react_14.gemfile
+  - rvm: jruby-19mode
+    gemfile: gemfiles/opal_0.9_react_15.gemfile

data/Appraisals

@@ -0,0 +1,20 @@
+opal_versions = ['0.8', '0.9']
+react_versions_map = {
+  '13' => '~> 1.3.3',
+  '14' => '~> 1.6.2',
+  '15' => '~> 1.8.2'
+}
+opal_rails_versions_map = {
+  '0.8' => '~> 0.8.1',
+  '0.9' => '~> 0.9.0',
+}
+
+opal_versions.each do |opal_v|
+  react_versions_map.each do |react_v, react_rails_v|
+    appraise "opal-#{opal_v}-react-#{react_v}" do
+      gem 'opal', "~> #{opal_v}.0"
+      gem 'opal-rails', opal_rails_versions_map[opal_v]
+      gem 'react-rails', react_rails_v, require: false
+    end
+  end
+end

data/CHANGELOG.md

@@ -18,12 +18,37 @@ Whitespace conventions:
 - 1 spaces before normal text
  -->
 
+## [0.9.0] - Unreleased
+
+### Added
+
+- `react/react-source` is the suggested way to include ReactJS sources now. Simply require `react/react-source` immediately before the `require "reactrb"` in your Opal code will make it work.
+
+### Deprecated
+
+- `react-latest` & `react-v1x` is deprecated. Use `react/react-source` instead.
+
+### Removed
+
+- `opal-browser` is removed from runtime dependency. (#133)
+
+### Fixed
+
+- `$window#on` in `opal-jquery` is broken. (#166)
+- `Element#render` trigger unnecessary re-mounts when called multiple times. (#170)
+- Gets rid of react warnings about updating state during render (#155)
+- Multiple HAML classes (i.e. div.foo.bar) was not working (regression introduced in 0.8.8)
+- Don't send nil (null) to form components as the value string (#157)
+- Process `params` (props) correctly when using `Element#on` or `Element#render` (#158)
+- Deprecate shallow param compare (#156)
+
+
 ## [0.8.8] - 2016-07-13
 
 ### Added
 
 - More helpful error messages on render failures (#152)
-- `Element#on('<my_event_name>')` subscribes `my_event_name` (#153)
+- `Element#on('<my_event_name>')` subscribes to `my_event_name` (#153)
 
 ### Changed
 
@@ -31,12 +56,12 @@ Whitespace conventions:
 
 ### Deprecated
 
-- `Element#(:event)` subscription to `_onEvent` is deprecated. Once you have changed params named `_on...` to `on_...` you can `require 'reactrb/new-event-name-convention.rb'` to avoid spurious react warning messages. (#153)
+- `Element#on(:event)` subscription to `_onEvent` is deprecated. Once you have changed params named `_on...` to `on_...` you can `require 'reactrb/new-event-name-convention.rb'` to avoid spurious react warning messages. (#153)
 
 
 ### Fixed
 
-- when using the Element['#container'].render... method generates spurious react error (#154)
+- The `Element['#container'].render...` method generates a spurious react error (#154)
 
 
 

data/Gemfile

@@ -1,7 +1,6 @@
 source 'https://rubygems.org'
-#gem 'opal-rails', git: "https://github.com/opal/opal-rails.git"
-#gem 'opal', "~> 0.9.x"
-#gem 'opal-rails', git: "https://github.com/reactrb/opal-rails.git"
-#gem 'opal-rspec-rails', git: 'https://github.com/reactrb/opal-rspec-rails.git'
-gem 'pry'
 gemspec
+
+group :development do
+  gem "appraisal"
+end

data/README.md

@@ -1,7 +1,7 @@
 # Reactrb / Reactive-Ruby
 
 [![Join the chat at https://gitter.im/reactrb/chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/reactrb/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Build Status](https://travis-ci.org/reactrb/reactrb.svg)](https://travis-ci.org/reactrb/reactrb)
+[![Build Status](https://travis-ci.org/reactrb/reactrb.svg?branch=master)](https://travis-ci.org/reactrb/reactrb)
 [![Code Climate](https://codeclimate.com/github/reactrb/reactrb/badges/gpa.svg)](https://codeclimate.com/github/reactrb/reactrb)
 [![Gem Version](https://badge.fury.io/rb/reactrb.svg)](https://badge.fury.io/rb/reactrb)
 
@@ -11,7 +11,7 @@
 It lets you write reactive UI components, with Ruby's elegance using the tried
 and true React.js engine. :heart:
 
-[**Visit reactrb.org For The Full Story**](http://reactrb.org)
+[**Visit ruby-hyperloop.io For The Full Story**](http://ruby-hyperloop.io)
 
 ### Important: `react.rb` and `reactive-ruby` gems are **deprecated.** Please [read this!](#upgrading-to-reactrb)
 
@@ -23,7 +23,7 @@ Install the gem, or load the js library
 + `gem install reactrb` or
 + install (or load via cdn) [reactrb-express.js](http://github.com/reactrb/reactrb-express)
 
-For gem installation it is highly recommended to read [the getting started section at reactrb.org](http://reactrb.org/docs/getting-started.html)
+For gem installation it is highly recommended to read the [getting started](http://ruby-hyperloop.io/get_started/) and [installation](http://ruby-hyperloop.io/installation/) guides at [ruby-hyperloop.io](http://ruby-hyperloop.io)
 
 ## Quick Overview
 
@@ -72,13 +72,10 @@ It is very unlikely that there will be any more releases of the `reactive-ruby`
 There are no syntactic or semantic breaking changes between `reactrb` v 0.8.x and
 previous versions, however the `reactrb` gem does *not* include the react-js source as previous versions did.  This allows you to pick the react js source compatible with other gems and react js components you may be using.
 
-To upgrade, replace `reactive-ruby` with `reactrb`, both in your Gemfile, and in any `requires` in your code.   You will also need to require react-js as this is no longer included in the gem.  
+Follow these steps to upgrade:
 
-If you are using react-rails then simply find anyplace where you `require 'reactrb'` and immediately before this do a `require 'react'` which will load the compatible react js file.
-
-If you are using webpack then add `react` to your manifest.
-
-If you are not using react-rails then find where you `require 'reactrb'` and immediately before this do a `require 'react-latest'` (or 'react-v13', 'react-v14' or 'react-v15')
+1. Replace `reactive-ruby` with `reactrb` both in **Gemfile** and any `require`s in your code.
+2. To include the React.js source, the suggested way is to add `require 'react/react-source'` before `require 'reactrb'`. This will use the copy of React.js source from `react-rails` gem.
 
 # Roadmap
 

data/Rakefile

@@ -2,14 +2,19 @@ require 'bundler'
 Bundler.require
 Bundler::GemHelper.install_tasks
 
+# Store the BUNDLE_GEMFILE env, since rake or rspec seems to clean it
+# while invoking task.
+ENV['REAL_BUNDLE_GEMFILE'] = ENV['BUNDLE_GEMFILE']
 
 require 'rspec/core/rake_task'
 require 'opal/rspec/rake_task'
 
 RSpec::Core::RakeTask.new('ruby:rspec')
-Opal::RSpec::RakeTask.new('opal:rspec') do |s|
+
+Opal::RSpec::RakeTask.new('opal:rspec') do |s, task|
   s.append_path 'spec/vendor'
   s.index_path = 'spec/index.html.erb'
+  task.timeout = 80000 if task
 end
 
 task :test do

data/config.ru

@@ -4,21 +4,22 @@ Bundler.require
 require "opal/rspec"
 require "opal-jquery"
 
-Opal.append_path File.expand_path('../spec', __FILE__)
-
-sprockets_env = Opal::RSpec::SprocketsEnvironment.new rescue nil
-if sprockets_env
+if Opal::RSpec.const_defined?("SprocketsEnvironment")
+  sprockets_env = Opal::RSpec::SprocketsEnvironment.new
+  sprockets_env.cache = Sprockets::Cache::FileStore.new("tmp")
+  sprockets_env.add_spec_paths_to_sprockets
   run Opal::Server.new(sprockets: sprockets_env) { |s|
     s.main = 'opal/rspec/sprockets_runner'
-    sprockets_env.add_spec_paths_to_sprockets
     s.debug = false
+    s.append_path 'spec/vendor'
     s.index_path = 'spec/index.html.erb'
   }
 else
   run Opal::Server.new { |s|
     s.main = 'opal/rspec/sprockets_runner'
     s.append_path 'spec'
-    s.debug = true
+    s.append_path 'spec/vendor'
+    s.debug = false
     s.index_path = 'spec/index.html.erb'
   }
 end

data/gemfiles/opal_0.8_react_13.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.8.0"
+gem "opal-rails", "~> 0.8.1"
+gem "react-rails", "~> 1.3.3", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/gemfiles/opal_0.8_react_14.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.8.0"
+gem "opal-rails", "~> 0.8.1"
+gem "react-rails", "~> 1.6.2", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/gemfiles/opal_0.8_react_15.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.8.0"
+gem "opal-rails", "~> 0.8.1"
+gem "react-rails", "~> 1.8.2", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/gemfiles/opal_0.9_react_13.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.9.0"
+gem "opal-rails", "~> 0.9.0"
+gem "react-rails", "~> 1.3.3", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/gemfiles/opal_0.9_react_14.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.9.0"
+gem "opal-rails", "~> 0.9.0"
+gem "react-rails", "~> 1.6.2", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/gemfiles/opal_0.9_react_15.gemfile

@@ -0,0 +1,13 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "opal", "~> 0.9.0"
+gem "opal-rails", "~> 0.9.0"
+gem "react-rails", "~> 1.8.2", :require => false
+
+group :development do
+  gem "appraisal"
+end
+
+gemspec :path => "../"

data/lib/generators/reactive_ruby/test_app/templates/assets/javascripts/components.rb

@@ -1,4 +1,4 @@
 require 'opal'
-require 'react'
+require 'react/react-source'
 require 'reactrb'
 require_tree './components'

data/lib/rails-helpers/top_level_rails_component.rb

@@ -12,7 +12,7 @@ module React
     param :controller
     param :render_params
 
-    backtrace :on
+    backtrace :off
 
     def render
       paths_searched = []

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

@@ -59,19 +59,19 @@ module React
           },
           componentWillReceiveProps: function(next_props) {
             var instance = this._getOpalInstance.apply(this);
-            return #{`instance`.component_will_receive_props(`next_props`) if type.method_defined? :component_will_receive_props};
+            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?(`next_props`, `next_state`) if type.method_defined? :should_component_update?};
+            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(`next_props`, `next_state`) if type.method_defined? :component_will_update};
+            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(`prev_props`, `prev_state`) if type.method_defined? :component_did_update};
+            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);
@@ -110,16 +110,17 @@ module React
         raise "#{type} not implemented"
       end
 
-      # Passed in properties
-      params << convert_props(properties)
+      # Convert Passed in properties
+      properties = convert_props(properties)
+      params << properties.shallow_to_n
 
       # Children Nodes
       if block_given?
-        children = [yield].flatten.each do |ele|
+        [yield].flatten.each do |ele|
           params << ele.to_n
         end
       end
-      return React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
+      React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
     end
 
     def self.clear_component_class_cache
@@ -139,19 +140,19 @@ module React
         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
+          props[React.html_attr?(lower_camelize(key)) ? lower_camelize(key) : key] = value
         end
       end
-      props.shallow_to_n
+      props
     end
 
     private
 
     def self.lower_camelize(snake_cased_word)
-      words = snake_cased_word.split("_")
+      words = snake_cased_word.split('_')
       result = [words.first]
       result.concat(words[1..-1].map {|word| word[0].upcase + word[1..-1] })
-      result.join("")
+      result.join('')
     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

@@ -17,6 +17,7 @@ module React
       base.include(Callbacks)
       base.include(Tags)
       base.include(DslInstanceMethods)
+      base.include(ShouldComponentUpdate)
       base.class_eval do
         class_attribute :initial_state
         define_callback :before_mount
@@ -42,35 +43,22 @@ module React
       @native = native_element
     end
 
-    def render
-      raise "no render defined"
-    end unless method_defined?(:render)
-
-    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})
-      else
-        set_state({name => value})
-      end rescue nil
-    end
-
     def emit(event_name, *args)
-      self.params["_on#{event_name.to_s.event_camelize}"].call(*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?
-      @props_wrapper = self.class.props_wrapper.new(Hash.new(`#{@native}.props`))
       set_state! initial_state if initial_state
       State.initialize_states(self, initial_state)
-      State.set_state_context_to(self) { self.run_callback(:before_mount) }
+      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
-        self.run_callback(:after_mount)
+        run_callback(:after_mount)
         State.update_states_to_observe
       end
     rescue Exception => e
@@ -85,35 +73,8 @@ module React
       self.class.process_exception(e, self)
     end
 
-    def props_changed?(next_props)
-      return true unless props.keys.sort == next_props.keys.sort
-      props.detect { |k, v| `#{next_props[k]} != #{params[k]}`}
-    end
-
-    def should_component_update?(next_props, next_state)
-      State.set_state_context_to(self) do
-        next_props = Hash.new(next_props)
-        if self.respond_to?(:needs_update?)
-          !!self.needs_update?(next_props, Hash.new(next_state))
-        elsif false # switch to true to force updates per standard react
-          true
-        elsif props_changed? next_props
-          true
-        elsif `!next_state != !#{@native}.state`
-          true
-        elsif `!next_state && !#{@native}.state`
-          false
-        elsif `next_state["***_state_updated_at-***"] != #{@native}.state["***_state_updated_at-***"]`
-          true
-        else
-          false
-        end.to_n
-      end
-    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)) }
-      @props_wrapper = self.class.props_wrapper.new(Hash.new(next_props), @props_wrapper)
     rescue Exception => e
       self.class.process_exception(e, self)
     end
@@ -138,11 +99,32 @@ module React
 
     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) do
-        React::RenderingContext.render(nil) {render || ""}.tap { |element| @waiting_on_resources = element.waiting_on_resources if element.respond_to? :waiting_on_resources }
+      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
 
@@ -153,6 +135,5 @@ module React
     def define_state(*args, &block)
       State.initialize_states(self, self.class.define_state(*args, &block))
     end
-
   end
 end