react.rb 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d41b80ffb70a0cfd51d99327653c12283fc4507c
+  data.tar.gz: 7cf663a17b5c5ff75ada548badd48b47394a96b1
+SHA512:
+  metadata.gz: 0d1ecf283bed8249da9f488f5ceb37fdd398cc06ac7d83643be535b13df18a4e8bb69d000fc25e22b44189738e7170f7e2af9b2c6cc1827fd8410e6095cc9590
+  data.tar.gz: a785b76558b4c9832aa8ba53db2fbf28a07a0993b5bf83e32a4042157293a9ba1c658296d0733c5855cc6d108ca1215cb9ec005392a8485893cd41fbf1a7e984

data/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Ignore bundler config.
+.bundle

data/Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gemspec

data/Gemfile.lock

@@ -0,0 +1,48 @@
+PATH
+  remote: .
+  specs:
+    react.rb (0.0.1)
+      opal (~> 0.6.0)
+      opal-activesupport
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    hike (1.2.3)
+    json (1.8.2)
+    multi_json (1.10.1)
+    opal (0.6.3)
+      source_map
+      sprockets
+    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-protection (1.5.3)
+      rack
+    react-source (0.12.2)
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    source_map (3.0.1)
+      json
+    sprockets (2.12.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  opal-jquery
+  opal-rspec (~> 0.3.0.beta3)
+  react-source (~> 0.12)
+  react.rb!
+  sinatra

data/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2015 Yi-Cheng Chang (http://github.com/zetachang)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,166 @@
+# React.rb
+
+**React.rb is a [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:
+
+## Installation
+
+```ruby
+# Gemfile
+gem "react.rb"
+```
+
+and in your Opal application,
+
+```ruby
+require "opal"
+require "react"
+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.
+
+## Usage
+
+### 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
+
+React.render_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.
+
+```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>'
+```
+
+### React::Component
+
+Hey, we are using Ruby, simply include `React::Component` to save your typing and have some handy method defined.
+
+```ruby
+class HelloMessage
+  include React::Component
+  MSG = {great: 'Cool!', bad: 'Cheer up!'}
+
+  define_state(:foo) { "Default greeting" }
+
+  before_mount do
+    self.foo = "#{self.foo}: #{MSG[params[:mood]]}"
+  end
+
+  after_mount :log
+
+  def log
+    puts "mounted!"
+  end
+
+  def render
+    div do
+      span { self.foo + " #{params[:name]}!" }
+    end
+  end
+end
+
+class App
+  include React::Component
+
+  def render
+    present HelloMessage, name: 'John', mood: 'great'
+  end
+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!
+```
+
+* 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.
+
+### 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,
+
+```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
+```
+
+## Example
+
+* React Tutorial: see [example/react-tutorial](example/react-tutorial), the original CommentBox example.
+* TodoMVC: see [example/todos](example/todos), your beloved TodoMVC <3.
+
+## TODOS
+
+* Mixins examples
+* Documentation
+* API wrapping coverage of the original js library (pretty close though)
+* React Native?
+
+## Developing
+
+To run the test case of the project yourself.
+
+1. `git clone` the project
+2. `bundle install`
+3. `bundle exec rackup`
+4. Open `http://localhost:9292` to run the spec
+
+## Contributions
+
+This project is still in early stage, so discussion, bug report and PR are really welcome :wink:.
+
+## Contact
+
+[David Chang](http://github.com/zetachang)
+[@zetachang](https://twitter.com/zetachang)
+
+## License
+
+In short, React.rb is available under the MIT license. See the LICENSE file for more info.

data/config.ru

@@ -0,0 +1,15 @@
+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 File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.debug = true
+  s.index_path = 'spec/reactjs/index.html.erb'
+}

data/example/react-tutorial/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'react.rb', :path => '../..'
+gem 'sinatra'
+gem 'opal-jquery'
+gem 'react-source'

data/example/react-tutorial/Gemfile.lock

@@ -0,0 +1,45 @@
+PATH
+  remote: ../..
+  specs:
+    react.rb (0.0.1)
+      opal (~> 0.6.0)
+      opal-activesupport
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    hike (1.2.3)
+    json (1.8.2)
+    multi_json (1.10.1)
+    opal (0.6.3)
+      source_map
+      sprockets
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-jquery (0.2.0)
+      opal (>= 0.5.0, < 1.0.0)
+    rack (1.6.0)
+    rack-protection (1.5.3)
+      rack
+    react-source (0.12.2)
+    sinatra (1.4.5)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (~> 1.3, >= 1.3.4)
+    source_map (3.0.1)
+      json
+    sprockets (2.12.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    tilt (1.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  opal-jquery
+  react-source
+  react.rb!
+  sinatra

data/example/react-tutorial/README.md

@@ -0,0 +1,8 @@
+# React Tutorial
+
+This is a rewrite of original comment box example using React.rb from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html).
+
+## To use
+
+1. Make sure you use Bundler, then `bundle exec rackup`
+2. And visit <http://localhost:9292/>. Try opening multiple tabs!

data/example/react-tutorial/_comments.json

@@ -0,0 +1,6 @@
+[
+    {
+        "author": "Pete Hunt",
+        "text": "Hey there!"
+    }
+]

data/example/react-tutorial/config.ru

@@ -0,0 +1,55 @@
+# config.ru
+require 'bundler'
+Bundler.require
+
+require "react/source"
+
+Opal::Processor.source_map_enabled = true
+
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.main = 'example'
+  s.debug = true
+}
+
+map opal.source_maps.prefix do
+  run opal.source_maps
+end
+
+map '/assets' do
+  run opal.sprockets
+end
+
+get '/comments.json' do
+  comments = JSON.parse(open("./_comments.json").read)
+  JSON.generate(comments)
+end
+
+post "/comments.json" do
+  comments = JSON.parse(open("./_comments.json").read)
+  comments << JSON.parse(request.body.read)
+  File.write('./_comments.json', JSON.pretty_generate(comments, :indent => '    '))
+  JSON.generate(comments)
+end
+
+get '/' do
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Hello React</title>
+        <link rel="stylesheet" href="base.css" />
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
+        <script src="/assets/react-with-addons.min.js"></script>
+        <script src="/assets/example.js"></script>
+      </head>
+      <body>
+        <div id="content"></div>
+      </body>
+    </html>
+  HTML
+end
+
+run Sinatra::Application

data/example/react-tutorial/example.rb

@@ -0,0 +1,104 @@
+require 'opal'
+require 'opal-jquery'
+require "json"
+require 'react'
+
+class Window
+  def self.set_interval(delay, &block)
+    `window.setInterval(function(){#{block.call}}, #{delay.to_i})`
+  end
+end
+
+class Comment
+  include React::Component
+
+  def render
+    converter = Native(`new Showdown.converter()`)
+    raw_markup = converter.makeHtml(params[:children].to_s)
+    div class_name: "comment" do
+      h2(class_name: "commentAuthor") { params[:author] }
+      span(dangerously_set_inner_HTML: {__html: raw_markup}.to_n)
+    end
+  end
+end
+
+class CommentList
+  include React::Component
+
+  def render
+    div class_name: "commentList" do
+      params[:data].each_with_index.map do |comment, idx|
+        present(Comment, author: comment["author"], key: idx) { comment["text"] }
+      end
+    end
+  end
+end
+
+class CommentForm
+  include React::Component
+
+  def render
+    f = form(class_name: "commentForm") do
+      input type: "text", placeholder: "Your name", ref: "author"
+      input type: "text", placeholder: "Say something...", ref: "text"
+      input type: "submit", value: "Post"
+    end
+
+    f.on(:submit) do |event|
+      event.prevent_default
+      author = self.refs[:author].dom_node.value.strip
+      text = self.refs[:text].dom_node.value.strip
+      return if !text || !author
+      self.emit(:comment_submit, {author: author, text: text})
+      self.refs[:author].dom_node.value = ""
+      self.refs[:text].dom_node.value = ""
+    end
+  end
+end
+
+class CommentBox
+  include React::Component
+  after_mount :load_comments_from_server, :start_polling
+  define_state(:data) { [] }
+
+  def load_comments_from_server
+    HTTP.get(params[:url]) do |response|
+      if response.ok?
+        self.data = JSON.parse(response.body)
+      else
+        puts "failed with status #{response.status_code}"
+      end
+    end
+  end
+
+  def start_polling
+    Window.set_interval(params[:poll_interval]) { load_comments_from_server }
+  end
+
+  def handle_comment_submit(comment)
+    comments = self.data
+    comments.push(comment)
+    self.data = comments
+
+    HTTP.post(params[:url], payload: comment) do |response|
+      if response.ok?
+        self.data = JSON.parse(response.body)
+      else
+        puts "failed with status #{response.status_code}"
+      end
+    end
+  end
+
+  def render
+    div class_name: "commentBox" do
+      h1 { "Comments" }
+      present CommentList, data: self.data
+      present(CommentForm).on(:comment_submit) {|c| handle_comment_submit(c) }
+    end
+  end
+end
+
+
+Document.ready? do
+  React.render React.create_element(CommentBox, url: "comments.json", poll_interval: 2000), Element.find('#content').get(0)
+end