reactive-ruby 0.7.3 → 0.7.4

data/lib/reactive-ruby/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = "0.7.3"
+  VERSION = "0.7.4"
 end

data/old-readme

@@ -0,0 +1,220 @@
+and in your Opal application,
+
+```ruby
+require "opal-react"
+require "react"
+
+React.render(React.create_element('h1'){ "Hello World!" }, `document.body`)
+```
+
+For a complete example covering most key features, as well as integration with a server (Sinatra, etc), see setup of [Examples](example/tutorial).  For additional information on integrating Opal with a server see the [official docs](http://opalrb.org/docs/) of Opal.
+
+## React Overview
+
+### Basics
+
+The biggest problem with react is that its almost too simple.
+
+In react you define components.  Components are simply classes that have a "render" method.   The render method "draws" a chunk of
+HTML.  
+
+Here is a very simple component:
+
+```ruby
+
+require 'opal'
+require 'opal-react'
+
+class Hello
+  def render
+    "hello world"
+  end
+end
+
+# to use the component we first create an instance o
+
+Include the `React::Component` mixin in a class to turn it into a react component
+
+```ruby
+require 'opal'
+require 'opal-react'
+
+class HelloMessage
+
+  include React::Component                    # will create a new component named HelloMessage
+  
+  MSG = {great: 'Cool!', bad: 'Cheer up!'}
+
+  optional_param :mood
+  required_param :name
+  define_state   :foo, "Default greeting"
+
+  before_mount do                             # you can define life cycle callbacks inline
+    foo! "#{name}: #{MSG[mood]}" if mood      # change the state of foo using foo!, read the state using foo
+  end
+
+  after_mount :log                            # you can also define life cycle callbacks by reference to a method
+
+  def log
+    puts "mounted!"
+  end
+  
+  def render                                  # render method MUST return just one component  
+    div do                                    # basic dsl syntax component_name(options) { ...children... }                                    
+      span { "#{foo} #{name}!" }              # all html5 components are defined with lower case text
+    end
+  end
+end
+
+class App
+  include React::Component
+
+  def render
+    HelloMessage name: 'John', mood: :great   # new components are accessed via the class name
+  end
+end
+
+# later we will talk about nicer ways to do this:  For now wait till doc is loaded
+# then tell React to create an "App" and render it into the document body.
+
+`window.onload = #{lambda {React.render(React.create_element(App), `document.body`)}}`
+
+# -> console says: mounted!
+```
+
+* Callback of life cycle could be created through helpers `before_mount`, `after_mount`, etc
+* `this.props` is accessed through method `self.params`
+* Use helper method `define_state` to create setter & getter of `this.state` for you
+* For the detailed mapping to the original API, see [this issue](https://github.com/zetachang/react.rb/issues/2) for reference. Complete reference will come soon.
+
+### Element Building DSL
+
+As a replacement of JSX, include `React::Component` and you can build `React.Element` hierarchy without all the `React.create_element` noises.
+
+```ruby
+def render
+  div do
+    h1 { "Title" }
+    h2 { "subtitle"}
+    div(class_name: 'fancy', id: 'foo') { span { "some text #{interpolation}"} }
+    present FancyElement, fancy_props: '10'
+  end
+end
+```
+
+### Props validation
+
+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
+  include React::Component
+
+  params do
+    requires :username, type: String
+    requires :enum, values: ['foo', 'bar', 'awesome']
+    requires :payload, type: Todo # yeah, a plain Ruby class
+    optional :filters, type: Array[String]
+    optional :flash_message, type: String, default: 'Welcome!' # no need to feed through `getDefaultProps`
+  end
+
+  def render
+    div
+  end
+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
+```
+
+
+### A Simple Component
+
+A ruby class which define method `render` is a valid component.
+
+```ruby
+class HelloMessage
+  def render
+    React.create_element("div") { "Hello World!" }
+  end
+end
+
+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 snake-case method name.
+
+```ruby
+class HelloMessage
+  def initialize(native)
+    @native = Native(native)
+  end
+
+  def component_will_mount
+    puts "will mount!"
+  end
+
+  def render
+    React.create_element("div") { "Hello #{@native[:props][:name]}!" }
+  end
+end
+
+puts React.render_to_static_markup(React.create_element(HelloMessage, name: 'John'))
+
+# => will_mount!
+# => '<div>Hello John!</div>'
+```
+## Example
+
+* React Tutorial: see [example/react-tutorial](example/react-tutorial), the original CommentBox example.
+* TodoMVC: see [example/todos](example/todos), your beloved TodoMVC <3.

data/reactive-ruby.gemspec

@@ -1,5 +1,7 @@
 # -*- encoding: utf-8 -*-
-require File.expand_path('../lib/reactive-ruby/version', __FILE__)
+$:.push File.expand_path('../lib/', __FILE__)
+
+require 'reactive-ruby/version'
 
 Gem::Specification.new do |s|
   s.name         = 'reactive-ruby'
@@ -18,8 +20,9 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency 'opal'#, '~> 0.7.0'
   s.add_runtime_dependency 'opal-activesupport'
+  s.add_runtime_dependency 'opal-jquery'
+  s.add_runtime_dependency 'opal-browser'
   s.add_development_dependency 'react-source', '~> 0.12'
   s.add_development_dependency 'opal-rspec'
   s.add_development_dependency 'sinatra'
-  s.add_development_dependency 'opal-jquery'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: reactive-ruby
 version: !ruby/object:Gem::Version
-  version: 0.7.3
+  version: 0.7.4
 platform: ruby
 authors:
 - David Chang
@@ -39,27 +39,27 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: react-source
+  name: opal-jquery
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.12'
-  type: :development
+        version: '0'
+  type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.12'
+        version: '0'
 - !ruby/object:Gem::Dependency
-  name: opal-rspec
+  name: opal-browser
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-  type: :development
+  type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
@@ -67,7 +67,21 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: sinatra
+  name: react-source
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+- !ruby/object:Gem::Dependency
+  name: opal-rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -81,7 +95,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: opal-jquery
+  name: sinatra
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -103,7 +117,6 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - Gemfile
-- Gemfile.lock
 - LICENSE
 - README.md
 - config.ru
@@ -134,6 +147,67 @@ files:
 - example/todos/vendor/base.css
 - example/todos/vendor/bg.png
 - example/todos/vendor/jquery.js
+- example/tutorial/.gitignore
+- example/tutorial/Gemfile
+- example/tutorial/Gemfile.lock
+- example/tutorial/Gemfile.xlock
+- example/tutorial/README.rdoc
+- example/tutorial/Rakefile
+- example/tutorial/app/assets/images/.keep
+- example/tutorial/app/assets/javascripts/application.rb
+- example/tutorial/app/assets/stylesheets/application.css
+- example/tutorial/app/controllers/application_controller.rb
+- example/tutorial/app/controllers/concerns/.keep
+- example/tutorial/app/controllers/home_controller.rb
+- example/tutorial/app/helpers/application_helper.rb
+- example/tutorial/app/mailers/.keep
+- example/tutorial/app/models/.keep
+- example/tutorial/app/models/concerns/.keep
+- example/tutorial/app/views/components.rb
+- example/tutorial/app/views/components/home/show.rb
+- example/tutorial/app/views/layouts/application.html.erb
+- example/tutorial/bin/bundle
+- example/tutorial/bin/rails
+- example/tutorial/bin/rake
+- example/tutorial/bin/setup
+- example/tutorial/bin/spring
+- example/tutorial/config.ru
+- example/tutorial/config/application.rb
+- example/tutorial/config/boot.rb
+- example/tutorial/config/database.yml
+- example/tutorial/config/environment.rb
+- example/tutorial/config/environments/development.rb
+- example/tutorial/config/environments/production.rb
+- example/tutorial/config/environments/test.rb
+- example/tutorial/config/initializers/assets.rb
+- example/tutorial/config/initializers/backtrace_silencers.rb
+- example/tutorial/config/initializers/cookies_serializer.rb
+- example/tutorial/config/initializers/filter_parameter_logging.rb
+- example/tutorial/config/initializers/inflections.rb
+- example/tutorial/config/initializers/mime_types.rb
+- example/tutorial/config/initializers/session_store.rb
+- example/tutorial/config/initializers/wrap_parameters.rb
+- example/tutorial/config/locales/en.yml
+- example/tutorial/config/routes.rb
+- example/tutorial/config/secrets.yml
+- example/tutorial/db/seeds.rb
+- example/tutorial/lib/assets/.keep
+- example/tutorial/lib/tasks/.keep
+- example/tutorial/log/.keep
+- example/tutorial/public/404.html
+- example/tutorial/public/422.html
+- example/tutorial/public/500.html
+- example/tutorial/public/favicon.ico
+- example/tutorial/public/robots.txt
+- example/tutorial/test/controllers/.keep
+- example/tutorial/test/fixtures/.keep
+- example/tutorial/test/helpers/.keep
+- example/tutorial/test/integration/.keep
+- example/tutorial/test/mailers/.keep
+- example/tutorial/test/models/.keep
+- example/tutorial/test/test_helper.rb
+- example/tutorial/vendor/assets/javascripts/.keep
+- example/tutorial/vendor/assets/stylesheets/.keep
 - lib/rails-helpers/react_component.rb
 - lib/reactive-ruby.rb
 - lib/reactive-ruby/api.rb
@@ -154,6 +228,7 @@ files:
 - logo1.png
 - logo2.png
 - logo3.png
+- old-readme
 - reactive-ruby.gemspec
 - spec/callbacks_spec.rb
 - spec/component_spec.rb

data/Gemfile.lock

@@ -1,53 +0,0 @@
-GIT
-  remote: https://github.com/catprintlabs/opal.git
-  revision: 3682db6f2b23a584787a68d5338a7ee9cb35565a
-  specs:
-    opal (0.7.1)
-      hike (~> 1.2)
-      sourcemap (~> 0.1.0)
-      sprockets (>= 2.2.3, < 4.0.0)
-      tilt (~> 1.4)
-
-PATH
-  remote: .
-  specs:
-    reactive-ruby (0.7.3)
-      opal
-      opal-activesupport
-
-GEM
-  remote: https://rubygems.org/
-  specs:
-    hike (1.2.3)
-    opal-activesupport (0.1.0)
-      opal (>= 0.5.0, < 1.0.0)
-    opal-jquery (0.4.0)
-      opal (>= 0.7.0, < 0.9.0)
-    opal-rspec (0.4.3)
-      opal (>= 0.7.0, < 0.9)
-    rack (1.6.4)
-    rack-protection (1.5.3)
-      rack
-    react-source (0.13.3)
-    sinatra (1.4.6)
-      rack (~> 1.4)
-      rack-protection (~> 1.4)
-      tilt (>= 1.3, < 3)
-    sourcemap (0.1.1)
-    sprockets (3.3.2)
-      rack (~> 1.0)
-    tilt (1.4.1)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  opal!
-  opal-jquery
-  opal-rspec
-  react-source (~> 0.12)
-  reactive-ruby!
-  sinatra
-
-BUNDLED WITH
-   1.10.6