[WIP] React v0.13

CHANGELOG.md

@@ -1,3 +1,6 @@
+## react.js v0.13 
+* Add `React::Testing` helpers
+
 ## 0.3.0
 *  Depends on `sprockets < 3` thus source map can still work
 *  Remove sprockets-es6 from dependency

Gemfile

@@ -1,2 +1,4 @@
 source 'https://rubygems.org'
-gemspec
+gem 'opal', '0.8.0.rc1'
+gem 'opal-rspec', github: 'opal/opal-rspec'
+gemspec

Gemfile.lock

@@ -1,63 +1,66 @@
+GIT
+  remote: git://github.com/opal/opal-rspec.git
+  revision: e2290d56ff5147e5a2b96258ef5bdc2b54a9e6af
+  specs:
+    opal-rspec (0.4.2)
+      opal (>= 0.7.0, < 0.9)
+
 PATH
   remote: .
   specs:
     react.rb (0.3.0)
-      opal (~> 0.6.0)
+      opal (>= 0.7.0, < 0.9)
       opal-activesupport (~> 0)
       react-jsx (~> 0.8.0)
-      sprockets (>= 2.2.3, < 3.0.0)
+      react-source (~> 0.13)
+      sprockets (~> 3.1)
       therubyracer (~> 0)
 
 GEM
   remote: https://rubygems.org/
   specs:
     execjs (2.5.2)
     hike (1.2.3)
-    json (1.8.2)
+    json (1.8.3)
     libv8 (3.16.14.7)
-    multi_json (1.11.0)
-    opal (0.6.3)
-      source_map
-      sprockets
+    opal (0.8.0.rc1)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
     opal-activesupport (0.1.0)
       opal (>= 0.5.0, < 1.0.0)
     opal-jquery (0.2.0)
       opal (>= 0.5.0, < 1.0.0)
-    opal-rspec (0.3.0.beta3)
-      opal (>= 0.6.0, < 1.0.0)
-    rack (1.6.0)
+    rack (1.6.1)
     rack-protection (1.5.3)
       rack
     rake (10.4.2)
     react-jsx (0.8.0)
       execjs (>= 2.0.2)
       json (>= 1.8.0)
       react-source (>= 0.4.1)
-    react-source (0.12.2)
+    react-source (0.13.3)
     ref (1.0.5)
     sinatra (1.4.6)
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (>= 1.3, < 3)
-    source_map (3.0.1)
-      json
-    sprockets (2.12.3)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
+    sourcemap (0.1.1)
+    sprockets (3.2.0)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
     therubyracer (0.12.2)
       libv8 (~> 3.16.14.0)
       ref
-    tilt (1.4.1)
+    tilt (2.0.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  opal (= 0.8.0.rc1)
   opal-jquery (~> 0)
-  opal-rspec (~> 0.3.0.beta3)
+  opal-rspec!
   rake (~> 10)
-  react-source (~> 0.12.0)
   react.rb!
   sinatra (~> 1)

README.md

@@ -26,6 +26,27 @@ React.render(React.create_element('h1'){ "Hello World!" }, `document.body`)
 
 For integration with server (Sinatra, etc), see setup of [TodoMVC](example/todos) or the [official docs](http://opalrb.org/docs/) of Opal.
 
+## React.js Dependency
+
+React.js v0.13 is required to use react.rb, you can access the pre-bundled source through `Opal::React.bundled_path` directory, example below shows setup for a basic rack app.
+
+```ruby
+#config.ru
+run Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path Opal::React.bundled_path
+  s.main = 'example'
+  s.debug = true
+  s.index_path = "index.html.erb"
+}
+```
+
+```erb
+<!-- index.html.erb -->
+<%= javascript_include_tag "react" %>
+<%= javascript_include_tag "example" %>
+```
+
 ## Usage
 
 ### A Simple Component
@@ -46,25 +67,26 @@ puts React.render_to_static_markup(React.create_element(HelloMessage))
 
 ### 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 snake-case method name.
+To hook into native ReactComponent life cycle, the props will be passed as the first argument 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
-  def initialize(native)
-    @native = Native(native)
+  def initialize(props)
+    puts props
   end
 
   def component_will_mount
     puts "will mount!"
   end
 
   def render
-    React.create_element("div") { "Hello #{@native[:props][:name]}!" }
+    React.create_element("div") { "Hello #{self.props[:name]}!" }
   end
 end
 
 puts React.render_to_static_markup(React.create_element(HelloMessage, name: 'John'))
 
+# => {"name"=>"John"}
 # => will_mount!
 # => '<div>Hello John!</div>'
 ```

Rakefile

@@ -3,10 +3,9 @@ Bundler.require
 Bundler::GemHelper.install_tasks
 
 require 'opal/rspec/rake_task'
-require "react/source"
 
 Opal::RSpec::RakeTask.new(:default) do |s|
-  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons"))
+  s.append_path Opal::React.bundled_path
   s.append_path 'spec/vendor'
   s.index_path = 'spec/reactjs/index.html.erb'
-end
+end

config.ru

@@ -2,15 +2,14 @@ require 'bundler'
 Bundler.require
 
 require "opal-rspec"
-require "react/source"
 
 Opal.append_path File.expand_path('../spec', __FILE__)
 
 run Opal::Server.new { |s|
   s.main = 'opal/rspec/sprockets_runner'
   s.append_path 'spec'
   s.append_path 'spec/vendor'
-  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.append_path Opal::React.bundled_path
   s.debug = true
   s.index_path = 'spec/reactjs/index.html.erb'
 }

examples/todos/app/application.rb

@@ -14,7 +14,8 @@
 
   Vienna::Router.new.tap do |router|
     router.route('/:filter') do |params|
-      component.set_props(filter: params[:filter].empty? ? "all" : params[:filter])
+      element = React.create_element(TodoAppView, filter: params[:filter].empty? ? "all" : params[:filter])
+      component = React.render(element, `document.getElementById('todoapp')`)      
     end
   end.update
 

examples/todos/app/components/app.react.rb

@@ -17,6 +17,7 @@ class TodoAppView
     Todo.on(:create)  { Todo.adapter.sync_models(Todo); reload_current_filter }
     Todo.on(:update)  { Todo.adapter.sync_models(Todo); reload_current_filter }
     Todo.on(:destroy) { Todo.adapter.sync_models(Todo); reload_current_filter }
+    reload_current_filter
   end
 
   before_receive_props do |next_props|

lib/opal/react.rb

@@ -0,0 +1,8 @@
+require 'opal'
+require "opal-activesupport"
+
+require "opal/react/jsx_support"
+require "opal/react/source"
+
+Opal.append_path File.expand_path('../../../opal', __FILE__).untaint
+Opal.append_path File.expand_path('../../../vendor', __FILE__).untaint

lib/opal/react/jsx_support.rb

@@ -0,0 +1,22 @@
+require 'react/jsx'
+require 'tilt'
+require "sprockets"
+
+module Opal
+  module React
+    module JSX
+      class Template < Tilt::Template
+        self.default_mime_type = 'application/javascript'
+
+        def prepare
+        end
+
+        def evaluate(scope, locals, &block)
+          @output ||= ::React::JSX.compile(data)
+        end
+      end
+    end
+  end
+end
+
+Sprockets.register_engine '.jsx', Opal::React::JSX::Template

lib/opal/react/source.rb

@@ -0,0 +1,9 @@
+require "react/source"
+
+module Opal
+  module React
+    def self.bundled_path
+      File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+    end
+  end
+end

lib/opal/react/version.rb

@@ -0,0 +1,5 @@
+module Opal
+  module React
+    VERSION = "0.3.0"
+  end
+end

lib/react.rb

@@ -1,18 +1,18 @@
-if RUBY_ENGINE == 'opal'
-  require "react/top_level"
-  require "react/component"
-  require "react/element"
-  require "react/event"
-  require "react/version"
-  require "react/api"
-  require "react/validator"
-else
-  require "tilt"
-  require "opal"
-  require "react/version"
-  require "opal-activesupport"
-  require "react/ext/jsx_support"
-
-  Opal.append_path File.expand_path('../', __FILE__).untaint
-  Opal.append_path File.expand_path('../../vendor', __FILE__).untaint
-end
+# if RUBY_ENGINE == 'opal'
+#   require "react/top_level"
+#   require "react/component"
+#   require "react/element"
+#   require "react/event"
+#   require "react/version"
+#   require "react/component_factory"
+#   require "react/validator"
+# else
+#  require "tilt"
+#  require "opal"
+#  require "react/version"
+#  require "opal-activesupport"
+#  require "react/ext/jsx_support"
+require "opal/react"
+#  Opal.append_path File.expand_path('../', __FILE__).untaint
+#  Opal.append_path File.expand_path('../../vendor', __FILE__).untaint
+#end