reactive-ruby 0.7.28 → 0.7.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7b3ccefdd8c89194824329a42a3f700461a3349c
-  data.tar.gz: 8f93442f60fa15f99bc7545e125f11ac9fc5b11e
+  metadata.gz: 527fdef11e277159a4a1d5ad88da39bfbd35e62a
+  data.tar.gz: 9e6fde62b7bebb1e8aaec07afcc403e0a0392d2b
 SHA512:
-  metadata.gz: f49d3a2e156abbf32602e494a0c7fb356f090526ea8a19a3fc53d65e4d02be16dc84b79119cefcbc46ba25f280fe8f57085491a5780084db8453acce12b3da78
-  data.tar.gz: 7828530b6d13396f33d8a91bd1fd6c02b80d8ccb3a1209af0dc5001b49b43fc8668b77a5c8a5f8b2802d4fff05e13354a583ea5766285a1843422a7a6d94578a
+  metadata.gz: dc02bce0e1e5517ae2f8c1dffbce49369185caa17d643d33adbebd7c543adc67687953e26dcd99f74ca1da907a7858224541b250fd68c75db797bcdcad282765
+  data.tar.gz: de428600bfbd14dda2ab4afddc171607de11a6c12dc4306c7cdc833e1c3d7a8ba4c196e7487e0e08ef93b1132b495757f0107cdb1d61417e736b83cd0562ff28

data/.codeclimate.yml

@@ -0,0 +1,6 @@
+languages:
+  Ruby: true
+  JavaScript: false
+exclude_paths:
+- example/**/*
+- lib/sources/**/*

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    reactive-ruby (0.7.27)
+    reactive-ruby (0.7.28)
       opal
       opal-activesupport (>= 0.2.0)
       opal-browser
@@ -188,3 +188,6 @@ DEPENDENCIES
   sqlite3
   therubyracer
   timecop
+
+BUNDLED WITH
+   1.10.6

data/README.md

@@ -1,151 +1,212 @@
-# Reactive-Ruby
+# React.rb / Reactive-Ruby
 
-[![Build Status](https://travis-ci.org/zetachang/react.rb.svg?branch=reactive-ruby)](https://travis-ci.org/zetachang/react.rb)
+[![Join the chat at https://gitter.im/zetachang/react.rb](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zetachang/react.rb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/zetachang/react.rb.svg)](https://travis-ci.org/zetachang/react.rb)
+[![Code Climate](https://codeclimate.com/github/zetachang/react.rb/badges/gpa.svg)](https://codeclimate.com/github/zetachang/react.rb)
 
-**Reactive-Ruby is an [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 lets you write reactive UI components, with Ruby's elegance using the tried and true React.js engine. :heart:
+It lets you write reactive UI components, with Ruby's elegance using the tried
+and true React.js engine. :heart:
 
-This fork of the original react.rb gem is a work in progress.  Currently it is being used in a large rails app.  However the gem itself has no dependency on rails, and there are people using the gem in other environments.
+### What's this Reactive Ruby?
 
-## Quick Overview
+Reactive Ruby started as a fork of the original react.rb gem, and has since been
+merged back into react.rb's master branch. It aims to take react.rb a few steps
+further by embracing it's 'Ruby-ness'.
 
-A react app is built from one or more trees of components.  React components can live side by side with other non-react html and javascript. A react component is just like a rails view or a partial.  Reactive-Ruby takes advantage of these features by letting you add Reactive-Ruby components as views, and call them directly from your controller like any other view.
+Reactive-Ruby is maturing, but is still a work in progress. Currently it is
+being used in a large rails app. However the gem itself has no dependency on
+rails, and there are people using the gem in other environments.
 
-By design Reactive-Ruby allows reactive components  to be easily added to existing Rails projects, as well in new development. 
+Stable react.rb can be found in the
+[0-3-stable](https://github.com/zetachang/react.rb/tree/0-3-stable) branch.
 
-Components are first rendered to HTML on the server (called pre-rendering) this is no different from what happens when your ERB or HAML templates are translated to HTML.  
+## Quick Overview
 
-A copy of the react engine, and your components follows the rendered HTML to the browser, and then when a user interacts with the page, it is updated on the client.
+A react app is built from one or more trees of components.  React components can
+live side by side with other non-react html and javascript. A react component is
+just like a rails view or a partial.  Reactive-Ruby takes advantage of these
+features by letting you add Reactive-Ruby components as views, and call them
+directly from your controller like any other view.
 
-The beauty is you now have one markup description, written in the same language as your server code, that works both as the HTML template and as an interactive component.
+By design Reactive-Ruby allows reactive components  to be easily added to
+existing Rails projects, as well in new development.
 
-## Installation and Setup with Rails
+Components are first rendered to HTML on the server (called pre-rendering) this
+is no different from what happens when your ERB or HAML templates are translated
+to HTML.
 
-In your gem file:
+A copy of the react engine, and your components follows the rendered HTML to the
+browser, and then when a user interacts with the page, it is updated on the
+client.
 
-```ruby
-gem 'reactive-ruby'
+The beauty is you now have one markup description, written in the same language
+as your server code, that works both as the HTML template and as an interactive
+component.
 
-# the next three gems are for integration with rails (TODO - package these up as a reactive-rails gem)
+See the [wiki](https://github.com/zetachang/react.rb/wiki) for more details.
 
-gem 'therubyracer', platforms: :ruby # you need this for prerendering to work
-gem 'react-rails', git: "https://github.com/catprintlabs/react-rails.git", :branch => 'isomorphic-methods-support'  
-gem 'opal-rails'   
+## Using React.rb with Rails
 
-# if you are planning on using jQuery don't forget to include it
+### Installation
 
-gem 'jquery-rails'                   
+In your Gemfile:
+
+```ruby
+gem 'reactive-ruby'
+gem 'react-rails'
+gem 'opal-rails'
+gem 'therubyracer', platforms: :ruby # Required for prerendering
 ```
 
-Your react components will go into the `app/views/components/` directory of your rails app.
+Run `bundle install` and restart your rails server.
 
-In addition within your views directory you need a  `components.rb` manifest file like this:
+### Both Client & Server Side Assets (Components)
+
+Your react components will go into the `app/views/components/` directory of your
+rails app.
+
+Within your `app/views` directory you need to create a `components.rb` manifest.
+Files required in `app/views/components.rb` will be made available to the server
+side rendering system as well as the browser.
 
 ```
 # app/views/components.rb
 require 'opal'
 require 'reactive-ruby'
 require_tree './components'
-``` 
+```
 
-This pulls in the files that will be used both for server side and browser rendering.
+### Client Side Assets
 
-Then your `assets/javascript/application.rb` file looks like this:
+In `assets/javascript/application.rb` require your components manifest as well
+as any additional browser only assets.
 
 ```
-#assets/javascript/application.rb
+# assets/javascript/application.rb
+# Require files that are browser side only.
 
-# only put files that are browser side only.
+# Make components available by requiring your components.rb manifest.
+require 'components'
 
-require 'components'  # this pulls in your components from the components.rb manifest file  
-require 'react_ujs'   # this is required on the client side only and is part of the prerendering system
+# 'react_ujs' tells react in the browser to mount rendered components.
+require 'react_ujs'
 
-# require any thing else that is browser side only, typically  these 4 are all you need.  If you
-# have client only sections of code that that do not contain requires wrap them in 
-# if React::IsomorphicHelpers.on_opal_client? blocks.  
-
-require 'jquery'           # you need both these files to access jQuery from Opal
-require 'opal-jquery'      # they must be in this order, and after the components require
-require 'browser/interval' # for #every, and #after methods
+# Finally, require your other javascript assets. jQuery for example...
+require 'jquery'      # You need both these files to access jQuery from Opal.
+require 'opal-jquery' # They must be in this order.
 ```
 
-Okay that is your setup.
+### Rendering Components
 
-Now for a simple component.  We are going to render this from the `show` method of the home controller. We want to use  convention over configuration by default.  So the component will be the "Show" class, of the  "Home" module, 
-of the Components module.
+Components may be rendered directly from a controller action by simply following
+a naming convention. To render a component from the `home#show` action, create
+component class `Components::Home::Show`:
 
 ```ruby
 # app/views/components/home/show.rb
-
 module Components
-  
   module Home
-    
     class Show
+      include React::Component # will create a new component named Show
 
-      include React::Component   # will create a new component named Show
-      
       optional_param :say_hello_to
 
-      def render  
+      def render
         puts "Rendering my first component!"
-        "hello #{'there '+say_hello_to if say_hello_to}"  # render "hello" with optional 'there ...'
-      end
 
+        # render "hello" with optional 'say_hello_to' param
+        "hello #{say_hello_to if say_hello_to}"
+      end
     end
-    
   end
-  
 end
 ```
 
-Components work just like views so put this in your home controller
+Call `render_component` in the controller action passing in any params (React
+props), to render the component:
+
 ```ruby
 # controllers/home_controller.rb
 class HomeController < ApplicationController
   def show
-    render_component say_hello_to: params[:say_hello_to] # by default render_component will use the controller name to find the appropriate component
+    # render_component uses the controller name to find the 'show' component.
+    render_component say_hello_to: params[:say_hello_to] 
   end
 end
 ```
 
-Make sure your routes file has a route to your home#show method, and you have done a bundle install.  Fire up your development server and you should see "hello world" displayed.
+Make sure your routes file has a route to your home#show action. Visit that
+route in your browser and you should see 'Hello' rendered.
 
-Open up the js console in the browser and you will see a log showing what went on during the rendering.
+Open up the js console in the browser and you will see a log showing what went
+on during rendering.
 
-Have a look at the sources in the console, and notice your ruby code is there, and you can set break points etc.
+Have a look at the sources in the console, and notice your ruby code is there,
+and you can set break points etc.
 
 ### Changing the top level component name and search path
 
-You can control the top level component name and search path. 
+You can control the top level component name and search path.
 
-You can specify the component name explicitly in the `render_component` method.  `render_component "Blatz` will search the for a component class named
-`Blatz` regardless of the controller method.
+You can specify the component name explicitly in the `render_component` method.
+`render_component "Blatz` will search the for a component class named `Blatz`
+regardless of the controller method.
 
-Searching for components normally works like this:  Given a controller named "Foo" then the component should be either in the `Components::Foo` module, the
-`Components` module (no controller - useful if you have just a couple of shared components) or just the outer scope (i.e. `Module`) which is useful for small apps.
+Searching for components normally works like this:  Given a controller named
+"Foo" then the component should be either in the `Components::Foo` module, the
+`Components` module (no controller - useful if you have just a couple of shared
+components) or just the outer scope (i.e. `Module`) which is useful for small
+apps.
 
-Saying `render_component "::Blatz"` will only search the outer scope, while `"::Foo::Blatz"` will look only in the module `Foo` for a class named `Blatz`.
+Saying `render_component "::Blatz"` will only search the outer scope, while
+`"::Foo::Blatz"` will look only in the module `Foo` for a class named `Blatz`.
 
 
 ## Integration with Sinatra
 
-See the sinatra-tutorial folder
+See the [sinatra example](https://github.com/zetachang/react.rb/tree/master/example/sinatra-tutorial).
+
+## Contextual Code
+
+Sometimes it may be necessary to run code only on the server or only in the
+browser. To execute code only during server side rendering:
+
+```ruby
+if React::IsomorphicHelpers.on_opal_server?
+  puts 'Hello from the server'
+end
+```
+
+To execute code only in the browser:
+
+```ruby
+if React::IsomorphicHelpers.on_opal_client?
+  puts 'Hello from the browser'
+end
+```
 
 ## Typical Problems
 
-`Uncaught TypeError: Cannot read property 'toUpperCase' of undefined`  This means the thing you are trying to render is not actually a react component.  Often is because the top level component name is wrong.  For example if you are in controller Foo and the method is `bar`, but you have named the component Foo::Bars then you would see this message.
+`Uncaught TypeError: Cannot read property 'toUpperCase' of undefined`  This
+means the thing you are trying to render is not actually a react component.
+Often is because the top level component name is wrong.  For example if you are
+in controller Foo and the method is `bar`, but you have named the component
+Foo::Bars then you would see this message.
 
 ## Turning off Prerendering
 
-Sometimes its handy to switch off prerendering.  Add `?no_prerender=1` ... to your url.
+Sometimes its handy to switch off prerendering.  Add `?no_prerender=1` ... to
+your url.
 
 
 ## TODOS / Work arounds / Issues
 
 * Documentation
-* Should load the RubyRacer, or at least report an error if the RubyRacer is not present
+* Should load the RubyRacer, or at least report an error if the RubyRacer is not
+  present
 * Get everything to autoload what it needs (i.e. much less config setup)
 
 ## Developing
@@ -165,8 +226,10 @@ To run the above examples project yourself:
 
 ## Contributions
 
-This project is still in early stage, so discussion, bug report and PR are really welcome :wink:.
-We check in often at https://gitter.im/zetachang/react.rb ask for @catmando as David is on leave right now. 
+This project is still in early stage, so discussion, bug report and PR are
+really welcome :wink:.  We check in often at
+https://gitter.im/zetachang/react.rb ask for @catmando as David is on leave
+right now.
 
 ## Contact
 
@@ -174,4 +237,5 @@ We check in often at https://gitter.im/zetachang/react.rb ask for @catmando.
 
 ## License
 
-In short, React.rb is available under the MIT license. See the LICENSE file for more info.
+In short, React.rb is available under the MIT license. See the LICENSE file for
+more info.

data/Rakefile

@@ -7,11 +7,14 @@ require 'rspec/core/rake_task'
 require 'opal/rspec/rake_task'
 
 RSpec::Core::RakeTask.new('ruby:rspec')
-Opal::RSpec::RakeTask.new('opal:rspec')
+Opal::RSpec::RakeTask.new('opal:rspec') do |s|
+  s.append_path 'spec/vendor'
+  s.index_path = 'spec/index.html.erb'
+end
 
 task :test do
   Rake::Task['ruby:rspec'].invoke
-  # Rake::Task['opal:rspec'].invoke
+  Rake::Task['opal:rspec'].invoke
 end
 
 require 'generators/reactive_ruby/test_app/test_app_generator'

data/example/examples/Gemfile

@@ -1,9 +1,7 @@
 source 'http://rubygems.org'
 
-#gem 'opal'
 gem 'reactive-ruby', :path => '../..'
 gem 'sinatra'
 gem 'opal-jquery'
-#gem 'react-source'
 gem 'reactive-router'
 gem 'opal-rails'

data/example/rails-tutorial/Gemfile

@@ -1,9 +1,10 @@
 source 'https://rubygems.org'
 
 gem 'therubyracer', platforms: :ruby
-gem 'react-rails' #, git: "https://github.com/catprintlabs/react-rails.git", :branch => 'isomorphic-methods-support'  # you need this branch of react-rails
+gem 'react-rails'
 gem 'opal-rails'
-                # integrates opal with sprockets etc
+
+# integrates opal with sprockets etc
 gem 'reactive-ruby', path: "../.."
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

data/lib/generators/reactive_ruby/test_app/templates/application.rb

@@ -0,0 +1,11 @@
+require File.expand_path('../boot', __FILE__)
+
+require 'rails/all'
+
+# Require the gems listed in Gemfile, including any gems
+# you've limited to :test, :development, or :production.
+Bundler.require(*Rails.groups(assets: %w(development test)))
+
+require 'reactive-ruby'
+
+<%= application_definition %>

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

@@ -0,0 +1,2 @@
+require 'components'
+require 'react_ujs'

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

@@ -0,0 +1,3 @@
+require 'opal'
+require 'reactive-ruby'
+require_tree './components'

data/lib/generators/reactive_ruby/test_app/templates/boot.rb

@@ -0,0 +1,6 @@
+require 'rubygems'
+gemfile = File.expand_path("<%= gemfile_path %>", __FILE__)
+
+ENV['BUNDLE_GEMFILE'] = gemfile
+require 'bundler'
+Bundler.setup

data/lib/generators/reactive_ruby/test_app/templates/script/rails

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+APP_PATH = File.expand_path('../../config/application',  __FILE__)
+require File.expand_path('../../config/boot',  __FILE__)
+require 'rails/commands'

data/lib/generators/reactive_ruby/test_app/templates/views/components/hello_world.rb

@@ -0,0 +1,11 @@
+module Components
+  class HelloWorld
+    include React::Component
+
+    def render
+      div do
+        "Hello, World!".span
+      end
+    end
+  end
+end

data/lib/generators/reactive_ruby/test_app/templates/views/components/todo.rb

@@ -0,0 +1,14 @@
+module Components
+  class Todo
+    include React::Component
+    export_component
+
+    params do
+      requires :todo
+    end
+
+    def render
+      li { "#{params[:todo]}" }
+    end
+  end
+end

data/lib/generators/reactive_ruby/test_app/test_app_generator.rb

@@ -0,0 +1,105 @@
+require 'rails/generators/rails/app/app_generator'
+
+module ReactiveRuby
+  class TestAppGenerator < ::Rails::Generators::Base
+    def self.source_paths
+      paths = self.superclass.source_paths
+      paths << File.expand_path('../templates', __FILE__)
+      paths.flatten
+    end
+
+    def remove_existing_app
+      remove_dir(test_app_path) if File.directory?(test_app_path)
+    end
+
+    def generate_test_app
+      opts = options.dup
+      opts[:database] = 'sqlite3' if opts[:database].blank?
+      opts[:force] = true
+      opts[:skip_bundle] = true
+
+      puts "Generating Test Rails Application..."
+      invoke ::Rails::Generators::AppGenerator,
+        [ File.expand_path(test_app_path, destination_root) ], opts
+    end
+
+    def configure_test_app
+      template 'boot.rb', "#{test_app_path}/config/boot.rb", force: true
+      template 'application.rb', "#{test_app_path}/config/application.rb", force: true
+      template 'assets/javascripts/application.rb',
+        "#{test_app_path}/app/assets/javascripts/application.rb", force: true
+      template 'assets/javascripts/components.rb',
+        "#{test_app_path}/app/views/components.rb", force: true
+      template 'views/components/hello_world.rb',
+        "#{test_app_path}/app/views/components/hello_world.rb", force: true
+      template 'views/components/todo.rb',
+        "#{test_app_path}/app/views/components/todo.rb", force: true
+    end
+
+    def clean_superfluous_files
+      inside test_app_path do
+        remove_file '.gitignore'
+        remove_file 'doc'
+        remove_file 'Gemfile'
+        remove_file 'lib/tasks'
+        remove_file 'app/assets/images/rails.png'
+        remove_file 'app/assets/javascripts/application.js'
+        remove_file 'public/index.html'
+        remove_file 'public/robots.txt'
+        remove_file 'README.rdoc'
+        remove_file 'test'
+        remove_file 'vendor'
+        remove_file 'spec'
+      end
+    end
+
+    def configure_opal_rspec
+      inject_into_file "#{test_app_path}/config/application.rb",
+        after: /class Application < Rails::Application/, verbose: true do
+        %Q[
+    config.opal.method_missing = true
+    config.opal.optimized_operators = true
+    config.opal.arity_check = false
+    config.opal.const_missing = true
+    config.opal.dynamic_require_severity = :ignore
+    config.opal.enable_specs = true
+    config.opal.spec_location = 'spec-opal'
+]
+      end
+    end
+
+    protected
+
+    def application_definition
+      @application_definition ||= begin
+                                    test_application_contents
+                                  end
+    end
+    alias :store_application_definition! :application_definition
+
+    private
+
+    def test_app_path
+      'spec/test_app'
+    end
+
+    def test_application_path
+      File.expand_path("#{test_app_path}/config/application.rb",
+                       destination_root)
+    end
+
+    def test_application_contents
+      return unless File.exists?(test_application_path) && !options[:pretend]
+      contents = File.read(test_application_path)
+      contents[(contents.index("module #{module_name}"))..-1]
+    end
+
+    def module_name
+      'TestApp'
+    end
+
+    def gemfile_path
+      '../../../../Gemfile'
+    end
+  end
+end